/* --- HERO --- */
/* =========================
   Portfolio Hero / Spotlight Layout
   ========================= */

.pfHero{
  --pf-bg:#f4f8ff;
  --pf-bg-soft:#eef5ff;
  --pf-surface:rgba(255,255,255,.72);
  --pf-surface-strong:rgba(255,255,255,.88);
  --pf-border:rgba(43,111,243,.12);
  --pf-text:#10233f;
  --pf-text-2:#325277;
  --pf-text-3:#5f7da3;
  --pf-blue:#1654c7;
  --pf-blue-2:#2b6ff3;
  --pf-cyan:#4fd7ff;
  --pf-violet:#8b5cf6;

  position: relative;
  min-height: clamp(420px, 56vh, 520px);
  padding: 32px 0 28px;
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(180deg, #f8fbff 0%, #f4f8ff 100%);
}

.pfHero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(700px 420px at 18% 22%, rgba(79,140,255,.12), transparent 62%),
    radial-gradient(620px 420px at 82% 18%, rgba(139,92,246,.10), transparent 65%),
    radial-gradient(620px 420px at 52% 92%, rgba(79,215,255,.08), transparent 68%);
  filter: blur(18px);
}

.pfFx{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.pfHero__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: clamp(22px, 3vw, 40px);
  align-items:center;
}

.pfHero__copy{
  text-align:right;
  max-width:40rem;
}
.pfHero + section{
  position: relative;
  z-index: 3;
  background: #fff;
}

.pfKicker{
  margin:0 0 14px;
  color:var(--pf-text-3);
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.pfHero__title{
  margin:0 0 14px;
  color:var(--pf-text);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height:1.02;
  font-weight:900;
}

.pfHero__title span{
  color:var(--pf-blue);
}

.pfHero__desc{
  margin:0 0 18px;
  color:var(--pf-text-2);
  font-size:clamp(1rem, 1.12vw, 1.08rem);
  line-height:1.9;
  max-width:38rem;
}

.pfHero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 18px;
}

.pfHero__proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pfProofChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--pf-border);
  color:var(--pf-text);
  font-size:.9rem;
  font-weight:700;
  box-shadow:0 10px 24px rgba(16,35,63,.06);
  backdrop-filter:blur(10px);
}

/* Showcase wrapper */
.pfShowcase{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:14px;
  align-items:stretch;
}

/* Big stage */
/* Big stage */
.pfStage{
  position:relative;
  min-height:390px;
  border-radius:30px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(247,251,255,.68));
  border:1px solid var(--pf-border);
  box-shadow:
    0 24px 70px rgba(11,18,32,.12),
    inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter:blur(16px);
  isolation:isolate;
}

.pfStage__imageWrap{
  position:absolute;
  inset:0;
  z-index:0;
}

.pfStage__imageWrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(8,10,16,.10) 0%, rgba(8,10,16,.14) 22%, rgba(8,10,16,.46) 64%, rgba(8,10,16,.90) 100%),
    radial-gradient(420px 240px at 20% 20%, rgba(79,140,255,.22), transparent 62%),
    radial-gradient(360px 220px at 82% 78%, rgba(139,92,246,.18), transparent 66%);
  z-index:1;
}

.pfStage__image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.02);
  filter:saturate(1.06) contrast(1.05);
  transition:transform .45s ease, filter .45s ease, opacity .35s ease;
}

.pfStage:hover .pfStage__image{
  transform:scale(1.05);
  filter:saturate(1.1) contrast(1.06);
}

.pfStage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(220px 220px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(79,215,255,.12), transparent 60%);
}

.pfStage__shine{
  position:absolute;
  top:-20%;
  left:-34%;
  width:36%;
  height:180%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.06) 46%,
    rgba(79,215,255,.18) 50%,
    rgba(255,255,255,.06) 54%,
    rgba(255,255,255,0) 100%
  );
  transform:rotate(18deg) translateX(-150%);
  transition:transform .9s ease;
}

.pfStage:hover .pfStage__shine{
  transform:rotate(18deg) translateX(430%);
}

.pfStage__top{
  position:absolute;
  top:16px;
  left:16px;
  right:16px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pfStage__tag,
.pfStage__metric{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.96);
  font-size:.88rem;
  font-weight:700;
  backdrop-filter:blur(10px);
  white-space:nowrap;
}

.pfStage__content{
  position:absolute;
  right:0;
  left:0;
  bottom:0;
  z-index:3;
  padding:26px 24px 24px;
  text-align:right;
}

.pfStage__eyebrow{
  margin:0 0 8px;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pfStage__title{
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.5rem, 2.2vw, 2.2rem);
  line-height:1.12;
  font-weight:900;
  text-shadow:0 14px 28px rgba(0,0,0,.38);
}

.pfStage__desc{
  margin:0;
  color:rgba(255,255,255,.88);
  font-size:1rem;
  line-height:1.8;
  max-width:36rem;
  text-shadow:0 10px 24px rgba(0,0,0,.28);
}
/* Side selector */
.pfSelector{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.pfMini{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:88px;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(43,111,243,.10);
  background:rgba(255,255,255,.76);
  box-shadow:0 12px 26px rgba(16,35,63,.06);
  backdrop-filter:blur(12px);
  cursor:pointer;
  text-align:right;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.pfMini:hover{
  transform:translateY(-2px);
  border-color:rgba(43,111,243,.18);
  box-shadow:0 18px 34px rgba(16,35,63,.10);
}

.pfMini.is-active{
  background:linear-gradient(135deg, rgba(22,84,199,.96), rgba(43,111,243,.94));
  border-color:transparent;
  box-shadow:0 20px 40px rgba(22,84,199,.20);
}

.pfMini__num{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(234,242,255,.85);
  color:var(--pf-blue);
  font-size:.88rem;
  font-weight:900;
}

.pfMini.is-active .pfMini__num{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.pfMini__text{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:right;
}

.pfMini__text strong{
  color:var(--pf-text);
  font-size:.98rem;
  font-weight:800;
  line-height:1.3;
}

.pfMini__text small{
  color:var(--pf-text-2);
  font-size:.84rem;
  line-height:1.5;
}

.pfMini.is-active .pfMini__text strong,
.pfMini.is-active .pfMini__text small{
  color:#fff;
}

/* Reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

[data-reveal].is-in{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media (max-width: 1080px){
  .pfHero{
    min-height:auto;
  }

  .pfHero__inner{
    grid-template-columns:1fr;
  }

  .pfShowcase{
    grid-template-columns:1fr;
  }

  .pfSelector{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 680px){
  .pfHero{
    padding:28px 0 40px;
  }

  .pfHero__title{
    font-size:clamp(1.9rem, 8vw, 2.8rem);
  }

  .pfHero__desc{
    font-size:1rem;
    line-height:1.8;
  }

  .pfStage{
    min-height:320px;
    border-radius:24px;
  }

  .pfStage__title{
    font-size:1.35rem;
  }

  .pfStage__desc{
    font-size:.94rem;
    line-height:1.75;
  }

  .pfSelector{
    grid-template-columns:1fr;
  }

  .pfMini{
    min-height:78px;
    border-radius:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .pfStage,
  .pfMini,
  .pfStage::before,
  .pfStage__shine,
  [data-reveal]{
    transition:none !important;
    animation:none !important;
  }

  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
}
/* Proof strip */
/* =========================================================
   pfProof — Premium KPI Strip (append at end)
   ========================================================= */

.pfProof{
  padding: 18px 0 12px;
}

.pfProof__panel{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;

  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 22px 70px rgba(11,18,32,.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

/* Ambient sheen */
.pfProof__panel::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(circle at 85% 40%, rgba(168,85,247,.12), transparent 60%),
    radial-gradient(circle at 35% 90%, rgba(34,211,238,.08), transparent 65%);
  filter: blur(26px);
  opacity:.8;
}

/* Items */
.pfProof__item{
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: start;

  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(11,18,32,.035);
  border: 1px solid rgba(11,18,32,.06);

  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

/* Subtle divider lines without extra HTML */
.pfProof__item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(circle at 80% 60%, rgba(168,85,247,.14), transparent 60%);
  filter: blur(14px);
  transition: opacity 220ms ease;
}

.pfProof__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(11,18,32,.10);
  background: rgba(255,255,255,.55);
}
.pfProof__item:hover::after{ opacity: 1; }

.pfProof__icon{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 10px 30px rgba(11,18,32,.08);
  font-size: 18px;
}

.pfProof__txt{
  min-width: 0;
}

.pfProof__n{
  display:block;
  font-weight: 950;
  font-size: 1.15rem;
  line-height: 1.1;
  color: #0b1220;
}

.pfProof__t{
  display:block;
  margin-top: 4px;
  font-weight: 800;
  opacity: .88;
}

.pfProof__s{
  display:block;
  margin-top: 6px;
  font-size: .92rem;
  opacity: .72;
  line-height: 1.5;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 980px){
  .pfProof__panel{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .pfProof__panel{
    grid-template-columns: 1fr;
    padding: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pfProof__item{
    transition:none;
    transform:none;
  }
}
/* Proof Typewriter Cursor (no layout/design change) */
.tw-typing{
  position: relative;
}

.tw-typing::after{
  content: "|";
  position: absolute;
  inset-inline-end: -0.55ch;
  top: 0.05em;
  opacity: .9;
  animation: twBlink 0.9s steps(1) infinite;
  pointer-events: none;
}

@keyframes twBlink{
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: .9; }
}

@media (prefers-reduced-motion: reduce){
  .tw-typing::after{ animation: none; opacity: 0; }
}


/* =========================================================
   FIX: Case Studies Head + Tabs (pfWork)
   Paste at END of portfolio.css
   ========================================================= */

.pfWork__head{
  text-align: center;
  max-width: 64rem;
  margin-inline: auto;
}

.pfWork__head .pfKicker{
  display: inline-flex;
  justify-content: center;
  margin-bottom: 8px;
}

.pfWork__head .pfH2{
  margin: 0 0 8px;
  line-height: 1.05;
}

.pfWork__head .pfLead{
  margin: 0 auto;
  max-width: 52rem;
}

/* Tabs wrapper */
.pfWork .pfTabs{
  direction: rtl;                 /* يخلي "الكل" على اليمين طبيعي */
  position: sticky;
  top: 78px;
  z-index: 10;

  margin-top: 14px;
  display: inline-flex;
  gap: 8px;
  padding: 6px;

  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,32,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(11,18,32,.08);
}

/* Button reset (to kill browser/Style.css defaults) */
.pfWork .pfTab{
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;

  cursor: pointer;
  padding: 10px 14px;
  border-radius: 999px;

  opacity: .82;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;

  box-shadow: inset 0 0 0 1px rgba(11,18,32,.12);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, opacity 180ms ease;
}

.pfWork .pfTab:hover{
  opacity: 1;
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(11,18,32,.14),
    0 10px 22px rgba(11,18,32,.10);
}

/* Active pill */
.pfWork .pfTab.is-active{
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(59,130,246,.28),
    0 14px 28px rgba(59,130,246,.12);
  background: linear-gradient(135deg,
    rgba(59,130,246,.22),
    rgba(168,85,247,.16),
    rgba(255,255,255,.45));
}

/* Keyboard focus */
.pfWork .pfTab:focus-visible{
  outline: 3px solid rgba(59,130,246,.35);
  outline-offset: 2px;
}

/* Rail + cards */
.pfRail{
  position:absolute;
  left: 50%;
  top: 210px;
  bottom: 80px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(59,130,246,.18), rgba(11,18,32,.14), rgba(168,85,247,.14));
  opacity:.55;
}
.pfCases{
  display:grid;
  gap: 22px;
  margin-top: 18px;
}
.pfCase{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 22px 70px rgba(11,18,32,.08);
}
.pfCase:nth-child(even){
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}
.pfCase__media{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(11,18,32,.03);
  aspect-ratio: 16 / 9;
}
.pfCase__media img{ width:100%; height:100%; object-fit:contain; object-position: center; }
.pfCase__top{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 10px; }
.pfTag{
  display:inline-flex; align-items:center;
  padding: 7px 10px;
  border-radius:999px;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.08);
  font-size:.9rem;
}
.pfTag--ok{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.24); }
.pfCase__h{ margin:0 0 10px; font-size: 1.15rem; line-height:1.3; }
.pfCase__list{ margin:0; padding-inline-start: 18px; opacity:.88; line-height:1.7; }
.pfCase__cta{ margin-top: 12px; display:flex; gap:10px; }

/* reveal */
.pfCase{ opacity:0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms ease; }
.pfCase.is-in{ opacity:1; transform: translateY(0); }

/* Process */
.pfProcess{ padding: 70px 0; }
.pfSectionHead{ text-align:center; margin-bottom: 22px; }
.pfSteps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pfStep{
  border-radius: 18px;
  padding: 16px;
  background: rgba(11,18,32,.04);
  border: 1px solid rgba(11,18,32,.06);
}
.pfStep__n{ display:inline-flex; font-weight:900; opacity:.75; }
.pfStep__h{ margin: 8px 0 6px; font-size: 1.05rem; }
.pfStep__p{ margin:0; opacity:.85; line-height:1.6; }
/* =========================================================
   pfProcess → Timeline style (NO HTML changes)
   ========================================================= */

/* =========================================================
   pfProcess (Timeline)
   ========================================================= */

.pfProcess{
  padding: 78px 0;
}

/* Head centered */
.pfProcess .pfSectionHead{
  text-align: center;
  margin-bottom: 26px;
}

/* Timeline container (Desktop) */
.pfProcess .pfSteps{
  --mid: 92px;                 /* middle gutter for the rail */
  --rail: rgba(11,18,32,.10);  /* rail color */
  --dot: rgba(16,185,129,.95); /* dot accent */

  direction: ltr;              /* layout stability */
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--mid) 1fr;
  row-gap: 26px;
  column-gap: 0;
  align-items: start;
  padding-top: 8px;
}

/* Center vertical rail */
.pfProcess .pfSteps::before{
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(11,18,32,.06),
    rgba(11,18,32,.16),
    rgba(11,18,32,.06)
  );
  pointer-events: none;
}

/* Each step = card */
.pfProcess .pfStep{
  direction: rtl;              /* Arabic in card */
  position: relative;
  max-width: 560px;
  padding: 18px 18px 16px;
  border-radius: 22px;

  background: rgba(255,255,255,.88);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 18px 46px rgba(11,18,32,.08);
  backdrop-filter: blur(10px);
}

/* Alternate sides */
.pfProcess .pfStep:nth-child(odd){
  grid-column: 3;
  justify-self: start; /* towards center */
}
.pfProcess .pfStep:nth-child(even){
  grid-column: 1;
  justify-self: end;   /* towards center */
}

/* Node dot */
.pfProcess .pfStep::before{
  content:"";
  position: absolute;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--dot);
  box-shadow:
    0 0 0 8px rgba(16,185,129,.10),
    0 0 28px rgba(16,185,129,.16);
  z-index: 2;
}

/* Connector arm */
.pfProcess .pfStep::after{
  content:"";
  position: absolute;
  top: 28px;
  height: 1px;
  background: rgba(11,18,32,.12);
  width: calc(var(--mid) / 2);
  z-index: 1;
}

/* Place dot + connector based on side */
.pfProcess .pfStep:nth-child(odd)::before{
  left: calc(-1 * (var(--mid) / 2));
}
.pfProcess .pfStep:nth-child(odd)::after{
  left: calc(-1 * (var(--mid) / 2));
}

.pfProcess .pfStep:nth-child(even)::before{
  right: calc(-1 * (var(--mid) / 2));
}
.pfProcess .pfStep:nth-child(even)::after{
  right: calc(-1 * (var(--mid) / 2));
}

/* Step number pill */
.pfProcess .pfStep__n{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.18);
  color: rgba(11,18,32,.92);
  font-weight: 950;
  font-size: .92rem;
}

/* Typography */
.pfProcess .pfStep__h{
  margin: 10px 0 6px;
  font-size: 1.06rem;
  line-height: 1.35;
}

.pfProcess .pfStep__p{
  margin: 0;
  opacity: .78;
  line-height: 1.6;
}

/* =========================================================
   Mobile: rail on left + stacked cards
   ========================================================= */
@media (max-width: 900px){
  .pfProcess .pfSteps{
    grid-template-columns: 44px 1fr;
    row-gap: 18px;
    padding-top: 10px;
  }

  .pfProcess .pfSteps::before{
    left: 22px;
    transform: none;
  }

  .pfProcess .pfStep{
    grid-column: 2 !important;
    justify-self: stretch;
    max-width: none;
  }

  /* hide horizontal arms on mobile */
  .pfProcess .pfStep::after{
    display: none;
  }

  /* dot sticks to left rail */
  .pfProcess .pfStep::before{
    left: -22px;
    right: auto;
  }
}

/* Reduced motion */

@media (min-width: 901px){

  /* كل Step صف لوحده (علشان 02 و03 مايبقوش في نفس السطر) */
  .pfProcess .pfStep{
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none !important;

    /* عرض كارت منطقي: نصف الشاشة ناقص مسافة الـRail */
    width: min(560px, calc(50% - (var(--mid) / 2) - 24px)) !important;
  }

  /* فردي = يمين (قريب من الـRail مش آخر الشاشة) */
  .pfProcess .pfStep:nth-child(odd){
    margin-left: calc(52% + (var(--mid) / 2)) !important;
    margin-right: 0 !important;
  }

  /* زوجي = شمال (قريب من الـRail مش آخر الشاشة) */
  .pfProcess .pfStep:nth-child(even){
    margin-right: calc(50% + (var(--mid) / 2)) !important;
    margin-left: 0 !important;
  }
}
/* =========================================================
   pfProcess Mobile FIX (stacked + left rail)
   ========================================================= */
@media (max-width: 900px){

  /* Stack layout */
  .pfProcess .pfSteps{
    --mid: 0px;                 /* مش محتاجين gutter في الموبايل */
    display: grid;
    grid-template-columns: 44px 1fr; /* rail column + content */
    row-gap: 16px;
    padding-top: 10px;
  }

  /* Rail on the left */
  .pfProcess .pfSteps::before{
    left: 22px;
    transform: none;
  }

  /* Cards full width */
  .pfProcess .pfStep{
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;          /* يلغي أي margin من الديسكتوب */
  }

  /* Hide connector arms on mobile */
  .pfProcess .pfStep::after{
    display: none !important;
  }

  /* Dot sticks to the rail */
  .pfProcess .pfStep::before{
    left: -22px !important;        /* يحط النقطة فوق الخط */
    right: auto !important;
  }
}


/* CTA */
.pfCTA{ position:relative; padding: 78px 0; overflow:hidden; }
.pfCTA__inner{ position:relative; z-index:2; }
.pfCTA__box{
  border-radius: 26px;
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(168,85,247,.10), rgba(255,255,255,.70));
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 30px 90px rgba(11,18,32,.10);
  text-align:center;
}
.pfCTA__h{ margin:0 0 8px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.pfCTA__p{ margin:0 0 16px; opacity:.85; }
.pfCTA__actions{ display:flex; justify-content:center; gap: 12px; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 980px){
  .pfHero__inner{ grid-template-columns: 1fr; align-items:start; }
  .pfMosaic{ grid-template-columns: 1fr; }
  .pfProof__inner{ grid-template-columns: 1fr 1fr; }
  .pfCase{ grid-template-columns: 1fr; }
  .pfRail{ display:none; }
  .pfSteps{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .pfSteps{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .pfCase{ transition:none; transform:none; opacity:1; }
}