:root{ --royal:#0a2c6b; --mid:#0b1f3f; --gold:#c9a646; --bg:#fcfcfe; --ink:#0e1726; --muted:#5b6b88; --card:#ffffff; }
*{box-sizing:border-box} html,body{margin:0;padding:0;direction:rtl;font-family:"Tajawal",system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);scroll-behavior:smooth}
img{max-width:100%;display:block} a{text-decoration:none;color:var(--royal)}
.container{width:min(1200px,92%);margin:0 auto} .section{padding:64px 0;position:relative}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.section-title h2{margin:0;font-size:28px;color:var(--royal)} .section-title .line{flex:1;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e7eaf1;z-index:60}
.header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px} .brand img{width:56px;height:56px;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.brand .name{font-weight:900;color:var(--royal);font-size:18px} .nav{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:800;border:2px solid transparent;transition:.25s}
.btn.gold{background:var(--gold);color:#1a1a1a;border-color:var(--gold)} .btn.gold:hover{filter:brightness(1.04)}
.btn.ghost{border-color:var(--gold);color:var(--gold);background:transparent} .btn.ghost:hover{background:rgba(201,166,70,.1)}
.hero{background:linear-gradient(135deg,var(--royal) 0%, var(--mid) 60%); color:#f6f7fb; position:relative; overflow:hidden}
.hero::after{content:''; position:absolute; inset:0; background:radial-gradient(800px 400px at 20% -10%, rgba(201,166,70,.25), transparent 60%); pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; padding:56px 0}
.hero h1{margin:0 0 10px;font-size:40px; line-height:1.25} .hero p{opacity:.95; line-height:1.9}
.hero .cta{display:flex; gap:10px; margin-top:14px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}
.kpi{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); padding:12px; text-align:center; border-radius:12px}
.kpi b{display:block;font-size:22px; color:#fff}
.hero .illus{justify-self:center; width:100%; max-width:420px; border:2px solid rgba(201,166,70,.55); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.grid{display:grid; gap:18px} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--card); border:2px solid var(--gold); border-radius:16px; padding:20px; box-shadow:0 10px 24px rgba(10,44,107,.08); transition:.25s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 34px rgba(10,44,107,.16)} .card h3{margin:0 0 8px; color:var(--royal)} .card p{margin:0; color:var(--muted)}
.card ul{margin:0; padding-inline-start:18px; line-height:1.9} .values .icon{width:48px;height:48px;margin-bottom:8px}
.badge{display:inline-block; background:#fff3d1; color:#7a5a10; border:1px solid var(--gold); padding:4px 10px; border-radius:999px; font-size:12px}
.project .thumb{width:100%; height:160px; object-fit:cover; border-radius:12px; border:2px solid var(--gold); margin-bottom:10px}
.project .meta{display:flex; justify-content:space-between; color:var(--muted)}
.contact .cols{display:grid; grid-template-columns:1fr 1fr; gap:18px} @media(max-width:900px){.contact .cols{grid-template-columns:1fr}}
.input, textarea{width:100%; padding:12px; border-radius:10px; border:1px solid #cbd5e1; background:#fff; margin:8px 0}
.submit{width:100%; background:var(--gold); color:#1a1a1a; border:none; padding:12px; border-radius:12px; font-weight:900; cursor:pointer} .submit:hover{filter:brightness(1.04)}
.footer{background:#0b1f3f; color:#c7d2fe; padding:22px 0; margin-top:28px} .footer .row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap} .footer .row a{color:#c7d2fe}
.reveal{opacity:0; transform:translateY(12px); animation:fadeUp .6s ease forwards} .reveal.d2{animation-delay:.15s} .reveal.d3{animation-delay:.3s} .reveal.d4{animation-delay:.45s}
@keyframes fadeUp{to{opacity:1; transform:none}}

/* 📸 ضبط صور المشاريع لتناسب كل الشاشات */
.project img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

/* ✨ تأثير عند مرور الماوس */
.project img:hover {
  transform: scale(1.03);
}

/* 📱 تحسين العرض للجوال */
@media (max-width: 768px) {
  .project img {
    aspect-ratio: 4 / 3;
  }
}