/* =========================================================
   index.css — hro + srv
   ========================================================= */

/* ===== hro ===== */
.mz-hro {
  position: relative; isolation: isolate; overflow: clip; padding-block: 1.4rem 2.4rem;
  background-color: var(--mz-paper);
  background-image: radial-gradient(color-mix(in srgb, var(--mz-primary) 16%, transparent) 0.06rem, transparent 0.07rem);
  background-size: 1.1rem 1.1rem;
  --mz-mx: 0; --mz-my: 0;
}
.mz-hro__inner { display: grid; gap: 2.4rem; align-items: center; }
.mz-hro__chip {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-block-end: 0.8rem; padding: 0.1rem 0.9rem;
  background: var(--mz-helper); border: var(--mz-bd); border-radius: 999rem; font-weight: 800; font-size: 0.82rem;
}
.mz-hro__title { font-size: 1.6rem; font-weight: 900; line-height: 1.32; }
.mz-hro__lead { margin-block-start: 0.8rem; font-size: 0.95rem; max-inline-size: 40rem; }
.mz-hro__feats { margin-block-start: 1rem; display: grid; gap: 0.5rem; }
.mz-hro__feat { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 700; font-size: 0.9rem; line-height: 1.55; }
.mz-hro__icon { inline-size: 1.9rem; block-size: 1.9rem; background: var(--mz-accent); border: var(--mz-bd); font-size: 0.75rem; }
.mz-hro__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1.2rem; }
.mz-hro__cta .mz-btn { flex: 1 1 8rem; white-space: nowrap; }
.mz-hro__card { translate: calc(var(--mz-mx) * 0.5rem) calc(var(--mz-my) * 0.4rem); padding-block-start: 5.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .mz-hro__chip, .mz-hro__title, .mz-hro__lead, .mz-hro__feats, .mz-hro__cta { animation: mz-rise 0.7s var(--mz-ease) both; }
  .mz-hro__title { animation-delay: 0.1s; }
  .mz-hro__lead { animation-delay: 0.2s; }
  .mz-hro__feats { animation-delay: 0.3s; }
  .mz-hro__cta { animation-delay: 0.4s; }
}
@media (min-width: 601px) { .mz-hro__title { font-size: 2.2rem; } }
@media (min-width: 1025px) {
  .mz-hro { padding-block: 3rem 4rem; }
  .mz-hro__inner { grid-template-columns: 1.15fr 0.85fr; gap: 3.2rem; }
  .mz-hro__title { font-size: 3rem; }
  .mz-hro__lead { font-size: 1.05rem; }
  .mz-hro__card { padding-block-start: 0; }
}

/* ===== srv (الخدمات والأسعار): شبكة بطاقات (Grid) ===== */
.mz-srv { background: var(--mz-paper); }
.mz-srv__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 601px) {
  .mz-srv__grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
}
@media (min-width: 1025px) {
  .mz-srv__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.mz-srv__card {
  position: relative; display: flex; flex-direction: column; inline-size: 100%;
  background: var(--mz-helper); border: var(--mz-bd); box-shadow: var(--mz-block-sm);
}
.mz-srv__fig { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-block-end: var(--mz-bd); background: var(--mz-soft); }
.mz-srv__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.9s var(--mz-ease); }
.mz-srv__icon {
  position: absolute; inset-block-start: -1.3rem; inset-inline-end: 0.9rem; z-index: 2;
  inline-size: 2.6rem; block-size: 2.6rem; background: var(--mz-accent); color: var(--mz-ink); border: var(--mz-bd); font-size: 1.05rem;
  transition: transform 0.55s var(--mz-spring);
}
.mz-srv__body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 0.9rem 0.9rem; }
.mz-srv__name { font-size: 1.05rem; font-weight: 900; }
.mz-srv__desc { font-size: 0.86rem; color: var(--mz-muted); flex: 1; }
.mz-srv__btn { margin-block-start: 0.5rem; align-self: flex-start; min-block-size: 2.5rem; padding-inline: 1rem; font-size: 0.88rem; }
.mz-srv__line { position: absolute; inset-inline: 0; bottom: 0; block-size: 0.3rem; background: var(--mz-accent); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--mz-ease); }
@media (hover: hover) {
  .mz-srv__card:hover .mz-srv__img { transform: scale(1.08); }
  .mz-srv__card:hover .mz-srv__icon { transform: rotateY(360deg); }
  .mz-srv__card:hover .mz-srv__line { transform: scaleX(1); }
}