@charset "UTF-8";
/* ==========================================================================
   برمجي — Service hub components
   Used by page-web-design.php and page-app.php. Monochrome only.
   ========================================================================== */

/* ---------- Hub hero ---------- */
.hero--hub { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem); }
.hero--hub .crumbs { margin-bottom: 1.5rem; }
.hero__grid--hub { align-items: start; }
@media (min-width: 980px) { .hero__grid--hub { grid-template-columns: 1.25fr .75fr; } }

.stores { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; align-items: center; }
.stores img {
  height: 42px; width: auto;
  border-radius: 7px;
  filter: grayscale(1) contrast(1.05);
  opacity: .92;
  transition: opacity var(--dur) var(--ease);
}
.stores img:hover { opacity: 1; }

/* Fact list beside the hero copy */
.herofacts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.herofacts li {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r);
  background: rgba(255,255,255,.045);
}
.herofacts svg { color: #fff; flex: none; margin-top: .15em; }
.herofacts span { display: grid; gap: .15rem; }
.herofacts strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: #fff;
}
.herofacts span span, .herofacts li > span > :not(strong) { color: var(--on-dark-muted); }
.herofacts li > span { font-size: var(--fs-2xs); color: var(--on-dark-muted); line-height: var(--lh-ui); }

/* ---------- Numbered card ---------- */
.numcard {
  position: relative;
  padding: 1.75rem 1.75rem 1.75rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  display: flex; flex-direction: column; gap: .6rem;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.numcard:hover { border-color: var(--ink); transform: translateY(-3px); }
.numcard__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--line-strong);
  font-variant-numeric: tabular-nums;
}
.numcard h3 { font-size: var(--fs-lg); }
.numcard p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.section--dark .numcard { background: var(--on-dark-panel); border-color: var(--on-dark-line); }
.section--dark .numcard__n { color: var(--on-dark-faint); }
.section--dark .numcard p { color: var(--on-dark-muted); }

/* ---------- Process steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--on-dark-line); border: 1px solid var(--on-dark-line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 640px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  position: relative;
  background: var(--ink);
  padding: 1.6rem 1.35rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.step__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  color: var(--on-dark-faint); letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.step__ico {
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--on-dark-line);
  color: #fff;
}
.step h3 { font-size: var(--fs-md); margin-top: .35rem; }
.step p { color: var(--on-dark-muted); font-size: var(--fs-2xs); line-height: var(--lh-body); }

/* ---------- Pricing plans ---------- */
.plans { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.9rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  height: 100%;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.plan:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 24px 44px -32px rgba(0,0,0,.5); }
.plan--featured { border-color: var(--ink); border-width: 2px; }

.plan__badge {
  position: absolute; top: -.75rem; inset-inline-start: 1.6rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold);
}
.plan__name { font-size: var(--fs-lg); }
.plan__for { margin-top: .35rem; color: var(--muted); font-size: var(--fs-2xs); line-height: var(--lh-ui); min-height: 2.6em; }
.plan__price {
  margin-block: 1.1rem;
  padding-block-end: 1.1rem;
  border-block-end: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.plan__note { font-size: var(--fs-3xs); font-weight: var(--fw-regular); color: var(--muted-2); }

.plan__items { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.plan__items li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-2xs); line-height: var(--lh-body); color: var(--ink-2); }
.plan__items svg { flex: none; margin-top: .3em; color: var(--ink); }

.plan .btn { margin-top: auto; }

.plans__note {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1.5rem; text-align: center;
  font-size: var(--fs-2xs); color: var(--muted);
}
.plans__note svg { flex: none; }

/* ---------- Link tiles (industries) ---------- */
a.tile.tile--link {
  position: relative;
  color: inherit; text-decoration: none;
  padding-block-end: 2.6rem;
}
a.tile.tile--link:hover { border-color: var(--ink); transform: translateY(-3px); }
a.tile.tile--link h3 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
a.tile.tile--link p { font-size: var(--fs-3xs); color: var(--muted); }
.tile__go {
  position: absolute; inset-block-end: 1.1rem; inset-inline-start: 1.35rem;
  display: inline-flex; color: var(--muted-2);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.tile.tile--link:hover .tile__go { color: var(--ink); transform: translateX(-4px); }

/* ---------- Coverage in hub layout ---------- */
.cov--hub { grid-template-columns: 1fr; }
@media (min-width: 760px)  { .cov--hub { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cov--hub { grid-template-columns: repeat(3, 1fr); } }
.cov--hub .cov__group {
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
.cov--hub .cov__group h3 { font-size: var(--fs-sm); }

/* ---------- About split ---------- */
.about { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: 1.15fr .85fr; } }
.about h2 { font-size: var(--fs-2xl); }
.about p { margin-top: 1rem; color: var(--muted); max-width: var(--measure); }
.about .btn { margin-top: 1.5rem; }
.about .counters { grid-template-columns: repeat(2, 1fr); }