/* =================================================================
 * CarHarvest AI - premium product page.
 * Self-contained on the Vehicquire token system. LinkedIn-farm theme.
 * ================================================================= */

.main--carharvest { overflow-x: clip; }

/* ====================== HERO ====================== */
.ch-hero { position: relative; padding-block: clamp(var(--vq-space-9), 9vw, var(--vq-space-12)); overflow: hidden; }
.ch-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(55% 50% at 78% 12%, rgba(0, 78, 235, 0.10), transparent 70%),
    radial-gradient(40% 45% at 5% 90%, rgba(0, 78, 235, 0.06), transparent 70%);
}
.ch-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--vq-space-7), 5vw, var(--vq-space-10));
  align-items: center;
}
.ch-hero__tag {
  display: inline-flex; align-items: center; gap: var(--vq-space-2);
  padding: 0.5em 1em; margin: 0 0 var(--vq-space-5);
  background: rgba(0, 78, 235, 0.07); color: var(--vq-color-primary);
  border: 1px solid rgba(0, 78, 235, 0.18); border-radius: var(--vq-radius-full);
  font-family: var(--vq-font-display); font-size: var(--vq-text-sm); font-weight: var(--vq-weight-semibold);
  letter-spacing: -0.005em;
}
.ch-hero__tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vq-color-primary); box-shadow: 0 0 0 4px rgba(0,78,235,0.16); animation: chPulse 2.2s ease-in-out infinite; }
@keyframes chPulse { 0%,100%{box-shadow:0 0 0 4px rgba(0,78,235,0.16);} 50%{box-shadow:0 0 0 8px rgba(0,78,235,0.04);} }
.ch-hero__title {
  font-size: clamp(2.25rem, 4.6vw, 4rem); font-weight: var(--vq-weight-bold);
  letter-spacing: -0.025em; line-height: 1.04; color: var(--vq-color-secondary); margin: 0 0 var(--vq-space-5);
}
.ch-hero__title em { font-style: normal; color: var(--vq-color-primary); }
.ch-hero__lead { font-size: var(--vq-text-lg); color: var(--vq-color-muted); line-height: var(--vq-leading-base); margin: 0 0 var(--vq-space-6); max-width: 52ch; }
.ch-hero__lead strong { color: var(--vq-color-secondary); font-weight: var(--vq-weight-semibold); }
.ch-hero__actions { display: flex; flex-wrap: wrap; gap: var(--vq-space-3); margin-bottom: var(--vq-space-8); }
.ch-hero__stats { display: flex; flex-wrap: wrap; gap: var(--vq-space-7); list-style: none; margin: 0; padding: var(--vq-space-6) 0 0; border-top: 1px solid var(--vq-color-border); }
.ch-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.ch-hero__stat-num { font-size: var(--vq-text-2xl); font-weight: var(--vq-weight-bold); color: var(--vq-color-secondary); letter-spacing: -0.02em; line-height: 1; }
.ch-hero__stat-label { font-size: var(--vq-text-sm); color: var(--vq-color-muted); }

/* Hero visual - chat mockup with floating badges */
.ch-hero__visual { position: relative; }
.ch-hero__chat {
  border-radius: var(--vq-radius-xl); overflow: hidden;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15,23,42,0.08);
  border: 1px solid var(--vq-color-border); background: #fff;
}
.ch-hero__chat img { width: 100%; height: auto; display: block; }
.ch-hero__badge {
  position: absolute; display: inline-flex; align-items: center; gap: var(--vq-space-2);
  padding: 0.7em 1.05em; background: #fff; border: 1px solid var(--vq-color-border);
  border-radius: var(--vq-radius-full); box-shadow: 0 12px 30px rgba(15,23,42,0.14);
  font-family: var(--vq-font-display); font-size: var(--vq-text-sm); font-weight: var(--vq-weight-semibold);
  color: var(--vq-color-secondary); white-space: nowrap;
}
.ch-hero__badge--top { top: 6%; left: -6%; color: #0A66C2; animation: chFloat 4s ease-in-out infinite; }
.ch-hero__badge--top svg { color: #0A66C2; }
.ch-hero__badge--bottom { bottom: 8%; right: -5%; animation: chFloat 4s ease-in-out infinite 1.2s; }
.ch-hero__badge--bottom svg { color: #fff; background: var(--vq-color-success); border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
@keyframes chFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

@media (max-width: 920px) {
  .ch-hero__inner { grid-template-columns: 1fr; }
  .ch-hero__badge--top { left: 2%; }
  .ch-hero__badge--bottom { right: 2%; }
}

/* ====================== FEATURES (BENTO) ====================== */
.ch-features__header { text-align: center; max-width: 720px; margin: 0 auto var(--vq-space-8); }
.ch-features__title { font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: var(--vq-weight-bold); letter-spacing: -0.02em; line-height: 1.1; color: var(--vq-color-secondary); margin: var(--vq-space-3) 0 var(--vq-space-4); }
.ch-features__title em { font-style: normal; color: var(--vq-color-primary); }
.ch-features__lead { font-size: var(--vq-text-lg); color: var(--vq-color-muted); margin: 0; }

.ch-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vq-space-5); }
.ch-bento__card {
  background: var(--vq-color-bg); border: 1px solid var(--vq-color-border); border-radius: var(--vq-radius-lg);
  padding: var(--vq-space-6); transition: transform var(--vq-duration) var(--vq-ease), border-color var(--vq-duration) var(--vq-ease), box-shadow var(--vq-duration) var(--vq-ease);
}
.ch-bento__card:hover { transform: translateY(-3px); border-color: var(--vq-color-primary); box-shadow: var(--vq-shadow-md); }
.ch-bento__card--wide { grid-column: span 2; }
.ch-bento__card--accent { background: var(--vq-color-secondary); border-color: var(--vq-color-secondary); }
.ch-bento__card--accent .ch-bento__title { color: #fff; }
.ch-bento__card--accent .ch-bento__desc { color: rgba(255,255,255,0.72); }
.ch-bento__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--vq-radius-md); margin-bottom: var(--vq-space-4); }
.ch-bento__icon--blue { background: #DBEAFE; color: #2563EB; }
.ch-bento__icon--purple { background: #EDE9FE; color: #7C3AED; }
.ch-bento__icon--green { background: #D1FAE5; color: #059669; }
.ch-bento__icon--pink { background: #FCE7F3; color: #DB2777; }
.ch-bento__icon--ghost { background: rgba(255,255,255,0.1); color: #fff; }
.ch-bento__title { font-size: var(--vq-text-xl); font-weight: var(--vq-weight-bold); letter-spacing: -0.01em; color: var(--vq-color-secondary); margin: 0 0 var(--vq-space-3); }
.ch-bento__desc { font-size: var(--vq-text-base); color: var(--vq-color-muted); line-height: var(--vq-leading-base); margin: 0; }
.ch-bento__desc strong { color: var(--vq-color-ink); font-weight: var(--vq-weight-semibold); }
.ch-bento__split { list-style: none; margin: var(--vq-space-5) 0 0; padding: 0; display: grid; gap: var(--vq-space-3); }
.ch-bento__split li { font-size: var(--vq-text-base); color: var(--vq-color-muted); display: flex; gap: var(--vq-space-3); align-items: baseline; }
.ch-bento__split-tag { flex-shrink: 0; font-family: var(--vq-font-display); font-size: var(--vq-text-xs); font-weight: var(--vq-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3em 0.7em; border-radius: var(--vq-radius-full); }
.ch-bento__split-tag--seller { background: #DBEAFE; color: #2563EB; }
.ch-bento__split-tag--buyer { background: #D1FAE5; color: #059669; }
@media (max-width: 920px) { .ch-bento { grid-template-columns: repeat(2, 1fr); } .ch-bento__card--wide { grid-column: span 2; } }
@media (max-width: 600px) { .ch-bento { grid-template-columns: 1fr; } .ch-bento__card--wide { grid-column: 1; } }

/* ====================== HOW IT WORKS ====================== */
.ch-how__header { text-align: center; max-width: 720px; margin: 0 auto var(--vq-space-8); }
.ch-how__title { font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: var(--vq-weight-bold); letter-spacing: -0.02em; line-height: 1.1; color: var(--vq-color-secondary); margin: var(--vq-space-3) 0 0; }
.ch-how__title em { font-style: normal; color: var(--vq-color-primary); }
.ch-how__layout { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(var(--vq-space-7), 5vw, var(--vq-space-9)); align-items: center; }
.ch-how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vq-space-5); counter-reset: step; }
.ch-how__step { display: flex; gap: var(--vq-space-5); align-items: flex-start; }
.ch-how__num { flex-shrink: 0; font-family: var(--vq-font-display); font-size: var(--vq-text-lg); font-weight: var(--vq-weight-bold); color: #fff; background: var(--vq-color-primary); width: 48px; height: 48px; border-radius: var(--vq-radius-md); display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.01em; }
.ch-how__step-title { font-size: var(--vq-text-lg); font-weight: var(--vq-weight-semibold); color: var(--vq-color-secondary); margin: 0 0 var(--vq-space-2); }
.ch-how__step-body p { font-size: var(--vq-text-base); color: var(--vq-color-muted); margin: 0; line-height: var(--vq-leading-base); }
.ch-how__visual { border-radius: var(--vq-radius-xl); overflow: hidden; box-shadow: var(--vq-shadow-lg); border: 1px solid var(--vq-color-border); background: #fff; }
.ch-how__visual img { width: 100%; height: auto; display: block; }
@media (max-width: 920px) { .ch-how__layout { grid-template-columns: 1fr; } .ch-how__visual { order: -1; } }

/* ====================== RESULTS (DARK) ====================== */
.ch-results { position: relative; background: var(--vq-color-secondary); color: #fff; overflow: hidden; }
.ch-results__bg { position: absolute; inset: 0; background: radial-gradient(55% 60% at 50% 0%, rgba(0,78,235,0.28), transparent 70%); }
.ch-results .container { position: relative; z-index: 1; }
.ch-results__header { text-align: center; max-width: 760px; margin: 0 auto var(--vq-space-9); }
.ch-results__title { font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: var(--vq-weight-bold); letter-spacing: -0.02em; line-height: 1.1; color: #fff; margin: var(--vq-space-3) 0 var(--vq-space-4); }
.ch-results__title em { font-style: normal; color: var(--vq-color-primary-light, #6f9bff); }
.ch-results__lead { font-size: var(--vq-text-lg); color: rgba(255,255,255,0.66); margin: 0; }
.ch-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--vq-radius-lg); overflow: hidden; list-style: none; margin: 0; padding: 0; }
.ch-results__stat { background: var(--vq-color-secondary); padding: clamp(var(--vq-space-6), 4vw, var(--vq-space-8)) var(--vq-space-5); text-align: center; display: flex; flex-direction: column; gap: var(--vq-space-2); transition: background var(--vq-duration) var(--vq-ease); }
.ch-results__stat:hover { background: rgba(0,78,235,0.12); }
.ch-results__num { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: var(--vq-weight-bold); letter-spacing: -0.03em; line-height: 1; color: #fff; }
.ch-results__label { font-size: var(--vq-text-sm); color: #94A3B8; font-weight: var(--vq-weight-medium); }
@media (max-width: 760px) { .ch-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .ch-results__grid { grid-template-columns: 1fr; } }

/* ====================== FIT (FOR / NOT) ====================== */
.ch-fit__header { text-align: center; max-width: 720px; margin: 0 auto var(--vq-space-8); }
.ch-fit__title { font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: var(--vq-weight-bold); letter-spacing: -0.02em; line-height: 1.1; color: var(--vq-color-secondary); margin: var(--vq-space-3) 0 var(--vq-space-4); }
.ch-fit__title em { font-style: normal; color: var(--vq-color-primary); }
.ch-fit__lead { font-size: var(--vq-text-lg); color: var(--vq-color-muted); margin: 0; }
.ch-fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vq-space-5); }
.ch-fit__card { border-radius: var(--vq-radius-lg); padding: clamp(var(--vq-space-6), 3vw, var(--vq-space-8)); border: 1px solid var(--vq-color-border); }
.ch-fit__card--yes { background: linear-gradient(160deg, rgba(16,185,129,0.06), var(--vq-color-bg) 55%); border-color: rgba(16,185,129,0.25); }
.ch-fit__card--no { background: linear-gradient(160deg, rgba(220,38,38,0.05), var(--vq-color-bg) 55%); border-color: rgba(220,38,38,0.2); }
.ch-fit__card-head { display: flex; align-items: center; gap: var(--vq-space-3); margin-bottom: var(--vq-space-5); padding-bottom: var(--vq-space-5); border-bottom: 1px solid var(--vq-color-border); }
.ch-fit__card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--vq-radius-md); color: #fff; flex-shrink: 0; }
.ch-fit__card--yes .ch-fit__card-icon { background: var(--vq-color-success); }
.ch-fit__card--no .ch-fit__card-icon { background: var(--vq-color-danger); }
.ch-fit__card-title { font-size: var(--vq-text-2xl); font-weight: var(--vq-weight-bold); color: var(--vq-color-secondary); margin: 0; letter-spacing: -0.01em; }
.ch-fit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vq-space-4); }
.ch-fit__list li { position: relative; padding-left: 30px; font-size: var(--vq-text-base); color: var(--vq-color-ink); line-height: var(--vq-leading-base); }
.ch-fit__list li em { font-style: normal; font-weight: var(--vq-weight-semibold); }
.ch-fit__card--yes .ch-fit__list li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px; border-radius: 50%; background: var(--vq-color-success); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.ch-fit__card--no .ch-fit__list li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px; border-radius: 50%; background: var(--vq-color-danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
@media (max-width: 760px) { .ch-fit__grid { grid-template-columns: 1fr; } }

/* ====================== DEMO PROMISE ====================== */
.ch-demo__inner { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(var(--vq-space-7), 5vw, var(--vq-space-9)); align-items: center; }
.ch-demo__title { font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: var(--vq-weight-bold); letter-spacing: -0.02em; line-height: 1.1; color: var(--vq-color-secondary); margin: var(--vq-space-3) 0 var(--vq-space-4); }
.ch-demo__title em { font-style: normal; color: var(--vq-color-primary); }
.ch-demo__lead { font-size: var(--vq-text-lg); color: var(--vq-color-muted); margin: 0 0 var(--vq-space-6); line-height: var(--vq-leading-base); }
.ch-demo__list { list-style: none; margin: 0 0 var(--vq-space-7); padding: 0; display: grid; gap: var(--vq-space-4); }
.ch-demo__item { display: flex; gap: var(--vq-space-4); align-items: flex-start; }
.ch-demo__item-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,78,235,0.1); color: var(--vq-color-primary); font-family: var(--vq-font-display); font-weight: var(--vq-weight-bold); font-size: var(--vq-text-base); display: inline-flex; align-items: center; justify-content: center; }
.ch-demo__item-text { font-size: var(--vq-text-base); color: var(--vq-color-muted); line-height: var(--vq-leading-base); padding-top: 3px; }
.ch-demo__item-text strong { color: var(--vq-color-secondary); font-weight: var(--vq-weight-semibold); }
.ch-demo__visual { border-radius: var(--vq-radius-xl); overflow: hidden; box-shadow: var(--vq-shadow-lg); border: 1px solid var(--vq-color-border); background: #fff; }
.ch-demo__visual img { width: 100%; height: auto; display: block; }
@media (max-width: 920px) { .ch-demo__inner { grid-template-columns: 1fr; } }

/* ====================== SOCIAL PROOF ====================== */
.ch-proof__header { text-align: center; margin: 0 auto var(--vq-space-8); }
.ch-proof__title { font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: var(--vq-weight-bold); letter-spacing: -0.02em; color: var(--vq-color-secondary); margin: var(--vq-space-3) 0 0; }
.ch-proof__title em { font-style: normal; color: var(--vq-color-primary); }
.ch-proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vq-space-5); align-items: stretch; }
.ch-proof__card { display: flex; flex-direction: column; background: var(--vq-color-bg); border: 1px solid var(--vq-color-border); border-radius: var(--vq-radius-lg); padding: var(--vq-space-7); }
.ch-proof__card--featured { background: var(--vq-color-secondary); border-color: var(--vq-color-secondary); }
.ch-proof__card--featured .ch-proof__quote { color: #fff; }
.ch-proof__card--featured .ch-proof__author strong { color: #fff; }
.ch-proof__card--featured .ch-proof__author em { color: #94A3B8; }
.ch-proof__card--featured .ch-proof__quote-mark { color: var(--vq-color-primary-light, #6f9bff); }
.ch-proof__quote-mark { color: rgba(0,78,235,0.18); margin-bottom: var(--vq-space-4); }
.ch-proof__quote { font-family: var(--vq-font-display); font-size: var(--vq-text-lg); font-weight: var(--vq-weight-medium); color: var(--vq-color-secondary); line-height: 1.4; margin: 0 0 var(--vq-space-6); letter-spacing: -0.01em; flex-grow: 1; }
.ch-proof__author { display: flex; align-items: center; gap: var(--vq-space-3); margin: 0; }
.ch-proof__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,78,235,0.1); color: var(--vq-color-primary); font-family: var(--vq-font-display); font-weight: var(--vq-weight-bold); font-size: var(--vq-text-sm); display: inline-flex; align-items: center; justify-content: center; }
.ch-proof__card--featured .ch-proof__avatar { background: rgba(255,255,255,0.12); color: #fff; }
.ch-proof__author-meta { display: flex; flex-direction: column; }
.ch-proof__author-meta strong { font-family: var(--vq-font-display); font-size: var(--vq-text-base); font-weight: var(--vq-weight-semibold); color: var(--vq-color-secondary); }
.ch-proof__author-meta em { font-style: normal; font-size: var(--vq-text-sm); color: var(--vq-color-muted); }
@media (max-width: 880px) { .ch-proof__grid { grid-template-columns: 1fr; } }

/* ====================== FINAL CTA ====================== */
.ch-cta { position: relative; background: var(--vq-color-secondary); color: #fff; text-align: center; overflow: hidden; }
.ch-cta__bg { position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 110%, rgba(0,78,235,0.4), transparent 70%); }
.ch-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.ch-cta__tag { display: inline-flex; align-items: center; gap: var(--vq-space-2); padding: 0.5em 1.1em; margin: 0 0 var(--vq-space-5); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--vq-radius-full); font-family: var(--vq-font-display); font-size: var(--vq-text-sm); font-weight: var(--vq-weight-semibold); color: #fff; }
.ch-cta__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vq-color-primary-light, #6f9bff); box-shadow: 0 0 0 4px rgba(0,78,235,0.3); animation: chPulse 2.2s ease-in-out infinite; }
.ch-cta__title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: var(--vq-weight-bold); letter-spacing: -0.03em; line-height: 1; color: #fff; margin: 0 0 var(--vq-space-5); text-transform: uppercase; }
.ch-cta__lead { font-size: var(--vq-text-lg); color: rgba(255,255,255,0.72); max-width: 56ch; margin: 0 0 var(--vq-space-7); line-height: var(--vq-leading-base); }
.ch-cta__actions { display: flex; flex-direction: column; align-items: center; gap: var(--vq-space-4); }
.ch-cta__btn-primary { background: #fff; color: var(--vq-color-secondary); border: 0; box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.ch-cta__btn-primary:hover { background: var(--vq-color-primary); color: #fff; transform: translateY(-2px); }
.ch-cta__contact { display: inline-flex; align-items: center; gap: var(--vq-space-2); color: rgba(255,255,255,0.6); font-size: var(--vq-text-sm); text-decoration: none; transition: color var(--vq-duration) var(--vq-ease); }
.ch-cta__contact:hover { color: #fff; }
.ch-cta__contact svg { color: var(--vq-color-primary-light, #6f9bff); }