:root{
  --navy:#0C1B33;
  --navy-deep:#0A1730;
  --ivory:#F3EEE3;
  --ink:#16233c;
  --muted:#54617c;
  --muted-2:#6b7790;
  --cyan:#2FB4D8;
  --cyan-bright:#50D0F0;
  --line:rgba(20,32,64,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Tajawal',sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- Utility bar ---------- */
.utilbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 52px;background:var(--navy);color:#c3cddd;font-size:12.5px;
}
.utilbar-contact,.utilbar-lang{display:flex;align-items:center;gap:14px}
.utilbar a{text-decoration:none;opacity:.85;transition:opacity .2s}
.utilbar a:hover{opacity:1}
.utilbar .sep{opacity:.35}
.utilbar-lang .active{color:var(--cyan-bright);font-weight:700}

/* ---------- Header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 52px;border-bottom:1px solid rgba(20,32,64,.12);
  position:sticky;top:0;z-index:20;background:var(--ivory);
}
.logo{height:40px;width:auto}
.header-right{display:flex;align-items:center;gap:38px}
.main-nav{display:flex;gap:30px;font-size:15px}
.main-nav a{color:#39465f;text-decoration:none;opacity:.85;transition:opacity .2s}
.main-nav a:hover{opacity:1}
.main-nav a.active{
  color:var(--navy);font-weight:600;opacity:1;
  border-bottom:2px solid var(--cyan);padding-bottom:4px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;border-radius:2px;
  transition:transform .2s,background .2s,color .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  font-size:15px;padding:16px 32px;background:var(--navy);color:var(--ivory);
}
.site-header .btn-primary{font-size:14px;padding:12px 24px}
.link-underline{
  font-size:15px;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--navy);padding-bottom:3px;
}

/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1.05fr .9fr;gap:60px;
  padding:70px 52px 62px;align-items:start;max-width:1300px;margin:0 auto;
}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.eyebrow .rule{width:36px;height:2px;background:var(--cyan);display:block}
.eyebrow-text{font-size:13px;letter-spacing:.26em;color:var(--cyan);font-weight:600}
.hero h1{
  font-family:'Reem Kufi',sans-serif;font-weight:700;font-size:54px;
  line-height:1.36;margin:0 0 26px;color:var(--navy);
}
.hero-copy p{font-size:16px;line-height:1.95;color:#41506c;max-width:54ch;margin:0 0 24px}
.hero-copy p:last-of-type{margin-bottom:34px}
.hero-actions{display:flex;gap:20px;align-items:center;justify-content:center}

/* ---------- Stats ---------- */
.stats{
  display:flex;align-items:stretch;gap:26px;margin-top:40px;
  padding-top:28px;border-top:1px solid var(--line);
}
.stat-num{font-family:'Reem Kufi',sans-serif;font-size:26px;color:var(--navy);line-height:1}
.stat-label{font-size:12.5px;color:var(--muted-2);margin-top:5px}
.stat-divider{width:1px;background:var(--line)}

/* ---------- Hero figure ---------- */
.hero-figure{margin:0}
.hero-frame{
  position:relative;aspect-ratio:4/5;border:1px solid rgba(20,32,64,.22);
  box-shadow:0 22px 55px rgba(12,27,51,.16);
}
.hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:34% center}
.frame-mat{position:absolute;inset:13px;border:1px solid rgba(243,238,227,.5);pointer-events:none}
.frame-tag{
  position:absolute;right:-1px;bottom:-1px;background:var(--cyan-bright);color:var(--navy-deep);
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;padding:7px 13px;
}
.hero-figure figcaption{
  display:flex;align-items:center;gap:10px;margin-top:15px;font-size:13px;color:var(--muted-2);
}
.cap-rule{width:22px;height:1px;background:var(--cyan);display:block}

/* ---------- Model ---------- */
.model{padding:8px 52px 80px;max-width:1300px;margin:0 auto}
.model-head{
  display:flex;align-items:baseline;justify-content:space-between;
  border-top:1px solid rgba(20,32,64,.16);padding-top:32px;
}
.model-head h2{font-family:'Reem Kufi',sans-serif;font-size:28px;margin:0;color:var(--navy)}
.model-note{font-size:14px;color:var(--muted-2)}
.model-intro{font-size:15.5px;color:var(--muted);max-width:78ch;margin:18px 0 0;line-height:1.85}
.model-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(20,32,64,.16);margin-top:0;
  border-top:1px solid rgba(20,32,64,.16);
}
.mcard{
  background:var(--ivory);padding:30px 26px 34px;
  transition:box-shadow .2s,background .2s;
}
.mcard:hover{box-shadow:inset 0 3px 0 var(--cyan);background:#EFE8DA}
.mcard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mcard-head .material-symbols-outlined{font-size:38px;color:var(--navy)}
.mcard-num{font-family:'Reem Kufi',sans-serif;font-size:28px;color:var(--cyan)}
.mcard h3{font-size:20px;margin:0 0 12px;color:var(--navy);font-weight:700}
.mcard p{font-size:14.5px;line-height:1.9;color:var(--muted);margin:0}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#EDE6D8}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  padding:40px 52px;max-width:1300px;margin:0 auto;
  border-bottom:1px solid rgba(237,230,216,.12);
}
.footer-logo{height:38px;width:auto}
.footer-contact{display:flex;flex-direction:column;gap:6px;font-size:14px;text-align:left}
.footer-contact a{text-decoration:none;color:var(--cyan-bright)}
.footer-base{text-align:center;padding:20px;font-size:12.5px;color:#9aa3b7}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px;padding:48px 24px}
  .hero h1{font-size:40px}
  .model{padding:0 24px 56px}
  .model-grid{grid-template-columns:1fr}
  .utilbar,.site-header{padding-inline:24px}
  .main-nav{display:none}
  .model-head{flex-direction:column;gap:10px}
}