:root{
  --bg:#F7F5F1; --surface:#FFFFFF; --ink:#1A2732; --muted:#5C6B77;
  --accent:#E0561F; --accent-deep:#B23E12; --dark:#132430; --dark2:#1C3242;
  --line:#E7E1D7; --chip:#FDEFE7;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Tajawal","Segoe UI",Tahoma,sans-serif;
  font-size:1.05rem; line-height:1.8;
}
h1,h2,h3,h4{font-family:"Cairo","Tajawal",sans-serif; line-height:1.35; text-wrap:balance}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:72rem; margin-inline:auto; padding-inline:1.25rem}

/* top strip */
.topbar{background:var(--dark); color:#C9D4DC; font-size:.85rem}
.topbar .container{display:flex; justify-content:space-between; gap:1rem; padding-block:.4rem; flex-wrap:wrap}
.topbar a{color:#fff}
.topbar span{white-space:nowrap}

/* header */
header.site{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line); backdrop-filter:blur(6px);
}
header.site .container{display:flex; align-items:center; gap:1.5rem; padding-block:.65rem}
.brand{display:flex; align-items:center; gap:.7rem; font-family:"Cairo",sans-serif; font-weight:800; font-size:1.15rem}
.brand img{height:46px; width:auto}
nav.main{display:flex; gap:1.4rem; margin-inline-start:auto; font-weight:500; flex-wrap:wrap}
nav.main a{padding:.25rem 0; border-bottom:2px solid transparent}
nav.main a:hover{color:var(--accent); border-color:var(--accent)}
.lang{
  border:1.5px solid var(--ink); border-radius:99px; padding:.2rem .85rem;
  font-weight:700; font-size:.9rem; white-space:nowrap;
}
.lang:hover{background:var(--ink); color:#fff}

/* hero */
.hero{background:linear-gradient(160deg,var(--dark) 0%,var(--dark2) 70%,#24435A 100%); color:#fff; overflow:hidden}
.hero .container{display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:center; padding-block:4.5rem}
.hero .kicker{color:#F09A6E; font-weight:700; letter-spacing:.04em; font-size:.95rem; margin-bottom:.75rem}
.hero h1{font-size:clamp(1.7rem,4vw,2.7rem); font-weight:800; margin-bottom:1rem; color:#fff}
.hero p{color:#C9D4DC; max-width:36rem; margin-bottom:1.75rem}
.cta{display:flex; gap:.9rem; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:.55rem;
  padding:.7rem 1.5rem; font-weight:700; font-family:"Cairo",sans-serif; transition:transform .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{border:1.5px solid #ffffff66; color:#fff}
.btn-ghost:hover{border-color:#fff}
.hero-img{background:#fff; border-radius:1rem; padding:1.25rem; box-shadow:0 20px 60px #0006}
.hero-img img{margin-inline:auto; max-height:320px; object-fit:contain}
.stats{background:var(--accent); color:#fff}
.stats .container{display:flex; justify-content:space-around; gap:1rem; padding-block:1.1rem; flex-wrap:wrap; text-align:center}
.stats b{display:block; font-family:"Cairo",sans-serif; font-size:1.5rem; font-weight:800}
.stats span{font-size:.85rem; opacity:.92}

/* sections */
section{padding-block:4rem}
.sec-head{max-width:44rem; margin-bottom:2.25rem}
.sec-head .eyebrow{color:var(--accent); font-weight:700; font-size:.9rem; letter-spacing:.03em}
.sec-head h2{font-size:clamp(1.4rem,3vw,2rem); font-weight:800; margin-top:.25rem}
.sec-head p{color:var(--muted); margin-top:.5rem}

/* products */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:1.5rem}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:.9rem;
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s;
}
.card:hover{box-shadow:0 14px 40px #1a273218; transform:translateY(-3px)}
.card .ph{background:#FBFAF7; border-bottom:1px solid var(--line); height:12rem; display:flex; align-items:center; justify-content:center; padding:1rem}
.card .ph img{max-height:100%; object-fit:contain}
.card .body{padding:1.1rem 1.25rem 1.35rem}
.card h3{font-size:1.1rem; font-weight:700; margin-bottom:.4rem}
.card p{color:var(--muted); font-size:.92rem; line-height:1.7}

/* about */
.about{background:var(--surface); border-block:1px solid var(--line)}
.about .container{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start}
.about .lead{font-weight:500}
.vm{display:grid; gap:1.25rem}
.vm .box{background:var(--bg); border:1px solid var(--line); border-radius:.9rem; padding:1.4rem 1.5rem; border-inline-start:4px solid var(--accent)}
.vm h3{font-size:1.05rem; font-weight:800; margin-bottom:.4rem; color:var(--accent-deep)}
.vm p{color:var(--muted); font-size:.95rem}

/* clients */
.clients .group{margin-bottom:1.75rem}
.clients h3{font-size:1.05rem; font-weight:700; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem}
.clients h3::before{content:""; width:.6rem; height:.6rem; border-radius:2px; background:var(--accent); display:inline-block}
.chips{display:flex; flex-wrap:wrap; gap:.6rem}
.chips span{background:var(--chip); color:var(--accent-deep); border:1px solid #EFC8B2; border-radius:99px; padding:.3rem 1rem; font-size:.9rem; font-weight:500}

/* contact */
.contact{background:var(--dark); color:#fff}
.contact .sec-head h2{color:#fff}
.contact .sec-head p{color:#AEBECA}
.contact .grid{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.cbox{background:var(--dark2); border:1px solid #ffffff14; border-radius:.9rem; padding:1.4rem 1.5rem}
.cbox .lbl{color:#F09A6E; font-size:.82rem; font-weight:700; margin-bottom:.35rem}
.cbox a, .cbox div.val{font-family:"Cairo",sans-serif; font-weight:700; font-size:1.05rem; color:#fff; word-break:break-word}
.cbox a:hover{color:#F09A6E}
.contact .cta{margin-top:2rem}
.btn-wa{background:#1FAF54; color:#fff}
.btn-wa:hover{background:#178A42}

footer{background:#0D1B25; color:#8CA0AE; font-size:.85rem}
footer .container{display:flex; justify-content:space-between; gap:1rem; padding-block:1.2rem; flex-wrap:wrap}
footer a{color:#C9D4DC}
footer a:hover{color:#fff}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn:hover,.card:hover{transform:none}
}
@media (max-width: 860px){
  .hero .container{grid-template-columns:1fr; padding-block:3rem}
  .about .container{grid-template-columns:1fr; gap:2rem}
  nav.main{gap:1rem; font-size:.92rem}
  .brand span{display:none}
}