:root{
  --ink:#0b0b0d;
  --ink-soft:#151519;
  --ink-line:#2a2a30;
  --crimson:#c11e40;
  --crimson-deep:#7a1029;
  --crimson-glow: rgba(193,30,64,.35);
  --paper:#f3f0ea;
  --paper-dim:#e7e2d8;
  --white:#ffffff;
  --slate:#948f86;
  --slate-dark:#5c5952;
  --radius: 4px;
  --container: 1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Tajawal', sans-serif; background:var(--paper); color:var(--ink); line-height:1.7; overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Cairo', sans-serif; line-height:1.25;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.container{max-width:var(--container); margin:0 auto; padding:0 28px;}

.eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.eyebrow::before{content:""; width:5px; height:26px; background:var(--crimson); display:block; flex-shrink:0;}
.eyebrow span{font-family:'Cairo', sans-serif; font-weight:700; font-size:14px; letter-spacing:1px;}
.on-dark .eyebrow span{color:var(--white);}
.on-light .eyebrow span{color:var(--ink);}

.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(28px, 4vw, 44px); font-weight:800;}
.section-head p{margin-top:14px; color:var(--slate-dark); font-size:17px; max-width:560px;}
.on-dark .section-head p{color:#b7b3ac;}

section{position:relative; padding:100px 0; overflow:hidden;}
.on-dark{background:var(--ink); color:var(--white);}
.on-light{background:var(--paper); color:var(--ink);}

.watermark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-6deg);
  font-family:'Cairo', sans-serif; font-weight:900; font-size:min(38vw, 480px);
  color:rgba(255,255,255,.035); white-space:nowrap; pointer-events:none; z-index:0; user-select:none;
}
.on-light .watermark{color:rgba(11,11,13,.035);}
section > .container{position:relative; z-index:1;}

/* ---------- Nav ---------- */
header{position:fixed; top:0; right:0; left:0; z-index:1000; background:rgba(11,11,13,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--ink-line); transition:background .3s;}
.nav-wrap{max-width:var(--container); margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:40px; width:auto;}
nav.links{display:flex; gap:32px;}
nav.links a{font-size:14.5px; color:#d8d5cf; font-weight:500; position:relative; padding:6px 0;}
nav.links a.active{color:var(--white);}
nav.links a::after{content:""; position:absolute; bottom:0; right:0; width:0; height:2px; background:var(--crimson); transition:width .25s;}
nav.links a:hover{color:var(--white);}
nav.links a:hover::after, nav.links a.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:18px;}

.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 26px; font-family:'Cairo', sans-serif; font-weight:700; font-size:14.5px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:transform .2s, background .2s, border-color .2s; white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--crimson); color:var(--white);}
.btn-primary:hover{background:#a3182f;}
.btn-outline-dark{border-color:#3a3a42; color:var(--white);}
.btn-outline-dark:hover{border-color:var(--crimson);}
.btn-outline-light{border-color:var(--ink); color:var(--ink);}
.btn-outline-light:hover{border-color:var(--crimson); color:var(--crimson);}
.btn-block{width:100%; justify-content:center;}
.btn-lg{padding:16px 36px; font-size:16px;}

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

/* ---------- Page header (inner pages) ---------- */
.page-hero{
  padding:180px 0 80px;
  background:radial-gradient(ellipse at 30% 20%, rgba(193,30,64,.18), transparent 55%), var(--ink);
}
.page-hero .breadcrumb{font-size:13.5px; color:var(--slate); margin-bottom:18px;}
.page-hero .breadcrumb a:hover{color:var(--crimson);}
.page-hero h1{font-size:clamp(30px,4.4vw,48px); font-weight:900; color:var(--white); max-width:760px;}
.page-hero p.lead{margin-top:18px; font-size:17px; color:#c7c3bb; max-width:600px;}

/* ---------- Cards / chips / grids reused ---------- */
.chip{font-size:13px; padding:6px 14px; background:var(--white); border:1px solid var(--paper-dim); border-radius:20px; color:var(--ink); font-weight:500;}
.client-chip{padding:10px 20px; background:var(--white); border:1px solid var(--paper-dim); font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; color:var(--ink);}
.client-chips{display:flex; flex-wrap:wrap; gap:12px;}

/* ---------- Footer ---------- */
footer{background:var(--ink); border-top:1px solid var(--ink-line); padding:50px 0 24px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid var(--ink-line);}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-brand img{height:44px;}
.footer-links{display:flex; gap:40px; flex-wrap:wrap;}
.footer-col h5{font-family:'Cairo',sans-serif; font-size:14px; color:var(--white); margin-bottom:14px;}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:14px; color:var(--slate);}
.footer-col a:hover{color:var(--crimson);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; flex-wrap:wrap; gap:14px;}
.footer-bottom p{font-size:13px; color:var(--slate);}
.socials{display:flex; gap:12px;}
.socials a{width:36px; height:36px; border:1px solid var(--ink-line); display:flex; align-items:center; justify-content:center; color:var(--slate);}
.socials a:hover{border-color:var(--crimson); color:var(--crimson);}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

.float-wa{position:fixed; bottom:26px; left:26px; z-index:900; width:56px; height:56px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.35); color:#fff;}

.mobile-nav{position:fixed; top:0; right:-100%; width:78%; max-width:320px; height:100vh; background:var(--ink-soft); border-left:1px solid var(--ink-line); z-index:1100; padding:100px 30px 30px; transition:right .35s ease; display:flex; flex-direction:column; gap:26px;}
.mobile-nav.open{right:0;}
.mobile-nav a{font-size:17px; font-weight:600; color:var(--white);}
.mobile-nav-close{position:absolute; top:28px; left:28px; background:none; border:none; color:var(--white); font-size:22px; cursor:pointer;}
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1050; display:none;}
.overlay.show{display:block;}

@media (max-width: 980px){
  nav.links{display:none;}
  .burger{display:flex;}
}
@media (max-width: 640px){
  section{padding:70px 0;}
  .page-hero{padding-top:140px;}
  .footer-top{flex-direction:column;}
}
.float-actions{position:fixed; bottom:26px; left:26px; display:flex; flex-direction:column; gap:12px; z-index:900;}
.float-btn{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.3); transition:transform .2s;}
.float-btn:hover{transform:scale(1.08);}
.call-btn{background:var(--crimson);}
.wa-btn{background:#25D366;}