.portfolio-archive-body { background:#f8f5fa; }
.portfolio-hero { position:relative; overflow:hidden; padding:180px 0 110px; color:#fff; background:radial-gradient(circle at 15% 25%,rgba(247,147,30,.3),transparent 24%),linear-gradient(130deg,#24112e,#662d91); }
.portfolio-hero::after { content:""; position:absolute; width:520px; height:520px; top:-280px; inset-inline-end:-80px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.035),0 0 0 140px rgba(255,255,255,.02); }
.portfolio-hero-inner { position:relative; z-index:1; max-width:850px; text-align:center; }
.portfolio-hero-inner > span { color:#f7931e; font-weight:700; }
.portfolio-hero h1 { margin:16px 0; color:#fff; text-align:center; font-size:clamp(50px,6vw,88px); }
.portfolio-hero-inner > div { color:rgba(255,255,255,.78); font-size:20px; line-height:1.9; }
.portfolio-listing { padding:100px 0 120px; }
.portfolio-listing-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:45px; }
.portfolio-listing-head span { color:#662d91; font-weight:700; }
.portfolio-listing-head h2 { max-width:700px; margin:8px 0 0; text-align:inherit; font-size:clamp(34px,4vw,52px); }
.portfolio-listing-head > strong { color:#e2d6e9; font-size:86px; line-height:.8; }
.portfolio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.portfolio-card { overflow:hidden; color:#17121a; border:1px solid #e6dce9; border-radius:28px; background:#fff; box-shadow:0 18px 45px rgba(66,34,84,.09); transition:transform .3s ease,box-shadow .3s ease; }
.portfolio-card:hover { color:#17121a; transform:translateY(-8px); box-shadow:0 30px 65px rgba(66,34,84,.17); }
.portfolio-card-media { position:relative; overflow:hidden; height:360px; background:#3c1c4d; }
.portfolio-card-media > img:first-child { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.portfolio-card:hover .portfolio-card-media > img:first-child { transform:scale(1.05); }
.portfolio-card-logo { position:absolute; top:25px; inset-inline-start:25px; width:130px; height:65px; padding:12px; object-fit:contain; border-radius:14px; background:rgba(255,255,255,.92); }
.portfolio-card-body { padding:30px; }
.portfolio-card-body > span { color:#662d91; font-size:14px; font-weight:700; }
.portfolio-card-body h3 { margin:10px 0 12px; text-align:inherit; font-size:27px; line-height:1.45; }
.portfolio-card-body p { min-height:52px; margin:0 0 24px; color:#706873; line-height:1.75; }
.portfolio-card-body > strong { display:flex; align-items:center; justify-content:space-between; color:#662d91; }
.portfolio-card-body i { display:flex; align-items:center; justify-content:center; width:42px; height:42px; color:#fff; border-radius:50%; background:#662d91; font-style:normal; font-size:22px; }
.portfolio-empty { grid-column:1/-1; padding:70px; text-align:center; border:1px dashed #d7c7df; border-radius:25px; }
.portfolio-back-link { color:#662d91; font-weight:700; }
.portfolio-back-link:hover { color:#f7931e; }
.portfolio-detail-lead { color:#000; font-size:17px; line-height:2.05; }
.portfolio-story-section { margin-bottom:52px; }
.portfolio-story-section h2 { margin:0 0 20px; font-size:30px; line-height:1.5; }
.portfolio-story-section p { margin:0 0 18px; }
.portfolio-detail-cta { padding:90px 0; color:#fff; background:#f4effa; }
.portfolio-detail-cta .container > div { padding:58px; text-align:center; border-radius:30px; background:linear-gradient(125deg,#30163e,#662d91); box-shadow:0 25px 60px rgba(60,28,79,.2); }
.portfolio-detail-cta span { color:#f7931e; font-weight:700; }
.portfolio-detail-cta h2 { margin:10px 0 26px; color:#fff; text-align:center; font-size:clamp(32px,4vw,52px); }
.portfolio-detail-cta a { display:inline-flex; padding:13px 30px; color:#17121a; border-radius:14px; background:#f7931e; font-weight:700; }
.portfolio-detail-cta a:hover { color:#fff; }
body.ltr .portfolio-listing-head,body.ltr .portfolio-card-body,body.ltr .portfolio-story-section { text-align:left; }
body.rtl .portfolio-listing-head,body.rtl .portfolio-card-body,body.rtl .portfolio-story-section { text-align:right; }
@media (max-width:991px) { .portfolio-hero { padding:145px 0 90px; } .portfolio-grid { grid-template-columns:1fr; } .portfolio-card-media { height:330px; } .portfolio-listing { padding:75px 0 90px; } }
@media (max-width:576px) { .portfolio-listing-head { align-items:start; } .portfolio-listing-head > strong { font-size:52px; } .portfolio-card-media { height:250px; } .portfolio-card-body { padding:24px; } .portfolio-detail-cta .container > div { padding:38px 20px; } }