/* ============================
   COMMERCE PAGE
   ============================ */
.hero .h2 { margin-bottom: 24px; max-width: 840px; margin-left: auto; margin-right: auto; }
.hero .body-18 { max-width: 660px; }

.exp-intro { max-width: 720px; margin: 0 auto 56px; text-align: center; }

/* ---- Operating spine (dark grid) ---- */
.spine-intro { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.spine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.spine-card {
  padding: 30px; background: var(--neutral-01); border: 1px solid var(--neutral-03);
  border-radius: 14px; transition: border-color 0.2s;
}
.spine-card:hover { border-color: var(--neutral-04); }
.spine-card-icon {
  width: 60px; height: 60px; border-radius: 16px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.spine-card-icon svg { width: 22px; height: 22px; stroke: #fff; }
.spine-card h3 { color: var(--neutral-08); margin-bottom: 10px; }
.spine-card p { color: var(--neutral-06); font-size: 15px; line-height: 23px; }

/* ---- Retail & Hospitality segments ---- */
.segment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.segment-card {
  padding: 44px; background: var(--neutral-02); border: 1px solid var(--neutral-03);
  border-radius: 16px; transition: box-shadow 0.2s;
}
.segment-card:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.06); }
.segment-icon {
  width: 60px; height: 60px; border-radius: 16px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.segment-icon svg { width: 26px; height: 26px; stroke: #fff; }
.segment-card h3 { margin-bottom: 12px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .spine-grid { grid-template-columns: 1fr; }
  .segment-grid { grid-template-columns: 1fr; }
}