/* custom.css — ظل الأناقة (Production-ready)
   Safe CSS: no experimental props, no backdrop-filter reliance for core effects.
*/

/* variables */
:root{
  --gold:#C5A059;
  --gold-dark:#8E6F3E;
  --bg:#050505;
  --card:#0A0A0A;
  --muted:#9CA3AF;
  --radius:16px;
  --transition:280ms cubic-bezier(.2,.8,.2,1);
  --fs-base:16px;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Cairo", "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#fff;
  font-size:var(--fs-base);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* utility */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.text-muted{color:var(--muted)}
.rounded-lg{border-radius:var(--radius)}

/* hero */
.hero-inner { max-width:900px; margin: 0 auto; text-align:center; padding:40px 20px; }
.h-hero{ font-size:clamp(28px,5vw,56px); line-height:1.05; font-weight:900; }
.lead{ color:#d1d5db; font-size:1.125rem; }

/* gold */
.gold-text{
  background-image: linear-gradient(90deg,var(--gold),#F3E2B3 50%,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.25rem; border-radius:999px; font-weight:800;
  cursor:pointer; text-decoration:none;
}
.btn-primary{ background:var(--gold); color:#000; box-shadow:0 12px 30px rgba(197,160,89,0.14); }
.btn-ghost{ border:1px solid rgba(255,255,255,0.06); color:#fff; background:transparent; }

/* cards / grid */
.grid{display:grid; gap:1.25rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--card);
  border:1px solid rgba(212,175,55,0.06);
  border-radius:20px;
  padding:1.25rem;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:0 24px 60px rgba(0,0,0,0.6); }

/* project gallery */
.work-item{ position:relative; overflow:hidden; border-radius:18px; background:#000; height:420px; }
.work-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease; filter:grayscale(.25); }
.work-item:hover img{ transform:scale(1.04); filter:grayscale(0); }

/* overlay that slides up */
.work-overlay{
  position:absolute;
  right:0; left:0; bottom:0;
  padding:22px;
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(180deg, rgba(5,5,5,0.0), rgba(5,5,5,0.9));
  color:#fff;
}
.work-item:focus-within .work-overlay,
.work-item:hover .work-overlay{ transform:translateY(0); }

/* responsive gallery placements used in template */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .work-item{ height:260px }
}

/* reveal (scroll animations) - simple & safe */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .56s cubic-bezier(.2,.8,.2,1), transform .56s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* line clamp safe (two lines) */
.line-clamp-2{ overflow:hidden; max-height: calc(1.6em * 2); line-height:1.6; position:relative; }
.line-clamp-2::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2.4rem; background:linear-gradient(to top, rgba(5,5,5,0.9), rgba(5,5,5,0)); pointer-events:none; }

/* footer small */
.footer-note{ color:var(--muted); font-size:.9rem; }

/* sticky mobile CTA */
.mobile-cta{ position:fixed; bottom:12px; left:12px; right:12px; display:flex; gap:10px; z-index:999; }
.mobile-cta .btn{ flex:1; text-align:center; }

/* accessibility focus */
:focus{ outline:3px solid color-mix(in srgb, var(--gold) 22%, transparent); outline-offset:3px; }

/* end of file */
:root{
  --accent: #d4af37;
  --bg-dark: #050505;
  --text-default: #e5e5e5;
}

/* قواعد أساسية */
html,body{height:100%;}
body{margin:0;background:#fff;font-family:"Cairo",sans-serif;direction:rtl;color:var(--text-default);}

/* overlay */
.overlay{display:none;position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.5);z-index:40}
.overlay.active{display:block}

/* header */
.site-header{background:#fff}
.brand-accent{color:var(--accent)}

/* dropdown basic */
.desktop-dropdown .dropdown-content{display:none}
.desktop-dropdown:hover .dropdown-content{display:block}

/* mobile drawer */
#mobile-menu{transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
#mobile-menu.menu-open{transform:translateX(0)}
/* أضف بقية قواعدك هنا... */