:root{
    --navy-950:#0A1B2E;
    --navy-800:#0F2C48;
    --navy-700:#153a5c;
    --blue-500:#2F6FED;
    --blue-600:#2159c9;
    --cyan-400:#3BC6E0;
    --amber-400:#F2A93B;
    --bg:#F5F8FC;
    --paper:#FFFFFF;
    --ink-900:#0E1826;
    --ink-600:#4B5A6C;
    --ink-400:#8494A6;
    --line:#DFE7F0;
    --radius:14px;
    --maxw:1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Tajawal', sans-serif;
    background:var(--bg);
    color:var(--ink-900);
    line-height:1.7;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Almarai', sans-serif; color:var(--navy-950);}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; color:var(--blue-500);
    letter-spacing:.5px; margin-bottom:14px;
  }
  .eyebrow::before{
    content:""; width:22px; height:2px; background:var(--amber-400); display:inline-block;
  }
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:14px; line-height:1.35;}
  .section-head p{color:var(--ink-600); font-size:16px;}
  section{padding:96px 0;}

  /* blueprint grid texture */
  .blueprint{
    position:relative;
  }
  .blueprint::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:42px 42px;
    pointer-events:none;
  }
  .bracket{position:relative;}
  .bracket::before,.bracket::after{
    content:""; position:absolute; width:22px; height:22px;
    border:2px solid var(--amber-400); pointer-events:none;
  }
  .bracket::before{top:-10px; right:-10px; border-left:0; border-bottom:0;}
  .bracket::after{bottom:-10px; left:-10px; border-right:0; border-top:0;}

  /* ===== NAVBAR ===== */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    max-width:var(--maxw); margin:0 auto; padding:0 32px;
    height:82px;
    display:flex; align-items:center; justify-content:space-between;
    gap:32px;
  }
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Almarai', sans-serif; font-weight:800; font-size:22px;
    color:var(--navy-950);
    white-space:nowrap;
  }
  .logo .mark{
    width:40px; height:40px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
    border-radius:0;
    background:transparent;
  }
  /* على الخلفية الداكنة: نسخة بيضاء نظيفة للعلامة */
  .footer-brand .logo .mark-on-dark{
    filter: brightness(0) invert(1);
    opacity: .95;
  }
  .nav-links{
    display:flex; align-items:center; gap:40px;
    flex:1; justify-content:center;
  }
  .nav-links a{
    font-size:15px; font-weight:500; color:var(--ink-600);
    position:relative; padding:8px 2px; transition:color .2s;
  }
  .nav-links a::after{
    content:""; position:absolute; right:0; bottom:0; width:0; height:2px;
    background:var(--blue-500); transition:width .25s ease;
  }
  .nav-links a:hover{color:var(--navy-950);}
  .nav-links a:hover::after{width:100%;}

  .nav-actions{
    display:flex; align-items:center; gap:14px;
    white-space:nowrap;
  }
  .lang-toggle{
    display:flex; align-items:center; gap:6px;
    padding:8px 14px;
    border:1px solid var(--line); border-radius:999px;
    font-size:13px; font-weight:700; color:var(--ink-600);
    transition:border-color .2s, color .2s;
  }
  .lang-toggle:hover{border-color:var(--blue-500); color:var(--blue-500);}
  .divider-v{width:1px; height:22px; background:var(--line);}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Tajawal', sans-serif; font-weight:700; font-size:14.5px;
    padding:12px 24px; border-radius:10px;
    cursor:pointer; border:none; transition:transform .18s ease, box-shadow .18s ease, background .2s;
  }
  .btn-primary{
    background:var(--blue-500); color:#fff;
    box-shadow:0 8px 20px -6px rgba(47,111,237,.55);
  }
  .btn-primary:hover{background:var(--blue-600); transform:translateY(-2px);}
  .btn-nav{
    background:var(--navy-950); color:#fff; padding:11px 22px;
  }
  .btn-nav:hover{background:var(--blue-500); transform:translateY(-2px);}
  .btn-secondary{
    background:transparent; color:var(--navy-950);
    border:1.5px solid var(--line);
  }
  .btn-secondary:hover{border-color:var(--navy-950); transform:translateY(-2px);}
  .btn-ghost-light{
    background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);
  }
  .btn-ghost-light:hover{border-color:#fff; transform:translateY(-2px);}

  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer;}
  .burger span{width:24px; height:2px; background:var(--navy-950);}

  /* ===== HERO ===== */
  .hero{
    background:var(--navy-950);
    color:#fff;
    position:relative;
    overflow:hidden;
    padding:110px 0 0;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px;
    align-items:center;
    position:relative; z-index:2;
    padding-bottom:90px;
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; font-weight:700; color:var(--cyan-400);
    letter-spacing:.5px; margin-bottom:22px;
  }
  .hero-eyebrow::before{content:""; width:26px; height:2px; background:var(--amber-400);}
  .hero h1{
    font-size:clamp(34px, 4.6vw, 56px);
    color:#fff; line-height:1.28; margin-bottom:22px;
  }
  .hero h1 span{color:var(--cyan-400);}
  .hero p.lead{
    font-size:17px; color:rgba(255,255,255,.72); max-width:480px; margin-bottom:38px;
  }
  .hero-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .hero-actions .btn{padding:15px 30px; font-size:15px;}
  .hero-stats{
    display:flex; gap:40px; margin-top:56px; padding-top:32px;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .hero-stats div b{display:block; font-family:'Almarai'; font-size:26px; color:#fff;}
  .hero-stats div span{font-size:13px; color:rgba(255,255,255,.55);}

  .hero-visual{position:relative;}
  .hero-visual .frame{
    position:relative; border-radius:18px; overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
  }
  .hero-visual img{width:100%; height:420px; object-fit:cover; display:block;}
  .float-card{
    position:absolute; bottom:-24px; left:-24px;
    background:#fff; color:var(--navy-950);
    padding:18px 22px; border-radius:14px;
    box-shadow:0 20px 40px -12px rgba(0,0,0,.35);
    display:flex; align-items:center; gap:14px;
    max-width:230px;
  }
  .float-card .ic{
    width:40px; height:40px; border-radius:10px;
    background:rgba(47,111,237,.12); color:var(--blue-500);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .float-card b{display:block; font-size:14px; font-family:'Almarai';}
  .float-card span{font-size:12px; color:var(--ink-400);}

  .hero-wave{height:70px; background:var(--bg);
    clip-path:polygon(0 100%, 100% 100%, 100% 0, 0 60%);
  }

  /* ===== ABOUT ===== */
  .about .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
  .about-visual{position:relative;}
  .about-visual img{border-radius:16px; width:100%; height:420px; object-fit:cover;}
  .about-content .eyebrow{margin-bottom:14px;}
  .about-content h2{font-size:clamp(26px,3.2vw,36px); margin-bottom:18px; line-height:1.4;}
  .about-content > p{color:var(--ink-600); margin-bottom:30px; font-size:16px;}
  .pillars{display:flex; flex-direction:column; gap:18px; margin-bottom:32px;}
  .pillar{display:flex; gap:16px; align-items:flex-start;}
  .pillar .dot{
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:var(--navy-950); color:var(--cyan-400);
    display:flex; align-items:center; justify-content:center;
  }
  .pillar b{display:block; font-family:'Almarai'; font-size:15.5px; margin-bottom:3px;}
  .pillar p{font-size:14.5px; color:var(--ink-600); margin:0;}

  /* ===== SERVICES ===== */
  .services{background:var(--paper);}
  .service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .service-card{
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:32px 26px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
  }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -18px rgba(15,44,72,.25);
    border-color:var(--blue-500);
  }
  .service-card .ic{
    width:52px; height:52px; border-radius:12px;
    background:var(--navy-950); color:var(--cyan-400);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
  }
  .service-card h3{font-size:17px; margin-bottom:10px; line-height:1.4;}
  .service-card p{font-size:14px; color:var(--ink-600);}
  .services-cta{text-align:center; margin-top:52px;}

  /* ===== WHY US ===== */
  .why{background:var(--navy-950); color:#fff; position:relative;}
  .why .section-head p{color:rgba(255,255,255,.6);}
  .why .section-head h2{color:#fff;}
  .why .eyebrow{color:var(--cyan-400);}
  .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.12); border-radius:16px; overflow:hidden;}
  .why-item{background:var(--navy-800); padding:34px 30px;}
  .why-item .ic{
    width:44px; height:44px; border-radius:10px;
    background:rgba(255,255,255,.08); color:var(--amber-400);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .why-item h3{color:#fff; font-size:16px; margin-bottom:8px;}
  .why-item p{color:rgba(255,255,255,.6); font-size:14px; margin:0;}

  /* ===== FAQ ===== */
  .faq .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px;}
  .faq-side h2{font-size:clamp(24px,3vw,34px); margin-bottom:16px;}
  .faq-side p{color:var(--ink-600); margin-bottom:26px;}
  .faq-list{display:flex; flex-direction:column; gap:14px;}
  .faq-item{
    border:1px solid var(--line); border-radius:12px; background:var(--paper);
    overflow:hidden;
  }
  .faq-q{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; cursor:pointer; font-family:'Almarai'; font-size:15px;
  }
  .faq-q .plus{
    width:26px; height:26px; border-radius:50%; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    color:var(--blue-500); flex-shrink:0; transition:transform .25s;
    font-size:16px;
  }
  .faq-item.open .plus{transform:rotate(45deg); background:var(--blue-500); color:#fff;}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .faq-item.open .faq-a{max-height:200px;}
  .faq-a p{padding:0 24px 20px; color:var(--ink-600); font-size:14.5px;}

  /* ===== CONTACT ===== */
  .contact{background:var(--paper);}
  .contact .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px;}
  .contact-info{background:var(--navy-950); color:#fff; border-radius:20px; padding:44px 38px; position:relative; overflow:hidden;}
  .contact-info h2{color:#fff; font-size:26px; margin-bottom:14px;}
  .contact-info p{color:rgba(255,255,255,.65); margin-bottom:32px; font-size:15px;}
  .contact-row{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
  .contact-row .ic{
    width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; color:var(--cyan-400); flex-shrink:0;
  }
  .contact-row span{font-size:14.5px; color:rgba(255,255,255,.85);}
  .contact-form{
    background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:40px;
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
  .field{display:flex; flex-direction:column; gap:8px;}
  .field.full{grid-column:1/-1;}
  .field label{font-size:13.5px; font-weight:700; color:var(--ink-600);}
  .field input, .field textarea{
    border:1px solid var(--line); border-radius:10px; padding:13px 16px;
    font-family:'Tajawal'; font-size:14.5px; background:#fff; color:var(--ink-900);
  }
  .field textarea{resize:vertical; min-height:110px;}
  .field input:focus, .field textarea:focus{outline:2px solid var(--blue-500); outline-offset:1px;}

  /* ===== FOOTER ===== */
  footer{background:var(--navy-950); color:rgba(255,255,255,.7); padding-top:80px;}
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1);
  }
  .footer-brand .logo{color:#fff;}
  .footer-brand p{margin-top:16px; font-size:14px; color:rgba(255,255,255,.55); max-width:280px;}
  footer h4{color:#fff; font-size:15px; margin-bottom:20px;}
  footer ul{display:flex; flex-direction:column; gap:12px;}
  footer ul a{font-size:14px; color:rgba(255,255,255,.6); transition:color .2s;}
  footer ul a:hover{color:var(--cyan-400);}
  .footer-bottom{
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 0; font-size:13.5px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:12px;
  }
  .footer-bottom .legal{display:flex; gap:22px;}

  /* ===== RESPONSIVE ===== */
  @media (max-width:960px){
    .nav-links{display:none;}
    .burger{display:flex;}
    .hero .wrap, .about .wrap, .faq .wrap, .contact .wrap{grid-template-columns:1fr;}
    .service-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .form-row{grid-template-columns:1fr;}
    .hero-visual{margin-top:20px;}
  }
  @media (max-width:560px){
    .service-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .hero-stats{gap:24px; flex-wrap:wrap;}
    section{padding:64px 0;}
  }

/* ===== Senseivo bridge / case studies ===== */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.text-center { text-align: center; }
.case-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.case-study-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.case-study-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(15,44,72,.25);
  border-color: var(--blue-500);
}
.case-study-body { padding: 28px 24px; }
.case-study-cat {
  color: var(--blue-500);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
.case-study-tech { font-size: 14px; color: var(--ink-400); margin: 12px 0; }
.case-study-media img,
.case-study-hero-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 1.5rem 0;
}
.case-study-blocks { display: grid; gap: 2rem; margin: 2rem 0; }
.portfolio-page, .case-study-detail { padding-top: 120px; padding-bottom: 80px; }
.contact-form-status { margin: 12px 0; font-size: 14px; }
.contact-form-status.is-success { color: #1f8a4c; }
.contact-form-status.is-error { color: #c0392b; }
.header { /* alias sticky header from redesign */ }
a[href^="tel"] { direction: ltr; unicode-bidi: embed; }

/* Catalog/Identity soft fallbacks */
.section { padding: 96px 0; }
.w-100 { width: 100%; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
/* Mobile nav drawer */
.overlay[hidden]{display:none;}
.overlay{
  display:none;
  position:fixed; inset:0; background:rgba(10,27,46,.45);
  z-index:90; backdrop-filter:blur(2px);
}
.overlay.active{display:block;}
@media (max-width:960px){
  .nav-links{
    display:none;
    position:fixed; top:82px; left:16px; right:16px;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    flex-direction:column; align-items:stretch; gap:0; padding:12px;
    z-index:95; box-shadow:0 20px 40px -18px rgba(15,44,72,.3);
  }
  .nav-links.active{display:flex;}
  .nav-links a{
    padding:14px 12px; border-bottom:1px solid var(--line);
  }
  .nav-links a:last-child{border-bottom:0;}
  .overlay:not([hidden]){ /* keep */ }
}
.why .case-study-card{background:#fff; color:var(--ink-900);}
.why .case-study-card h3{color:var(--navy-950);}
.portfolio-page .section-title,
.case-study-detail .section-title{font-family:'Almarai',sans-serif;}