/* ===== الإعدادات العامة (عدّل الألوان من هنا) ===== */
:root{
  --bg:#080809; --bg2:#101012; --line:#26262a; --text:#f5f5f2; --muted:#a4a4a8;
  --gold:#FFB020; --gold-d:#d98e0b; --r:14px;
  --head:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic','Cairo',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--head);line-height:1.35;font-weight:800}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
section{padding:88px 0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--gold);color:#000;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{top:12px}

/* ===== الأزرار ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 26px;border-radius:12px;font-weight:600;font-size:16px;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s;font-family:var(--body)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#120d00}
.btn-gold:hover{background:#ffc04d}
.btn-line{border-color:#46464c;color:var(--text)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn svg{width:20px;height:20px;flex:none}
.link{color:var(--gold);font-weight:600;display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid transparent;transition:border-color .2s}
.link:hover{border-color:var(--gold)}

/* ===== شريط التنقل ===== */
header.nav{position:sticky;top:0;z-index:50;background:rgba(8,8,9,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand img{height:42px;width:auto}
.menu{display:flex;gap:26px;list-style:none}
.menu a{color:var(--muted);font-size:15px;font-weight:500;transition:color .2s;padding:6px 0}
.menu a:hover,.menu a.on{color:var(--gold)}
.nav-cta{padding:9px 18px;font-size:14px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;cursor:pointer;color:var(--text)}
.burger span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto;transition:.2s}

/* ===== الواجهة الرئيسية ===== */
.hero{padding:72px 0 96px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,60px);font-weight:900;letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{color:var(--muted);font-size:18px;max-width:560px;margin:22px 0 32px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;list-style:none}
.chips li{border:1px solid var(--line);border-radius:99px;padding:4px 14px;font-size:14px;color:var(--muted)}
.hero-art{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto}
.hero-art svg{width:100%;height:100%;overflow:visible}
.bar{transform-box:fill-box;transform-origin:right center;animation:slide 1s cubic-bezier(.2,.8,.2,1) both}
.bar:nth-of-type(2){animation-delay:.15s}.bar:nth-of-type(3){animation-delay:.3s}
@keyframes slide{from{transform:translateX(-60px) scaleX(.6);opacity:0}to{transform:none;opacity:1}}
.arrow{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.3s .7s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ===== عناوين الأقسام ===== */
.sec-head{max-width:640px;margin-bottom:44px}
.sec-head h2{font-size:clamp(28px,4vw,42px)}
.sec-head p{color:var(--muted);margin-top:12px}
.bg2{background:var(--bg2);border-block:1px solid var(--line)}

/* ===== من نساعد ===== */
.who{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.who-card{border-radius:20px;padding:38px 34px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.who-card h3{font-size:28px}
.who-card p{max-width:46ch}
.who-card .btn{align-self:flex-start;margin-top:auto}
.who-a{background:var(--gold);color:#120d00}
.who-a p{color:#2d2000}
.who-a .btn{background:#0b0b0c;color:var(--gold)}
.who-a::after{content:"";position:absolute;inset-inline-start:-40px;bottom:-40px;width:180px;height:180px;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.12) 0 10px,transparent 10px 24px);border-radius:50%}
.who-b{border:1.5px solid var(--gold);background:transparent}
.who-b p{color:var(--muted)}
.who-b h3{color:var(--gold)}

/* ===== الخدمات ===== */
.svc{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:12px;transition:border-color .25s}
.card:hover{border-color:var(--gold)}
.card .no{font-family:var(--head);color:var(--gold);font-weight:800;font-size:15px}
.card h3{font-size:22px}
.card p{color:var(--muted);font-size:15.5px}
.benefit{border-inline-start:3px solid var(--gold);padding-inline-start:14px;font-size:15px;color:var(--text)}
.benefit b{color:var(--gold);font-weight:600}
.note{font-size:13.5px;color:#85858a}
.card .link{margin-top:auto;padding-top:8px;align-self:flex-start}
.s1{grid-column:span 7;background:linear-gradient(160deg,#17130a,var(--bg) 60%);border-color:#4a3810}
.s1 h3{font-size:28px}
.s1 .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0}
.s1 .two div{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:rgba(0,0,0,.35)}
.s1 .two h4{color:var(--gold);font-size:15px;margin-bottom:4px;font-weight:600}
.s1 .two li{list-style:none;font-size:14px;color:var(--muted);line-height:1.8}
.s1 .two li::before{content:"– ";color:var(--gold)}
.tag{align-self:flex-start;background:var(--gold);color:#120d00;font-size:12.5px;font-weight:700;padding:2px 12px;border-radius:99px}
.s2{grid-column:span 5}.s3,.s4,.s5{grid-column:span 4}.s6,.s7{grid-column:span 6}
.s4{background:#0d0d0f;border-radius:var(--r) var(--r) 40px var(--r)}
.s3{border-radius:var(--r) var(--r) var(--r) 40px}

/* ===== هدفنا ===== */
.goal{text-align:start}
.goal h2{font-size:clamp(28px,4.2vw,46px);max-width:760px}
.goal p{color:var(--muted);font-size:18px;max-width:700px;margin:20px 0 34px}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.vals div{padding:20px 0;padding-inline-end:16px;font-weight:600;font-size:17px;border-inline-start:0;position:relative}
.vals div::before{content:"";display:block;width:28px;height:3px;background:var(--gold);margin-bottom:12px;transform:skewX(-30deg)}

/* ===== طريقة العمل ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:27px;inset-inline:27px;height:2px;background:repeating-linear-gradient(90deg,var(--gold-d) 0 8px,transparent 8px 16px)}
.steps li{position:relative}
.dot{width:56px;height:56px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);display:grid;place-items:center;font-family:var(--head);font-weight:800;color:var(--gold);position:relative;z-index:1;margin-bottom:18px}
.steps h3{font-size:20px;margin-bottom:6px}
.steps p{color:var(--muted);font-size:15px}

/* ===== دعوة التواصل ===== */
.cta{padding:0 0 88px}
.cta-box{background:var(--gold);color:#120d00;border-radius:24px;padding:56px 40px;display:grid;grid-template-columns:1.2fr auto;gap:28px;align-items:center;position:relative;overflow:hidden}
.cta-box h2{font-size:clamp(28px,4vw,42px)}
.cta-box p{color:#2d2000;margin-top:8px;font-size:18px}
.cta-box::before{content:"";position:absolute;inset-inline-end:-60px;top:-30px;width:260px;height:260px;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 12px,transparent 12px 28px);transform:skewX(-20deg)}
.cta-box>*{position:relative}
.cta-btns{display:flex;flex-direction:column;gap:12px}
.cta .btn-dark{background:#0b0b0c;color:var(--gold)}
.cta .btn-dark:hover{background:#000}
.cta .btn-out{border-color:#120d00;color:#120d00}
.cta .btn-out:hover{background:#120d00;color:var(--gold)}

/* ===== التذييل ===== */
footer{border-top:1px solid var(--line);padding:48px 0 28px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot img{height:54px;width:auto;margin-bottom:10px}
.foot p{color:var(--muted);font-size:15px}
.foot h4{font-size:15px;color:var(--gold);margin-bottom:10px;font-weight:600}
.foot ul{list-style:none;display:grid;gap:6px}
.foot a{color:var(--muted);font-size:15px;transition:color .2s}
.foot a:hover{color:var(--gold)}
.copy{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:#85858a;font-size:14px}

/* ===== زر واتساب العائم (موبايل) ===== */
.fab{position:fixed;bottom:18px;inset-inline-end:18px;z-index:40;width:56px;height:56px;border-radius:50%;background:var(--gold);color:#120d00;display:none;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.fab svg{width:28px;height:28px}

/* ===== ظهور العناصر (مرة واحدة فقط للأقسام الكبيرة) ===== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

/* ===== الموبايل ===== */
@media (max-width:900px){
  section{padding:64px 0}
  .menu{position:absolute;top:68px;inset-inline:0;background:var(--bg);flex-direction:column;gap:0;padding:8px 20px 16px;border-bottom:1px solid var(--line);display:none}
  .menu.open{display:flex}
  .menu a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .nav-cta{display:none}
  .hero{padding:28px 0 56px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{max-width:140px;order:-1;margin-inline:0;margin-bottom:-6px}
  .who,.foot,.cta-box{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .s1,.s2,.s3,.s4,.s5,.s6,.s7{grid-column:auto}
  .s1 .two{grid-template-columns:1fr}
  .vals{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before{top:0;bottom:0;inset-inline-start:27px;inset-inline-end:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--gold-d) 0 8px,transparent 8px 16px)}
  .steps li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding-bottom:30px}
  .dot{margin:0;grid-row:span 2}
  .cta-box{padding:40px 26px}
  .fab{display:grid}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}.arrow{stroke-dashoffset:0}
}

/* ===== شريط سابقة الأعمال في الصفحة الرئيسية ===== */
.band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3.6vw,36px)}
.band p{color:var(--muted);margin-top:6px}
.band-sec{padding:56px 0}

/* ===== صفحة سابقة الأعمال ===== */
.ph{padding:56px 0 28px}
.ph h1{font-size:clamp(34px,5vw,52px);font-weight:900}
.ph h1 em{font-style:normal;color:var(--gold)}
.ph p{color:var(--muted);font-size:18px;margin-top:12px;max-width:560px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:72px}
.pc{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s}
.pc:hover{border-color:var(--gold)}
.shot{position:relative;display:block;width:100%;aspect-ratio:4/3;background:#000;border:0;padding:0;cursor:pointer;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.shot:hover img{transform:scale(1.03)}
.count{position:absolute;inset-inline-start:10px;bottom:10px;background:rgba(8,8,9,.85);border:1px solid #46464c;border-radius:99px;padding:1px 12px;font-size:13px;color:var(--text)}
.noimg{aspect-ratio:4/3;display:grid;place-items:center;align-content:center;gap:4px;background:repeating-linear-gradient(-45deg,#0d0d0f 0 14px,#121215 14px 28px);border-bottom:1px solid var(--line)}
.noimg b{font-family:var(--head);font-size:56px;color:var(--gold);line-height:1}
.noimg span{font-size:13px;color:#85858a}
.pbody{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.pbody h3{font-size:21px}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.tags li{border:1px solid #4a3810;color:var(--gold);border-radius:99px;padding:0 12px;font-size:13.5px}
.pbody p{color:var(--muted);font-size:15px}
.pbody .link{margin-top:auto;background:none;border:0;cursor:pointer;font-family:var(--body);font-size:15px;align-self:flex-start;padding:4px 0}
.lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:none;flex-direction:column}
.lb.open{display:flex}
.lb-top,.lb-bot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px}
.lb-top strong{font-family:var(--head);font-size:18px}
.lb-body{flex:1;overflow:auto;display:flex;justify-content:center;padding:0 12px}
.lb-body img{width:min(100%,560px);height:auto;align-self:flex-start;border-radius:8px}
.lb .btn{padding:8px 18px;font-size:14px}
.lb-cap{color:var(--muted);font-size:14px;text-align:center;flex:1}
body.lock{overflow:hidden}
@media (max-width:900px){.pgrid{grid-template-columns:1fr 1fr}.ph{padding:36px 0 20px}.band-sec{padding:44px 0}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr}}