/* ====== Base / Reset ====== */
    :root{
      --bg: #0b0f16;            /* dark */
      --panel:#111828;
      --muted:#98a2b3;
      --text:#e5e7eb;
      --brand:#60a5fa;          /* primary */
      --brand-2:#22d3ee;        /* accent */
      --ring: #1e293b;
      --ok:#34d399; --warn:#f59e0b; --err:#ef4444;

      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Kufi Arabic, "Noto Sans Arabic", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }
    [data-theme="light"]{
      --bg:#f7f7fb; --panel:#ffffff; --text:#0f172a; --muted:#475569; --ring:#e5e7eb;
      --brand:#2563eb; --brand-2:#06b6d4;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
    }
    body{margin:0; font-family:var(--font); background:radial-gradient(1200px 600px at 100% -50%, rgba(34,211,238,.08), transparent 60%), radial-gradient(900px 500px at -20% 10%, rgba(96,165,250,.12), transparent 60%), var(--bg); color:var(--text);}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{max-width:1150px; margin-inline:auto; padding:clamp(16px, 3vw, 28px)}
    ::selection{background:color-mix(in hsl, var(--brand) 40%, transparent); color:#0b1220}

    /* ====== Navbar ====== */
    .nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:color-mix(in hsl, var(--bg) 80%, transparent); border-bottom:1px solid var(--ring)}
    .nav .inner{display:flex; align-items:center; gap:16px; justify-content:space-between}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
    .logo{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:var(--shadow); font-weight:900}
    .nav a.link{opacity:.9; padding:10px 14px; border-radius:12px}
    .nav a.link:hover{background:color-mix(in hsl, var(--panel) 90%, transparent)}
    .nav a.link.active{background:linear-gradient(180deg, color-mix(in hsl, var(--panel) 90%, transparent), color-mix(in hsl, var(--panel) 80%, transparent)); border:1px solid color-mix(in hsl, var(--brand) 40%, var(--ring))}
    .tools{display:flex; gap:10px; align-items:center}
    .btn{border:1px solid var(--ring); background:var(--panel); color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer}
    .btn:hover{border-color:color-mix(in hsl, var(--brand) 60%, var(--ring))}
    .btn:focus-visible, .link:focus-visible{outline:2px solid color-mix(in hsl, var(--brand) 55%, var(--ring)); outline-offset:2px}
    #search.btn::placeholder{color:color-mix(in hsl, var(--muted) 80%, transparent)}
    input.btn, select.btn{-webkit-appearance:none; appearance:none}
    .btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); border:0; color:#0b1220; font-weight:800}
    .btn.primary:hover{filter:brightness(1.05)}

    /* ====== Hero ====== */
    .hero{padding-block:54px}
    .hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
    .badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid var(--ring); border-radius:999px; font-size:12px; opacity:.9}
    .title{font-size:clamp(28px, 2.8vw, 44px); line-height:1.1; margin:14px 0 12px; font-weight:900}
    .subtitle{font-size:clamp(14px, 1.3vw, 18px); color:var(--muted)}
    .cta{display:flex; gap:12px; margin-top:22px}
    .cta .btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); border:0; color:#0b1220; font-weight:800}
    .panel{background:linear-gradient(180deg, color-mix(in hsl, var(--panel) 94%, transparent), color-mix(in hsl, var(--panel) 70%, transparent)); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}

    /* ====== Sections ====== */
    section{padding-block:38px}
    section{scroll-margin-top:86px}
    .sechead{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px}
    .sechead h2{margin:0; font-size:clamp(20px, 1.8vw, 28px)}
    .grid{display:grid; gap:16px}
    .grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
    .grid.cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
    .card{border:1px solid var(--ring); background:var(--panel); border-radius:16px; padding:16px; transition:translate .2s ease, box-shadow .2s ease}
    .card:hover{translate:0 -2px; box-shadow:var(--shadow)}
    .card .banner{position:relative; overflow:hidden; border-radius:12px; background:conic-gradient(from 0deg at 50% 50%, color-mix(in hsl, var(--brand) 12%, transparent), color-mix(in hsl, var(--brand-2) 12%, transparent), color-mix(in hsl, var(--brand) 12%, transparent)); min-block-size:140px; margin:-4px -4px 10px; border:1px dashed color-mix(in hsl, var(--ring) 80%, transparent)}
    .card .banner img{inline-size:100%; block-size:100%; object-fit:cover; display:block}
    .card .banner .placeholder{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:12px; letter-spacing:.3px}
    .member{display:flex; gap:14px; align-items:center}
    .avatar{inline-size:56px; block-size:56px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-2)); display:grid; place-items:center; font-weight:900; color:#0b1220; box-shadow:0 0 0 3px color-mix(in hsl, var(--panel) 85%, transparent), inset 0 0 0 1px rgba(255,255,255,.2)}
    .avatar img{inline-size:100%; block-size:100%; border-radius:50%; object-fit:cover; display:block}
    .role{font-size:12px; color:var(--muted)}

    .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
    .tag{font-size:12px; padding:6px 10px; border:1px dashed var(--ring); border-radius:999px; color:var(--muted); background:color-mix(in hsl, var(--panel) 88%, transparent)}

    /* Use same card look as projects */
    .partner{border:1px solid var(--ring); background:var(--panel); border-radius:16px; padding:16px; transition:translate .2s ease, box-shadow .2s ease}
    .partner:hover{translate:0 -2px; box-shadow:var(--shadow)}
    .partner .banner{position:relative; overflow:hidden; border-radius:12px; background:conic-gradient(from 0deg at 50% 50%, color-mix(in hsl, var(--brand) 12%, transparent), color-mix(in hsl, var(--brand-2) 12%, transparent), color-mix(in hsl, var(--brand) 12%, transparent)); min-block-size:140px; margin:-4px -4px 10px; border:1px dashed color-mix(in hsl, var(--ring) 80%, transparent)}
    .partner .banner img{inline-size:100%; block-size:100%; object-fit:cover; display:block}
    .partner .banner .placeholder{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:12px; letter-spacing:.3px}

    /* ====== Footer ====== */
    footer{padding:22px 0 30px; border-top:1px solid var(--ring); color:var(--muted)}

    /* ====== Responsive ====== */
    @media (max-width: 980px){
      .hero .wrap{grid-template-columns:1fr}
      .grid.cols-3{grid-template-columns:repeat(2,1fr)}
      .grid.cols-4{grid-template-columns:repeat(3,1fr)}
      .partners{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width: 640px){
      .grid.cols-3, .grid.cols-4{grid-template-columns:1fr}
      .partners{grid-template-columns:repeat(2,1fr)}
      .card .banner{min-block-size:110px}
    }

    /* ====== Utilities ====== */
    .hidden{display:none}
    
    /* Scrollbar (WebKit) */
    ::-webkit-scrollbar{inline-size:10px; block-size:10px}
    ::-webkit-scrollbar-thumb{background:color-mix(in hsl, var(--ring) 80%, transparent); border-radius:999px; border:2px solid transparent; background-clip:padding-box}
    ::-webkit-scrollbar-track{background:transparent}


/* ====== Warning ====== */

.notice {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #0b1220;
  font-weight: 700;
  text-align: center;
  padding: 8px 14px;
  font-size: 14px;
  letter-spacing: .3px;
  border-bottom: 1px solid var(--ring);
}