/* ═══ ديوان — النيلي الوزاري الحي v3 ═══ */
:root{--navy:#0F2350;--navy2:#1B3A72;--navy3:#0A1A3C;--gold:#A98C4B;--gold2:#C9AE6E;--gold3:#E4D2A4;
--ink:#1A2438;--muted:#5C6B84;--ok:#137A52;--wip:#A87718;--rc:16px;--rb:9px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F5F6F8;color:var(--ink);font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Almarai","IBM Plex Sans Arabic",sans-serif;margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:6px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
html[lang=en] body{font-family:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3{font-family:"IBM Plex Sans","Almarai",sans-serif}

/* ═══ الحركات ═══ */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.r1{animation-delay:.05s}.r2{animation-delay:.18s}.r3{animation-delay:.3s}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes drawArch{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes shine{from{background-position:150% 0}to{background-position:-150% 0}}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv2{transition-delay:.12s}.rv3{transition-delay:.24s}

/* ═══ الشريط العلوي ═══ */
.gov{background:linear-gradient(120deg,var(--navy),#183567);color:#fff;border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:40;box-shadow:0 4px 20px rgba(10,26,60,.3)}
.gov .in{max-width:1040px;margin:0 auto;padding:0 20px;height:78px;display:flex;align-items:center;gap:28px}
.logo-d{display:flex;align-items:center;gap:13px}
.logo-d svg path{stroke-dasharray:120;animation:drawArch 1.4s ease .2s both}
.logo-d b{font-family:"Almarai";font-weight:800;font-size:27px;line-height:1;letter-spacing:.3px}
.logo-d small{display:block;font-size:10px;letter-spacing:4.5px;font-weight:600;color:var(--gold2);font-family:"IBM Plex Sans";margin-top:3px}
.nav{display:flex;gap:26px;font-size:14px;font-weight:600}
.nav a{position:relative;padding:6px 0;opacity:.85;transition:opacity .15s}
.nav a::after{content:"";position:absolute;bottom:0;inset-inline:0;height:2px;background:var(--gold2);transform:scaleX(0);transition:transform .22s ease}
.nav a:hover{opacity:1}
.nav a:hover::after{transform:scaleX(1)}
.langbtn{margin-inline-start:auto;border:1px solid rgba(201,174,110,.6);color:var(--gold2);border-radius:var(--rb);padding:6px 16px;font-size:13px;font-weight:700;cursor:pointer;background:none;font-family:inherit;transition:all .2s}
.langbtn:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* ═══ الترويسة ═══ */
.hero{background:linear-gradient(155deg,#0C1D44,var(--navy) 55%,var(--navy2));color:#fff;position:relative;overflow:hidden}
.hero .arch-float{position:absolute;inset-inline-end:-40px;top:12px;opacity:.07;animation:floaty 9s ease-in-out infinite;pointer-events:none}
.hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,174,110,.6),transparent)}
.hero .in{max-width:1040px;margin:0 auto;padding:56px 20px 52px;text-align:center;position:relative}
.hero .k{display:inline-flex;align-items:center;gap:12px;color:var(--gold2);font-size:12.5px;font-weight:700;letter-spacing:1.2px;margin:0 0 14px}
.hero .k::before,.hero .k::after{content:"✦";font-size:10px;opacity:.8}
.hero h1{font-size:clamp(28px,4.6vw,38px);line-height:1.5;
  background:linear-gradient(110deg,#fff 20%,var(--gold3) 45%,#fff 70%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
.hero p{margin:14px auto 0;color:#B9C6E2;max-width:56ch;font-size:15px}

/* ═══ الأنظمة ═══ */
.sec{padding:46px 0 8px}
.sec-label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.6px;color:var(--navy);margin-bottom:22px}
.sec-label::after{content:"";width:52px;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:22px}
.cx{background:#fff;border-radius:var(--rc);padding:30px 26px 24px;box-shadow:0 10px 30px rgba(15,35,80,.09);
  position:relative;display:flex;flex-direction:column;text-align:center;
  transition:transform .25s ease,box-shadow .25s ease}
.cx::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold))}
.cx:hover{transform:translateY(-8px);box-shadow:0 26px 54px rgba(15,35,80,.2)}
.em{width:86px;height:86px;margin:0 auto 16px;border-radius:24px;display:grid;place-items:center;position:relative;
  background:linear-gradient(150deg,var(--navy),var(--navy2));
  box-shadow:0 12px 28px rgba(15,35,80,.35),inset 0 0 0 2px rgba(201,174,110,.5);
  animation:breathe 3.6s ease-in-out infinite;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s ease}
.cx:nth-child(2) .em{animation-delay:.6s}
.cx:nth-child(3) .em{animation-delay:1.2s}
.cx:nth-child(4) .em{animation-delay:1.8s}
.em::after{content:"";position:absolute;inset:-7px;border-radius:29px;border:1.5px solid rgba(201,174,110,.35);transition:inset .3s ease,border-color .3s ease}
.em svg,.em img{transition:transform .3s ease;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.em img{width:62px;height:62px;object-fit:contain}
.em.haslogo{background:#fff}
.cx:hover .em{animation-play-state:paused;transform:scale(1.16) rotate(-3deg);
  box-shadow:0 18px 40px rgba(15,35,80,.45),inset 0 0 0 2px var(--gold2),0 0 34px rgba(201,174,110,.5)}
.cx:hover .em::after{inset:-11px;border-color:var(--gold2)}
.cx:hover .em svg,.cx:hover .em img{transform:scale(1.1)}
.cx h3{font-size:21px;color:var(--navy)}
.cx .subx{color:var(--gold);font-size:12.5px;font-weight:700;margin:2px 0 0}
.stx{margin:8px auto 0;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 13px;width:fit-content}
.stx.live{background:#E7F4EE;color:var(--ok)}
.stx.wip{background:#FBF1DF;color:var(--wip)}
.stx.idea{background:#EEF0F5;color:var(--muted)}
.cx p{margin:12px 0 18px;color:var(--muted);font-size:13.5px;flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:fit-content;margin:0 auto;
  background:var(--navy);color:#fff;border-radius:999px;padding:10px 30px;font-size:13.5px;font-weight:700;
  border:1px solid transparent;transition:all .2s}
.btn .arw{display:inline-block;transition:transform .2s}
.btn:hover{background:var(--gold);color:var(--navy)}
.btn:hover .arw{transform:translateX(-4px)}
html[lang=en] .btn:hover .arw{transform:translateX(4px)}
.btn.dis{background:#CDD4E2;pointer-events:none}
.empty{background:#fff;border-radius:var(--rc);box-shadow:0 10px 30px rgba(15,35,80,.09);padding:40px;text-align:center;color:var(--muted);grid-column:1/-1}

/* ═══ من نحن ═══ */
.about{background:linear-gradient(155deg,var(--navy) 30%,var(--navy2));color:#fff;margin-top:52px;position:relative;overflow:hidden}
.about::before{content:"";position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68' viewBox='0 0 68 68'%3E%3Cpath d='M34 6 L40 28 L62 34 L40 40 L34 62 L28 40 L6 34 L28 28 Z' fill='none' stroke='%23C9AE6E' stroke-width='1'/%3E%3C/svg%3E");background-size:68px 68px}
.about .in{max-width:1040px;margin:0 auto;padding:48px 20px;display:grid;grid-template-columns:1.4fr 1fr;gap:38px;position:relative}
.about .sec-label{color:var(--gold2)}
.about .sec-label::after{background:linear-gradient(90deg,var(--gold2),transparent)}
.about h2{font-size:23px;margin-bottom:4px}
.about p{color:#C3CEE8;font-size:14.5px;margin:10px 0 0}
.vals{display:flex;flex-direction:column;gap:13px}
.val{border:1px solid rgba(201,174,110,.35);border-radius:var(--rc);padding:15px 19px;background:rgba(255,255,255,.045);transition:transform .2s,border-color .2s,background .2s}
.val:hover{transform:translateX(-5px);border-color:var(--gold2);background:rgba(201,174,110,.1)}
html[lang=en] .val:hover{transform:translateX(5px)}
.val b{color:var(--gold2);font-size:14.5px;display:flex;align-items:center;gap:9px}
.val b::before{content:"✦";font-size:10px}
.val span{font-size:12.5px;color:#AFBCDC;display:block}

/* ═══ واتساب عائم ═══ */
.wa{position:fixed;right:22px;bottom:24px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.28);
  animation:waPulse 2.6s ease-out infinite;transition:transform .2s ease}
.wa:hover{transform:scale(1.12)}
.wa svg{width:31px;height:31px;fill:#fff}

footer.of{background:var(--navy3);color:#fff;font-size:12.5px}
footer.of .in{max-width:1040px;margin:0 auto;padding:20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
footer.of .sp{margin-inline-start:auto}
footer.of a{opacity:.75;transition:opacity .15s}footer.of a:hover{opacity:1}

@media(max-width:720px){.about .in{grid-template-columns:1fr}.nav{display:none}.gov .in{height:70px}.logo-d b{font-size:23px}.wa{width:52px;height:52px;right:16px;bottom:18px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}