/* ════════════════════════════════════════════════════════════
   product.css — Page-specific styles only
   Relies on global.css for: container, typography, buttons,
   CSS variables, Font Aweso@e (linked separately)
════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body { width: 100%; max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; }


:root {
  /* Base */
  --white: #ffffff;
  --off-white: #fcfcff;
  --surface: #f7f8ff;

  /* Primary Brand Gradient Colors */
  --primary: #6c4dff;
  --primary-dark: #4f2dff;
  --primary-light: #8d7bff;
  /* Secondary Accent */
  --navy-blue: #0b1026;
  --blue-accent: #2f80ff;
  --sky-blue: #66b3ff;

  /* Gradient Helpers */
  --gradient-primary: linear-gradient(
    90deg,
    #7b3ff2 0%,
    #5b5fff 50%,
    #2f9cff 100%
  );

  --gradient-soft: linear-gradient(
    135deg,
    rgba(123, 63, 242, 0.08),
    rgba(47, 156, 255, 0.08)
  );

  /* Glow / Shadows */
  --purple-shadow: rgba(123, 63, 242, 0.25);
  --blue-shadow: rgba(47, 156, 255, 0.2);
  --card-shadow: 0 10px 40px rgba(108, 77, 255, 0.08);

  /* Soft Background Tones */
  --purple-soft: #f4efff;
  --blue-soft: #eef5ff;
  --pink-soft: #fff0fb;
  --indigo-soft: #f3f4ff;

  /* Accent Utility */
  --green: #22c55e;
  --green-soft: #ecfdf3;
  --green-border: rgba(34, 197, 94, 0.2);

  --warning: #f59e0b;
  --warning-soft: #fff8eb;

  --danger: #ef4444;
  --danger-soft: #fff1f2;

  /* Typography */
  --text-primary: #0b1026;
  --text-secondary: #5c6275;
  --text-muted: #8e94a8;

  /* Borders */
  --divider: #e8eaf5;
  --border-light: rgba(108, 77, 255, 0.12);

  /* Layout */
  --dark: #080b1a;
  --max-w: 1280px;
  --sec-pad: 100px;

  /* Section Background Utilities */
  --light-blue: #eef5ff;
  --light-green: #eefcf5;
  --light-pink: #fff2fb;
  --light-orange: #fff6e8;

  /* Extra UI */
  --badge-bg: rgba(123, 63, 242, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.4);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;

  /* Transition */
  --transition: all 0.3s ease;

  --pfq-primary: #6c4dff;
  --pfq-primary-dark: #4f2dff;
  --pfq-gradient: linear-gradient(135deg, #7a3cff, #246bff);

  --pfq-text-primary: #0b1026;
  --pfq-text-secondary: #5c6275;
  --pfq-text-muted: #8e94a8;

  --pfq-white: #ffffff;
  --pfq-bg: #fbfbfe;
  --pfq-surface: #f7f7ff;

  --pfq-border: #e8eaf5;
  --pfq-border-active: var(--pfq-primary);

  --pfq-badge-bg: rgba(122, 92, 255, 0.08);
  --pfq-badge-border: rgba(122, 92, 255, 0.18);

  /* Spacing */
  --pfq-gap-xs: 6px;
  --pfq-gap-sm: 12px;
  --pfq-gap-md: 20px;
  --pfq-gap-lg: 32px;
  --pfq-gap-xl: 48px;
  --pfq-section-pad: 100px;

  /* Radius */
  --pfq-radius-sm: 10px;
  --pfq-radius-md: 16px;
  --pfq-radius-lg: 20px;
  --pfq-radius-pill: 50px;

  /* Shadows */
  --pfq-shadow-sm: 0 4px 12px rgba(122, 92, 255, 0.08);
  --pfq-shadow-md: 0 10px 24px rgba(122, 92, 255, 0.1);
  --pfq-shadow-active: 0 8px 20px rgba(90, 70, 255, 0.15);

  /* Transitions */
  --pfq-transition: all 0.3s ease;
  --pfq-transition-fast: all 0.2s ease;
}

/* ─────────────────────────────────────────────
   SHARED DARK SECTION BASE
───────────────────────────────────────────── */
#prod-hero,
#prod-stories,
#prod-ai {
  background: #07091a;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   SECTION 1 — HERO
───────────────────────────────────────────── */
#prod-hero {
  padding: 90px 0 60px;
  background: url(./background-images/bg4.png)  center / cover no-repeat;
}
/* background glows */
.ph-bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.12;
}
.ph-glow-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #7c3aed, transparent 70%);
  top: -100px;
  left: -100px;
}
.ph-glow-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #1d4ed8, transparent 70%);
  top: 200px;
  right: 100px;
}
.ph-glow-3 {
  width: 600px;
  height: 300px;
  background: radial-gradient(circle, #4f46e5, transparent 70%);
  bottom: 0;
  right: 0;
  opacity: 0.5;
  filter: blur(100px);
}

/* purple wave at bottom */
.ph-wave {
  position: absolute;
  opacity: 0.5;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 200px;
  background: radial-gradient(
    ellipse at 80% 100%,
    rgba(139, 92, 246, 0.25) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* layout */
.ph-container {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── LEFT ── */
.ph-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
}
.ph-desc-2 {
  margin-top: 12px;
}

.ph-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* stats row */
.ph-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 48px;
}

.ph-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.ph-stat:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-glow);
  border-color: var(--card-border-hover);
}
.ph-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.ph-stat-content h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  margin: 0 0 4px;
}

.ph-stat-content p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

/* ── RIGHT — orbit diagram ── */
.ph-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ph-right img {
  width: 100%;
  max-width: 520px;
  border-radius: 24px;
  border: 1px solid var(--divider);
  box-shadow: 0 20px 50px rgba(108, 77, 255, 0.08);
}

/* ─────────────────────────────────────────────
   SECTION 2 — CUSTOMER SUCCESS STORIES
───────────────────────────────────────────── */
#prod-stories {
  padding: 50px 0 60px;
  background: url(./background-images/bg2.png) center center / cover no-repeat;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ph-glow-stories {
  width: 700px;
  height: 400px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  filter: blur(80px);
}

/* carousel wrapper */
.pst-carousel-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-top: 20px;
}

/* cards row */
.pst-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

/* individual card */
.pst-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(96, 76, 255, 0.25);
  border-radius: 20px;
  padding: 24px;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
}
.pst-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(108, 77, 255, 0.08);
}
.pst-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pst-case-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
  border: 1px solid rgba(100, 116, 139, 0.3);
  padding: 3px 10px;
  border-radius: 6px;
}
.pst-product-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
}
.pst-badge-purple {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.pst-badge-teal {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.pst-company-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pst-company-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}
.pst-logo-workhire {
  background: linear-gradient(135deg, #374151, #1f2937);
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pst-logo-elevate {
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
  color: #93c5fd;
}
.pst-logo-scaleup {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
}

.pst-company-name {
  font-size: 14px;
  font-weight: 700;
  color: black;
}
.pst-company-type {
  font-size: 12px;
  color: #64748b;
}

.pst-card-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: black;
  line-height: 1.25;
}
.pst-card-body {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.65;
}

/* dashboard mockup */
.pst-mockup {
  background: white;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 14px;
  padding: 14px;
  flex-shrink: 0;
}
.pst-mockup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pst-mockup-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}
.pst-mockup-label {
  font-size: 10px;
  color: #475569;
}

.pst-mockup-kpis {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
.pst-mockup-kpis-wide {
  justify-content: flex-start;
}

.pst-kpi {
}
.pst-kpi-val {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.pst-kpi-lbl {
  font-size: 9px;
  color: #475569;
  margin-top: 2px;
}
.pst-kpi-delta {
  font-size: 10px;
  margin-top: 2px;
  font-weight: 700;
}
.pst-delta-green {
  color: #22c55e;
}

.pst-mockup-chart-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* mini line chart */
.pst-mini-chart {
  flex: 1;
}
.pst-mini-chart svg {
  width: 100%;
  height: 55px;
  display: block;
}
.pst-chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.pst-chart-labels span {
  font-size: 8px;
  color: #334155;
}

/* donut chart */
.pst-donut-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}
.pst-donut-wrap svg {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.pst-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pst-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #94a3b8;
}
.pst-legend-item span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pst-kw-legend .pst-legend-item {
  font-size: 9px;
}

/* engagement mockup */
.pst-engagement-row {
  align-items: center;
  gap: 14px;
}
.pst-engagement-donut {
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
}
.pst-engagement-donut svg {
  width: 90px;
  height: 90px;
}
.pst-engagement-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pst-eng-pct {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.pst-eng-lbl {
  font-size: 8px;
  color: #64748b;
  text-align: center;
}
.pst-eng-delta {
  font-size: 9px;
  color: #22c55e;
  font-weight: 700;
}

.pst-onboarding {
  flex: 1;
}
.pst-ob-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pst-ob-val {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.pst-ob-delta {
  font-size: 10px;
  color: #22c55e;
  font-weight: 700;
}
.pst-ob-lbl {
  font-size: 9px;
  color: #475569;
}
.pst-ob-bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 65px;
  margin-bottom: 4px;
}
.pst-ob-bar {
  flex: 1;
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px 3px 0 0;
}
.pst-ob-bar-active {
  background: #8b5cf6;
}

/* stat pills */
.pst-stat-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pst-pill {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  flex: 1;
  min-width: 80px;
}
.pst-pill > i {
  color: #8b5cf6;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.pst-pill-num {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1;
}
.pst-pill-lbl {
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
}

.pst-quote {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  font-style: italic;
}
.pst-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}
.pst-stars {
  color: #f59e0b;
  letter-spacing: 1px;
}

/* dots */
.pst-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.pst-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: background 0.2s;
}
.pst-dot-active {
  background: #8b5cf6;
  width: 24px;
  border-radius: 4px;
}

/* trust bar */
.pst-trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 24px;
  padding: 20px;
  background: #fff;
  backdrop-filter: blur(20px);
  border: 1px solid var(--divider);
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}
.pst-trust-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pst-trust-shield {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}
.pst-trust-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  max-width: 220px;
  line-height: 1.35;
}
.pst-trust-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pst-trust-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  transition: all 0.3s ease;
}

.pst-trust-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(108, 77, 255, 0.08);
}

.pst-trust-num {
  font-size: 28px;
  font-weight: 800;
  color: #6c4dff;
}
.pst-trust-lbl {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.pst-trust-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   SECTION 3 — AI AT THE CORE
───────────────────────────────────────────── */
#prod-ai {
  background: url(./background-images/bg4.png) center center / cover no-repeat;
  padding: 68px 0 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ph-glow-ai-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
  top: 0;
  right: 0;
  filter: blur(80px);
}
.ph-glow-ai-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.15),
    transparent 70%
  );
  bottom: 0;
  left: 0;
  filter: blur(60px);
}

.pai-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.pai-desc {
  font-size: 16px;
  color: #64748b;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 28px;
}
.pai-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 40px;
}

.pai-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-right: 1px solid #e2e8f0;
}

.pai-feature:last-child {
  border-right: none;
}

.pai-feature-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--primary-dark),
    var(--primary-light)
  );
}

.pai-feature-icon i {
  color: #fff;
  font-size: 22px;
}

.pai-feature-content h4 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px;
}

.pai-feature-content p {
  margin: 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.6;
}

/* feature cards */
.pai-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.pai-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  border-right: 1px solid #e2e8f0;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    background-color 0.2s,
    transform 0.2s;
}

.pai-card:last-child {
  border-right: none;
}

.pai-card:hover {
  background-color: rgba(139, 92, 246, 0.04);
  transform: none;
}

.pai-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
.pai-icon-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.pai-icon-blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.pai-icon-teal {
  background: linear-gradient(135deg, #0891b2, #0e7490);
}
.pai-icon-violet {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.pai-icon-indigo {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
}
.pai-icon-cyan {
  background: linear-gradient(135deg, #0e7490, #0891b2);
}

.pai-card-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.pai-card-body {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  flex: 1;
}
.pai-learn {
  font-size: 13px;
  font-weight: 600;
  color: #8b5cf6;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}
.pai-learn:hover {
  gap: 9px;
}

/* bottom bar */
.pai-bottom-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 28px;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.07);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.pai-bottom-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.pai-bottom-bar p {
  font-size: 14px;
  color: #0b1026;
  font-weight: 600;
  flex: 1;
  margin: 0;
}

.pai-bottom-wave {
  flex-shrink: 0;
}
.pai-bottom-wave svg {
  width: 200px;
  height: 30px;
}

.ph-right2 {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ph-right2 img {
  width: 288%;
  max-width: 700px;
  object-fit: contain;
  display: block;
}

/* ─────────────────────────────────────────────
   SECTION 4 — PHILOSOPHY (light)
───────────────────────────────────────────── */
#prod-philosophy {
  background: url(./background-images/bg4.png) center center / cover no-repeat;
  padding: 65px 0 0;
  overflow: hidden;
}

.pph-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-top: 20px;
}


.pph-headline {
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 800;
  color: #0b1026;
  line-height: 1.15;
  margin-top: 10px;
  margin-bottom: 16px;
}
.pph-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pph-accent-line {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  border-radius: 3px;
  margin-bottom: 20px;
}
.pph-desc {
  font-size: 15px;
  color: #5c6275;
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 32px;
}
.pph-principles-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 8px;
}
.pph-principles-line {
  width: 32px;
  height: 3px;
  background: #7c3aed;
  border-radius: 3px;
  margin-bottom: 20px;
}

/* principles grid */
.pph-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pph-principle {
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 16px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.pph-principle:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.1);
}
.pph-prin-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.pph-icon-purple {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}
.pph-icon-blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.pph-icon-violet {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}
.pph-icon-teal {
  background: rgba(13, 148, 136, 0.1);
  color: #0d9488;
}
.pph-icon-indigo {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}
.pph-icon-orange {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

.pph-prin-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 4px;
}
.pph-prin-body {
  font-size: 12px;
  color: #8e94a8;
  line-height: 1.5;
}

/* RIGHT — illustration */
.pph-right {
  position: relative;
  height: 540px;
}
.pph-right img {
  max-width: 750px;
  height: auto;
}

/* floating cards */
.pph-float-card {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 16px;
  padding: 16px 18px;
  min-width: 180px;
  max-width: 220px;
  box-shadow: 0 4px 20px rgba(108, 77, 255, 0.08);
  z-index: 5;
  transition: transform 0.2s;
}
.pph-float-card:hover {
  transform: translateY(-3px);
}

.pph-fc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.pph-fc-icon-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
}
.pph-fc-icon-blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}
.pph-fc-icon-green {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
}
.pph-fc-icon-sky {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  color: #fff;
}

.pph-fc-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 4px;
}
.pph-fc-body {
  font-size: 12px;
  color: #8e94a8;
  line-height: 1.5;
}

.pph-fc-engineering {
  top: 20px;
  left: 0;
}
.pph-fc-ux {
  top: 20px;
  right: 0;
}
.pph-fc-impact {
  bottom: 200px;
  left: 0;
}
.pph-fc-growth {
  bottom: 200px;
  right: 0;
}

/* central illustration placeholder */
.pph-illus-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pph-illus-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #8e94a8;
  text-align: center;
  font-size: 13px;
}
.pph-hex-logo {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #c4b5fd, #818cf8, #7c3aed);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.3),
    0 20px 40px rgba(124, 58, 237, 0.2),
    0 40px 60px rgba(99, 102, 241, 0.1);
  transform: rotate(10deg);
}

/* promise bar */
.pph-promise-bar {
  margin-top: 60px;
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 20px 20px 0 0;
  padding: 28px 40px;
}
.pph-promise-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px;
}
.pph-promise-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1.2;
  min-width: 280px;
}
.pph-promise-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
}
.pph-promise-title {
  font-size: 16px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 6px;
}
.pph-promise-body {
  font-size: 13px;
  color: #5c6275;
  line-height: 1.6;
  max-width: 340px;
}

.pph-promise-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 2;
}
.pph-promise-stat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pph-ps-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.pph-psi-purple {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
.pph-psi-blue {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}
.pph-psi-teal {
  background: rgba(13, 148, 136, 0.12);
  color: #0d9488;
}
.pph-psi-red {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.pph-ps-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 3px;
}
.pph-ps-body {
  font-size: 12px;
  color: #8e94a8;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — SECTIONS 1–4 ONLY
   (Hero / Stories / AI at the Core / Philosophy)

   Breakpoint scale used throughout:
   1280px → large desktop (container max, no rules needed above this)
   1200px → small desktop / large laptop
   1024px → laptop / large tablet (landscape tablets, iPad Pro)
   900px  → tablet
   768px  → small tablet / large phablet
   600px  → large phone (landscape phones, big phones)
   480px  → phone
   375px  → small phone (iPhone SE / older Android)
════════════════════════════════════════════════════════════ */

/* ============ 1200px ============ */
@media (max-width: 1200px) {
  .pai-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .pst-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .pph-principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============ 1024px ============ */
@media (max-width: 1024px) {
  /* Hero */
  .ph-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .ph-desc {
    margin-inline: auto;
  }
  .ph-actions {
    justify-content: center;
  }
  .ph-right {
    height: auto;
    margin: 0 auto;
    max-width: 500px;
    width: 100%;
  }
  .ph-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stories */
  .pst-cards {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  /* AI */
  .pai-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .pai-desc {
    margin-inline: auto;
  }
  .ph-right2 img {
    width: 100%;
    max-width: 420px;
  }

  /* Philosophy */
  .pph-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pph-right {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }
  .pph-right img {
    max-width: 100%;
    width: 100%;
  }
  .pph-fc-engineering,
  .pph-fc-ux,
  .pph-fc-impact,
  .pph-fc-growth {
    position: static;
    margin-bottom: 12px;
  }
  .pph-illus-placeholder {
    position: static;
    transform: none;
    width: 100%;
    height: 200px;
  }
}

/* ============ 900px ============ */
@media (max-width: 900px) {
  .pai-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .pai-card {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
  }
  .pai-card:nth-child(3n) {
    border-right: none;
  }
  .pai-card:nth-last-child(-n + 3) {
    border-bottom: none;
  }
}

/* ============ 768px ============ */
@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Section padding tightened on mobile */
  #prod-hero {
    padding: 80px 0 50px;
  }
  #prod-stories {
    padding: 60px 0 50px;
  }
  #prod-ai {
    padding: 60px 0 50px;
  }
  #prod-philosophy {
    padding: 60px 0 0;
  }

  /* Hero */
  .ph-stats {
    gap: 16px;
  }

  /* Stories */
  .pst-cards {
    grid-template-columns: 1fr;
  }
  .pst-trust-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .pst-trust-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .pst-trust-divider {
    display: none;
  }

  /* AI */
  .pai-features {
    grid-template-columns: 1fr;
  }
  .pai-feature {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .pai-feature:last-child {
    border-bottom: none;
  }
  .pai-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .pai-card {
    border-bottom: 1px solid #e2e8f0;
  }
  .pai-card:nth-child(2n) {
    border-right: none;
  }
  .pai-card:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .pai-bottom-wave {
    display: none;
  }

  /* Philosophy */
  .pph-principles-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pph-promise-inner {
    flex-direction: column;
  }
  .pph-promise-stats {
    flex-direction: column;
    gap: 16px;
  }
  .pph-promise-bar {
    padding: 24px 20px;
  }
}

/* ============ 600px ============ */
@media (max-width: 600px) {
  .pai-cards {
    grid-template-columns: 1fr;
  }
  .pai-card {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .pai-card:last-child {
    border-bottom: none;
  }

  .pst-mockup-chart-row {
    flex-direction: column;
  }
  .pst-donut-wrap {
    justify-content: center;
  }
  .pst-engagement-row {
    flex-direction: column;
    align-items: center;
  }
}

/* ============ 480px ============ */
@media (max-width: 480px) {
  /* Headings scale down uniformly across sections 1–4 */
  .pst-card-title,
  .pai-headline,
  .pph-headline {
    font-size: 28px !important;
    line-height: 1.15;
  }
  .ph-desc,
  .pst-card-body,
  .pai-desc,
  .pph-desc {
    font-size: 15px;
  }

  /* Hero */
  .ph-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ph-actions {
    flex-direction: column;
  }
  .ph-actions a {
    justify-content: center;
    width: 100%;
  }

  /* Stories */
  .pst-stat-pills {
    flex-direction: column;
  }
  .pst-trust-stats {
    grid-template-columns: 1fr;
  }

  /* AI */
  .pai-cards {
    grid-template-columns: 1fr;
  }
  .pai-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  /* Philosophy */
  .pph-principles-grid {
    grid-template-columns: 1fr;
  }
  .pph-promise-left {
    flex-direction: column;
  }
}

/* ============ 375px ============ */
@media (max-width: 375px) {
  .ph-stat {
    padding: 14px;
  }
  .ph-stat-icon {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  .ph-stat-content h3 {
    font-size: 20px;
  }

  .pst-card {
    padding: 18px;
  }
  .pst-stat-pills .pst-pill {
    min-width: 100%;
  }

  .pai-card {
    padding: 18px 14px;
  }

  .pph-promise-bar {
    padding: 20px 16px;
  }
}
/* ─────────────────────────────────────────────
   SECTION 5 — ECOSYSTEM (light)
───────────────────────────────────────────── */
#prod-ecosystem {
  background: url(./background-images/bg2.png) center center / cover no-repeat;
  padding: 67px 0 60px;
  overflow: hidden;
}

.pec-header,
.pec-container .text-center {
  max-width: 800px;
  margin: 0 auto 50px;
}.pec-container .section-heading,
.pec-container .clip-reveal-inner {
  white-space: nowrap;
  display: inline-block;
}

.pec-container .text-center {
  max-width: 1000px;
}

/* ============================
   ORBIT STAGE
   ============================ */
.pec-orbit-stage {
  position: relative;
  max-width: 960px;
  height: 680px;
  margin: 0 auto;
}

.pec-orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  z-index: 2;
}
.pec-orbit-center img {
  width: 100%;
  height: auto;
  display: block;
}

/* Node base */
.pec-node {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 220px;
  z-index: 3;
}

.pec-node-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.pec-node-icon-purple { color: #7c3aed; }
.pec-node-icon-blue   { color: #2563eb; }
.pec-node-icon-green  { color: #16a34a; }

.pec-node-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.pec-label-purple { color: #7c3aed; }
.pec-label-blue   { color: #2563eb; }
.pec-label-green  { color: #16a34a; }

.pec-node-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

/* Node positions — tuned to the reference layout */
.pec-node-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 200px;
}

.pec-node-top-right {
  top: 80px;
  right: 40px;
  width: 210px;
}

.pec-node-right {
  top: 300px;
  right: 0;
  width: 200px;
}

.pec-node-bottom-right {
  top: 480px;
  right: 40px;
  width: 210px;
}

.pec-node-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 200px;
}

.pec-node-bottom-left {
  top: 480px;
  left: 40px;
  width: 200px;
  flex-direction: row-reverse;
  text-align: right;
}

.pec-node-left {
  top: 300px;
  left: 0;
  width: 200px;
  flex-direction: row-reverse;
  text-align: right;
}

.pec-node-top-left {
  top: 80px;
  left: 40px;
  width: 200px;
  flex-direction: row-reverse;
  text-align: right;
}

/* ============================
   BOTTOM BAR
   ============================ */
.pec-bottom-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 28px;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.07);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.pec-bottom-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}
.pec-bottom-title {
  font-size: 14px;
  font-weight: 700;
  color: #0b1026;
}
.pec-bottom-sub {
  font-size: 13px;
  color: #64748b;
}

/* =========================================
   TABLET & MOBILE
========================================= */
@media (max-width: 1024px) {

  .pec-orbit-stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }

  .pec-orbit-center {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    width: 260px;
    margin: 0 auto 20px;
  }

  .pec-orbit-center img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Remove ALL orbit positioning */
  .pec-node-top,
  .pec-node-top-right,
  .pec-node-right,
  .pec-node-bottom-right,
  .pec-node-bottom,
  .pec-node-bottom-left,
  .pec-node-left,
  .pec-node-top-left {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .pec-node {
    width: 100% !important;
    min-width: 0;
    max-width: none;

    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;

    text-align: center !important;
    gap: 12px;

    padding: 20px 14px;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;

    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  }

  .pec-node-body {
    width: 100%;
  }

  .pec-node-icon {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }

  .pec-node-label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .pec-node-desc {
    font-size: 13px;
    line-height: 1.5;
  }
}


/* =========================================
   MOBILE
========================================= */
@media (max-width: 768px) {

  #prod-ecosystem {
    padding: 60px 0;
  }

  .pec-orbit-stage {
    gap: 14px;
  }

  .pec-orbit-center {
    width: 200px;
    margin-bottom: 10px;
  }

  .pec-node {
    padding: 18px 12px;
    min-height: 170px;
  }

  .pec-node-icon {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  .pec-node-label {
    font-size: 13px;
  }

  .pec-node-desc {
    display: none; /* cleaner mobile cards */
  }

  .pec-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 18px;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width: 480px) {

  .pec-orbit-stage {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .pec-orbit-center {
    width: 160px;
  }

  .pec-node {
    min-height: 100px;
    padding: 10px 8px;
    border-radius: 16px;
  }

  .pec-node-icon {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }

  .pec-node-label {
    font-size: 12px;
  }

  .pec-bottom-title {
    font-size: 13px;
  }
}
/* ─────────────────────────────────────────────
   SECTION 6 — WHY WE BUILD PRODUCTS (light)
───────────────────────────────────────────── */
#prod-why {
  background: url(./background-images/herosectionbg.png) center center / cover
    no-repeat;
  padding: 60px 0;
  overflow: hidden;
}

.pwb-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 1;
  padding-bottom: 60px;
}


.pwb-headline {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 800;
  color: #0b1026;
  line-height: 1.15;
  margin-top: 10px;
  margin-bottom: 16px;
}

.pwb-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pwb-accent-line {
  width: 48px;
  height: 3px;
  background: #7c3aed;
  border-radius: 3px;
  margin-bottom: 20px;
}

.pwb-desc {
  font-size: 15px;
  color: #5c6275;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 28px;
}

.pwb-combine-label {
  font-size: 14px;
  font-weight: 700;
  color: #6366f1;
  margin-bottom: 16px;
}

.pwb-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pwb-feature {
  background: white;
  border: 1px solid #e2e8f0;

  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #e8eaf5;
  padding: 14px 16px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.pwb-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.08);
}

.pwb-feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  font-size: 16px;
  flex-shrink: 0;
}

.pwb-feat-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 4px;
}
.pwb-feat-desc {
  font-size: 12px;
  color: #8e94a8;
  line-height: 1.5;
}

/* RIGHT */
.pwb-right {
  position: relative;
  min-height: auto;
}
.pwb-right img {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
}
.pwb-img-placeholder {
  width: 80%;
  height: 220px;
  background: linear-gradient(135deg, #e8eaf5, #d4d8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pwb-img-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #8e94a8;
  font-size: 13px;
  text-align: center;
}
.pwb-img-inner i {
  font-size: 40px;
  color: #c4c9e2;
}

/* floating cards */
.pwb-float-card {
  position: absolute;
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.12);
  z-index: 5;
}

.pwb-fc-workflow {
  bottom: 160px;
  left: 0;
  min-width: 180px;
}

.pwb-fc-title {
  font-size: 12px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 12px;
}
.pwb-fc-title-blue {
  color: #6366f1;
}

.pwb-workflow-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pwb-ws-step {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  font-size: 18px;
}
.pwb-ws-step-purple {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  width: auto;
  height: auto;
  padding: 8px 14px;
  border-radius: 10px;
  gap: 6px;
  flex-direction: row;
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
}
.pwb-ws-step-purple span {
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
}
.pwb-ws-arrow {
  color: #c4c9e2;
  font-size: 10px;
}
.pwb-ws-row {
  display: flex;
  gap: 8px;
}
.pwb-ws-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  justify-content: center;
  color: #6366f1;
  font-size: 14px;
}
.pwb-ws-mini span {
  font-size: 8px;
  color: #8e94a8;
  font-weight: 600;
}

.pwb-fc-impact {
  bottom: 0;
  right: 0;
  min-width: 220px;
}

.pwb-impact-row {
  margin-bottom: 10px;
}
.pwb-impact-row:last-child {
  margin-bottom: 0;
}
.pwb-impact-label {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 2px;
}
.pwb-ilabel-orange {
  color: #f59e0b;
}
.pwb-impact-val {
  font-size: 15px;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1;
  margin-bottom: 4px;
}
.pwb-ival-blue {
  color: #6366f1;
}
.pwb-ival-green {
  color: #10b981;
}

.pwb-sparkline {
  width: 100%;
  height: 20px;
  display: block;
}

.pwb-impact-bar {
  height: 5px;
  background: #f1f3fb;
  border-radius: 3px;
  overflow: hidden;
}
.pwb-impact-fill {
  height: 100%;
  border-radius: 3px;
}
.pwb-fill-blue {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
.pwb-fill-green {
  background: linear-gradient(90deg, #10b981, #34d399);
}

/* bottom tag */
.pwb-bottom-tag {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 14px;
  padding: 6px 20px;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
  white-space: nowrap;
  z-index: 6;
  margin-top: 20px;
}
.pwb-bt-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.pwb-bottom-tag span {
  font-size: 13px;
  color: #5c6275;
}
.pwb-bottom-tag strong {
  color: #0b1026;
}

/* =========================
   TABLET (1024px)
========================= */
@media (max-width: 1024px) {
  .pwb-container {
    gap: 40px;
  }

  .pwb-right img {
    width: 100%;
    max-width: 550px;
  }

  .pwb-right {
    min-height: auto;
  }

  .pwb-headline {
    font-size: 42px;
  }
}

/* =========================
   TABLET (900px)
========================= */
@media (max-width: 900px) {
  .pwb-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .pwb-left {
    order: 1;
  }

  .pwb-right {
    order: 2;
    text-align: center;
    min-height: auto;
  }

  .pwb-right img {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: block;
  }

  .pwb-desc {
    max-width: 100%;
  }

  .pwb-bottom-tag {
    position: static;
    transform: none;
    margin: 20px auto 0;
    width: fit-content;
  }
}

/* =========================
   MOBILE (768px)
========================= */
@media (max-width: 768px) {
  #prod-why {
    padding: 50px 0;
  }

  .pwb-headline {
    font-size: 34px;
    line-height: 1.2;
  }

  .pwb-features-grid {
    grid-template-columns: 1fr;
  }

  .pwb-feature {
    padding: 14px;
  }

  .pwb-feat-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .pwb-right img {
    width: 100%;
    max-width: 500px;
  }

  .pwb-bottom-tag {
    width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 14px;
  }
}

/* =========================
   SMALL MOBILE (576px)
========================= */
@media (max-width: 576px) {
  .pwb-headline {
    font-size: 28px;
  }

  .pwb-desc {
    font-size: 14px;
  }

  .pwb-combine-label {
    font-size: 13px;
  }

  .pwb-feature {
    gap: 10px;
    padding: 12px;
  }

  .pwb-feat-title {
    font-size: 13px;
  }

  .pwb-feat-desc {
    font-size: 11px;
  }

  .pwb-right img {
    max-width: 100%;
  }

  .pwb-bottom-tag {
    flex-direction: column;
    gap: 10px;
    border-radius: 12px;
  }

  .pwb-bottom-tag span {
    font-size: 12px;
  }
}

/* =========================
   EXTRA SMALL (400px)
========================= */
@media (max-width: 400px) {
  .pwb-headline {
    font-size: 24px;
  }

  .pwb-feature {
    flex-direction: column;
    align-items: flex-start;
  }

  .pwb-feat-icon {
    margin-bottom: 4px;
  }

  .pwb-bottom-tag {
    padding: 12px;
  }
}
/* ─────────────────────────────────────────────
   SECTION 7 — BLOG & INSIGHTS (light)
───────────────────────────────────────────── */
#prod-blog {
  background: url(./background-images/bg2.png) center center / cover no-repeat;
  padding: 48px 0 60px;
}

.pbl-header {
  text-align: center;
}


.pbl-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pbl-headline {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin-top: 3px;
  margin-bottom: 10px;
}
.pbl-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pbl-sub {
  font-size: 15px;
  color: #64748b;

  margin-top: 3px;
  margin-bottom: 16px;
}
.pbl-underline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pbl-ul-line {
  width: 40px;
  height: 2px;
  background: #7c3aed;
  border-radius: 2px;
}
.pbl-ul-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
}

.pbl-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #7c3aed;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.pbl-view-all:hover {
  background: rgba(124, 58, 237, 0.06);
}

/* cards grid */
.pbl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
  margin-top: 20px;
}

.pbl-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.05);

  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.pbl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.12);
}

.pbl-card-img {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.pbl-img-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pbl-img-dark {
  background: linear-gradient(135deg, #07091a, #0f0c2e);
}

/* featured badge */
.pbl-featured-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(250, 204, 21, 0.15);
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  z-index: 2;
}

/* AI card image */
.pbl-ai-chip {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
  z-index: 2;
}
.pbl-ai-icons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pbl-ai-icons i {
  position: absolute;
  font-size: 16px;
  color: rgba(139, 92, 246, 0.4);
}
.pbl-ai-icons i:nth-child(1) {
  top: 25px;
  left: 25px;
}
.pbl-ai-icons i:nth-child(2) {
  bottom: 25px;
  left: 25px;
}
.pbl-ai-icons i:nth-child(3) {
  top: 25px;
  right: 25px;
}
.pbl-ai-icons i:nth-child(4) {
  bottom: 25px;
  right: 25px;
}

/* dashboard image */
.pbl-img-dashboard {
  align-items: flex-start;
  padding: 12px;
}
.pbl-dash-mockup {
  width: 100%;
  background: rgba(13, 14, 40, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
}
.pbl-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.pbl-dash-header span {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}
.pbl-dash-kpis {
  display: flex;
  gap: 12px;
}
.pbl-dk-label {
  font-size: 8px;
  color: #475569;
}
.pbl-dk-val {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.pbl-dash-line {
  width: 100%;
  height: 35px;
  display: block;
  margin-bottom: 8px;
}
.pbl-dash-bottom {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.pbl-dash-donut svg {
  width: 45px;
  height: 45px;
}
.pbl-dash-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 40px;
  flex: 1;
}
.pbl-db {
  flex: 1;
  background: rgba(139, 92, 246, 0.3);
  border-radius: 2px 2px 0 0;
}
.pbl-db-active {
  background: #8b5cf6;
}

/* network image */
.pbl-img-network {
  position: relative;
}
.pbl-network-nodes {
  position: relative;
  width: 100%;
  height: 100%;
}
.pbl-nn {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  font-size: 18px;
}
.pbl-nn-1 {
  top: 20%;
  left: 15%;
}
.pbl-nn-2 {
  top: 20%;
  right: 15%;
}
.pbl-nn-3 {
  bottom: 20%;
  left: 15%;
}
.pbl-nn-4 {
  bottom: 20%;
  right: 15%;
}
.pbl-net-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* card body */
.pbl-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
 
  flex: 1;
}

.pbl-category {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.pbl-cat-purple {
  color: #7c3aed;
}

.pbl-card-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0b1026;
  line-height: 1.3;
}
.pbl-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  flex: 1;
}

.pbl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.pbl-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pbl-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
}
.pbl-av-1 {
  background: linear-gradient(135deg, #f9a8d4, #ec4899);
}
.pbl-av-2 {
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
}
.pbl-av-3 {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
}

.pbl-author-name {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
}
.pbl-author-date {
  font-size: 12px;
  color: #8e94a8;
}

.pbl-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.pbl-meta span {
  font-size: 12px;
  color: #8e94a8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pbl-arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  text-decoration: none;
  font-size: 13px;
  transition:
    background 0.2s,
    color 0.2s;
  flex-shrink: 0;
}
.pbl-arrow-btn:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

/* newsletter bar */
.pbl-newsletter {
  display: flex;
  align-items: center;
  gap: 28px;
  background: linear-gradient(135deg, #0f0c2e, #1a1050, #07091a);
  border-radius: 20px;

  padding: 18px 40px;
  flex-wrap: wrap;
}

.pbl-nl-illustration {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.pbl-nl-envelope {
  position: relative;
  width: 64px;
  height: 48px;
}
.pbl-env-body {
  width: 64px;
  height: 48px;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  position: absolute;
  bottom: 0;
}
.pbl-env-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  border-top: 24px solid rgba(139, 92, 246, 0.35);
}
.pbl-env-letter {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.pbl-nl-plane {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.5);
  transform: rotate(-20deg);
}

.pbl-nl-text {
  flex: 1;
  min-width: 200px;
}
.pbl-nl-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #f6f7f9;

  margin-bottom: 8px;
}
.pbl-nl-desc {
  font-size: 15px;
  color: #64748b;
  max-width: 500px;
  line-height: 1.6;
}

.pbl-nl-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
  flex-shrink: 0;
}
.pbl-nl-input-wrap {
  width: 100%;
}
.pbl-nl-input {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 0 16px;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.pbl-nl-input::placeholder {
  color: #64748b;
}
.pbl-nl-input:focus {
  border-color: rgba(139, 92, 246, 0.6);
}

.pbl-nl-btn {
  height: 48px;
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.pbl-nl-btn:hover {
  opacity: 0.9;
}

.pbl-nl-note {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   SECTION 8 — GET IN TOUCH (dark)
───────────────────────────────────────────── */
#prod-contact {
  background: url(./background-images/bg4.png) center center / cover no-repeat;
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 90px 0 0;
}

.pct-glow-1 {
  width: 600px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
  top: 0;
  right: 0;
  filter: blur(80px);
}
.pct-glow-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.15),
    transparent 70%
  );
  bottom: 200px;
  left: 0;
  filter: blur(80px);
}

.pct-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 1;
  padding-bottom: 60px;
}


.pct-headline {
  margin-top: 4px;
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 800;
  color: black;
  line-height: 1.2;
  margin-bottom: 16px;
}

.pct-desc {
  font-size: 15px;
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 32px;
}

/* value props */
.pct-props {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.pct-prop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 120px;
}
.pct-prop-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pct-pi-purple {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
}
.pct-pi-blue {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
}
.pct-pi-teal {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  color: #fff;
}

.pct-prop-title {
  font-size: 13px;
  font-weight: 700;
  color: black;
  margin-bottom: 3px;
}
.pct-prop-body {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

/* demo card */
.pct-demo-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.pct-demo-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  font-size: 22px;
  flex-shrink: 0;
}
.pct-demo-text {
  flex: 1;
  min-width: 140px;
}
.pct-demo-title {
  font-size: 16px;
  font-weight: 700;
  color: black;
  margin-bottom: 4px;
}
.pct-demo-body {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.pct-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 11px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.pct-demo-btn:hover {
  opacity: 0.9;
}

/* contact channels */
.pct-channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pct-channel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: white;

  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}
.pct-ch-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.pct-chi-purple {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}
.pct-chi-blue {
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
}
.pct-chi-teal {
  background: rgba(8, 145, 178, 0.2);
  color: #38bdf8;
}
.pct-chi-rose {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
}

.pct-ch-label {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.pct-ch-val {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}

/* RIGHT — form card */
.pct-form-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(12px);
}

.pct-form-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.pct-form-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}
.pct-form-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}
.pct-form-sub {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.pct-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pct-field {
  position: relative;
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  align-items: center;
}
.pct-field-icon {
  position: absolute;
  left: 14px;
  color: #475569;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}
.pct-field-select {
  border: var(--primary);
  position: relative;
}
.pct-select-arrow {
  position: absolute;
  right: 14px;
  color: #475569;
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
}

.pct-input {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.06);
  border: var(--primary);
  border-radius: 12px;
  padding: 0 16px 0 42px;
  color: black;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.pct-input::placeholder {
  color: black;
}
.pct-input:focus {
  border-color: rgba(139, 92, 246, 0.5);
}

.pct-select {
  appearance: none;
  cursor: pointer;
}

.pct-textarea {
  width: 100%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;

  border-radius: 12px;
  padding: 14px 16px;
  color: #0f172a;

  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s;
}
.pct-textarea::placeholder {
  color: #475569;
}
.pct-textarea:focus {
  border-color: rgba(139, 92, 246, 0.5);
}

.pct-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pct-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #7c3aed;
}
.pct-checkbox-label {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  cursor: pointer;
}
.pct-link {
  color: #a78bfa;
  text-decoration: none;
}
.pct-link:hover {
  text-decoration: underline;
}

.pct-submit-btn {
  width: 100%;
  height: 52px;
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
}
.pct-submit-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.pct-privacy-note {
  font-size: 12px;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* trusted bar */
.pct-trusted-bar {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;

  border-radius: 18px;
}
.pct-trusted-label {
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.pct-trusted-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.pct-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.2s;
}
.pct-logo i {
  font-size: 18px;
}
.pct-logo:hover {
  color: #94a3b8;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — new sections
───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pec-diagram {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .pec-product-card {
    max-width: 420px;
    width: 100%;
  }
  .pec-orbit-wrap {
    height: 480px;
  }
}
@media (max-width: 1200px) {
  .pwb-right img {
    width: 100%;
  }

  .pwb-img-placeholder {
    width: 100%;
    max-width: 600px;
  }
}
@media (max-width: 1024px) {
  .pwb-right {
    margin-top: 40px;
  }

  .pwb-right img {
    width: 100%;
    max-width: 600px;
  }

  .pwb-img-placeholder {
    width: 100%;
    max-width: 550px;
    height: 200px;
  }
}
@media (max-width: 768px) {
  .pwb-right img {
    width: 100%;
    max-width: 100%;
  }

  .pwb-img-placeholder {
    width: 100%;
    height: 180px;
  }

  .pwb-img-inner i {
    font-size: 32px;
  }

  .pwb-img-inner {
    font-size: 12px;
  }
}
@media (max-width: 576px) {
  .pwb-right img {
    width: 100%;
  }

  .pwb-img-placeholder {
    height: 160px;
  }

  .pwb-img-inner i {
    font-size: 28px;
  }
}
@media (max-width: 360px) {
  .pwb-img-placeholder {
    height: 140px;
  }

  .pwb-img-inner i {
    font-size: 24px;
  }

  .pwb-img-inner {
    font-size: 11px;
    gap: 8px;
  }
}

@media (max-width: 1024px) {
  .pwb-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pwb-right {
    min-height: 400px;
  }
  .pwb-fc-workflow {
    position: static;
    margin-top: 16px;
  }
  .pwb-fc-impact {
    position: static;
    margin-top: 16px;
  }
  .pwb-bottom-tag {
    position: static;
    transform: none;
    margin-top: 16px;
    display: inline-flex;
  }
  .pct-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pbl-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  #prod-ecosystem {
    padding: 60px 0 40px;
  }
  #prod-why {
    padding: 60px 0;
  }
  #prod-blog {
    padding: 60px 0 40px;
  }
  #prod-contact {
    padding: 60px 0 0;
  }

  .pec-orbit-wrap {
    height: 380px;
  }
  .pec-node-desc {
    display: none;
  }

  .pwb-features-grid {
    grid-template-columns: 1fr;
  }
  .pwb-img-placeholder {
    height: 240px;
  }

  .pbl-cards {
    grid-template-columns: 1fr;
  }
  .pbl-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .pbl-newsletter {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .pbl-nl-form {
    width: 100%;
    min-width: unset;
  }

  .pct-props {
    flex-direction: column;
  }
  .pct-channels {
    grid-template-columns: 1fr 1fr;
  }
  .pct-form-row {
    grid-template-columns: 1fr;
  }

  .pct-trusted-logos {
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .pec-orbit-wrap {
    height: 300px;
  }
  .pec-node-label {
    font-size: 9px;
  }
  .pec-node-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .pct-channels {
    grid-template-columns: 1fr;
  }
  .pct-demo-card {
    flex-direction: column;
  }
  .pct-trusted-logos {
    gap: 16px;
  }
  .pct-logo span {
    font-size: 12px;
  }
}

/* ─────────────────────────────────────────────
   SECTION 9 — BUILT TO DELIVER REAL BUSINESS IMPACT (light)
───────────────────────────────────────────── */
#prod-impact {
  background: url(./background-images/bg2.png) center center / cover no-repeat;
  padding: 65px 0 60px;
}

.pim-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px;
}

.pim-headline {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  color: #0b1026;
  line-height: 1.1;
  margin-bottom: 16px;
  white-space: nowrap;
  margin-top: 5px;
}

.pim-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pim-sub {
  font-size: 19px;
  color: #5c6275;
  line-height: 1.7;
  margin-bottom: 20px;
}

.pim-title-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pim-title-underline::before,
.pim-title-underline::after {
  content: "";
  width: 40px;
  height: 2px;
  background: rgba(124, 58, 237, 0.35);
  border-radius: 2px;
}
.pim-underline-line {
  width: 40px;
  height: 2px;
  background: rgba(124, 58, 237, 0.35);
  border-radius: 2px;
}
.pim-underline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c3aed;
}

/* cards grid */
.pim-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.pim-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.pim-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(124, 58, 237, 0.08);
}

.pim-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pim-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}
.pim-icon-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.pim-icon-blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.pim-icon-teal {
  background: linear-gradient(135deg, #0891b2, #0e7490);
}
.pim-icon-orange {
  background: linear-gradient(135deg, #ea580c, #f97316);
}

.pim-card-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #e8eaf5;
  line-height: 1;
}

.pim-card-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

.pim-card-body {
  font-size: 13px;
  color: #64748b;

  line-height: 1.6;
}

.pim-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pim-card-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #0b1026;
  font-weight: 500;
}
.pim-card-list li i {
  color: #7c3aed;
  font-size: 13px;
  flex-shrink: 0;
}
.pim-check-blue {
  color: #2563eb !important;
}
.pim-check-teal {
  color: #0891b2 !important;
}
.pim-check-orange {
  color: #ea580c !important;
}

/* mockup areas */
.pim-mockup {
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  border-radius: 14px;
  padding: 14px;
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.pim-mockup-chart {
  width: 100%;
  height: 70px;
  display: block;
}

.pim-mockup-donut {
  flex-shrink: 0;
}
.pim-mockup-donut svg {
  width: 56px;
  height: 56px;
  display: block;
}

.pim-mockup-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 80px;
}
.pim-mockup-stat {
}
.pim-ms-label {
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 3px;
}
.pim-ms-val {
  font-size: 14px;
  font-weight: 800;
  font-family: "Plus Jakarta Sans", sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pim-ms-purple {
  color: #7c3aed;
}
.pim-ms-val i {
  font-size: 12px;
}

.pim-ms-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 28px;
}
.pim-ms-bar {
  flex: 1;
  background: rgba(124, 58, 237, 0.2);
  border-radius: 2px 2px 0 0;
}
.pim-ms-bar-active {
  background: #7c3aed;
}

/* card 02 — task list */
.pim-mockup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-wrap: nowrap;
}
.pim-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pim-task-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pim-av-1 {
  background: linear-gradient(135deg, #f9a8d4, #ec4899);
}
.pim-av-2 {
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
}
.pim-av-3 {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
}
.pim-av-4 {
  background: linear-gradient(135deg, #fcd34d, #f59e0b);
}

.pim-task-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ddd6fe, #c4b5fd);
}
.pim-task-bar-short {
  max-width: 60%;
}
.pim-task-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  flex-shrink: 0;
}

/* card 03 — performance */
.pim-mockup-perf {
  flex-direction: column;
  align-items: stretch;
}
.pim-perf-header {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 6px;
}
.pim-growth-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 184, 166, 0.1);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 8px;
  padding: 5px 12px;
  margin-top: 8px;
}
.pim-growth-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.pim-growth-val {
  font-size: 14px;
  font-weight: 800;
  color: #14b8a6;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.pim-growth-val i {
  font-size: 11px;
}

/* card 04 — globe */
.pim-mockup-globe {
  position: relative;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  flex-direction: column;
}
.pim-globe {
  font-size: 52px;
  color: #fed7aa;
  z-index: 1;
  position: relative;
}
.pim-globe-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e8eaf5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.pim-gi-cloud {
  top: 6px;
  left: 10px;
  color: #60a5fa;
}
.pim-gi-db {
  top: 6px;
  right: 10px;
  color: #a78bfa;
}
.pim-gi-spark {
  bottom: 6px;
  right: 16px;
  color: #f59e0b;
}

/* bottom stats bar */
.pim-stats-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 20px;
  padding: 11px 26px;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.06);
  flex-wrap: wrap;
}

.pim-stats-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1.2;
  min-width: 200px;
}
.pim-stats-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}
.pim-stats-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0b1026;
  line-height: 1.25;
  margin-bottom: 6px;
}
.pim-stats-body {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.pim-stats-right {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  flex: 2.5;
}

.pim-stat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 120px;
}
.pim-stat > i {
  font-size: 22px;
  margin-top: 2px;
  flex-shrink: 0;
}
.pim-stat-icon-purple {
  color: #7c3aed;
}
.pim-stat-icon-blue {
  color: #2563eb;
}
.pim-stat-icon-teal {
  color: #0891b2;
}
.pim-stat-icon-orange {
  color: #ea580c;
}

.pim-stat-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #0b1026;
  line-height: 1;
  margin-bottom: 4px;
}
.pim-stat-lbl {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   SECTION 10 — MEET OUR PRODUCTS (light)
───────────────────────────────────────────── */
#prod-meet {
  background: url(./background-images/bg4.png) center center / cover no-repeat;
    padding: 55px 0 60px;

}

.pmt-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 52px;
}


.pmt-headline {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  color: #0b1026;
  line-height: 1.1;
  margin-top: 3px;
  margin-bottom: 16px;
}

.pmt-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pmt-sub {
  font-size: 16px;
  color: #5c6275;
  line-height: 1.7;
  margin-bottom: 20px;
}

.pmt-title-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pmt-underline-line {
  width: 40px;
  height: 2px;
  background: rgba(124, 58, 237, 0.35);
  border-radius: 2px;
}
.pmt-underline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c3aed;
}

/* product panels */
.pmt-panel {
  width: 100%;
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(99, 102, 241, 0.07);
  margin: 24px 0;
  margin-top: -20px;
}

.pmt-panel img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 24px;
}
/* panel info column */
.pmt-panel-info {
  padding: 32px 28px;
  border-right: 1px solid #e8eaf5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pmt-prod-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pmt-prod-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.pmt-avatar-blue {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
}
.pmt-avatar-rankmesh {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
}

.pmt-prod-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
}
.pmt-name-blue {
  color: #2563eb;
}
.pmt-name-rankmesh {
  color: #7c3aed;
}

.pmt-prod-tag {
  font-size: 12px;
  font-weight: 600;
  color: #8e94a8;
}

.pmt-prod-desc {
  font-size: 14px;
  color: #5c6275;
  line-height: 1.65;
}

.pmt-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pmt-feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #0b1026;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid #f1f3fb;
}
.pmt-feature-list li i {
  font-size: 13px;
  color: #7c3aed;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.pmt-perfect-for {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f3fb;
}
.pmt-pf-label {
  font-size: 12px;
  font-weight: 700;
  color: #8e94a8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.pmt-pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pmt-pf-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(37, 99, 235, 0.07);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}
.pmt-pf-tag-rankmesh {
  background: rgba(124, 58, 237, 0.07);
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.2);
}

/* panel visual column */
.pmt-panel-visual {
  position: relative;
  background: #f8f9ff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.pmt-demo-btn {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 20px;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
  transition: opacity 0.2s;
  z-index: 2;
  position: relative;
}
.pmt-demo-btn:hover {
  opacity: 0.9;
}

.pmt-demo-btn-blue {
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

/* dashboard mockup */
.pmt-dashboard {
  display: flex;
  border-radius: 16px;
  border: 1px solid #e8eaf5;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.08);
  flex: 1;
  min-height: 0;
}

/* sidebar */
.pmt-dash-sidebar {
  width: 150px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #f1f3fb;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pmt-dash-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 800;
  color: #0b1026;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.pmt-dash-brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.pmt-brand-blue {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
}
.pmt-brand-rankmesh {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
}

.pmt-dash-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pmt-dash-nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #8e94a8;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.pmt-dash-nav-item i {
  font-size: 11px;
  flex-shrink: 0;
  width: 12px;
}
.pmt-dash-nav-item:hover {
  background: #f8f9ff;
  color: #0b1026;
}

.pmt-active {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #7c3aed !important;
  font-weight: 700 !important;
}
.pmt-active-blue {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
  font-weight: 700 !important;
}

/* main content */
.pmt-dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.pmt-dash-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f3fb;
}

.pmt-dash-title {
  font-size: 14px;
  font-weight: 800;
  color: #0b1026;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.pmt-dash-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  border-radius: 8px;
  padding: 6px 10px;
  max-width: 180px;
}
.pmt-dash-search i {
  font-size: 10px;
}

.pmt-dash-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #94a3b8;
}
.pmt-icons-blue {
  gap: 0;
}

.pmt-dash-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f9a8d4, #ec4899);
  flex-shrink: 0;
}

.pmt-req-demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.pmt-req-demo-pill:hover {
  opacity: 0.9;
}

/* KPI row */
.pmt-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid #f1f3fb;
}

.pmt-kpis-rankmesh {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pmt-dash-kpi {
  padding: 10px 14px;
  border-right: 1px solid #f1f3fb;
  position: relative;
}
.pmt-dash-kpi:last-child {
  border-right: none;
}

.pmt-dk-lbl {
  font-size: 10px;
  color: #8e94a8;
  margin-bottom: 3px;
  font-weight: 500;
}

.pmt-dk-val {
  font-size: 15px;
  font-weight: 800;
  color: #0b1026;
  font-family: "Plus Jakarta Sans", sans-serif;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.pmt-dk-delta {
  font-size: 10px;
  font-weight: 700;
  color: #10b981;
}
.pmt-delta-red {
  color: #ef4444 !important;
}

/* hiring pipeline */
.pmt-dash-pipeline {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f3fb;
}
.pmt-pipeline-title {
  font-size: 11px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 10px;
}

.pmt-pipeline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pmt-pipe-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 10px;
  min-width: 52px;
  text-align: center;
}
.pmt-pipe-stage i {
  color: #7c3aed;
  font-size: 14px;
  margin-bottom: 2px;
}
.pmt-pipe-stage span {
  color: #64748b;
  font-weight: 500;
}
.pmt-pipe-stage strong {
  font-size: 13px;
  font-weight: 800;
  color: #0b1026;
}

.pmt-pipe-arrow {
  color: #d1d5db;
  font-size: 10px;
  flex-shrink: 0;
}

/* charts row */
.pmt-dash-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
}

.pmt-charts-rankmesh {
  grid-template-columns: 3fr 2fr;
}

.pmt-dash-chart-card {
  padding: 12px 14px;
  border-right: 1px solid #f1f3fb;
}
.pmt-dash-chart-card:last-child {
  border-right: none;
}

.pmt-chart-title {
  font-size: 11px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 8px;
}

.pmt-chart-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.psh-chart-dropdown {
  font-size: 10px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.pmt-chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.pmt-chart-labels span {
  font-size: 8px;
  color: #94a3b8;
}

.pmt-bar-chart {
  width: 100%;
  height: 90px;
  display: block;
}

.pmt-line-chart {
  width: 100%;
  height: 90px;
  display: block;
}

/* donut legend */
.pmt-donut-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pmt-donut-row svg {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.pmt-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pmt-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}
.pmt-leg-item span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pmt-leg-item strong {
  color: #0b1026;
  margin-left: 2px;
}

/* chart legend (for rankmesh) */
.pmt-chart-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 10px;
  color: #64748b;
}
.pmt-leg-line {
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 3px;
}
.pmt-leg-blue {
  background: #3b82f6;
}
.pmt-leg-teal {
  background: #14b8a6;
}

/* chart wide */
.pmt-chart-wide {
  grid-column: span 1;
}

/* keyword table */
.pmt-chart-keywords {
}
.pmt-kw-table {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pmt-kw-head {
  display: flex;
  gap: 8px;
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  padding: 0 0 4px 0;
  border-bottom: 1px solid #f1f3fb;
  margin-bottom: 2px;
}
.pmt-kw-head span:first-child {
  flex: 1;
}
.pmt-kw-head span:nth-child(2) {
  width: 44px;
  text-align: center;
}
.pmt-kw-head span:nth-child(3) {
  width: 36px;
  text-align: right;
}

.pmt-kw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #0b1026;
  font-weight: 500;
}
.pmt-kw-row span:first-child {
  flex: 1;
  color: #5c6275;
}
.pmt-kw-row span:nth-child(2) {
  width: 44px;
  text-align: center;
  font-weight: 700;
}
.pmt-kw-row span:nth-child(3) {
  width: 36px;
  text-align: right;
}
.pmt-kw-up {
  color: #10b981;
  font-weight: 700;
}

/* bottom feature bar */
.pmt-bottom-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 8px;
}

.pmt-bb-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
  flex: 1;
  border-right: 1px solid #e8eaf5;
}
.pmt-bb-item:last-child {
  border-right: none;
}

.pmt-bb-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.pmt-bb-purple {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}
.pmt-bb-blue {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}
.pmt-bb-orange {
  background: linear-gradient(135deg, #ea580c, #f97316);
}
.pmt-bb-teal {
  background: linear-gradient(135deg, #0891b2, #0e7490);
}

.pmt-bb-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 4px;
}
.pmt-bb-body {
  font-size: 12px;
  color: #8e94a8;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   SECTION 11 — FEATURE SHOWCASE (light)
───────────────────────────────────────────── */
#prod-showcase {
  background: url(./background-images/bg2.png) center center / cover no-repeat;

  padding: 90px 0 60px;
}

.psh-container {
}

.psh-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
}


.psh-headline {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  color: #0b1026;
  line-height: 1.1;
  margin-bottom: 6px;
  margin-top: 3px;
  white-space: nowrap;
}
.psh-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.psh-sub {
  font-size: 15px;
  color: #5c6275;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* tabs */
.psh-tabs {
  display: inline-flex;
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.06);
}

.psh-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.psh-tab i {
  font-size: 14px;
}

.psh-tab-active {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.psh-tabs-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.psh-ul-line {
  width: 40px;
  height: 2px;
  background: rgba(124, 58, 237, 0.35);
  border-radius: 2px;
}
.psh-ul-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
}

/* panel layout */
.psh-panel {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: stretch;
}

/* dashboard (left) — reuse pmt-dash styles */
.psh-dashboard {
  display: flex;
  border-radius: 20px;
  border: 1px solid #e8eaf5;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(99, 102, 241, 0.08);
}

/* AI assistant widget inside sidebar */
.psh-ai-assistant {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
}
.psh-ai-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
}
.psh-ai-title {
  font-size: 11px;
  font-weight: 700;
  color: #7c3aed;
}
.psh-ai-sub {
  font-size: 10px;
  color: #a78bfa;
}

.psh-bell {
  position: relative;
}

/* KPI icons */
.psh-kpi-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.psh-kpi-purple {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}
.psh-kpi-blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.psh-kpi-orange {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}
.psh-kpi-teal {
  background: rgba(8, 145, 178, 0.1);
  color: #0891b2;
}

/* info panel (right) */
.psh-info {
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.07);
}

.psh-info-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.psh-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
}

.psh-info-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0b1026;
  margin-bottom: 3px;
}
.psh-info-tag {
  font-size: 12px;
  color: #8e94a8;
  font-weight: 600;
}

.psh-info-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.65;
}

/* feature list */
.psh-feature-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.psh-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.psh-feature-item:hover {
  background: #f8f9ff;
  border-color: #e8eaf5;
}

.psh-fi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  font-size: 15px;
  flex-shrink: 0;
}

.psh-fi-text {
  flex: 1;
}
.psh-fi-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 2px;
}
.psh-fi-body {
  font-size: 12px;
  color: #8e94a8;
  line-height: 1.4;
}

.psh-fi-arrow {
  font-size: 11px;
  color: #c4c9e2;
  flex-shrink: 0;
  transition: color 0.15s;
}
.psh-feature-item:hover .psh-fi-arrow {
  color: #7c3aed;
}

.psh-see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #7c3aed;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s;
}
.psh-see-all:hover {
  gap: 10px;
}

/* impact bar */
.psh-impact-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 20px;
  padding: 24px 32px;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.06);
  flex-wrap: wrap;
}

.psh-impact-left {
  flex-shrink: 0;
  min-width: 160px;
}
.psh-impact-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0b1026;
  line-height: 1.2;
}
.psh-impact-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: #7c3aed;
  border-radius: 2px;
  margin-top: 10px;
}

.psh-impact-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  flex-wrap: wrap;
}

.psh-impact-stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 130px;
}

.psh-is-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.psh-isi-purple {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}
.psh-isi-blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.psh-isi-teal {
  background: rgba(8, 145, 178, 0.1);
  color: #0891b2;
}
.psh-isi-orange {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

.psh-is-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #0b1026;
  line-height: 1;
  margin-bottom: 3px;
}
.psh-is-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 2px;
}
.psh-is-body {
  font-size: 12px;
  color: #8e94a8;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────
   SECTION 12 — PRICING PLANS (light)
───────────────────────────────────────────── */
#prod-pricing {
  background: url(./background-images/bg3.png) center center / cover no-repeat;

  padding: 65px 0 60px;
}

.ppr-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}



.ppr-headline {
  font-size: clamp(32px, 4.5vw, 58px);
  font-weight: 800;
  color: #0b1026;
  line-height: 1.1;
  margin-top: 3px;
  margin-bottom: 14px;
}

.ppr-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ppr-sub {
  font-size: 16px;
  color: #5c6275;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* billing toggle */
.ppr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  border-radius: 50px;
  padding: 6px 8px;
  margin-bottom: 20px;
}

.ppr-toggle-option {
  padding: 8px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #8e94a8;
  cursor: pointer;
  transition: all 0.2s;
}

.ppr-toggle-active {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.ppr-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #10b981;
}
.ppr-save-badge i {
  font-size: 11px;
}

/* cards */
.ppr-cards {
  display: grid;
  cursor: pointer;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
  align-items: stretch;
  transition: all 0.35s ease;
}

.ppr-card {
  background: #fff;
  border: 1px solid #e8eaf5;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.ppr-card:hover {
  transform: translateY(-10px);
  border-color: #7c3aed;
  box-shadow: 0 20px 50px rgba(124, 58, 237, 0.18);
}

.ppr-card-active {
  transform: translateY(-10px);
  border: 2px solid #7c3aed;
  box-shadow: 0 24px 60px rgba(124, 58, 237, 0.25);
}

.ppr-card-active .ppr-card-title {
  color: #7c3aed;
}

.ppr-card-active .ppr-btn {
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  color: #fff;
  border-color: transparent;
}
/* featured card */
.ppr-card-featured {
  border-color: #7c3aed;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.15);
  padding-top: 44px;
}
.ppr-card-featured:hover {
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.22);
}

.ppr-popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 18px;
  border-radius: 0 0 12px 12px;
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
}

.ppr-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.ppr-icon-purple {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}
.ppr-icon-purple-solid {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
}
.ppr-icon-blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.ppr-icon-teal {
  background: rgba(8, 145, 178, 0.1);
  color: #0891b2;
}

.ppr-card-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0b1026;
}

.ppr-card-tag {
  font-size: 13px;
  color: #8e94a8;
  line-height: 1.5;
  margin-top: -4px;
}

.ppr-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}

.ppr-price-amt {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: #0b1026;
  line-height: 1;
}
.ppr-price-amt-purple {
  color: #7c3aed;
}
.ppr-price-amt-blue {
  color: #2563eb;
}
.ppr-price-amt-teal {
  color: #0891b2;
  font-size: 34px;
}

.ppr-price-period {
  font-size: 13px;
  color: #8e94a8;
  font-weight: 500;
}

.ppr-billed {
  font-size: 12px;
  color: #94a3b8;
  margin-top: -4px;
}

.ppr-divider {
  height: 1px;
  background: #f1f3fb;
  margin: 4px 0;
}

.ppr-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.ppr-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #0b1026;
  font-weight: 500;
}
.ppr-features li i {
  color: #10b981;
  font-size: 14px;
  flex-shrink: 0;
}

/* buttons */
.ppr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  margin-top: auto;
}

.ppr-btn-primary {
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
}
.ppr-btn-primary:hover {
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.5);
  opacity: 0.95;
}

.ppr-btn-outline {
  background: transparent;
  color: #7c3aed;
  border: 1.5px solid rgba(124, 58, 237, 0.4);
}
.ppr-btn-outline:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: #7c3aed;
}

.ppr-btn-outline-blue {
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.4);
}
.ppr-btn-outline-blue:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: #2563eb;
}

.ppr-btn-outline-teal {
  color: #0891b2;
  border-color: rgba(8, 145, 178, 0.4);
}
.ppr-btn-outline-teal:hover {
  background: rgba(8, 145, 178, 0.06);
  border-color: #0891b2;
}

/* trust strip */
.ppr-trust-strip {
  display: flex;
  align-items: stretch;
  background: #f8f9ff;
  border: 1px solid #e8eaf5;
  border-radius: 20px;
  overflow: hidden;
}

.ppr-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
  flex: 1;
  border-right: 1px solid #e8eaf5;
}
.ppr-trust-item:last-child {
  border-right: none;
}

.ppr-ti-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ppr-tii-purple {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}
.ppr-tii-teal {
  background: rgba(8, 145, 178, 0.1);
  color: #0891b2;
}
.ppr-tii-orange {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

/* 30-day badge */
.ppr-ti-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}
.ppr-ti-badge span {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.ppr-ti-badge small {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ppr-ti-title {
  font-size: 13px;
  font-weight: 700;
  color: #0b1026;
  margin-bottom: 4px;
}
.ppr-ti-body {
  font-size: 12px;
  color: #8e94a8;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   SECTION 13 — FAQ (light)
───────────────────────────────────────────── */

.pfq-section {
  background-image: url("./background-images/bg4.png");
    padding: 60px 0 60px;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
.pfq-container {
  max-width: 1280px;
  margin: 0 auto;
  
}
/* ─────────────────────────────────────────────
   HEADER
───────────────────────────────────────────── */
.pfq-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.pfq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: var(--pfq-radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--pfq-primary);
  background: var(--pfq-badge-bg);
  border: 1px solid var(--pfq-badge-border);
  margin-bottom: 18px;
}

.pfq-badge i {
  font-size: 13px;
}

.pfq-heading {
  font-size: 46px;
  font-weight: 800;
  color: var(--pfq-text-primary);
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pfq-heading-gradient {
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pfq-subtitle {
  font-size: 16px;
  color: var(--pfq-text-muted);
  line-height: 1.7;
  font-weight: 400;
}

.pfq-underline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
}

.pfq-underline-bar {
  width: 60px;
  height: 2px;
  background: var(--pfq-gradient);
  border-radius: 2px;
}

.pfq-underline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pfq-primary);
}

/* ─────────────────────────────────────────────
   BODY LAYOUT — Grid
───────────────────────────────────────────── */
.pfq-body {
  display: grid;
    grid-template-columns: minmax(0, 2fr) 350px;

  gap: 28px;
  align-items: start;
}
@media (max-width: 1200px) {
  .pph-principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pph-principles-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────
   ACCORDION
───────────────────────────────────────────── */
.pfq-accordion {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pfq-item {
  height: auto;
  background: var(--pfq-white);
  border: 1px solid var(--pfq-border);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.pfq-item-open {
  border-color: var(--pfq-border-active);
  box-shadow: var(--pfq-shadow-active);
}

.pfq-item-heading {
  margin: 0;
}

.pfq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.pfq-question:focus-visible {
  outline: 2px solid var(--pfq-primary);
  outline-offset: 2px;
}

.pfq-question-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.pfq-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(240, 236, 255, 0.95)
  );
  border: 1px solid rgba(123, 92, 255, 0.1);
  box-shadow:
    0 8px 16px rgba(122, 92, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: var(--pfq-transition-fast);
}

.pfq-icon i {
  font-size: 14px;
  background: var(--pfq-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pfq-item-open .pfq-icon {
  background: var(--pfq-gradient);
  border-color: transparent;
}

.pfq-item-open .pfq-icon i {
  -webkit-text-fill-color: var(--pfq-white);
}

.pfq-question-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--pfq-text-primary);
  line-height: 1.4;
}

.pfq-chevron {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--pfq-primary);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(241, 236, 255, 0.95)
  );
  border: 1px solid rgba(122, 92, 255, 0.14);
  box-shadow: var(--pfq-shadow-sm);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    color 0.3s ease;
}

.pfq-item-open .pfq-chevron {
  background: var(--pfq-gradient);
  color: var(--pfq-white);
  border-color: transparent;
  transform: rotate(180deg);
  box-shadow: var(--pfq-shadow-active);
}

.pfq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pfq-answer-inner {
  padding: 0 20px 20px 78px;
  font-size: 15px;
  color: var(--pfq-text-muted);
  line-height: 1.7;
  font-weight: 400;
}

/* ─────────────────────────────────────────────
   RESOURCES PANEL
───────────────────────────────────────────── */
.pfq-resources {
  grid-column: 2;
  background: var(--pfq-surface);
  border: 1px solid var(--pfq-border);
  border-radius: var(--pfq-radius-md);
  padding: 8px 24px;
  align-items: start;
}

.pfq-resources-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pfq-gradient);
  color: var(--pfq-white);
  font-size: 18px;
  margin-bottom: 16px;
}

.pfq-resources-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pfq-text-primary);
  margin: 0 0 6px;
}

.pfq-resources-desc {
  font-size: 14px;
  color: var(--pfq-text-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

.pfq-resource-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  text-decoration: none;
  background: var(--pfq-white);
  transition: var(--pfq-transition-fast);
}

.pfq-resource-item:hover {
  background: rgba(122, 92, 255, 0.06);
  transform: translateY(-2px);
  box-shadow: var(--pfq-shadow-sm);
}

.pfq-resource-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--pfq-white);
}

.pfq-resource-icon-purple {
  background: #7a3cff;
}
.pfq-resource-icon-blue {
  background: #246bff;
}
.pfq-resource-icon-teal {
  background: #17b3a3;
}

.pfq-resource-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pfq-resource-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pfq-text-primary);
}

.pfq-resource-body {
  font-size: 13px;
  color: var(--pfq-text-muted);
  line-height: 1.5;
}

.pfq-resource-arrow {
  align-self: center;
  margin-left: auto;
  color: var(--pfq-text-muted);
  font-size: 12px;
  flex-shrink: 0;
  transition: var(--pfq-transition-fast);
}

.pfq-resource-item:hover .pfq-resource-arrow {
  color: var(--pfq-primary);
  transform: translateX(3px);
}

.pfq-resources-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pfq-primary);
  text-decoration: none;
  margin-top: 6px;
  transition: gap 0.2s ease;
}

.pfq-resources-link:hover {
  gap: 12px;
}

/* ─────────────────────────────────────────────
   BOTTOM CTA
───────────────────────────────────────────── */
.pfq-cta {
  margin-top: 40px;
  background: var(--pfq-surface);
  border: 1px solid var(--pfq-border);
  border-radius: var(--pfq-radius-md);
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.pfq-cta-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pfq-cta-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pfq-gradient);
  color: var(--pfq-white);
  font-size: 19px;
}

.pfq-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pfq-cta-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pfq-text-primary);
}

.pfq-cta-body {
  font-size: 14px;
  color: var(--pfq-text-muted);
}

.pfq-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pfq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--pfq-transition-fast);
}

.pfq-cta-btn-outline {
  background: var(--pfq-white);
  border: 1px solid var(--pfq-border);
  color: var(--pfq-text-primary);
}

.pfq-cta-btn-outline:hover {
  border-color: var(--pfq-primary);
  color: var(--pfq-primary);
}

.pfq-cta-btn-primary {
  background: var(--pfq-gradient);
  border: 1px solid transparent;
  color: var(--pfq-white);
  box-shadow: 0 8px 20px rgba(90, 70, 255, 0.3);
}

.pfq-cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(90, 70, 255, 0.4);
}

/* ─────────────────────────────────────────────
   FADE-UP ANIMATION
───────────────────────────────────────────── */
.pfq-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.pfq-fade-up.pfq-show {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */

/* Laptop */
@media (max-width: 1200px) {
  .pfq-container {
    max-width: 1024px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .pfq-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pfq-resources {
    order: -1;
  }

  .pfq-heading {
    font-size: 38px;
  }
}

@media (max-width: 768px) {
  .pfq-section {
    padding: 64px 0;
  }

  .pfq-heading {
    font-size: 30px;
  }

  .pfq-subtitle {
    font-size: 15px;
  }

  .pfq-underline {
    margin-bottom: 40px;
  }

  .pfq-question {
    padding: 16px;
  }

  .pfq-question-text {
    font-size: 15px;
  }

  .pfq-answer-inner {
    padding: 0 16px 18px 64px;
    font-size: 14px;
  }

  .pfq-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .pfq-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .pfq-cta-actions {
    width: 100%;
  }

  .pfq-cta-btn {
    flex: 1;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .pfq-container {
    padding: 0 16px;
  }

  .pfq-heading {
    font-size: 26px;
  }

  .pfq-question-left {
    gap: 12px;
  }

  .pfq-question-text {
    font-size: 14px;
  }

  .pfq-answer-inner {
    padding-left: 16px;
  }

  .pfq-chevron {
    width: 26px;
    height: 26px;
    min-width: 26px;
    font-size: 11px;
  }

  .pfq-cta-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pfq-cta-actions {
    flex-direction: column;
  }

  .pfq-resources {
    padding: 22px 18px;
  }
}
/* ─────────────────────────────────────────────
   RESPONSIVE — sections 9-13
───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .pmt-panel {
    grid-template-columns: 300px 1fr;
  }
  .ppr-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .ppr-trust-strip {
    flex-wrap: wrap;
  }
  .ppr-trust-item {
    min-width: 200px;
    border-right: none;
    border-bottom: 1px solid #e8eaf5;
  }
  .ppr-trust-item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 1024px) {
  .pim-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .pmt-panel {
    grid-template-columns: 1fr;
  }
  .pmt-panel-info {
    border-right: none;
    border-bottom: 1px solid #e8eaf5;
  }
  .pmt-panel-reverse {
    direction: ltr;
  }

  .psh-panel {
    grid-template-columns: 1fr;
  }
  .psh-info {
    order: -1;
  }

  .pfq-body {
    grid-template-columns: 1fr;
  }
  .pfq-resources {
    order: -1;
  }
}

@media (max-width: 768px) {
  #prod-impact {
    padding: 60px 0 40px;
  }
  #prod-meet {
    padding: 60px 0 40px;
  }
  #prod-showcase {
    padding: 60px 0 40px;
  }
  #prod-pricing {
    padding: 60px 0 40px;
  }
  #prod-faq {
    padding: 60px 0 40px;
  }

  .pim-cards {
    grid-template-columns: 1fr;
  }
  .pim-stats-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .pim-stats-right {
    width: 100%;
  }

  .pmt-panel {
    border-radius: 16px;
  }
  .pmt-dash-sidebar {
    width: 120px;
  }
  .pmt-feature-list {
    grid-template-columns: 1fr;
  }
  .pmt-pf-tags {
    gap: 4px;
  }
  .pmt-bottom-bar {
    flex-direction: column;
  }
  .pmt-bb-item {
    border-right: none;
    border-bottom: 1px solid #e8eaf5;
  }
  .pmt-bb-item:last-child {
    border-bottom: none;
  }

  .psh-tabs {
    flex-direction: column;
    width: 100%;
  }
  .psh-tab {
    justify-content: center;
  }
  .psh-impact-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .psh-impact-stats {
    width: 100%;
    gap: 16px;
  }
  .psh-impact-stat {
    min-width: 140px;
  }

  .ppr-cards {
    grid-template-columns: 1fr;
  }
  .ppr-trust-strip {
    flex-direction: column;
    border-radius: 16px;
  }
  .ppr-trust-item {
    border-right: none;
    border-bottom: 1px solid #e8eaf5;
  }
  .ppr-trust-item:last-child {
    border-bottom: none;
  }

  .pfq-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .pfq-cta-actions {
    width: 100%;
  }
  .pfq-cta-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .pim-stat-num {
    font-size: 22px;
  }
  .pim-stats-right {
    flex-direction: column;
  }

  .pmt-dash-sidebar {
    display: none;
  }
  .pmt-dash-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .pmt-kpis-rankmesh {
    grid-template-columns: repeat(2, 1fr);
  }
  .pmt-pipeline-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }
  .pmt-dash-charts {
    grid-template-columns: 1fr;
  }
  .pmt-charts-rankmesh {
    grid-template-columns: 1fr;
  }

  .psh-impact-stats {
    flex-direction: column;
  }

  .ppr-card-featured {
    padding-top: 44px;
  }
  .ppr-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }
  .ppr-save-badge {
    width: 100%;
    justify-content: center;
  }
  .pfq-item-body {
    padding-left: 20px;
  }
  .pfq-cta-left {
    flex-direction: column;
    align-items: flex-start;
  }
}