/* برنامج الاحتضان الثاني — مؤسسة التكنوقراط السوريون */

@font-face { font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:400;
  src:url("../assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; font-display:swap }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:400;
  src:url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB; font-display:swap }
@font-face { font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:500;
  src:url("../assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; font-display:swap }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:500;
  src:url("../assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB; font-display:swap }
@font-face { font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:600;
  src:url("../assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; font-display:swap }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:600;
  src:url("../assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB; font-display:swap }
@font-face { font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:700;
  src:url("../assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; font-display:swap }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:700;
  src:url("../assets/fonts/montserrat-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB; font-display:swap }

:root{
  /* ألوان هوية OBOUR 26 الرسمية */
  --paper:#F8F9FB;
  --card:#FFFFFF;
  --ink:#10233F;
  --navy:#10233F;
  --blue:#1988DF;
  --cyan:#10BEEB;
  --bright:#1988DF;
  --grad:linear-gradient(90deg,#1988DF 0%,#10BEEB 100%);
  --r:16px;
  --rule:#DDE4ED;
  --muted:#63748A;
  --done:#A9B6C6;
  --wrap:68rem;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#070E1A;
    --card:#0E1A2D;
    --ink:#EAF0F7;
    --navy:#7FC9EE;
    --blue:#4FA9EC;
    --bright:#55B4F0;
    --grad:linear-gradient(90deg,#1988DF 0%,#10BEEB 100%);
    --rule:#223349;
    --muted:#92A3B8;
    --done:#3A5272;
  }
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Montserrat","IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  font-size:17px;
  line-height:1.85;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:20px }

a{ color:var(--bright); text-decoration-thickness:1px; text-underline-offset:3px }
a:focus-visible,button:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px }

/* ── شريط علوي ─────────────────────────────── */
.top{ border-block-end:1px solid var(--rule); background:var(--card) }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; flex-wrap:wrap }
.brand{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:.9rem;
         color:var(--ink); text-decoration:none; line-height:1.4 }
.logo{ height:38px; width:auto; flex:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo{ background:#fff; padding:4px 6px; border-radius:4px }
}
footer .logo{ height:30px; opacity:.85 }
.brand-txt{ display:block }
.brand-txt span{ display:block; font-weight:400; font-size:.78rem; color:var(--muted) }
footer .wrap > a{ display:flex; align-items:center }
.nav{ display:flex; gap:22px; font-size:.95rem }
.nav a{ color:var(--ink); text-decoration:none; padding-block:4px; border-block-end:2px solid transparent }
.nav a:hover{ border-block-end-color:var(--bright) }
.nav a[aria-current="page"]{ border-block-end-color:var(--navy); font-weight:600 }

/* ── الواجهة ───────────────────────────────── */
.hero{ position:relative; padding-block:clamp(44px,8vw,86px) 0 }
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block-start:4px; inset-inline-start:0;
  width:min(46%,24rem); aspect-ratio:1.3;
  background-image:
    radial-gradient(ellipse at 30% 28%,transparent 0%,var(--paper) 72%),
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:100% 100%,26px 26px,26px 26px;
  opacity:.5;
}
.hero > *{ position:relative; z-index:1 }
.hero h1{
  margin:0;
  font-size:clamp(1.9rem,5.4vw,3.2rem);
  font-weight:700;
  line-height:1.25;
  max-width:16ch;
  letter-spacing:-.01em;
}
.hero .lede{
  margin:14px 0 0;
  max-width:46ch;
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  font-weight:500;
  color:var(--bright);
}
.hero .count{ margin:26px 0 0; max-width:54ch; font-size:1.05rem }

/* ── المحور الزمني ──────────────────────────── */
.spine{ margin-block:clamp(40px,7vw,70px) }
.spine-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.82rem; color:var(--muted); margin-block-end:10px;
}
.spine-head b{ color:var(--ink); font-weight:600; font-size:.88rem }

.track-wrap{ position:relative; padding-block-start:26px }
.track{
  position:relative;
  display:flex;
  height:60px;
  border:1px solid var(--rule);
  background:var(--card);
  border-radius:var(--r);
  overflow:hidden;
}
.seg{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding-inline:10px;
  border-inline-start:1px solid var(--rule);
  min-width:7rem;
  overflow:hidden;
}
.seg:first-child{ border-inline-start:0 }
.seg b{ display:block; font-size:.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.seg i{ display:block; font-style:normal; font-size:.7rem; color:var(--muted);
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.seg::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px;
  background:var(--seg); opacity:.55;
  transition:opacity .18s ease, height .18s ease;
}
.seg:hover::before{ opacity:1; height:7px }
.seg:hover{ background:color-mix(in srgb,var(--seg) 9%,transparent) }
.seg.past{ background:color-mix(in srgb,var(--done) 16%,transparent) }
.seg.past b{ color:var(--muted) }
.seg.now{ background:color-mix(in srgb,var(--cyan) 15%,transparent) }
.seg.now::before{ opacity:1; height:6px }
.seg.now b{ color:var(--navy) }

.today{
  position:absolute; inset-block:26px 0; width:2px;
  background:var(--cyan);
  z-index:2;
}
.today::after{
  content:"اليوم";
  position:absolute; inset-block-start:-24px; inset-inline-start:0;
  font-size:.7rem; font-weight:600; color:var(--navy);
  background:var(--cyan); padding:1px 7px; white-space:nowrap;
}

@media (max-width:760px){
  .track-wrap{ padding-block-start:0 }
  .track{ height:auto; flex-direction:column }
  .seg{ flex:none !important; width:100% !important; padding:9px 12px;
        border-inline-start:0; border-block-start:1px solid var(--rule);
        flex-direction:row; justify-content:space-between; align-items:baseline; gap:10px }
  .seg:first-child{ border-block-start:0 }
  .seg b{ white-space:normal }
  .seg i{ white-space:normal; overflow:visible }
  .today{ display:none }
}

/* ── أقسام ─────────────────────────────────── */
section{ padding-block:clamp(38px,6vw,64px); border-block-start:1px solid var(--rule) }
section > .wrap > h2{
  margin:0 0 6px;
  font-size:clamp(1.4rem,3.4vw,1.85rem);
  font-weight:700;
  letter-spacing:-.005em;
}
.sub{ margin:0 0 30px; color:var(--muted); max-width:62ch }

/* المسارات */
.tracks{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)) }
.track-card{
  position:relative; display:block;
  background:var(--card); border:1px solid var(--rule);
  padding:26px 24px 24px;
  border-radius:var(--r);
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.track-card::before{
  content:""; position:absolute; inset-block-start:-1px; inset-inline:-1px; height:5px;
  background:var(--c); transition:height .2s ease;
}
.track-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--c) 45%,var(--rule));
  box-shadow:0 14px 30px -18px color-mix(in srgb,var(--c) 70%,transparent);
}
.track-card:hover::before{ height:8px }
.track-card .n{
  display:block; font-size:2.6rem; font-weight:700; line-height:1;
  color:var(--c); font-variant-numeric:tabular-nums;
}
.track-card .n small{ font-size:.9rem; font-weight:500; color:var(--muted); margin-inline-start:8px }
.track-card h3{ margin:10px 0 8px; font-size:1.12rem; font-weight:600 }
.track-card p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.75 }

/* الحوكمة */
.split{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)) }
.role{
  background:var(--navy); color:#fff;
  border:0; border-radius:var(--r);
  padding:26px 26px 28px;
  box-shadow:0 10px 26px -18px rgba(16,35,63,.6);
  transition:transform .2s ease, box-shadow .2s ease;
}
.role:hover{ transform:translateY(-5px); box-shadow:0 20px 38px -20px rgba(16,35,63,.7) }
.role h3{ margin:0 0 10px; font-size:1.12rem; font-weight:600; color:#fff }
.role p{ margin:0; color:rgba(255,255,255,.94) }

/* المراحل */
.phase{
  display:grid;
  grid-template-columns:4.5rem 1fr;
  gap:0 20px;
  padding-block:24px;
  border-block-start:1px solid var(--rule);
}
.phase:first-of-type{ border-block-start:0; padding-block-start:0 }
.phase-n{
  font-size:2.4rem; font-weight:700; line-height:1;
  color:var(--seg);
  font-variant-numeric:tabular-nums;
  transition:transform .2s ease;
}
.phase{ transition:background .18s ease }
.phase:hover{ background:color-mix(in srgb,var(--seg) 6%,transparent) }
.phase:hover .phase-n{ transform:scale(1.08) }
.phase.is-now{
  background:color-mix(in srgb,var(--cyan) 7%,transparent);
  box-shadow:inset 3px 0 0 var(--cyan);
}
html[dir="rtl"] .phase.is-now{ box-shadow:inset -3px 0 0 var(--cyan) }
.phase h3{ margin:0; font-size:1.18rem; font-weight:600; line-height:1.4 }
.when{ margin:2px 0 0; font-size:.86rem; color:var(--muted); font-variant-numeric:tabular-nums }
.goal{ margin:10px 0 0; max-width:60ch }
.phase ul{ margin:12px 0 0; padding:0; list-style:none; max-width:62ch }
.phase li{ position:relative; padding-inline-start:16px; margin-block:5px; color:var(--muted) }
.phase li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.78em;
  width:6px; height:1px; background:var(--rule);
}
.note{
  margin:14px 0 0; padding:10px 14px;
  border-inline-start:2px solid var(--seg);
  background:var(--card);
  border-radius:0 var(--r) var(--r) 0;
  font-size:.92rem;
}
.badge{
  display:inline-block; margin-inline-start:10px; vertical-align:middle;
  font-size:.7rem; font-weight:600; color:var(--navy);
  background:color-mix(in srgb,var(--cyan) 28%,transparent);
  padding:2px 8px;
}
@media (max-width:560px){
  .phase{ grid-template-columns:1fr; gap:4px }
  .phase-n{ font-size:1.5rem }
}

/* المخرجات */
.out{ display:grid; gap:0; border:1px solid var(--rule); background:var(--card);
       border-radius:var(--r); overflow:hidden }
.out div{ display:grid; grid-template-columns:11rem 1fr; gap:16px; padding:15px 20px;
           border-block-start:1px solid var(--rule);
           border-inline-start:3px solid transparent;
           transition:border-color .18s ease, background .18s ease }
.out div:hover{ border-inline-start-color:var(--bright); background:color-mix(in srgb,var(--bright) 6%,transparent) }
.out div:first-child{ border-block-start:0 }
.out dt{ font-weight:600; margin:0 }
.out dd{ margin:0; color:var(--muted) }
@media (max-width:560px){
  .out div{ grid-template-columns:1fr; gap:2px }
}

/* الخاتمة */
.closing{ max-width:58ch; font-size:1.1rem; margin:0 }
.event{
  margin-block-start:30px;
  max-width:40rem;
  background:var(--navy);
  color:#fff;
  border-radius:var(--r);
  padding:28px 30px 30px;
  box-shadow:0 16px 34px -22px rgba(0,33,84,.85);
}
.event-when{
  margin:0;
  font-size:.95rem; font-weight:600;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.event h3{ margin:4px 0 8px; font-size:1.5rem; font-weight:700; line-height:1.3; color:#fff }
.event p:last-child{ margin:0; color:rgba(255,255,255,.88); max-width:42ch }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .event{ background:#0F1E36; border:1px solid var(--rule) }
}

/* تذييل */
footer{ border-block-start:1px solid var(--rule); background:var(--card); padding-block:30px; font-size:.9rem; color:var(--muted) }
footer .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap }
footer a{ color:var(--muted) }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
  .track-card:hover,.role:hover{ transform:none }
  .phase:hover .phase-n{ transform:none }
}

/* ── صفحة المشاريع ─────────────────────────── */
.hero-sm{ padding-block:clamp(36px,6vw,62px) 0 }
.hero-sm h1{ font-size:clamp(1.8rem,5vw,2.9rem) }
.hero-sm::before{ display:none }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-block:30px 26px }
.chip{
  --c:var(--navy);
  font:inherit; font-size:.92rem; font-weight:500;
  color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:999px;
  padding:7px 16px; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:7px;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.chip span{ font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums }
.chip:hover{ border-color:var(--c) }
.chip.is-on{ background:var(--c); border-color:var(--c); color:#fff }
.chip.is-on span{ color:rgba(255,255,255,.8) }

.grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));
  padding-block-end:10px;
}
.card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--rule);
  border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--c) 50%,var(--rule));
  box-shadow:0 18px 36px -20px color-mix(in srgb,var(--c) 70%,transparent);
}
.card[hidden]{ display:none }

.art{
  position:relative; aspect-ratio:16/7;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--c) 22%,transparent),transparent 60%),
    color-mix(in srgb,var(--c) 8%,var(--card));
  border-block-end:1px solid var(--rule);
}
.plogo{ max-width:62%; max-height:74%; object-fit:contain }
.art .mark{
  font-size:2.5rem; font-weight:700; line-height:1;
  color:var(--c); opacity:.55;
}
.art:has(.plogo) .mark{ display:none }
.art.noimg .mark{ display:block }
a.card:hover .art .mark{ opacity:.8 }

.cbody{ display:flex; flex-direction:column; gap:7px; padding:18px 20px 20px; flex:1 }
.tag{
  align-self:flex-start;
  font-size:.72rem; font-weight:600; color:var(--c);
  background:color-mix(in srgb,var(--c) 11%,transparent);
  border-radius:999px; padding:3px 10px;
}
.card h3{ margin:2px 0 0; font-size:1.14rem; font-weight:600; line-height:1.4 }
.owner{ margin:0; font-size:.86rem; color:var(--muted) }
.bio{ margin:4px 0 0; font-size:.92rem; color:var(--muted); line-height:1.75; flex:1 }
.go,.soon{ margin-block-start:12px; font-size:.84rem; font-weight:600 }
.go{ color:var(--c) }
.go.ext::after{ content:"\2197"; margin-inline-start:5px; font-weight:400 }
.soon{ color:var(--muted); font-weight:500 }
.empty{ color:var(--muted); padding-block:30px }

/* ── عناصر هوية OBOUR ──────────────────────── */
.desc-en{
  margin:6px 0 0;
  font-family:"Montserrat",sans-serif;
  font-size:.88rem; font-weight:500; letter-spacing:.06em;
  color:var(--muted);
  direction:ltr; text-align:right;
}
.art .num{
  position:absolute; inset-block-start:10px; inset-inline-start:14px;
  font-family:"Montserrat",sans-serif;
  font-size:.92rem; font-weight:600;
  color:var(--c); opacity:.75;
  direction:ltr;
}
.art .num i{ font-style:normal; font-size:.7rem; font-weight:500; opacity:.7 }

/* ── صفحة الفرق ────────────────────────────── */
.people{
  display:grid; gap:26px 20px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));
}
.person{ text-align:center }
.face{
  position:relative;
  aspect-ratio:1/1.18;
  display:grid; place-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 22%,var(--card)),var(--cool,#F4F7FA));
  border-radius:50% 50% 14px 14px / 42% 42% 7px 7px;
  margin-block-end:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.person:hover .face{
  transform:translateY(-5px);
  box-shadow:0 16px 30px -20px rgba(16,35,63,.6);
}
.face img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(1) contrast(1.04);
}
.face .ini{
  display:none;
  font-size:2.4rem; font-weight:700; color:var(--navy); opacity:.45;
}
.face.noimg .ini{ display:block }
.person h3{ margin:0; font-size:1rem; font-weight:600; line-height:1.5 }
.carries{ margin:3px 0 0; font-size:.82rem; color:var(--muted); line-height:1.7 }
.social{ margin:7px 0 0; display:flex; gap:12px; justify-content:center }
.social a{
  font-family:"Montserrat",sans-serif;
  font-size:.74rem; font-weight:500; letter-spacing:.02em;
  text-decoration:none; color:var(--bright);
}
.social a:hover{ text-decoration:underline }

.roster{
  margin:0; padding:0; list-style:none;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--card); overflow:hidden;
}
.roster li{
  padding:13px 18px;
  border-inline-start:1px solid var(--rule);
  border-block-start:1px solid var(--rule);
  font-size:.95rem;
}
.roster li span{ display:block; font-size:.8rem; color:var(--muted) }
h2 .count{
  font-family:"Montserrat",sans-serif;
  font-size:1rem; font-weight:500; color:var(--muted);
  vertical-align:middle; margin-inline-start:8px;
}

/* ── شعار عبور في الترويسة ─────────────────── */
.obour{ height:42px; width:auto; flex:none; display:none }
.obour-light{ display:block }
.obour-dark{ display:none }
.brand-txt{ display:none }
.no-obour .obour{ display:none !important }
.no-obour .brand-txt{ display:block }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .obour-light{ display:none }
  :root:not([data-theme="light"]) .obour-dark{ display:block }
  :root:not([data-theme="light"]) .logo{ background:none; padding:0 }
}
@media (max-width:520px){ .obour{ height:34px } }

/* التكنوقراط كمنظّم في التذييل */
.organizer{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
}
.organizer > span{
  font-size:.76rem; color:var(--muted); letter-spacing:.02em;
}