/* Sub-hero */
.sub-hero{padding:56px 0;border-bottom:1px solid var(--line)}
.breadcrumbs{color:var(--muted);font-size:.95rem;margin-bottom:8px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--text)}
.page-title{margin:0;font-size:clamp(26px,4vw,42px);font-weight:800}
.page-lead{color:#b9c2ea;max-width:860px}

/* Intro block */
.intro-wrap{
  margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px;box-shadow:var(--shadow);display:grid;gap:14px
}
.grid-2{display:grid;gap:16px}
@media(min-width:900px){.grid-2{grid-template-columns:1.2fr .8fr}}
.intro-visual{
  min-height:240px;border-radius:14px;border:1px solid var(--line);
  background:
    radial-gradient(900px 500px at 70% -10%, #16224a 0%, transparent 60%),
    linear-gradient(135deg, rgba(212,175,55,.12), rgba(111,66,193,.12)),
    url('/img/programing.jpg') center/cover no-repeat;
}

/* Trio: Mission/Vision/Values */
.trio{display:grid;gap:14px;margin-top:18px}
@media(min-width:900px){.trio{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);
  transition:.25s ease
}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card h3{margin:0 0 8px;font-weight:800}
.card i{color:var(--gold);font-size:1.6rem;margin-left:8px}

/* How we work */
.steps{display:grid;gap:14px;margin-top:10px}
@media(min-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:8px
}
.step .head{display:flex;align-items:center;gap:10px}
.step .num{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#d4af37,#b8921b);color:#0b1020;font-weight:800
}
.step i{color:#cfe0ff;font-size:1.2rem}
.step h4{margin:0;font-weight:800}
.step p{margin:0;color:#cfe0ff}

/* Why us */
.why{display:grid;gap:14px;margin-top:6px}
@media(min-width:900px){.why{grid-template-columns:repeat(3,1fr)}}
.why .card ul{margin:8px 0 0;padding-inline-start:18px;color:#cfe0ff}

/* Counters */
.stats{display:grid;gap:14px;margin-top:10px}
@media(min-width:900px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center}
.stat .num{
  font-size:2rem;font-weight:800;line-height:1.1;
  background:linear-gradient(135deg,#f1c44c,#b8921b);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.stat .label{color:#cfe0ff}

/* Logos row */
.logos{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;margin-top:14px}
.logos .logo{
  width:120px;height:52px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:#0a1430;color:#9bb0d3
}

/* FAQ */
.faq{display:grid;gap:12px;margin-top:12px}
.accordion{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.acc-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;cursor:pointer}
.acc-head h4{margin:0;font-size:1.02rem}
.acc-head i{transition:.2s}
.acc-body{display:none;padding:0 14px 14px;color:#cfe0ff}
.accordion.open .acc-body{display:block}
.accordion.open .acc-head i{transform:rotate(180deg);color:var(--gold)}

/* CTA الموحد (خاصة بـ about) */
.cta-section{
  border:1px solid var(--line);border-radius:14px;padding:18px;
  background:
    linear-gradient(0deg,rgba(11,16,32,.45),rgba(11,16,32,.45)),
    url('/img/programing.jpg') center/cover no-repeat;
  text-align:center
}