/* ============================================================
   وقفی نو DESIGN SYSTEM — HOME PAGE (homepage-only sections)
   Extracted verbatim from the approved homepage template.
   ============================================================ */

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 36.5rem;
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.88), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(207,227,251,.72), transparent 34%),
    var(--hero-grad);
  padding-block: clamp(3.25rem, 7vw, 5.75rem);
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .5;
  pointer-events: none;
  will-change: transform;
}
.hero__blob--a {
  width: 26rem;
  height: 26rem;
  background: var(--hero-blob-a);
  top: -7.5rem;
  inset-inline-start: -5rem;
  animation: blob-drift 14s ease-in-out infinite alternate;
}
.hero__blob--b {
  width: 22.5rem;
  height: 22.5rem;
  background: var(--hero-blob-b);
  bottom: -8.75rem;
  inset-inline-end: -3.75rem;
  animation: blob-drift 19s ease-in-out infinite alternate-reverse;
}
@keyframes blob-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(50px, 34px) scale(1.12); }
}

.hero .container {
  position: relative;
  display: grid;
  gap: clamp(2.75rem, 6vw, 5.5rem);
  align-items: center;
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--card-bg);
  border: 1px solid var(--brand-100);
  color: var(--brand-700);
  font-size: .8125rem;
  font-weight: 600;
  padding: .42rem 1rem;
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.4rem;
  animation: fadeInUp .8s var(--ease-out) both;
}
.hero__title {
  max-width: 33rem;
  font-size: clamp(2.35rem, 4.8vw, 3.8rem);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: .85rem;
  text-wrap: balance;
  animation: fadeInUp .8s .1s var(--ease-out) both;
}
.hero__title em { font-style: normal; color: var(--brand-600); }
.hero__subtitle {
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 600;
  color: var(--brand-800);
  margin-bottom: .75rem;
  min-height: 2em;
  animation: fadeInUp .8s .2s var(--ease-out) both;
}
.typewriter-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--brand-600);
  margin-inline-start: 3px;
  vertical-align: -.15em;
  animation: caret-blink 1.05s steps(2, start) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.hero__lead {
  color: var(--ink-soft);
  font-size: clamp(.98rem, 1.35vw, 1.08rem);
  line-height: 2.05;
  max-width: 34rem;
  margin-bottom: 1.9rem;
  animation: fadeInUp .8s .3s var(--ease-out) both;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  animation: fadeInUp .8s .4s var(--ease-out) both;
}

.hero__visual {
  position: relative;
  z-index: 1;
  width: min(100%, 31.25rem);
  justify-self: start;
}
.hero__visual svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 44px rgba(13, 63, 125, .18));
  animation: hero-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ===== Hero Slider ===== */
.hero-slider {
  position: relative;
  border-radius: 1.35rem;
  border: 1px solid rgba(255,255,255,.72);
  overflow: hidden;
  box-shadow: 0 24px 58px rgba(38, 85, 145, .18);
  aspect-ratio: 16 / 9;
  max-height: 420px;
}
.hero-slider__slides { display: flex; transition: transform .7s var(--ease-out); height: 100%; }
.hero-slider__slide { min-width: 100%; position: relative; }
.hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.hero-slider__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,22,38,.85) 0%, rgba(11,22,38,.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem;
}
.hero-slider__caption {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.hero-slider__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 5;
}
.hero-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: all .3s ease;
  cursor: pointer;
}
.hero-slider__dot.is-active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}

/* ===== Partners ===== */
.partners { background: var(--surface-soft); }
.partners-viewport { overflow: hidden; position: relative; }
.partners-viewport::before,
.partners-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(3rem, 8vw, 5.625rem);
  z-index: 2;
  pointer-events: none;
}
.partners-viewport::before { inset-inline-start: 0; background: linear-gradient(to left, transparent, var(--surface-soft)); }
.partners-viewport::after { inset-inline-end: 0; background: linear-gradient(to right, transparent, var(--surface-soft)); }
.partners-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  will-change: transform;
  animation: partners-marquee 38s linear infinite;
}
.partners-viewport:hover .partners-track,
.partners-viewport:focus-within .partners-track { animation-play-state: paused; }
@keyframes partners-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
.partner-chip {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .875rem 1.375rem;
  white-space: nowrap;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-out);
}
.partner-chip:hover { border-color: var(--brand-100); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.partner-chip__logo {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
  color: var(--brand-700);
  background: var(--brand-050);
}
.partner-chip__name { font-size: .875rem; font-weight: 600; color: var(--ink); }

/* ===== Culture ===== */
.culture-panel {
  display: grid;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.culture-panel__media { position: relative; min-height: 15rem; }
.culture-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.culture-panel__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #071f37; }
.culture-panel__content { padding: clamp(1.75rem, 4vw, 2.75rem); }
.culture-panel__title { font-size: clamp(1.25rem, 2.6vw, 1.55rem); font-weight: 800; margin-block: .9rem .8rem; text-wrap: balance; }
.culture-panel__desc { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.4rem; }
.culture-list { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.7rem; }
.culture-list li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 500; }
.culture-list i { color: var(--brand-500); font-size: 1rem; flex-shrink: 0; }

/* ===== Video ===== */
.video-section { background: var(--surface-soft); }
.video-container {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
  display: block;
}
.video-container:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.video-container img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.video-container:hover .video-overlay { background: rgba(11,22,38,.35); }
.video-container:hover .video-play-btn { transform: scale(1.1); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.9);
  display: grid;
  place-items: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.video-modal.is-open { opacity: 1; visibility: visible; }
.video-modal__close {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: #fff;
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: grid;
  place-items: center;
  transition: background .3s;
}
.video-modal__close:hover { background: rgba(255,255,255,.2); }
.video-modal iframe {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  border: 0;
}
/* brochure strip on the homepage */
.brochures-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.brochure-card { display:flex; flex-direction:column; justify-content:space-between; min-height:220px; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--surface); box-shadow:0 8px 24px rgba(18,32,58,.06); }
.brochure-card__cover { display:grid; place-items:center; gap:.75rem; min-height:140px; padding:1rem; border-radius:.75rem; background:var(--surface-soft); color:var(--brand-700); text-align:center; overflow-wrap:anywhere; }
.brochure-card__cover i { font-size:2.3rem; }
.brochure-card__actions { display:flex; gap:.6rem; justify-content:center; margin-top:1rem; }

/* Reference hero alignment: image left, copy right, with the same airy proportions as vaghfeno.ir. */
@media (min-width: 56.25em) {
  .hero {
    min-height: 34rem;
    padding-block: 3.25rem 3.75rem;
  }
  .hero .container {
    max-width: 1200px;
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
    gap: clamp(3rem, 7vw, 6.5rem);
  }
  .hero__content { grid-column: 2; text-align: right; }
  .hero__visual { grid-column: 1; grid-row: 1; align-self: center; }
  .hero__title { font-size: clamp(2.4rem, 4.2vw, 3.55rem); line-height: 1.32; }
  .hero__subtitle { margin-bottom: .65rem; }
  .hero__lead { max-width: 31rem; margin-inline-start: auto; }
  .hero__actions { justify-content: flex-start; }
  .hero-slider { aspect-ratio: 1.78 / 1; }
}

/* Full-width reference slideshow: intentionally replaces the split hero card. */
.hero--showcase {
  min-height: 31rem;
  padding: 0;
  display: block;
  position: relative;
  isolation: isolate;
  background: #1674b9;
  color: #fff;
}
.hero--showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(116deg, #1164a1 0%, #197bc0 52%, #1670b2 100%);
}
.hero--showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 58% 44%, rgba(255,255,255,.06), transparent 30%), linear-gradient(90deg, transparent 0 48%, rgba(5,53,99,.08) 100%);
}
.hero-showcase__watermark {
  position: absolute;
  inset: -12% 2% -30% 44%;
  z-index: -1;
  opacity: .12;
  background: url('/assets/images/logo/logo-512.webp') center / contain no-repeat;
  filter: grayscale(1) brightness(2);
  pointer-events: none;
}
.hero-showcase__slides { height: 31rem; display: flex; transition: transform .7s var(--ease-out); direction: ltr; }
.hero-showcase__slide { min-width: 100%; height: 100%; display: grid; place-items: center; position: relative; direction: rtl; }
.hero-showcase__content { width: min(90%, 58rem); text-align: center; padding: 2rem; animation: fadeInUp .65s var(--ease-out) both; }
.hero-showcase__content h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.7rem); font-weight: 800; line-height: 1.4; margin: 0 0 .85rem; text-wrap: balance; }
.hero-showcase__content p { color: rgba(255,255,255,.96); font-size: clamp(1rem, 1.7vw, 1.18rem); margin: 0 auto 2rem; }
.hero-showcase__button { display: inline-flex; align-items: center; justify-content: center; min-width: 9.2rem; padding: .7rem 1.4rem; border: 2px solid #f6b024; border-radius: 999px; color: #fff; font-weight: 700; text-decoration: none; transition: background .25s, color .25s, transform .25s; }
.hero-showcase__button:hover { background: #f6b024; color: #123d68; transform: translateY(-2px); }
.hero-showcase__arrow { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 3rem; height: 3rem; border: 0; background: transparent; color: rgba(255,255,255,.68); font-size: 1.6rem; cursor: pointer; transition: color .2s, transform .2s; }
.hero-showcase__arrow:hover { color: #fff; transform: translateY(-50%) scale(1.15); }
.hero-showcase__arrow--next { inset-inline-start: clamp(1rem, 12vw, 12rem); }
.hero-showcase__arrow--prev { inset-inline-end: clamp(1rem, 12vw, 12rem); }
.hero-showcase__dots { position: absolute; inset-inline: 0; bottom: 1.2rem; display: flex; justify-content: center; gap: .55rem; }
.hero-showcase__dots .hero-slider__dot { background: rgba(255,255,255,.45); }
.hero-showcase__dots .hero-slider__dot.is-active { background: #fff; }
@media (max-width: 56.24em) {
  .hero--showcase, .hero-showcase__slides { min-height: 26rem; height: 26rem; }
  .hero-showcase__arrow--next { inset-inline-start: .25rem; }
  .hero-showcase__arrow--prev { inset-inline-end: .25rem; }
  .hero-showcase__content { padding-inline: 2.5rem; }
}


/* Final slideshow controls: clear hit areas and reference-style edge placement. */
.hero-showcase__arrow {
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}
.hero-showcase__arrow--next { inset-inline-start: clamp(1rem, 13.5vw, 13.5rem); }
.hero-showcase__arrow--prev { inset-inline-end: clamp(1rem, 13.5vw, 13.5rem); }
.hero-showcase__dots {
  inset-inline: auto auto 1.05rem 1.25rem;
  justify-content: flex-start;
  direction: ltr;
}
.hero-showcase__dots .hero-slider__dot {
  width: 9px;
  height: 9px;
  border: 0;
  padding: 0;
}
.hero-showcase__dots .hero-slider__dot.is-active { width: 28px; border-radius: 6px; }
.hero-showcase__arrow:focus-visible,
.hero-showcase__dots .hero-slider__dot:focus-visible,
.hero-showcase__button:focus-visible { outline: 3px solid #f6b024; outline-offset: 4px; }
@media (max-width: 56.24em) {
  .hero-showcase__arrow--next { inset-inline-start: .35rem; }
  .hero-showcase__arrow--prev { inset-inline-end: .35rem; }
  .hero-showcase__dots { inset-inline-start: 1rem; }
}

.hero-showcase__content.is-entering { animation: hero-content-enter .72s var(--ease-out) both; }
@keyframes hero-content-enter { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-showcase__content.is-entering { animation: none; } }

.hero-showcase__content { will-change: transform, opacity; }
.hero-showcase__content h1 { letter-spacing: -.025em; }
.hero-showcase__button { box-shadow: 0 8px 20px rgba(246,176,36,.12); }


/* Polished hero surface: quieter brand watermark, richer blue depth, and no harsh split. */
.hero--showcase::before {
  background:
    radial-gradient(ellipse at 50% 115%, rgba(71,177,238,.34), transparent 48%),
    radial-gradient(ellipse at 18% 0%, rgba(28,137,202,.46), transparent 42%),
    linear-gradient(135deg, #0d5f9c 0%, #1678ba 52%, #1269a9 100%);
}
.hero--showcase::after {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.075), transparent 28%),
    linear-gradient(90deg, rgba(4,53,91,.08), transparent 40%, rgba(4,53,91,.12));
}
.hero-showcase__watermark {
  inset: -12% 3% -28% 40%;
  opacity: .11;
  background-size: min(48rem, 72%);
  background-position: 72% 48%;
  filter: grayscale(1) brightness(2.2) drop-shadow(0 18px 24px rgba(2,55,97,.12));
}
.hero-showcase__content { position: relative; z-index: 2; }
.hero-showcase__content::before {
  content: '';
  position: absolute;
  inset: 10% 15%;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(3,54,94,.13), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}
.hero-showcase__button { background: rgba(20,113,177,.2); backdrop-filter: blur(4px); }
.hero-showcase__arrow { text-shadow: 0 2px 10px rgba(0,35,70,.35); }

/* Edge-to-edge hero correction: the showcase must own the entire viewport width. */
.hero--showcase {
  display: block;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  border-radius: 0;
  box-sizing: border-box;
}
.hero--showcase .hero-showcase__slides {
  display: flex;
  width: 100%;
  max-width: none;
  flex: 0 0 100%;
  overflow: visible;
}
.hero--showcase .hero-showcase__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 56.24em) {
  .hero--showcase { width: 100vw; margin-inline: calc(50% - 50vw); }
}

/* v25: rounded bottom edge + clean transparent watermark (no square box behind the logo). */
.hero--showcase {
  border-radius: 0 0 clamp(1.75rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 3.5rem);
}
.hero-showcase__watermark {
  opacity: .14;
  background-image: url('/assets/images/logo/logo-watermark.webp');
  filter: drop-shadow(0 18px 28px rgba(2,55,97,.18));
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 72% 48%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 60% at 72% 48%, #000 55%, transparent 100%);
}
@media (max-width: 40em) {
  .hero--showcase { border-radius: 0 0 1.5rem 1.5rem; }
}

/* v34: new hero mark, show the complete upper half and hide the lower half. */
.hero-showcase__watermark {
  background-image: url('/assets/images/logo/hero-watermark-new.webp');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  clip-path: inset(0 0 50% 0);
  opacity: .14;
  filter: grayscale(1) brightness(1.8);
}

/* v25: «پاس سیستم‌ساز» section: text + a BPMN 2.0 canvas with a token running through the process. */
.builder-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.builder-panel__title { font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 800; line-height: 1.5; margin-block: .9rem .8rem; text-wrap: balance; }
.builder-panel__desc { color: var(--ink-soft); font-size: .95rem; line-height: 1.95; max-width: 34rem; margin-bottom: 1.6rem; }
.builder-steps { display: grid; gap: 1rem; margin-bottom: 1.9rem; padding: 0; list-style: none; }
.builder-steps li { display: flex; gap: .85rem; align-items: flex-start; }
.builder-steps__icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 12px; background: var(--brand-050); color: var(--brand-600); font-size: 1rem; }
.builder-steps strong { display: block; font-size: .95rem; font-weight: 700; margin-bottom: .15rem; }
.builder-steps li span:not(.builder-steps__icon) { color: var(--ink-soft); font-size: .86rem; line-height: 1.8; }
.builder-panel__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.builder-panel__visual { position: relative; }
.builder-panel__visual::before { content: ''; position: absolute; inset: 8% -4% -6% 6%; z-index: 0; border-radius: 28px; background: linear-gradient(135deg, #0d5f9c, #1678ba); transform: rotate(-3deg); }
.builder-canvas { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--brand-100); box-shadow: var(--shadow-lg); }
.builder-canvas__bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; background: var(--surface-soft); border-bottom: 1px solid var(--brand-100); }
.builder-canvas__bar span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--brand-200); }
.builder-canvas__bar em { margin-inline-start: auto; font-style: normal; font-size: .8rem; font-weight: 600; color: var(--ink-soft); direction: rtl; }
.builder-canvas__rule { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1rem 1rem; border-top: 1px dashed var(--brand-100); }
.builder-canvas__rule span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 8px; background: var(--brand-050); color: var(--brand-700); font-size: .75rem; font-weight: 600; }
.builder-canvas__rule span:last-child { background: #fff4dc; color: #7a5200; }
.process-carousel { min-height: 14rem; display:grid; place-items:center; padding: 2rem 1.25rem 1rem; direction:rtl; }
.process-slide { grid-area:1/1; width:100%; text-align:center; opacity:0; transform:translateX(1rem); transition:opacity .45s ease, transform .45s ease; pointer-events:none; }
.process-slide.is-active { opacity:1; transform:none; pointer-events:auto; }
.process-slide strong { display:block; color:var(--ink); font-size:1.05rem; margin-bottom:1.25rem; }
.process-slide small { display:block; color:var(--ink-soft); margin-top:1.25rem; font-size:.82rem; }
.process-slide__image { display:block; width:min(100%, 31rem); max-height:13rem; object-fit:contain; margin:1rem auto 0; border:1px solid #b8cce2; border-radius:10px; background:#c9dced; }
.process-bpmn { display:block; width:100%; height:auto; overflow:visible; direction:ltr; }
.process-bpmn text { fill:var(--ink); font-family:inherit; font-size:12px; font-weight:700; text-anchor:middle; dominant-baseline:middle; }
.process-bpmn .bpmn-flow { fill:none; stroke:var(--ink-muted); stroke-width:2; }
.process-bpmn marker path { fill:var(--ink-muted); }
.process-bpmn .bpmn-start { fill:var(--surface); stroke:#1f9d6b; stroke-width:3; }
.process-bpmn .bpmn-end { fill:var(--surface); stroke:#c2410c; stroke-width:4; }
.process-bpmn .bpmn-task { fill:var(--surface); stroke:var(--brand-400); stroke-width:2; }
.process-bpmn .bpmn-task-active { fill:var(--brand-050); stroke:var(--brand-600); stroke-width:3; }
.process-bpmn .bpmn-gateway { fill:#fff4dc; stroke:#f6b024; stroke-width:2.5; }
.process-bpmn .bpmn-x { fill:none; stroke:#b07a00; stroke-width:2.5; stroke-linecap:round; }
.process-bpmn .bpmn-condition { fill:#9a6800; font-size:11px; font-weight:800; }
.process-bpmn--swimlane { background:#c9dced; border:1px solid #7891ad; border-radius:8px; }
.process-bpmn--swimlane .bpmn-swimlanes rect { fill:#c9dced; stroke:#7891ad; stroke-width:1; }
.process-bpmn--swimlane .bpmn-swimlanes rect:nth-child(2) { fill:#bed4e9; }
.process-bpmn--swimlane .bpmn-swimlanes rect:nth-child(3) { fill:#c5d9ec; }
.process-bpmn--swimlane .bpmn-swimlanes text { fill:#17324f; font-size:11px; font-weight:800; text-anchor:start; dominant-baseline:middle; }
.process-bpmn--swimlane .bpmn-swimlane-label,
.process-bpmn--swimlane .bpmn-condition-label { color:#17324f; font-family:Vazirmatn,Arial,sans-serif; font-size:11px; font-weight:800; line-height:36px; text-align:center; white-space:nowrap; }
.process-bpmn--swimlane .bpmn-condition-label { color:#9a6800; font-size:10px; line-height:30px; }
.process-bpmn--swimlane .bpmn-return-flow { stroke-dasharray:5 3; }
.process-bpmn--swimlane .bpmn-svg-label { color:#142f4c; font-family:Vazirmatn,Arial,sans-serif; font-size:11px; font-weight:800; line-height:45px; text-align:center; direction:rtl; overflow:hidden; }
.process-bpmn--swimlane .bpmn-condition-label { line-height:28px; }
.process-flow { display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.process-flow span { padding:.65rem .75rem; border:2px solid var(--brand-500); border-radius:10px; background:var(--surface); color:var(--ink); font-weight:700; font-size:.82rem; box-shadow:0 5px 14px rgba(19,105,180,.08); }
.process-flow i { color:var(--brand-600); font-size:.9rem; }
.process-dots { display:flex; justify-content:center; gap:.45rem; padding:0 0 1rem; direction:ltr; }
.process-dots span { width:.45rem; height:.45rem; border-radius:50%; background:var(--brand-200); transition:width .25s, background .25s; }
.process-dots span.is-active { width:1.35rem; border-radius:999px; background:var(--brand-600); }
.builder-canvas > .bpmn { display:none; }

.bpmn { display: block; width: 100%; height: auto; padding: .9rem; font-family: inherit; }
.bpmn__pool { fill: var(--surface-raised); stroke: var(--brand-200); stroke-width: 1.2; }
.bpmn__lane-line { stroke: var(--brand-100); stroke-width: 1.2; }
.bpmn__lane { fill: var(--ink-soft); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.bpmn__flows path { fill: none; stroke: var(--ink-muted); stroke-width: 1.6; }
.bpmn__head { fill: var(--ink-muted); }
.bpmn__flow-label { fill: var(--ink-soft); font-size: 10px; font-weight: 600; text-anchor: middle; }
.bpmn__start { fill: var(--surface); stroke: #1f9d6b; stroke-width: 2; }
.bpmn__end { fill: var(--surface); stroke: #c2410c; stroke-width: 4; }
.bpmn__task { fill: var(--surface); stroke: var(--brand-400); stroke-width: 1.6; }
.bpmn__task--active { fill: var(--brand-050); stroke: var(--brand-600); stroke-width: 2.2; }
.bpmn__text { fill: var(--ink); font-size: 11px; font-weight: 600; text-anchor: middle; }
.bpmn__gateway { fill: #fff4dc; stroke: #f6b024; stroke-width: 1.8; }
.bpmn__x { stroke: #b07a00; stroke-width: 2; stroke-linecap: round; }
.bpmn__token { fill: #f6b024; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 4px rgba(246,176,36,.6)); }
@media (prefers-reduced-motion: reduce) { .bpmn__token { display: none; } }

@media (max-width: 56.24em) {
  .builder-panel { grid-template-columns: 1fr; }
  .builder-panel__visual { order: -1; max-width: 34rem; width: 100%; justify-self: center; }
}
@media (max-width: 30em) { .bpmn { padding: .5rem; } }
html[data-theme="dark"] .bpmn__gateway { fill: rgba(246,176,36,.15); }
html[data-theme="dark"] .builder-canvas__rule span:last-child { background: rgba(246,176,36,.15); color: #f6c25a; }

/* ============================================================
   v25: hero showcase matched to vaghfeno.ir
   same blue surface + static watermark; on every slide change the old
   text disappears and the new title drops in from the top, then the
   description, then the outlined gold button.
   ============================================================ */
.hero--showcase .hero-showcase__slides {
  display: grid;
  transform: none !important;
  transition: none;
}
.hero--showcase .hero-showcase__slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.hero--showcase .hero-showcase__slide.is-active { visibility: visible; }
.hero--showcase .hero-showcase__content,
.hero--showcase .hero-showcase__content.is-entering { animation: none; }
.hero-showcase__glow { display: none; }

/* drop-in from the top, one after another */
.hero--showcase[data-slider-ready] .hero-showcase__content > * { opacity: 0; }
.hero--showcase[data-slider-ready] .hero-showcase__content.is-entering > * { animation: hero-drop .7s cubic-bezier(.22,.8,.3,1) both; }
.hero--showcase[data-slider-ready] .hero-showcase__content.is-entering > :nth-child(1) { animation-delay: .1s; }
.hero--showcase[data-slider-ready] .hero-showcase__content.is-entering > :nth-child(2) { animation-delay: .55s; }
.hero--showcase[data-slider-ready] .hero-showcase__content.is-entering > :nth-child(3) { animation-delay: .9s; }
@keyframes hero-drop {
  from { opacity: 0; transform: translateY(-60px); }
  to   { opacity: 1; transform: none; }
}

/* the CTA stays the site's outlined gold pill; arrow icon hidden to match */
.hero-showcase__button i { display: none; }

/* arrows: thin chevrons, left one points left, right one points right */
.hero--showcase .hero-showcase__arrow--prev { inset-inline-start: clamp(1rem, 13.5vw, 13.5rem); inset-inline-end: auto; }
.hero--showcase .hero-showcase__arrow--next { inset-inline-end: clamp(1rem, 13.5vw, 13.5rem); inset-inline-start: auto; }
@media (max-width: 56.24em) {
  .hero--showcase .hero-showcase__arrow--prev { inset-inline-start: .35rem; }
  .hero--showcase .hero-showcase__arrow--next { inset-inline-end: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--showcase[data-slider-ready] .hero-showcase__content > *,
  .hero--showcase[data-slider-ready] .hero-showcase__content.is-entering > * { opacity: 1; animation: none; }
}

/* ============================================================
   v26: hero sits on layered moving waves (like vaghfeno.ir) and the
   product cards float up onto the wave instead of starting a new block.
   ============================================================ */
:root { --hero-overlap: 6.5rem; --hero-wave-h: clamp(3.5rem, 7vw, 6rem); }

/* no rounded bottom any more: the wave is the edge */
.hero--showcase,
.hero--showcase { border-radius: 0; }
@media (max-width: 40em) { .hero--showcase { border-radius: 0; } }

/* taller surface; content lifted so it clears the cards */
.hero--showcase { min-height: 0; height: auto; max-height: none; aspect-ratio: auto; box-shadow: none; border: 0; }
.hero--showcase .hero-showcase__content { width: min(92%, 72rem); }
.hero--showcase .hero-showcase__content h1 { font-size: clamp(1.75rem, 3.6vw, 3.2rem); }
.hero--showcase .hero-showcase__slides { height: clamp(30rem, 44vw, 37rem); min-height: 0; }
.hero--showcase .hero-showcase__slide { align-items: start; padding-top: clamp(2rem, 6vw, 4.5rem); }
.hero--showcase .hero-showcase__content { padding-block: 1rem; }
.hero--showcase .hero-showcase__arrow { top: calc(50% - var(--hero-overlap) / 2); }
.hero--showcase .hero-showcase__dots { bottom: calc(var(--hero-overlap) + 1rem); }

.hero-waves {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  z-index: 1;
  width: 100%;
  height: var(--hero-wave-h);
  display: block;
  pointer-events: none;
  direction: ltr;
}
.hero-waves__layers > use { animation: hero-wave-move 22s cubic-bezier(.55,.5,.45,.5) infinite; }
.hero-waves__l1 { fill: rgba(255,255,255,.18); animation-delay: -2s !important;  animation-duration: 9s !important; }
.hero-waves__l2 { fill: rgba(255,255,255,.28); animation-delay: -3s !important;  animation-duration: 13s !important; }
.hero-waves__l3 { fill: rgba(255,255,255,.4);  animation-delay: -4s !important;  animation-duration: 17s !important; }
.hero-waves__l4 { fill: var(--surface);        animation-delay: -5s !important;  animation-duration: 24s !important; }
@keyframes hero-wave-move {
  0%   { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}
html[data-theme="dark"] .hero-waves__l1 { fill: rgba(11,22,38,.25); }
html[data-theme="dark"] .hero-waves__l2 { fill: rgba(11,22,38,.4); }
html[data-theme="dark"] .hero-waves__l3 { fill: rgba(11,22,38,.6); }

/* products float onto the wave */
.section.home-products {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * var(--hero-overlap));
  padding-top: 0;
}
.home-products .product-card {
  border-color: transparent;
  box-shadow: 0 18px 40px -18px rgba(13, 63, 125, .35), 0 2px 8px rgba(13, 63, 125, .06);
}
.home-products .product-card:hover { box-shadow: 0 26px 50px -18px rgba(13, 63, 125, .42), 0 2px 8px rgba(13, 63, 125, .08); }
html[data-theme="dark"] .home-products .product-card { border-color: var(--line); box-shadow: var(--shadow-md); }

@media (max-width: 56.24em) {
  :root { --hero-overlap: 4.5rem; }
  .hero--showcase .hero-showcase__slides { height: 30rem; }
}
@media (max-width: 30em) {
  :root { --hero-overlap: 3.5rem; }
  .hero--showcase .hero-showcase__slides { height: 31rem; }
}

/* v42: hero palette matched to vaghfeno.ir, deep clear blue, not turquoise. */
.hero--showcase {
  background: #1674b9;
}
.hero--showcase::before {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(255,255,255,.08), transparent 36%),
    radial-gradient(ellipse at 18% 100%, rgba(32,137,205,.25), transparent 44%),
    linear-gradient(135deg, #1164a1 0%, #197bc0 52%, #1670b2 100%);
}
.hero--showcase::after {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), transparent 30%),
    linear-gradient(90deg, rgba(4,53,99,.08), transparent 42%, rgba(4,53,99,.1));
}
.hero-showcase__watermark {
  opacity: .14;
  filter: grayscale(1) brightness(2.1) drop-shadow(0 18px 28px rgba(2,55,97,.16));
}
.hero-showcase__button {
  background: rgba(20,113,177,.2);
  box-shadow: 0 8px 20px rgba(2,55,97,.12);
}
.hero-waves__l1 { fill: rgba(255,255,255,.18); }
.hero-waves__l2 { fill: rgba(255,255,255,.28); }
.hero-waves__l3 { fill: rgba(255,255,255,.4); }
@media (prefers-reduced-motion: reduce) {
  .hero-waves__layers > use { animation: none !important; }
}

/* v27: supplied hero artwork replaces the old flat blue and separate watermark. */
.hero--showcase::before {
  background-image:
    linear-gradient(90deg, rgba(5, 65, 111, .9) 0%, rgba(7, 104, 155, .72) 46%, rgba(15, 139, 170, .48) 100%),
    url('/assets/images/hero/hero-bg.webp');
  background-position: center, 68% center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal;
}
.hero--showcase::after {
  background:
    radial-gradient(circle at 76% 38%, rgba(255,255,255,.12), transparent 27%),
    linear-gradient(180deg, rgba(1, 48, 91, .08), rgba(4, 67, 110, .2));
}
.hero-showcase__watermark { display: none; }
.hero-showcase__content::before {
  background: radial-gradient(ellipse, rgba(2, 47, 86, .24), transparent 69%);
}

/* v28: match the supplied reference exactly: flat royal blue surface + native watermark. */
.hero--showcase::before {
  background: #1475ba;
  background-image: linear-gradient(135deg, #0d6db0 0%, #1879bd 56%, #1268a8 100%);
}
.hero--showcase::after {
  background:
    radial-gradient(circle at 58% 43%, rgba(255,255,255,.035), transparent 30%),
    linear-gradient(90deg, rgba(4,54,96,.06), transparent 46%, rgba(4,54,96,.08));
}
.hero-showcase__watermark {
  display: block;
  inset: -12% 3% -28% 40%;
  opacity: .13;
  background-image: url('/assets/images/logo/logo-watermark.webp');
  background-size: min(48rem, 72%);
  background-position: 72% 48%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 18px 28px rgba(2,55,97,.12));
  -webkit-mask-image: none;
  mask-image: none;
}
.hero-showcase__content::before { background: none; }

/* v29: Bootstrap-style hero composition from the supplied reference. */
.hero--showcase {
  background: #1475ba;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.hero--showcase .hero-showcase__slides {
  width: 100%;
  height: clamp(30rem, 44vw, 37rem);
}
.hero--showcase .hero-showcase__slide { align-items: center; padding-top: 0; }
.hero--showcase .hero-showcase__content {
  width: min(90%, 72rem);
  padding: 2rem;
  text-align: center;
}
.hero--showcase .hero-showcase__content h1 {
  margin-bottom: .85rem;
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  line-height: 1.4;
}
.hero--showcase .hero-showcase__content p { margin-bottom: 2rem; }
.hero--showcase .hero-showcase__button { min-width: 9.2rem; }
.hero-waves { height: clamp(4rem, 7vw, 6rem); z-index: 3; }
.hero-waves .wave1 { animation: hero-wave-move 12s linear infinite; }
.hero-waves .wave2 { animation: hero-wave-move 8s linear infinite reverse; }
.hero-waves .wave3 { animation: hero-wave-move 16s linear infinite; }
.hero-waves use { fill: rgba(255,255,255,.1); }
.hero-waves .wave2 use { fill: rgba(255,255,255,.2); }
.hero-waves .wave3 use { fill: var(--surface); }
@media (prefers-reduced-motion: reduce) {
  .hero-waves .wave1, .hero-waves .wave2, .hero-waves .wave3 { animation: none; }
}

/* v30: final live-site parity pass for vaghfeno.ir's home hero. */
.hero--showcase {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: clamp(31rem, 34vw, 33.5rem);
  min-height: 0;
  max-height: none;
  overflow: hidden;
  background: #1475ba;
  border-radius: 0;
  box-shadow: none;
}
.hero--showcase::before {
  background: linear-gradient(135deg, #106daf 0%, #1879bc 58%, #1169aa 100%);
}
.hero--showcase::after {
  background: linear-gradient(90deg, rgba(4,53,95,.08), transparent 48%, rgba(4,53,95,.1));
}
.hero-showcase__watermark {
  inset: -13% 1% -30% 43%;
  opacity: .14;
  background-size: min(52rem, 73%);
  background-position: 72% 48%;
  filter: none;
}
.hero--showcase .hero-showcase__slides { height: 100%; }
.hero--showcase .hero-showcase__slide { padding: 0; }
.hero--showcase .hero-showcase__content {
  width: min(90%, 70rem);
  padding: 2rem;
  transform: translateY(-1.8rem);
}
.hero--showcase .hero-showcase__content h1 {
  max-width: 70rem;
  margin-inline: auto;
  font-size: clamp(2rem, 4.45vw, 3.5rem);
  line-height: 1.38;
}
.hero--showcase .hero-showcase__content p { margin-bottom: 2.2rem; }
.hero--showcase .hero-showcase__arrow { top: 50%; }
.hero-waves { height: clamp(3.5rem, 5.5vw, 5.5rem); bottom: -1px; }
.section.home-products { --hero-overlap: clamp(4rem, 6vw, 5.5rem); margin-top: calc(-1 * var(--hero-overlap)); }
.home-products .products-grid { position: relative; z-index: 5; }
@media (max-width: 56.24em) {
  .hero--showcase { height: 30rem; }
  .hero--showcase .hero-showcase__content { transform: translateY(-1rem); }
}
@media (max-width: 40em) {
  .hero--showcase { height: 31rem; }
  .hero-showcase__watermark { inset: -5% -23% -20% 22%; background-size: 95%; background-position: 78% 50%; opacity: .12; }
  .hero--showcase .hero-showcase__content { width: 100%; padding-inline: 2.75rem; }
  .hero--showcase .hero-showcase__content h1 { font-size: clamp(1.7rem, 7vw, 2.25rem); }
}

/* v31: oversized watermark, intentionally cropped so only its right half reads. */
.hero-showcase__watermark {
  inset: -38% -38% -38% 43%;
  opacity: .14;
  background-size: 100% auto;
  background-position: 100% 50%;
}
@media (max-width: 56.24em) {
  .hero-showcase__watermark {
    inset: -28% -44% -28% 32%;
    background-size: 115% auto;
    background-position: 100% 50%;
  }
}
@media (max-width: 40em) {
  .hero-showcase__watermark {
    inset: -22% -58% -22% 12%;
    background-size: 145% auto;
    background-position: 100% 50%;
    opacity: .13;
  }
}

/* v33: match the supplied reference frames: blue hero, oversized right watermark,
   readable centered copy, and cards peeking over the white wave. */
.hero--showcase {
  height: clamp(31rem, 35.5vw, 35rem);
  background: #1475ba;
}
.hero--showcase::before {
  background:
    linear-gradient(90deg, rgba(10,104,170,.12), rgba(19,122,190,.04) 58%, rgba(7,81,139,.18)),
    linear-gradient(135deg, #116daf 0%, #1879bd 55%, #116aa9 100%);
}
.hero--showcase::after { background: none; }
.hero-showcase__watermark {
  display: block;
  inset: -22% -24% -30% 42%;
  opacity: .14;
  background-image: url('/assets/images/logo/logo-watermark.webp');
  background-repeat: no-repeat;
  background-size: min(70rem, 112%) auto;
  background-position: 100% 50%;
  filter: none;
}
.hero--showcase .hero-showcase__content {
  width: min(92%, 78rem);
  padding-inline: 3rem;
  transform: translateY(-2.5rem);
}
.hero--showcase .hero-showcase__content h1 {
  max-width: 70rem;
  font-size: clamp(1.8rem, 3.7vw, 3.35rem);
  line-height: 1.48;
}
.hero--showcase .hero-showcase__content p { font-size: clamp(.95rem, 1.35vw, 1.12rem); }
.hero--showcase .hero-showcase__arrow--prev { inset-inline-start: clamp(1rem, 13vw, 13.5rem); }
.hero--showcase .hero-showcase__arrow--next { inset-inline-end: clamp(1rem, 13vw, 13.5rem); }
.hero-waves { height: clamp(3.5rem, 5.2vw, 5.25rem); }
.section.home-products { --hero-overlap: clamp(4rem, 5.6vw, 5.25rem); }
@media (max-width: 56.24em) {
  .hero--showcase { height: 31rem; }
  .hero-showcase__watermark { inset: -20% -35% -28% 28%; background-size: 125% auto; }
  .hero--showcase .hero-showcase__content { transform: translateY(-1.8rem); }
  .hero--showcase .hero-showcase__content h1 { font-size: clamp(1.75rem, 4.8vw, 2.8rem); }
}
@media (max-width: 40em) {
  .hero--showcase { height: 31rem; }
  .hero-showcase__watermark { inset: -8% -58% -12% 5%; background-size: 155% auto; opacity: .12; }
  .hero--showcase .hero-showcase__content { width: 100%; padding-inline: 3.1rem; transform: translateY(-1.3rem); }
  .hero--showcase .hero-showcase__content h1 { font-size: clamp(1.55rem, 6.6vw, 2.15rem); line-height: 1.55; }
  .hero--showcase .hero-showcase__content p { font-size: .9rem; line-height: 1.8; }
  .hero--showcase .hero-showcase__arrow--prev { inset-inline-start: .2rem; }
  .hero--showcase .hero-showcase__arrow--next { inset-inline-end: .2rem; }
}

/* v35: use the supplied mark as a real transparent watermark. Keep the whole
   upper and lower calligraphy visible instead of slicing the source image. */
.hero-showcase__watermark {
  inset: 2% 3% 6% 47%;
  opacity: .17;
  background-image: url('/assets/images/logo/hero-logo-transparent.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  filter: none;
  clip-path: none;
}
@media (max-width: 56.24em) {
  .hero-showcase__watermark { inset: 4% -2% 8% 38%; background-size: contain; opacity: .15; }
}
@media (max-width: 40em) {
  .hero-showcase__watermark { inset: 7% -10% 12% 20%; background-size: contain; opacity: .13; }
}


/* v39: product cards enter from below, as requested. Keep the whole card in one motion,
   then stagger its contents so the eye reads the hierarchy naturally. */
.products-grid .product-card[data-reveal] { opacity:0; transform:translateY(52px); }
.products-grid .product-card[data-reveal].is-visible { opacity:1; transform:translateY(0); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.products-grid .product-card.is-visible .product-card__media { animation:card-media-rise .55s var(--ease-out) .12s both; }
.products-grid .product-card.is-visible .product-card__title { animation:card-content-rise .5s var(--ease-out) .22s both; }
.products-grid .product-card.is-visible .product-card__desc { animation:card-content-rise .5s var(--ease-out) .3s both; }
.products-grid .product-card.is-visible .product-card__link { animation:card-content-rise .5s var(--ease-out) .38s both; }
.products-grid .product-card.is-visible .product-card__login { animation:card-content-rise .5s var(--ease-out) .46s both; }
@keyframes card-media-rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes card-content-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }

/* BPMN drawing mode: flows sketch themselves, then nodes and labels settle in. */
.process-slide.is-active .process-bpmn .bpmn-flow,
.builder-canvas > .bpmn .bpmn__flows path,
.builder-canvas > .bpmn .bpmn__lane-line { stroke-dasharray:900; stroke-dashoffset:900; animation:bpmn-draw 1.25s ease-out .1s forwards; }
.process-slide.is-active .process-bpmn .bpmn-task,
.process-slide.is-active .process-bpmn .bpmn-start,
.process-slide.is-active .process-bpmn .bpmn-end,
.process-slide.is-active .process-bpmn .bpmn-gateway,
.builder-canvas > .bpmn .bpmn__task,
.builder-canvas > .bpmn .bpmn__start,
.builder-canvas > .bpmn .bpmn__end,
.builder-canvas > .bpmn .bpmn__gateway { opacity:0; animation:bpmn-node-in .42s var(--ease-out) .75s forwards; }
.process-slide.is-active .process-bpmn text,
.builder-canvas > .bpmn text { opacity:0; animation:bpmn-label-in .4s ease-out 1s forwards; }
@keyframes bpmn-draw { to { stroke-dashoffset:0; } }
@keyframes bpmn-node-in { from { opacity:0; transform:scale(.82); transform-box:fill-box; transform-origin:center; } to { opacity:1; transform:scale(1); } }
@keyframes bpmn-label-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .products-grid .product-card[data-reveal], .products-grid .product-card[data-reveal].is-visible,
  .products-grid .product-card.is-visible .product-card__media, .products-grid .product-card.is-visible .product-card__title,
  .products-grid .product-card.is-visible .product-card__desc, .products-grid .product-card.is-visible .product-card__link,
  .products-grid .product-card.is-visible .product-card__login, .process-slide.is-active .process-bpmn *,
  .builder-canvas > .bpmn * { animation:none!important; opacity:1; transform:none; stroke-dashoffset:0; }
}

/* The old BPMN artwork was too dense and unreadable in the carousel. Keep the
   process semantic, but show a calm, editable sequence of nodes instead. */
.process-bpmn { display: none; }
.builder-canvas > .bpmn { display: none; }
.process-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin: 1.2rem 0 .8rem; padding: 0; list-style: none; }
.process-flow li { display: flex; align-items: center; gap: .55rem; }
.process-flow li:not(:last-child)::after { content: '←'; color: var(--brand-500); font-size: 1.3rem; font-weight: 800; }
.process-flow__node { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .45rem .75rem; border: 1px solid var(--brand-200); border-radius: .7rem; background: var(--brand-050); color: var(--brand-700); font-size: .78rem; font-weight: 800; box-shadow: 0 5px 14px rgba(24, 91, 170, .08); }


/* The loader owns the first impression. Nothing underneath is allowed to spend its
   entrance animation while the veil is still visible. */
body:not(.page-ready) .products-grid .product-card[data-reveal] { opacity:0 !important; transform:translateY(52px) !important; }
body:not(.page-ready) .process-slide .process-bpmn *,
body:not(.page-ready) .builder-canvas > .bpmn * { animation:none !important; opacity:0 !important; stroke-dashoffset:900 !important; }
body.page-ready .products-grid .product-card[data-reveal].is-visible { animation:card-shell-in .65s var(--ease-out) both; }
@keyframes card-shell-in { from { opacity:0; transform:translateY(52px); } to { opacity:1; transform:translateY(0); } }
body.page-ready .process-slide.is-active .process-bpmn .bpmn-flow,
body.page-ready .builder-canvas > .bpmn .bpmn__flows path,
body.page-ready .builder-canvas > .bpmn .bpmn__lane-line { animation:bpmn-draw 1.25s ease-out .1s forwards; }
body.page-ready .process-slide.is-active .process-bpmn .bpmn-task,
body.page-ready .process-slide.is-active .process-bpmn .bpmn-start,
body.page-ready .process-slide.is-active .process-bpmn .bpmn-end,
body.page-ready .process-slide.is-active .process-bpmn .bpmn-gateway,
body.page-ready .builder-canvas > .bpmn .bpmn__task,
body.page-ready .builder-canvas > .bpmn .bpmn__start,
body.page-ready .builder-canvas > .bpmn .bpmn__end,
body.page-ready .builder-canvas > .bpmn .bpmn__gateway { animation:bpmn-node-in .42s var(--ease-out) .75s forwards; }
body.page-ready .process-slide.is-active .process-bpmn text,
body.page-ready .builder-canvas > .bpmn text { animation:bpmn-label-in .4s ease-out 1s forwards; }


/* Culture media is video-first and remains manageable from Admin > Homepage. */
.culture-panel__video-empty { position:absolute; inset:0; display:grid; place-content:center; gap:.55rem; padding:2rem; text-align:center; color:#fff; background:linear-gradient(145deg,#0d5f9c,#12385d); }
.culture-panel__video-empty i { font-size:2.8rem; color:#f6b024; }
.culture-panel__video-empty strong { font-size:1.05rem; }
.culture-panel__video-empty span { color:rgba(255,255,255,.78); font-size:.85rem; }
/* Bizagi convention: RTL shell, but sequence itself starts at the left and advances right. */
.process-bpmn, .bpmn { direction:ltr; }
.bpmn-ltr-content { direction:ltr; }


/* ============================================================
   v40: hero background = the supplied reference artwork itself
   (text, buttons and cards removed from the picture). The mesh, light
   rays, calligraphy mark and pale wave are all baked into the image,
   so the separate watermark and extra wave layers are switched off.
   ============================================================ */
.hero--showcase { background: #0a4fa3; }
.hero--showcase::before {
  z-index: -2;
  background: #0a4fa3 url('/assets/images/hero/hero-bg-ref.webp') center bottom / cover no-repeat;
}
.hero--showcase::after { background: none; }
.hero-showcase__watermark { display: none; }
.hero-waves .wave1, .hero-waves .wave2 { display: none; }
.hero-waves .wave3 use { fill: var(--surface); }
@media (max-width: 56.24em) {
  /* keep the calligraphy mark in frame on tablets */
  .hero--showcase::before { background-position: 80% bottom; }
}
@media (max-width: 40em) {
  .hero--showcase::before { background-position: 88% bottom; }
}
html[data-theme="dark"] .hero--showcase::before { filter: brightness(.72) saturate(.9); }


/* ============================================================
   v41: minimal hero (desktop + mobile frames supplied by the client)
   - background = hero-bg.jpg (teal gradient + Miras calligraphy on the right)
   - only title · one line · outlined «جزئیات بیشتر» + two arrows; no dots, glow or watermark
   - the three soft waves come back (the old reference image had them baked in)
   ============================================================ */
.hero--showcase { background: #3d9fbd; }
.hero--showcase::before {
  z-index: -2;
  background: #3d9fbd url('/assets/images/hero/hero-bg.webp') 50% 42% / cover no-repeat;
  filter: none;
}
/* teal veil: turns the bright silver calligraphy into a calm watermark (like the reference) so the white copy reads.
   Want the logo stronger? lower the .52 / .46 numbers. */
.hero--showcase::after { background: linear-gradient(180deg, rgba(38, 128, 165, .52), rgba(52, 148, 182, .46)); }
.hero-showcase__watermark,
.hero-showcase__glow,
.hero-showcase__dots { display: none !important; }
.hero-showcase__content::before { display: none; }
.hero--showcase .hero-showcase__content { width: min(92%, 62rem); padding: 1.5rem 2rem; transform: translateY(-2rem); }
.hero--showcase .hero-showcase__content h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.45;
  text-shadow: 0 2px 18px rgba(0, 45, 75, .25);
}
.hero--showcase .hero-showcase__content p {
  max-width: 38rem;
  margin: 0 auto 2.2rem;
  font-size: clamp(.95rem, 1.25vw, 1.08rem);
  line-height: 1.9;
  color: rgba(255, 255, 255, .95);
}
.hero--showcase .hero-showcase__button {
  min-width: 9.5rem;
  padding: .7rem 1.6rem;
  border: 2px solid #f6b024;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  color: #fff;
}
/* «جزئیات بیشتر»: on hover the text turns white (the pill fills with the brand yellow) */
.hero--showcase .hero-showcase__button:hover,
.hero--showcase .hero-showcase__button:focus-visible { background: #f6b024; color: #fff; }
.hero--showcase .hero-showcase__button:hover span { color: #fff; }
.hero--showcase .hero-showcase__arrow { color: rgba(255, 255, 255, .7); text-shadow: none; font-size: 1.5rem; }
.hero--showcase .hero-showcase__arrow:hover { color: #fff; }
.hero-waves .wave1, .hero-waves .wave2 { display: inline; }
.hero-waves .wave1 use { fill: rgba(255, 255, 255, .16); }
.hero-waves .wave2 use { fill: rgba(255, 255, 255, .26); }
.hero-waves .wave3 use { fill: var(--surface); }
html[data-theme="dark"] .hero--showcase::before { filter: brightness(.7) saturate(.9); }

/* tablet */
@media (max-width: 56.24em) {
  .hero--showcase::before { background-position: 78% center; }
  .hero--showcase .hero-showcase__content { transform: translateY(-1.5rem); }
}
/* phone: tall, centred, calligraphy sitting behind the copy (mobile reference frame) */
@media (max-width: 40em) {
  .hero--showcase { height: clamp(34rem, 92svh, 46rem); }
  .hero--showcase::before { background-position: 74% center; }
  .hero--showcase::after { background: linear-gradient(180deg, rgba(38, 128, 165, .58), rgba(52, 148, 182, .5)); }
  .hero--showcase .hero-showcase__content { width: 100%; padding-inline: 2.6rem; transform: translateY(-1rem); }
  .hero--showcase .hero-showcase__content h1 { font-size: clamp(1.45rem, 6.2vw, 1.95rem); line-height: 1.6; margin-bottom: 1.4rem; }
  .hero--showcase .hero-showcase__content p { font-size: .92rem; line-height: 1.95; margin-bottom: 2.4rem; }
  .hero--showcase .hero-showcase__arrow { font-size: 1.35rem; width: 2.4rem; height: 2.4rem; }
}


/* ============================================================
   v41: product cards slide in from the RIGHT, one after another.
   animations.js gives every card its turn (--reveal-order) inside each batch.
   ============================================================ */
#main-content { overflow-x: clip; }
/* waiting (not reached yet, or the loader is still up): parked off to the right */
.products-grid .product-card[data-reveal]:not(.is-visible),
body:not(.page-ready) .products-grid .product-card[data-reveal] { opacity: 0 !important; transform: translateX(90px) !important; }
/* its turn: slide in (no !important here, it would freeze the animation and the hover tilt) */
body.page-ready .products-grid .product-card[data-reveal].is-visible {
  animation: card-from-right .8s cubic-bezier(.22, .8, .3, 1) backwards;   /* backwards: hover tilt works once it lands */
  animation-delay: calc(var(--reveal-order, 0) * 220ms);
}
@keyframes card-from-right { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: translateX(0); } }
/* inner content follows its own card (same direction, slightly later) */
body.page-ready .products-grid .product-card.is-visible .product-card__media { animation: card-inner-from-right .6s var(--ease-out) calc(var(--reveal-order, 0) * 220ms + .15s) backwards; }
body.page-ready .products-grid .product-card.is-visible .product-card__title { animation: card-inner-from-right .55s var(--ease-out) calc(var(--reveal-order, 0) * 220ms + .25s) backwards; }
body.page-ready .products-grid .product-card.is-visible .product-card__desc  { animation: card-inner-from-right .55s var(--ease-out) calc(var(--reveal-order, 0) * 220ms + .33s) backwards; }
body.page-ready .products-grid .product-card.is-visible .product-card__link  { animation: card-inner-from-right .55s var(--ease-out) calc(var(--reveal-order, 0) * 220ms + .41s) backwards; }
body.page-ready .products-grid .product-card.is-visible .product-card__login { animation: card-inner-from-right .55s var(--ease-out) calc(var(--reveal-order, 0) * 220ms + .49s) backwards; }
@keyframes card-inner-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* «سیستم‌ساز پاس» steps also enter from the right, one by one */
.builder-panel .builder-steps > li { opacity: 0; transform: translateX(48px); }
body.page-ready .builder-panel.is-visible .builder-steps > li { animation: card-inner-from-right .6s var(--ease-out) both; }
body.page-ready .builder-panel.is-visible .builder-steps > li:nth-child(1) { animation-delay: .35s; }
body.page-ready .builder-panel.is-visible .builder-steps > li:nth-child(2) { animation-delay: .55s; }
body.page-ready .builder-panel.is-visible .builder-steps > li:nth-child(3) { animation-delay: .75s; }
body.page-ready .builder-panel.is-visible .builder-steps > li:nth-child(n+4) { animation-delay: .95s; }

@media (prefers-reduced-motion: reduce) {
  .products-grid .product-card[data-reveal]:not(.is-visible),
  body:not(.page-ready) .products-grid .product-card[data-reveal],
  body.page-ready .products-grid .product-card[data-reveal].is-visible,
  .builder-panel .builder-steps > li { opacity: 1 !important; transform: none !important; animation: none !important; }
  body.page-ready .products-grid .product-card.is-visible * { animation: none !important; }
}

/* v43: final solid blue overlay, matching the blue site hero screenshot. */
.hero--showcase::before { background: #1674b9 !important; }
.hero--showcase::after { background: rgba(20, 112, 180, .08) !important; }
.hero--showcase { background: #1674b9 !important; }
.hero-showcase__watermark { opacity: .14 !important; }

/* v44: supplied hero artwork, used as the full hero background. */
.hero--showcase::before {
  background: #45a8c0 url('/assets/images/hero/hero-reference.webp') center / cover no-repeat !important;
}
.hero--showcase::after {
  background: linear-gradient(90deg, rgba(30,140,170,.10), rgba(30,140,170,0) 55%) !important;
}
.hero-showcase__watermark { display: none; }

/* v45: blue brand tint over the supplied artwork, preserving the logo detail. */
.hero--showcase::before {
  background: #45a8c0 url('/assets/images/hero/hero-reference.webp') center / cover no-repeat !important;
  z-index: -2 !important;
}
.hero--showcase::after {
  background: rgba(16, 104, 177, .62) !important;
  z-index: -1 !important;
  mix-blend-mode: multiply;
}

/* v47: clean solid blue hero, matching the original Vaghfeno composition. */
.hero--showcase {
  background: #1674b9 !important;
}
.hero--showcase::before {
  background: linear-gradient(135deg, #1164a1 0%, #1674b9 52%, #197bc0 100%) !important;
}
.hero--showcase::after {
  background: radial-gradient(circle at 64% 42%, rgba(54,145,211,.18), transparent 36%), linear-gradient(90deg, rgba(4,53,99,.08), transparent 48%, rgba(4,53,99,.12)) !important;
  opacity: 1 !important;
}
.hero-showcase__watermark { display: none !important; }
.hero-waves__l1 { fill: rgba(255,255,255,.10) !important; }
.hero-waves__l2 { fill: rgba(255,255,255,.20) !important; }
.hero-waves__l3 { fill: #fff !important; }

/* v48: keep the artwork, remove its turquoise base, and tint it with the site blue. */
.hero--showcase::before {
  background: #1674b9 !important;
}
.hero--showcase::after {
  background: url('/assets/images/hero/hero-reference.webp') 72% 44% / min(52rem, 58vw) auto no-repeat, rgba(22,116,185,.78) !important;
  opacity: .48 !important;
  mix-blend-mode: multiply !important;
}
.hero-showcase__watermark { display: none !important; }

/* v49: supplied artwork fills the full hero width and scales responsively. */
.hero--showcase {
  width: 100vw !important;
  max-width: none !important;
  margin-inline: calc(50% - 50vw) !important;
  overflow: hidden;
}
.hero--showcase::after {
  inset: 0 !important;
  background: url('/assets/images/hero/hero-reference.webp') center center / cover no-repeat, rgba(22,116,185,.78) !important;
  opacity: .48 !important;
  mix-blend-mode: multiply !important;
}
@media (max-width: 56.24em) {
  .hero--showcase::after { background-position: 68% center; background-size: cover; }
}

/* v50: shift the hero artwork slightly lower without changing its full-width responsive behavior. */
.hero--showcase::after {
  background-position: center 25% !important;
}
@media (max-width: 56.24em) {
  .hero--showcase::after { background-position: 68% 25% !important; }
}

/* v54: fade the hero artwork without blurring it. */
.hero--showcase::after { filter: none !important; opacity: .25 !important; }

/* v55: hero CTA enters upward from below. */
.hero--showcase[data-slider-ready] .hero-showcase__content.is-entering > :nth-child(3) {
  animation-name: hero-rise !important;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}

/* Process visuals are supplied from the admin panel. No hardcoded BPMN
   artwork is rendered here. */
.process-slide { align-content: start; }
.process-slide__image {
  display: block;
  width: 100%;
  max-height: 19rem;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--surface);
}
.process-slide__empty {
  min-height: 10rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .6rem;
  padding: 1.5rem;
  border: 1px dashed var(--brand-200);
  border-radius: .85rem;
  background: var(--brand-050);
  color: var(--ink-soft);
  text-align: center;
  font-size: .85rem;
}
.process-slide__empty i { color: var(--brand-500); font-size: 2rem; }

/* Mobile: the culture (video) panel must not slide in from the right, it caused a visible sideways jump. */
@media (max-width: 768px) {
  .culture-panel[data-reveal], .culture-panel[data-reveal].is-visible { transform: none !important; }
}