/**
 * ProductPulse — brand overrides on Agntix theme
 * See business-info/ProductPulse_Brand_Guidelines_1.html
 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

:root {
  --pp-cyan: #3dcdf8;
  --pp-cyan-dark: #2bb8e3;
  --pp-cyan-light: #d6f5fd;
  /* Pressed / active — slightly darker than primary hover (brand cyan family) */
  --pp-cyan-pressed: #1ea3cc;
  --pp-night: #19191f;
  --pp-slate: #565d6d;
  --pp-border: #dee1e6;
  /* Theme token override: replace tp-common-brown everywhere */
  --tp-common-brown: #131047;
  /* Muted italic accent in Playfair titles (replaces theme rgba(69,48,48,0.6)) */
  --pp-navy-muted: rgba(19, 16, 71, 0.62);

  /* Theme orange accents -> ProductPulse cyan */
  --tp-common-red-3: var(--pp-cyan);
  --tp-common-red-2: var(--pp-cyan);

  /* Preloader + other theme-green accents -> ProductPulse cyan */
  --tp-theme-green: var(--pp-cyan);
}

/* Italic span in section titles (Process, etc.) — navy family, softened like default theme */
.tp-section-title-playfair span {
  color: var(--pp-navy-muted);
}

body,
.tp-btn-border-2.st,
.st-hero-btn a,
.tp-section-title-playfair,
.st-about-title,
.tp-section-subtitle,
.tp-megamenu-title {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

body {
  color: var(--pp-night);
}

/* Primary interactive accent */
a:hover,
.tp-line-black:hover,
.tp-line-white:hover {
  color: var(--pp-cyan-dark);
}

.tp-btn-border-2.st {
  border-color: var(--pp-border);
}

.tp-btn-border-2.st:hover {
  border-color: var(--pp-cyan);
  color: var(--pp-night);
  background: rgba(61, 205, 248, 0.12);
}

/* Header logo block width */
.tp-header-logo {
  width: 300px;
}
.tp-header-logo img {
  max-width: 100%;
  height: auto;
}

/* Preloader background */
#preloader {
  background-color: var(--pp-cyan-light);
}

.pp-preloader-mark {
  position: relative;
  width: 64px;
  height: 56px;
  margin: 0 auto;
}

.pp-preloader-mark img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform, opacity, filter;
}

.pp-preloader-top {
  transform: translateY(-28px);
  opacity: 0;
  animation: ppPreloaderTop 1200ms cubic-bezier(0.2, 0.9, 0.2, 1) 140ms both;
}

.pp-preloader-bottom {
  transform: translateY(28px);
  opacity: 0;
  animation: ppPreloaderBottom 1200ms cubic-bezier(0.2, 0.9, 0.2, 1) 140ms both;
}

@keyframes ppPreloaderTop {
  0% {
    transform: translateY(-34px);
    opacity: 0;
    filter: blur(1.5px);
  }
  70% {
    transform: translateY(2px);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes ppPreloaderBottom {
  0% {
    transform: translateY(34px);
    opacity: 0;
    filter: blur(1.5px);
  }
  70% {
    transform: translateY(-2px);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Navbar height (slightly taller than theme default) */
#header-sticky.tp-header-12-ptb {
  padding-top: 18px;
  padding-bottom: 18px;
}

@media (max-width: 991px) {
  #header-sticky.tp-header-12-ptb {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Hero emphasis */
.st-hero-title i,
.st-hero-title span.pp-hero-accent {
  color: var(--pp-cyan);
  font-style: normal;
}

/* Hero circular CTA — Cyan Light fill; Cyan Dark hover/active (brand guidelines) */
.st-hero-btn a {
  background-color: var(--pp-cyan-light);
  color: var(--pp-night);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.st-hero-btn a .st-hero-btn-text {
  color: var(--pp-night);
}

.st-hero-btn a:hover,
.st-hero-btn a:focus-visible {
  background-color: var(--pp-cyan-dark);
  color: var(--pp-night);
  transform: translateY(-1px);
}

.st-hero-btn a:hover .st-hero-btn-text,
.st-hero-btn a:focus-visible .st-hero-btn-text {
  color: var(--pp-night);
}

.st-hero-btn a:active {
  background-color: var(--pp-cyan-pressed);
  color: var(--pp-night);
  transform: translateY(0);
}

.st-hero-btn a:active .st-hero-btn-text {
  color: var(--pp-night);
}

/* Hero user photo — cap display size (CMS may serve large originals) */
.st-hero-user-img img {
  max-width: 60px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* Markets we serve / logos strip — same visual weight as bundled brand-*.png; shrink oversized uploads */
.st-brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-brand-item img {
  max-width: 150px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Homepage CTA: secondary "Contact us" under demo */
.pp-cta-secondary {
  margin-top: 14px;
}

.st-cta-wrapper .tp-btn-border-2.st.pp-cta-contact {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--tp-common-white);
}

.st-cta-wrapper .tp-btn-border-2.st.pp-cta-contact:hover {
  background-color: var(--tp-common-white);
  border-color: var(--tp-common-white);
  color: var(--tp-common-brown);
}

/* Section labels */
.tp-section-subtitle.st::before,
.tp-section-subtitle.pre {
  color: var(--pp-slate);
}

/* Subtitle bullet (used across pages) — replace theme orange/red */
.tp-section-subtitle.pre::before {
  background-color: var(--pp-cyan);
}

/* Contact form primary button — replace theme orange/red */
.tp-contact-form-btn button {
  background-color: var(--pp-cyan);
  color: var(--pp-night);
}

/* Service dark band: keep contrast, tint toward brand */
.st-service-area[data-bg-color="#151515"] {
  background-color: var(--pp-night) !important;
}

/* Pill / badge style for eyebrow */
.pp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0070a0;
  background: #edfbff;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.pp-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-cyan);
}

/* Case study placeholder strip */
.pp-soon-box {
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  padding: 48px 32px;
  background: #fafafb;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.pp-soon-box p {
  color: var(--pp-slate);
  margin-bottom: 0;
}

/* Simple header nav (no megamenu) */
.tp-header-box .pp-header-nav {
  display: flex;
  justify-content: center;
}

.pp-header-nav > ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-header-nav > ul > li > a {
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-night);
  text-decoration: none;
}

.pp-header-nav > ul > li > a:hover {
  color: var(--pp-cyan-dark);
}

.pp-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--pp-cyan);
  color: var(--pp-night) !important;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.pp-header-cta:hover {
  background: var(--pp-cyan-dark);
  color: var(--pp-night) !important;
  transform: translateY(-1px);
}

.pp-header-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.pp-header-cta.pp-header-cta-secondary {
  background: rgba(19, 16, 71, 0.08);
  border: 1px solid rgba(19, 16, 71, 0.18);
  color: var(--tp-common-brown) !important; /* now #131047 */
}

.pp-header-cta.pp-header-cta-secondary:hover {
  background: rgba(19, 16, 71, 0.12);
  border-color: rgba(19, 16, 71, 0.28);
  transform: translateY(-1px);
}

/* Magic cursor — brand cyan (site-shell uses .cursor-bg-red-2) */
.cursor-bg-red-2 #ball {
  background-color: var(--pp-cyan) !important;
}
.cursor-bg-red-2 #ball .ball-view {
  color: var(--pp-night);
}

/* /services — #all: dynamic service cards + testimonials */
.pp-services-all {
  scroll-margin-top: 100px;
  background: linear-gradient(180deg, #fafafb 0%, #f3f4f6 100%);
  border-top: 1px solid var(--pp-border);
  border-bottom: 1px solid var(--pp-border);
}

.pp-services-all__lead {
  max-width: 640px;
  color: var(--pp-slate);
  line-height: 1.65;
}

.pp-service-all-card {
  background: #fff;
  border: 1px solid rgba(19, 16, 71, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(19, 16, 71, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pp-service-all-card:hover {
  box-shadow: 0 20px 50px rgba(19, 16, 71, 0.1);
  transform: translateY(-2px);
}

.pp-service-all-card__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--pp-cyan-light) 0%, rgba(61, 205, 248, 0.15) 100%);
}

.pp-service-all-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.pp-service-all-card:hover .pp-service-all-card__media img {
  transform: scale(1.03);
}

.pp-service-all-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
  background: linear-gradient(
    120deg,
    rgba(61, 205, 248, 0.2) 0%,
    rgba(19, 16, 71, 0.06) 100%
  );
}

.pp-service-all-card__body {
  padding: 24px 26px 28px;
}

.pp-service-all-card__eyebrow {
  margin-bottom: 10px;
}

.pp-service-all-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--pp-night);
}

.pp-service-all-card__excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pp-slate);
  margin-bottom: 16px;
}

.pp-service-all-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 18px;
}

.pp-service-all-card__tags span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tp-common-brown);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(61, 205, 248, 0.18);
}

.pp-service-all-card__more {
  font-size: 14px;
  font-weight: 600;
}

.pp-testimonial-card {
  background: #fff;
  border: 1px solid rgba(19, 16, 71, 0.08);
  border-radius: 12px;
  padding: 26px 24px 24px;
  border-left: 4px solid var(--pp-cyan);
  box-shadow: 0 8px 28px rgba(19, 16, 71, 0.05);
}

.pp-testimonial-card__quote p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--pp-night);
  font-style: italic;
  margin-bottom: 0;
}

.pp-testimonial-card__meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--pp-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--pp-slate);
}

.pp-testimonial-card__meta strong {
  color: var(--pp-night);
  font-weight: 700;
  font-style: normal;
}