:root{
  /* ===== Brand Scale ===== */
  --primary-50:#e8f5fb; --primary-100:#d2ebf7; --primary-200:#bfe2f2;
  --primary-300:#8ecae6; --primary-400:#5fb6e2; --primary-500:#219ebc;
  --primary-600:#1b81a0; --primary-700:#156683; --primary-800:#104b65; --primary-900:#0a3247;

  --accent-50:#fff3d6; --accent-100:#ffe6ad; --accent-200:#ffd985;
  --accent-300:#ffcb5c; --accent-400:#ffbe34; --accent-500:#fd9e02;
  --accent-600:#d38202; --accent-700:#a76602; --accent-800:#7b4a01; --accent-900:#503001;

  --primary: var(--primary-500);
  --primary-dark: var(--primary-700);

  --background:#0a1420;
  --surface-0:#ffffff;
  --surface-1:#f7f9fb;
  --border-color:#e6e6e6;

  --text:#0d2a3a;
  --text-inverse:#fff;

  --border-radius:18px;
  --shadow-sm:0 4px 18px rgba(0,0,0,.08);
  --shadow-md:0 12px 28px rgba(0,0,0,.14);
  --shadow-lg:0 22px 60px rgba(0,0,0,.28);

  --glass-bg:rgba(255,255,255,.08);
  --glass-brd:rgba(255,255,255,.18);

  --btn-primary-bg:var(--primary);
  --btn-primary-hover:var(--primary-dark);

  --ring-size:140px;
  --ring-thickness:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Almarai",sans-serif;
  color:#e6f4ff;
  background:var(--background);
  overflow-x:hidden;
}
/* طبقة تغطي المحتوى وتعمل blur للخلفية */
#screen-blur{
  position: fixed;
  inset: 0;
  z-index: 950;                     /* أقل من الهيدر/القائمة */
  background: rgba(3,16,28,.25);    /* لازم تكون شبه شفافة */
  backdrop-filter: none;            /* يُفعَّل عند الفتح */
  -webkit-backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /*transition: opacity .25s ease, visibility 0s linear .25s;*/
}

/* عند فتح القائمة: فعّل الطبقة والblur */
body.nav-open #screen-blur{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(25px) brightness(0.6);
  -webkit-backdrop-filter: blur(25px) brightness(0.6);
}

/* Fallback لمتصفحات لا تدعم backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.nav-open #screen-blur { backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.nav-open #main-content { filter: blur(25px); transition: filter .25s ease; }
}

/* تأكد إن الهيدر والقائمة فوق الطبقة */
.site-header{ z-index: 1000; }               /* عندك 1000 بالفعل */
@media (max-width:720px){
  .main-nav{
    z-index: 1200;                           /* ارفعها فوق #screen-blur */
  }
}

/* ===== خلفية متحركة ===== */
#fxbg{position:fixed;inset:0;z-index:-2;background:
radial-gradient(1200px 800px at 80% -10%, rgba(33,158,188,.3), transparent 60%),
radial-gradient(900px 900px at -10% 80%, rgba(253,158,2,.22), transparent 60%);
filter:saturate(115%)}
.pulse-gradient{position:fixed;inset:-20%;z-index:-1;background:
conic-gradient(from 0deg at 50% 50%, rgba(33,158,188,.08), transparent, rgba(253,158,2,.08), transparent, rgba(33,158,188,.08));
animation:spinSlow 28s linear infinite;mix-blend-mode:screen;pointer-events:none;transform:translateZ(0)}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* ===== هيدر ===== */
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(12px);background:rgba(3,16,28,.45);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 18px}
.brand{display:flex;gap:.6rem;align-items:center;color:var(--primary-50);font-weight:800;text-decoration:none;z-index: 1000;font-size: 25px;}
.brand img{height:36px}

.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;transition:.2s;    z-index: 1000;}
.nav-toggle:hover{background:rgba(255,255,255,.1)}

.main-nav a{
  color:#cfe8ff;text-decoration:none;padding:.6rem 1rem;border-radius:12px;display:inline-block;position:relative
}
/* إزالة أي خطوط تحت الروابط */
.main-nav a::after{content:none !important}

/* أزرار */
.btn{display:inline-block;padding:.8rem 1.2rem;border-radius:16px;font-weight:800;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);transition:transform .2s, box-shadow .2s;will-change:transform;text-decoration:none}
.btn-primary{background:linear-gradient(135deg, var(--primary-500), var(--primary-700));color:#fff;box-shadow:0 10px 24px rgba(33,158,188,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(33,158,188,.5)}
.btn-ghost{background:transparent;color:#dff6ff;border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-special{background:linear-gradient(135deg, var(--accent-500), var(--accent-700));color:#fff;box-shadow:0 10px 24px rgba(253,158,2,.35)}
.btn-special:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 38px rgba(253,158,2,.55)}

/* ===== Hero ===== */
.hero{position:relative;padding:9rem 0 6rem;isolation:isolate}
.container{max-width:1200px;margin:auto;padding:0 18px;display: flex;flex-direction: column;gap: 25px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero-copy {display: flex;flex-direction: column;align-items: center;gap: 25px;}
.hero-copy h1{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.15;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.hero-copy .lead{font-size:1.15rem;color:#d3edff;margin-top:1rem}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.blob{width:min(460px,80vw);height:min(460px,80vw);background:
radial-gradient(60% 60% at 60% 40%, rgba(255,255,255,.25), rgba(255,255,255,.05) 60%),
linear-gradient(135deg, var(--primary-500), var(--accent-500));
border-radius:62% 47% 82% 35% / 45% 45% 80% 66%;animation:blobAnimation 12s ease-in-out infinite;
box-shadow:0 40px 120px rgba(33,158,188,.35);filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));position:relative;transform:translateZ(0)}
.blob::after{content:"";position:absolute;inset:10%;border-radius:inherit;
background:radial-gradient(40% 40% at 30% 30%, rgba(255,255,255,.25), transparent 60%);filter:blur(12px);mix-blend-mode:soft-light}
@keyframes blobAnimation{
  0%,100%{border-radius:62% 47% 82% 35% / 45% 45% 80% 66%;transform:translateY(0)}
  25%{border-radius:40% 60% 70% 30% / 47% 62% 38% 53%;transform:translateY(-8px)}
  50%{border-radius:53% 47% 34% 66% / 63% 68% 32% 37%;transform:translateY(4px)}
  75%{border-radius:69% 31% 48% 52% / 29% 67% 33% 71%;transform:translateY(-6px)}
}

/* ===== أقسام عامة ===== */
section{padding:4.8rem 0;position:relative}
.section-title{text-align:center;margin:0 auto 2rem;color:#fff;max-width:28ch;padding-bottom:0}
.section-title::after{display:none !important}

/* ===== بطاقات ===== */
.grid-2,.grid-3{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:var(--border-radius);padding:24px;color:#e9f6ff;box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .18s, box-shadow .18s, background .3s;will-change:transform}
.card::before{content:"";position:absolute;inset:-40% -40% auto -40%;height:160%;background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 40%);transform:translateZ(60px);pointer-events:none}
.card:hover{transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:var(--shadow-lg)}
.card h3,.card h4{color:#fff;margin-bottom:.6rem}
.card p{color:#d6eaff}

/* ===== الإعلانات ===== */
.ad-space{background-color:var(--surface-0);color:var(--text);border:1px dashed var(--border-color);border-radius:var(--border-radius);padding:1.5rem;text-align:center;margin:2rem 0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.ad-label{display:inline-block;background-color:var(--primary-100);color:var(--primary-700);padding:.25rem .75rem;border-radius:20px;font-size:.8rem;margin-bottom:1rem}

/* ===== الإحصائيات ===== */
.statistics{text-align:center;background:linear-gradient(180deg, rgba(10,20,32,.6), rgba(10,20,32,.2));border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.stats-grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);align-items:stretch}
.stat-card{background:var(--glass-bg);border:1px solid var(--glass-brd);border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:var(--shadow-sm);backdrop-filter:blur(8px);transition:.25s}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.ring{width:var(--ring-size);height:var(--ring-size);position:relative;display:grid;place-items:center;--pct:0;--ring-color:#8ecae6}
.ring::before{content:"";position:absolute;inset:0;padding:calc(var(--ring-thickness));border-radius:50%;
background:conic-gradient(var(--ring-color) calc(var(--pct)*1%), rgba(255,255,255,.08) 0);
-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness) - 1px), #000 calc(100% - var(--ring-thickness)));
mask:radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness) - 1px), #000 calc(100% - var(--ring-thickness)));
filter:drop-shadow(0 8px 24px rgba(0,0,0,.18));transition:background .3s}
.stat-number{font-size:2rem;font-weight:900;color:#fff;text-shadow:0 6px 20px rgba(0,0,0,.35)}
.stat-label{color:#cde9ff;font-size:1.05rem}

/* ===== Footer (Patched to match the second theme) ===== */
.site-footer{
  background: linear-gradient(to right, var(--primary-900), var(--primary-700));
  color: var(--primary-50);
  padding: 3rem 5% 2rem;
  margin-top: 4rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.site-footer .footer-content{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem;
  margin-bottom:2rem;
}

/* الشعار والوصف */
.site-footer .footer-logo{ flex:1 1 250px; }
.site-footer .footer-logo h3{
  font-size:1.8rem; margin-bottom:1rem; font-weight:800; color:#fff;
}
.site-footer .footer-logo p{
  font-size:1rem; opacity:.95;
}

/* روابط مهمة */
.site-footer .footer-links{ flex:1 1 200px; }
.site-footer .footer-links h4{
  font-size:1.3rem; font-weight:700; margin-bottom:1.5rem; position:relative;
}
.site-footer .footer-links h4::after{
  content:""; position:absolute; bottom:-8px; right:0; width:50px; height:3px;
  background: var(--accent-500); border-radius: var(--border-radius);
}

.site-footer .footer-links ul{ list-style:none; padding:0; margin:0; }
.site-footer .footer-links li{ margin-bottom:.8rem; }

.site-footer .footer-links a{
  color: var(--primary-100);
  text-decoration:none;
  display:inline-flex;
  align-items:center;gap: 0.5rem;
  transition: transform .25s ease, color .25s ease;
}
.site-footer .footer-links a:hover{
  color: var(--accent-500);
  transform: translateX(6px);
}

/* تواصل معنا */
.site-footer .footer-contact{ flex:1 1 240px; }
.site-footer .footer-contact h4{
  font-size:1.3rem; font-weight:700; margin-bottom:1.5rem; position:relative;
}
.site-footer .footer-contact h4::after{
  content:""; position:absolute; bottom:-8px; right:0; width:50px; height:3px;
  background: var(--accent-500); border-radius: var(--border-radius);
}
.site-footer .contact-info{
  display:flex; align-items:center; gap:12px; margin-bottom:1rem;
}
.site-footer .contact-info i{ color: var(--accent-500); font-size:1.1rem; }
/* override لأي لون inline على الروابط داخل الفوتر */
.site-footer .contact-info a{
  color: var(--primary-50) !important;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition: .25s ease;
}
.site-footer .contact-info a:hover{ color: var(--accent-400); }

/* السوشيال */
.site-footer .footer-social{ flex:1 1 260px; }
.site-footer .footer-social h4{
  font-size:1.3rem; font-weight:700; margin-bottom:1.5rem; position:relative;
}
.site-footer .footer-social h4::after{
  content:""; position:absolute; bottom:-8px; right:0; width:50px; height:3px;
  background: var(--accent-500); border-radius: var(--border-radius);
}
.site-footer .social-link{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border:1px solid rgba(255,255,255,.35);
  border-radius:999px; text-decoration:none;
  font-weight:700; transition: transform .2s ease, background-color .2s ease;
  color: var(--primary-50) !important;
}
.site-footer .social-link:hover{ background-color: rgba(255,255,255,.12); transform: translateY(-2px); }
.site-footer .social-link:active{ transform: translateY(0); }
.site-footer .social-note{ margin-top:.75rem; font-size:.9rem; opacity:.9; }
.site-footer .social-wrap {display: flex; gap: 15px;flex-wrap: wrap;}
/* الحقوق */
.site-footer .copyright{
  margin-top:2rem; text-align:center; font-size:.95rem;
  border-top:1px solid rgba(255,255,255,.2); padding-top:1rem; opacity:.95;
}

/* استجابة */
@media (max-width: 768px){
  .site-footer .footer-content{ flex-direction:column; }
}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}
.reveal.active{opacity:1;transform:none}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .nav-toggle{display:flex}

  /* قائمة موبايل: مخفية افتراضيًا لمنع الوميض */
  .main-nav{
    position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:flex-start;
    margin:18px;margin-top:90px;background:rgba(3,16,28,.45);backdrop-filter:blur(12px);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6%);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .main-nav[aria-expanded="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .22s ease, transform .22s ease}
  .main-nav a{font-size:1.3rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
}
/* زر تسجيل الدخول */
.btn-login {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--primary-500);
    border-radius: 8px;
    background: transparent;
    color: var(--primary-700);
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-login:hover {
    background: var(--primary-50);
    border-color: var(--primary-600);
    color: var(--primary-800);
}

.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-name {
    background: transparent;
    border: none;
    font-weight: 700;
    cursor: pointer;
    color: #cfe8ff; /* مثل روابط الناف */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .6rem 1rem;
    border-radius: 12px;
    transition: background .2s;
}

.user-name:hover {
    background: rgba(255,255,255,.06);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: rgba(3,16,28,.95); /* نفس خلفية الهيدر */
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    min-width: 200px;
    z-index: 1200;
    overflow: hidden;
    text-align: right;
}
@media (max-width: 720px) {
.dropdown-menu {right: 0;
}
.main-nav a {
    width:100%;
}
}

.dropdown-menu .dropdown-item {
    display: block;
    padding: 12px 16px;
    color: #cfe8ff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s, padding-right 0.2s;
}

.dropdown-menu .dropdown-item:hover {
    background: rgba(255,255,255,.08);
    padding-right: 20px;
}

.user-dropdown.open .dropdown-menu {
    display: block;
}

/* زر الخروج */
.logout-form {
    margin: 0;
}
.logout-btn {
    width: 100%;
    text-align: right;
    background: transparent;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #ff6b6b;
    transition: background 0.2s, padding-right 0.2s;
}
.logout-btn:hover {
    background: rgba(255,0,0,.12);
    padding-right: 20px;
}