/* ===========================================================
   تطوير المواقع — الطبقة الجديدة
   يبني على نظام «هلا للأعمال» نفسه (نفس المتغيرات والأزرار)،
   ويضيف: واجهة البطل بالشاشات، شريط الشراكة مع BerdisDev،
   معرض الأعمال بإطارات متصفح تتمرّر، ومبدّل الباقات.
   =========================================================== */

/* ---------- واجهة البطل ---------- */
.phero.dev-hero{padding-block:clamp(56px,7vw,96px) clamp(70px,8vw,120px);}
/* البطل الأصلي عمود واحد في المنتصف بعرض 760؛ هذا عمودان فيأخذ العرض الكامل */
.phero.dev-hero .wrap{max-width:1160px; text-align:start;}
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4vw,64px);
  align-items:center; position:relative; z-index:2;
}
/* بدون هذا يدفع عرض الصورة الأصلي عمودَ النص فيضيق */
.hero-grid > *{min-width:0;}
/* البطل في هذا النظام مركزي افتراضياً؛ هنا هو عمودان فيبدأ من الحافة */
.dev-hero .hero-copy{text-align:start;}
.dev-hero .hero-copy h1{margin-top:18px;}
.dev-hero .phero-ctas{justify-content:flex-start; margin-top:30px;}
.dev-hero .hero-lede{margin:18px 0 0;}
.hero-lede{font-size:1.06rem; color:rgba(255,255,255,.76); max-width:46ch;}
.hero-proof{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px;
  font-size:.86rem; color:rgba(255,255,255,.62);
}
.hero-proof span{display:flex; align-items:center; gap:7px;}
.hero-proof svg{color:var(--gold-bright); flex:none;}

/* الشاشات */
.hero-screens{position:relative; padding:10px 0 34px;}
.hero-screens .shot{transform:rotate(-1.4deg);}
.hero-screens .shot-phone{
  position:absolute; inset-inline-start:-6%; bottom:-6px; width:31%;
  transform:rotate(3deg); z-index:3;
}
@media (prefers-reduced-motion:no-preference){
  .hero-screens .shot{animation:hero-float 9s ease-in-out infinite;}
  .hero-screens .shot-phone{animation:hero-float 9s ease-in-out .8s infinite;}
}
@keyframes hero-float{0%,100%{translate:0 0;} 50%{translate:0 -12px;}}

/* ---------- إطار المتصفح ---------- */
.shot{
  position:relative; border-radius:14px; overflow:hidden; background:#0E0B0D;
  border:1px solid var(--chrome-line);
  box-shadow:0 38px 70px -34px rgba(0,0,0,.72), 0 2px 6px rgba(0,0,0,.25);
}
.shot-chrome{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:linear-gradient(180deg,#221A1D,#191315); border-bottom:1px solid rgba(255,255,255,.07);
}
.shot-chrome i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); flex:none;}
.shot-chrome i:first-child{background:#E2536B;}
.shot-chrome i:nth-child(2){background:var(--gold);}
.shot-url{
  margin-inline-start:10px; flex:1; text-align:center; font-size:.68rem; letter-spacing:.02em;
  color:rgba(255,255,255,.5); font-family:ui-monospace,'Segoe UI Mono','Courier New',monospace;
  direction:ltr; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shot-view{aspect-ratio:16/11; overflow:hidden; background:#0E0B0D;}
.shot-view img{
  width:100%; height:100%; object-fit:cover; object-position:50% 0%;
  transition:object-position 7s cubic-bezier(.36,0,.35,1);
}
.shot:hover .shot-view img,
.shot.playing .shot-view img{object-position:50% 100%;}

/* إطار الهاتف */
.shot-phone{
  border-radius:20px; padding:6px; background:#171113; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 56px -26px rgba(0,0,0,.8);
}
.shot-phone .shot-view{aspect-ratio:9/17; border-radius:15px; overflow:hidden;}

/* ---------- شريط الشراكة ---------- */
.partner{
  background:var(--bg-soft); border-block:1px solid var(--line);
  padding-block:clamp(36px,4.5vw,60px);
}
.partner-in{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(22px,3vw,48px); align-items:center;
}
.partner-logo{
  display:grid; place-items:center; padding:20px 26px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.partner-logo img{width:186px; height:auto;}
.partner-txt .eyebrow{margin-bottom:12px;}
.partner-txt h2{font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.5;}
.partner-txt p{margin-top:10px; color:var(--text-soft); max-width:62ch; font-size:.97rem;}
.partner-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.partner-chips span{
  font-size:.78rem; color:var(--text); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:5px 13px;
}

/* ---------- معرض الأعمال ---------- */
.work-groups{display:grid; gap:14px; margin-top:34px;}
.work-label{
  display:flex; align-items:center; gap:12px; font-size:.82rem; color:var(--text-soft);
  font-family:'El Messiri',serif;
}
.work-label::after{content:""; flex:1; height:1px; background:var(--line);}
.work-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.work-grid.of-three{grid-template-columns:repeat(3,1fr);}
.work-card{display:flex; flex-direction:column; gap:12px;}
.work-card .shot{
  border-color:var(--line);
  box-shadow:0 22px 44px -28px rgba(17,17,17,.45);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.work-card:hover .shot{transform:translateY(-6px); box-shadow:0 34px 60px -30px rgba(17,17,17,.55);}
.work-meta{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.work-meta h3{font-size:1rem; font-family:'El Messiri',serif; color:var(--ink);}
.work-meta .kind{font-size:.76rem; color:var(--text-soft);}
.work-card p{font-size:.85rem; color:var(--text-soft);}
.work-tag{
  align-self:flex-start; font-size:.72rem; border-radius:999px; padding:3px 10px;
  border:1px solid var(--line); color:var(--text-soft);
}
.work-tag.live{color:#266A45; border-color:rgba(46,125,82,.35); background:rgba(46,125,82,.10);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .work-tag.live{color:#7FD6A6; border-color:rgba(127,214,166,.35); background:rgba(127,214,166,.10);}
}
:root[data-theme="dark"] .work-tag.live{color:#7FD6A6; border-color:rgba(127,214,166,.35); background:rgba(127,214,166,.10);}
.work-foot{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line);
}
.work-foot p{color:var(--text-soft); font-size:.92rem;}

/* ---------- مبدّل الباقات ---------- */
.pkg-switch{
  display:inline-flex; gap:4px; padding:5px; margin:26px auto 0; border-radius:999px;
  background:var(--bg-soft); border:1px solid var(--line);
}
.pkg-switch button{
  border:0; background:transparent; font:inherit; font-size:.9rem; color:var(--text-soft);
  padding:9px 20px; border-radius:999px; cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
/* الأحمر المملوء يعتمد رمز التباين الموحّد ليحمل نصاً أبيض ليلاً أيضاً */
.pkg-switch button.on{background:var(--red-fill, var(--red)); color:#fff;}
.pkg-panel[hidden]{display:none;}
.pkg-panel{animation:pkg-in .45s cubic-bezier(.2,.7,.2,1);}
@keyframes pkg-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ---------- الشاشات الأصغر ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:38px;}
  .hero-screens{max-width:560px;}
  .partner-in{grid-template-columns:1fr; text-align:start; gap:22px;}
  .partner-logo{justify-self:start;}
  .work-grid,.work-grid.of-three{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .hero-screens .shot-phone{width:36%; inset-inline-start:-2%;}
  .work-grid,.work-grid.of-three{grid-template-columns:1fr;}
  .pkg-switch{width:100%; justify-content:center; flex-wrap:wrap;}
  .pkg-switch button{flex:1; padding:9px 12px; font-size:.84rem;}
  .work-foot{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .hero-screens .shot,.hero-screens .shot-phone{animation:none;}
  .shot-view img{transition:none;}
  .pkg-panel{animation:none;}
}