/* ============================================================
   ElhassanSolutions — Product Showcase (PAB Edition)
   Extends landing.css — PAB tokens: #FFFFFF, #010B13, #FFFFFF, #1560BD, #B8C9E8, rounded-none
   ============================================================ */

.lp-section-alt { background: var(--surface, #FFFFFF); border-top: 1px solid var(--border, #B8C9E8); border-bottom: 1px solid var(--border, #B8C9E8); }

/* Product showcase — PAB card: white, border, rounded-none */
.lp-product-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border, #B8C9E8);
  border-radius: 0;
  padding: 16px;
}
@media (min-width: 900px) {
  .lp-product-showcase { grid-template-columns: 1fr 1fr; padding: 20px; }
}

.lp-product-showcase + .lp-product-showcase { margin-top: 16px; }

.lp-product-visual { display: flex; justify-content: center; }

.lp-product-mockup {
  max-width: 100%;
  border: 1px solid var(--border, #B8C9E8);
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

.lp-product-badge {
  display: inline-block;
  background: var(--success, #1560BD);
  color: #010B13;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 0;
  margin-bottom: 12px;
  border: 1px solid var(--success, #1560BD);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--font-mono, "Roboto Mono", monospace);
}

.lp-product-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground, #010B13);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.lp-product-tagline {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary, #1560BD);
  margin: 0 0 12px;
}

.lp-product-desc {
  font-size: 0.8125rem;
  color: var(--muted-foreground, #010B13);
  line-height: 1.6;
  margin: 0 0 16px;
}

.lp-product-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.lp-product-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--foreground, #010B13);
  border: 1px solid var(--border, #B8C9E8);
  padding: 6px 8px;
  background: var(--surface, #FFFFFF);
}
.lp-product-feature svg { width: 12px; height: 12px; color: var(--success, #1560BD); flex-shrink: 0; }

.lp-product-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Process steps — PAB */
.lp-process { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .lp-process { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .lp-process { grid-template-columns: repeat(5, 1fr); } }

.lp-process-step {
  text-align: center;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border, #B8C9E8);
  border-radius: 0;
  transition: background .15s;
}
.lp-process-step:hover { background: var(--surface, #FFFFFF); }

.lp-step-number {
  width: 32px; height: 32px;
  background: var(--primary, #1560BD);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  border: 1px solid var(--primary, #1560BD);
  font-family: var(--font-mono, "Roboto Mono", monospace);
}

.lp-process-step h3 { font-size: 0.875rem; font-weight: 700; color: var(--foreground, #010B13); margin: 0 0 6px; }
.lp-process-step p { font-size: 0.75rem; color: var(--muted-foreground, #010B13); margin: 0; line-height: 1.5; }

/* Footer nav — PAB */
.lp-footer-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0; flex-wrap: wrap; }
.lp-footer-nav a { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground, #010B13); transition: color .15s; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono, "Roboto Mono", monospace); }
.lp-footer-nav a:hover { color: var(--primary, #1560BD); }

body.rtl .lp-product-features { direction: rtl; }
body.rtl .lp-process-step { direction: rtl; }
body.rtl .lp-footer-nav { direction: rtl; }

@media (max-width: 640px) {
  .lp-product-features { grid-template-columns: 1fr; }
  .lp-product-actions { flex-direction: column; align-items: stretch; }
  .lp-product-actions .btn-try { justify-content: center; }
  .lp-product-actions .btn-plain { justify-content: center; }
}