/* =====================================================================
   GLOBALIST · GROWTH-ENGINE FUNNEL
   4-stage horizontal funnel with mint particle stream.
   Imported 1:1 from Kontext/homepage.html · scoped to .funnel-section
   ===================================================================== */

.funnel-section{
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 8vw, 104px);
  position: relative;
  overflow: hidden;
}

.funnel-head{
  max-width: 820px;
  margin: 0 auto 56px;
  padding: 0 24px;
  text-align: center;
}
.funnel-head .label-caps{
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
  text-shadow: 0 0 18px rgba(0,237,179,.3);
}
.funnel-head h2{
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: #fff;
  text-transform: none !important;
  margin: 0;
  /* override global gradient-clip — we want solid white with mint accent */
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.funnel-head h2 em{
  color: var(--primary);
  font-style: normal;
  text-shadow: 0 0 40px var(--primary-glow, rgba(0,237,179,.45));
  -webkit-text-fill-color: var(--primary);
}
.funnel-head p{
  margin: 22px auto 0;
  color: rgba(224,231,229,.72);
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
}

/* —— the glass panel that wraps the whole funnel —— */
.funnel-panel{
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  border-radius: 24px;
  padding: clamp(40px, 5vw, 60px) clamp(16px, 2.4vw, 32px) clamp(32px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(4,20,16,.7), rgba(2,12,9,.5));
  border: 1px solid rgba(0,237,179,.14);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 100px -40px rgba(0,237,179,.35);
}

/* —— the trapezoidal funnel SVG fills the panel —— */
.funnel-bg{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.funnel-bg path{ transition: all .6s cubic-bezier(0.16,1,0.3,1); }

/* —— particle stream, clip-pathed to the funnel interior —— */
.funnel-particles{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(0% 8%, 100% 32%, 100% 68%, 0% 92%);
  -webkit-clip-path: polygon(0% 8%, 100% 32%, 100% 68%, 0% 92%);
}
.funnel-dot{
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(0,237,179,.45), 0 0 20px rgba(0,237,179,.3);
  animation: funnelFlow 8s linear infinite;
  left: -10px;
}
@keyframes funnelFlow{
  0%   { transform: translateX(0);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(calc(100% + 2000px)); opacity: 0; }
}
/* On narrower viewports, kill the long translateX — scope to container */
.funnel-panel{ --funnel-dot-travel: calc(100% + 80px); }
@supports (animation-timeline: view()){
  /* progressive enhancement placeholder */
}

/* —— the 4 stages grid —— */
.funnel-stages{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px){
  .funnel-stages{ grid-template-columns: 1fr; gap: 14px; }
}

.funnel-stage{
  position: relative;
  padding: 28px 24px;
  border-radius: 18px;
  background: rgba(2,12,9,.72);
  border: 1px solid rgba(0,237,179,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all .4s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
}
.funnel-stage:hover{
  border-color: rgba(0,237,179,.35);
  transform: translateY(-3px);
  box-shadow: 0 20px 60px -20px rgba(0,237,179,.45);
}
.funnel-stage-num{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: rgba(0,237,179,.12);
  border: 1px solid rgba(0,237,179,.45);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .26em;
  color: var(--primary);
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(0,237,179,.08) inset,
    0 0 18px -2px rgba(0,237,179,.55),
    0 0 36px -10px rgba(0,237,179,.45);
  text-shadow: 0 0 12px rgba(0,237,179,.55);
}
.funnel-stage-num::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(0,237,179,.9), 0 0 22px rgba(0,237,179,.5);
  flex: 0 0 6px;
}
.funnel-stage-tier{
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .28em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.funnel-stage h3{
  font-family: 'Inter', sans-serif;
  font-size: 19px; font-weight: 900;
  color: #fff;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
  margin: -4px 0 0 !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.funnel-stage h3 em{
  color: var(--primary);
  font-style: normal;
  -webkit-text-fill-color: var(--primary);
}

/* ── Stage 3 highlight — Hero-Stage, ganze Kachel leuchtet ──
   Stage 03 is the editorial centrepiece (Performance Marketing /
   CM3 scaling). The whole tile lights up — bright mint tint across
   the surface, glowing border, multi-layer external halo with a
   soft pulse so the centerpiece breathes. */
.funnel-stage:nth-child(3){
  border-color: rgba(0,237,179,.65);
  background:
    radial-gradient(ellipse 90% 110% at 50% 0%,  rgba(0,237,179,.22), transparent 72%),
    radial-gradient(ellipse 110% 80% at 50% 100%, rgba(0,237,179,.10), transparent 78%),
    linear-gradient(180deg, rgba(0,237,179,.08), rgba(0,237,179,.04)),
    rgba(4,20,16,.55);
  box-shadow:
    0 0 0 1px rgba(0,237,179,.45) inset,
    0 0 28px -2px rgba(0,237,179,.55),
    0 0 64px -8px rgba(0,237,179,.45),
    0 24px 80px -24px rgba(0,237,179,.55);
  animation: funnelStage3Pulse 3.6s ease-in-out infinite;
}
.funnel-stage:nth-child(3):hover{
  border-color: rgba(0,237,179,.85);
  box-shadow:
    0 0 0 1px rgba(0,237,179,.6) inset,
    0 0 36px -2px rgba(0,237,179,.7),
    0 0 96px -10px rgba(0,237,179,.55),
    0 28px 90px -22px rgba(0,237,179,.7);
}
.funnel-stage:nth-child(3) .funnel-stage-num{
  background: rgba(0,237,179,.22);
  border-color: rgba(0,237,179,.7);
  box-shadow:
    0 0 0 1px rgba(0,237,179,.18) inset,
    0 0 22px -2px rgba(0,237,179,.7),
    0 0 44px -10px rgba(0,237,179,.55);
}
.funnel-stage:nth-child(3) h3{
  color: #fff !important;
  text-shadow: 0 0 22px rgba(0,237,179,.35);
}
.funnel-stage:nth-child(3) h3 em{
  background: linear-gradient(180deg, #6BFFD9 0%, #00EDB3 55%, #00C896 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  filter: drop-shadow(0 0 12px rgba(0,237,179,.6));
}
.funnel-stage:nth-child(3) p{
  color: rgba(238,252,247,.92);
}
.funnel-stage:nth-child(3) .funnel-stage-tags{
  border-top-color: rgba(0,237,179,.22);
}
.funnel-stage:nth-child(3) .funnel-stage-tag{
  background: rgba(0,237,179,.14);
  border-color: rgba(0,237,179,.4);
  color: #d6fff1;
}
@keyframes funnelStage3Pulse{
  0%, 100%{
    box-shadow:
      0 0 0 1px rgba(0,237,179,.45) inset,
      0 0 28px -2px rgba(0,237,179,.55),
      0 0 64px -8px rgba(0,237,179,.45),
      0 24px 80px -24px rgba(0,237,179,.55);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(0,237,179,.6) inset,
      0 0 40px -2px rgba(0,237,179,.75),
      0 0 96px -8px rgba(0,237,179,.55),
      0 24px 100px -20px rgba(0,237,179,.7);
  }
}
@media (prefers-reduced-motion: reduce){
  .funnel-stage:nth-child(3){ animation: none; }
}

.funnel-stage p{
  font-size: 13px;
  color: rgba(224,231,229,.75);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}
.funnel-stage-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.funnel-stage-tag{
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,237,179,.08);
  color: var(--primary);
  border: 1px solid rgba(0,237,179,.2);
}

/* Flow arrow between stages — mint circle with chevron */
.funnel-arrow{
  position: absolute;
  top: 50%; right: -14px;
  transform: translateY(-50%);
  z-index: 3;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #020c09;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; font-weight: 900;
  box-shadow: 0 0 20px rgba(0,237,179,.55);
  animation: arrowPulse 2.4s ease-in-out infinite;
}
@keyframes arrowPulse{
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-50%) scale(1.12); }
}
@media (max-width: 900px){ .funnel-arrow{ display: none; } }

/* Bottom output pill */
.funnel-output{
  margin: 32px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 32px;
  border-radius: 100px;
  background: linear-gradient(90deg,
    rgba(0,237,179,.08),
    rgba(0,237,179,.18),
    rgba(0,237,179,.08)
  );
  border: 1px solid rgba(0,237,179,.3);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  max-width: fit-content;
  box-shadow: 0 0 40px rgba(0,237,179,.15);
}
.funnel-output .primary{
  color: var(--primary);
  text-shadow: 0 0 12px rgba(0,237,179,.55);
}
@media (max-width: 640px){
  .funnel-output{
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    font-size: 12px;
    text-align: center;
  }
}

/* Prevent the global bento.css ::after corner-radial from applying here —
   funnel-stage matches [class*="_item"]... no it doesn't. But funnel-panel
   might get caught by other rules. Lock it down. */
.funnel-panel, .funnel-stage{
  background-clip: padding-box;
}
.funnel-stage::before,
.funnel-stage::after{ content: none !important; }
/* Desktop blocks both panel pseudos. Mobile re-enables ::before to host
   the vertical-funnel CSS shape (see mobile block below). */
@media (min-width: 901px){
  .funnel-panel::before,
  .funnel-panel::after{ content: none !important; }
}
@media (max-width: 900px){
  .funnel-panel::after{ content: none !important; }
}

/* ── Mobile (≤900px) — vertical funnel: stream flows top → bottom ──
   The desktop SVG is a horizontal trapezoid that doesn't match the
   stacked stage layout once columns collapse to 1fr. On mobile we
   hide the SVG and rebuild the funnel shape with CSS so the particle
   stream flows down through the stacked stages. */
@media (max-width: 900px){
  .funnel-panel{ overflow: hidden; }

  /* Hide the desktop horizontal SVG */
  .funnel-bg{ display: none; }

  /* Vertical funnel shape — wider top, narrows toward bottom */
  .funnel-panel::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,237,179,.18) 0%, rgba(0,237,179,.06) 100%);
    clip-path: polygon(8% 0%, 92% 0%, 68% 100%, 32% 100%);
    -webkit-clip-path: polygon(8% 0%, 92% 0%, 68% 100%, 32% 100%);
  }

  /* Particle stream clip — same vertical trapezoid */
  .funnel-particles{
    clip-path: polygon(8% 0%, 92% 0%, 68% 100%, 32% 100%);
    -webkit-clip-path: polygon(8% 0%, 92% 0%, 68% 100%, 32% 100%);
  }

  /* Re-anchor dots: start above the panel and animate downward.
     The inline `top:N%` (set per dot in HTML) is overridden so every
     dot starts at -12px; horizontal distribution is restored via
     :nth-child cycle so dots spread across the funnel width. */
  .funnel-dot{
    top: -12px !important;
    left: 50%;
    animation: funnelFlowVertical 9s linear infinite !important;
  }
  .funnel-dot:nth-child(8n+1){ left: 14% !important; }
  .funnel-dot:nth-child(8n+2){ left: 28% !important; }
  .funnel-dot:nth-child(8n+3){ left: 42% !important; }
  .funnel-dot:nth-child(8n+4){ left: 56% !important; }
  .funnel-dot:nth-child(8n+5){ left: 70% !important; }
  .funnel-dot:nth-child(8n+6){ left: 84% !important; }
  .funnel-dot:nth-child(8n+7){ left: 22% !important; }
  .funnel-dot:nth-child(8n+8){ left: 76% !important; }
}

/* Travel distance is in absolute px because the panel height varies
   with stacked stages; 2200px clears any plausible mobile panel. */
@keyframes funnelFlowVertical{
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(2200px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .funnel-dot, .funnel-arrow{ animation: none !important; }
}