/* ═══════════════════════════════════════════════════════════════
   IBRAZ PRIME — التنسيقات المشتركة
   الهوية: أسود ليلي + بلاتيني (من هوية إبراز برايم)
   ═══════════════════════════════════════════════════════════════ */
:root{
  --plat:#d6d9de; --plat-lt:#f4f5f7; --plat-dp:#8e9298;
  --grad:linear-gradient(135deg,#f7f8fa 0%,#c4c8ce 38%,#8e9298 66%,#eceef1 100%);
  --grad-soft:linear-gradient(135deg,rgba(247,248,250,.16),rgba(142,146,152,.04));
  --on-grad:#0c0c0e;
  --r-sm:12px; --r:20px; --r-lg:30px;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1300px;
  --f-ar:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-d:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  --f-lat:'Montserrat',system-ui,sans-serif;
}
html[data-theme="dark"]{
  --bg:#060607; --bg2:#0c0c0e; --bg3:#131316;
  --surface:rgba(255,255,255,.035); --surface2:rgba(255,255,255,.07);
  --line:rgba(214,217,222,.14); --line2:rgba(255,255,255,.07); --line-strong:rgba(214,217,222,.34);
  --txt:#f3f4f6; --muted:#9a9ca3; --shadow:0 30px 80px -32px rgba(0,0,0,.95);
  --glow:rgba(214,217,222,.13); --accent:#e7e9ec;
}
html[data-theme="light"]{
  --bg:#f6f5f2; --bg2:#ffffff; --bg3:#eeece7;
  --surface:rgba(12,12,14,.025); --surface2:rgba(12,12,14,.05);
  --line:rgba(12,12,14,.11); --line2:rgba(12,12,14,.07); --line-strong:rgba(12,12,14,.3);
  --txt:#121215; --muted:#62646b; --shadow:0 24px 60px -30px rgba(20,20,30,.35);
  --glow:rgba(120,125,135,.18); --accent:#121215;
  --grad:linear-gradient(135deg,#2a2b30 0%,#121215 45%,#43454c 100%);
  --on-grad:#f6f5f2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--f-ar);line-height:1.8;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;transition:background .5s var(--ease),color .5s var(--ease)}
html[lang="en"] body{font-family:var(--f-lat)}
h1,h2,h3,h4{font-family:var(--f-d);letter-spacing:-.01em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{font-family:var(--f-lat);letter-spacing:-.02em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--plat);color:#0c0c0e}
.wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto}
.plat{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--plat),var(--plat-dp));border-radius:9px}

/* ═══ اسم العلامة (بدون شعار) ═══ */
.wm{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;gap:6px}
.wm .en{font-family:var(--f-lat);font-weight:600;letter-spacing:.32em;font-size:17px;direction:ltr;white-space:nowrap}
.wm .en i{font-style:normal;font-weight:300;color:var(--muted)}
.wm .ar{font-family:var(--f-d);font-weight:600;font-size:11px;letter-spacing:.12em;color:var(--muted)}
html[dir="rtl"] .wm{align-items:flex-start}
.wm-xl{align-items:center!important;gap:14px}
.wm-xl .en{font-size:clamp(26px,5.4vw,58px);letter-spacing:.34em;margin-inline-end:-.34em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm-xl .en i{color:inherit;font-weight:200}
.wm-xl .ar{font-size:clamp(13px,1.6vw,17px);letter-spacing:.5em}
.wm-xl .rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--plat),transparent)}

/* ═══ PRELOADER ═══ */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
#loader.hide{opacity:0;visibility:hidden}
#loader .wm-xl .en{font-size:clamp(20px,4vw,34px)}
#loader .bar{width:140px;height:1px;background:var(--line2);overflow:hidden;margin:18px auto 0}
#loader .bar i{display:block;height:100%;width:40%;background:var(--grad);animation:ldrb 1.2s var(--ease) infinite}
@keyframes ldrb{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
#loader .wm-xl{animation:ldrp 2.2s var(--ease) infinite}
@keyframes ldrp{50%{opacity:.45}}

#cursorGlow{position:fixed;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,var(--glow) 0%,transparent 62%);transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;filter:blur(24px)}

/* ═══ HEADER ═══ */
header{position:sticky;top:0;z-index:900;backdrop-filter:blur(18px) saturate(150%);
  background:color-mix(in srgb,var(--bg) 76%,transparent);border-bottom:1px solid transparent;transition:.4s var(--ease)}
header.stuck{border-bottom-color:var(--line);box-shadow:0 12px 40px -24px rgba(0,0,0,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:20px}
.menu{display:flex;gap:2px;align-items:center}
.menu a{position:relative;padding:9px 13px;font-size:14px;font-weight:600;color:var(--muted);border-radius:10px;transition:.3s var(--ease)}
.menu a::after{content:"";position:absolute;bottom:3px;left:50%;width:0;height:1px;background:var(--grad);transition:.35s var(--ease);transform:translateX(-50%)}
.menu a:hover,.menu a.active{color:var(--txt)}
.menu a:hover::after,.menu a.active::after{width:22px}
.tools{display:flex;align-items:center;gap:9px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface);transition:.35s var(--ease)}
.icon-btn:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
#themeBtn .sun{display:none}
html[data-theme="light"] #themeBtn .sun{display:block}
html[data-theme="light"] #themeBtn .moon{display:none}
#langBtn{width:auto;padding:0 14px;font-size:13px;font-weight:700;letter-spacing:.5px}
.cta-btn{padding:12px 24px;border-radius:12px;background:var(--grad);color:var(--on-grad);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.35s var(--ease);box-shadow:0 12px 30px -16px rgba(214,217,222,.5);white-space:nowrap}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px -14px rgba(214,217,222,.55)}
.cta-btn svg,.btn-ghost svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.btn-ghost{padding:12px 24px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:14px;
  transition:.35s var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap}
.btn-ghost:hover{border-color:var(--line-strong);transform:translateY(-3px);background:var(--surface2)}
html[dir="rtl"] .flip{transform:scaleX(-1)}
.burger{display:none}
@media(max-width:1080px){
  .menu{position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 18px;
    background:color-mix(in srgb,var(--bg) 98%,transparent);backdrop-filter:blur(22px);border-bottom:1px solid var(--line);
    box-shadow:0 26px 50px -30px rgba(0,0,0,.85);opacity:0;visibility:hidden;transform:translateY(-14px);transition:.45s var(--ease);z-index:950}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu a{font-size:16px;font-weight:700;padding:14px 6px;border-bottom:1px solid var(--line2);border-radius:0}
  .menu a:last-child{border-bottom:0}.menu a::after{display:none}
  .burger{display:grid}
  .nav .cta-btn{display:none}
}
@media(max-width:420px){.wm .en{font-size:14px;letter-spacing:.24em}.tools{gap:6px}.icon-btn{width:36px;height:36px}}

/* ═══ REVEAL ═══ */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}.rv[data-d="3"]{transition-delay:.24s}

/* ═══ SECTIONS ═══ */
section{position:relative;padding:clamp(64px,8vw,120px) 0}
.sec-head{text-align:center;max-width:700px;margin:0 auto clamp(34px,4.6vw,58px)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.32em;font-weight:700;color:var(--muted);margin-bottom:14px;font-family:var(--f-lat)}
.kicker::before,.kicker::after{content:"";width:26px;height:1px;background:var(--line-strong)}
.sec-head h2{font-size:clamp(27px,4.3vw,50px);font-weight:800;line-height:1.3}
.sec-head p{color:var(--muted);margin-top:14px;font-size:15.5px}

/* ═══ بطاقات الخدمات (نفس فكرة أنشطة سدين V4) ═══ */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media(max-width:1000px){.acts{grid-template-columns:repeat(2,1fr)}}
.act{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
  transition:.55s var(--ease);display:flex;flex-direction:column;backdrop-filter:blur(12px)}
.act:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.act-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--bg3);border-bottom:1px solid var(--line)}
.act-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.act-media img.contain{object-fit:contain;padding:12px;background:radial-gradient(circle at 50% 40%,#1b1b1f,#09090a)}
.act:hover .act-media img{transform:scale(1.06)}
.act-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 50%);pointer-events:none}
.act-ico{position:absolute;z-index:3;bottom:14px;inset-inline-start:16px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(10,10,12,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);color:#fff;transition:.5s var(--ease)}
.act:hover .act-ico{background:#f4f5f7;color:#0c0c0e;transform:rotate(-6deg)}
.act-ico svg{width:21px;height:21px;stroke-width:1.7}
.act-no{position:absolute;z-index:3;top:13px;inset-inline-end:14px;font-family:var(--f-lat);font-size:11px;font-weight:600;letter-spacing:.12em;
  padding:4px 11px;border-radius:999px;background:rgba(10,10,12,.5);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.18)}
.act-badge{position:absolute;z-index:3;top:13px;inset-inline-start:14px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  padding:5px 12px;border-radius:999px;background:#f4f5f7;color:#0c0c0e}
.act-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.act-body h3{font-size:18px;font-weight:700;line-height:1.5}
.act-body p{font-size:13.5px;color:var(--muted);line-height:1.75;flex:1}
.act-link{align-self:flex-start;margin-top:6px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:10px;border:1px solid var(--line);transition:.35s var(--ease)}
.act:hover .act-link{background:var(--grad);color:var(--on-grad);border-color:transparent}
.act-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
.act-all{position:absolute;inset:0;z-index:5}
.act.feat{border-color:var(--line-strong);box-shadow:0 0 0 1px var(--line-strong) inset,0 26px 70px -40px rgba(214,217,222,.35)}
@media(max-width:700px){
  .acts{grid-template-columns:repeat(2,1fr);gap:12px}
  .act{border-radius:20px}
  .act-media{aspect-ratio:1/1}
  .act-body{padding:12px 13px 14px;gap:4px}
  .act-body h3{font-size:13.5px;line-height:1.5}
  .act-body p,.act-link,.act-ico{display:none}
  .act-no{font-size:9.5px;padding:3px 8px;top:8px;inset-inline-end:8px}
  .act-badge{font-size:9px;padding:3px 8px;top:8px;inset-inline-start:8px}
  .act:hover{transform:none}
}

/* ═══ واجهة نظام مرسومة بالكود — تظهر بدل الصورة لو ما توفرت ═══ */
.mock{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;gap:9px;
  background:radial-gradient(120% 90% at 85% 0%,#24252a 0%,#0d0d10 60%);color:#d6d9de;font-family:var(--f-lat);font-size:10px}
.mock .mh{display:flex;align-items:center;gap:6px}
.mock .mh i{width:7px;height:7px;border-radius:50%;background:#3a3b40}
.mock .mh b{margin-inline-start:auto;font-weight:500;letter-spacing:.2em;color:#8e9298;font-size:9px}
.mock .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mock .kp div{border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:8px;background:rgba(255,255,255,.03)}
.mock .kp small{display:block;color:#8e9298;font-size:8.5px}
.mock .kp strong{font-size:15px;font-weight:600;color:#f4f5f7}
.mock .ch{flex:1;display:flex;align-items:flex-end;gap:5px;border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:9px;min-height:40px}
.mock .ch span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#e9ebee,#6f737a);opacity:.85;animation:grow 1.4s var(--ease) both}
@keyframes grow{from{transform:scaleY(.1);transform-origin:bottom}}
.mock .rows div{display:flex;justify-content:space-between;padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.mock .tag{padding:1px 7px;border-radius:9px;font-size:8.5px}
.mock .ok{background:rgba(120,220,160,.15);color:#8fe3b0}.mock .wt{background:rgba(240,200,110,.15);color:#f1cf86}.mock .no{background:rgba(240,120,120,.15);color:#f19a9a}
.mock .grid-u{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;flex:1}
.mock .grid-u span{border-radius:3px;background:rgba(255,255,255,.08)}
.mock .grid-u span.a{background:rgba(143,227,176,.45)}.mock .grid-u span.b{background:rgba(241,207,134,.45)}
.mock .pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1}
.mock .pipe div{border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px}
.mock .pipe em{font-style:normal;color:#8e9298;font-size:8.5px}
.mock .pipe span{height:14px;border-radius:4px;background:rgba(255,255,255,.08)}

/* ═══ FOOTER ═══ */
footer{background:var(--bg);border-top:1px solid var(--line);padding:46px 0 26px}
.f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line2)}
.f-links{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.f-links a:hover{color:var(--txt)}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);padding-top:22px}

#toTop{position:fixed;bottom:24px;inset-inline-end:24px;z-index:800;width:46px;height:46px;border-radius:14px;background:var(--grad);color:var(--on-grad);
  display:grid;place-items:center;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(20px);transition:.45s var(--ease)}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}
#waFloat{position:fixed;bottom:24px;inset-inline-start:24px;z-index:800;width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -12px rgba(37,211,102,.6);transition:.35s var(--ease)}
#waFloat:hover{transform:translateY(-4px) scale(1.05)}
#waFloat svg{width:26px;height:26px;fill:#fff}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}.rv{opacity:1;transform:none}}