/* ===== أمان التركيب — Design System ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  --dark: #0f172a;
  --navy: #1e3a5f;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --white: #ffffff;
  --gray: #94a3b8;
  --gray-light: #e2e8f0;
  --bg: #f8fafc;
  --whatsapp: #25d366;
  --whatsapp-hover: #128c7e;
  --success: #10b981;
  --warning: #f59e0b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,.08);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.12);
  --transition: all .3s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Cairo','Segoe UI',Tahoma,sans-serif;line-height:1.8;color:var(--dark);background:var(--bg)}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-hover)}
img{max-width:100%;height:auto;display:block}
ul{padding-right:1.5rem;margin-bottom:1rem}
li{margin-bottom:.5rem}
p{margin-bottom:1rem}
h1,h2,h3,h4,h5,h6{line-height:1.4;margin-bottom:.75rem;color:var(--navy)}
h1{font-size:clamp(1.5rem,4vw,2.25rem);border-bottom:3px solid var(--primary);padding-bottom:.5rem;margin-bottom:1.5rem}
h2{font-size:clamp(1.25rem,3vw,1.75rem);color:var(--navy);margin-top:2rem}
h3{font-size:clamp(1.1rem,2.5vw,1.35rem);margin-top:1.5rem}

/* Top Bar */
.top-bar{background:var(--dark);color:var(--gray);padding:.4rem 1rem;text-align:center;font-size:.85rem}
.top-bar a{color:var(--whatsapp);font-weight:600}
.top-bar a:hover{color:var(--whatsapp-hover)}

/* Header */
header{background:var(--navy);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.header-inner{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;min-height:64px}
.header-inner .logo{color:var(--white);font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:.5rem}
.header-inner .logo:hover{color:var(--primary)}
.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-links a{color:rgba(255,255,255,.85);padding:.5rem .85rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;transition:var(--transition);white-space:nowrap}
.nav-links a:hover{background:rgba(255,255,255,.12);color:var(--white)}
.nav-links a.active{background:rgba(37,99,235,.3);color:var(--white)}
.nav-wa{display:inline-flex;align-items:center;gap:.4rem;background:var(--whatsapp);color:var(--white);padding:.45rem .9rem;border-radius:var(--radius-sm);font-weight:700;font-size:.85rem;transition:var(--transition)}
.nav-wa:hover{background:var(--whatsapp-hover);color:var(--white)}
.hamburger{display:none;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer;padding:.5rem}

/* Main */
main{max-width:1200px;margin:0 auto;padding:2rem 1rem;min-height:70vh}
main>section,main>article{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.5rem;transition:var(--transition)}
main>section:hover,main>article:hover{box-shadow:var(--shadow-hover)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--navy),#0f172a);color:var(--white);padding:3.5rem 2rem;border-radius:var(--radius);margin-bottom:2rem}
.hero h1{color:var(--white);border-bottom-color:var(--primary);font-size:clamp(1.5rem,4vw,2.5rem)}
.hero p{font-size:clamp(1rem,2.5vw,1.2rem);opacity:.9;max-width:700px;margin:0 auto 1.5rem}
.hero .hero-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-top:1.5rem}
.hero .hero-strip span{background:rgba(255,255,255,.1);padding:.6rem 1rem;border-radius:var(--radius-sm);text-align:center;font-size:.85rem}

/* Product Hero */
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin-bottom:2rem}
.product-hero .ph-content h1{border-bottom:3px solid var(--primary);padding-bottom:.5rem}
.product-hero .ph-specs{list-style:none;padding:0;margin:1rem 0}
.product-hero .ph-specs li{padding:.5rem 0;display:flex;align-items:center;gap:.5rem}
.product-hero .ph-specs li::before{content:"✓";color:var(--success);font-weight:700}
.product-hero .ph-cta{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
@media(max-width:768px){.product-hero{grid-template-columns:1fr}}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.card-grid article,.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;transition:var(--transition);border:1px solid var(--gray-light)}
.card-grid article:hover,.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;transition:var(--transition);cursor:pointer;border:none}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary-hover);color:var(--white);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:var(--white)}
.btn-wa{background:var(--whatsapp);color:var(--white)}
.btn-wa:hover{background:var(--whatsapp-hover);color:var(--white);transform:translateY(-1px)}
.btn-wa::before{content:"📱"}
.btn-wa-lg{font-size:1.1rem;padding:1rem 2rem;min-height:48px}

/* CTA Section */
.cta-section{text-align:center;background:linear-gradient(135deg,var(--navy),#0f172a);color:var(--white);padding:2.5rem}
.cta-section h2{color:var(--white);border-bottom-color:var(--primary)}
.cta-section .btn-wa{font-size:1.1rem;padding:1rem 2rem}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1.5rem 0}
.stat-box{text-align:center;padding:1.5rem 1rem;background:var(--bg);border-radius:var(--radius-sm)}
.stat-number{font-size:2rem;font-weight:800;color:var(--primary);display:block}
.stat-label{font-size:.9rem;color:var(--gray)}

/* Values */
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}

/* HowTo Steps */
.howto-step{display:flex;gap:1rem;padding:1rem 0;align-items:flex-start}
.step-number{background:var(--primary);color:var(--white);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:1.1rem}
.step-content{flex:1}

/* Why Us */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.why-item{text-align:center;padding:1.5rem}
.why-item .why-icon{font-size:2rem;margin-bottom:.75rem;display:block}
.why-item h3{font-size:1rem;margin-top:0}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.tag{background:var(--bg);color:var(--navy);padding:.3rem .7rem;border-radius:20px;font-size:.82rem;font-weight:500}

/* Areas Grid */
.areas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem;padding:0}
.areas-grid li{list-style:none;margin:0}
.areas-grid a{display:block;padding:.7rem 1rem;background:var(--bg);border-radius:var(--radius-sm);text-align:center;font-weight:500;transition:var(--transition);font-size:.9rem}
.areas-grid a:hover{background:var(--primary);color:var(--white);transform:translateY(-1px)}

/* Advantages */
.advantages-list{list-style:none;padding:0}
.advantages-list li{padding:.7rem 0;display:flex;align-items:center;gap:.75rem}
.advantages-list li::before{content:"✓";color:var(--success);font-weight:700;font-size:1.1rem}

/* FAQ */
.faq-item{border-bottom:1px solid var(--gray-light);padding:1rem 0}
.faq-item:last-child{border-bottom:none}
.faq-question{font-weight:700;color:var(--navy);font-size:1rem;margin-bottom:.4rem}
.faq-answer{color:var(--gray);font-size:.95rem;padding-right:.5rem}

/* Breadcrumbs */
.breadcrumbs{padding:.6rem 0;margin-bottom:1rem;font-size:.85rem;color:var(--gray)}
.breadcrumbs a{color:var(--primary)}
.breadcrumbs a:hover{color:var(--primary-hover)}
.breadcrumbs .sep{margin:0 .4rem;color:var(--gray-light)}

/* Contact Methods */
.contact-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.contact-card{text-align:center;padding:2rem 1.5rem;border-radius:var(--radius);border:1px solid var(--gray-light);transition:var(--transition)}
.contact-card:hover{box-shadow:var(--shadow-hover);border-color:var(--primary)}
.contact-card .icon{font-size:2.5rem;margin-bottom:.75rem;display:block}
.contact-card h3{font-size:1.05rem;margin-top:0}
.contact-card p{color:var(--gray);font-size:.9rem}

/* Map Container */
.map-container{border-radius:var(--radius);overflow:hidden;margin:1.5rem 0}
.map-container iframe{width:100%;height:350px;border:0}

/* Footer */
footer{background:var(--dark);color:rgba(255,255,255,.8);padding:3rem 1.5rem 1.5rem;margin-top:3rem}
footer .footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
footer h4{color:var(--white);font-size:1rem;margin-bottom:1rem}
footer a{color:rgba(255,255,255,.65);display:block;padding:.3rem 0;font-size:.88rem;transition:var(--transition)}
footer a:hover{color:var(--primary);padding-right:4px}
footer .copyright{text-align:center;padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem;color:rgba(255,255,255,.5)}
footer .footer-hours{font-size:.85rem;color:rgba(255,255,255,.55);margin-top:.5rem}

/* Related Links */
.related-links{display:flex;flex-wrap:wrap;gap:.5rem;padding:0}
.related-links li{list-style:none;margin:0}
.related-links a{display:inline-block;padding:.45rem 1rem;background:var(--bg);border-radius:20px;font-size:.85rem;font-weight:500;transition:var(--transition)}
.related-links a:hover{background:var(--primary);color:var(--white)}

/* Price placeholder */
.price-placeholder{font-size:1rem;font-weight:600;color:var(--gray);margin:.5rem 0}
.price-placeholder a{color:var(--primary)}
.price-placeholder a:hover{color:var(--primary-hover)}

/* Testimonials (replaced with CTA) */
.testimonial-cta{text-align:center;padding:2rem 1.5rem;background:var(--bg);border-radius:var(--radius-sm)}
.testimonial-cta p{margin-bottom:1rem;color:var(--gray)}

/* 404 */
.error-page{text-align:center;padding:5rem 2rem}
.error-page h1{font-size:clamp(2rem,6vw,4rem);color:var(--primary)}
.error-page p{font-size:1.1rem;margin-bottom:2rem}

/* Blog */
.blog-meta{font-size:.85rem;color:var(--gray);margin-bottom:.75rem}

/* Mobile Nav */
@media(max-width:768px){
  .hamburger{display:block}
  .nav-links{display:none;flex-direction:column;position:absolute;top:64px;right:0;left:0;background:var(--navy);padding:.5rem 1rem 1rem;box-shadow:0 4px 12px rgba(0,0,0,.2)}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:.6rem 1rem}
  .nav-wa{width:100%;justify-content:center;margin-top:.25rem}
  main{padding:1rem .75rem}
  main>section,main>article{padding:1rem;margin-bottom:1rem}
  .card-grid{grid-template-columns:1fr}
  .hero{padding:2rem 1.25rem}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-methods{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .product-hero{grid-template-columns:1fr}
}
@media(max-width:480px){
  .header-inner .logo{font-size:1rem}
  .top-bar{font-size:.78rem}
  .areas-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
}

/* Utility */
.text-center{text-align:center}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}