/* ============================================================
   Deeptern AI, Product Page Shared Styles
   Matches solutions/#manufacturing style:
   White background, dark navy hero, indigo accents, white cards
   ============================================================ */

/* ── Hero (dark navy gradient, same as solutions page hero) ── */
.pp-hero {
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24) var(--space-20);
  min-height: 75vh;
  display: flex;
  align-items: center;
}
.pp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 80% 25%, rgba(79,70,229,.3) 0%, transparent 65%),
    radial-gradient(ellipse 40% 45% at 10% 75%, rgba(6,182,212,.15) 0%, transparent 60%);
  pointer-events: none;
}

.pp-eyebrow {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  background: rgba(79,70,229,.15);
  border: 1px solid rgba(79,70,229,.25);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: var(--space-6);
}

.pp-title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: var(--space-6);
}
.pp-title .accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pp-desc {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: var(--space-8);
}

.pp-stats {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,.1);
}
.pp-stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
}
.pp-stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  margin-top: 2px;
}

/* ── Sections (white / light gray, same as solutions page) ── */
.pp-section-white { background: var(--color-white); padding-block: var(--space-20); }
.pp-section-gray  { background: var(--color-gray-50); padding-block: var(--space-20); }

/* ── Feature cards (exact match to .value-card) ── */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .pp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pp-grid { grid-template-columns: 1fr; } }

.pp-card {
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.pp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-card);
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: inherit;
}
.pp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(79,70,229,.2);
}
.pp-card:hover::before { opacity: 1; }

.pp-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  box-shadow: 0 4px 12px rgba(79,70,229,.3);
  position: relative;
}
.pp-card-icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.pp-card h3 {
  margin-bottom: var(--space-3);
  color: var(--color-gray-900);
  font-size: var(--font-size-lg);
}
.pp-card p {
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}
.pp-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-5);
  text-decoration: none;
  transition: gap var(--transition-fast);
}
.pp-card-link:hover { gap: var(--space-3); }

/* ── Back link ── */
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  margin-bottom: var(--space-8);
  transition: color .2s;
}
.pp-back:hover { color: rgba(255,255,255,.9); }

/* ── CTA section (dark, matches solutions page final-cta) ── */
.pp-cta {
  background: var(--color-gray-900);
  padding-block: var(--space-20);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.pp-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(79,70,229,.25) 0%, transparent 70%);
  pointer-events: none;
}
.pp-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
}
.pp-cta-inner h2 {
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: var(--space-5);
}
.pp-cta-inner p {
  color: rgba(255,255,255,.65);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-8);
}

/* ── 2-col layout for how-it-works ── */
.pp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
@media (max-width: 800px) { .pp-two-col { grid-template-columns: 1fr; } }

/* ── Step / numbered list ── */
.pp-steps { display: flex; flex-direction: column; gap: var(--space-7); }
.pp-step  { display: flex; gap: var(--space-5); align-items: flex-start; }
.pp-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(79,70,229,.3);
}
.pp-step h4 { font-size: 1rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: var(--space-2); }
.pp-step p  { font-size: .875rem; color: var(--color-gray-600); line-height: 1.65; }

/* ── Mini cards grid (4-up) ── */
.pp-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .pp-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px)  { .pp-grid-4 { grid-template-columns: 1fr; } }


.prod-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: var(--space-6);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A78BFA;
}

.prod-title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: var(--space-6);
}
.prod-title .accent {
  background: linear-gradient(135deg, #A78BFA, #7C3AED, #4F46E5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.prod-desc {
  font-size: var(--font-size-lg);
  color: rgba(255,255,255,.65);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: var(--space-8);
}

.prod-stats {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}
.prod-stat-num {
  font-size: 1.75rem;
  font-weight: 900;
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.prod-stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}

/* Sections */
.section-dark  { background: #08081A; padding-block: var(--space-20); }
.section-mid   { background: #0A0A20; padding-block: var(--space-20); }
.section-darker{ background: #050510; padding-block: var(--space-20); }

/* Feature / module cards */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 900px) { .prod-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .prod-grid { grid-template-columns: 1fr; } }

.prod-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  transition: border-color .2s, background .2s;
}
.prod-card:hover {
  border-color: rgba(124,58,237,.4);
  background: rgba(124,58,237,.06);
}

.prod-card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: rgba(124,58,237,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: #A78BFA;
}
.prod-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-2);
}
.prod-card-desc {
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}
.prod-card-link {
  font-size: .75rem;
  font-weight: 600;
  color: #7C3AED;
  text-decoration: none;
}
.prod-card-link:hover { color: #A78BFA; }

/* Testimonials */
.testimonial-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
}
.prod-stars { color: #FBBF24; font-size: 1rem; margin-bottom: var(--space-4); letter-spacing: 2px; }
.testimonial-text { font-style: italic; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: var(--space-5); }
.testimonial-author { font-weight: 700; color: #fff; font-size: .875rem; }
.testimonial-role { font-size: .75rem; color: rgba(255,255,255,.4); }

/* CTA */
.prod-cta {
  background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 60%, #2563EB 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.prod-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,255,255,.1) 0%, transparent 70%);
}

/* Nav back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  margin-bottom: var(--space-8);
  transition: color .2s;
}
.back-link:hover { color: rgba(255,255,255,.9); }

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 800px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  position: relative;
}
.pricing-card.featured { border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.08); }
.pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #7C3AED; color: #fff; font-size: .65rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 12px;
  border-radius: 999px; white-space: nowrap;
}
.pricing-name  { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: var(--space-2); }
.pricing-price { font-size: 2rem; font-weight: 900; color: #A78BFA; margin-bottom: 4px; }
.pricing-per   { font-size: .75rem; color: rgba(255,255,255,.4); }
.pricing-features { list-style: none; padding: 0; margin: var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pricing-features li { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.65); }
.pricing-features li::before { content: '✓'; color: #7C3AED; font-weight: 800; flex-shrink: 0; margin-top: 1px; }