/* ============================================================
   LOGISTICS SERVICE PROVIDER LANDING PAGE
   Prefix: lsp-
   Design: Poppins | #2f55d4 blue | #ea6425 orange | #1a1a2e dark
   ============================================================ */

:root {
  --lsp-blue: #2f55d4;
  --lsp-blue-dark: #2443ac;
  --lsp-blue-light: rgba(47, 85, 212, 0.08);
  --lsp-orange: #ea6425;
  --lsp-orange-light: rgba(234, 100, 37, 0.08);
  --lsp-dark: #1a1a2e;
  --lsp-heading: #0f172a;
  --lsp-body: #475569;
  --lsp-muted: #64748b;
  --lsp-border: #e2e8f0;
  --lsp-bg: #f8fafc;
  --lsp-white: #ffffff;
  --lsp-radius: 12px;
  --lsp-radius-lg: 20px;
  --lsp-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --lsp-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
}

.lsp-page * { box-sizing: border-box; }
.lsp-page a { text-decoration: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.lsp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  letter-spacing: -0.1px;
}
.lsp-btn-primary {
  background: var(--lsp-orange);
  color: #fff;
  box-shadow: 0 4px 14px rgba(234, 100, 37, 0.3);
}
.lsp-btn-primary:hover {
  background: #d45518;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(234, 100, 37, 0.4);
}
.lsp-btn-outline {
  background: transparent;
  color: var(--lsp-blue);
  border: 2px solid var(--lsp-blue);
}
.lsp-btn-outline:hover {
  background: var(--lsp-blue);
  color: #fff;
  transform: translateY(-2px);
}

/* ============================================================
   HERO
   ============================================================ */
.lsp-hero {
  padding: 80px 0 72px;
  background: linear-gradient(170deg, #f8faff 0%, #eef2ff 60%, #e0e7ff 100%);
  position: relative;
  overflow: hidden;
}
.lsp-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.07), transparent 60%);
  pointer-events: none;
}
.lsp-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.lsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lsp-orange);
  background: var(--lsp-orange-light);
  border: 1.5px solid rgba(234, 100, 37, 0.2);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.lsp-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lsp-orange);
  flex-shrink: 0;
}
.lsp-hero h1 {
  font-family: "Poppins", sans-serif;
  font-size: 46px;
  line-height: 1.12;
  color: var(--lsp-heading);
  font-weight: 800;
  letter-spacing: -1.4px;
  margin-bottom: 20px;
}
.lsp-hero h1 .lsp-accent {
  background: linear-gradient(135deg, #2f55d4 0%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lsp-hero-lead {
  font-size: 17px;
  color: var(--lsp-body);
  margin-bottom: 26px;
  line-height: 1.65;
}
.lsp-hero-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.lsp-hero-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--lsp-body);
  font-weight: 500;
}
.lsp-check-dot {
  width: 20px;
  height: 20px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #16a34a;
  font-size: 11px;
  font-weight: 800;
}
.lsp-hero-ctas {
  display: flex;
  gap: 14px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.lsp-hero-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(47, 85, 212, 0.15);
}
.lsp-hero-stat-num {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--lsp-heading);
  line-height: 1;
  letter-spacing: -0.5px;
}
.lsp-hero-stat-label {
  font-size: 12px;
  color: var(--lsp-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Hero form card override — strip dark ContactForm bg */
.lsp-hero-form-col .pz-contact-section {
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 0;
}
.lsp-hero-form-col .pz-contact-form-card {
  width: 100%;
  border-radius: var(--lsp-radius-lg);
  box-shadow: var(--lsp-shadow-lg);
  border: 1px solid var(--lsp-border);
}
.lsp-hero-form-col .pz-contact-form-card-heading {
  font-size: 20px;
  font-weight: 800;
  color: var(--lsp-heading) !important;
  text-align: center;
}
.lsp-hero-form-col .pz-contact-form-card-subtext {
  text-align: center;
  color: var(--lsp-muted);
}
/* Reserve space before HubSpot form injects HTML (prevents CLS) */
.lsp-form-reserve .pz-contact-section { min-height: 480px; }
.lsp-form-reserve .pz-contact-form-card { min-height: 440px; }
.lsp-form-reserve #lsp-hero-form { min-height: 360px; }

/* ============================================================
   TRUST STRIP (BRAND MARQUEE)
   ============================================================ */
.lsp-trust {
  padding: 36px 0 40px;
  background: var(--lsp-white);
  border-top: 1px solid var(--lsp-border);
  border-bottom: 1px solid var(--lsp-border);
}
.lsp-trust-label {
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: var(--lsp-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 24px;
}
.lsp-marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.lsp-marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: lsp-marquee 70s linear infinite;
  align-items: center;
}
.lsp-marquee-wrap:hover .lsp-marquee-track { animation-play-state: paused; }
@keyframes lsp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .lsp-marquee-track { animation: none; }
}
.lsp-logo-card {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--lsp-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lsp-logo-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: grayscale(30%);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
  aspect-ratio: 1 / 1;
}
.lsp-logo-card:hover img { filter: none; opacity: 1; }

/* ============================================================
   SHARED SECTION LAYOUT
   ============================================================ */
.lsp-section { padding: 80px 0; }
.lsp-section-alt { background: var(--lsp-bg); }

.lsp-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 52px;
}
.lsp-section-head h2 {
  font-family: "Poppins", sans-serif;
  font-size: 36px;
  line-height: 1.18;
  color: var(--lsp-heading);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 14px;
}
.lsp-section-head p {
  font-size: 16.5px;
  color: var(--lsp-body);
  line-height: 1.7;
}

/* ============================================================
   WHY PROZO — PILLARS
   ============================================================ */
.lsp-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lsp-pillar {
  background: var(--lsp-white);
  border: 1px solid var(--lsp-border);
  border-radius: var(--lsp-radius-lg);
  padding: 32px 28px;
  transition: all 0.25s ease;
}
.lsp-pillar:hover {
  border-color: rgba(47, 85, 212, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(47, 85, 212, 0.10);
}
.lsp-pillar-icon {
  width: 52px;
  height: 52px;
  background: var(--lsp-orange-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--lsp-orange);
  font-size: 22px;
}
.lsp-pillar h3 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--lsp-heading);
  margin-bottom: 10px;
}
.lsp-pillar p {
  font-size: 15px;
  color: var(--lsp-body);
  line-height: 1.65;
}

/* ============================================================
   LOGISTICS SERVICES GRID
   ============================================================ */
.lsp-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lsp-service-card {
  background: var(--lsp-white);
  border: 1px solid var(--lsp-border);
  border-radius: var(--lsp-radius-lg);
  padding: 28px 26px;
  transition: all 0.25s ease;
}
.lsp-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 85, 212, 0.3);
  box-shadow: 0 12px 30px rgba(47, 85, 212, 0.10);
}
.lsp-service-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--lsp-blue);
  background: var(--lsp-blue-light);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.lsp-service-card h3 {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--lsp-heading);
  margin-bottom: 10px;
}
.lsp-service-card p {
  font-size: 14.5px;
  color: var(--lsp-body);
  line-height: 1.65;
}

/* ============================================================
   PLATFORM / TECH GRID
   ============================================================ */
.lsp-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.lsp-platform-card {
  background: var(--lsp-white);
  border: 1px solid var(--lsp-border);
  border-top: 3px solid var(--lsp-blue);
  border-radius: var(--lsp-radius-lg);
  padding: 26px 24px;
  transition: all 0.25s ease;
}
.lsp-platform-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(47, 85, 212, 0.10);
}
.lsp-platform-card h3 {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--lsp-heading);
  margin-bottom: 10px;
}
.lsp-platform-card p {
  font-size: 14px;
  color: var(--lsp-body);
  line-height: 1.65;
}

/* ============================================================
   STATS BAND
   ============================================================ */
.lsp-stats-band {
  background: linear-gradient(135deg, #1a1a2e 0%, #2f55d4 100%);
  color: #fff;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.lsp-stats-band::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.15), transparent 60%);
  pointer-events: none;
}
.lsp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.lsp-stat-big {
  font-family: "Poppins", sans-serif;
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -1.5px;
}
.lsp-stat-big-label {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* ============================================================
   LOCATIONS + INTEGRATIONS
   ============================================================ */
.lsp-locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.lsp-int-block {
  background: var(--lsp-white);
  border: 1px solid var(--lsp-border);
  border-radius: var(--lsp-radius-lg);
  padding: 32px;
  transition: all 0.25s ease;
}
.lsp-int-block:hover {
  border-color: rgba(47, 85, 212, 0.3);
  box-shadow: var(--lsp-shadow-md);
}
.lsp-int-block h3 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--lsp-heading);
  margin-bottom: 20px;
}
.lsp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lsp-chip {
  background: var(--lsp-bg);
  border: 1px solid var(--lsp-border);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lsp-heading);
  transition: all 0.15s ease;
}
.lsp-chip:hover {
  background: var(--lsp-blue-light);
  color: var(--lsp-blue);
  border-color: rgba(47, 85, 212, 0.3);
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.lsp-compare-table {
  background: var(--lsp-white);
  border: 1px solid var(--lsp-border);
  border-radius: var(--lsp-radius-lg);
  overflow: hidden;
  box-shadow: var(--lsp-shadow-md);
}
.lsp-compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid #f1f5f9;
}
.lsp-compare-row:last-child { border-bottom: none; }
.lsp-compare-row > div {
  padding: 18px 22px;
  font-size: 14.5px;
  color: var(--lsp-body);
}
.lsp-compare-row.lsp-head > div {
  background: var(--lsp-dark);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.lsp-compare-row > div:first-child {
  font-weight: 600;
  color: var(--lsp-heading);
  background: var(--lsp-bg);
  font-size: 14px;
}
.lsp-compare-prozo { color: var(--lsp-blue) !important; font-weight: 600; }
.lsp-check-ic { color: #16a34a; font-weight: 700; margin-right: 5px; }
.lsp-cross-ic { color: #dc2626; font-weight: 700; margin-right: 5px; }

/* ============================================================
   HOW IT WORKS — STEPS
   ============================================================ */
.lsp-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.lsp-step {
  background: var(--lsp-white);
  border: 1px solid var(--lsp-border);
  border-radius: var(--lsp-radius-lg);
  padding: 28px 24px;
  transition: all 0.25s ease;
}
.lsp-step:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 85, 212, 0.3);
  box-shadow: 0 12px 30px rgba(47, 85, 212, 0.10);
}
.lsp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #2f55d4, #6366f1);
  color: #fff;
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(47, 85, 212, 0.3);
}
.lsp-step h3 {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--lsp-heading);
  margin-bottom: 8px;
}
.lsp-step p {
  font-size: 14px;
  color: var(--lsp-body);
  line-height: 1.65;
}

/* ============================================================
   FAQ
   ============================================================ */
.lsp-faq-list {
  max-width: 860px;
  margin: 0 auto;
}
.lsp-faq-item {
  background: var(--lsp-white);
  border: 1px solid var(--lsp-border);
  border-radius: var(--lsp-radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.lsp-faq-item:hover { border-color: rgba(47, 85, 212, 0.3); }
.lsp-faq-q {
  padding: 20px 24px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--lsp-heading);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  list-style: none;
  letter-spacing: -0.1px;
  transition: background 0.15s ease;
}
.lsp-faq-q::-webkit-details-marker { display: none; }
.lsp-faq-q:hover { background: var(--lsp-bg); }
.lsp-faq-q::after {
  content: '+';
  font-size: 24px;
  color: var(--lsp-blue);
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s ease;
}
details[open] .lsp-faq-q::after { content: '−'; }
.lsp-faq-a {
  padding: 0 24px 22px;
  color: var(--lsp-body);
  font-size: 15px;
  line-height: 1.75;
}

/* ============================================================
   BOTTOM CTA SECTION (wraps ContactForm)
   ============================================================ */
.lsp-cta-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #2f55d4 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.lsp-cta-section::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 50%;
  height: 180%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.18), transparent 60%);
  pointer-events: none;
}
.lsp-cta-section .container { position: relative; z-index: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .lsp-platform-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .lsp-hero { padding: 56px 0 52px; }
  .lsp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .lsp-hero h1 { font-size: 34px; letter-spacing: -0.8px; }
  .lsp-section-head h2 { font-size: 28px; letter-spacing: -0.6px; }
  .lsp-section { padding: 60px 0; }
  .lsp-pillars,
  .lsp-services-grid,
  .lsp-locations-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lsp-steps-grid,
  .lsp-stats-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .lsp-stat-big { font-size: 36px; }
  .lsp-compare-row > div { padding: 14px; font-size: 13px; }
}

@media (max-width: 560px) {
  .lsp-hero h1 { font-size: 28px; letter-spacing: -0.5px; }
  .lsp-section-head h2 { font-size: 23px; }
  .lsp-hero-ctas { flex-direction: column; }
  .lsp-hero-stats { gap: 18px 14px; }
  .lsp-hero-stat-num { font-size: 20px; }
  .lsp-pillars,
  .lsp-services-grid,
  .lsp-platform-grid,
  .lsp-steps-grid,
  .lsp-stats-grid { grid-template-columns: 1fr; }
  .lsp-locations-grid { grid-template-columns: 1fr; }
  .lsp-compare-row { grid-template-columns: 1fr; }
  .lsp-compare-row.lsp-head { display: none; }
  .lsp-compare-row > div::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--lsp-muted);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }
  .lsp-compare-row > div:first-child::before { display: none; }
  .lsp-logo-card { width: 64px; height: 64px; }
  .lsp-logo-card img { width: 64px; height: 64px; }
  .lsp-int-block { padding: 24px 20px; }
  .lsp-faq-q { font-size: 15px; padding: 16px 20px; }
  .lsp-faq-a { padding: 0 20px 18px; }
}