/* ============================================================
   CorePal — CoreValue Page
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.cv-hero { min-height: 70vh; align-items: flex-end; padding-bottom: var(--space-20); }

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

.cv-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);
}

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

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

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

.cv-pain__img {
  width: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
  max-height: 360px;
  margin-block: var(--space-10);
}

.cv-pain__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-4);
}

/* ── Flow (From Photo to Inventory) ────────────────────────── */
.cv-flow {
  background: var(--color-bg-subtle);
  padding-block: var(--space-20);
}

.cv-flow__diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.flow-node {
  background: var(--color-bg-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.flow-node--highlight {
  border-color: var(--color-primary-200);
  background: var(--color-primary-50);
}

.flow-node__tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.flow-node__tag--blue {
  background: var(--color-primary-500);
  color: var(--color-text-invert);
}

.flow-node__tag--dark {
  background: var(--color-neutral-800);
  color: var(--color-text-invert);
}

.flow-node__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-brand);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

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

.flow-arrow {
  font-size: 1.5rem;
  color: var(--color-neutral-200);
  text-align: center;
}

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

.cv-caps__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-12);
}

/* ── Capabilities Band scroll animation overrides ─────────── */
.cv-caps .fade-in {
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.cv-caps .fade-in.is-visible {
  transform: translateY(0);
}
.cv-caps .fade-in--delay-1 { transition-delay: 0.1s; }
.cv-caps .fade-in--delay-2 { transition-delay: 0.25s; }
.cv-caps .fade-in--delay-3 { transition-delay: 0.4s; }

/* ── CAM 3D tilt visual ────────────────────────────────────── */
.cv-caps__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cp-hero { perspective: 1200px; width: min(460px, 88vw); aspect-ratio: 650/874; position: relative; }
.cp-tilt { position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .14s ease-out; will-change: transform; }
.cp-unit { position: absolute; transition: margin-top .45s ease; }
.cp-shadow { width: 100%; }
.cp-unit img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }

.cp-yellow { width: 33.1%; left: 38.4%; top: 10.8%;
  transform: translateZ(10px) rotate(-21deg) scaleX(-1); z-index: 1;
  --dur: 5.4s; --delay: -1.2s; }
.cp-yellow .cp-shadow { filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.cp-white  { width: 39.7%; left: 18.7%; top: 34.1%;
  transform: translateZ(60px) rotate(20deg); z-index: 2;
  --dur: 4.8s; --delay: -2.6s; }
.cp-white .cp-shadow  { filter: drop-shadow(0 20px 24px rgba(0,0,0,.42)); }
.cp-red    { width: 58.3%; left: 28.1%; top: 46.9%;
  transform: translateZ(120px) rotate(-13deg); z-index: 3;
  --dur: 4.4s; --delay: 0s; }
.cp-red .cp-shadow    { filter: drop-shadow(0 28px 32px rgba(0,0,0,.5)); }

.cp-hero:hover .cp-unit { animation: cpbob var(--dur) ease-in-out infinite; animation-delay: var(--delay); }
@media (hover: none) { .cp-unit { animation: cpbob var(--dur) ease-in-out infinite; animation-delay: var(--delay); } }
@media (prefers-reduced-motion: reduce) {
  .cp-unit { animation: none !important; }
  .cp-tilt { transition: none; }
  /* Ensure the product-image container is visible without relying on transition */
  .cv-caps .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@keyframes cpbob { 0%, 100% { margin-top: -14px; } 50% { margin-top: 14px; } }

/* ── Capability cards ──────────────────────────────────────── */
.cv-caps__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cv-caps .cap-item {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  cursor: default;
}

.cv-caps .cap-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.cap-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.cv-caps .cap-item__icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  margin-top: 0;
  opacity: 0.6;
}

/* ── Use Case ───────────────────────────────────────────────── */
.cv-usecase {
  background: var(--color-bg-body);
  padding-block: var(--space-20);
}

.cv-usecase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-10);
}

/* ── Pricing ────────────────────────────────────────────────── */
.cv-pricing {
  background: var(--color-bg-subtle);
  padding-block: var(--space-20);
}

.cv-pricing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
  max-width: 760px;
  margin-inline: auto;
}

.price-card {
  background: var(--color-bg-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.price-card__type {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.price-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.price-card__item {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}
.price-card__item::before {
  content: '•';
  color: var(--color-primary-500);
  flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .cv-flow__diagram {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .flow-arrow { transform: rotate(90deg); }
  .cv-caps__layout { grid-template-columns: 1fr; }
  .cv-caps__visual { display: none; }
}

@media (max-width: 767px) {
  .cv-pain__grid { grid-template-columns: 1fr; }
  .cv-caps__cards { gap: var(--space-3); }
  .cv-usecase__grid { grid-template-columns: 1fr; }
  .cv-pricing__grid { grid-template-columns: 1fr; }

  /* WEB-26: show product visual above feature cards on mobile.
     display:none is set at 1023px; override it here so the three cameras
     appear. HTML order (visual → cards) gives us the correct stacked layout.
     The @media(hover:none) rule already makes cpbob play without hover. */
  .cv-caps__visual {
    display: flex;
    margin-bottom: var(--space-8);
  }
}