/* ============================================================
   WAFGENE BUSINESS SOLUTIONS — page styles
   ============================================================ */

.hero-business {
  padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 72px);
  overflow: hidden;
}
.hero-business-grid {
  display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center;
}
@media (min-width: 900px) { .hero-business-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-business .lede { margin-bottom: 28px; }
.hero-business-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-business-art {
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-100);
  background: var(--paper);
  box-shadow: var(--shadow-rest);
  padding: 22px;
}
.hero-business-art .art-header { display: flex; gap: 8px; margin-bottom: 16px; }
.hero-business-art .art-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-100); }
.hero-business-art .art-bars { display: grid; grid-template-columns: repeat(6,1fr); align-items: end; gap: 8px; height: 130px; margin-bottom: 18px; }
.hero-business-art .art-bar { background: linear-gradient(180deg, var(--orchid-400), var(--violet-700)); border-radius: 4px 4px 0 0; }
.hero-business-art .art-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ink-100); }
.hero-business-art .art-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.hero-business-art .art-row .bar { height: 7px; border-radius: 4px; background: var(--ink-100); flex: 1; }

/* NRS spotlight */
.einvoice-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  padding: 30px 10px;
}
.einvoice-node {
  flex: 1; min-width: 140px;
  text-align: center; padding: 20px 14px;
  border: 1px solid var(--ink-100); border-radius: var(--radius-md);
  background: var(--paper);
}
.einvoice-node .icon-badge { margin: 0 auto 14px; }
.einvoice-node strong { display: block; font-family: var(--font-display); font-size: 0.9rem; color: var(--ink-900); }
.einvoice-node span { font-size: 0.78rem; color: var(--ink-500); }
.einvoice-arrow {
  flex-shrink: 0; width: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--violet-500);
}
@media (max-width: 700px) { .einvoice-arrow { transform: rotate(90deg); width: 100%; margin-block: -4px; } }

.industry-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media (min-width: 700px) { .industry-grid { grid-template-columns: repeat(4,1fr); } }
.industry-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--ink-100);
}
.industry-tile svg { width: 24px; height: 24px; color: var(--violet-700); }

.resource-card { border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: 24px; }
.resource-card .kicker { margin-bottom: 10px; }