/* =====================================================================
   MANIFEST — premium bento with graphic-per-tile + hero "Herzstück"
   Lädt NACH globalist-systems.css.
   ===================================================================== */

/* ——— Manifest tile — richer than sys-tile, still inside sys-grid ——— */
.mfst-tile{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 340px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 22px;
  border: 1px solid rgba(0,237,179,.14);
  background:
    linear-gradient(145deg,
      rgba(5,26,21,.92) 0%,
      rgba(3,16,13,.96) 55%,
      rgba(1,9,7,.98) 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition:
    transform .5s cubic-bezier(0.16,1,0.3,1),
    border-color .45s cubic-bezier(0.16,1,0.3,1),
    box-shadow .6s cubic-bezier(0.16,1,0.3,1);
}
/* Signature mint corner glow */
.mfst-tile::after{
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,237,179,.16) 0%,
    rgba(0,237,179,.05) 40%,
    transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  opacity: .75;
  transition: opacity .6s cubic-bezier(0.16,1,0.3,1),
              transform .6s cubic-bezier(0.16,1,0.3,1);
  z-index: 0;
}
/* Cursor spotlight — uses --mx/--my that premium.js sets */
.mfst-tile::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    500px circle at var(--mx, 50%) var(--my, -20%),
    rgba(0,237,179,.18),
    transparent 45%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 0;
}
.mfst-tile > *{ position: relative; z-index: 1; }

.mfst-tile:hover{
  transform: translateY(-6px);
  border-color: rgba(0,237,179,.38);
  box-shadow:
    0 50px 110px -40px rgba(0,237,179,.25),
    0 20px 40px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,237,179,.22);
}
.mfst-tile:hover::after{
  opacity: 1;
  transform: translate(-30px, -30px) scale(1.18);
}
.mfst-tile:hover::before{ opacity: 1; }

/* Eyebrow with § + mono number */
.mfst-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
  text-shadow: 0 0 16px rgba(0,237,179,.4);
}
.mfst-eyebrow::before{
  content: "";
  width: 20px; height: 1px;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(0,237,179,.6);
}

.mfst-title{
  font-family: 'Inter', sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  text-transform: none !important;
  margin: 0;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  text-wrap: balance;
}
.mfst-title em{
  color: var(--primary);
  font-style: normal;
  -webkit-text-fill-color: var(--primary);
  text-shadow: 0 0 40px rgba(0,237,179,.5);
}

.mfst-lead{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(224,231,229,.75);
  margin: 0;
  max-width: 56ch;
}

/* ——— Channel logo strip (Demand Gen) ——— */
.mfst-channels{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media(max-width: 640px){ .mfst-channels{ grid-template-columns: repeat(3, 1fr); } }
.mfst-ch{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background: linear-gradient(180deg,
    rgba(0,237,179,.04) 0%,
    rgba(255,255,255,.02) 100%);
  transition: all .35s cubic-bezier(0.16,1,0.3,1);
}
.mfst-ch img{
  width: 28px; height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .85;
  transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
.mfst-ch .lbl{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.mfst-ch:hover{
  border-color: rgba(0,237,179,.32);
  background: linear-gradient(180deg,
    rgba(0,237,179,.1) 0%,
    rgba(0,237,179,.02) 100%);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0,237,179,.2);
}
.mfst-ch:hover img{
  filter: none;
  opacity: 1;
  transform: scale(1.1);
}
.mfst-ch:hover .lbl{ color: var(--primary); }
/* CTV special — text mark instead of image */
.mfst-ch.is-text{
  color: rgba(255,255,255,.85);
}
.mfst-ch.is-text .mark{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .08em;
  color: #fff;
  line-height: 1;
}
.mfst-ch.is-text:hover .mark{ color: var(--primary); text-shadow: 0 0 12px rgba(0,237,179,.5); }

/* ——— Search mockup + sparkline (Demand Capture) ——— */
.mfst-search{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.mfst-search .icon{
  width: 14px; height: 14px;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.mfst-search .icon::after{
  content: "";
  position: absolute;
  bottom: -4px; right: -4px;
  width: 6px; height: 1.5px;
  background: rgba(255,255,255,.5);
  transform: rotate(45deg);
}
.mfst-search .query{ flex: 1; }
.mfst-search .query b{ color: var(--primary); }
.mfst-search .blink{
  display: inline-block;
  width: 7px;
  color: var(--primary);
  animation: mfstBlink 1s steps(2, end) infinite;
}
@keyframes mfstBlink{ 50% { opacity: 0; } }

.mfst-spark{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  padding: 14px 16px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg,
    rgba(0,237,179,.04) 0%,
    rgba(0,0,0,.2) 100%);
  border: 1px solid rgba(0,237,179,.1);
}
.mfst-spark svg{
  width: 100%;
  height: 56px;
  display: block;
}
.mfst-spark svg path.area{
  fill: url(#mfstSparkFill);
  opacity: 0;
  animation: mfstSparkFade 1s forwards 1s;
}
.mfst-spark svg path.line{
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0,237,179,.6));
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: mfstSparkDraw 1.6s cubic-bezier(0.16,1,0.3,1) forwards .2s;
}
@keyframes mfstSparkDraw{ to { stroke-dashoffset: 0; } }
@keyframes mfstSparkFade{ to { opacity: .6; } }
.mfst-spark .v{
  text-align: right;
  font-family: 'Inter', sans-serif;
}
.mfst-spark .v b{
  display: block;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--primary);
  text-shadow: 0 0 24px rgba(0,237,179,.55);
  line-height: 1;
}
.mfst-spark .v span{
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ——— Stat block (Conversion · Offer) ——— */
.mfst-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid rgba(0,237,179,.1);
  border-bottom: 1px solid rgba(0,237,179,.1);
}
.mfst-stats > div{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 8px 4px;
  border-right: 1px dashed rgba(255,255,255,.08);
}
.mfst-stats > div:last-child{ border-right: 0; }
.mfst-stats b{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -.03em;
  color: #fff;
  background: linear-gradient(180deg, #ffffff 0%, #a8ffe3 70%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 32px rgba(0,237,179,.45);
  line-height: 1;
}
.mfst-stats span{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .2em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}

/* ——— Sublinks inside manifest tiles ——— */
.mfst-links{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mfst-links a{
  display: grid;
  grid-template-columns: 42px 1fr 14px;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: rgba(255,255,255,.82);
  border-bottom: 1px dashed rgba(255,255,255,.06);
  transition: color .3s ease, padding-left .35s cubic-bezier(0.16,1,0.3,1), background .3s ease;
}
.mfst-links a:last-child{ border-bottom: 0; }
.mfst-links a .num{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
}
.mfst-links a .arr{
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
  color: var(--primary);
  font-family: 'IBM Plex Mono', monospace;
}
.mfst-links a:hover{
  color: #fff;
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(0,237,179,.06), transparent);
}
.mfst-links a:hover .arr{
  opacity: 1;
  transform: translateX(0);
  text-shadow: 0 0 10px rgba(0,237,179,.6);
}

/* ——— HERZSTÜCK (hero tile for Full Funnel) ——— */
.mfst-tile.mfst-heart{
  border-color: rgba(0,237,179,.3);
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%,
      rgba(0,237,179,.08) 0%,
      transparent 60%),
    linear-gradient(145deg,
      rgba(5,30,24,.95) 0%,
      rgba(2,14,11,.98) 100%);
  box-shadow:
    0 0 0 1px rgba(0,237,179,.15),
    0 40px 100px -30px rgba(0,237,179,.25) inset,
    0 30px 80px -40px rgba(0,237,179,.3);
  min-height: 380px;
}
.mfst-heart::after{
  right: -80px; bottom: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle,
    rgba(0,237,179,.22) 0%,
    rgba(0,237,179,.08) 40%,
    transparent 70%);
  opacity: .9;
}
.mfst-heart:hover{
  border-color: rgba(0,237,179,.55);
  box-shadow:
    0 0 0 1px rgba(0,237,179,.35),
    0 40px 100px -30px rgba(0,237,179,.3) inset,
    0 60px 140px -30px rgba(0,237,179,.5);
}
.mfst-heart .mfst-eyebrow{
  color: #020c09;
  background: var(--primary);
  padding: 4px 10px;
  border-radius: 4px;
  text-shadow: none;
  letter-spacing: .2em;
  box-shadow: 0 0 20px rgba(0,237,179,.5);
}
.mfst-heart .mfst-eyebrow::before{ display: none; }
.mfst-heart .mfst-title{
  font-size: clamp(32px, 3.4vw, 48px);
}

/* Heart gauge — semicircular tachometer */
.mfst-gauge{
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 2 / 1.05;
  margin: 0 auto 0 0;
}
.mfst-gauge svg{
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mfst-gauge .arc-bg{ fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.mfst-gauge .arc-fg{
  fill: none;
  stroke: var(--primary);
  stroke-width: 3.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(0,237,179,.55));
  stroke-dasharray: 360;
  stroke-dashoffset: 110;
  animation: mfstGaugeFill 2.2s cubic-bezier(0.16,1,0.3,1) forwards .4s;
  transform-origin: 50% 100%;
}
@keyframes mfstGaugeFill{ to { stroke-dashoffset: 70; } }
.mfst-gauge .tick{ stroke: rgba(255,255,255,.22); stroke-width: 1.2; }
.mfst-gauge .tick.hot{ stroke: var(--primary); filter: drop-shadow(0 0 6px rgba(0,237,179,.6)); }
.mfst-gauge .needle{
  fill: var(--primary);
  filter: drop-shadow(0 0 10px rgba(0,237,179,.8));
  transform-origin: 180px 180px;
  animation: mfstNeedle 2.4s cubic-bezier(0.16,1,0.3,1) forwards .6s;
}
@keyframes mfstNeedle{
  from { transform: rotate(-90deg); }
  to   { transform: rotate(52deg); }
}
.mfst-gauge .center{
  fill: var(--primary);
  filter: drop-shadow(0 0 16px rgba(0,237,179,.8));
}
.mfst-gauge .zone-lbl{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  fill: var(--primary);
  text-anchor: middle;
  filter: drop-shadow(0 0 14px rgba(0,237,179,.7));
}
.mfst-gauge .min-lbl,
.mfst-gauge .max-lbl{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  fill: rgba(255,255,255,.5);
}

/* Heart tags row */
.mfst-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mfst-tag{
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,237,179,.08);
  border: 1px solid rgba(0,237,179,.25);
  color: var(--primary);
}

/* Heart grid inside the tile — 2 columns on wide */
.mfst-heart .mfst-body{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: start;
}
@media(max-width: 780px){
  .mfst-heart .mfst-body{ grid-template-columns: 1fr; }
}

/* Collapse spans on tablet */
@media(max-width: 991px){
  .mfst-tile{ min-height: 260px; padding: 22px; }
  .mfst-tile.mfst-heart{ min-height: 320px; }
  .mfst-channels{ grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .mfst-stats{ grid-template-columns: repeat(3, 1fr); }
}
@media(max-width: 767px){
  .mfst-stats{ grid-template-columns: 1fr 1fr 1fr; }
  .mfst-channels{ grid-template-columns: repeat(3, 1fr); }
  .mfst-tile.mfst-heart{ min-height: auto; }
  .mfst-tile{ padding: 22px 18px; border-radius: 16px; min-height: auto; }
  .mfst-heart .mfst-body{ grid-template-columns: 1fr; gap: 18px; }
  .mfst-gauge{ max-width: 280px; }
}