/* Live programming projects: cards, project pages and browser preview. */
body[data-page="portfolio"] .moeen-portfolio-showcase__card--web {
  --project-type: #35f0e3;
  --project-type-soft: rgba(53, 240, 227, .13);
}
body[data-page="portfolio"] .moeen-portfolio-showcase__card--web[data-project-type="integrated"] { --project-type: #f1c965; --project-type-soft: rgba(241, 201, 101, .14); }
body[data-page="portfolio"] .moeen-portfolio-showcase__card--web[data-project-type="consulting"] { --project-type: #79e6ff; --project-type-soft: rgba(121, 230, 255, .13); }
body[data-page="portfolio"] .moeen-portfolio-showcase__card--web[data-project-type="institutional"] { --project-type: #a9e482; --project-type-soft: rgba(169, 228, 130, .13); }
body[data-page="portfolio"] .moeen-portfolio-showcase__card--web[data-project-type="quran"] { --project-type: #c5a7ff; --project-type-soft: rgba(197, 167, 255, .14); }
body[data-page="portfolio"] .moeen-portfolio-showcase__card--web[data-project-type="education"] { --project-type: #47e4d8; --project-type-soft: rgba(71, 228, 216, .13); }
body[data-page="portfolio"] .moeen-portfolio-showcase__card--web[data-project-type="store"] { --project-type: #ffbd78; --project-type-soft: rgba(255, 189, 120, .14); }
body[data-page="portfolio"] .moeen-portfolio-showcase__card--web[data-project-type="landing"] { --project-type: #ff91ae; --project-type-soft: rgba(255, 145, 174, .13); }

body[data-page="portfolio"] .moeen-portfolio-showcase__card--web .moeen-portfolio-showcase__media {
  min-height: 224px;
  background: #031018;
}
.moeen-web-card-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 22px;
  background:
    radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--project-type) 22%, transparent), transparent 35%),
    linear-gradient(145deg, #092630, #020b10 70%);
}
.moeen-web-card-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.moeen-web-card-preview__window {
  position: relative;
  width: min(100%, 310px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--project-type) 36%, transparent);
  border-radius: 17px;
  background: rgba(2, 11, 16, .9);
  box-shadow: 0 22px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05);
}
.moeen-web-card-preview__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 31px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  direction: ltr;
}
.moeen-web-card-preview__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); }
.moeen-web-card-preview__bar i:first-child { background: var(--project-type); box-shadow: 0 0 14px color-mix(in srgb, var(--project-type) 62%, transparent); }
.moeen-web-card-preview__screen { display: grid; min-height: 108px; place-items: center; padding: 20px; text-align: center; }
.moeen-web-card-preview__screen strong { display: block; color: #fff; font-size: 22px; font-weight: 900; line-height: 1.35; }
.moeen-web-card-preview__screen small { display: block; margin-top: 7px; color: var(--project-type); direction: ltr; font: 700 11px/1.4 ui-monospace, monospace; }
.moeen-portfolio-showcase__type-tag {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-end: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--project-type) 48%, transparent);
  border-radius: 999px;
  color: var(--project-type);
  background: color-mix(in srgb, #06151c 88%, var(--project-type) 12%);
  backdrop-filter: blur(10px);
  font-size: 10.5px;
  font-weight: 900;
}
.moeen-portfolio-showcase__type-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 11px currentColor; }

.moeen-live-project-page { --live-accent: #35f0e3; --live-gold: #e1b85e; color: #eefbfc; }
.moeen-live-project-hero { position: relative; overflow: hidden; padding: clamp(128px, 13vw, 178px) 0 clamp(58px, 8vw, 94px); border-bottom: 1px solid rgba(53,240,227,.1); background: radial-gradient(circle at 78% 22%, rgba(53,240,227,.12), transparent 27%), linear-gradient(145deg, #061b24, #020b10 72%); }
.moeen-live-project-hero::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000, transparent); }
.moeen-live-project-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr); gap: clamp(36px, 6vw, 86px); align-items: center; }
.moeen-live-project-hero__crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: rgba(231,247,249,.58); font-size: 12px; }
.moeen-live-project-hero__crumb a { color: inherit; text-decoration: none; }
.moeen-live-project-hero__tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.moeen-live-project-tag { display: inline-flex; min-height: 34px; align-items: center; padding: 7px 13px; border: 1px solid rgba(53,240,227,.26); border-radius: 999px; color: #67f3e9; background: rgba(53,240,227,.07); font-size: 11px; font-weight: 900; }
.moeen-live-project-tag--type { color: #f2cf78; border-color: rgba(225,184,94,.34); background: rgba(225,184,94,.08); }
.moeen-live-project-hero h1 { max-width: 780px; margin: 0; color: #fff; font-size: clamp(38px, 6vw, 72px); line-height: 1.12; font-weight: 950; letter-spacing: -.035em; }
.moeen-live-project-hero h1 span { color: var(--live-accent); }
.moeen-live-project-hero p { max-width: 720px; margin: 22px 0 0; color: rgba(229,244,247,.72); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.95; }
.moeen-live-project-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.moeen-live-project-btn { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 11px 18px; border: 1px solid rgba(53,240,227,.3); border-radius: 14px; color: #dffafa; background: rgba(53,240,227,.06); font-size: 13px; font-weight: 900; text-decoration: none; }
.moeen-live-project-btn--primary { color: #031115; border-color: transparent; background: linear-gradient(135deg, #35f0e3, #22c9bf); }
.moeen-live-project-hero__visual { position: relative; min-height: 310px; display: grid; place-items: center; }
.moeen-live-project-hero__orb { position: absolute; width: min(29vw, 310px); aspect-ratio: 1; border: 1px solid rgba(53,240,227,.25); border-radius: 50%; box-shadow: 0 0 0 38px rgba(53,240,227,.035), 0 0 0 76px rgba(53,240,227,.025); animation: moeenLivePulse 5s ease-in-out infinite; }
.moeen-live-project-hero__domain { position: relative; max-width: 300px; padding: 22px 25px; border: 1px solid rgba(225,184,94,.3); border-radius: 20px; color: #fff; background: rgba(3,14,20,.86); box-shadow: 0 20px 50px rgba(0,0,0,.24); text-align: center; }
.moeen-live-project-hero__domain strong { display: block; font-size: 24px; }
.moeen-live-project-hero__domain small { display: block; margin-top: 8px; color: #e7c76f; direction: ltr; font: 700 12px/1.4 ui-monospace, monospace; }
@keyframes moeenLivePulse { 50% { transform: scale(1.035); opacity: .72; } }

.moeen-live-preview { padding: clamp(58px, 8vw, 100px) 0; background: #020b10; }
.moeen-live-preview__head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: end; margin-bottom: 28px; }
.moeen-live-preview__eyebrow { color: #e7c76f; font-size: 11px; font-weight: 900; }
.moeen-live-preview__head h2 { margin: 7px 0 0; color: #fff; font-size: clamp(28px, 4vw, 46px); line-height: 1.25; }
.moeen-live-preview__head p { max-width: 680px; margin: 10px 0 0; color: rgba(224,241,243,.65); line-height: 1.85; }
.moeen-browser { overflow: hidden; border: 1px solid rgba(53,240,227,.2); border-radius: 24px; background: #06151c; box-shadow: 0 32px 85px rgba(0,0,0,.3); }
.moeen-browser__bar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 62px; padding: 10px 14px; border-bottom: 1px solid rgba(53,240,227,.13); background: linear-gradient(180deg, rgba(10,34,43,.98), rgba(5,21,28,.98)); direction: ltr; }
.moeen-browser__dots { display: flex; gap: 6px; }
.moeen-browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.moeen-browser__dots i:nth-child(1) { background: #ff7890; } .moeen-browser__dots i:nth-child(2) { background: #e7c76f; } .moeen-browser__dots i:nth-child(3) { background: #35f0e3; }
.moeen-browser__address { display: flex; min-width: 0; align-items: center; gap: 8px; min-height: 38px; padding: 7px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: rgba(231,248,249,.68); background: rgba(1,8,12,.55); direction: ltr; font: 650 11px/1.3 ui-monospace, monospace; text-decoration: none; }
.moeen-browser__address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moeen-browser__tools { display: flex; gap: 6px; }
.moeen-browser__tools button { width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: rgba(231,248,249,.62); background: rgba(255,255,255,.035); cursor: pointer; }
.moeen-browser__tools button[aria-pressed="true"] { color: #031115; border-color: #35f0e3; background: #35f0e3; }
.moeen-browser__stage { display: flex; justify-content: center; min-height: 680px; padding: 0; background: #01070a; transition: padding .25s ease; }
.moeen-browser__viewport { position: relative; width: 100%; min-height: 680px; overflow: hidden; background: #07141a; transition: width .28s ease, border-radius .28s ease, margin .28s ease; }
.moeen-browser__viewport::before { content: "جار تحميل الموقع…"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(231,248,249,.55); font-size: 13px; font-weight: 800; background: radial-gradient(circle, rgba(53,240,227,.08), transparent 35%), #06151c; }
.moeen-browser__viewport.is-loaded::before { display: none; }
.moeen-browser__viewport iframe { position: relative; z-index: 1; display: block; width: 100%; height: 680px; border: 0; background: #fff; }
.moeen-browser__stage[data-device="tablet"] { padding: 26px; }
.moeen-browser__stage[data-device="tablet"] .moeen-browser__viewport { width: min(100%, 820px); border-radius: 18px; }
.moeen-browser__stage[data-device="mobile"] { padding: 26px; }
.moeen-browser__stage[data-device="mobile"] .moeen-browser__viewport { width: min(100%, 390px); border-radius: 24px; }
.moeen-browser__note { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid rgba(53,240,227,.1); color: rgba(224,241,243,.58); font-size: 11.5px; }
.moeen-browser__note a { color: #e7c76f; font-weight: 900; text-decoration: none; }

.moeen-live-summary { padding: 0 0 clamp(64px, 9vw, 108px); background: #020b10; }
.moeen-live-summary__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.moeen-live-summary__card { padding: 23px; border: 1px solid rgba(53,240,227,.14); border-radius: 20px; background: linear-gradient(145deg, rgba(7,27,35,.9), rgba(3,13,19,.96)); }
.moeen-live-summary__card span { color: #e7c76f; font-size: 10.5px; font-weight: 900; }
.moeen-live-summary__card h3 { margin: 9px 0 0; color: #fff; font-size: 19px; }
.moeen-live-summary__card p { margin: 9px 0 0; color: rgba(224,241,243,.64); font-size: 13px; line-height: 1.8; }

@media (max-width: 900px) {
  .moeen-live-project-hero__grid { grid-template-columns: 1fr; }
  .moeen-live-project-hero__visual { min-height: 250px; }
  .moeen-live-preview__head { grid-template-columns: 1fr; }
  .moeen-browser__stage, .moeen-browser__viewport { min-height: 600px; }
  .moeen-browser__viewport iframe { height: 600px; }
}
@media (max-width: 640px) {
  .moeen-live-project-hero { padding-top: 112px; }
  .moeen-live-project-hero__visual { display: none; }
  .moeen-live-project-hero h1 { font-size: clamp(34px, 12vw, 48px); }
  .moeen-live-project-btn { width: 100%; }
  .moeen-browser { border-radius: 18px; }
  .moeen-browser__bar { grid-template-columns: auto minmax(0,1fr); gap: 9px; padding: 9px; }
  .moeen-browser__dots { display: none; }
  .moeen-browser__tools { gap: 4px; }
  .moeen-browser__tools button { width: 34px; height: 34px; }
  .moeen-browser__stage, .moeen-browser__stage[data-device] { min-height: 540px; padding: 0; }
  .moeen-browser__viewport, .moeen-browser__stage[data-device] .moeen-browser__viewport { width: 100%; min-height: 540px; border-radius: 0; }
  .moeen-browser__viewport iframe { height: 540px; }
  .moeen-browser__note { align-items: flex-start; flex-direction: column; }
  .moeen-live-summary__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .moeen-live-project-hero__orb { animation: none; } }
/* Card image as project hero 20260722 */
.moeen-live-project-hero__visual--cover{display:grid;min-height:310px}
.moeen-live-project-hero__cover-frame{width:100%;height:100%;min-height:310px;overflow:hidden;border:1px solid rgba(53,240,227,.22);border-radius:28px;background:#06151c;box-shadow:0 28px 75px rgba(0,0,0,.28)}
.moeen-live-project-hero__cover{display:block;width:100%;height:100%;min-height:310px;object-fit:cover}
@media(max-width:900px){.moeen-live-project-hero__visual--cover,.moeen-live-project-hero__cover-frame,.moeen-live-project-hero__cover{min-height:250px}}
@media(max-width:640px){.moeen-live-project-hero__visual--cover{display:grid!important}.moeen-live-project-hero__cover-frame,.moeen-live-project-hero__cover{min-height:210px}}