/* ============ TOKENS ============ */
:root{
  --bg:#070B14;
  --surface:#0D1424;
  --surface-2:#111A2E;
  --line:#1E2A44;
  --text:#EEF1F7;
  --muted:#8B96AB;
  --teal:#00E6C3;
  --violet:#7C5CFC;
  --teal-dim: rgba(0,230,195,.12);
  --violet-dim: rgba(124,92,252,.14);
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --display-ar: 'Cairo', sans-serif;
  --body-ar: 'Tajawal', sans-serif;
  --radius: 16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
  transition:font-family .1s;
}
body.lang-ar{ font-family: var(--body-ar); }
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar .logo{ font-family: var(--display-ar); }
body.lang-ar .eyebrow, body.lang-ar .hero-role, body.lang-ar .hero-contacts small,
body.lang-ar .exp-date, body.lang-ar .cert-issuer, body.lang-ar .cert-open,
body.lang-ar .proj-tag, body.lang-ar .modal-eyebrow, body.lang-ar .eyebrow-lined, body.lang-ar .exp-label,
body.lang-ar .exp-badge, body.lang-ar .exp-tags,
body.lang-ar .spec-row span:first-child, body.lang-ar .info-card-x .lbl, body.lang-ar .skill-item span{ font-family: var(--body-ar); }
body.lang-ar p, body.lang-ar li, body.lang-ar .test-quote, body.lang-ar .exp-desc,
body.lang-ar .about-copy, body.lang-ar .contact-info-sub, body.lang-ar .sec-sub, body.lang-ar .info-card-x,
body.lang-ar .cert-meta, body.lang-ar .exp-role, body.lang-ar .proj-body{ direction: rtl; text-align: right; }
body.lang-ar .hero-contacts, body.lang-ar .keywords, body.lang-ar .about-tags,
body.lang-ar .social-row, body.lang-ar .cat-cards, body.lang-ar .nav-links{ direction: rtl; }
body.lang-ar .btn{ direction: rtl; }
body.lang-ar .exp-card-top{ direction: rtl; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--teal); color:#04110D;}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--teal);}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
section{position:relative; padding:120px 0; scroll-margin-top:90px;}
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.01em;}
.sec-title{font-size:clamp(1.8rem,3.2vw,2.6rem); margin-bottom:12px;}
.sec-sub{color:var(--muted); max-width:560px; margin-bottom:56px; font-size:.98rem;}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(7,11,20,.65);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1240px; margin:0 auto; gap:18px;}
body.lang-ar .nav{flex-direction:row-reverse;}
body.lang-ar .nav-links{flex-direction:row-reverse;}
body.lang-ar .nav-utils{flex-direction:row-reverse;}
.nav-brand{
  width:38px; height:38px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.78rem; color:var(--teal); flex-shrink:0;
}
.logo{font-family:var(--display); font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:8px;}
.logo .dot{width:8px; height:8px; border-radius:2px; background:var(--teal); box-shadow:0 0 12px var(--teal); transform:rotate(45deg);}
.nav-links{display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--muted);}
.nav-links a{padding:9px 14px; border-radius:999px; transition:.2s;}
.nav-links a:hover{color:var(--teal);}
.nav-links a{position:relative;}
.nav-links a.active{color:var(--teal);}
.nav-links a.active::after{content:"";position:absolute;inset-inline:14px;bottom:3px;height:2px;border-radius:2px;background:var(--teal);}
.nav-utils{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--muted); transition:.2s; flex-shrink:0;
}
.icon-btn:hover{color:var(--teal); border-color:var(--teal);}
.nav-cta{
  border:1px solid var(--teal); background:var(--teal); color:#04110D; padding:10px 20px; border-radius:999px; font-size:.85rem; font-weight:600;
  transition:.25s; white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 10px 22px -8px var(--teal-dim);}
.lang-toggle{
  border:1px solid var(--line); color:var(--text); padding:9px 14px; border-radius:999px; font-size:.78rem; font-family:var(--mono);
  transition:.25s; background:var(--surface); white-space:nowrap; flex-shrink:0;
}
.lang-toggle:hover{border-color:var(--violet); color:var(--violet);}
.nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:1.4rem;}
@media(max-width:980px){
  .nav-links{position:fixed; top:66px; left:0; right:0; background:var(--surface); flex-direction:column !important; align-items:flex-start; padding:24px 32px; gap:10px; border-bottom:1px solid var(--line); transform:translateY(-140%); transition:.3s; z-index:99;}
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:block;}
  .nav-utils .nav-cta{display:none;}
}

/* ============ HERO ============ */
.hero{
  min-height:100vh; display:flex; align-items:center; padding-top:90px;
  background:
    radial-gradient(600px 400px at 85% 20%, var(--violet-dim), transparent 60%),
    radial-gradient(700px 500px at 10% 80%, var(--teal-dim), transparent 60%);
}
.hero-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; width:100%;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr; text-align:center;}}

/* phone visual */
.phone-stage{position:relative; height:620px; display:flex; align-items:center; justify-content:center;}
.phone{
  width:250px; height:520px; border-radius:38px; background:linear-gradient(160deg,#0F1830,#080D18);
  border:2px solid #223055; position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 50px 90px -20px rgba(0,230,195,.16);
  z-index:3; animation:phone-float 4.5s ease-in-out infinite;
}
@keyframes phone-float{0%,100%{transform:translateY(0) rotate(0deg);} 30%{transform:translateY(-10px) rotate(-.5deg);} 55%{transform:translateY(-18px) rotate(.7deg);} 80%{transform:translateY(-6px) rotate(-.3deg);}}
.phone::before{content:''; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:60px; height:6px; border-radius:4px; background:#1c2946; z-index:2;}
.phone-screen{position:absolute; inset:9px; border-radius:30px; background:linear-gradient(200deg,#0B1220,#050810); overflow:hidden; padding:26px 14px 12px; display:flex; flex-direction:column;}
.app-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.app-top .app-name{font-family:var(--display); font-size:.86rem; font-weight:600; color:var(--text);}
.app-toggle{width:34px; height:19px; border-radius:999px; background:var(--teal); position:relative; flex-shrink:0;}
.app-toggle::after{content:''; position:absolute; top:2px; right:2px; width:15px; height:15px; border-radius:50%; background:#04110D;}
.app-search{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-bottom:12px;}
.app-search .ico{width:16px; height:16px; border-radius:5px; border:1.5px solid var(--teal); flex-shrink:0;}
.app-search span{font-size:.68rem; color:var(--muted);}
.app-tabs{display:flex; gap:6px; margin-bottom:14px;}
.app-tab{font-size:.64rem; padding:6px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); font-family:var(--body);}
.app-tab.active{background:var(--teal); color:#04110D; border-color:var(--teal); font-weight:600;}
.app-list{display:flex; flex-direction:column; gap:10px; flex:1;}
.app-list-item{display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px;}
.app-icon-sq{width:32px; height:32px; border-radius:8px; background:linear-gradient(150deg,var(--teal-dim),var(--violet-dim)); flex-shrink:0; position:relative;}
.app-icon-sq::after{content:''; position:absolute; inset:8px; border-radius:4px; background:var(--surface);}
.app-list-lines{flex:1; display:flex; flex-direction:column; gap:5px;}
.app-list-lines .l1{height:6px; width:70%; border-radius:3px; background:var(--line);}
.app-list-lines .l2{height:6px; width:40%; border-radius:3px; background:var(--line); opacity:.6;}
.app-badge{font-size:.56rem; font-family:var(--mono); color:var(--teal); display:flex; align-items:center; gap:4px; flex-shrink:0;}
.app-badge .gdot{width:5px; height:5px; border-radius:50%; background:var(--teal);}
.app-bottom{display:flex; justify-content:space-around; padding-top:12px; border-top:1px solid var(--line); margin-top:10px;}
.app-bnav-item{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:.56rem; color:var(--muted);}
.app-bnav-item .sq{width:16px; height:16px; border-radius:5px; border:1.5px solid var(--muted);}
.app-bnav-item.active{color:var(--teal);}
.app-bnav-item.active .sq{border-color:var(--teal); box-shadow:0 0 8px var(--teal-dim);}

.chip{
  position:absolute; z-index:6; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; background:rgba(13,20,36,.92);
  border:1px solid var(--line); backdrop-filter:blur(6px); font-size:.76rem; color:var(--text);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.7); white-space:nowrap; pointer-events:none;
  animation:floaty 6s ease-in-out infinite;
}
.chip .ic{width:16px; height:16px; flex-shrink:0; color:var(--teal);}
.chip:nth-child(odd) .ic{color:var(--violet);}
.chip-l1{top:6%; left:12%; animation:floaty-a 3.6s ease-in-out infinite;}
.chip-l2{top:32%; left:4%; animation:floaty-b 4.4s ease-in-out infinite; animation-delay:.5s;}
.chip-l3{top:58%; left:10%; animation:floaty-a 3.9s ease-in-out infinite; animation-delay:1.1s;}
.chip-l4{top:82%; left:18%; animation:floaty-c 4.1s ease-in-out infinite; animation-delay:.3s;}
.chip-r1{top:14%; right:10%; animation:floaty-c 3.7s ease-in-out infinite; animation-delay:.9s;}
.chip-r2{top:40%; right:2%; animation:floaty-b 4.6s ease-in-out infinite; animation-delay:1.6s;}
.chip-r3{top:64%; right:8%; animation:floaty-a 4.2s ease-in-out infinite; animation-delay:.2s;}
.chip-r4{top:88%; right:16%; animation:floaty-b 3.8s ease-in-out infinite; animation-delay:1.4s;}
@media(max-width:1100px){.chip-l2,.chip-r2{display:none;}}
@media(max-width:950px){.chip{display:none;}}
@keyframes floaty-a{0%,100%{transform:translate(0,0);} 30%{transform:translate(3px,-10px);} 65%{transform:translate(-2px,-16px);}}
@keyframes floaty-b{0%,100%{transform:translate(0,0);} 35%{transform:translate(-4px,-14px);} 70%{transform:translate(3px,-8px);}}
@keyframes floaty-c{0%,100%{transform:translate(0,0);} 40%{transform:translate(4px,-16px);} 75%{transform:translate(-3px,-6px);}}
.stage-ring{position:absolute; width:460px; height:460px; border:1px dashed var(--line); border-radius:50%; animation:spin 26s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.hero-copy .greet{color:var(--muted); font-size:1rem; margin-bottom:10px; display:block;}
.hero-copy h1{font-size:clamp(2.6rem,5.6vw,4.2rem); line-height:1.05; margin-bottom:10px;}
.hero-role{font-family:var(--display); font-weight:600; font-size:1.3rem; margin-bottom:22px; min-height:1.6em;}
.hero-role #roleText{background:linear-gradient(90deg,var(--teal),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.role-cursor{display:inline-block; color:var(--teal); margin-inline-start:2px; animation:cursor-blink 1s step-end infinite;}
@keyframes cursor-blink{0%,100%{opacity:1;} 50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){.role-cursor{display:none;}}
.hero-copy p.desc{color:var(--muted); max-width:480px; margin-top:26px; margin-bottom:48px; font-size:.98rem;}
@media(max-width:900px){.hero-copy p.desc{margin-inline:auto;}}
.hero-actions{display:flex; gap:14px; margin-bottom:44px;}
@media(max-width:900px){.hero-actions{justify-content:center;}}
.btn{padding:14px 26px; border-radius:10px; font-size:.9rem; font-weight:500; transition:.25s; display:inline-flex; align-items:center; gap:8px;}
.btn-solid{background:var(--teal); color:#04110D; font-weight:600;}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 12px 24px -8px var(--teal-dim);}
.btn-ghost{border:1px solid var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--violet); color:var(--violet);}
.btn .arrow{transition:.2s;}
body.lang-ar .btn .arrow{transform:scaleX(-1);}
.stats-row{display:flex; gap:44px; margin-top:16px;}
@media(max-width:900px){.stats-row{justify-content:center; gap:30px;}}
.stat b{display:block; font-family:var(--display); font-size:1.7rem; color:var(--text);}
.stat span{font-size:.78rem; color:var(--muted);}
body.lang-ar .hero-copy{text-align:right;}
body.lang-ar .hero-actions{flex-direction:row-reverse; justify-content:flex-end;}
@media(max-width:900px){ body.lang-ar .hero-copy{text-align:center;} body.lang-ar .hero-actions{justify-content:center;} }

/* ============ ABOUT ============ */
.eyebrow-lined{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:26px; color:var(--teal); font-size:.8rem; letter-spacing:.1em;}
.eyebrow-lined .ln{width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--line));}
.eyebrow-lined .ln.r{background:linear-gradient(90deg,var(--line),transparent);}

.about-grid{display:grid; grid-template-columns:0.75fr 1.25fr; gap:56px; align-items:start;}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;}}
.about-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; max-width:400px; margin:0 auto;}
.about-avatar{width:128px; height:128px; border-radius:50%; margin:0 auto 20px; overflow:hidden; border:2px solid var(--teal); box-shadow:0 0 0 6px var(--teal-dim); display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--surface-2),var(--surface));}
.about-avatar span{font-family:var(--display); font-size:2.4rem; color:var(--teal);}
.info-list{display:flex; flex-direction:column;}
.info-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0; border-top:1px solid var(--line);}
.info-row .val{font-size:.92rem; font-weight:500;}
.info-row .lbl{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.72rem;}
.info-row .lbl .row-ic{width:30px; height:30px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--teal); flex-shrink:0;}
.info-row .lbl .row-ic svg{width:14px; height:14px;}

.about-copy h2{font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:22px; line-height:1.35;}
.about-copy h2 .grad{background:linear-gradient(90deg,var(--teal),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.about-copy p{color:var(--muted); margin-bottom:16px; font-size:.95rem;}
.exp-label{font-size:.8rem; color:var(--text); margin:24px 0 14px; padding-top:20px; border-top:1px solid var(--line);}
.about-tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px;}
.about-tags span{font-size:.78rem; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text);}
.about-actions{display:flex; gap:14px;}
@media(max-width:860px){.about-actions{justify-content:center;} .about-copy{text-align:center;} .about-tags{justify-content:center;} .exp-label{text-align:center;}}
body.lang-ar .about-actions{flex-direction:row-reverse; justify-content:flex-end;}
@media(max-width:860px){body.lang-ar .about-actions{justify-content:center;}}

/* ============ TIMELINE ============ */
.exp-title{font-size:clamp(1.8rem,3.4vw,2.7rem); margin-bottom:56px; line-height:1.3;}
.exp-title .grad{background:linear-gradient(90deg,var(--teal),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}

.exp-track{position:relative;}
.exp-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible;}
.exp-path-bg{fill:none; stroke:var(--line); stroke-width:2;}
.exp-path-fg{fill:none; stroke:var(--teal); stroke-width:2.5; filter:drop-shadow(0 0 6px var(--teal-dim));}

.exp-row{position:relative; z-index:1; display:grid; grid-template-columns:1fr 140px 1fr; align-items:center; margin-bottom:64px;}
.exp-row:last-child{margin-bottom:0;}
.exp-marker{grid-column:2; width:52px; height:52px; border-radius:50%; background:var(--surface); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); box-shadow:0 0 0 6px var(--bg); justify-self:center; transform:scale(.6); opacity:.75; transition:transform .5s cubic-bezier(.2,.8,.3,1.2), border-color .5s ease, color .5s ease, box-shadow .5s ease, opacity .5s ease;}
.exp-marker.lit{border-color:var(--teal); color:var(--teal); box-shadow:0 0 0 6px var(--bg), 0 0 20px -4px var(--teal-dim); transform:scale(1); opacity:1;}
.exp-marker svg{width:20px; height:20px;}
.exp-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:.3s; max-width:440px;}
.exp-row.left .exp-card{grid-column:1; justify-self:end; margin-inline-end:24px;}
.exp-row.right .exp-card{grid-column:3; justify-self:start; margin-inline-start:24px;}
.exp-row:hover .exp-card{border-color:var(--teal); transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(0,230,195,.16);}
.exp-card-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.exp-badge{font-size:.68rem; padding:5px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted);}
.exp-role{font-family:var(--display); font-weight:600; font-size:1.05rem;}
.exp-date{font-size:.76rem; color:var(--muted); margin-bottom:14px;}
.exp-desc{font-size:.86rem; color:var(--muted); margin-bottom:16px;}
.exp-tags{display:flex; flex-wrap:wrap; gap:8px;}
.exp-tags span{font-size:.7rem; padding:5px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--text);}
@media(max-width:820px){
  .exp-row{grid-template-columns:44px 1fr; margin-bottom:44px;}
  .exp-marker{grid-column:1; justify-self:start;}
  .exp-row.left .exp-card, .exp-row.right .exp-card{grid-column:2; justify-self:stretch; margin-inline:0 0; margin-inline-start:14px; max-width:none;}
}

/* ============ SKILLS PANEL ============ */
.skills-title{font-size:clamp(1.8rem,3.4vw,2.7rem); text-align:center; margin-bottom:14px;}
.skills-title .grad{background:linear-gradient(90deg,var(--teal),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.skills-sub{color:var(--muted); text-align:center; max-width:560px; margin:0 auto 44px; font-size:.98rem;}
.skills-panel{border:1px solid var(--line); border-radius:22px; background:var(--surface); padding:30px 0; position:relative; overflow:hidden;}
.skills-panel::before,.skills-panel::after{content:''; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;}
.skills-panel::before{left:0; background:linear-gradient(90deg,var(--surface),transparent);}
.skills-panel::after{right:0; background:linear-gradient(270deg,var(--surface),transparent);}
.skills-row{display:flex; gap:16px; width:max-content; padding:0 22px; animation:skills-scroll 28s linear infinite;}
.skills-panel:hover .skills-row{animation-play-state:paused;}
@keyframes skills-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.skill-item{flex:0 0 96px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; cursor:default;}
.skill-icon{width:64px; height:64px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:.25s;}
.skill-icon svg{width:26px; height:26px;}
.skill-item:hover .skill-icon{border-color:var(--teal); transform:translateY(-4px); box-shadow:0 14px 26px -12px var(--teal-dim);}
.skill-item span{font-size:.72rem; color:var(--muted);}
.skill-item:hover span{color:var(--text);}
/* ============ PROJECTS GRID ============ */
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin-inline:auto;}
@media(max-width:900px){.proj-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.proj-grid{grid-template-columns:1fr;}}
.proj-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:visible; cursor:pointer;
  transition:.3s;
}
.proj-card:hover{transform:translateY(-6px); border-color:var(--violet); box-shadow:0 24px 44px -18px rgba(124,92,252,.25);}
.proj-mock{background:linear-gradient(160deg,#EEF0F7,#F9FAFC); border-radius:16px 16px 0 0; padding:14px 12px 12px; position:relative; min-height:96px; display:flex; align-items:center; justify-content:center; overflow:visible;}
.proj-mock-img{width:100%; height:128px; border-radius:12px; overflow:hidden; background:#0B1220; position:relative; z-index:1; box-shadow:0 16px 30px -18px rgba(20,25,40,.45);}
.proj-mock-img img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .35s ease;}
.proj-card:hover .proj-mock-img img{transform:scale(1.04);}
.proj-status{position:absolute; top:10px; inset-inline-end:12px; font-size:.6rem; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid transparent; z-index:2;}
.proj-status.st-production{background:rgba(16,185,129,.12); color:#059669; border-color:rgba(16,185,129,.3);}
.proj-status.st-progress{background:rgba(245,158,11,.14); color:#B45309; border-color:rgba(245,158,11,.32);}
.proj-status.st-beta{background:rgba(245,158,11,.14); color:#B45309; border-color:rgba(245,158,11,.32);}
.proj-status.st-personal{background:rgba(124,92,252,.12); color:#6D4FE0; border-color:rgba(124,92,252,.3);}
.mock-laptop{width:62%; position:relative;}
.mock-laptop .screen{background:#0B1220; border-radius:8px 8px 0 0; padding:9px; aspect-ratio:16/10; box-shadow:0 20px 34px -18px rgba(20,25,40,.35);}
.mock-laptop .screen .bar{height:5px; border-radius:3px; background:#233052; margin-bottom:6px;}
.mock-laptop .screen .bar.accent{background:var(--teal); width:40%; opacity:.8;}
.mock-laptop .base{height:7px; background:#D7DAE3; border-radius:0 0 5px 5px; margin:0 -8px;}
.mock-phone{position:absolute; inset-inline-start:12%; bottom:8px; width:40px; height:76px; background:#0B1220; border-radius:10px; border:2.5px solid #1c2946; box-shadow:0 12px 22px -12px rgba(20,25,40,.4);}
.mock-phone .pscreen{position:absolute; inset:4px; border-radius:8px; background:linear-gradient(160deg,#101A30,#0A1120);}
.proj-logo-badge{position:absolute; inset-inline-start:14px; bottom:-16px; width:42px; height:42px; border-radius:11px; overflow:hidden; background:var(--surface); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; font-size:.7rem; box-shadow:0 10px 20px -8px rgba(0,0,0,.5); border:2px solid var(--surface); z-index:3;}
.proj-body-x{padding:16px 14px 12px; border-radius:0 0 var(--radius) var(--radius);}
.proj-platforms{display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap;}
.proj-platforms span{font-size:.62rem; padding:3px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted);}
.proj-body-x h3{font-size:.9rem; margin-bottom:2px;}
.proj-type-x{color:var(--muted); font-size:.72rem; margin-bottom:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.proj-tech-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.proj-tech-row span{font-size:.62rem; padding:3px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--text);}
.proj-tech-row span.featured{background:var(--teal-dim); color:var(--teal); border-color:transparent; font-weight:700;}
.proj-view-link{display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--text); font-weight:500;}
.proj-view-link svg{transition:.2s;}
.proj-card:hover .proj-view-link svg{transform:translateX(4px);}
body.lang-ar .proj-view-link svg{transform:scaleX(-1);}
body.lang-ar .proj-card:hover .proj-view-link svg{transform:scaleX(-1) translateX(4px);}
.proj-viewall-wrap{display:flex; justify-content:center; margin-top:44px;}
.proj-viewall{display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:.9rem; font-weight:500; transition:.25s;}
.proj-viewall:hover{border-color:var(--teal); color:var(--teal);}
.proj-viewall svg{transition:.2s;}
body.lang-ar .proj-viewall svg{transform:scaleX(-1);}

/* ============ PROJECT MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(4,6,12,.8); backdrop-filter:blur(6px); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:26px; opacity:0; pointer-events:none; transition:.3s;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal{
  background:var(--surface); border:1px solid var(--line); border-radius:20px; max-width:1040px; width:100%; max-height:88vh;
  overflow-y:auto; padding:40px; position:relative; transform:translateY(20px); transition:.3s;
}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-close{position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); color:var(--text); font-size:1.1rem;}
body.lang-ar .modal-close{right:auto; left:20px;}
.modal-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px;}
@media(max-width:800px){.modal-grid{grid-template-columns:1fr;}}
.modal-eyebrow{font-family:var(--mono); color:var(--violet); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;}
.app-frame{width:210px; height:420px; margin:0 auto 22px; border-radius:28px; border:2px solid #223055; background:linear-gradient(160deg,#0F1830,#080D18); position:relative; overflow:hidden;}
.app-frame .scr{position:absolute; inset:8px; border-radius:22px; background:linear-gradient(200deg,#0B1220,#050810);}
.frame-nav{display:flex; justify-content:space-between; align-items:center; margin-top:14px;}
.frame-nav button{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--text);}
.frame-nav button:hover{border-color:var(--teal); color:var(--teal);}
.cat-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px;}
.cat-card{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px; text-align:center; font-size:.72rem; color:var(--muted); font-family:var(--mono);}
.spec-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:.85rem;}
.spec-row span:first-child{color:var(--muted); font-family:var(--mono); font-size:.72rem; text-transform:uppercase;}
.feat-list{list-style:none; margin-top:20px; display:grid; gap:10px;}
.feat-list li{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-size:.85rem; display:flex; gap:10px;}
.feat-list li::before{content:'▸'; color:var(--teal);}
body.lang-ar .feat-list li::before{content:'◂';}

/* ============ CERTIFICATES ============ */
.cert-showcase{display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:start;}
@media(max-width:820px){.cert-showcase{grid-template-columns:1fr;}}
.cert-thumbs{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:560px){.cert-thumbs{grid-template-columns:repeat(3,1fr); gap:10px;}}
.cert-thumb{
  aspect-ratio:4/3; border-radius:12px; border:2px solid var(--line); background:var(--surface-2);
  cursor:pointer; overflow:hidden; position:relative; transition:.25s; padding:6px; display:block; width:100%;
}
.cert-thumb:hover{border-color:var(--teal); transform:translateY(-2px);}
.cert-thumb.active{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-dim), 0 14px 26px -12px var(--teal-dim);}
.cert-thumb img{width:100%; height:100%; object-fit:cover; object-position:center; border-radius:6px; background:#0B1220; display:block; transition:transform .3s ease;}
.cert-thumb:hover img{transform:scale(1.05);}
.cert-preview{
  border:1px solid var(--line); border-radius:22px; padding:16px;
  background:linear-gradient(160deg, rgba(0,230,195,.07), rgba(124,92,252,.05));
  box-shadow:0 40px 70px -30px rgba(0,230,195,.18);
}
.cert-shot{
  background:linear-gradient(200deg,#0B1220,#050810); border:1px solid var(--line);
  border-radius:14px; padding:14px;
}
.cert-shot img{
  width:100%; aspect-ratio:1.41/1; object-fit:contain; object-position:center;
  border-radius:8px; display:block; background:#050810; transition:opacity .25s ease;
}
.cert-meta{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:16px;}
.cert-meta-txt{min-width:0;}
.cert-issuer{
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal);
}
.cert-meta h3{font-size:clamp(1rem,1.6vw,1.15rem); margin:6px 0 4px;}
.cert-date{display:block; font-size:.78rem; color:var(--muted);}
.cert-open{
  padding:11px 20px; border-radius:999px; font-size:.8rem; white-space:nowrap;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  display:inline-flex; align-items:center; gap:8px; transition:.25s;
}
.cert-open:hover{border-color:var(--teal); color:var(--teal);}
.cert-open svg{transition:.2s;}
body.lang-ar .cert-open svg{transform:scaleX(-1);}

/* ============ TESTIMONIALS ============ */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:900px){.test-grid{grid-template-columns:1fr;}}
.test-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.stars{color:var(--teal); font-size:.85rem; margin-bottom:14px; letter-spacing:2px;}
.test-quote{font-size:.9rem; color:var(--text); margin-bottom:22px; line-height:1.7;}
.test-person{display:flex; align-items:center; gap:12px;}
.test-avatar{width:42px; height:42px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:.85rem; color:var(--violet); flex-shrink:0;}
.test-person b{display:block; font-size:.85rem;}
.test-person small{color:var(--muted); font-size:.74rem;}

/* ============ CONTACT (form removed — heading, intro and clickable contact info only) ============ */
.contact-grid{display:grid; gap:44px; align-items:start;}
.contact-info-sub{color:var(--muted); font-size:.92rem; margin-bottom:24px; max-width:480px;}
.contact-info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:1000px){.contact-info-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.contact-info-grid{grid-template-columns:1fr;}}
.info-card-x{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 16px; text-align:center; transition:.25s;}
.info-card-x:hover{border-color:var(--teal);}
.info-card-x .lbl{display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:.76rem; margin-bottom:10px;}
.info-card-x .lbl svg{width:15px; height:15px; flex-shrink:0;}
.info-card-x .val{font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

footer{border-top:1px solid var(--line); padding:34px 0; font-size:.8rem; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}
footer a:hover{color:var(--teal);}

.modal .keywords{display:flex;flex-wrap:wrap;gap:8px;}
.modal .keywords span{padding:4px 12px;border:1px solid var(--line, rgba(255,255,255,.12));border-radius:999px;font-size:.78rem;}

.exp-bullets{margin:10px 0 14px;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px;}

.about-avatar img{width:100%;height:100%;object-fit:cover;display:block;}

.proj-logo-badge img{width:100%; height:100%; object-fit:cover; display:block;}

/* ============ PROJECT CARD AS LINK ============ */
a.proj-card{display:block; color:inherit;}
a.proj-card:focus-visible{outline:2px solid var(--teal); outline-offset:4px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* ============ PROJECT DETAILS ============ */
.pd{display:block;}
.pd section{padding:70px 0;}
.pd .wrap{max-width:1240px;}
.pd-head{margin-bottom:34px;}
.pd-eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.pd-eyebrow::before{content:''; width:24px; height:1px; background:var(--teal); flex-shrink:0;}
.pd-eyebrow.pd-center{justify-content:center;}
.pd-eyebrow.pd-center::before{display:none;}
.pd-h2{font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.25;}
.pd-h2 .grad{background:linear-gradient(90deg,var(--teal),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.pd-lead{color:var(--muted); font-size:.97rem; max-width:640px; margin-top:14px;}
.pd-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
.pd-actions.pd-center{justify-content:center;}
.pd-center{justify-content:center;}

/* hero */
.pd .pd-hero{
  padding:150px 0 66px;
  background:
    radial-gradient(700px 420px at 88% 8%, var(--violet-dim), transparent 62%),
    radial-gradient(620px 420px at 6% 78%, var(--teal-dim), transparent 62%);
  border-bottom:1px solid var(--line);
}
.pd-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:32px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em;
  color:var(--muted); background:var(--surface); border:1px solid var(--line);
  padding:9px 16px; border-radius:999px; transition:.25s;
}
.pd-back:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-1px);}
.pd-back svg{transition:.2s;}
body.lang-ar .pd-back svg{transform:scaleX(-1);}
.pd-hero-top{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.pd-hero-icon{
  width:72px; height:72px; border-radius:18px; object-fit:cover; display:block;
  border:1px solid var(--line); background:var(--surface);
  box-shadow:0 16px 30px -16px rgba(0,0,0,.55); flex-shrink:0;
}
.pd-hero-copy{min-width:0;}
.pd-badge{
  display:inline-flex; align-items:center; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; border:1px solid transparent;
}
.pd-badge.st-personal{background:var(--violet-dim); color:#A895FF; border-color:rgba(124,92,252,.4);}
.pd-badge.st-production{background:rgba(16,185,129,.12); color:#34D399; border-color:rgba(16,185,129,.35);}
.pd-badge.st-progress,.pd-badge.st-beta{background:rgba(245,158,11,.14); color:#FBBF24; border-color:rgba(245,158,11,.35);}
.pd-title{font-size:clamp(2.3rem,5.6vw,3.9rem); line-height:1.06; margin:18px 0 10px; overflow-wrap:break-word;}
.pd-sub{color:var(--muted); font-size:clamp(1rem,1.6vw,1.15rem); margin-bottom:22px;}
.pd-tags{display:flex; flex-wrap:wrap; gap:8px;}
.pd-tags span{
  font-family:var(--mono); font-size:.72rem; padding:7px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
}
.pd .pd-hero .pd-actions{margin-top:30px;}

/* showcase */
.pd-showcase{border-bottom:1px solid var(--line);}
.pd-showcase-grid{display:grid; grid-template-columns:minmax(320px,470px) 1fr; gap:56px; align-items:center;}
.pd-gallery{position:relative; display:flex; flex-direction:column; align-items:center;}
.pd-phone{
  position:relative; width:min(335px,100%); aspect-ratio:9/19; padding:11px;
  border-radius:46px; background:linear-gradient(155deg,#1B2542,#0B1220 46%,#070B14);
  border:1px solid #2A3760;
  box-shadow:0 0 0 2px rgba(255,255,255,.03) inset, 0 46px 82px -30px rgba(0,0,0,.95);
}
.pd-phone::after{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:0 0 86px -20px var(--pc); opacity:.42; pointer-events:none;
}
.pd-phone-btn{position:absolute; width:3px; background:linear-gradient(180deg,#2B3859,#131B2E);}
.pd-phone-btn.v1{left:-3px; top:112px; height:30px; border-radius:3px 0 0 3px;}
.pd-phone-btn.v2{left:-3px; top:154px; height:52px; border-radius:3px 0 0 3px;}
.pd-phone-btn.p1{right:-3px; top:150px; height:76px; border-radius:0 3px 3px 0;}
.pd-phone-screen{
  position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden;
  background:linear-gradient(200deg,#0B1220,#050810);
  display:flex; align-items:center; justify-content:center; padding:26px 8px 18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}
.pd-phone-island{position:absolute; top:7px; left:50%; transform:translateX(-50%); width:30%; height:20px; border-radius:999px; background:#04060C; z-index:3;}
.pd-phone-home{position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:34%; height:4px; border-radius:999px; background:rgba(238,241,247,.34); z-index:3;}
.pd-phone-screen img{width:100%; height:100%; object-fit:contain; object-position:center; border-radius:24px; transition:opacity .3s ease, transform .3s ease;}
.pd-phone-screen img.pd-slide-enter{animation:pd-slide-in .28s ease both;}
@keyframes pd-slide-in{
  from{opacity:0; transform:translateX(12px) scale(.985);}
  to{opacity:1; transform:translateX(0) scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .pd-phone-screen img{transition:none;}
  .pd-phone-screen img.pd-slide-enter{animation:none;}
}
.pd-shot-fallback{
  position:relative; z-index:1; font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,6vw,3.4rem); color:var(--pc); opacity:.9; letter-spacing:.04em;
}
.pd-thumbs{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; justify-content:center;}
.pd-thumb{
  width:78px; height:78px; padding:9px; border-radius:13px; background:var(--surface);
  border:1px solid var(--line); cursor:pointer; overflow:hidden; transition:.25s;
}
.pd-thumb img{width:100%; height:100%; object-fit:contain;}
.pd-thumb:hover{border-color:var(--teal); transform:translateY(-2px);}
.pd-thumb.active{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-dim);}
.pd-overview .pd-actions{margin-top:24px;}

/* overview cards */
.pd-ov-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:18px;}
.pd-ov-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.3s;}
.pd-ov-card:hover{border-color:var(--violet); transform:translateY(-3px); box-shadow:0 22px 40px -22px rgba(124,92,252,.35);}
.pd-ov-k{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.pd-ov-k::before{content:''; width:6px; height:6px; border-radius:2px; background:var(--teal); transform:rotate(45deg); flex-shrink:0;}
.pd-ov-card p{color:var(--muted); font-size:.9rem;}

/* features */
.pd-feat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.pd-feat{
  display:flex; gap:16px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:.3s;
}
.pd-feat:hover{border-color:var(--violet); transform:translateY(-3px); box-shadow:0 22px 42px -22px rgba(124,92,252,.35);}
.pd-feat .fi{
  width:44px; height:44px; flex-shrink:0; border-radius:13px; background:var(--surface-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--teal);
}
.pd-feat h3{font-size:.98rem; margin-bottom:6px;}
.pd-feat p{color:var(--muted); font-size:.87rem;}

/* challenges */
.pd-chal-list{list-style:none; display:flex; flex-direction:column; gap:14px;}
.pd-chal{
  display:flex; align-items:center; gap:20px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:20px 22px; transition:.3s;
}
.pd-chal:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:0 18px 36px -22px rgba(0,230,195,.4);}
.pd-chal .n{font-family:var(--mono); font-size:.8rem; color:var(--teal); flex-shrink:0;}
.pd-chal .txt{flex:1; font-size:.92rem;}
.pd-chal .chev{color:var(--muted); display:flex; transition:.25s;}
.pd-chal:hover .chev{color:var(--teal); transform:translateX(4px);}
body.lang-ar .pd-chal .chev{transform:scaleX(-1);}
body.lang-ar .pd-chal:hover .chev{transform:scaleX(-1) translateX(4px);}

/* details metadata */
.pd-meta-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.pd-meta{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; transition:.3s;}
.pd-meta:hover{border-color:var(--violet); transform:translateY(-3px);}
.pd-meta .k{
  display:flex; align-items:center; gap:8px; margin-bottom:9px;
  font-family:var(--mono); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.pd-meta .k::before{content:''; width:6px; height:6px; border-radius:2px; background:var(--teal); transform:rotate(45deg); flex-shrink:0;}
.pd-meta .v{font-size:.94rem; font-weight:500; overflow-wrap:break-word;}

/* previous / next */
.pd-pager-sec{padding-top:20px;}
.pd-pager{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0;
}
.pd-pager a{
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; transition:.3s;
}
.pd-pager a:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-2px);}
.pd-pager a.nx{justify-content:flex-end; text-align:end;}
.pd-pager .lbl small{
  display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.pd-pager .lbl b{font-weight:600; font-size:.92rem;}
.pd-pager .chev{display:flex; color:var(--muted); transition:.25s;}
.pd-pager a:hover .chev{color:var(--teal);}
.pd-pager .mid{display:flex; align-items:center;}
.pd-pager .mid a{
  border-radius:999px; padding:14px 26px; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.06em; white-space:nowrap;
}
.pd-pager-gap{display:block;}

/* more projects */
.pd-more{padding-bottom:110px;}

/* 404 */
.pd-404{min-height:66vh; display:flex; align-items:center; text-align:center; padding-top:150px !important; padding-bottom:90px !important;}
.pd-404 .wrap{display:flex; flex-direction:column; align-items:center; gap:14px;}
.pd-404-title{font-size:clamp(2rem,5vw,3rem);}
.pd-404 p{color:var(--muted); max-width:460px;}

/* responsive */
@media(max-width:1000px){
  .pd-showcase-grid{grid-template-columns:1fr; gap:36px;}
  .pd-meta-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .pd-feat-grid{grid-template-columns:1fr;}
  .pd section{padding:56px 0;}
  .pd .pd-hero{padding:130px 0 54px;}
}
@media(max-width:760px){
  .pd-pager{grid-template-columns:1fr; padding:22px 0;}
  .pd-pager a.nx{justify-content:flex-start; text-align:start;}
  .pd-pager-gap{display:none;}
  .pd-pager .mid{order:-1; justify-content:flex-start;}
}
@media(max-width:600px){
  .pd .wrap{padding:0 20px;}
  .pd .pd-hero{padding:118px 0 46px;}
  .pd-phone{width:min(286px,74vw); border-radius:40px; padding:10px;}
  .pd-phone-screen{border-radius:32px; padding:24px 7px 16px;}
  .pd-thumbs{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
  .pd-thumb{flex:0 0 70px; width:70px; height:70px;}
  .pd-meta-grid{grid-template-columns:1fr;}
  .pd-chal{gap:14px; padding:18px 16px;}
  .pd-feat{padding:20px 18px;}
  .pd-actions .btn{width:100%; justify-content:center;}
  .pd-more{padding-bottom:80px;}
}
@media(max-width:420px){
  .pd-title{font-size:2.1rem;}
  .pd-tags span{font-size:.68rem; padding:6px 12px;}
}

/* arabic typography for detail labels */
body.lang-ar .pd-eyebrow, body.lang-ar .pd-ov-k, body.lang-ar .pd-meta .k,
body.lang-ar .pd-pager .lbl small, body.lang-ar .pd-pager .mid a,
body.lang-ar .pd-back{font-family:var(--body-ar); letter-spacing:0; text-transform:none;}
body.lang-ar .pd-hero > .wrap{text-align:right;}
body.lang-ar .pd-hero .pd-tags, body.lang-ar .pd-hero .pd-actions{justify-content:flex-end;}
body.lang-ar .pd-404 p, body.lang-ar .pd-404 .pd-actions{text-align:center; justify-content:center;}