/* ============================================================
   CorePal — CorePilot Page
   ============================================================ */

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

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

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

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

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

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

.cp-pain__title {
  color: var(--color-text-invert);
}

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

.cp-pain__item-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-invert);
  margin-bottom: var(--space-3);
  text-align: center;
}

.cp-pain__item-body {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.55);
  line-height: var(--line-height-relaxed);
  text-align: center;
}

/* ── Solution Cards (white) ─────────────────────────────────── */
.cp-solution {
  background: var(--color-bg-body);
  padding-block: var(--space-20);
}

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

.cp-solution-card {
  background: linear-gradient(113deg,
    var(--color-blue-50) 1.44%,
    var(--bg-card-gradient-end) 98.52%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
}

.cp-solution-card__img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto var(--space-5);
}

.cp-solution-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-brand);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-3);
}

.cp-solution-card__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ── iPhone Mockup Band ─────────────────────────────────────── */
.cp-iphone {
  background: var(--color-bg-dark);
  padding-block: var(--space-20);
  overflow: hidden;
}

.cp-iphone__layout {
  display: grid;
  grid-template-columns: 3fr 7fr;
  align-items: center;
  gap: var(--space-16);
  max-width: 900px;
  margin: 0 auto;
}

.cp-iphone__mockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Phone frame wrapper — 90% of original 328×672px design spec */
.cp-iphone__phone {
  position: relative;
  width: 295px;
  height: 605px;
  overflow: hidden;
}

.cp-iphone__screen {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
}

.cp-iphone__prototype {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.cp-prototype-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cp-prototype-slide--active {
  opacity: 1;
  pointer-events: auto;
}

.cp-carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.cp-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.cp-carousel-dot--active {
  background: rgba(255, 255, 255, 0.9);
}

.cp-iphone__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cp-iphone-feat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.cp-iphone-feat__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-invert);
  margin-bottom: var(--space-2);
}

.cp-iphone-feat__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.cp-iphone-feat__body {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--line-height-relaxed);
}

.cp-iphone__channel-note {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-invert);
  text-align: center;
  line-height: var(--line-height-relaxed);
}

/* ── Use Cases ──────────────────────────────────────────────── */
.cp-usecases {
  background: var(--color-bg-body);
  padding-block: var(--space-20);
}

.cp-usecases__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .cp-iphone__layout { grid-template-columns: 1fr; }
  .cp-iphone__mockup { order: -1; }
}

@media (max-width: 767px) {
  .cp-pain__grid { grid-template-columns: 1fr; }
  .cp-solution__grid { grid-template-columns: 1fr; }
  .cp-usecases__grid { grid-template-columns: 1fr; }
}