/* =============================================================
   WebSoQuick Flow Edges — Section Transition Design System v1
   "Every section flows like a business journey."
   ============================================================= */

/* ── Base wave shell ─────────────────────────────────────────── */
.wsq-flow-edge {
  display: block;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.wsq-flow-edge svg {
  display: block;
  width: 100%;
  height: 72px;
}

/* ── Wave background contexts ────────────────────────────────── */
.wsq-wave-into-dark   { background: #FFFFFF; }
.wsq-wave-from-dark   { background: #0F1B33; }
.wsq-wave-to-surface  { background: #FFFFFF; }
.wsq-wave-from-surface{ background: #F5F7FB; }
.wsq-wave-to-footer   { background: #0F1B33; }

/* Tighter height for subtle surface/surface transitions */
.wsq-wave-to-surface svg,
.wsq-wave-from-surface svg { height: 52px; }

/* Footer wave shorter */
.wsq-wave-to-footer svg { height: 52px; }

/* ── Hero floating data-flow dots ────────────────────────────── */
.wsq-hero-dots {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.wsq-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: wsqDotPulse 9s ease-in-out infinite;
}

@keyframes wsqDotPulse {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
  50%       { transform: translateY(-16px) scale(1.12); opacity: 0.28; }
}

.wsq-dot:nth-child(2) { animation-delay: 1.8s; animation-duration: 11s; }
.wsq-dot:nth-child(3) { animation-delay: 3.4s; animation-duration: 7.5s; }
.wsq-dot:nth-child(4) { animation-delay: 0.6s; animation-duration: 13s; }
.wsq-dot:nth-child(5) { animation-delay: 5s;   animation-duration: 8s; }

/* ── Gradient accent line (section bottom decoration) ─────────── */
.wsq-accent-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, #2F54EB 30%, #6E59F5 70%, transparent);
  background-size: 200% 100%;
  animation: wsqLineFlow 4s linear infinite;
  border-radius: 0;
  pointer-events: none;
}

@keyframes wsqLineFlow {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Page hero treatment (secondary pages) ──────────────────── */
.wsq-page-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(900px 420px at 75% -10%, rgba(110,89,245,.09) 0%, transparent 60%),
              radial-gradient(600px 280px at 0% 100%, rgba(47,84,235,.06) 0%, transparent 65%),
              #FFFFFF;
}

.wsq-page-hero::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(47,84,235,.18), rgba(110,89,245,.18), transparent);
}

/* ── Navy section top shimmer ────────────────────────────────── */
.wsq-navy-shimmer {
  position: relative;
}
.wsq-navy-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,89,245,.5), rgba(47,84,235,.6), rgba(110,89,245,.5), transparent);
  z-index: 1;
}

/* ── Navy section decorative orbs ────────────────────────────── */
.wsq-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  opacity: 0.22;
  z-index: 0;
}

.wsq-orb-blue  { background: #2F54EB; }
.wsq-orb-violet{ background: #6E59F5; }

/* ── Premium pricing card treatment ─────────────────────────── */
.wsq-pricing-featured {
  position: relative;
  transform: translateY(-10px);
  box-shadow:
    0 0 0 2px #2F54EB,
    0 28px 56px -20px rgba(47, 84, 235, 0.55);
  animation: wsqPricingPulse 3.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes wsqPricingPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px #2F54EB, 0 28px 56px -20px rgba(47,84,235,.48);
  }
  50% {
    box-shadow: 0 0 0 2.5px #6E59F5, 0 32px 68px -18px rgba(110,89,245,.62);
  }
}

/* ── Process step connector (How It Works) ──────────────────── */
.wsq-step-line {
  position: absolute;
  left: 29px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(47,84,235,.25) 10%,
    rgba(110,89,245,.35) 50%,
    rgba(47,84,235,.15) 90%,
    transparent 100%
  );
  z-index: 0;
}

/* ── Section eyebrow pill ────────────────────────────────────── */
.wsq-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  background: rgba(47, 84, 235, 0.07);
  border: 1px solid rgba(47, 84, 235, 0.14);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #2F54EB;
}

/* ── Chat section wave motif (subtle bubble cutouts in wave SVG) ── */
.wsq-wave-chat-bg {
  background: radial-gradient(480px 200px at 30% 100%, rgba(47,84,235,.05), transparent 70%),
              #FFFFFF;
}

/* ── Industry mosaic accent (Who It's For) ──────────────────── */
.wsq-industry-bg {
  background:
    radial-gradient(700px 300px at 80% 0%, rgba(110,89,245,.06), transparent 60%),
    #F5F7FB;
}

/* ── Glass shelf (Pricing preview) ──────────────────────────── */
.wsq-pricing-shelf::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), rgba(255,255,255,.22), rgba(255,255,255,.12), transparent);
}

/* ── CTA launch edge glow ────────────────────────────────────── */
.wsq-launch-glow {
  position: relative;
  overflow: hidden;
}
.wsq-launch-glow::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(110,89,245,.32) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Scroll reveal (applied via JS, static fallback) ────────── */
.wsq-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.2,1);
}
.wsq-reveal.wsq-in {
  opacity: 1;
  transform: none;
}

/* ── Reduced motion overrides ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wsq-dot,
  .wsq-accent-line,
  .wsq-pricing-featured {
    animation: none !important;
  }
  .wsq-pricing-featured {
    transform: translateY(-6px) !important;
    box-shadow: 0 0 0 2px #2F54EB, 0 18px 40px -18px rgba(47,84,235,.4) !important;
  }
  .wsq-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 768px) {
  .wsq-flow-edge svg          { height: 44px; }
  .wsq-wave-to-surface svg,
  .wsq-wave-from-surface svg  { height: 32px; }
  .wsq-wave-to-footer svg     { height: 36px; }
  .wsq-pricing-featured       { transform: translateY(-4px); }
  .wsq-orb                    { filter: blur(48px); opacity: .15; }
  /* Prevent BPE hero stage from causing horizontal overflow */
  .wsq-bpe-wrap               { overflow: hidden; }
}