.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-size:.95rem;font-weight:500;border-radius:100px;transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);white-space:nowrap}
.btn--solid{color:#0a0a0a;background:var(--gold)}
.btn--solid:hover{background:var(--gold-bright);transform:translateY(-2px)}
.btn__arrow{font-family:var(--font-mono);transition:transform .25s var(--ease)}
html[dir="rtl"] .btn__arrow{transform:scaleX(-1)}
.btn--solid:hover .btn__arrow{transform:translateX(4px)}
html[dir="rtl"] .btn--solid:hover .btn__arrow{transform:scaleX(-1) translateX(4px)}
.btn--ghost{color:var(--cream);border:1px solid var(--line-strong)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,169,97,.05)}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border-top:1px solid var(--line)}
.service-card{padding:38px 30px;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s var(--ease);position:relative}
.service-card:first-child{border-inline-start:none}
.service-card:hover{background:rgba(201,169,97,.03)}
.service-card__num{font-family:var(--font-mono);font-size:.72rem;color:var(--gold-dim);letter-spacing:.15em;margin-bottom:20px;display:block}
.service-card__title{font-size:1.15rem;font-weight:500;margin-bottom:10px;color:var(--cream)}
.service-card__desc{font-size:.92rem;color:var(--muted);line-height:1.7}

.filters{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap}
.filter-btn{padding:9px 20px;font-size:.85rem;color:var(--muted);border:1px solid var(--line);border-radius:100px;transition:.25s var(--ease)}
.filter-btn:hover{border-color:var(--line-strong);color:var(--cream)}
.filter-btn.is-active{background:var(--gold);color:#0a0a0a;border-color:var(--gold);font-weight:500}

.work{display:flex;flex-direction:column;gap:24px}
.case{padding:32px;border:1px solid var(--line);border-radius:20px;background:rgba(20,20,20,.3);transition:border-color .3s var(--ease),transform .3s var(--ease);display:none}
.case.show{display:block;animation:fadeIn .35s var(--ease)}
.case:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.case__cover{aspect-ratio:16/8;border-radius:14px;overflow:hidden;margin-bottom:28px;background:linear-gradient(135deg,#161616,#0a0a0a);background-size:cover;background-position:center;border:1px solid var(--line)}
.case__cover[data-project="deeni"]{background-image:linear-gradient(135deg,rgba(16,80,50,.55),transparent),linear-gradient(135deg,#0f2b1a,#0a0a0a)}
.case__cover[data-project="athkar"]{background-image:linear-gradient(135deg,rgba(120,40,180,.45),transparent),linear-gradient(135deg,#241030,#0a0a0a)}
.case__cover[data-project="education"]{background-image:linear-gradient(135deg,rgba(30,120,140,.5),transparent),linear-gradient(135deg,#0a2228,#0a0a0a)}
.case__cover[data-project="support"]{background-image:linear-gradient(135deg,rgba(30,80,160,.5),transparent),linear-gradient(135deg,#0a1a2b,#0a0a0a)}
.case__cover[data-project="store"]{background-image:linear-gradient(135deg,rgba(180,140,60,.5),transparent),linear-gradient(135deg,#2b220a,#0a0a0a)}
.case--wip .case__cover{position:relative}
.case--wip .case__cover::after{content:'قيد التطوير';position:absolute;top:16px;inset-inline-end:16px;padding:6px 14px;font-size:.72rem;font-family:var(--font-mono);color:#ffb454;background:rgba(255,180,84,.12);border:1px solid rgba(255,180,84,.4);border-radius:100px}

.case__top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.case__num{font-family:var(--font-mono);font-size:1.8rem;font-weight:500;color:transparent;-webkit-text-stroke:1px rgba(201,169,97,.5);letter-spacing:-.02em;line-height:1}
.case__type{padding:5px 14px;font-family:var(--font-mono);font-size:.72rem;color:var(--gold);background:rgba(201,169,97,.06);border:1px solid var(--line-strong);border-radius:100px}
.case__type--live{color:#7dd97a;border-color:rgba(125,217,122,.4);background:rgba(125,217,122,.06)}
.case__type--wip{color:#ffb454;border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.06)}

.case__title{font-size:clamp(1.4rem,2.3vw,1.8rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;color:var(--cream)}
.case__lead{font-size:.98rem;color:var(--muted);line-height:1.75;margin-bottom:24px}
.case__stack{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.case__stack-label{font-family:var(--font-mono);font-size:.7rem;color:var(--gold-dim);letter-spacing:.18em;text-transform:uppercase}
.case__tags{display:flex;flex-wrap:wrap;gap:8px}
.case__tags span{padding:6px 14px;font-family:var(--font-mono);font-size:.73rem;color:var(--gold);background:rgba(201,169,97,.04);border:1px solid var(--line);border-radius:100px;transition:.25s var(--ease)}
.case__tags span:hover{border-color:var(--line-strong);background:rgba(201,169,97,.1)}
.case__actions{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.case__link{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;font-size:.88rem;font-weight:500;color:var(--gold);border:1px solid var(--line-strong);border-radius:100px;transition:background .25s var(--ease),color .25s var(--ease)}
.case__link:hover{background:var(--gold);color:#0a0a0a}

.contact__mail{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:clamp(1.1rem,2.4vw,1.6rem);color:var(--gold);padding-bottom:6px;border-bottom:1px solid var(--line-strong);transition:color .25s var(--ease),border-color .25s var(--ease)}
.contact__mail:hover{color:var(--gold-bright);border-bottom-color:var(--gold)}