/* =========================================================================
   SUB-PAGE SHELL  (platform / integrations / whatsapp / services)

   These four pages hold the sections that used to live on the homepage. They
   share one hero, one breadcrumb and one closing CTA so the set reads as a
   family rather than four one-offs.

   Written as plain CSS, not Tailwind utilities: the Tailwind sheet is compiled
   (build/README.md) and new utility classes would need a rebuild.
   ========================================================================= */

.sp-hero {
  position: relative;
  padding: 9.5rem 1.5rem 4.5rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sp-shell {
  position: relative;
  z-index: 10;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

/* ---- breadcrumb ---- */
.sp-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
}

.sp-crumb a { color: rgba(0, 0, 0, 0.55); transition: color 0.18s; }
.sp-crumb a:hover { color: #000000; text-decoration: underline; }
.sp-crumb span[aria-current] { color: #000000; }
.sp-crumb .sp-crumb-sep { opacity: 0.45; }

/* ---- kicker ---- */
.sp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.4375rem 1rem;
  border-radius: 9999px;
  background: #000000;
  color: #D4FB0A;
  font-size: 0.75rem;
  font-weight: 800;
}

.sp-kicker-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #D4FB0A;
  animation: sp-pulse 1.8s ease-in-out infinite;
}

@keyframes sp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.75); }
}

/* ---- headline ---- */
.sp-hero h1 {
  margin: 0 0 1.125rem;
  color: #000000;
  font-size: clamp(1.875rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.4;
}

.sp-hero h1 .sp-hl {
  display: inline-block;
  padding: 0.125rem 0.75rem;
  border-radius: 0.875rem;
  background: #000000;
  color: #D4FB0A;
  line-height: 1.25;
}

.sp-hero p {
  max-width: 45rem;
  margin: 0 auto;
  color: #29313D;
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  font-weight: 600;
  line-height: 2;
}

/* ---- trust row ---- */
.sp-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.sp-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  color: #14181F;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ---- closing CTA band ---- */
.sp-cta {
  padding: 4.5rem 1.5rem;
  background: #06080A;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.sp-cta .sp-shell { max-width: 46rem; }

.sp-cta h2 {
  margin: 0 0 0.875rem;
  color: #FFFFFF;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 900;
  line-height: 1.4;
}

.sp-cta p {
  margin: 0 auto 2rem;
  max-width: 38rem;
  color: #94A3B8;
  font-size: 0.9375rem;
  line-height: 1.95;
}

.sp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 800;
  transition: transform 0.18s, box-shadow 0.18s, background-color 0.18s, color 0.18s;
}

.sp-btn i, .sp-btn svg { width: 1rem; height: 1rem; }

.sp-btn--primary { background: #D4FB0A; color: #06080A; }
.sp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(212, 251, 10, 0.75); }

.sp-btn--ghost {
  border: 1px solid rgba(226, 232, 240, 0.28);
  color: #E2E8F0;
}

.sp-btn--ghost:hover { background: rgba(255, 255, 255, 0.07); color: #D4FB0A; }

/* ---- dark mode ---- */
body.dark-mode .sp-hero { border-bottom-color: rgba(148, 163, 184, 0.16); }
body.dark-mode .sp-hero h1 { color: #FFFFFF; }
body.dark-mode .sp-hero p { color: #B8C0CC; }
body.dark-mode .sp-crumb { color: #7C8798; }
body.dark-mode .sp-crumb a { color: #7C8798; }
body.dark-mode .sp-crumb a:hover { color: #D4FB0A; }
body.dark-mode .sp-crumb span[aria-current] { color: #E2E8F0; }

body.dark-mode .sp-trust span {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #CBD5E1;
}

@media (max-width: 640px) {
  .sp-hero { padding-top: 8rem; padding-bottom: 3.25rem; }
  .sp-cta { padding: 3.25rem 1.25rem; }
  .sp-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-kicker-dot { animation: none; }
  .sp-btn { transition: none; }
}

/* ---- dark hero -----------------------------------------------------------
   integrations.html opens onto a lime section, so a lime hero above it would
   read as one long yellow slab. Flipping the hero dark keeps the two blocks
   visually separate. */
.sp-hero--dark {
  background: #06080A;
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

.sp-hero--dark h1 { color: #FFFFFF; }
.sp-hero--dark p { color: #B8C0CC; }
.sp-hero--dark .sp-crumb { color: #7C8798; }
.sp-hero--dark .sp-crumb a { color: #7C8798; }
.sp-hero--dark .sp-crumb a:hover { color: #D4FB0A; }
.sp-hero--dark .sp-crumb span[aria-current] { color: #E2E8F0; }

.sp-hero--dark .sp-kicker {
  background: rgba(212, 251, 10, 0.14);
  border: 1px solid rgba(212, 251, 10, 0.3);
}

.sp-hero--dark .sp-trust span {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #CBD5E1;
}

/* The moved sections lost their own heading block, so the space the heading
   used to occupy above the content comes off the section padding too. */
.sp-hero + section { padding-top: 4rem; }

/* The chip is black-on-lime over the light hero. On any dark hero that becomes
   black on near-black and the word inside it disappears, so the fill and the
   text swap. */
/* The h1 in the base rule above makes it 0,2,1 — these have to match it or the
   black fill wins and the word stays invisible. */
.sp-hero--dark h1 .sp-hl,
body.dark-mode .sp-hero h1 .sp-hl {
  background: #D4FB0A;
  color: #06080A;
}

/* Long Arabic headlines were leaving one word stranded on the last line beside
   the chip. Balanced wrapping evens the lines out; browsers without it just
   wrap normally. */
.sp-hero h1 {
  text-wrap: balance;
}