.portfolio { padding: 72px 20px; background: rgba(255,255,255,.025); }
.portfolio .section-header { max-width: 760px; margin-inline: auto; }
.portfolio .section-header > p:last-child { opacity: .8; }
.project-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.project-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.project-filters button { font: inherit; font-size: .9rem; padding: 10px 18px; min-height: 44px; border-radius: 24px; border: 1px solid var(--border-dark); background: transparent; color: inherit; cursor: pointer; }
.project-filters button[aria-pressed="true"] { background: #00b4d8; color: #071a2b; border-color: #00b4d8; font-weight: 700; }
#projectCount { opacity: .7; font-size: .9rem; }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.project-card { overflow: hidden; border: 1px solid var(--border-dark); border-radius: 18px; background: var(--card-dark); }
.project-photo { display: block; position: relative; width: 100%; aspect-ratio: 4/3; padding: 0; border: 0; background: #11182b; cursor: zoom-in; overflow: hidden; }
.project-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.project-photo:hover img { transform: scale(1.025); }
.photo-open-hint { position: absolute; inset-inline-end: 14px; bottom: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: #071a2bc9; font-size: 1.4rem; }
.project-caption { padding: 22px; }
.project-caption h3 { font-size: 1.08rem; margin-bottom: 10px; line-height: 1.4; }
.project-caption p:last-child { opacity: .8; font-size: .92rem; }
.project-category { color: #56d5ed; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; margin-bottom: 9px; }
.project-video { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 36px; align-items: center; margin-top: 48px; padding: 24px; border: 1px solid var(--border-dark); border-radius: 18px; }
.project-video video { width: 100%; max-height: 520px; background: #05070c; border-radius: 10px; display: block; }
.project-video h3 { font-size: 1.65rem; margin-bottom: 16px; }
.project-video p { opacity: .8; margin-bottom: 18px; }
.project-video a { color: #56d5ed; }
.whatsapp-contact { border: 1px solid #36ca9860; border-radius: 14px; margin-top: 24px; padding: 22px; }
.btn-whatsapp { background: #29ce82; color: #082b1b; box-shadow: none; justify-content: center; }
.btn-whatsapp:hover { background: #69e7ab; }
.whatsapp-contact p { margin-top: 14px; font-size: .9rem; opacity: .8; }
.direct-contact .whatsapp-link { color: #62dda4; }
.viewer-open { overflow: hidden; }
.project-viewer { color: #f3f6fa; background: #10152b; border: 1px solid #ffffff30; border-radius: 18px; width: min(960px,94vw); max-height: 94dvh; padding: 20px; margin: auto; overflow: auto; }
.project-viewer::backdrop { background: #020614e8; }
.viewer-toolbar, .viewer-navigation { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.viewer-toolbar { margin-bottom: 14px; }
.viewer-toolbar button, .viewer-navigation button { min-height: 44px; padding: 8px 16px; color: inherit; background: #ffffff10; border: 1px solid #ffffff30; border-radius: 8px; cursor: pointer; font: inherit; }
.viewer-frame { margin: 0 auto; width: fit-content; max-width: 100%; }
.viewer-frame img { display: block; max-height: 60dvh; max-width: 100%; width: auto; height: auto; margin-inline: auto; }
.viewer-frame--screenshot { overflow: hidden; aspect-ratio: 739/986; width: min(86vw,calc(60dvh * 739 / 986)); }
.viewer-frame--screenshot img { width: 100%; height: auto; max-height: none; transform: translateY(-19.1875%); }
.viewer-caption { margin: 16px 0; }
.viewer-caption h3 { margin-bottom: 8px; }
.viewer-caption p { opacity: .85; font-size: .95rem; }
body.light .portfolio { background: #f1f5f9; }
body.light .project-card { background: #fff; border-color: #d4dce7; }
body.light .project-filters button, body.light .project-video { border-color: #bcc8d6; }
body.light .project-category, body.light .project-video a { color: #006b82; }
body.light .direct-contact .whatsapp-link { color: #096b43; }
html[lang="ar"] .project-category { letter-spacing: 0; }
@media(max-width:1000px) { .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
    .portfolio { padding: 56px 0; }
    .project-grid, .project-video { grid-template-columns: minmax(0,1fr); }
    .project-video { gap: 24px; padding: 16px; }
    .project-caption { padding: 20px; }
    .project-filters button { padding: 9px 13px; font-size: .84rem; }
    .project-viewer { padding: 14px; }
    .viewer-navigation button { font-size: .82rem; padding: 8px 10px; }
}
@media(prefers-reduced-motion:reduce) { .project-photo img { transition: none; } }

.project-video video { width: min(100%,290px); height: auto; margin-inline: auto; } .whatsapp-contact { margin-bottom: 24px; }