/* ============================================================
   SMOCELL — Business / Wholesale (dark enterprise)
   ============================================================ */

body.page-business { background: var(--c-dark); color: var(--c-dark-ink); }

/* ---------- Hero ---------- */

.biz-hero {
  position: relative;
  padding-top: clamp(8rem, 6rem + 8vw, 13rem);
  padding-bottom: var(--section-pad-sm);
  overflow: clip;
}
.biz-hero::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 205, 189, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.biz-hero h1 { font-size: var(--t-hero); letter-spacing: var(--track-display); line-height: var(--leading-tight); max-width: 11em; }
.biz-hero .t-lead { margin-top: var(--space-5); max-width: 40em; }
.biz-hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }

/* ---------- Inventory flow animation ---------- */

.inv-flow {
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  border: 1px solid var(--c-dark-line);
  border-radius: var(--radius-lg);
  background: var(--c-dark-2);
  padding: var(--space-6);
  overflow: hidden;
}
.inv-flow-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.inv-stage { position: relative; }
.inv-stage .t-label { display: block; margin-bottom: var(--space-4); }
.inv-stage::after {
  content: "";
  position: absolute;
  top: 50%; right: calc(-1 * var(--space-5) / 2 - 5px);
  width: 10px; height: 10px;
  border-top: 1px solid var(--c-dark-ink-3);
  border-right: 1px solid var(--c-dark-ink-3);
  transform: rotate(45deg) translateY(-50%);
}
.inv-stage:last-child::after { display: none; }
.inv-cells {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.inv-cells i {
  aspect-ratio: 9 / 16;
  border-radius: 4px;
  background: var(--c-dark-3);
  border: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--motion-slow) var(--ease-out);
}
.inv-flow.is-in .inv-cells i { opacity: 1; transform: none; }
/* staged coloring */
.inv-flow.is-in [data-inv="2"] .inv-cells i:nth-child(-n+10) { border-color: rgba(255,255,255,0.22); }
.inv-flow.is-in [data-inv="3"] .inv-cells i:nth-child(3n+1) { background: rgba(0,205,189,0.16); border-color: rgba(0,205,189,0.4); }
.inv-flow.is-in [data-inv="3"] .inv-cells i:nth-child(3n+2) { background: rgba(255,255,255,0.10); }
.inv-flow.is-in [data-inv="4"] .inv-cells i:nth-child(-n+5) { background: var(--c-accent); border-color: var(--c-accent); }
.inv-flow.is-in [data-inv="4"] .inv-cells i:nth-child(n+6):nth-child(-n+10) { background: rgba(0,205,189,0.3); border-color: rgba(0,205,189,0.4); }
/* stagger */
.inv-cells i:nth-child(1) { transition-delay: 40ms; } .inv-cells i:nth-child(2) { transition-delay: 80ms; }
.inv-cells i:nth-child(3) { transition-delay: 120ms; } .inv-cells i:nth-child(4) { transition-delay: 160ms; }
.inv-cells i:nth-child(5) { transition-delay: 200ms; } .inv-cells i:nth-child(6) { transition-delay: 240ms; }
.inv-cells i:nth-child(7) { transition-delay: 280ms; } .inv-cells i:nth-child(8) { transition-delay: 320ms; }
.inv-cells i:nth-child(9) { transition-delay: 360ms; } .inv-cells i:nth-child(10) { transition-delay: 400ms; }
.inv-stage .inv-note { font-size: var(--t-micro); color: var(--c-dark-ink-3); margin-top: var(--space-3); line-height: 1.5; }

@media (max-width: 860px) {
  .inv-flow-stages { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .inv-stage:nth-child(2)::after { display: none; }
}
@media (max-width: 480px) {
  .inv-flow-stages { grid-template-columns: 1fr; }
  .inv-stage::after { display: none; }
  .inv-cells { grid-template-columns: repeat(10, 1fr); }
  .inv-cells i:nth-child(n+11) { display: none; }
}

/* ---------- Capability grid ---------- */

.biz-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-dark-line);
  border: 1px solid var(--c-dark-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.biz-cap {
  background: var(--c-dark);
  padding: var(--space-6);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transition: background var(--motion-normal) var(--ease-out);
}
.biz-cap:hover { background: var(--c-dark-2); }
.biz-cap .cap-index {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  color: var(--c-accent);
  margin-bottom: var(--space-5);
}
.biz-cap h3 { font-size: var(--t-h4); margin-bottom: var(--space-3); }
.biz-cap p { color: var(--c-dark-ink-2); font-size: var(--t-small); line-height: 1.6; }
@media (max-width: 900px) { .biz-caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .biz-caps { grid-template-columns: 1fr; } .biz-cap { min-height: 0; } }

/* ---------- Who it's for ---------- */

.biz-audience { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.biz-audience span {
  border: 1px solid var(--c-dark-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--t-small);
  color: var(--c-dark-ink-2);
}

/* ---------- Contact ---------- */

.biz-contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-8);
  align-items: start;
}
.biz-contact-form {
  background: var(--c-dark-2);
  border: 1px solid var(--c-dark-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.biz-contact-form form { display: grid; gap: var(--space-4); }
.biz-contact-form .field input,
.biz-contact-form .field textarea {
  background: var(--c-dark-3);
  border-color: var(--c-dark-line);
  color: var(--c-dark-ink);
}
.biz-contact-form .field input:focus,
.biz-contact-form .field textarea:focus { border-color: var(--c-accent); }
.biz-contact-form .field label { color: var(--c-dark-ink); }
@media (max-width: 900px) { .biz-contact { grid-template-columns: 1fr; gap: var(--space-6); } }