/* ============================================================
   CorePal — Visual Search Page
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.vs-hero { min-height: 70vh; align-items: flex-end; }

.vs-hero__content { padding-block: var(--space-20) var(--space-12); }

.vs-hero__label {
  display: inline-block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-invert);
  margin-bottom: var(--space-4);
}

.vs-hero__headline {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--color-text-invert);
  margin-bottom: var(--space-6);
}

.vs-hero__body {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--line-height-relaxed);
  max-width: 640px;
}

/* ── Pain Points (split layout) ─────────────────────────────── */
.vs-pain {
  background: var(--color-bg-body);
  padding-block: var(--space-20);
}

.vs-pain__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.vs-pain__title {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.vs-pain__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.vs-pain__img {
  width: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* ── Steps (4-column numbered) ──────────────────────────────── */
.vs-steps {
  background: var(--color-bg-subtle);
  padding-block: var(--space-20);
}

.vs-steps .step-card {
  border: 2px solid var(--color-border-blue);
  background: linear-gradient(113deg,
    var(--color-blue-50) 1.44%,
    var(--bg-card-gradient-end) 98.52%);
}

.vs-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

/* ── Capabilities Band ──────────────────────────────────────── */
.vs-caps {
  background: var(--color-bg-dark);
  padding-block: var(--space-20);
}

.vs-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.vs-caps .cap-item {
  background: linear-gradient(180deg,
    var(--color-alpha-dark-90) 0%,
    var(--color-alpha-dark-10) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .vs-steps__grid { grid-template-columns: repeat(2, 1fr); }
  .vs-caps__grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .vs-pain__layout { grid-template-columns: 1fr; }
  .vs-steps__grid  { grid-template-columns: 1fr; }
  .vs-caps__grid   { grid-template-columns: 1fr; }
}