/* Overlay للخلفية */
    #about::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.7); /* غامق شفاف */
      z-index: 0; /* ورا المحتوى */
    }

    #about {
      background: url("images/8.jpg") no-repeat center center;
      color: var(--text);
      padding: clamp(2rem, 5vw, 4rem) 1rem;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }

    /* خلي المحتوى فوق الـ overlay */
    #about > .container,
    #about .content,
    #about .media {
      position: relative;
      z-index: 1;
    }

    /* عناصر عائمة ديكورية */
    .float-icon{
      position:absolute; inset:auto auto; opacity:.12;
      animation: float 7s ease-in-out infinite;
      pointer-events:none; z-index:-1;
      color:var(--accent-2);
    }
    .float-icon:nth-child(1){ top:8%; left:6%; animation-delay:.2s }
    .float-icon:nth-child(2){ bottom:10%; right:14%; animation-delay:1.1s }
    .float-icon:nth-child(3){ top:40%; right:4%; animation-delay:.6s }
    @keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

    .container{
       max-width:1100px;
        margin-inline:auto;
         display:grid; gap:clamp(1.25rem, 3vw, 2rem); 
         align-items:center; 
         grid-template-columns:1.1fr .9fr;
        
        }

    .media{
       border-radius: 1rem;
      position:relative; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
      box-shadow:var(--shadow); overflow:hidden; aspect-ratio: 4 / 3;
    }
    .media img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); border-radius: 2rem; }

    .badge{
      position:absolute; display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem;
      background: rgba(17,24,39,.85); border:1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(6px); border-radius:999px; font-size:.9rem; color:var(--text);
      box-shadow:0 6px 20px rgba(0,0,0,.25);
       border-radius: 1rem;
    }
    .badge svg{ width:20px; height:20px; stroke:var(--accent); }
    .badge.top-left{ top:.9rem; left:.9rem }
    .badge.bottom-right{ bottom:.9rem; right:.9rem }

    .content h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height:1.25; margin:0; }
    .content p{ color:var(--muted); margin:.9rem 0 1.2rem; font-size:clamp(.98rem, 1.2vw, 1.05rem); }

    .bullets{ display:grid; gap:.7rem; margin:1rem 0 1.4rem; }
    .bullet{ display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .8rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius: .9rem; }
    .bullet svg{ flex:0 0 20px; margin-top:2px; stroke:var(--accent-2); width:20px; height:20px }

    .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin:1.2rem 0 1.5rem; }
    .stat{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius:1rem; padding:.9rem; text-align:center; }
    .stat .num{ font-size: clamp(1.2rem, 2.8vw, 1.9rem); font-weight:800; letter-spacing:.2px; }
    .stat .label{ color:var(--muted); font-size:.85rem }

    .cta{ display:flex; gap:.7rem; flex-wrap:wrap }
    .btn{ appearance:none; border:none; cursor:pointer; padding:.85rem 1.1rem; border-radius:.9rem; font-weight:700; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease; text-decoration:none; display:inline-block }
    .btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1020 }
    .btn.secondary{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18) }
    .btn:hover{ transform: translateY(-2px) }

    .reveal{ border-radius: 2rem; opacity:0; transform: translateY(18px) scale(.98); filter: blur(2px); transition: opacity .7s ease, transform .7s ease, filter .7s ease }
    .reveal.show{ opacity:1; transform:none; filter:none }

    @media (prefers-reduced-motion: reduce){
      .float-icon{ animation:none }
      .reveal{ transition:none }
    }

    @media (max-width: 900px){
      .container{ grid-template-columns:1fr; }
      .media{ order: -1 }
      .stats{ grid-template-columns:repeat(2,1fr) }
    }