/* =====================================================================
   WHY GLOBALIST — Trust & Skin-in-the-Game section
   Lädt NACH globalist-manifest.css. Section-scoped to .sys-why.
   Background-Layer: "Globalist Welt" — dezentes Dot-Grid + Mint-Glows
   die den Eindruck eines Globus / Koordinatensystems erzeugen.
   ===================================================================== */

.sys-why{
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 130px) 0;
}

/* ——— Globalist Welt — SVG background (constellation + glow) ——— */
.why-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Soft mint auras left+right to feel like a wide globe hovers behind */
  background:
    radial-gradient(ellipse 60% 50% at 18% 40%,
      rgba(0,237,179,.09) 0%,
      transparent 55%),
    radial-gradient(ellipse 50% 45% at 82% 60%,
      rgba(0,237,179,.07) 0%,
      transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 120%,
      rgba(0,237,179,.04) 0%,
      transparent 60%);
}
.why-bg::before{
  /* Dot-grid = implied globe surface. Masked to a huge circle. */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1600px, 140vw);
  aspect-ratio: 1 / 1;
  background-image:
    radial-gradient(circle at 2px 2px,
      rgba(0,237,179,.18) 1.2px,
      transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    rgba(0,0,0,.8) 0%,
    rgba(0,0,0,.6) 30%,
    rgba(0,0,0,.15) 55%,
    transparent 70%);
          mask-image: radial-gradient(
    circle at 50% 50%,
    rgba(0,0,0,.8) 0%,
    rgba(0,0,0,.6) 30%,
    rgba(0,0,0,.15) 55%,
    transparent 70%);
  opacity: .7;
  animation: whyDrift 60s linear infinite;
}
@keyframes whyDrift{
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.why-bg::after{
  /* Horizontal "equator" hairline — adds the globe feeling */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,237,179,.15) 20%,
    rgba(0,237,179,.3) 50%,
    rgba(0,237,179,.15) 80%,
    transparent);
  filter: blur(.3px);
  box-shadow: 0 0 60px rgba(0,237,179,.15);
}

/* Drop any competing section background for the why-section */
.sys-why > .sys-grid{ position: relative; z-index: 1; }

/* ——— Header (reuse sys-header look but tuned) ——— */

/* ——— Press marquee ——— */
.why-press{
  grid-column: 1 / -1;
  position: relative;
  padding: 28px 0 24px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* Label sits as its own row ABOVE the slider. Editorial eyebrow with a
   small pulsing mint stroke above the text — not a pill. */
.why-press-lbl{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 22px;
  font-family: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .4em;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.why-press-lbl::before{
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow: 0 0 12px rgba(0,237,179,.65), 0 0 24px rgba(0,237,179,.35);
  transform-origin: 50% 50%;
  animation: whyPressLblPulse 1.9s ease-in-out infinite;
}
@keyframes whyPressLblPulse{
  0%, 100%{
    opacity: .45;
    transform: scaleX(.55);
    box-shadow: 0 0 8px rgba(0,237,179,.35);
  }
  50%{
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 14px rgba(0,237,179,.7), 0 0 28px rgba(0,237,179,.4);
  }
}
@media (prefers-reduced-motion: reduce){
  .why-press-lbl::before{ animation: none; opacity: .85; transform: none; }
}
/* The why-press-lbl is grid-spanning when used inside .sys-grid so the
   centered eyebrow stretches across all columns instead of squeezing into 1. */
.sys-grid > .why-press-lbl{ grid-column: 1 / -1; }
.why-press-track{
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: whyPressScroll 50s linear infinite;
}
.why-press:hover .why-press-track{ animation-play-state: paused; }
@keyframes whyPressScroll{ to { transform: translateX(-50%); } }
.why-press-track img{
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .6;
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}
.why-press-track img:hover{
  opacity: 1;
  filter: none;
  transform: scale(1.08);
}

/* ——— Big 4 Stats Tile ——— */
.why-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  border: 1px solid rgba(0,237,179,.16);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,
      rgba(0,237,179,.08) 0%,
      transparent 60%),
    linear-gradient(145deg,
      rgba(5,26,21,.9) 0%,
      rgba(2,12,9,.96) 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.why-stats::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(0,237,179,.12), transparent 55%);
  pointer-events: none;
}
@media(max-width: 991px){ .why-stats{ grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 767px){ .why-stats{ grid-template-columns: 1fr; padding: 22px 18px; border-radius: 16px; } }

.why-stat{
  position: relative;
  padding: clamp(16px, 2vw, 28px) clamp(16px, 2.5vw, 32px);
  border-right: 1px dashed rgba(0,237,179,.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  z-index: 1;
}
.why-stat:last-child{ border-right: 0; }
@media(max-width: 991px){
  .why-stat:nth-child(2n){ border-right: 0; }
  .why-stat:nth-child(-n+2){ border-bottom: 1px dashed rgba(0,237,179,.14); }
}
@media(max-width: 767px){
  .why-stat{ border-right: 0 !important; border-bottom: 1px dashed rgba(0,237,179,.14) !important; padding: 20px 0; }
  .why-stat:last-child{ border-bottom: 0 !important; }
}
.why-stat .num{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5.2vw, 68px);
  letter-spacing: -.04em;
  line-height: .92;
  background: linear-gradient(180deg, #ffffff 0%, #a8ffe3 55%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 48px rgba(0,237,179,.45);
  font-variant-numeric: tabular-nums;
}
.why-stat .lbl{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  line-height: 1.5;
  max-width: 22ch;
}

/* ——— Skin-in-the-Game hero tile ——— */
.why-skin{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 22px;
  border: 1px solid rgba(0,237,179,.22);
  background:
    radial-gradient(ellipse 70% 60% at 20% 20%,
      rgba(0,237,179,.08) 0%,
      transparent 55%),
    linear-gradient(145deg,
      rgba(5,30,24,.95) 0%,
      rgba(2,12,9,.96) 100%);
  box-shadow: 0 0 0 1px rgba(0,237,179,.1), 0 40px 100px -40px rgba(0,237,179,.3);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 380px;
}
.why-skin::after{
  content: "";
  position: absolute;
  right: -100px; bottom: -100px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,237,179,.18), transparent 65%);
  filter: blur(14px);
  z-index: 0;
  pointer-events: none;
}
.why-skin > *{ position: relative; z-index: 1; }
.why-skin h3{
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #fff;
  text-transform: none !important;
  margin: 0;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  text-wrap: balance;
  max-width: 22ch;
}
.why-skin h3 em{
  color: var(--primary);
  font-style: normal;
  text-shadow: 0 0 40px rgba(0,237,179,.55);
  -webkit-text-fill-color: var(--primary);
}
.why-skin p{
  font-size: 15px;
  line-height: 1.65;
  color: rgba(224,231,229,.78);
  max-width: 52ch;
  margin: 0;
}
.why-skin .skin-big{
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px dashed rgba(0,237,179,.2);
}
.why-skin .skin-big .val{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6vw, 84px);
  letter-spacing: -.05em;
  line-height: .9;
  color: var(--primary);
  text-shadow: 0 0 60px rgba(0,237,179,.55);
}
.why-skin .skin-big .note{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  max-width: 24ch;
}

/* ——— Growth-Partner callout tile ——— */
.why-partner-quote{
  position: relative;
  padding: clamp(28px, 3.5vw, 40px);
  border-radius: 22px;
  border: 1px solid rgba(0,237,179,.14);
  background: linear-gradient(145deg,
    rgba(5,26,21,.88) 0%,
    rgba(2,12,9,.96) 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
}
.why-partner-quote::before{
  content: "„";
  position: absolute;
  top: 18px; right: 24px;
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: 140px;
  line-height: .6;
  color: var(--primary);
  opacity: .22;
  text-shadow: 0 0 60px rgba(0,237,179,.5);
  pointer-events: none;
}
.why-partner-quote .eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--primary);
}
.why-partner-quote p{
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.4;
  color: #fff;
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0;
}
.why-partner-quote p em{
  color: var(--primary);
  font-style: normal;
  text-shadow: 0 0 20px rgba(0,237,179,.45);
}
.why-partner-quote .sig{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,.1);
}

/* ——— Partner tiles row ——— */
.why-partners{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media(max-width: 991px){ .why-partners{ grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 767px){ .why-partners{ grid-template-columns: 1fr; gap: 14px; } }

.why-partner{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(0,237,179,.14);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(0,237,179,.06) 0%,
      transparent 55%),
    linear-gradient(145deg,
      rgba(5,22,18,.92) 0%,
      rgba(2,12,9,.98) 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all .45s cubic-bezier(0.16,1,0.3,1);
  min-height: 260px;
}
.why-partner::after{
  content: "";
  position: absolute;
  right: -70px; bottom: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,237,179,.12), transparent 65%);
  opacity: .45;
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
  z-index: 0;
}
.why-partner > *{ position: relative; z-index: 1; }
.why-partner:hover{
  transform: translateY(-4px);
  border-color: rgba(0,237,179,.4);
  box-shadow: 0 40px 80px -30px rgba(0,237,179,.35),
              0 0 0 1px rgba(0,237,179,.2);
}
.why-partner:hover::after{ opacity: 1; transform: scale(1.2); }

/* Badge (top-right, live-style) */
.why-partner .badge{
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid rgba(0,237,179,.3);
  border-radius: 4px;
  background: rgba(0,237,179,.06);
}
.why-partner .badge::before{
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(0,237,179,.8);
  animation: whyBadgePulse 1.8s ease-in-out infinite;
}
@keyframes whyBadgePulse{
  0%, 100% { opacity: 1; box-shadow: 0 0 10px rgba(0,237,179,.8); }
  50%      { opacity: .35; box-shadow: 0 0 3px rgba(0,237,179,.3); }
}

/* Big logo hero — centered, always full-colour */
.why-partner .logo-hero{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 124px;
  margin: 8px 0 6px;
  position: relative;
}
/* Square / portrait badges (z.B. Google Premier Partner Badge) brauchen mehr
   Höhe, damit der Innendetail-Text "Premier Partner / 2025" lesbar bleibt. */
.why-partner .logo-hero.is-square{ height: 144px; }
.why-partner .logo-hero.is-square img{ max-height: 132px; max-width: 100%; }
.why-partner .logo-hero::before{
  /* soft mint halo behind the logo */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 120%; height: 120%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(0,237,179,.2) 0%,
    transparent 60%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
  opacity: .7;
  transition: opacity .45s ease, transform .6s ease;
}
.why-partner:hover .logo-hero::before{ opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
.why-partner .logo-hero img{
  max-height: 88px;
  max-width: 85%;
  width: auto;
  object-fit: contain;
  /* keep logos in their original colours — no brightness-invert */
}
/* DHL Express SVG hat viel Whitespace innerhalb des Artworks — der Logo
   braucht etwas mehr Höhe/Breite, damit er optisch genauso groß wirkt
   wie die anderen Partner-Logos. */
.why-partner .logo-hero img[alt="DHL Express"]{
  max-height: 112px;
  max-width: 96%;
  filter: drop-shadow(0 0 18px rgba(0,237,179,.25));
  transition: transform .55s cubic-bezier(0.16,1,0.3,1), filter .55s ease;
}
.why-partner:hover .logo-hero img{
  transform: scale(1.05);
  filter: drop-shadow(0 0 24px rgba(0,237,179,.45));
}

.why-partner .name{
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0;
}

/* Live mini-metric row (animated marker + value) */
.why-partner .signal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(0,237,179,.1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .15em;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  margin-top: auto;
}
.why-partner .signal b{
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(0,237,179,.5);
  letter-spacing: 0;
  font-size: 13px;
}

/* Per-tile signature animations inside .logo-hero */
.why-partner .spark-under{
  position: absolute;
  left: 10%; right: 10%;
  bottom: -4px;
  height: 22px;
  pointer-events: none;
}
.why-partner .spark-under svg{
  width: 100%; height: 100%;
  overflow: visible;
}
.why-partner .spark-under path{
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(0,237,179,.55));
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: whySparkDraw 2.4s cubic-bezier(0.16,1,0.3,1) forwards .2s;
}
@keyframes whySparkDraw{ to { stroke-dashoffset: 0; } }

/* ——— Closing pull-quote row (P&L-relevant) ——— */
.why-pnl{
  grid-column: 1 / -1;
  position: relative;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 48px);
  border-radius: 24px;
  border: 1px solid rgba(0,237,179,.22);
  background:
    radial-gradient(ellipse 90% 80% at 50% 0%,
      rgba(0,237,179,.08) 0%,
      transparent 55%),
    linear-gradient(145deg,
      rgba(4,20,16,.92) 0%,
      rgba(2,12,9,.96) 100%);
  overflow: hidden;
  isolation: isolate;
}
.why-pnl::before{
  /* Ornament: horizontal hairline "meridian" */
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 140px; height: 3px;
  background: var(--primary);
  box-shadow: 0 0 30px rgba(0,237,179,.7);
}
.why-pnl .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
}
.why-pnl .eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--primary);
}
.why-pnl h3{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 4.4vw, 64px);
  letter-spacing: -.03em;
  line-height: 1.02;
  color: #fff;
  text-transform: none !important;
  margin: 0 0 24px;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  max-width: 20ch;
}
.why-pnl h3 em{
  color: var(--primary);
  font-style: normal;
  text-shadow: 0 0 40px rgba(0,237,179,.5);
  -webkit-text-fill-color: var(--primary);
}
.why-pnl p{
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: rgba(224,231,229,.78);
  max-width: 58ch;
  margin: 0;
}
.why-pnl .divider{
  margin: 24px 0;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  box-shadow: 0 0 14px rgba(0,237,179,.4);
}
.why-pnl .cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--primary);
  color: #011d17;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  text-decoration: none;
  transition: all .35s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 0 0 0 rgba(0,237,179,0), 0 12px 32px -10px rgba(0,237,179,.45);
}
.why-pnl .cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(0,237,179,.5), 0 16px 44px -8px rgba(0,237,179,.55);
}

/* =====================================================================
   ANIMATED BENTO DETAILS — counter, pulsing ring, matrix dots
   ===================================================================== */

/* Stats: pulsing underline under the big number that slides in */
.why-stat::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--primary), transparent);
  box-shadow: 0 0 10px rgba(0,237,179,.5);
  transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
}
.why-stats.in-view .why-stat::before{ width: 70%; }

/* Skin-tile: pulsing concentric ring around 1:1 */
.why-skin .skin-big{ position: relative; }
.why-skin .skin-big .val{ position: relative; }
.why-skin .skin-big .val::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(0,237,179,.3);
  box-shadow: 0 0 40px rgba(0,237,179,.25) inset;
  animation: skinRing 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes skinRing{
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .4; }
  50%      { transform: translate(-50%, -50%) scale(1.18); opacity: .8; }
}

/* Growth-partner quote: ambient drifting mint dots */
.why-partner-quote{ position: relative; }
.why-partner-quote .drifters{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.why-partner-quote .drifters span{
  position: absolute;
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(0,237,179,.55), 0 0 20px rgba(0,237,179,.25);
  bottom: -8px;
  animation: driftUp 9s linear infinite;
  opacity: 0;
}
@keyframes driftUp{
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-160px); opacity: 0; }
}
.why-partner-quote > *{ position: relative; z-index: 1; }

/* P&L-tile closing — animated ornament bar beneath heading */
.why-pnl .divider{
  position: relative;
  overflow: hidden;
}
.why-pnl .divider::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: translateX(-100%);
  animation: pnlSweep 4s cubic-bezier(0.4,0,0.6,1) infinite 1s;
}
@keyframes pnlSweep{
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}

/* Partner signal value: counter reveal with mono slide */
.why-partner .signal b{
  display: inline-block;
  min-width: 4ch;
  text-align: right;
}

@media (prefers-reduced-motion: reduce){
  .why-stats .why-stat::before,
  .why-skin .skin-big .val::after,
  .why-partner-quote .drifters span,
  .why-partner-quote .wpq-office-track,
  .why-pnl .divider::after{ animation: none !important; transition: none !important; }
}

/* ——— Inline office marquee inside Growth-Partner quote ——— */
.why-partner-quote .wpq-office{
  position: relative;
  margin-top: 4px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(0,237,179,.05), rgba(0,0,0,.35));
  border: 1px solid rgba(0,237,179,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 30px -20px rgba(0,237,179,.35);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  z-index: 1;
}
.why-partner-quote .wpq-office-track{
  display: flex;
  gap: 10px;
  padding: 10px;
  width: max-content;
  animation: wpqOfficeScroll 38s linear infinite;
  will-change: transform;
}
.why-partner-quote .wpq-office:hover .wpq-office-track{
  animation-play-state: paused;
}
.why-partner-quote .wpq-office img{
  display: block;
  height: 168px;
  width: auto;
  border-radius: 10px;
  object-fit: cover;
  filter: saturate(.95) contrast(1.04) brightness(.96);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.7);
  transition: transform .4s ease, filter .4s ease, box-shadow .4s ease;
}
.why-partner-quote .wpq-office img:hover{
  transform: translateY(-2px);
  filter: saturate(1.05) contrast(1.05) brightness(1);
  box-shadow:
    0 10px 24px -10px rgba(0,0,0,.8),
    0 0 0 1px rgba(0,237,179,.35),
    0 0 22px -6px rgba(0,237,179,.45);
}
@keyframes wpqOfficeScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 991px){
  .why-partner-quote .wpq-office img{ height: 132px; }
}
@media (max-width: 700px){
  .why-partner-quote .wpq-office img{ height: 104px; border-radius: 8px; }
  .why-partner-quote .wpq-office-track{ animation-duration: 30s; }
}
@media (max-width: 480px){
  .why-partner-quote .wpq-office img{ height: 88px; }
}

/* ——— Mobile + Phone-Landscape: Why-Section Tiles einheitlich ——— */
@media (max-width: 767px){
  .why-skin,
  .why-partner-quote{
    padding: 22px 18px;
    border-radius: 16px;
    min-height: auto;
  }
  .why-partner{
    padding: 22px 18px;
    border-radius: 16px;
    min-height: auto;
  }
  .why-pnl{
    padding: 22px 18px;
    border-radius: 16px;
  }
}