/* ===== Web Fonts (Google Fonts) =====
   Inter للإنجليزية/التركية، Cairo للعربية
   - ضع هذا الملف بعد التحقق من السماح بالاتصال الخارجي
*/
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Inter:wght@400;600;700;800;900&display=swap');

/* ===== Design Tokens ===== */
:root{
  --brand:#1b4c6e;
  --accent:#FFD700;
  --ink:#101418;
  --muted:rgba(0,0,0,.6);
  --card:#fff;
  --bg:#f6f7f9;

  --round-lg:16px;
  --round-md:12px;
  --shadow-sm:0 1px 0 rgba(16,20,24,.04);
  --shadow-md:0 10px 28px rgba(0,0,0,.18);
  --shadow-lg:0 14px 36px rgba(0,0,0,.22);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:auto;overflow:auto;background:var(--bg)}

/* الخط الافتراضي: Inter، وللعربية Cairo تلقائياً */
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink); line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:lang(ar), html[dir="rtl"] body{
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Naskh Arabic', 'Droid Arabic Kufi', Arial, sans-serif;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:min(1100px, 90vw);margin:0 auto}

/* ===== Watermark ===== */
.wm{
  position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  font-weight:900; letter-spacing:.18em; white-space:nowrap;
  color:rgba(27,76,110,.06);
  font-size:clamp(42px, 16vw, 180px);
  pointer-events:none; user-select:none;
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px}
.brand img{height:36px; width:auto}
.top-actions{display:flex; gap:10px}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:var(--round-md);
  font-weight:700; transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn.primary{background:var(--brand); color:#ffffff}
.btn.primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn.ghost{background:#fff; border:1px solid rgba(255, 255, 255, 0.12)}
.btn.ghost:hover{transform:translateY(-2px)}

/* ===== Hero ===== */
.hero{position:relative; margin-bottom:24px}
.hero-media{height:34vh; min-height:220px; max-height:360px; overflow:hidden}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-content{position:relative; margin-top:-56px; display:flex; align-items:flex-end; gap:18px}

.avatar{
  width:120px;height:120px;border-radius:24px;object-fit:cover;border:4px solid #fff;
  box-shadow:var(--shadow-md); transition:transform .25s, box-shadow .25s;
}
.avatar:hover{transform:scale(1.03); box-shadow:var(--shadow-lg)}

.headings .title{
  font-size:clamp(24px, 4.4vw, 36px);
  color:#ffffff;
}
.subtitle{color:#16456e; margin-top:6px}
:lang(ar) .subtitle{letter-spacing:.1px}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.chip{
  background:#fff; border:1px solid rgba(0,0,0,.1);
  border-radius:999px; padding:6px 12px; font-weight:700; font-size:12px;
}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}

/* ===== Content ===== */
.content{padding:14px 0 28px}
.grid-2{display:grid; grid-template-columns:2fr 1fr; gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}

.card{
  background:#fff; border:1px solid rgba(16,20,24,.08);
  border-radius:var(--round-lg); padding:20px; box-shadow:var(--shadow-sm);
}
.card h2{margin:0 0 10px; color:var(--brand); font-size:20px}
.card p{color:#2a2f36}
.bullets{margin:10px 0 0 18px}
:lang(ar) .bullets{margin:10px 18px 0 0}
.bullets li{line-height:1.9}

/* Details card */
.card.info .details{list-style:none; padding:0; margin:0}
.card.info .details li{
  display:flex; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px dashed rgba(0,0,0,.06)
}
.card.info .details li:last-child{border-bottom:none}
.card.info .details span{color:#6b7a88}
.card.info .details b, .card.info .details a{color:#0f2433}
.card.info .socials{display:flex; gap:14px; margin-top:12px}
.card.info .socials a{color:var(--brand); font-size:18px}
.card.info .socials a:hover{color:var(--accent)}

/* Metrics */
.metric{display:flex; flex-direction:column; align-items:center; text-align:center}
.metric b{font-size:28px; color:#0f2433}
.metric span{color:#41505d}

/* Timeline */
.timeline .t-item{display:grid; grid-template-columns:20px 1fr; gap:12px; padding:8px 0}
.timeline .t-dot{width:12px; height:12px; border-radius:50%; background:var(--accent); margin-top:8px}
.timeline .t-meta{color:#6b7a88; font-size:12px}

/* ===== Footer ===== */
.footer{position:static; text-align:center; margin:28px 0; color:#1b4c6e}
.separator{margin:0 8px}

/* ===== RTL tweaks ===== */
html[dir="rtl"] .grid-2{grid-template-columns:2fr 1fr}
html[dir="rtl"] .bullets{margin:10px 18px 0 0}
html[dir="rtl"] .topbar{direction:rtl}
html[dir="rtl"] .brand{flex-direction:row-reverse}
html[dir="rtl"] .top-actions{flex-direction:row-reverse}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .hero-content{flex-direction:column; align-items:flex-start; margin-top:-44px}
  .avatar{width:104px; height:104px}
}
@media (max-width: 560px){
  .grid-3{grid-template-columns:1fr}
  .brand span{display:none}
  .top-actions .btn span{display:none}
}

/* ===== Language Switch (standalone) ===== */
.lang-switch{
  display:flex; gap:8px; align-items:center;
}
.lang-switch__btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:var(--ink, #101418);
  font:700 12px/1.2 system-ui, -apple-system, "Inter", "Cairo", Arial, sans-serif;
  padding:7px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease, border-color .2s ease;
}
.lang-switch__btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.10) }
.lang-switch__btn:focus-visible{ outline:2px solid var(--accent, #FFD700); outline-offset:2px }
.lang-switch__btn.is-active{
  background:var(--brand, #1b4c6e);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

/* دعم RTL إن وضعت المكوّن في صفحة عربية */
html[dir="rtl"] .lang-switch{ direction:rtl }