:root {
  --bg: #0b0b0b;
  --card: #121212;
  --muted: #a7a7a7;
  --accent: #e8b20f;
  --accent-2: #00d4ff;
  --text: #f5f5f5;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* يمنع الفراغات الأفقية */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  direction: rtl;       /* اتجاه المحتوى من اليمين */
  text-align: right;    /* محاذاة النصوص */
}

a {
  color: var(--accent-2);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.header {
  position: relative;
  height: 92vh;
  min-height: 700px;
  overflow: hidden;
}

.header video{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;
  width:auto;height:auto;
  filter:grayscale(20%);
}
.overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
}
.header-content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 16px;
}
@media (max-width: 640px) {
  .header video {
    transform: translate(-50%, -50%) scale(0.85); /* تصغير بسيط */
    min-width: auto;  /* يسمح بظهور العرض كامل */
    min-height: 100%;
    object-fit: cover; /* يحافظ على تغطية المساحة */
  }
}

.badge{display:inline-flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  padding:8px 12px;border-radius:999px;font-size:14px;color:var(--muted)}
.title{font-size:clamp(28px,5vw,54px);margin:12px 0 8px;font-weight:800;letter-spacing:.5px}
.subtitle{font-size:clamp(14px,2.3vw,20px);color:#ddd;max-width:850px;opacity:.95}
.cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:#fff;padding:10px 16px;border-radius:12px;cursor:pointer;
  transition:.2s transform,.2s box-shadow,.2s border;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.btn.accent{background:linear-gradient(180deg,var(--accent),#9b6b00);border-color:#000;color:#111;font-weight:700}
.section{padding:56px 0;border-top:1px solid rgba(255,255,255,.06)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px}
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lead{font-size:18px;color:#ddd}
.timeline{position:relative;margin:0;padding:0;list-style:none}
.timeline:before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:linear-gradient(var(--accent), var(--accent-2))}
.timeline li{position:relative;padding-left:56px;margin-bottom:22px}
.timeline .dot{position:absolute;left:10px;top:2px;width:16px;height:16px;background:var(--bg);border:3px solid var(--accent);border-radius:50%}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi{background:linear-gradient(180deg,#171717,#0f0f0f);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:14px;text-align:center}
.kpi h3{margin:0;font-size:28px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.gallery img, .gallery video{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.footer{padding:36px 16px;color:#ccc;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.nav{position:fixed;top:14px;left:0;right:0;display:flex;justify-content:center;z-index:50}
.nav-inner{display:flex;gap:10px;padding:6px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);border-radius:999px}
.nav a{padding:10px 14px;border-radius:999px;color:#eee}
.nav a.active, .nav a:hover{background:rgba(255,255,255,.08)}
.small{font-size:12px;color:var(--muted)}