:root{
  --bg:#0b1220;
  --ink:#eaf2ff;
  --muted:#9aa6bf;
  --brand:#4f7cff;
  --brand-2:#27e0ff;
  --stroke:rgba(255,255,255,.12);

  /* خطوط عربية */
  --font-arabic-body: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic-heading: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* الجسم الافتراضي بالعربي (وهيلزم للباراجرافات) */
body{
  min-height:100svh;
  font-family:var(--font-arabic-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,124,255,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 90%, rgba(39,224,255,.12), transparent 60%),
    var(--bg);
}

/* العناوين العربية الرئيسية (شخصي + تقني) */
h1,
h2,
h3,
.section__title,
.hero__title-name,
.hero__title-sub,
.section__eyebrow,
.testimonial-card__meta{
  font-family:var(--font-arabic-heading);
}

/* نترك النصوص الإنجليزية على system-ui زي ما هي */
.en{
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}
/* جسم النص العربي (براجرافات) */
p{
  font-family: var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* بعض الفقرات اللي حابّينها تكون أوضح شوية */
.hero__subtitle,
.card__body,
.section__block p{
  font-family: var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* قائمة التنقل الرئيسية */
.site-nav__link{
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 13px;
  font-weight: 600;
}

/* أزرار الأكشن */
.btn{
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 13px;
  font-weight: 700;
}

/* اللوجو النصي (خالد بلال / Belal APPs لو بالعربي) */
.site-brand__name{
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight: 800;
}

/* لو كتبت "تطبيقات بلال" أو نص عربي تحت اللوجو */
.site-brand__apps{
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
}


html,
body{
  margin:0;
  padding:0;
}

body{
  min-height:100svh;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,124,255,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 90%, rgba(39,224,255,.12), transparent 60%),
    var(--bg);
}

/* ===== Layout ===== */

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{
  flex:1 0 auto;
}

.section{
  padding-block:72px;
  padding-inline:16px;
}

.section--card{
  padding-block:64px;
}

.section__inner{
  max-width:1100px;
  margin-inline:auto;
}

.section__header{
  margin-block-end:32px;
}

.section__eyebrow{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 4px;
}

.section__title{
  margin:0;
  font-size: clamp(22px, 4vw, 28px);
}

.section-grid{
  display:grid;
  gap:24px;
}

.section-grid--2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

/* ===== Header ===== */

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(18px);
  background:linear-gradient(90deg, rgba(5,10,22,.80), rgba(5,10,22,.92));
  border-bottom:1px solid rgba(255,255,255,.04);
}

.site-header__inner{
  max-width:1100px;
  margin-inline:auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.site-brand{
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.site-brand__mark{
  inline-size:28px;
  block-size:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size: 28px; 
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.site-brand__mark{
  font-size: 28px;      /* كبّر القيمة أو صغّرها حسب ما يناسب عينك */
  line-height: 1;
  inline-size: 34px;    /* حجم الصندوق حوالين الـ B */
  block-size: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-brand__text{
  display: inline-flex;
  flex-direction: row;      /* بدل column */
  align-items: baseline;
  gap: 4px;                 /* مسافة صغيرة بين Belal و APPs */
}
.site-brand{
  display:flex;
  align-items:center;
  gap:6px; /* كان 8px قبل كده غالبًا */
}

.site-brand__name{
  font-size:14px;
  font-weight:600;
}

.site-brand__apps{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

.site-brand__text{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-brand__line{
  display: flex;
  align-items: baseline;
  gap: 4px;
}

/* الـ slug تحت الاسم */
.site-brand__slug{
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
  margin-top: -2px;
  letter-spacing: 0.04em;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
}

.site-nav__link{
  position:relative;
  text-decoration:none;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:
    color .18s ease-out,
    border-color .18s ease-out,
    background .18s ease-out;
}

.site-nav__link:hover{
  color:var(--ink);
}

.site-nav__link--primary{
  color:var(--ink);
  border-color:rgba(79,124,255,.65);
  background:rgba(79,124,255,.22);
}

/* ===== Hero ===== */

.hero{
  padding-inline:16px;
  padding-block:72px 56px;
}

.hero__inner{
  max-width:1100px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2.5fr);
  gap:40px;
  align-items:center;
}

.hero__content{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.hero__eyebrow{
  margin:0;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hero__title{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.hero__title-main{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:clamp(26px, 6vw, 34px);
}

.hero__title-name{
  font-weight:800;
}

.hero__title-apps{
  font-weight:800;
  padding:.18rem .6rem;
  border-radius:999px;
  background:rgba(79,124,255,.14);
  border:1px solid rgba(79,124,255,.35);
  color:#cfe0ff;
  font-size:clamp(14px, 3vw, 15px);
}

.hero__title-sub{
  font-size:clamp(16px, 4vw, 18px);
  color:var(--muted);
}

.hero__underline{
  inline-size:100%;
  block-size:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}

.hero__subtitle{
  margin:0;
  font-size:14px;
  color:var(--muted);
  max-width:420px;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

/* Buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:.55rem 1.1rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:
    background .18s ease-out,
    border-color .18s ease-out,
    transform .12s ease-out,
    box-shadow .18s ease-out;
}

.btn--primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color:rgba(79,124,255,.75);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  color:#f5f7ff;
}

.btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.55);
}

.btn--ghost{
  background:rgba(10,18,36,.70);
  border-color:rgba(150,180,255,.35);
  color:var(--ink);
}

.btn--ghost:hover{
  background:rgba(14,24,48,.90);
}

/* Hero side */

.hero__side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.hero-photo{
  inline-size:100%;
  aspect-ratio:4/3;
  border-radius:20px;
  border:1px solid rgba(150,180,255,.35);
  background:radial-gradient(circle at 10% 0, rgba(79,124,255,.28), transparent 60%),
             radial-gradient(circle at 100% 100%, rgba(39,224,255,.22), transparent 55%),
             rgba(6,12,26,.9);
  box-shadow:
    0 18px 40px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* لو استخدمت <img> داخل hero-photo */
.hero-photo img{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
}

/* Terminal */

.terminal{
  border-radius:16px;
  background:rgba(5,10,22,.72);
  border:1px solid rgba(150,180,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.35);
  overflow:hidden;
}

.terminal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:linear-gradient(90deg, rgba(8,14,30,.95), rgba(14,22,40,.95));
}

.terminal__dots{
  display:flex;
  align-items:center;
  gap:5px;
}

.terminal__dot{
  inline-size:9px;
  block-size:9px;
  border-radius:50%;
}

.terminal__dot--red{background:#ff5f57;}
.terminal__dot--yellow{background:#febc2e;}
.terminal__dot--green{background:#28c840;}

.terminal__title{
  font-size:11px;
  color:var(--muted);
}

.terminal__body{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
}

.terminal__prompt{
  color:#7dd3fc;
}

.terminal__cmd{
  background:linear-gradient(90deg, #eaf2ff, #bde8ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.terminal__caret{
  inline-size:10px;
  block-size:1.4em;
  background:linear-gradient(180deg, #ffffff, #bde8ff);
  display:inline-block;
  animation:blink 1.1s steps(1,end) infinite;
}

/* Badge */

.hero__badge{
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:.55rem .9rem;
  border-radius:14px;
  font-size:13px;
  font-weight:600;
  background:rgba(79,124,255,.14);
  border:1px solid rgba(79,124,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* ===== Cards / Chips ===== */

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}

.card{
  padding:18px 18px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.04);
  background:radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
             rgba(10,16,32,.96);
  box-shadow:0 14px 32px rgba(0,0,0,.40);
  transition:
    transform .16s ease-out,
    box-shadow .16s ease-out,
    border-color .16s ease-out,
    background .18s ease-out;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(150,180,255,.45);
  box-shadow:0 20px 42px rgba(0,0,0,.55);
}

.card__title{
  margin:0 0 6px;
  font-size:15px;
}

.card__meta{
  margin:0 0 10px;
  font-size:12px;
  color:var(--muted);
}

.card__body{
  font-size:13px;
  color:var(--muted);
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  font-size:12px;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(150,180,255,.40);
  background:rgba(10,16,32,.90);
  color:var(--ink);
}

/* ===== Footer ===== */

.site-footer{
  padding:18px 16px 22px;
  border-top:1px solid rgba(255,255,255,.04);
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* ===== Utilities ===== */

.en{
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== Animations ===== */

@keyframes blink{
  50%{opacity:0;}
}

/* ===== Responsive ===== */

@media (max-width:900px){
  .hero__inner{
    grid-template-columns:1fr;
    gap:32px;
  }

  .hero__side{
    max-width:520px;
    margin-inline:auto;
  }

  .cards-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .section-grid--2{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .site-header__inner{
    padding-inline:12px;
  }

  .site-nav{
    gap:4px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .site-nav__link{
    padding:5px 8px;
    font-size:12px;
  }

  .hero{
    padding-block:16px 40px;
  }

  .cards-grid{
    grid-template-columns:1fr;
  }

  .section{
    padding-block:56px 48px;
  }
}

@media (prefers-reduced-motion:reduce){
  .terminal__caret{
    animation:none;
  }

  .btn,
  .card{
    transition:none;
  }
}

/* ===== تحسينات عامة ===== */

html{
  scroll-behavior:smooth;
}

/* شادو أوضح للهيدر مع الحفاظ على الـ blur */
.site-header{
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}

/* ===== تحسين القائمة الرئيسية ===== */

.site-nav__link{
  position:relative;
}

.site-nav__link::after{
  content:"";
  position:absolute;
  inset-inline:10px;
  bottom:3px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease-out, opacity .18s ease-out;
  opacity:0;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

/* تركيز أوضح للكيبورد */
.site-nav__link:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:2px;
}

/* ===== تحسين الأزرار ===== */

.btn{
  transform:translateY(0);
}

.btn:active{
  transform:translateY(1px) scale(.98);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}

/* ===== حركة لطيفة للصورة الشخصية ===== */

.hero-photo{
  transform:translateY(0);
  transition:
    transform .5s ease-out,
    box-shadow .5s ease-out,
    border-color .3s ease-out;
}

.hero-photo:hover{
  transform:translateY(-4px);
  border-color:rgba(150,180,255,.6);
  box-shadow:0 26px 60px rgba(0,0,0,.7);
}

/* نضيف ترانزيشن للصورة نفسها */
.hero-photo img{
  transition:transform .6s ease-out;
}

.hero-photo:hover img{
  transform:scale(1.04);
}

/* ===== تحسين التفاعل مع Chips ===== */

.chip{
  transition:
    background .18s ease-out,
    border-color .18s ease-out,
    transform .16s ease-out,
    box-shadow .16s ease-out;
}

.chip:hover{
  transform:translateY(-2px);
  background:rgba(79,124,255,.18);
  border-color:rgba(150,180,255,.7);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}

/* ===== تحسين الريسبونسيف للموبايل الصغير ===== */

@media (max-width:640px){
  .site-nav{
    overflow-x:auto;
    padding-bottom:4px;
  }

  .site-nav::-webkit-scrollbar{
    display:none;
  }
}

@media (max-width:480px){
  .hero__title-main{
    font-size:22px;
  }

  .hero__title-sub{
    font-size:14px;
  }

  .hero__subtitle{
    font-size:13px;
  }

  .site-header__inner{
    gap:8px;
  }
}
/* من أنا – تنسيق البلوكات والقائمة */

.section__block{

  font-family: var(--font-arabic-body, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* لو فيه باراجرافات جوه البلوك */
.section__block p{
  margin: 0 0 0.75rem;
}

/* القائمة الجانبية (النقط) */
.section__block ul{
  margin: 0;
  padding-inline-start: 1.2rem; /* مسافة قبل النقط */
  list-style: disc;
}

.section__block li{
  margin-bottom: 0.5rem;
}

/* إبراز الـ <strong> شوية */
strong{
  color: var(--ink);
  font-weight: 700;
}

/* تنسيق محتوى كروت الخدمات */

.card__body p{
  margin: 0 0 0.6rem;
}

.card__body ul{
  margin: 0;
  padding-inline-start: 1.1rem; /* مسافة قبل النقط */
  list-style: disc;
}

.card__body li{
  margin-bottom: 0.35rem;
  line-height: 1.8;
}



.stack__intro{
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.stack-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.stack-column{
  padding: 16px 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
    rgba(8,12,26,.96);
  box-shadow: 0 14px 32px rgba(0,0,0,.38);
}

.stack-column__title{
  margin: 0 0 10px;
  font-size: 15px;
  font-family: var(--font-arabic-heading, "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif);
}

.tech-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(150,180,255,.45);
  background: rgba(10,16,32,.92);
  font-size: 12px;
  cursor: default;
  transition:
    background .18s ease-out,
    border-color .18s ease-out,
    transform .14s ease-out,
    box-shadow .16s ease-out;
}

.tech-chip__icon{
  inline-size: 18px;
  block-size: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: radial-gradient(circle at 30% 0, rgba(255,255,255,.35), transparent 60%),
              rgba(35,52,96,.95);
}

.tech-chip__label{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Hover صغير لطيف */
.tech-chip:hover{
  transform: translateY(-2px);
  background: rgba(79,124,255,.16);
  border-color: rgba(150,180,255,.85);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}

/* موبايل */
@media (max-width: 900px){
  .stack-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .stack-grid{
    grid-template-columns: 1fr;
  }
}

.contact-grid{
  align-items: flex-start;
}

.contact-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
    rgba(8,12,26,.96);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.contact-item__icon{
  inline-size: 28px;
  block-size: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: radial-gradient(circle at 30% 0, rgba(255,255,255,.35), transparent 60%),
              rgba(35,52,96,.95);
}

.contact-item__body{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-item__label{
  font-size: 13px;
  color: var(--muted);
}

.contact-item__value{
  font-size: 14px;
}

.contact-link{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed rgba(150,180,255,.6);
  padding-bottom: 1px;
}

.contact-link:hover{
  border-bottom-style: solid;
}

/* موبايل */
@media (max-width: 640px){
  .contact-item{
    padding: 10px;
  }
}
/* انسيابية في السكрол (لو مش مضافة قبل كده) */
html{
  scroll-behavior:smooth;
}

/* تعويض الهيدر الستيكي عشان الجزء ما يستخباش تحته */
.hero,
.section{
  scroll-margin-top: 80px;
}

/* زر قائمة الموبايل (الهامبرجر) */
.nav-toggle{
  inline-size: 34px;
  block-size: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,16,32,.92);
  display: none; /* يبان بس على الموبايل في media query */
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.nav-toggle__icon{
  inline-size: 18px;
  block-size: 18px;
  stroke: #eaf2ff;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* لمسة بسيطة عند تفعيل القائمة (اختياري) */
.nav-toggle.nav-toggle--active .nav-toggle__icon{
  stroke: var(--brand-2);
}
/* شكل الـ X عند فتح القائمة */
.nav-toggle.nav-toggle--active .nav-toggle__line:nth-child(1){
  transform: translateY(3px) rotate(45deg);
}

.nav-toggle.nav-toggle--active .nav-toggle__line:nth-child(2){
  opacity: 0;
}

.nav-toggle.nav-toggle--active .nav-toggle__line:nth-child(3){
  transform: translateY(-3px) rotate(-45deg);
}

/* حالة الـ active في القائمة */
.site-nav__link--active{
  color: var(--ink);
}

.site-nav__link--active::after{
  transform: scaleX(1);
  opacity: 1;
}

/* ===== موبايل / تابلت – تحويل القائمة لهامبرجر ===== */

@media (max-width: 900px){
  .site-header__inner{
    position: relative;
  }

  .nav-toggle{
    display: inline-flex;
  }

  .site-nav{
    position: absolute;
    inset-inline: 8px;
    top: 100%;
    margin-top: 6px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(135deg, rgba(7,11,24,.97), rgba(9,16,32,.97));
    box-shadow: 0 18px 40px rgba(0,0,0,.7);
    flex-direction: column;
    gap: 4px;
    display: none; /* افتراضيًا مقفولة */
    z-index: 30;
  }

  .site-nav.site-nav--open{
    display: flex;
  }

  .site-nav__link{
    width: 100%;
    text-align: right;
    justify-content: flex-start;
  }
}
.hero__badge{
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


/* ===== تظبيط الـ Theme عام ===== */

:root{
  /* خلفية الصفحة أغمق */
  --bg: #020617;
  /* خلفية البلوكات أفتح شوية من الخلفية العامة */
  --surface: #0b1220;
  --surface-soft: #111827;
}

/* خلفية الجسم تفضل دارك جدًا */
body{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(79,124,255,.10), transparent 60%),
    radial-gradient(1000px 500px at 90% 90%, rgba(39,224,255,.10), transparent 60%),
    var(--bg);
}

/* ===== البلوكات / الكروت تكون أفتح من الخلفية ===== */

/* سكشنات الكارد نفسها تظل شفافة، اللي يبان هو البلوكات جوّاها */
.section--card{
  background: transparent;
}

/* الكروت العامة (الخدمات + المشاريع) */
.card{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.14), transparent 55%),
    var(--surface-soft);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
}

/* أعمدة التقنيات */
.stack-column{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.14), transparent 55%),
    var(--surface-soft);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
}

/* عناصر التواصل */
.contact-item{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.12), transparent 55%),
    var(--surface-soft);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 16px 38px rgba(0,0,0,.65);
}

/* عناصر الـ FAQ */
.faq-item{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
    var(--surface-soft);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 38px rgba(0,0,0,.65);
}

/* التيرمنال في الهيرو */
.terminal{
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.16), transparent 55%),
    var(--surface);
  border-color: rgba(255,255,255,.10);
}

/* الصورة (البلوك اللي حواليها) */
.hero-photo{
  background:
    radial-gradient(circle at 10% 0, rgba(79,124,255,.28), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(39,224,255,.22), transparent 55%),
    var(--surface-soft);
  border-color: rgba(150,180,255,.45);
}

/* بادج الخبرة في الهيرو أفتح شوية عن الخلفية */
.hero__badge{
  background: rgba(15,23,42,.96);
  border-color: rgba(79,124,255,.45);
}

.stack-note{
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.6);
  background: rgba(15,23,42,0.7);
}
.testimonials-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.testimonial-card{
  padding: 16px 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.14), transparent 55%),
    var(--surface-soft, #111827);
  box-shadow: 0 18px 40px rgba(0,0,0,.65);
}

.testimonial-card__header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.testimonial-card__avatar{
  inline-size: 60px;
  block-size: 60px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.7);
  background:
    radial-gradient(circle at 30% 0, rgba(255,255,255,.35), transparent 60%),
    #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-card__avatar img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.testimonial-card__avatar-fallback{
  font-size: 13px;
  font-weight: 700;
  color: #e5e7eb;
}

.testimonial-card__meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name{
  font-size: 14px;
  font-weight: 700;
}

.testimonial-card__role{
  font-size: 12px;
  color: var(--muted);
}

.testimonial-card__body{
  position: relative;
  padding-top: 6px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
}

/* الغي الديكور الخلفي القديم لو كان موجود */
.testimonial-card__body::before{
  content: none;
}

/* فقرة التستيمونيال نفسها */
.testimonial-card__quote{
  position: relative;
  margin: 0 0 0.5rem;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  text-align: right;
  padding-inline-start: 6px;
  padding-inline-end: 6px;
}

/* كوتيشن في أول وآخر الفقرة */
.testimonial-card__quote::before{
  content: "«";
  position: relative;
  margin-inline-start: 4px;
}

.testimonial-card__quote::after{
  content: "»";
  position: relative;
  margin-inline-end: 4px;
}

.testimonial-card__quote:last-child{
  margin-bottom: 0;
}

/* موبايل: كروت مستقبلًا لو زادت */
@media (min-width: 900px){
  .testimonials-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

 /* خلفية مخفّة لسكشن من أنا */
#about .section-grid{
  padding:22px 22px 24px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.04);
  background:
    radial-gradient(circle at 0 0, rgba(79,124,255,.10), transparent 55%),
    rgba(10,16,32,.96);
  box-shadow:0 14px 32px rgba(0,0,0,.40);
}
/* ========= شركاء تعاونت معهم (اللوجوهات) ========= */
/* ===== شركات تعاونت معها – صف لوجوهات يتحرك ===== */

/* الحاوية: تسمح بالسكرول، وتخفي الـ scrollbar */
.brands-scroller{
  width: 100%;
  overflow-x: auto;              /* المستخدم يقدر يسحب يمين/شمال */
  overflow-y: hidden;
  padding-block: 8px;
  direction: ltr;                /* عشان scrollLeft يكون بسيط وموحّد */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;         /* فايرفوكس */
  -ms-overflow-style: none;   

  cursor: grab;   /* IE/Edge القديم */
}

.brands-scroller::-webkit-scrollbar{
  display: none;                 /* إخفاء السكروول في كروم/سفاري */
}

/* الصف نفسه */
.brands-track{
  display: inline-flex;
  gap: 32px;
  align-items: center;
  white-space: nowrap;
}

/* كل لوجو كعنصر مستقل */
.brand-card{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 180px;
  padding-inline: 4px;
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  transition:
    transform .16s ease-out,
    opacity .16s ease-out;
}

.brand-card:active{
  cursor: grabbing;
}

/* اللوجو نفسه – كبير وبدون أي خلفية إضافية */
.brand-card__logo{ 
  inline-size: 100%;
  block-size: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0;
  overflow: hidden;
  border-radius: 20px;
  padding-inline: 10px;
  box-sizing: border-box;   /* 👈 أهم سطر هنا */
}

.brand-card__logo img{
  max-inline-size: 100%;
  max-block-size: 120px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* fallback لو حطيت نص بدل صورة */
.brand-card__logo-fallback{
  font-size: 22px;
  font-weight: 700;
  color: #e5e7eb;
}

/* موبايل: اللوجو ياخد مساحة أكبر نسبيًا */
@media (max-width: 640px){
  .brand-card{
    min-width: 70%;
    min-height: 170px;
  }
}

@media (max-width: 640px){
  .brands-track{
    gap: 16px; /* بدل 32px */
  }

  .brand-card{
    min-width: 35%; /* كانت 70%، خليها أضيق شوية لو تحب */
  }
}


/* ===== سلايدر الخدمات + نماذج من أعمالي على الموبايل ===== */

@media (max-width: 768px){
  /* نحول الجريد في السكشنين لسلايدر أفقي */
  #services .cards-grid,
  #cases .cards-grid{
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    padding-inline: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 10px;
  }

  #services .cards-grid::-webkit-scrollbar,
  #cases .cards-grid::-webkit-scrollbar{
    display: none;
  }

  /* كل كارت = سلايد بنسبة ~80% */
  #services .cards-grid .card,
  #cases .cards-grid .card{
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
  }
}