:root{
      --bg:#020617;
      --bg-soft:#020a18;
      --card:#030712;
      --primary:#0ea5e9;
      --primary-light:#38bdf8;
      --accent:#f97316;
      --accent-soft:rgba(249,115,22,0.15);
      --text:#e5e7eb;
      --muted:#9ca3af;
      --border:#1f2937;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    body{
      font-family:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
          radial-gradient(circle at 0 0,rgba(56,189,248,0.14),transparent 55%),
          radial-gradient(circle at 100% 0,rgba(249,115,22,0.18),transparent 55%),
          radial-gradient(circle at 50% 100%,rgba(12,148,136,0.22),transparent 55%),
          var(--bg);
      color:var(--text);
      direction:rtl;
    }
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}

    .container{
      width:min(1180px,100% - 32px);
      margin-inline:auto;
    }

    /* HEADER */
    header{
      position:sticky;
      top:0;
      z-index:40;
      background:linear-gradient(to bottom,rgba(2,6,23,0.96),rgba(2,6,23,0.85));
      backdrop-filter:blur(16px);
      border-bottom:1px solid var(--border);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding-block:8px;
    }
    .nav-left{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .logo-wrap{
      width:56px;
      height:56px;
      border-radius:20px;
      background:#020617;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      border:1px solid rgba(148,163,184,0.7);
      box-shadow:0 0 35px rgba(248,250,252,0.12);
    }
    .logo-wrap img{
      width:100%;
      height:100%;
      object-fit:contain;
    }
    .brand-main{
      font-weight:800;
      font-size:1.05rem;
    }
    .brand-sub{
      font-size:0.78rem;
      color:var(--muted);
    }

    .nav-menu{
      display:flex;
      align-items:center;
      gap:14px;
      font-size:0.9rem;
    }
    .nav-menu a{
      padding:6px 10px;
      border-radius:999px;
      color:var(--muted);
      transition:.2s;
    }
    .nav-menu a:hover{
      background:rgba(15,23,42,0.9);
      color:#f9fafb;
    }
    .nav-menu a.active{
      background:rgba(15,23,42,0.9);
      color:#f9fafb;
      font-weight:700;
    }

    .nav-right{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .lang-switch{
      display:inline-flex;
      border-radius:999px;
      border:1px solid var(--border);
      overflow:hidden;
      font-size:0.78rem;
      background:#020617;
    }
    .lang-switch a{
      padding:4px 9px;
      color:var(--muted);
    }
    .lang-switch a.active{
      background:var(--primary);
      color:#020617;
      font-weight:700;
    }
    .btn-nav{
      border-radius:999px;
      padding:7px 13px;
      font-size:0.82rem;
      border:1px solid rgba(56,189,248,0.9);
      background:rgba(15,23,42,0.96);
      color:var(--text);
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .btn-nav i{font-size:0.8rem;}
    .menu-toggle{
      display:none;
      font-size:1.3rem;
      cursor:pointer;
    }

    /* HERO + FULLWIDTH SLIDER */
    .hero{
      position:relative;
      overflow:hidden;
    }
    .hero-slider{
      position:relative;
      height:72vh;
      min-height:480px;
      max-height:800px;
    }
    .hero-slide{
      position:absolute;
      inset:0;
      opacity:0;
      transition:opacity 1s ease-in-out;
    }
    .hero-slide img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:brightness(.35) saturate(1.15);
      transform:scale(1.03);
    }
    .hero-slide.active{
      opacity:1;
    }
    .hero-gradient{
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 0 0,rgba(56,189,248,0.28),transparent 55%),
        radial-gradient(circle at 100% 0,rgba(249,115,22,0.32),transparent 55%),
        linear-gradient(to top,rgba(2,6,23,0.95),rgba(15,23,42,0.6));
    }

    .hero-content{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
    }
    .hero-inner{
      width:100%;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
      gap:28px;
      align-items:center;
    }

    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:3px 11px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.7);
      background:rgba(15,23,42,0.85);
      font-size:0.8rem;
      margin-bottom:10px;
    }
    .hero-kicker span{
      padding:2px 7px;
      border-radius:999px;
      background:rgba(248,250,252,0.12);
      font-size:0.75rem;
      color:#e5e7eb;
    }
    .hero-title{
      font-size:clamp(2rem,3.1vw,2.7rem);
      line-height:1.7;
      margin-bottom:10px;
    }
    .hero-title span{
      background:linear-gradient(135deg,#0ea5e9,#f97316);
      -webkit-background-clip:text;
      color:transparent;
    }
    .hero-text{
      font-size:0.96rem;
      color:var(--muted);
      max-width:560px;
      line-height:1.9;
      margin-bottom:18px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:14px;
    }
    .btn-primary{
      border:none;
      border-radius:999px;
      padding:10px 22px;
      font-size:0.92rem;
      font-weight:700;
      background:linear-gradient(135deg,#0ea5e9,#22c55e);
      color:#020617;
      display:inline-flex;
      align-items:center;
      gap:7px;
      cursor:pointer;
      box-shadow:0 18px 40px rgba(14,165,233,0.7);
    }
    .btn-secondary{
      border-radius:999px;
      padding:9px 18px;
      font-size:0.88rem;
      border:1px solid rgba(148,163,184,0.65);
      background:rgba(15,23,42,0.92);
      color:var(--text);
      display:inline-flex;
      align-items:center;
      gap:7px;
      cursor:pointer;
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      font-size:0.8rem;
      color:var(--muted);
    }
    .hero-meta span{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .hero-meta i{
      color:#22c55e;
    }

    .hero-card{
      background:rgba(15,23,42,0.95);
      border-radius:22px;
      border:1px solid rgba(30,64,175,0.9);
      box-shadow:0 22px 55px rgba(15,23,42,0.9);
      padding:14px 14px 16px;
    }
    .hero-card-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:10px;
      font-size:0.8rem;
      color:var(--muted);
    }
    .hero-card-pill{
      padding:3px 9px;
      border-radius:999px;
      background:rgba(22,163,74,0.16);
      border:1px solid rgba(34,197,94,0.6);
      color:#bbf7d0;
      font-size:0.76rem;
    }
    .hero-card-body{
      font-size:0.82rem;
      color:#cbd5f5;
      line-height:1.8;
    }
    .hero-card-footer{
      margin-top:8px;
      font-size:0.78rem;
      color:var(--muted);
    }

    /* SLIDER CONTROLS */
    .hero-controls{
      position:absolute;
      inset-inline:0;
      bottom:18px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding-inline:16px;
      pointer-events:none;
    }
    .hero-arrows{
      display:flex;
      gap:6px;
    }
    .hero-arrow{
      width:32px;
      height:32px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.7);
      background:rgba(15,23,42,0.85);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      pointer-events:auto;
      color:#e5e7eb;
      font-size:0.9rem;
    }
    .hero-dots{
      display:flex;
      gap:6px;
      pointer-events:auto;
    }
    .hero-dot{
      width:7px;
      height:7px;
      border-radius:999px;
      background:#020617;
      border:1px solid rgba(148,163,184,0.8);
      cursor:pointer;
    }
    .hero-dot.active{
      width:18px;
      background:#f97316;
      border-color:#fed7aa;
    }

    /* MAIN SECTIONS */
    main{
      padding-block:24px 40px;
      background:radial-gradient(circle at 50% 0,rgba(15,23,42,0.8),transparent 55%),transparent;
    }
    section{
      padding-block:26px 0;
    }
    .section-header{
      margin-bottom:16px;
      text-align:right;
    }
    .section-title{
      font-size:1.4rem;
      margin-bottom:4px;
    }
    .section-sub{
      font-size:0.9rem;
      color:var(--muted);
      max-width:520px;
      line-height:1.8;
    }

    /* ABOUT */
    #about .about-grid{
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr);
      gap:24px;
    }
    #about p{
      font-size:0.9rem;
      color:var(--muted);
      line-height:1.9;
      margin-bottom:10px;
    }
    .about-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:8px;
    }
    .about-tags span{
      font-size:0.8rem;
      padding:5px 10px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.7);
      background:rgba(15,23,42,0.85);
    }
    .about-card{
      background:radial-gradient(circle at 0 0,rgba(56,189,248,0.18),transparent 70%),
                 var(--card);
      border-radius:18px;
      border:1px solid var(--border);
      padding:14px 14px 16px;
      box-shadow:0 16px 45px rgba(15,23,42,0.7);
    }
    .about-meta{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      margin-top:10px;
      font-size:0.8rem;
      color:var(--muted);
    }
    .about-meta strong{
      display:block;
      font-size:1.1rem;
      color:var(--text);
    }

    /* SERVICES */
    #services .services-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
      gap:16px;
    }
    .service-card{
      background:var(--card);
      border-radius:16px;
      border:1px solid var(--border);
      padding:14px 14px 16px;
      box-shadow:0 14px 35px rgba(15,23,42,0.6);
    }
    .service-header{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:6px;
    }
    .service-icon{
      width:38px;
      height:38px;
      border-radius:14px;
      background:rgba(15,23,42,0.9);
      border:1px solid rgba(56,189,248,0.7);
      color:var(--primary-light);
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }
    .service-title{
      font-size:0.98rem;
    }
    .service-text{
      font-size:0.84rem;
      color:var(--muted);
      line-height:1.9;
      margin-bottom:6px;
    }
    .service-link{
      font-size:0.8rem;
      color:var(--primary-light);
      display:inline-flex;
      align-items:center;
      gap:4px;
    }

    /* PRODUCTS */
    #products .products-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:16px;
    }
    .product-card{
      background:var(--card);
      border-radius:16px;
      border:1px solid var(--border);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      box-shadow:0 14px 35px rgba(15,23,42,0.6);
    }
    .product-img{
      height:140px;
      overflow:hidden;
    }
    .product-img img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:brightness(.85);
    }
    .product-body{
      padding:11px 13px 13px;
      font-size:0.84rem;
      color:var(--muted);
    }
    .product-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:4px;
    }
    .product-header strong{
      font-size:0.96rem;
      color:var(--text);
    }
    .product-tag{
      padding:3px 8px;
      border-radius:999px;
      font-size:0.76rem;
      background:rgba(249,115,22,0.16);
      color:#fed7aa;
      border:1px solid rgba(248,171,96,0.8);
    }

    /* BLOG */
    #blog .blog-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:16px;
    }
    .blog-card{
      background:var(--card);
      border-radius:16px;
      border:1px solid var(--border);
      padding:12px 13px 13px;
      font-size:0.84rem;
      color:var(--muted);
      box-shadow:0 14px 35px rgba(15,23,42,0.6);
    }
    .blog-chip{
      font-size:0.78rem;
      color:var(--primary-light);
      margin-bottom:3px;
    }
    .blog-title{
      font-size:0.96rem;
      margin-bottom:4px;
      color:var(--text);
    }
    .blog-text{
      line-height:1.8;
      margin-bottom:6px;
    }
    .blog-link{
      font-size:0.8rem;
      color:var(--primary-light);
      display:inline-flex;
      align-items:center;
      gap:4px;
    }

    /* CONTACT */
    #contact .contact-grid{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
      gap:22px;
    }
    form{
      display:grid;
      gap:9px;
    }
    label{
      font-size:0.8rem;
      color:var(--muted);
      margin-bottom:1px;
    }
    input,textarea,select{
      width:100%;
      border-radius:10px;
      border:1px solid var(--border);
      padding:8px 10px;
      font-family:inherit;
      font-size:0.84rem;
      background:#020617;
      color:var(--text);
    }
    textarea{
      min-height:110px;
      resize:vertical;
    }
    input:focus,textarea:focus,select:focus{
      outline:none;
      border-color:var(--primary);
      box-shadow:0 0 0 1px rgba(56,189,248,0.45);
    }
    .contact-info{
      font-size:0.88rem;
      color:var(--muted);
    }
    .contact-info p{margin-bottom:6px;}
    .contact-info strong{color:var(--text);}
    .contact-list{
      list-style:none;
      margin-top:7px;
    }
    .contact-list li{
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:5px;
    }
    .contact-list i{
      color:var(--primary-light);
    }

    /* FOOTER */
    footer{
      margin-top:30px;
      border-top:1px solid var(--border);
      padding-block:12px 16px;
      font-size:0.78rem;
      color:var(--muted);
      background:#020617;
    }
    .footer-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .footer-links{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    /* RESPONSIVE */
    @media(max-width:960px){
      .hero-grid,
      #about .about-grid,
      #contact .contact-grid{
        grid-template-columns:minmax(0,1fr);
      }
      .hero-slider{
        height:auto;
        min-height:520px;
      }
      .hero-content{
        position:relative;
        padding-block:32px 40px;
      }
    }
    @media(max-width:780px){
      .nav-menu{
        position:absolute;
        inset-inline:0;
        top:60px;
        background:#020617;
        border-bottom:1px solid var(--border);
        padding:10px 18px 12px;
        display:none;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
      }
      .nav-menu.open{display:flex;}
      .menu-toggle{display:block;}
      .hero-controls{bottom:10px;}
    }

    /* ============ INNER PAGES: PAGE HERO (about/services/products/blog/contact) ============ */
    .page-hero{
      position:relative;
      min-height:42vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      overflow:hidden;
      background-size:cover;
      background-position:center;
      border-bottom:1px solid var(--border);
    }
    .page-hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 0 0,rgba(56,189,248,0.24),transparent 55%),
        radial-gradient(circle at 100% 0,rgba(249,115,22,0.28),transparent 55%),
        linear-gradient(to bottom,rgba(2,6,23,0.9),rgba(2,6,23,0.6));
    }
    .page-hero-content{
      position:relative;
      z-index:1;
      padding:0 20px;
    }
    .page-hero .hero-kicker{
      margin-inline:auto;
      margin-bottom:10px;
    }
    .page-hero-title{
      font-size:clamp(1.9rem,3.5vw,2.7rem);
      margin-bottom:8px;
    }
    .page-hero-sub{
      font-size:1rem;
      color:var(--muted);
      max-width:640px;
      margin-inline:auto;
      line-height:1.85;
    }
    .breadcrumb{
      margin-top:10px;
      font-size:0.8rem;
      color:var(--muted);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    .breadcrumb a{ color:var(--primary-light); }

    /* ============ ABOUT PAGE (standalone) ============ */
    .about-grid{
      display:grid;
      grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr);
      gap:22px;
      align-items:start;
    }
    .about-text p{
      font-size:0.9rem;
      color:var(--muted);
      line-height:1.9;
      margin-bottom:10px;
    }
    .about-image{
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(30,64,175,0.6);
      box-shadow:0 18px 45px rgba(15,23,42,0.9);
    }
    .about-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:brightness(.9);
    }

    /* VISION / MISSION / VALUES */
    .info-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:16px;
    }
    .info-card{
      background:var(--card);
      border-radius:16px;
      border:1px solid var(--border);
      padding:13px 13px 14px;
      box-shadow:0 14px 35px rgba(15,23,42,0.6);
      font-size:0.86rem;
      color:var(--muted);
      line-height:1.9;
    }
    .info-card h3{
      margin-bottom:6px;
      font-size:1rem;
      display:flex;
      align-items:center;
      gap:6px;
      color:var(--text);
    }
    .info-card h3 i{ color:var(--primary-light); font-size:0.95rem; }
    .values-list{ list-style:none; padding-inline-start:14px; }
    .values-list li{ position:relative; margin-bottom:4px; }
    .values-list li::before{
      content:"•";
      position:absolute;
      inset-inline-start:-14px;
      color:var(--primary-light);
    }

    /* WHY US */
    .why-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
      gap:14px;
      margin-top:12px;
    }
    .why-item{
      background:rgba(3,7,18,0.9);
      border-radius:14px;
      border:1px solid var(--border);
      padding:11px 12px 12px;
      font-size:0.84rem;
      color:var(--muted);
      line-height:1.8;
      display:flex;
      gap:8px;
    }
    .why-icon{
      width:30px;
      height:30px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(15,23,42,0.9);
      color:var(--primary-light);
      flex-shrink:0;
    }
    .why-item strong{ color:var(--text); }

    /* CTA BAND */
    .cta-band{
      margin-top:26px;
      padding:14px 16px;
      border-radius:18px;
      border:1px solid rgba(56,189,248,0.7);
      background:
        radial-gradient(circle at 0 0,rgba(56,189,248,0.25),transparent 60%),
        radial-gradient(circle at 100% 0,rgba(249,115,22,0.2),transparent 60%),
        rgba(15,23,42,0.95);
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-size:0.9rem;
    }
    .cta-actions{ display:flex; flex-wrap:wrap; gap:8px; }

    /* ============ FORM FEEDBACK / ALERTS ============ */
    .alert{
      border-radius:12px;
      padding:12px 14px;
      font-size:0.88rem;
      margin-bottom:14px;
      border:1px solid;
      line-height:1.7;
    }
    .alert-success{
      background:rgba(34,197,94,0.12);
      border-color:rgba(34,197,94,0.6);
      color:#bbf7d0;
    }
    .alert-error{
      background:rgba(239,68,68,0.12);
      border-color:rgba(239,68,68,0.6);
      color:#fecaca;
    }

    /* ============ PAGINATION ============ */
    .pagination{
      display:flex;
      gap:6px;
      justify-content:center;
      margin-top:24px;
      flex-wrap:wrap;
    }
    .pagination a, .pagination span{
      min-width:34px;
      height:34px;
      border-radius:10px;
      border:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:0.85rem;
      color:var(--muted);
      padding-inline:8px;
    }
    .pagination a:hover{ background:rgba(15,23,42,0.9); color:var(--text); }
    .pagination .current{
      background:var(--primary);
      color:#020617;
      border-color:var(--primary);
      font-weight:700;
    }

    /* ============ BLOG SINGLE POST ============ */
    .post-cover{
      border-radius:18px;
      overflow:hidden;
      margin-bottom:18px;
      border:1px solid var(--border);
      max-height:380px;
    }
    .post-cover img{ width:100%; height:100%; object-fit:cover; }
    .post-meta{
      font-size:0.8rem;
      color:var(--muted);
      margin-bottom:10px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .post-content{
      font-size:0.94rem;
      color:var(--text);
      line-height:2;
    }
    .post-content p{ margin-bottom:12px; color:var(--muted); }

    /* ============ EMPTY STATE ============ */
    .empty-state{
      text-align:center;
      padding:30px 16px;
      color:var(--muted);
      font-size:0.9rem;
      border:1px dashed var(--border);
      border-radius:16px;
    }