/* ============================================
   TECHVISION — Premium Responsive CSS
   ============================================ */

:root {
    --primary: #0a192f;
    --primary-light: #112240;
    --accent: #38bdf8;
    --accent-dark: #0284c7;
    --gold: #f59e0b;
    --gold-light: #fbbf24;
    --green: #25D366;
    --white: #f8fafc;
    --white-muted: #94a3b8;
    --white-dim: rgba(248,250,252,0.06);
    --white-border: rgba(248,250,252,0.08);
    --bg: #020c1b;
    --card-bg: #0d1f35;
    --glass: rgba(13,31,53,0.75);
    --font: 'Tajawal', sans-serif;
    --radius: 14px;
    --radius-lg: 20px;
    --shadow: 0 20px 60px rgba(0,0,0,0.5);
    --shadow-accent: 0 8px 32px rgba(56,189,248,0.25);
    --transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{
    font-family:var(--font);background:var(--bg);color:var(--white);
    line-height:1.7;overflow-x:hidden;width:100%;position:relative;
    /* منع التكبير غير المقصود عند النقر على العناصر */
    -webkit-text-size-adjust:100%;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
/* إزالة تأثير النقر الأزرق على الجوال */
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
/* تحسين عرض النص العربي */
p,h1,h2,h3,h4,h5,h6,span,li{word-break:break-word;}

.container{max-width:1180px;margin:0 auto;padding:0 20px;}
.text-center{text-align:center;}
.section{padding:80px 0;}
.gradient-text{
    background:linear-gradient(135deg,var(--accent) 0%,var(--gold-light) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 0.65s ease,transform 0.65s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.delay-1{transition-delay:0.12s;}
.delay-2{transition-delay:0.24s;}
.delay-3{transition-delay:0.36s;}

/* Section Header */
.section-header{text-align:center;margin-bottom:56px;}
.section-tag{
    display:inline-block;padding:5px 16px;
    background:rgba(56,189,248,0.1);color:var(--accent);
    border:1px solid rgba(56,189,248,0.3);border-radius:50px;
    font-size:0.8rem;font-weight:700;letter-spacing:0.05em;margin-bottom:14px;
}
.section-title{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:800;margin-bottom:12px;line-height:1.25;}
.section-desc{font-size:1rem;color:var(--white-muted);max-width:560px;margin:0 auto;}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;gap:9px;
    padding:12px 24px;border-radius:50px;
    font-family:var(--font);font-size:0.95rem;font-weight:700;
    cursor:pointer;border:none;transition:var(--transition);white-space:nowrap;
    /* حجم نقرة مريح: 44px على الأقل */
    min-height:44px;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--bg);box-shadow:var(--shadow-accent);}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 36px rgba(56,189,248,0.45);}
.btn-outline{background:transparent;color:var(--white);border:2px solid var(--white-border);backdrop-filter:blur(8px);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.btn-whatsapp{background:linear-gradient(135deg,#25D366,#128C7E);color:white;box-shadow:0 8px 24px rgba(37,211,102,0.35);}
.btn-whatsapp:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 36px rgba(37,211,102,0.55);}

/* ============ NAVBAR ============ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;transition:var(--transition);padding:16px 0;}
.navbar.scrolled{
    background:rgba(2,12,27,0.94);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--white-border);padding:10px 0;
    box-shadow:0 4px 30px rgba(0,0,0,0.5);
}
.nav-container{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer;}
.logo-icon{
    width:40px;height:40px;
    background:linear-gradient(135deg,var(--accent),var(--gold));
    border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;color:var(--bg);box-shadow:0 4px 14px rgba(56,189,248,0.4);
}
.logo-text{display:flex;flex-direction:column;line-height:1.1;}
.logo-ar{font-size:1rem;font-weight:800;color:var(--white);}
.logo-en{font-size:0.65rem;font-weight:500;color:var(--accent);letter-spacing:0.1em;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:0.9rem;font-weight:500;color:var(--white-muted);transition:color 0.3s;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform 0.3s;}
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark)) !important;
    color:var(--bg) !important;padding:9px 20px !important;border-radius:50px !important;font-weight:700 !important;
}
.nav-cta::after{display:none !important;}
.nav-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-accent);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:var(--transition);}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;flex-direction:column;background:rgba(2,12,27,0.98);backdrop-filter:blur(20px);border-top:1px solid var(--white-border);padding:12px 20px;}
.mobile-menu.open{display:flex;}
.mobile-link{padding:12px 0;font-size:1rem;font-weight:600;color:var(--white-muted);border-bottom:1px solid var(--white-border);transition:color 0.3s;}
.mobile-link:last-child{border-bottom:none;}
.mobile-link:hover{color:var(--accent);}
.mobile-cta{margin-top:12px;text-align:center;padding:13px !important;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--bg) !important;border-radius:50px;font-weight:700;border-bottom:none !important;}

/* ============ HERO ============ */
.hero{
    position:relative;min-height:100vh;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* على الجوال نقلل الحد الأدنى لتتناسب مع ارتفاع الشاشة الفعلي */
@supports (min-height: 100dvh) {
    .hero { min-height: 100dvh; }
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg-img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2,12,27,0.6) 0%,rgba(2,12,27,0.75) 60%,var(--bg) 100%);}
.particles{position:absolute;inset:0;overflow:hidden;}
.particle{position:absolute;width:4px;height:4px;background:var(--accent);border-radius:50%;opacity:0.5;animation:floatParticle linear infinite;}
.particle:nth-child(1){left:10%;top:20%;animation-duration:8s;}
.particle:nth-child(2){left:25%;top:70%;animation-duration:10s;animation-delay:1s;width:5px;height:5px;background:var(--gold);}
.particle:nth-child(3){left:60%;top:30%;animation-duration:7s;animation-delay:2s;}
.particle:nth-child(4){left:75%;top:80%;animation-duration:12s;animation-delay:0.5s;width:3px;height:3px;}
.particle:nth-child(5){left:85%;top:15%;animation-duration:9s;animation-delay:3s;background:var(--gold);}
.particle:nth-child(6){left:40%;top:55%;animation-duration:6s;animation-delay:1.5s;width:5px;height:5px;}
@keyframes floatParticle{0%{transform:translateY(0) scale(1);opacity:0.5;}50%{transform:translateY(-70px) scale(1.2);opacity:1;}100%{transform:translateY(0) scale(1);opacity:0.5;}}

.hero-content{position:relative;z-index:1;text-align:center;padding:110px 20px 70px;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(56,189,248,0.1);border:1px solid rgba(56,189,248,0.3);border-radius:50px;font-size:0.82rem;font-weight:700;color:var(--accent);margin-bottom:22px;}
.hero-title{display:flex;flex-direction:column;font-size:clamp(2.2rem,5.5vw,4.5rem);font-weight:900;line-height:1.15;margin-bottom:20px;}
.title-line{display:block;}
.hero-subtitle{font-size:clamp(0.95rem,1.8vw,1.15rem);color:var(--white-muted);max-width:620px;margin:0 auto 28px;line-height:1.8;}

/* Hero Tags */
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:32px;}
.hero-tag{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 14px;background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1);border-radius:50px;
    font-size:0.82rem;font-weight:600;color:var(--white-muted);
    transition:var(--transition);
}
.hero-tag:hover{background:rgba(56,189,248,0.12);border-color:rgba(56,189,248,0.3);color:var(--accent);}
.hero-tag i{font-size:0.8rem;color:var(--accent);}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

/* Scroll Indicator */
.scroll-indicator{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--white-muted);font-size:0.72rem;animation:bounceY 2s ease-in-out infinite;z-index:1;}
.scroll-mouse{width:24px;height:36px;border:2px solid rgba(255,255,255,0.25);border-radius:12px;display:flex;justify-content:center;padding-top:5px;}
.scroll-wheel{width:3px;height:7px;background:var(--accent);border-radius:2px;animation:scrollWheel 2s ease infinite;}
@keyframes scrollWheel{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(10px);opacity:0;}}
@keyframes bounceY{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-7px);}}

/* ============ SERVICES ============ */
.services-section{background:var(--bg);}

/* Featured Cards */
.service-featured{
    background:var(--card-bg);border:1px solid var(--white-border);
    border-radius:var(--radius-lg);overflow:hidden;margin-bottom:28px;
    position:relative;transition:var(--transition);
}
.service-featured:hover{border-color:rgba(56,189,248,0.4);box-shadow:var(--shadow),0 0 0 1px rgba(56,189,248,0.1);}
.featured-badge{
    position:absolute;top:16px;right:16px;z-index:10;
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 14px;border-radius:50px;font-size:0.78rem;font-weight:700;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--bg);
    box-shadow:0 4px 14px rgba(56,189,248,0.4);
}
.featured-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold)) !important;box-shadow:0 4px 14px rgba(251,191,36,0.4) !important;}
.service-featured-inner{display:grid;grid-template-columns:1fr 1.4fr;}
.service-featured-reverse{direction:ltr;}
.service-featured-reverse .service-body{direction:rtl;}

/* Small Cards Grid — min() \u062a\u0645\u0646\u0639 \u0627\u0644\u062a\u062c\u0627\u0648\u0632 \u0639\u0644\u0649 \u0627\u0644\u062c\u0648\u0627\u0644 */
.services-grid-small{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;}

/* Common Card */
.service-card{background:var(--card-bg);border:1px solid var(--white-border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition);}
.service-card:not(.service-featured):hover{transform:translateY(-8px);border-color:rgba(56,189,248,0.4);box-shadow:var(--shadow);}
.service-img-wrap{position:relative;height:200px;overflow:hidden;}
.service-img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.service-card:hover .service-img{transform:scale(1.07);}
.service-featured:hover .service-img{transform:scale(1.04);}
.service-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2,12,27,0.05),rgba(2,12,27,0.8));}
.service-icon-floating{
    position:absolute;bottom:14px;right:16px;
    width:48px;height:48px;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    border-radius:12px;display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;color:var(--bg);box-shadow:0 6px 20px rgba(56,189,248,0.5);transition:var(--transition);
}
.service-card:hover .service-icon-floating{transform:scale(1.1) rotate(-5deg);}

/* البطاقات الرقمية — بدلاً من الصورة: خلفية تدرجية مع أيقونة مركزية */
.service-img-digital{background:transparent;}
.service-img-digital-bg{
    position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(56,189,248,0.15) 0%,rgba(14,165,233,0.08) 50%,rgba(2,12,27,0.9) 100%);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
.service-img-digital-bg::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 80% 80% at 50% 30%,rgba(56,189,248,0.18) 0%,transparent 70%);
}
/* تسويق رقمي — تدرج بنفسجي-أزرق */
.service-img-digital-bg--marketing{
    background:linear-gradient(135deg,rgba(139,92,246,0.2) 0%,rgba(56,189,248,0.1) 50%,rgba(2,12,27,0.9) 100%);
}
.service-img-digital-bg--marketing::before{
    background:radial-gradient(ellipse 80% 80% at 50% 30%,rgba(139,92,246,0.2) 0%,transparent 70%);
}
/* أيقونة كبيرة مركزية */
.service-img-icon-large{
    font-size:4.5rem;
    color:rgba(56,189,248,0.35);
    position:relative;z-index:1;
    transition:transform 0.5s ease,color 0.3s;
}
.service-img-digital-bg--marketing .service-img-icon-large{
    color:rgba(139,92,246,0.35);
}
a.service-card-link:hover .service-img-icon-large{
    transform:scale(1.1);
    color:rgba(56,189,248,0.55);
}
a.service-card-link:hover .service-img-digital-bg--marketing .service-img-icon-large{
    color:rgba(139,92,246,0.55);
}
/* أيقونة العائمة مختلفة للخدمات الرقمية */
.service-icon-globe{
    background:linear-gradient(135deg,var(--accent),#0ea5e9);
}
.service-icon-chart{
    background:linear-gradient(135deg,#8b5cf6,#6d28d9);
    box-shadow:0 6px 20px rgba(139,92,246,0.5);
}

.service-body{padding:24px 28px;}
.service-body h3{font-size:1.25rem;font-weight:800;margin-bottom:10px;}
.service-body p{color:var(--white-muted);font-size:0.92rem;margin-bottom:18px;line-height:1.7;}
.service-seo-desc{color:var(--white-muted);font-size:0.92rem;margin-bottom:20px;line-height:1.7;}

/* Sub-features (for featured cards) */
.service-sub-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sub-feat{
    display:flex;align-items:center;gap:9px;
    padding:9px 12px;background:rgba(56,189,248,0.05);
    border:1px solid rgba(56,189,248,0.12);border-radius:9px;
    font-size:0.83rem;color:var(--white-muted);transition:var(--transition);
}
.sub-feat:hover{background:rgba(56,189,248,0.1);border-color:rgba(56,189,248,0.3);color:var(--white);}
.sub-feat i{color:var(--accent);font-size:0.85rem;width:16px;flex-shrink:0;}

/* Small card features */
.service-features{display:flex;flex-direction:column;gap:7px;}
.service-features li{display:flex;align-items:center;gap:9px;font-size:0.87rem;color:var(--white-muted);}
.service-features li i{color:var(--accent);font-size:0.75rem;}

/* ============ WHY US ============ */
.why-section{background:linear-gradient(180deg,var(--bg) 0%,var(--primary-light) 50%,var(--bg) 100%);}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:24px;}
.why-card{
    background:var(--glass);backdrop-filter:blur(10px);
    border:1px solid var(--white-border);border-radius:var(--radius);
    padding:32px 24px;text-align:center;transition:var(--transition);
}
.why-card:hover{border-color:rgba(56,189,248,0.4);transform:translateY(-6px);box-shadow:var(--shadow-accent);}
.why-icon{
    width:64px;height:64px;margin:0 auto 18px;
    background:linear-gradient(135deg,rgba(56,189,248,0.15),rgba(56,189,248,0.05));
    border:2px solid rgba(56,189,248,0.2);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;color:var(--accent);transition:var(--transition);
}
.why-card:hover .why-icon{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:var(--bg);border-color:var(--accent);box-shadow:0 8px 24px rgba(56,189,248,0.4);}
.why-card h3{font-size:1.1rem;font-weight:700;margin-bottom:10px;}
.why-card p{color:var(--white-muted);font-size:0.9rem;}

/* ============ STATS ============ */
.stats-section{
    background:linear-gradient(135deg,#0a192f 0%,#020c1b 100%);
    border-top:1px solid var(--white-border);border-bottom:1px solid var(--white-border);
    padding:72px 0;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;}
.stat-item{position:relative;}
.stat-item::after{content:'';position:absolute;top:50%;right:0;transform:translateY(-50%);width:1px;height:50px;background:var(--white-border);}
.stat-item:last-child::after{display:none;}
.stat-number{
    font-size:clamp(2.5rem,5vw,4rem);font-weight:900;
    background:linear-gradient(135deg,var(--accent),var(--gold-light));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    line-height:1;display:inline-block;
}
.stat-plus,.stat-slash{font-size:clamp(1.2rem,2.5vw,2rem);font-weight:900;color:var(--accent);display:inline-block;vertical-align:top;margin-top:6px;}
.stat-label{font-size:0.88rem;color:var(--white-muted);font-weight:600;margin-top:8px;}

/* ============ TESTIMONIALS ============ */
.testimonials-section{background:var(--bg);}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.testimonial-card{background:var(--card-bg);border:1px solid var(--white-border);border-radius:var(--radius);padding:28px;transition:var(--transition);position:relative;}
.testimonial-card::before{content:'"';position:absolute;top:18px;left:24px;font-size:4rem;font-family:Georgia,serif;color:rgba(56,189,248,0.12);line-height:1;}
.testimonial-card:hover{border-color:rgba(56,189,248,0.3);transform:translateY(-5px);box-shadow:var(--shadow);}
.testimonial-stars{display:flex;gap:4px;margin-bottom:14px;}
.testimonial-stars i{color:var(--gold);font-size:0.88rem;}
.testimonial-text{color:var(--white-muted);font-size:0.92rem;line-height:1.8;margin-bottom:20px;font-style:italic;}
.testimonial-author{display:flex;align-items:center;gap:12px;}
.author-avatar{width:44px;height:44px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--bg);flex-shrink:0;}
.author-name{font-size:0.95rem;font-weight:700;}
.author-title{font-size:0.76rem;color:var(--white-muted);margin-top:2px;}

/* ============ CONTACT ============ */
.contact-section{background:linear-gradient(180deg,var(--bg) 0%,var(--primary-light) 100%);}
/* هنا نستخدم minmax لتجنب تجاوز عرض الشاشة على الجوال */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px;align-items:stretch;}
.contact-info-card{background:var(--card-bg);border:1px solid var(--white-border);border-radius:var(--radius-lg);padding:36px;display:flex;flex-direction:column;}
.contact-detail{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--white-border);}
.contact-detail.last{border-bottom:none;margin-bottom:24px;}
.contact-detail-icon{width:44px;height:44px;background:rgba(56,189,248,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1rem;flex-shrink:0;}
.contact-detail h4{font-size:0.78rem;color:var(--accent);font-weight:700;margin-bottom:3px;text-transform:uppercase;letter-spacing:0.05em;}
.contact-detail p{color:var(--white);font-size:0.95rem;font-weight:500;}
.contact-phone{font-size:1.3rem !important;font-weight:800 !important;color:var(--accent) !important;letter-spacing:0.05em;}
.contact-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;}

/* Location Visual */
.contact-visual{ display:block; }
.location-card{
    background:var(--card-bg);border:1px solid var(--white-border);
    border-radius:var(--radius-lg);padding:40px 36px;
    display:flex;flex-direction:column;align-items:center;
    text-align:center;height:100%;justify-content:center;gap:28px;
}
.location-map-visual{position:relative;width:100px;height:100px;display:flex;align-items:center;justify-content:center;}
.map-pin-ring{
    position:absolute;width:80px;height:80px;
    border:2px solid rgba(56,189,248,0.3);border-radius:50%;
    animation:pingRing 2s ease-out infinite;
}
.map-pin-ring.delay{animation-delay:1s;}
.map-pin{
    width:56px;height:56px;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;color:var(--bg);
    box-shadow:0 8px 28px rgba(56,189,248,0.5);z-index:1;position:relative;
}
@keyframes pingRing{0%{transform:scale(0.8);opacity:1;}100%{transform:scale(1.8);opacity:0;}}
.location-info h3{font-size:1.2rem;font-weight:800;}
.location-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;}
.location-tags span{
    padding:5px 12px;background:rgba(56,189,248,0.08);
    border:1px solid rgba(56,189,248,0.15);border-radius:50px;
    font-size:0.8rem;color:var(--white-muted);
}
.location-note{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:0.85rem;font-weight:600;margin-top:4px;}
.location-note i{color:var(--green);}

/* ============ FOOTER ============ */
.footer{background:var(--primary);border-top:1px solid var(--white-border);padding:56px 0 0;}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--white-border);}
.footer-brand .nav-logo{margin-bottom:12px;}
.footer-brand p{color:var(--white-muted);font-size:0.88rem;max-width:280px;line-height:1.8;}
.footer-seo-keywords{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.footer-seo-keywords span{font-size:0.72rem;color:var(--accent);opacity:0.6;padding:3px 8px;border:1px solid rgba(56,189,248,0.15);border-radius:4px;}
.footer-links h4,.footer-contact h4{font-size:0.95rem;font-weight:700;margin-bottom:16px;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{color:var(--white-muted);font-size:0.88rem;transition:color 0.3s;display:flex;align-items:center;gap:8px;}
.footer-links a i{color:var(--accent);font-size:0.8rem;width:14px;}
.footer-links a:hover{color:var(--accent);}
.footer-contact{display:flex;flex-direction:column;gap:12px;}
.footer-contact-link{display:flex;align-items:center;gap:10px;color:var(--white-muted);font-size:0.88rem;transition:color 0.3s;}
.footer-contact-link i{color:var(--accent);font-size:0.95rem;width:18px;}
.footer-contact-link:hover{color:var(--white);}
.footer-location{display:flex;align-items:center;gap:10px;color:var(--white-muted);font-size:0.88rem;}
.footer-location i{color:var(--accent);width:18px;}
.footer-bottom{text-align:center;padding:20px 0;}
.footer-bottom p{color:var(--white-muted);font-size:0.8rem;}

/* ============ FAQ ============ */
.faq-section{background:linear-gradient(180deg,var(--bg) 0%,var(--primary-light) 100%);}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:16px;max-width:1100px;margin:0 auto;}
.faq-item{background:var(--card-bg);border:1px solid var(--white-border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);}
.faq-item:hover{border-color:rgba(56,189,248,0.3);}
.faq-item.open{border-color:rgba(56,189,248,0.4);}
.faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 22px;background:none;border:none;cursor:pointer;
    font-family:var(--font);font-size:0.95rem;font-weight:700;color:var(--white);
    text-align:right;
    /* حجم نقرة مريح على الجوال */
    min-height:56px;
}
.faq-q:hover{color:var(--accent);}
.faq-icon{color:var(--accent);font-size:0.85rem;transition:transform 0.3s ease;flex-shrink:0;}
.faq-item.open .faq-icon{transform:rotate(180deg);}
.faq-a{
    max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s ease;
    color:var(--white-muted);font-size:0.9rem;line-height:1.8;padding:0 22px;
}
.faq-item.open .faq-a{max-height:300px;padding:0 22px 20px;}

/* ============ FLOATING WHATSAPP ============ */
.floating-whatsapp{
    position:fixed;
    bottom:100px;
    left:24px;
    z-index:999;
    width:56px;height:56px;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:white;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.6rem;
    box-shadow:0 6px 24px rgba(37,211,102,0.5);
    transition:var(--transition);
}
.floating-whatsapp:hover{transform:scale(1.15);box-shadow:0 12px 36px rgba(37,211,102,0.7);}
.floating-tooltip{
    position:absolute;left:64px;right:auto;
    background:var(--card-bg);color:var(--white);
    padding:6px 12px;border-radius:8px;font-size:0.82rem;font-weight:600;
    white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity 0.3s;border:1px solid var(--white-border);
}
.floating-whatsapp:hover .floating-tooltip{opacity:1;}

/* ============================================================
   MOBILE STICKY ACTION BAR — شريط الإجراءات الثابت
   يظهر فقط على الجوال في الأسفل دائماً
   ============================================================ */
.mobile-action-bar{
    display:none;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:998;
    background:rgba(2,12,27,0.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--white-border);
    /* مسافات أصغر وأكثر اتساقاً */
    padding:8px 16px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 24px rgba(0,0,0,0.4);
}
.mobile-action-bar-inner{
    display:flex;gap:8px;
    max-width:440px;margin:0 auto;
}
.mob-action-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    /* حجم مدمج ومتسق */
    padding:10px 12px;border-radius:10px;
    font-family:var(--font);font-size:0.88rem;font-weight:700;
    border:none;cursor:pointer;transition:var(--transition);
    min-height:42px;text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    letter-spacing:0.01em;
}
.mob-action-btn-wa{
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff;box-shadow:0 3px 12px rgba(37,211,102,0.35);
    flex:1.3;
}
.mob-action-btn-wa:active{opacity:0.9;transform:scale(0.97);}
.mob-action-btn-call{
    background:rgba(56,189,248,0.08);
    color:var(--accent);
    border:1px solid rgba(56,189,248,0.25);
    flex:1;
}
.mob-action-btn-call:active{opacity:0.9;transform:scale(0.97);}
/* حجم أصغر للأيقونة */
.mob-action-btn i{font-size:0.9rem;}

/* ============================================================
   SERVICE CARDS — بطاقات قابلة للنقر
   ============================================================ */
/* رابط يغطي البطاقة بالكامل */
a.service-card-link{
    display:block;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}
/* البطاقات المميزة: grid داخل الرابط */
a.service-card-link.service-featured-inner{
    display:grid;
    grid-template-columns:1fr 1.4fr;
}
/* على الجوال: عمود واحد */
@media (max-width:900px){
    a.service-card-link.service-featured-inner{
        grid-template-columns:1fr;
    }
}
/* سهم العنوان — يظهر عند التحويم */
.service-title-arrow{
    font-size:0.7em;
    color:var(--accent);
    opacity:0;
    transform:translateX(6px);
    transition:opacity 0.3s,transform 0.3s;
    display:inline-block;
    vertical-align:middle;
    margin-right:4px;
}
a.service-card-link:hover .service-title-arrow{
    opacity:1;
    transform:translateX(0);
}
/* لون العنوان عند التحويم */
a.service-card-link:hover h3{
    color:var(--accent);
    transition:color 0.3s;
}
/* على الجوال: السهم دائماً ظاهر للإشارة إلى النقر */
@media (max-width:640px){
    .service-title-arrow{ opacity:0.7; transform:translateX(0); }
}
/* رابط عرض التفاصيل */
.service-more{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:14px;
    font-size:0.82rem;font-weight:700;color:var(--accent);
    opacity:0;transform:translateY(4px);
    transition:opacity 0.3s,transform 0.3s;
}
a.service-card-link:hover .service-more{
    opacity:1;transform:translateY(0);
}
.service-more i{font-size:0.75rem;}



/* =====================================================
   RESPONSIVE — مصمم بعناية للجوال والتابلت
   ===================================================== */

/* تابلت كبير */
@media (max-width: 1024px) {
    .service-featured-inner { grid-template-columns: 1fr 1.2fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .stat-item::after { display: none; }
    .google-ads-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* تابلت */
@media (max-width: 900px) {
    .nav-links  { display: none; }
    .nav-toggle { display: flex; }

    /* خدمات */
    .service-featured-inner { grid-template-columns: 1fr; }
    .service-featured-inner .service-img-wrap { height: 230px; }
    .service-featured-reverse { direction: rtl; }
    .sub-feat { font-size: 0.8rem; }

    /* تواصل */
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-visual { order: -1; }
    .location-card {
        padding: 28px 22px;
        flex-direction: row;
        text-align: right;
        gap: 20px;
    }
    .location-map-visual { flex-shrink: 0; }

    /* فوتر */
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-brand { grid-column: 1 / -1; }
}

/* جوال — التصميم البشري الحقيقي */
@media (max-width: 640px) {

    /* — قواعد عامة — */
    .container { padding: 0 18px; }
    .section   { padding: 56px 0; }

    /* — Navbar — */
    .navbar.scrolled { padding: 8px 0; }
    .logo-icon  { width: 36px; height: 36px; font-size: 1rem; }
    .logo-ar    { font-size: 0.92rem; }

    /* — Mobile Menu — */
    .mobile-menu { padding: 8px 18px 16px; }
    .mobile-link {
        padding: 13px 0;
        font-size: 0.97rem;
    }
    /* حجم نقرة مريح على الجوال */
    .mobile-dropdown-toggle {
        padding: 14px 0;
        font-size: 0.97rem;
        min-height: 48px;
    }
    .mobile-submenu a {
        padding: 11px 14px;
        font-size: 0.88rem;
        min-height: 44px;
    }
    .mobile-cta {
        margin-top: 10px;
        padding: 15px !important;
        font-size: 1rem;
    }

    /* — Hero — أهم قسم على الجوال — */
    .hero-content {
        padding: 88px 18px 52px;
        text-align: right; /* عربي = يمين */
    }
    .hero-badge {
        font-size: 0.76rem;
        padding: 5px 13px;
        margin-bottom: 18px;
    }
    .hero-title {
        font-size: clamp(1.8rem, 7.5vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: 14px;
        text-align: right;
    }
    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.75;
        margin: 0 0 22px;
        text-align: right;
        max-width: 100%;
    }
    .hero-tags {
        justify-content: flex-start;
        gap: 7px;
        margin-bottom: 26px;
    }
    .hero-tag {
        font-size: 0.76rem;
        padding: 6px 11px;
    }
    /* إخفاء العلامات الزائدة — أنظف مظهراً */
    .hero-tag:nth-child(n+5) { display: none; }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    /* الزر الرئيسي كامل العرض، الثانوي أصغر */
    .hero-actions .btn:first-child {
        width: 100%;
        justify-content: center;
        padding: 15px 24px;
        font-size: 1rem;
    }
    .hero-actions .btn:not(:first-child) {
        width: auto;
        align-self: flex-start;
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    /* — رؤوس الأقسام — */
    .section-header {
        margin-bottom: 36px;
        text-align: right;
    }
    .section-tag    { font-size: 0.74rem; padding: 4px 12px; margin-bottom: 10px; }
    .section-title  { font-size: clamp(1.35rem, 5.5vw, 1.75rem); line-height: 1.25; }
    .section-desc   { font-size: 0.9rem; text-align: right; margin: 0; }

    /* — بطاقات الخدمات — */
    .services-grid-small    { grid-template-columns: 1fr; gap: 16px; }
    .service-card           { border-radius: 12px; }
    .service-img-wrap       { height: 190px; }
    .service-body           { padding: 18px 20px; }
    .service-body h3        { font-size: 1.1rem; margin-bottom: 8px; }
    .service-body p         { font-size: 0.88rem; margin-bottom: 14px; }
    .service-sub-features   { grid-template-columns: 1fr; gap: 8px; }
    .service-features li    { font-size: 0.86rem; }

    /* — إحصائيات — */
    .stats-section  { padding: 48px 0; }
    .stats-grid     { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .stat-item      {
        padding: 24px 12px;
        border-bottom: 1px solid var(--white-border);
    }
    .stat-item:nth-child(odd)  { border-left: 1px solid var(--white-border); }
    .stat-item:nth-child(3),
    .stat-item:nth-child(4)    { border-bottom: none; }
    .stat-number  { font-size: clamp(2rem, 8vw, 2.8rem); }
    .stat-plus, .stat-slash { font-size: 1.3rem; }
    .stat-label   { font-size: 0.8rem; margin-top: 5px; }

    /* — لماذا نحن — */
    .why-grid {
        /* عمودين على الجوال — أكثر إثارة من عمود واحد */
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .why-card  { padding: 20px 14px; }
    .why-icon  { width: 50px; height: 50px; font-size: 1.3rem; margin-bottom: 12px; }
    .why-card h3 { font-size: 0.92rem; margin-bottom: 5px; }
    .why-card p  { font-size: 0.8rem; line-height: 1.6; }

    /* — الشهادات — */
    .testimonials-grid { grid-template-columns: 1fr; gap: 14px; }
    .testimonial-card  { padding: 20px; }
    .testimonial-card::before { font-size: 3rem; top: 12px; left: 16px; }
    .testimonial-text  { font-size: 0.88rem; margin-bottom: 14px; }
    .author-avatar     { width: 38px; height: 38px; font-size: 0.9rem; }
    .author-name       { font-size: 0.9rem; }
    .author-title      { font-size: 0.73rem; }

    /* — الأسئلة — */
    .faq-grid { grid-template-columns: 1fr; gap: 10px; }
    .faq-q    { padding: 14px 16px; font-size: 0.9rem; }
    .faq-a    { font-size: 0.86rem; }

    /* — تواصل — */
    .contact-info-card  { padding: 20px; border-radius: 12px; }
    .contact-detail     { gap: 10px; margin-bottom: 16px; padding-bottom: 16px; }
    .contact-detail-icon { width: 38px; height: 38px; font-size: 0.9rem; }
    .contact-detail h4  { font-size: 0.72rem; }
    .contact-detail p   { font-size: 0.9rem; }
    .contact-buttons    { flex-direction: column; gap: 10px; }
    .contact-buttons .btn {
        justify-content: center;
        width: 100%;
        padding: 14px 18px;
        font-size: 0.92rem;
    }
    .location-card      { flex-direction: column; text-align: center; padding: 24px 18px; }

    /* — فوتر — */
    .footer-inner       { grid-template-columns: 1fr; gap: 28px; }
    .footer-brand       { grid-column: auto; }
    .footer-brand p     { font-size: 0.86rem; }
    .footer-links a, .footer-contact-link { font-size: 0.88rem; }
    .footer-bottom p    { font-size: 0.76rem; }

    /* — WhatsApp عائم — على الجوال يعلو الشريط الثابت */
    .floating-whatsapp {
        /* مخفي على الجوال — الشريط الثابت يكفي */
        display: none;
    }
    .floating-tooltip { display: none; }

    /* — تفعيل الشريط الثابت — */
    .mobile-action-bar { display: block; }

    /* مسافة سفلية للمحتوى حتى لا يختبئ خلف الشريط */
    body { padding-bottom: 80px; }
    .footer { padding-bottom: 80px !important; }

    /* — قسم المدن — */
    .cities-section  { padding: 56px 0; }
    .cities-tabs-bar { gap: 6px; margin-bottom: 28px; }
    .city-tab        { font-size: 0.76rem; padding: 8px 12px; }
    .city-header     { padding: 14px 16px; gap: 12px; }
    .city-header-icon { width: 42px; height: 42px; font-size: 1.1rem; }
    .city-header-text h3 { font-size: 1rem; }
    .city-header-text p  { font-size: 0.8rem; }
    .city-services-grid  { grid-template-columns: 1fr; padding: 14px; gap: 8px; }
    .city-service-link   { padding: 11px 12px; font-size: 0.86rem; min-height: 44px; }

    /* — قسم Google Ads — */
    .google-ads-section  { padding: 56px 0; }
    .google-ads-stats    { padding: 22px; gap: 20px; }
    .ads-counter-num     { font-size: 2.4rem; }
    .gads-stat-label     { font-size: 0.8rem; }
    .gads-feat           { padding: 10px 12px; gap: 10px; }
    .gads-feat span      { font-size: 0.86rem; }
    .gads-feat small     { font-size: 0.74rem; }
    .gads-feat-icon      { width: 32px; height: 32px; font-size: 0.9rem; }
    .gads-cta-bar        { flex-direction: column; text-align: center; padding: 16px; gap: 12px; }
    .gads-cta-bar p      { font-size: 0.86rem; }
    .btn-google          { width: 100%; justify-content: center; }
}

/* هواتف صغيرة جداً */
@media (max-width: 390px) {
    .container  { padding: 0 14px; }
    .hero-title { font-size: 1.65rem; }
    .section-title { font-size: 1.3rem; }
    .why-grid   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .why-card   { padding: 16px 10px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-number { font-size: 1.9rem; }
    .hero-actions .btn:first-child { padding: 13px 20px; font-size: 0.95rem; }
}



/* ============================================================
   SERVICE PAGES — أنماط الصفحات المستقلة
   ============================================================ */

/* ---- Breadcrumb ---- */
.breadcrumb{
    padding:72px 0 0;
    background:var(--primary);
    border-bottom:1px solid var(--white-border);
}
.breadcrumb-inner{
    display:flex;align-items:center;gap:8px;
    padding:14px 0;font-size:0.82rem;color:var(--white-muted);
    flex-wrap:wrap;
}
.breadcrumb-inner a{color:var(--accent);transition:color 0.3s;}
.breadcrumb-inner a:hover{color:var(--white);}
.breadcrumb-inner i{font-size:0.65rem;color:var(--white-muted);}
.breadcrumb-inner span{color:var(--white);font-weight:600;}

/* ---- Page Hero (أصغر من hero الرئيسية) ---- */
.page-hero{
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 50%,#091a30 100%);
    padding:56px 0 72px;
    position:relative;overflow:hidden;
    border-bottom:1px solid var(--white-border);
}
.page-hero::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(56,189,248,0.08) 0%,transparent 70%);
}
.page-hero-content{position:relative;z-index:1;max-width:720px;}
.page-hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 14px;background:rgba(56,189,248,0.1);
    border:1px solid rgba(56,189,248,0.3);border-radius:50px;
    font-size:0.78rem;font-weight:700;color:var(--accent);margin-bottom:18px;
}
.page-hero h1{
    font-size:clamp(1.8rem,4vw,3rem);font-weight:900;
    line-height:1.2;margin-bottom:16px;
}
.page-hero-desc{
    font-size:clamp(0.95rem,1.6vw,1.08rem);
    color:var(--white-muted);line-height:1.8;margin-bottom:28px;max-width:640px;
}
.page-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.page-hero-img-wrap{
    position:relative;border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:var(--shadow),0 0 0 1px rgba(56,189,248,0.15);
}
.page-hero-img-wrap img{width:100%;height:300px;object-fit:cover;display:block;}
.page-hero-img-overlay{
    position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(2,12,27,0.2),rgba(2,12,27,0.05));
}
.page-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}

/* ---- Features Grid (شبكة مميزات الخدمة) ---- */
.features-section{background:var(--bg);padding:80px 0;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.feature-card{
    background:var(--card-bg);border:1px solid var(--white-border);
    border-radius:var(--radius);padding:28px 22px;
    transition:var(--transition);text-align:center;
}
.feature-card:hover{border-color:rgba(56,189,248,0.4);transform:translateY(-5px);box-shadow:var(--shadow-accent);}
.feature-icon{
    width:60px;height:60px;margin:0 auto 16px;
    background:linear-gradient(135deg,rgba(56,189,248,0.12),rgba(56,189,248,0.04));
    border:2px solid rgba(56,189,248,0.2);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;color:var(--accent);transition:var(--transition);
}
.feature-card:hover .feature-icon{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:var(--bg);border-color:var(--accent);box-shadow:0 8px 24px rgba(56,189,248,0.4);
}
.feature-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;}
.feature-card p{color:var(--white-muted);font-size:0.87rem;line-height:1.7;}

/* ---- Process Steps ---- */
.process-section{
    background:linear-gradient(180deg,var(--bg) 0%,var(--primary-light) 50%,var(--bg) 100%);
    padding:80px 0;
}
.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;position:relative;}
.process-steps::before{
    content:'';position:absolute;top:32px;right:0;left:0;height:2px;
    background:linear-gradient(90deg,var(--accent),var(--gold-light),var(--accent));
    opacity:0.2;
}
.process-step{
    background:var(--card-bg);border:1px solid var(--white-border);
    padding:28px 20px;text-align:center;position:relative;
    transition:var(--transition);
}
.process-step:first-child{border-radius:var(--radius) 0 0 var(--radius);}
.process-step:last-child{border-radius:0 var(--radius) var(--radius) 0;}
.process-step:not(:first-child){border-right:none;}
.process-step:hover{background:var(--primary-light);border-color:rgba(56,189,248,0.3);z-index:1;}
.step-number{
    width:56px;height:56px;margin:0 auto 14px;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;font-weight:900;color:var(--bg);
    box-shadow:0 6px 20px rgba(56,189,248,0.4);
}
.process-step h3{font-size:0.95rem;font-weight:700;margin-bottom:8px;}
.process-step p{color:var(--white-muted);font-size:0.83rem;line-height:1.6;}

/* ---- Specs / Detail List ---- */
.specs-section{background:var(--bg);padding:80px 0;}
.specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.specs-list{display:flex;flex-direction:column;gap:14px;}
.spec-item{
    display:flex;align-items:flex-start;gap:14px;
    background:var(--card-bg);border:1px solid var(--white-border);
    border-radius:var(--radius);padding:16px 18px;
    transition:var(--transition);
}
.spec-item:hover{border-color:rgba(56,189,248,0.3);}
.spec-item-icon{
    width:38px;height:38px;flex-shrink:0;
    background:rgba(56,189,248,0.1);border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);font-size:1rem;
}
.spec-item h4{font-size:0.9rem;font-weight:700;margin-bottom:4px;}
.spec-item p{font-size:0.83rem;color:var(--white-muted);line-height:1.6;}

/* ---- Service CTA Section ---- */
.service-cta-section{
    background:linear-gradient(135deg,var(--primary) 0%,#091a30 100%);
    padding:80px 0;border-top:1px solid var(--white-border);
    border-bottom:1px solid var(--white-border);
    text-align:center;position:relative;overflow:hidden;
}
.service-cta-section::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 50% 100% at 50% 50%,rgba(56,189,248,0.06) 0%,transparent 70%);
}
.service-cta-content{position:relative;z-index:1;}
.service-cta-section h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;margin-bottom:14px;}
.service-cta-section p{color:var(--white-muted);font-size:1rem;max-width:520px;margin:0 auto 32px;line-height:1.8;}
.cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.cta-phone{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 28px;background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.15);border-radius:50px;
    font-size:1rem;font-weight:800;color:var(--white);
    transition:var(--transition);letter-spacing:0.05em;
}
.cta-phone:hover{border-color:var(--accent);color:var(--accent);}

/* ---- Services Nav (links between service pages) ---- */
.services-nav-section{background:var(--primary);padding:48px 0;border-top:1px solid var(--white-border);}
.services-nav-title{font-size:1rem;font-weight:700;color:var(--white-muted);margin-bottom:18px;text-align:center;}
.services-nav-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.services-nav-link{
    display:inline-flex;align-items:center;gap:7px;
    padding:8px 16px;background:rgba(255,255,255,0.05);
    border:1px solid var(--white-border);border-radius:50px;
    font-size:0.83rem;font-weight:600;color:var(--white-muted);
    transition:var(--transition);
}
.services-nav-link:hover,.services-nav-link.active{
    background:rgba(56,189,248,0.1);border-color:rgba(56,189,248,0.4);
    color:var(--accent);
}
.services-nav-link i{font-size:0.8rem;color:var(--accent);}

/* ---- Dropdown Navbar — Desktop hover + click toggle ---- */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{
    display:flex;align-items:center;gap:5px;cursor:pointer;
    font-size:0.9rem;font-weight:500;color:var(--white-muted);transition:color 0.3s;
    padding:4px 0;
}
.nav-dropdown-toggle:hover{color:var(--white);}
.nav-dropdown-toggle i{font-size:0.65rem;transition:transform 0.3s;}
.nav-dropdown:hover .nav-dropdown-toggle i,
.nav-dropdown.dropdown-open .nav-dropdown-toggle i{transform:rotate(180deg);}
.nav-dropdown-menu{
    position:absolute;top:calc(100% + 14px);right:0;min-width:230px;
    background:rgba(2,12,27,0.97);backdrop-filter:blur(24px);
    border:1px solid var(--white-border);border-radius:var(--radius);
    padding:8px;opacity:0;pointer-events:none;
    transform:translateY(-10px);transition:opacity 0.25s ease,transform 0.25s ease;
    box-shadow:var(--shadow);z-index:200;
}
/* Show on hover OR when .dropdown-open class is set by JS click */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.dropdown-open .nav-dropdown-menu{
    opacity:1;pointer-events:auto;transform:translateY(0);
}
.nav-dropdown-menu a{
    display:flex;align-items:center;gap:9px;
    padding:10px 13px;border-radius:8px;
    font-size:0.85rem;font-weight:600;color:var(--white-muted);
    transition:var(--transition);
}
.nav-dropdown-menu a:hover{background:rgba(56,189,248,0.1);color:var(--accent);}
.nav-dropdown-menu a i{color:var(--accent);width:16px;font-size:0.85rem;}
.nav-dropdown-menu .divider{height:1px;background:var(--white-border);margin:6px 8px;}

/* Mobile menu — dropdown submenu accordion */
.mobile-dropdown-item{border-bottom:1px solid var(--white-border);}
.mobile-dropdown-item:last-child{border-bottom:none;}
.mobile-dropdown-toggle{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 0;font-size:1rem;font-weight:700;color:var(--accent);
    cursor:pointer;width:100%;
}
.mobile-dropdown-toggle i.mobile-chevron{transition:transform 0.3s;font-size:0.7rem;color:var(--white-muted);}
.mobile-dropdown-item.open .mobile-chevron{transform:rotate(180deg);}
.mobile-submenu{
    max-height:0;overflow:hidden;
    transition:max-height 0.35s ease;
    display:flex;flex-direction:column;gap:0;
}
.mobile-dropdown-item.open .mobile-submenu{max-height:500px;}
.mobile-submenu a{
    display:flex;align-items:center;gap:9px;
    padding:10px 12px;font-size:0.9rem;font-weight:600;
    color:var(--white-muted);border-radius:8px;
    transition:color 0.3s,background 0.3s;
    margin-bottom:2px;
}
.mobile-submenu a:hover{color:var(--accent);background:rgba(56,189,248,0.07);}
.mobile-submenu a i{color:var(--accent);width:16px;font-size:0.85rem;}
.mobile-submenu .divider{height:1px;background:var(--white-border);margin:4px 0;}

/* ---- صفحات الخدمات — تابلت ---- */
@media (max-width: 900px) {
    .page-hero-grid    { grid-template-columns: 1fr; }
    .page-hero-img-wrap { display: none; }
    .specs-grid        { grid-template-columns: 1fr; }
    .process-steps     { grid-template-columns: 1fr 1fr; }
    .process-step:first-child  { border-radius: var(--radius) var(--radius) 0 0; }
    .process-step:last-child   { border-radius: 0 0 var(--radius) var(--radius); }
    .process-step:not(:first-child)  { border-right: 1px solid var(--white-border); }
    .process-step:nth-child(2n)      { border-right: none; }
    .process-step:nth-child(2n+1):not(:first-child) { border-top: none; }
}

/* ---- صفحات الخدمات — جوال ---- */
@media (max-width: 640px) {
    /* Hero صفحة الخدمة */
    .page-hero            { padding: 36px 0 48px; }
    .page-hero h1         { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.25; }
    .page-hero-desc       { font-size: 0.9rem; line-height: 1.7; }
    .page-hero-badge      { font-size: 0.74rem; }
    .page-hero-actions    { flex-direction: column; gap: 10px; }
    .page-hero-actions .btn { width: 100%; justify-content: center; }

    /* Breadcrumb */
    .breadcrumb           { padding: 65px 0 0; }
    .breadcrumb-inner     { font-size: 0.78rem; gap: 6px; }

    /* مميزات الخدمة — عمودان للإيقاع البصري */
    .features-section     { padding: 52px 0; }
    .features-grid        { grid-template-columns: 1fr 1fr; gap: 12px; }
    .feature-card         { padding: 20px 14px; }
    .feature-icon         { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: 12px; }
    .feature-card h3      { font-size: 0.88rem; margin-bottom: 5px; }
    .feature-card p       { font-size: 0.8rem; line-height: 1.6; }

    /* خطوات التنفيذ */
    .process-section      { padding: 52px 0; }
    .process-steps        { grid-template-columns: 1fr; }
    .process-step         { border-radius: 0 !important; border-right: 1px solid var(--white-border) !important; }
    .process-step:first-child { border-radius: var(--radius) var(--radius) 0 0 !important; }
    .process-step:last-child  { border-radius: 0 0 var(--radius) var(--radius) !important; }
    .process-step:not(:first-child) { border-top: none; }
    .process-steps::before { display: none; } /* الخط الأفقي لا معنى له على عمود واحد */
    .step-number          { width: 46px; height: 46px; font-size: 1.1rem; }
    .process-step h3      { font-size: 0.9rem; }
    .process-step p       { font-size: 0.82rem; }

    /* المواصفات */
    .specs-section        { padding: 52px 0; }
    .spec-item            { padding: 14px 16px; gap: 12px; }
    .spec-item-icon       { width: 34px; height: 34px; font-size: 0.9rem; }
    .spec-item h4         { font-size: 0.88rem; }
    .spec-item p          { font-size: 0.8rem; }

    /* CTA قسم الاتصال */
    .service-cta-section  { padding: 52px 0; }
    .service-cta-section h2 { font-size: clamp(1.35rem, 5vw, 1.8rem); }
    .service-cta-section p  { font-size: 0.9rem; }
    .cta-actions          { flex-direction: column; align-items: stretch; gap: 10px; }
    .cta-actions .btn,
    .cta-actions .cta-phone {
        width: 100%;
        justify-content: center;
        padding: 14px 18px;
    }
    .cta-phone            { font-size: 0.95rem; letter-spacing: 0.02em; }

    /* روابط الخدمات */
    .services-nav-section { padding: 36px 0; }
    .services-nav-link    { font-size: 0.78rem; padding: 7px 12px; min-height: 40px; }
}

@media (max-width: 390px) {
    .features-grid { grid-template-columns: 1fr; }
    .feature-card  { padding: 18px 14px; }
}


/* ============================================================
   GOOGLE ADS SECTION
   ============================================================ */
.google-ads-section{
    background:linear-gradient(135deg,#020c1b 0%,#091a30 50%,#020c1b 100%);
    padding:88px 0;position:relative;overflow:hidden;
    border-top:1px solid var(--white-border);
    border-bottom:1px solid var(--white-border);
}
.google-ads-section::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 80% at 30% 50%,rgba(66,133,244,0.07) 0%,transparent 65%),
               radial-gradient(ellipse 50% 60% at 80% 30%,rgba(234,67,53,0.05) 0%,transparent 60%);
}
.google-ads-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.google-ads-content .section-tag{background:rgba(66,133,244,0.1);color:#4285f4;border-color:rgba(66,133,244,0.3);}
.google-ads-content h2{font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:900;line-height:1.25;margin-bottom:16px;}
.google-ads-content p{color:var(--white-muted);font-size:1rem;line-height:1.8;margin-bottom:28px;}
.google-ads-features{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
.gads-feat{
    display:flex;align-items:center;gap:12px;
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;padding:12px 16px;
    transition:var(--transition);
}
.gads-feat:hover{border-color:rgba(66,133,244,0.3);background:rgba(66,133,244,0.06);}
.gads-feat-icon{
    width:36px;height:36px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;
}
.gads-feat-icon.google-color{background:linear-gradient(135deg,#4285f4,#34a853,#fbbc05,#ea4335);color:#fff;}
.gads-feat-icon.blue{background:rgba(66,133,244,0.15);color:#4285f4;}
.gads-feat-icon.red{background:rgba(234,67,53,0.15);color:#ea4335;}
.gads-feat-icon.yellow{background:rgba(251,188,5,0.15);color:#fbbc05;}
.gads-feat-icon.green{background:rgba(52,168,83,0.15);color:#34a853;}
.gads-feat span{font-size:0.9rem;font-weight:600;color:var(--white);}
.gads-feat small{display:block;font-size:0.78rem;color:var(--white-muted);margin-top:2px;}
.google-ads-stats{
    background:var(--card-bg);border:1px solid var(--white-border);
    border-radius:var(--radius-lg);padding:36px;display:flex;flex-direction:column;gap:28px;
}
.gads-stat-item{text-align:center;}
.ads-counter-num{
    font-size:2.8rem;font-weight:900;
    background:linear-gradient(135deg,#4285f4,#34a853);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    display:block;line-height:1;
}
.gads-stat-label{font-size:0.85rem;color:var(--white-muted);margin-top:6px;font-weight:600;}
.gads-divider{height:1px;background:var(--white-border);}
.gads-cta-bar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:20px;background:rgba(66,133,244,0.07);
    border:1px solid rgba(66,133,244,0.2);border-radius:12px;
}
.gads-cta-bar p{flex:1;font-size:0.88rem;color:var(--white-muted);margin:0;}
.btn-google{
    background:linear-gradient(135deg,#4285f4,#1a73e8);
    color:#fff;box-shadow:0 6px 20px rgba(66,133,244,0.4);
}
.btn-google:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(66,133,244,0.6);}
@media(max-width:900px){.google-ads-inner{grid-template-columns:1fr;gap:32px;}}
@media(max-width:640px){.google-ads-stats{padding:24px;} .gads-cta-bar{flex-direction:column;text-align:center;}}

/* ============================================================
   CITIES SECTION — خدماتنا في مدن المملكة
   ============================================================ */
.cities-section{
    background:var(--primary);padding:88px 0;
    border-top:1px solid var(--white-border);
}
.cities-tabs-bar{
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
    margin-bottom:40px;
}
.city-tab{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;border-radius:50px;
    background:rgba(255,255,255,0.05);border:1px solid var(--white-border);
    font-family:var(--font);font-size:0.85rem;font-weight:700;
    color:var(--white-muted);cursor:pointer;transition:var(--transition);
}
.city-tab:hover{border-color:rgba(56,189,248,0.4);color:var(--accent);background:rgba(56,189,248,0.07);}
.city-tab.active{
    background:linear-gradient(135deg,rgba(56,189,248,0.15),rgba(56,189,248,0.05));
    border-color:rgba(56,189,248,0.5);color:var(--accent);
    box-shadow:0 0 0 3px rgba(56,189,248,0.1);
}
.city-tab i{font-size:0.8rem;}
.city-panel{display:none;}
.city-panel.active{display:block;animation:fadeInCity 0.4s ease;}
@keyframes fadeInCity{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.city-header{
    display:flex;align-items:center;gap:14px;
    padding:20px 24px;background:var(--card-bg);
    border:1px solid var(--white-border);border-radius:var(--radius) var(--radius) 0 0;
    border-bottom:2px solid rgba(56,189,248,0.3);
    margin-bottom:2px;
}
.city-header-icon{
    width:50px;height:50px;border-radius:12px;flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;color:var(--bg);
    box-shadow:0 6px 20px rgba(56,189,248,0.35);
}
.city-header-text h3{font-size:1.2rem;font-weight:800;margin-bottom:3px;}
.city-header-text p{font-size:0.83rem;color:var(--white-muted);}
.city-services-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;
    background:var(--card-bg);border:1px solid var(--white-border);
    border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:20px;
}
.city-service-link{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;background:rgba(255,255,255,0.03);
    border:1px solid var(--white-border);border-radius:10px;
    font-size:0.88rem;font-weight:600;color:var(--white-muted);
    transition:var(--transition);
}
.city-service-link:hover{
    background:rgba(56,189,248,0.08);border-color:rgba(56,189,248,0.35);
    color:var(--white);transform:translateX(-3px);
}
.city-service-link i{color:var(--accent);font-size:0.9rem;width:18px;flex-shrink:0;}
.city-service-link span{flex:1;}
.city-service-link .link-arr{color:var(--white-border);font-size:0.7rem;transition:var(--transition);}
.city-service-link:hover .link-arr{color:var(--accent);transform:translateX(-3px);}
.cities-note{text-align:center;margin-top:32px;padding:18px 24px;background:rgba(56,189,248,0.05);border:1px solid rgba(56,189,248,0.15);border-radius:var(--radius);}
.cities-note p{color:var(--white-muted);font-size:0.88rem;}
.cities-note a{color:var(--accent);font-weight:700;}
@media(max-width:640px){
    .city-services-grid{grid-template-columns:1fr;padding:14px;}
    .cities-tabs-bar{gap:6px;}
    .city-tab{font-size:0.78rem;padding:7px 13px;}
}

/* ============================================================
   NAVBAR QUICK SERVICES — شريط خدمات سريع بجانب القائمة
   ============================================================ */
.nav-quick-services{ display:none; }
a.hero-tag{ text-decoration:none;color:inherit;cursor:pointer;transition:background 0.3s,color 0.3s,border-color 0.3s; }
a.hero-tag:hover{ background:rgba(56,189,248,0.2);border-color:var(--accent);color:var(--accent); }
.hero-services-btn{ display:none; }
.hero-wa-btn{ display:inline-flex; }

/* ============================================================
   SERVICES DRAWER — درج الخدمات (Bottom Sheet)
   ============================================================ */
.services-drawer-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,0);z-index:1090;transition:background 0.3s;
}
.services-drawer-overlay.open{ display:block;background:rgba(0,0,0,0.6); }
.services-drawer{
    position:fixed;bottom:0;left:0;right:0;z-index:1091;
    background:var(--primary);border-top:1px solid var(--white-border);
    border-radius:20px 20px 0 0;
    padding:0 0 calc(20px + env(safe-area-inset-bottom));
    transform:translateY(110%);
    transition:transform 0.4s cubic-bezier(0.32,0.72,0,1);
    max-height:88vh;overflow-y:auto;
}
.services-drawer.open{ transform:translateY(0); }
.services-drawer-handle{ width:40px;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;margin:12px auto 0; }
.services-drawer-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px 14px;border-bottom:1px solid var(--white-border);
}
.services-drawer-header h3{ font-size:1rem;font-weight:800;display:flex;align-items:center;gap:9px;color:var(--white); }
.services-drawer-header h3 i{ color:var(--accent); }
.services-drawer-close{
    width:32px;height:32px;background:rgba(255,255,255,0.07);
    border:1px solid var(--white-border);border-radius:50%;color:var(--white-muted);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:0.9rem;-webkit-tap-highlight-color:transparent;
}
.services-drawer-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px; }
.sd-card{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:14px 8px 12px;background:var(--card-bg);
    border:1px solid var(--white-border);border-radius:12px;
    text-decoration:none;transition:border-color 0.25s,background 0.25s;
    -webkit-tap-highlight-color:transparent;text-align:center;
}
.sd-card:active{ background:rgba(56,189,248,0.08);border-color:rgba(56,189,248,0.4); }
.sd-icon{ width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;margin-bottom:2px; }
.sd-icon--network  { background:linear-gradient(135deg,#38bdf8,#0ea5e9); }
.sd-icon--phone    { background:linear-gradient(135deg,#34d399,#059669); }
.sd-icon--camera   { background:linear-gradient(135deg,#f472b6,#db2777); }
.sd-icon--dish     { background:linear-gradient(135deg,#fb923c,#ea580c); }
.sd-icon--finger   { background:linear-gradient(135deg,#a78bfa,#7c3aed); }
.sd-icon--lock     { background:linear-gradient(135deg,#fbbf24,#d97706); }
.sd-icon--web      { background:linear-gradient(135deg,#38bdf8,#0ea5e9); }
.sd-icon--marketing{ background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.sd-label{ font-size:0.7rem;font-weight:700;color:var(--white);line-height:1.2; }
.sd-sub{ font-size:0.62rem;color:var(--accent);font-weight:600;opacity:0.8; }
.sd-cta{
    display:flex;align-items:center;justify-content:center;gap:9px;
    margin:4px 16px 0;padding:13px;border-radius:12px;
    background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.25);
    color:var(--accent);font-weight:700;font-size:0.9rem;text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.sd-cta:active{ background:rgba(56,189,248,0.15); }

/* ============================================================
   RESPONSIVE — جوال
   ============================================================ */
@media (max-width:900px){
    .nav-quick-services{
        display:flex;align-items:center;gap:6px;
        overflow-x:auto;overflow-y:hidden;
        scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;flex:1;padding:0 6px;flex-wrap:nowrap;
    }
    .nav-quick-services::-webkit-scrollbar{ display:none; }
    .nav-qs-pill{
        display:inline-flex;align-items:center;gap:4px;
        padding:5px 9px;background:rgba(56,189,248,0.07);
        border:1px solid rgba(56,189,248,0.18);border-radius:20px;
        font-size:0.68rem;font-weight:700;color:var(--white-muted);
        white-space:nowrap;text-decoration:none;flex-shrink:0;
        min-height:30px;-webkit-tap-highlight-color:transparent;transition:background 0.2s,color 0.2s;
    }
    .nav-qs-pill:active{ background:rgba(56,189,248,0.18);color:var(--accent);border-color:var(--accent); }
    .nav-qs-pill i{ font-size:0.63rem;color:var(--accent); }
    .nav-qs-pill--marketing i{ color:#8b5cf6; }
    .nav-qs-pill--marketing{ border-color:rgba(139,92,246,0.2); }
    .nav-logo{ flex-shrink:0; }
    .nav-toggle{ flex-shrink:0; }
    .hero-wa-btn  { display:none !important; }
    .hero-services-btn{ display:inline-flex !important; }
}
@media (min-width:901px){
    .hero-services-btn{ display:none !important; }
    .hero-wa-btn  { display:inline-flex !important; }
    .services-drawer,.services-drawer-overlay{ display:none !important; }
}