@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

:root {
  --color-primary: #0B1F33;
  --color-dark: #071827;
  --color-secondary: #0EA5E9;
  --color-cyan: #67E8F9;
  --color-cyan-light: #CFFAFE;
  --color-gray: #64748B;
  --color-white: #FFFFFF;
  --color-silver: #CBD5E1;
  --color-bg: #F0F4F8;
  --color-card: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 8px 32px rgba(11, 31, 51, 0.08);
  --glass-dark-bg: rgba(7, 24, 39, 0.92);
  --glass-dark-border: rgba(255, 255, 255, 0.08);
  --transition: all 0.35s cubic-bezier(.4,0,.2,1);
  --radius: 16px;
  --radius-sm: 10px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;direction:rtl;}
body{font-family:'Tajawal',sans-serif;background:var(--color-bg);color:var(--color-primary);line-height:1.7;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* Typography */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;}
.text-center{text-align:center;}
.section-title{font-size:2.4rem;margin-bottom:1rem;color:var(--color-primary);position:relative;}
.section-subtitle{font-size:1.1rem;color:var(--color-gray);margin-bottom:3rem;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;border-radius:var(--radius-sm);font-weight:700;transition:var(--transition);cursor:pointer;border:none;gap:8px;font-size:1rem;position:relative;overflow:hidden;}
.btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:0.5s;}
.btn:hover::after{left:100%;}
.btn-primary{background:linear-gradient(135deg,#0EA5E9,#0284c7);color:#fff;box-shadow:0 4px 20px rgba(14,165,233,0.35);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(14,165,233,0.45);}
.btn-secondary{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;box-shadow:0 4px 20px rgba(37,211,102,0.35);}
.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(37,211,102,0.45);}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.5);backdrop-filter:blur(5px);}
.btn-outline:hover{background:rgba(255,255,255,0.12);border-color:#fff;}
.btn-small{padding:9px 18px;font-size:0.9rem;}
.btn-large{padding:16px 36px;font-size:1.1rem;}

/* Top Bar */
.top-bar{background:var(--color-dark);color:var(--color-silver);font-size:0.88rem;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;}
.top-bar-info{display:flex;gap:22px;}
.top-bar-info span{display:flex;align-items:center;gap:6px;}
.top-bar-contact a{color:#fff;font-weight:700;}
.top-bar-contact a:hover{color:var(--color-secondary);}

/* Header */
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.85);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(255,255,255,0.3);transition:var(--transition);padding:12px 0;}
.header.scrolled{background:var(--glass-dark-bg);border-bottom:1px solid var(--glass-dark-border);box-shadow:0 4px 30px rgba(0,0,0,0.15);}
.header.scrolled .nav-links a{color:var(--color-silver);}
.header.scrolled .nav-links a:hover{color:var(--color-cyan);}
.header.scrolled .logo img{filter:brightness(0) invert(1);}
.header-container{display:flex;justify-content:space-between;align-items:center;}
.logo img{height:48px;transition:var(--transition);}
.nav-menu{display:flex;align-items:center;gap:28px;}
.nav-links{display:flex;gap:18px;}
.nav-links a{font-weight:500;transition:var(--transition);color:var(--color-primary);position:relative;padding:4px 0;}
.nav-links a::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--color-secondary);transition:var(--transition);}
.nav-links a:hover::after{width:100%;}
.nav-links a:hover{color:var(--color-secondary);}
.header-actions{display:flex;gap:10px;}
.menu-btn{display:none;background:none;border:none;font-size:1.5rem;color:inherit;cursor:pointer;}

/* Hero */
.hero{position:relative;padding:130px 0 110px;min-height:85vh;display:flex;align-items:center;background:linear-gradient(160deg,#071827 0%,#0B1F33 40%,#0c2d4a 100%);overflow:hidden;}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('../images/hero-glass.webp') center/cover no-repeat;opacity:0.15;}
.hero::after{content:'';position:absolute;top:-30%;right:-20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,0.15) 0%,transparent 70%);animation:heroGlow 8s ease-in-out infinite alternate;}
.hero-content{position:relative;z-index:2;color:#fff;max-width:780px;}
.hero h1{font-size:3.2rem;margin-bottom:22px;text-shadow:0 2px 20px rgba(0,0,0,0.3);line-height:1.25;}
.hero p{font-size:1.2rem;margin-bottom:28px;color:var(--color-cyan);opacity:0.9;}
.hero-features{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px;}
.hero-features span{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.07);padding:10px 18px;border-radius:40px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);font-size:0.92rem;transition:var(--transition);}
.hero-features span:hover{background:rgba(14,165,233,0.15);border-color:rgba(14,165,233,0.3);}
.hero-features i{color:var(--color-cyan);}
.hero-actions{display:flex;gap:16px;}

@keyframes heroGlow{0%{transform:translate(0,0) scale(1);opacity:0.5;}100%{transform:translate(-40px,40px) scale(1.2);opacity:0.8;}}

/* Glass geometric patterns */
.hero .geo-lines{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;overflow:hidden;pointer-events:none;}
.hero .geo-lines span{position:absolute;background:linear-gradient(180deg,transparent,rgba(14,165,233,0.08),transparent);width:1px;}
.hero .geo-lines span:nth-child(1){left:15%;height:60%;top:10%;animation:geoFloat 12s ease-in-out infinite;}
.hero .geo-lines span:nth-child(2){left:45%;height:40%;top:30%;animation:geoFloat 10s ease-in-out infinite reverse;}
.hero .geo-lines span:nth-child(3){left:75%;height:50%;top:20%;animation:geoFloat 14s ease-in-out infinite;}
@keyframes geoFloat{0%,100%{transform:translateY(0);opacity:0.3;}50%{transform:translateY(-20px);opacity:0.7;}}

/* Quick Services */
.quick-services{margin-top:-55px;position:relative;z-index:3;margin-bottom:80px;}
.qs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;}
.qs-card{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:28px 14px;text-align:center;box-shadow:var(--glass-shadow);transition:var(--transition);cursor:pointer;}
.qs-card:hover{transform:translateY(-8px);background:#fff;box-shadow:0 20px 40px rgba(11,31,51,0.12);border-color:rgba(14,165,233,0.3);}
.qs-card:hover .qs-icon{color:#fff;background:var(--color-secondary);transform:scale(1.1);}
.qs-icon{font-size:1.6rem;color:var(--color-secondary);margin-bottom:12px;width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(14,165,233,0.08);transition:var(--transition);}
.qs-title{font-weight:700;font-size:1.05rem;}
.qs-desc{font-size:0.82rem;color:var(--color-gray);margin-top:6px;}

/* Services */
.services{padding:50px 0 90px;}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;}
.service-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.04);transition:var(--transition);border:1px solid #e8edf2;position:relative;}
.service-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(0,0,0,0.1);border-color:rgba(14,165,233,0.2);}
.service-img{height:220px;overflow:hidden;position:relative;background:linear-gradient(135deg,#0B1F33,#1e3a5f);}
.service-img img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.service-card:hover .service-img img{transform:scale(1.08);}
.service-content{padding:26px;}
.service-content h3{font-size:1.35rem;margin-bottom:14px;color:var(--color-primary);}
.service-content p{color:var(--color-gray);margin-bottom:18px;font-size:0.95rem;line-height:1.7;}

/* Why Us */
.why-us{padding:90px 0;background:var(--color-bg);position:relative;}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.why-content h2{font-size:2.2rem;margin-bottom:24px;color:var(--color-primary);}
.why-list{margin-bottom:30px;}
.why-list li{display:flex;align-items:center;gap:16px;margin-bottom:16px;font-size:1.05rem;}
.why-list li i{color:var(--color-secondary);font-size:1.1rem;background:rgba(14,165,233,0.08);padding:12px;border-radius:12px;min-width:44px;text-align:center;transition:var(--transition);}
.why-list li:hover i{background:var(--color-secondary);color:#fff;transform:scale(1.05);}
.why-image{position:relative;}
.why-image img{border-radius:20px;box-shadow:0 25px 50px rgba(0,0,0,0.12);width:100%;}
.trust-badge{position:absolute;bottom:-25px;right:-25px;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);padding:22px 28px;border-radius:var(--radius);border:1px solid var(--glass-border);box-shadow:0 15px 40px rgba(0,0,0,0.1);display:flex;align-items:center;gap:14px;}
.trust-badge i{font-size:2.5rem;color:var(--color-secondary);}
.trust-badge div{font-weight:700;color:var(--color-primary);line-height:1.5;}
.trust-badge span{display:block;font-size:0.88rem;color:var(--color-gray);font-weight:normal;}

/* Gallery */
.gallery{padding:90px 0;background:#fff;}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.gallery-item{position:relative;border-radius:var(--radius);overflow:hidden;height:280px;cursor:pointer;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 30%,rgba(7,24,39,0.9) 100%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;opacity:0;transition:var(--transition);color:#fff;padding:28px;text-align:center;backdrop-filter:blur(2px);}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-overlay h4{font-size:1.25rem;margin-bottom:14px;transform:translateY(15px);transition:var(--transition);}
.gallery-overlay .btn{transform:translateY(15px);transition:var(--transition);transition-delay:0.08s;}
.gallery-item:hover .gallery-overlay h4,.gallery-item:hover .gallery-overlay .btn{transform:translateY(0);}

/* Areas */
.areas{padding:70px 0;background:var(--color-bg);text-align:center;}
.areas-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px;}
.area-chip{background:#fff;border:1px solid #e2e8f0;padding:11px 22px;border-radius:40px;font-size:0.95rem;color:var(--color-gray);transition:var(--transition);display:flex;align-items:center;gap:8px;box-shadow:0 2px 8px rgba(0,0,0,0.03);}
.area-chip i{color:var(--color-secondary);transition:var(--transition);}
.area-chip:hover{background:linear-gradient(135deg,#0EA5E9,#0284c7);color:#fff;border-color:var(--color-secondary);box-shadow:0 8px 24px rgba(14,165,233,0.25);transform:translateY(-3px);}
.area-chip:hover i{color:#fff;}

/* CTA */
.cta{padding:90px 0;background:linear-gradient(160deg,var(--color-dark) 0%,#0B1F33 40%,#1e3a5f 100%);color:#fff;text-align:center;position:relative;overflow:hidden;}
.cta::before{content:'';position:absolute;top:-40%;left:-30%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,0.12) 0%,transparent 60%);z-index:1;}
.cta::after{content:'';position:absolute;bottom:-30%;right:-20%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(103,232,249,0.08) 0%,transparent 60%);z-index:1;}
.cta .container{position:relative;z-index:2;}
.cta h2{font-size:2.5rem;margin-bottom:20px;}
.cta p{font-size:1.15rem;margin-bottom:32px;color:var(--color-cyan);max-width:620px;margin-left:auto;margin-right:auto;opacity:0.9;}
.cta-actions{display:flex;justify-content:center;gap:18px;}

/* FAQ */
.faq{padding:80px 0;background:#fff;}
.faq-list{max-width:800px;margin:0 auto;}
.faq-item{background:#fff;border:1px solid #e8edf2;border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.02);transition:var(--transition);}
.faq-item:hover{border-color:rgba(14,165,233,0.2);}
.faq-question{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;font-weight:700;cursor:pointer;transition:var(--transition);font-size:1.05rem;}
.faq-question:hover{color:var(--color-secondary);background:rgba(14,165,233,0.02);}
.faq-question i{transition:var(--transition);color:var(--color-secondary);font-size:0.9rem;}
.faq-answer{padding:0 24px;max-height:0;overflow:hidden;transition:all 0.4s cubic-bezier(.4,0,.2,1);color:var(--color-gray);background:#f8fafc;}
.faq-item.active{border-color:rgba(14,165,233,0.3);box-shadow:0 4px 20px rgba(14,165,233,0.08);}
.faq-item.active .faq-question{border-bottom:1px solid #e8edf2;color:var(--color-secondary);}
.faq-item.active .faq-question i{transform:rotate(180deg);}
.faq-item.active .faq-answer{padding:20px 24px;max-height:250px;}

/* Blog Preview */
.blog-preview{padding:70px 0;}

/* Footer */
.footer{background:linear-gradient(180deg,#06121f 0%,#040d16 100%);color:var(--color-silver);padding:70px 0 20px;position:relative;}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(14,165,233,0.3),transparent);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;}
.footer-about img{height:55px;margin-bottom:18px;filter:drop-shadow(0 0 12px rgba(255,255,255,0.08));}
.footer-about p{font-size:0.92rem;margin-bottom:20px;line-height:1.8;}
.footer-title{color:#fff;font-size:1.15rem;margin-bottom:20px;font-weight:700;position:relative;padding-bottom:12px;}
.footer-title::after{content:'';position:absolute;right:0;bottom:0;width:36px;height:2px;background:linear-gradient(90deg,var(--color-secondary),var(--color-cyan));border-radius:2px;}
.footer-links li{margin-bottom:11px;}
.footer-links a{transition:var(--transition);display:inline-block;font-size:0.92rem;}
.footer-links a:hover{color:var(--color-cyan);transform:translateX(-5px);}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;}
.footer-contact i{color:var(--color-secondary);margin-top:4px;}
.footer-bottom{text-align:center;padding-top:22px;border-top:1px solid rgba(255,255,255,0.06);font-size:0.88rem;color:var(--color-gray);}

/* Floating WhatsApp */
.floating-wa{position:fixed;bottom:30px;right:30px;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 6px 24px rgba(37,211,102,0.4);z-index:999;transition:var(--transition);animation:waPulse 2s ease-in-out infinite;}
.floating-wa:hover{transform:scale(1.12);box-shadow:0 8px 30px rgba(37,211,102,0.5);}
@keyframes waPulse{0%,100%{box-shadow:0 6px 24px rgba(37,211,102,0.4);}50%{box-shadow:0 6px 24px rgba(37,211,102,0.4),0 0 0 12px rgba(37,211,102,0.1);}}

/* Mobile Bottom Bar */
.mobile-bottom-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);box-shadow:0 -3px 20px rgba(0,0,0,0.08);z-index:1000;border-top:1px solid rgba(14,165,233,0.1);}
.mobile-bottom-bar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;font-weight:700;font-size:0.88rem;gap:4px;}
.mobile-bottom-bar .mbb-call{color:#fff;background:linear-gradient(135deg,#0EA5E9,#0284c7);}
.mobile-bottom-bar .mbb-wa{color:#fff;background:linear-gradient(135deg,#25D366,#128C7E);}

/* Animations */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity 0.7s cubic-bezier(.4,0,.2,1),transform 0.7s cubic-bezier(.4,0,.2,1);}
.fade-up.visible{opacity:1;transform:translateY(0);}

/* Responsive */
@media(max-width:992px){
  .why-grid,.footer-grid{grid-template-columns:1fr;gap:40px;}
  .trust-badge{position:relative;bottom:0;right:0;margin-top:20px;width:fit-content;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .top-bar{display:none;}
  .menu-btn{display:block;}
  .nav-menu{position:fixed;top:72px;left:0;right:0;background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);flex-direction:column;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,0.12);transform:translateY(-150%);transition:var(--transition);z-index:999;border-top:1px solid #e8edf2;}
  .nav-menu.active{transform:translateY(0);}
  .nav-links{flex-direction:column;width:100%;text-align:center;gap:0;}
  .nav-links a{padding:14px 0;border-bottom:1px solid #f0f4f8;}
  .header-actions{display:none;}
  .hero{min-height:auto;padding:90px 0 80px;}
  .hero h1{font-size:2rem;}
  .hero p{font-size:1rem;}
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;justify-content:center;}
  .hero-features span{font-size:0.82rem;padding:8px 14px;}
  .quick-services{margin-top:30px;}
  .qs-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  .qs-card{padding:18px 8px;}
  .qs-icon{font-size:1.3rem;width:40px;height:40px;}
  .qs-title{font-size:0.88rem;}
  .qs-desc{display:none;}
  .services-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .gallery-item{height:200px;}
  .mobile-bottom-bar{display:flex;}
  .floating-wa{bottom:85px;right:18px;width:52px;height:52px;font-size:1.5rem;}
  body{padding-bottom:65px;}
  .section-title{font-size:1.8rem;}
  .cta h2{font-size:1.8rem;}
  .cta-actions{flex-direction:column;align-items:center;gap:12px;}
  .cta-actions .btn{width:100%;max-width:320px;}
  .footer-grid{grid-template-columns:1fr;}
  .areas-chips{gap:8px;}
  .area-chip{padding:9px 16px;font-size:0.88rem;}
}
@media(max-width:400px){
  .qs-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:1fr;}
}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}