:root{
  --brand-primary:#0D7C80; --brand-accent:#0AA3A8; --brand-gold:#C9A227; --brand-dark:#0F172A;
  --radius:16px; --pad:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:var(--brand-dark);line-height:1.7;background:#fff}
h1,h2,h3{font-family:"Playfair Display","Times New Roman",serif}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{font-family:"Cairo","Noto Naskh Arabic",serif}
a{color:var(--brand-primary);text-decoration:none}
.header{position:sticky;top:0;z-index:50;background:#ffffffd9;border-bottom:1px solid #e8eef0;backdrop-filter:saturate(180%) blur(8px)}
.nav{max-width:1280px;margin:auto;padding:12px var(--pad);display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;border-radius:10px;background:#fff;object-fit:contain;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.brand span{font-weight:800}
.btn{display:inline-block;padding:10px 14px;border-radius:999px;font-weight:700;border:1px solid #cbd5e1;background:#fff;white-space:nowrap}
.btn.primary{border-color:transparent;background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent));color:#fff}
.btn.gold{border-color:transparent;background:linear-gradient(90deg,var(--brand-gold),#E2C766);color:#111827}
.hero{background:linear-gradient(180deg,#ffffff 0%,#f7fafb 60%,#eef6f7 100%);border-bottom:1px solid #eef2f7;position:relative;overflow:hidden}
.hero .backmark{position:absolute;inset:0;background:url('assets/logo.png') no-repeat center/40%;opacity:.05}
.container{max-width:1280px;margin:auto;padding:56px var(--pad)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.hero h1{font-size:clamp(32px,5vw,60px);margin:0 0 8px;color:var(--brand-primary);line-height:1.1}
.sub{color:#425466;max-width:70ch}
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.kpi{background:#fff;border:1px solid #e2e8f0;padding:12px 14px;border-radius:12px;min-width:150px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.kpi b{display:block;font-size:20px;color:var(--brand-primary)}
.hero-img{border-radius:20px;overflow:hidden;border:1px solid #dde6ea;box-shadow:0 16px 48px rgba(0,0,0,.08)}
.hero-img img{width:100%;height:380px;object-fit:cover}
.section{padding:72px var(--pad)}
.section.alt{background:#F7FAFB}
.section h2{font-size:clamp(24px,3.2vw,34px);margin:0 0 10px;color:var(--brand-primary)}
.section p.lead{color:#475569;max-width:80ch}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.card h3{margin:6px 0 6px;font-size:19px;color:var(--brand-primary)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(13,124,128,.10);color:var(--brand-primary);border:1px solid rgba(13,124,128,.18)}
.badge.gold{background:rgba(201,162,39,.12);border-color:rgba(201,162,39,.3);color:#8a6b1a}
/* Elegant APG */
.apg {padding:72px var(--pad); background:#F7FAFB;}
.apg .head {text-align:center; max-width:72ch; margin:0 auto 24px;}
.apg h2 {margin:0; font-size:clamp(26px,3.2vw,36px); color:var(--brand-primary);}
.apg .lead {color:#475569; margin:10px auto 0;}
.apg .row {display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr));}
.apg .card {position:relative; background:#fff; border:1px solid #e5edf0; border-radius:18px; padding:22px 20px 18px; box-shadow:0 14px 40px rgba(0,0,0,.06); transition:transform .25s ease, box-shadow .25s ease;}
.apg .card:hover {transform:translateY(-4px); box-shadow:0 18px 54px rgba(0,0,0,.09);}
.apg .num {position:absolute; inset:auto 16px 16px auto; width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-weight:900; color:#111827; background:linear-gradient(135deg, var(--brand-gold), #E2C766); box-shadow:0 6px 18px rgba(201,162,39,.25);}
.apg h3 {margin:4px 0 8px; color:var(--brand-primary); font-size:20px;}
.apg p {margin:0; color:#3a4856;}
.apg .chips {display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.apg .chip {font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; border:1px solid var(--brand-primary); color:var(--brand-primary); background:#F0FBFC;}
.apg .rail {margin:24px auto 0; max-width:960px;}
.apg .bar {height:8px; background:#eaf3f5; border-radius:999px; overflow:hidden;}
.apg .bar > span {display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent)); transform:scaleX(.0); transform-origin:left; transition:transform .8s cubic-bezier(.22,.61,.36,1);}
.apg.in .bar > span {transform:scaleX(1);}
.numgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.num{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:24px}
.num .n{font-size:36px;font-weight:900;color:var(--brand-gold);position:absolute;top:10px;right:12px;opacity:.95}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{border:1px solid var(--brand-primary);color:var(--brand-primary);padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#F0FBFC}
.collage{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.art{width:100%;background:#fff;border-radius:16px;border:1px solid #e2e8f0;box-shadow:0 16px 40px rgba(0,0,0,.06)}
.art.cover{height:320px;object-fit:cover}
.art.contain{height:auto;aspect-ratio:4/3;object-fit:contain}
.footer{background:#0b1220;color:#cbd5e1}
.footer a{color:#e2e8f0}
.small{font-size:12px;color:#8a97a7}
#wa{position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font-weight:700;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:99}
#wa:hover{transform:translateY(-2px)}
[dir="rtl"] {direction:rtl}
[dir="rtl"] .nav{flex-direction:row-reverse}
[dir="rtl"] .langswitch{margin-right:8px;margin-left:0}

/* Reveal */
[data-animate]{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
[data-animate].in{opacity:1;transform:translateY(0) scale(1)}
.grid [data-animate]{transition-delay:.05s}
.grid [data-animate]:nth-child(2){transition-delay:.12s}
.grid [data-animate]:nth-child(3){transition-delay:.18s}
.grid [data-animate]:nth-child(4){transition-delay:.24s}
.grid [data-animate]:nth-child(5){transition-delay:.30s}
.grid [data-animate]:nth-child(6){transition-delay:.36s}

/* Mobile polish */
@media (max-width:420px){
  .nav{gap:8px}
  .brand img{width:38px;height:38px}
  .brand span{font-size:14px}
  .topline{gap:6px;padding-bottom:6px}
  .btn{padding:8px 11px;font-size:13px}
  .phone{font-weight:800;color:var(--brand-primary)}
  .hero{padding-top:6px}
  .hero-grid{grid-template-columns:1fr;gap:14px}
  .hero h1{font-size:28px}
  .sub{font-size:14.5px}
  .kpi{min-width:unset;width:100%}
  .hero-img img{height:230px;border-radius:14px}
  .section{padding:54px var(--pad)}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .numgrid{gap:12px;scroll-snap-type:x mandatory;overflow-x:auto;padding:3px 2px 10px}
  .num{min-width:88%;scroll-snap-align:center}
  .chip{font-size:12px;padding:5px 9px}
  #wa{right:12px;bottom:78px}
  body{padding-bottom:68px}
}
@media (min-width:421px) and (max-width:820px){
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-img img{height:300px}
  #wa{bottom:22px}
}