/* =========================================================
   THEME CLAIR PREMIUM — Consilium Advisory
   Typo: Playfair (H1), Montserrat (H2), Lato (H3/H5), Source Sans Pro (Body)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Montserrat:wght@500;600&family=Lato:wght@700&family=Source+Sans+Pro:wght@400;600&display=swap');

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --card:#ffffff;
  --ink:#0f172a;          /* نص */
  --muted:#475569;        /* وصف */
  --line:#e5e7eb;         /* حدود خفيفة */
  --brand:#005EB8;        /* أساسي */
  --brand2:#00A1DE;       /* ثانوي */
  --accent:#6b8cff;       /* أكسنت */
  --radius:18px;
  --shadow:0 14px 36px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Source Sans Pro",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  line-height:1.75; overflow-x:hidden;
}
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

/* ===== Containers ===== */
.container{ width:min(1160px,94%); margin-inline:auto }

/* ===== HERO Light ===== */
.heroL{
  position:relative; overflow:hidden;
  padding:72px 0 56px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 420px at -10% 0%, rgba(0,161,222,.10), transparent 60%),
    radial-gradient(700px 360px at 110% 20%, rgba(0,94,184,.10), transparent 55%),
    linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
}
.heroL__grid{ opacity:.6 }
.heroL__inner{ text-align:center }
.heroL__title{
  margin:0 0 8px; font-family:"Playfair Display",serif; font-weight:700;
  font-size:clamp(34px,4.5vw,58px); letter-spacing:.2px;
}
.heroL__subtitle{ margin:0; color:var(--muted); font-size:clamp(16px,2vw,20px) }

/* ===== Cards & Layout ===== */
.about-stack{ display:grid; gap:24px; padding:28px 0 }
.cardL{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;
}
.typography h2{
  font-family:"Montserrat",sans-serif; font-weight:600; color:#0b1220;
  font-size:clamp(22px,2.2vw,30px); margin:20px 0 10px;
}
.typography h3{
  font-family:"Lato",sans-serif; font-weight:700; color:#0b1220;
  font-size:clamp(18px,1.9vw,22px); margin:18px 0 8px;
}
.typography h5{
  font-family:"Lato",sans-serif; font-weight:700; color:#0b1220;
  font-size:16px; margin:16px 0 6px; position:relative; padding-left:12px;
}
.typography h5::before{
  content:''; position:absolute; left:0; top:.55em; width:6px; height:6px;
  border-radius:999px; background:linear-gradient(45deg,var(--brand2),var(--accent));
}
.typography p{ margin:0 0 12px; color:#1f2937 }
.link-inline{ color:var(--brand2); font-weight:700 }

/* ===== Highlights (تتولّد من H5) ===== */
.cardL--highlights{ padding:18px }
.highlights{
  display:grid; gap:12px; grid-template-columns:repeat(12,1fr);
}
.hiTile{
  grid-column:span 6; display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:#ffffff;
  box-shadow:0 8px 20px rgba(2,6,23,.05); transition:transform .2s ease, border-color .2s ease;
}
.hiTile:hover{ transform:translateY(-3px); border-color:#dbe4f0 }
.hiTile__icon{
  width:10px; height:10px; border-radius:999px; margin-top:6px;
  background:linear-gradient(45deg,var(--brand2),var(--accent));
  flex:0 0 auto;
}
.hiTile__text{ font-family:"Lato",sans-serif; font-weight:700; color:#0b1220; font-size:15px }
@media (max-width:860px){
  .hiTile{ grid-column:1 / -1 }
}

/* ===== CTA Band ===== */
.ctaBand{
  margin-top: 10px; border-top:1px solid var(--line);
  background:
    radial-gradient(700px 260px at -10% 120%, rgba(0,161,222,.12), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
}
.ctaBand__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px 0;
}
.ctaBand h2{ margin:0; font-family:"Montserrat",sans-serif; font-weight:700; color:#0b1220; font-size:clamp(18px,1.8vw,24px) }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; font-weight:700; border:1px solid transparent;
}
.btn--primary{ background:var(--brand); color:#fff }
.btn--primary:hover{ filter:saturate(115%) }

/* ===== تحسينات عامة ===== */
img{ max-width:100%; height:auto; display:block; border-radius:12px }
::selection{ background:#0ea5e9; color:#fff }