/* ====== Base ====== */
:root{
    --bg:#0f1020;          /* خلفية داكنة رايقة */
    --card:#171833;
    --muted:#9aa1b2;
    --text:#e9ecf1;
    --brand:#9b5cff;       /* بنفسجي لافت */
    --brand-2:#00d2d3;     /* تركواز مبهج */
    --ok:#22c55e;
    --danger:#ef4444;
    --radius:18px;
    --shadow:0 20px 40px rgba(0,0,0,.25);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:"Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 600px at 100% -10%, rgba(155,92,255,.25), transparent 40%),
                radial-gradient(900px 500px at -10% 0%, rgba(0,210,211,.20), transparent 40%),
                var(--bg);
    color:var(--text);
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .container{width:min(1100px, 92%); margin-inline:auto}
  .narrow{width:min(800px, 92%); margin-inline:auto}
  .hidden{display:none !important}
  
  /* ====== Header ====== */
  .site-header{position:sticky; top:0; z-index:20; background:rgba(15,16,32,.65); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
  .brand{font-weight:800; letter-spacing:.3px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:1.25rem}
  .nav-links{display:flex; gap:18px}
  .nav-links a{opacity:.9}
  .nav-links a:hover{opacity:1}
  
  /* ====== Hero ====== */
  .hero{padding:56px 0 24px}
  .hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center}
  .hero__text h1{font-size:2.2rem; margin:0 0 10px}
  .hero__text p{color:var(--muted); line-height:1.8; margin:0 0 18px}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; border:1px solid transparent; cursor:pointer}
  .btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0b12; font-weight:700}
  .btn-primary:hover{filter:brightness(1.06)}
  .hero__card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:12px}
  .stat{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:12px; text-align:center}
  .stat__num{font-size:1.5rem; font-weight:800}
  .stat__label{color:var(--muted); font-size:.9rem}
  .hero__hint{color:var(--muted); font-size:.9rem}
  
  @media (max-width:900px){
    .hero__grid{grid-template-columns:1fr}
  }
  
  /* ====== Sections ====== */
  .section{padding:44px 0}
  .section.alt{background:linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
  .section__head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px}
  .section h2{margin:0; font-size:1.6rem}
  
  /* ====== Tools ====== */
  .tools{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .search input{width:280px; max-width:100%; padding:12px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:#0d0e1b; color:var(--text)}
  .filters{display:flex; gap:8px; flex-wrap:wrap}
  .filter-btn{padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); color:var(--text); cursor:pointer; font-weight:600}
  .filter-btn.active{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#0b0b12; border-color:transparent}
  
  /* ====== Grid & Cards ====== */
  .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
  @media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:620px){.grid{grid-template-columns:1fr}}
  
  .card{position:relative; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
  .card__thumb{aspect-ratio: 16/9; background:#0a0b14; display:flex; align-items:center; justify-content:center}
  .card__thumb img{width:100%; height:100%; object-fit:cover}
  .card__body{padding:14px}
  .card__title{margin:0 0 6px; font-size:1.05rem}
  .card__desc{margin:0 0 12px; color:var(--muted); font-size:.95rem}
  .card__tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
  .tag{font-size:.75rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); padding:4px 8px; border-radius:999px; color:var(--muted)}
  .card__actions{display:flex; gap:8px}
  .card .btn{padding:9px 12px}
  .btn-ghost{background:transparent; border-color:rgba(255,255,255,.14); color:var(--text)}
  .btn-ghost:hover{background:rgba(255,255,255,.06)}
  .fav{position:absolute; top:10px; left:10px; background:rgba(0,0,0,.4); border:none; color:#ffd700; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:18px}
  .fav.active{filter:drop-shadow(0 0 8px #ffd700)}
  
  .empty{margin-top:22px; text-align:center; color:var(--muted)}
  
  /* ====== Contact ====== */
  .contact{display:grid; gap:12px}
  .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .contact input, .contact textarea{padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0d0e1b; color:var(--text)}
  @media (max-width:620px){.row{grid-template-columns:1fr}}
  
  /* ====== Footer ====== */
  .footer{padding:22px 0; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); text-align:center}
  
  /* ====== Modal ====== */
  .modal{position:fixed; inset:0; display:grid; place-items:center}
  .modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6)}
  .modal__content{position:relative; width:min(1100px, 92%); background:#0a0b14; border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:var(--shadow)}
  .modal__body{padding:12px}
  .modal__close{position:absolute; top:8px; left:8px; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; background:#131426; color:var(--text); font-size:18px}
  .modal iframe{width:100%; height:min(70vh, 680px); border:none; border-radius:12px; background:#0e0f1e}