:root {
  /* الأساسي (عنّابي متوافق مع الشعار) */
  --b:  #6B1F1A;       /* الأساسي */
  --b2: #3C1512;       /* أغمق للهفر والعناوين */

  /* الذهبي المتناغم مع العنّابي */
  --gold:   #B87B1B;
  --gold-2: #F3E4C7;

  /* الأساسيات */
  --bg:    #FBF9F8;    /* خلفية دافئة محايدة */
  --ink:   #2A211F;    /* نص أساسي */
  --muted: #5E5452;    /* نص ثانوي */
  --line:  #E6E0DD;    /* حدود خفيفة */
  --shadow: 0 10px 24px rgba(107, 31, 26, .12); /* ظل بلون الهوية */

  /* إضافات */
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;

  /* أخضر مساعد (منسجم مع الهوية للنجاح/الحالات) */
   --green-1:#6B1F1A; /* عنّابي */
  --green-2:#3C1512; /* عنّابي أغمق */
  --green-3:#B87B1B; /* ذهبي */

}

/* وضع داكن اختياري */
[data-theme="dark"] {
  --bg:   #141110;
  --ink:  #F5F2F1;
  --muted:#CFC7C4;
  --line: #3A302E;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
}


    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;font-size:16px}
    body{font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#f7f7f5;line-height:1.6}
    a{color:inherit;text-decoration:none;transition:color .3s}
    .container{margin:0 auto;padding:0 16px}
    img{max-width:100%;height:auto}
    .slide{background-color:#ddd;background-position:center;background-size:cover;background-repeat:no-repeat}
    @media (max-width:768px){.container{padding:0 12px} html{font-size:14px}}
    .topbar{background:var(--b);color:#fff;font-size:14px}
    .topbar .container{display:flex;align-items:center;justify-content:space-between;min-height:38px}
    .topbar .soc a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);margin-inline-start:6px}
    .header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:var(--shadow);transition:transform .3s}
    .nav{display:flex;align-items:center;justify-content:space-between;min-height:74px}
    .brand{display:flex;align-items:center;gap:12px}
    .brand img{height:52px}
    .navlinks{display:flex;gap:14px;flex-wrap:wrap}
    .navlinks a{padding:10px 14px;border-radius:10px;color:#2a3b45;font-weight:600}
    .navlinks a:hover{background:#f1f4f7}
    .cta-golden{background:linear-gradient(135deg,var(--green-1),var(--green-2) 50%,var(--green-3));color:#fff;padding:10px 16px;border-radius:12px;font-weight:800;box-shadow:0 8px 18px rgba(8,112,54,.25)}
    .menu-btn{display:none}
    @media (max-width:980px){.nav{flex-wrap:wrap;gap:12px}.navlinks{width:100%;display:none;flex-direction:column;padding-bottom:14px}.navlinks.show{display:flex}.menu-btn{display:inline-flex;align-items:center;gap:8px;background:#f3f5f6;padding:10px 12px;border-radius:10px;font-weight:700}}
    .slider{position:relative;overflow:hidden;border-radius:18px;box-shadow:var(--shadow);contain:layout style paint}
    .slides{display:flex;transition:transform .7s ease-in-out}
    .slide{min-width:100%;height:420px;background:#ddd center/cover no-repeat}
    .dots{position:absolute;inset:auto 0 12px 0;display:flex;gap:8px;justify-content:center}
    .dot{width:10px;height:10px;border-radius:50%;background:#ffffff88;border:2px solid #fff;cursor:pointer}
    .dot.active{background:#fff}
    .slider .over{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 40%,transparent);display:flex;align-items:center;padding:24px;color:#fff}
    .slider h1{font-size:clamp(22px,3.5vw,40px);margin:0 0 8px}
    .slider p{max-width:720px;line-height:1.9;margin:0 0 18px}
    .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:24px 0}
    @media (max-width:1100px){.tiles{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
    .tile{background:#fff;border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow);transition:.2s}
    .tile:hover{transform:translateY(-3px)}
    .tile .ico{font-size:36px;margin-bottom:8px}
    .tile b{display:block;font-size:16px}
    .tile small{color:var(--muted)}
    .split{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:stretch;margin:26px 0}
    @media (max-width:980px){.split{grid-template-columns:1fr}}
    .card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px}
    .card h3{margin:0 0 12px}
    .exemplary{display:grid;grid-template-columns:1fr .8fr;gap:16px}
    @media (max-width:740px){.exemplary{grid-template-columns:1fr}}
    .exemplary .img{border-radius:14px;background:#eef1f4 center/cover no-repeat;min-height:240px}
    .about .lead{color:#3b4b55;line-height:2}
    .stats{margin:26px 0}
    .stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    @media (max-width:1100px){.stats .grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:560px){.stats .grid{grid-template-columns:1fr}}
    .kpi{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px;text-align:center}
    .kpi .n{font-weight:900;font-size:44px}
    .kpi span{display:block;color:#55636f}
    .kpi.badge{background:linear-gradient(135deg,var(--green-1),var(--green-2) 50%,var(--green-3));color:#fff}
    .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
    .meter{height:12px;background:#eaeef2;border-radius:999px;overflow:hidden;flex:1}
    .meter>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ffe27a);border-radius:inherit}
    .newsletter{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
    @media (max-width:800px){.newsletter{grid-template-columns:1fr}}
    .newsletter form{display:flex;gap:8px}
    .newsletter input{flex:1;padding:12px 14px;border:1px solid #d9dee3;border-radius:12px;font-family:inherit}
    .newsletter button{padding:12px 16px;border-radius:12px;background:var(--b);color:#fff;border:0;font-weight:800}
    
    
    .hero .cta-golden {
    background: #dcb734;
    color: #10202d !important;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    display: inline-block;
}
footer{
  margin-top:28px;
  background:#6B1F1A;    /* عنّابي */
  color:#F5F2F1;         /* نص فاتح */
  padding:24px 0;
  border-top:1px solid #3A302E;
}
    footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding:28px 0}
    @media (max-width:900px){footer .cols{grid-template-columns:1fr}}
    .footbar{border-top:1px solid #244450;padding:12px 0;text-align:center;color:#9fb2bf;font-size:14px}
    .badge-mini{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#fff;color:#18313f;gap:8px}