@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
  --font-family: 'Outfit', sans-serif;
  --ink: #050507;
  --surface: rgba(12, 12, 16, 0.86);
  --surface-strong: rgba(18, 18, 24, 0.94);
  --line: rgba(255, 255, 255, 0.1);
  --neon-rose: #fd2f7d;
  --neon-coral: #ff655b;
  --neon-blood: #dc2626;
  --neon-violet: #351241;
  --copy-muted: #a9a9b5;
}

body {
  font-family: var(--font-family);
  background-color: var(--ink);
  color: white;
  overflow-x: hidden;
}

.site-noise {
  background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');
}

.animation-delay-2s {
  animation-delay: 2s;
}

.site-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 5, 7, 0.98), rgba(5, 5, 7, 0.96));
}

.site-main > header,
.site-main > section {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}

.ambient-glow-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-glow-layer::before,
.ambient-glow-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ambient-glow-layer::before {
  opacity: 0.9;
  background:
    radial-gradient(circle at 88% 8%, rgba(253, 47, 125, 0.13) 0 7rem, transparent 22rem),
    radial-gradient(circle at 8% 14%, rgba(255, 101, 91, 0.14) 0 9rem, transparent 24rem),
    radial-gradient(circle at 82% 22%, rgba(249, 115, 22, 0.13) 0 8rem, transparent 23rem),
    radial-gradient(circle at 6% 31%, rgba(236, 72, 153, 0.15) 0 9rem, transparent 25rem),
    radial-gradient(circle at 92% 42%, rgba(220, 38, 38, 0.14) 0 10rem, transparent 26rem),
    radial-gradient(circle at 10% 53%, rgba(253, 47, 125, 0.14) 0 8rem, transparent 24rem),
    radial-gradient(circle at 86% 66%, rgba(245, 158, 11, 0.12) 0 9rem, transparent 25rem),
    radial-gradient(circle at 9% 78%, rgba(255, 101, 91, 0.13) 0 10rem, transparent 26rem),
    radial-gradient(circle at 82% 91%, rgba(219, 39, 119, 0.14) 0 9rem, transparent 25rem);
}

.ambient-glow-layer::after {
  opacity: 0.62;
  background:
    radial-gradient(circle at 50% 18%, rgba(253, 47, 125, 0.08) 0 10rem, transparent 30rem),
    radial-gradient(circle at 48% 36%, rgba(255, 101, 91, 0.08) 0 12rem, transparent 32rem),
    radial-gradient(circle at 52% 58%, rgba(220, 38, 38, 0.08) 0 12rem, transparent 34rem),
    radial-gradient(circle at 50% 82%, rgba(249, 115, 22, 0.08) 0 11rem, transparent 32rem);
}

.ambient-glow {
  position: absolute;
  width: var(--glow-size);
  height: var(--glow-size);
  border-radius: 9999px;
  background:
    radial-gradient(circle at 45% 45%, var(--glow-core) 0%, var(--glow-mid) 38%, transparent 72%);
  filter: blur(var(--glow-blur));
  opacity: var(--glow-opacity);
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0);
}

.ambient-glow-rose {
  --glow-size: clamp(24rem, 42vw, 42rem);
  --glow-blur: 82px;
  --glow-opacity: 0.88;
  --glow-core: rgba(253, 47, 125, 0.6);
  --glow-mid: rgba(253, 47, 125, 0.24);
  top: 4%;
  left: -15rem;
}

.ambient-glow-coral {
  --glow-size: clamp(22rem, 36vw, 38rem);
  --glow-blur: 86px;
  --glow-opacity: 0.82;
  --glow-core: rgba(255, 101, 91, 0.58);
  --glow-mid: rgba(255, 101, 91, 0.22);
  top: 16%;
  right: -11rem;
}

.ambient-glow-pink {
  --glow-size: clamp(22rem, 38vw, 40rem);
  --glow-blur: 88px;
  --glow-opacity: 0.8;
  --glow-core: rgba(236, 72, 153, 0.56);
  --glow-mid: rgba(236, 72, 153, 0.22);
  top: 23%;
  left: -12rem;
}

.ambient-glow-red {
  --glow-size: clamp(24rem, 40vw, 44rem);
  --glow-blur: 92px;
  --glow-opacity: 0.78;
  --glow-core: rgba(220, 38, 38, 0.56);
  --glow-mid: rgba(220, 38, 38, 0.22);
  top: 28%;
  right: -13rem;
}

.ambient-glow-amber {
  --glow-size: clamp(20rem, 34vw, 36rem);
  --glow-blur: 86px;
  --glow-opacity: 0.72;
  --glow-core: rgba(245, 158, 11, 0.5);
  --glow-mid: rgba(245, 158, 11, 0.19);
  top: 43%;
  left: 54%;
}

.ambient-glow-magenta {
  --glow-size: clamp(22rem, 38vw, 42rem);
  --glow-blur: 92px;
  --glow-opacity: 0.76;
  --glow-core: rgba(219, 39, 119, 0.54);
  --glow-mid: rgba(219, 39, 119, 0.21);
  top: 49%;
  left: -12rem;
}

.ambient-glow-orange {
  --glow-size: clamp(22rem, 36vw, 40rem);
  --glow-blur: 88px;
  --glow-opacity: 0.76;
  --glow-core: rgba(249, 115, 22, 0.54);
  --glow-mid: rgba(249, 115, 22, 0.21);
  top: 62%;
  right: -11rem;
}

.ambient-glow-deep {
  --glow-size: clamp(24rem, 42vw, 46rem);
  --glow-blur: 96px;
  --glow-opacity: 0.72;
  --glow-core: rgba(253, 47, 125, 0.5);
  --glow-mid: rgba(220, 38, 38, 0.2);
  top: 70%;
  left: 48%;
}

.ambient-glow-gold {
  --glow-size: clamp(20rem, 34vw, 36rem);
  --glow-blur: 88px;
  --glow-opacity: 0.66;
  --glow-core: rgba(250, 204, 21, 0.44);
  --glow-mid: rgba(249, 115, 22, 0.18);
  top: 78%;
  left: -10rem;
}

.ambient-glow-crimson {
  --glow-size: clamp(24rem, 40vw, 44rem);
  --glow-blur: 94px;
  --glow-opacity: 0.72;
  --glow-core: rgba(220, 38, 38, 0.52);
  --glow-mid: rgba(253, 47, 125, 0.2);
  top: 88%;
  right: -14rem;
}

.ambient-glow-final {
  --glow-size: clamp(22rem, 38vw, 42rem);
  --glow-blur: 90px;
  --glow-opacity: 0.72;
  --glow-core: rgba(253, 47, 125, 0.52);
  --glow-mid: rgba(255, 101, 91, 0.2);
  top: 96%;
  left: 26%;
}

@media (max-width: 640px) {
  .ambient-glow-layer::before {
    opacity: 1;
    background:
      radial-gradient(circle at 96% 7%, rgba(253, 47, 125, 0.2) 0 4.5rem, transparent 14rem),
      radial-gradient(circle at 2% 17%, rgba(255, 101, 91, 0.18) 0 5.5rem, transparent 15rem),
      radial-gradient(circle at 100% 29%, rgba(249, 115, 22, 0.18) 0 5rem, transparent 16rem),
      radial-gradient(circle at 0% 42%, rgba(236, 72, 153, 0.2) 0 5rem, transparent 15rem),
      radial-gradient(circle at 98% 56%, rgba(220, 38, 38, 0.19) 0 5.5rem, transparent 16rem),
      radial-gradient(circle at 2% 70%, rgba(245, 158, 11, 0.16) 0 5rem, transparent 15rem),
      radial-gradient(circle at 96% 86%, rgba(253, 47, 125, 0.18) 0 5.5rem, transparent 16rem);
  }

  .ambient-glow-layer::after {
    opacity: 0.88;
    background:
      radial-gradient(circle at 52% 20%, rgba(253, 47, 125, 0.1) 0 7rem, transparent 20rem),
      radial-gradient(circle at 48% 45%, rgba(255, 101, 91, 0.1) 0 8rem, transparent 22rem),
      radial-gradient(circle at 52% 72%, rgba(249, 115, 22, 0.09) 0 8rem, transparent 22rem);
  }

  .ambient-glow {
    --glow-size: clamp(18rem, 82vw, 28rem);
    --glow-blur: 58px;
  }

  .ambient-glow-rose {
    --glow-opacity: 0.92;
    top: 5%;
    left: -10rem;
  }

  .ambient-glow-coral {
    --glow-opacity: 0.88;
    top: 14%;
    right: -9rem;
  }

  .ambient-glow-pink {
    --glow-opacity: 0.9;
    top: 26%;
    left: -10rem;
  }

  .ambient-glow-red {
    --glow-opacity: 0.86;
    top: 39%;
    right: -9rem;
  }

  .ambient-glow-amber {
    --glow-opacity: 0.8;
    top: 52%;
    left: -9rem;
  }

  .ambient-glow-magenta {
    --glow-opacity: 0.86;
    top: 63%;
    left: auto;
    right: -10rem;
  }

  .ambient-glow-orange {
    --glow-opacity: 0.84;
    top: 74%;
    right: -9rem;
  }

  .ambient-glow-deep {
    --glow-opacity: 0.82;
    top: 84%;
    left: -8rem;
  }
}

.hero-copy-panel {
  background:
    linear-gradient(135deg, rgba(253, 47, 125, 0.08), transparent 42%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 28px 90px -34px rgba(253, 47, 125, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.hero-video-shell {
  width: min(100%, 420px);
  justify-self: center;
  height: 100%;
}

.hero-video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  min-height: 520px;
  max-height: min(72vh, 680px);
  overflow: hidden;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 50% 16%, rgba(253, 47, 125, 0.18), transparent 32%),
    linear-gradient(145deg, rgba(20, 20, 24, 0.95), rgba(5, 5, 7, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 30px 90px -30px rgba(253, 47, 125, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (min-width: 1024px) {
  .hero-video-frame {
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
    max-height: none;
  }
}

.hero-video-frame-mobile {
  min-height: 300px;
  max-height: 42vh;
  border-radius: 1.5rem;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.84;
  filter: saturate(0.92) contrast(1.08);
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 48%);
}

.hero-play-button {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #dc2626, #be185d);
  box-shadow: 0 0 30px rgba(220, 38, 38, 0.45);
}

.cta-primary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  border-radius: 999px;
  font-weight: 800;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
    background 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-primary {
  color: white;
  background: linear-gradient(135deg, var(--neon-blood), #be185d 52%, var(--neon-rose));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 44px -22px rgba(253, 47, 125, 0.9);
}

.cta-secondary {
  color: white;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cta-primary:hover,
.cta-secondary:hover {
  transform: translateY(-1px);
}

.cta-primary:active,
.cta-secondary:active {
  transform: scale(0.985);
}

.cta-primary:focus-visible,
.cta-secondary:focus-visible {
  outline: 2px solid var(--neon-rose);
  outline-offset: 4px;
}

/* --- FOCUS CARD STYLES (THE MAGIC) --- */

.focus-card {
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transform: scale(0.96) translateY(12px);
  opacity: 0.82;
  filter: saturate(0.85);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.focus-card.in-view {
  /* AKTIV: Groß, hell, farbig, GLOW */
  background: rgba(20, 20, 20, 0.95);
  border-color: rgba(220, 38, 38, 0.6);
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: saturate(1);
  box-shadow: 0 15px 50px -10px rgba(220, 38, 38, 0.3),
    inset 0 0 20px rgba(220, 38, 38, 0.05);
  z-index: 10;
  /* Bringt die aktive Karte nach vorne */
}

/* --- GHOST FOCUS (Text/Element Blur Reveal) --- */
.ghost-focus {
  opacity: 0.76;
  filter: saturate(0.72);
  transform: scale(0.99) translateY(10px);
  transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Smooth/Slow */
}

.ghost-focus.in-view {
  opacity: 1;
  filter: saturate(1);
  transform: scale(1) translateY(0);
}

/* --- OTHER ANIMATIONS --- */
.trigger-elem {
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fade-up {
  opacity: 0.78;
  transform: translateY(18px);
}

.scroll-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.scroll-pop {
  opacity: 0.82;
  transform: scale(0.96);
}

.scroll-pop.in-view {
  opacity: 1;
  transform: scale(1);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-expand {
  width: 0%;
  opacity: 0.68;
}

.scroll-expand.in-view {
  width: 100%;
  opacity: 1;
}

.progress-fill {
  width: 0%;
  transition: width 1.5s ease-out;
}

.plan-step {
  opacity: 0.82;
}

.plan-step-number {
  color: rgba(255, 255, 255, 0.062);
  transition: color 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.plan-step-title {
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.plan-step.in-view {
  opacity: 1;
}

.plan-step.in-view .plan-step-title-right {
  transform: translateX(0.5rem);
}

.plan-step.in-view .plan-step-title-left {
  transform: translateX(-0.5rem);
}

.plan-step.in-view .plan-step-number-red {
  color: rgba(239, 68, 68, 0.16);
}

.plan-step.in-view .plan-step-number-pink {
  color: rgba(236, 72, 153, 0.16);
}

.plan-step.in-view .plan-step-number-orange {
  color: rgba(249, 115, 22, 0.16);
}

.pattern-section {
  position: relative;
}

.pattern-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1.6px),
    linear-gradient(90deg, rgba(253, 47, 125, 0.06), transparent 38%, rgba(255, 101, 91, 0.06));
  background-size: 28px 28px, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  z-index: 0;
}

.pattern-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(100% + 8rem) calc(100% + 5rem), rgba(249, 115, 22, 0.12) 0%, rgba(253, 47, 125, 0.07) 36%, transparent 70%),
    linear-gradient(to bottom, rgba(5, 5, 7, 0.92), transparent 22%, transparent 78%, rgba(5, 5, 7, 0.92)),
    radial-gradient(circle at 50% 40%, transparent 0%, rgba(5, 5, 7, 0.42) 72%);
  z-index: 0;
}

#pricing.pattern-section::before {
  bottom: -6rem;
}

#pricing.pattern-section::after {
  bottom: -12rem;
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

.pricing-card-surface {
  position: relative;
  overflow: hidden;
}

.pricing-card-surface > * {
  position: relative;
  z-index: 1;
}

.pricing-card-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(253, 47, 125, 0.08), transparent 46%, rgba(249, 115, 22, 0.07));
  background-size: 24px 24px, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  z-index: 0;
}

.pricing-edge-glow,
#swiper-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(18rem, 26vw, 28rem);
  pointer-events: none;
  z-index: 0;
  opacity: 0.68;
  background:
    radial-gradient(ellipse at 76% 50%, rgba(249, 115, 22, 0.18) 0%, rgba(253, 47, 125, 0.11) 35%, rgba(82, 22, 38, 0.07) 56%, transparent 76%),
    linear-gradient(to bottom, transparent 0%, rgba(132, 48, 30, 0.1) 32%, rgba(82, 22, 38, 0.07) 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.pricing-edge-glow {
  bottom: clamp(-13rem, -12vw, -8rem);
}

#swiper-section::after {
  top: clamp(-13rem, -12vw, -8rem);
  z-index: 2;
  mix-blend-mode: screen;
}

#pricing .container::after,
#swiper-section::before {
  content: "";
  position: absolute;
  width: clamp(20rem, 36vw, 34rem);
  height: clamp(20rem, 36vw, 34rem);
  border-radius: 9999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 45% 45%, rgba(249, 115, 22, 0.18) 0%, rgba(253, 47, 125, 0.1) 42%, transparent 72%);
  filter: blur(78px);
  mix-blend-mode: screen;
  opacity: 0.5;
  z-index: -1;
}

#pricing .container::after {
  right: -13rem;
  bottom: -15rem;
}

#pricing {
  overflow: visible !important;
}

#swiper-section {
  margin-top: -6rem;
  padding-top: 14rem;
  border-top-color: transparent !important;
  overflow: visible !important;
}

#swiper-section::before {
  top: -15rem;
  right: -13rem;
  z-index: 0;
}

@media (max-width: 640px) {
  .pattern-section::before {
    opacity: 0.42;
    background-size: 22px 22px, 100% 100%;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  .pattern-section::after {
    background:
      radial-gradient(circle at calc(100% + 7rem) calc(100% + 3rem), rgba(249, 115, 22, 0.18) 0%, rgba(253, 47, 125, 0.1) 38%, transparent 72%),
      linear-gradient(to bottom, rgba(5, 5, 7, 0.72), transparent 16%, transparent 84%, rgba(5, 5, 7, 0.72)),
      radial-gradient(circle at 50% 42%, transparent 0%, rgba(5, 5, 7, 0.32) 76%);
  }

  .pricing-card-surface::before {
    opacity: 0.24;
    background-size: 20px 20px, 100% 100%;
  }

  #pricing .container::after,
  #swiper-section::before {
    width: 22rem;
    height: 22rem;
    filter: blur(62px);
    opacity: 0.62;
  }

  #pricing .container::after {
    right: -12rem;
    bottom: -9rem;
  }

  #swiper-section {
    margin-top: -5rem;
    padding-top: 12rem;
  }

  #swiper-section::before {
    top: -9rem;
    right: -12rem;
  }

  #swiper-section::after {
    height: 18rem;
  }

  .pricing-edge-glow {
    bottom: -8.5rem;
  }

  #swiper-section::after {
    top: -8.5rem;
  }
}

/* Utilities */
.bubble-in {
  border-radius: 1.2rem 1.2rem 1.2rem 0.2rem;
  background: #1c1c1c;
  color: #d1d5db;
}

.bubble-out {
  border-radius: 1.2rem 1.2rem 0.2rem 1.2rem;
  background: linear-gradient(135deg, #dc2626 0%, #be185d 100%);
  color: white;
}

/* --- KINETIC VARIANT STYLES --- */
.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, #FD297B, #FF655B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.platform-rotator {
  display: inline-grid;
  min-width: 6.2em;
  height: 1.05em;
  vertical-align: bottom;
  color: #FD297B;
}

.platform-rotator span {
  grid-area: 1 / 1;
  background: linear-gradient(135deg, #FD297B, #FF655B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(0.18em);
  animation: platform-rotate 16s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  white-space: nowrap;
  will-change: opacity, transform;
}

.platform-rotator span:nth-child(2) {
  animation-delay: 4s;
}

.platform-rotator span:nth-child(3) {
  animation-delay: 8s;
}

.platform-rotator span:nth-child(4) {
  animation-delay: 12s;
}

@keyframes platform-rotate {
  0% {
    opacity: 0;
    transform: translateY(0.18em);
  }

  6%,
  22% {
    opacity: 1;
    transform: translateY(0);
  }

  30%,
  100% {
    opacity: 0;
    transform: translateY(-0.2em);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .trigger-elem,
  .focus-card,
  .ghost-focus,
  .manifesto-line {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .platform-rotator span {
    animation: none;
  }

  .platform-rotator span:first-child {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1023px) {
  .hero-video-shell {
    width: min(100%, 360px);
  }

  .hero-video-frame {
    min-height: 420px;
    max-height: 58vh;
  }
}

@media (max-width: 480px) {
  .hero-copy-panel {
    padding: 1.5rem;
  }

  .hero-video-shell {
    justify-self: stretch;
  }

  .hero-video-frame {
    min-height: 360px;
    border-radius: 1.5rem;
  }

}

.bg-gradient-primary {
  background: linear-gradient(135deg, #FD297B, #FF655B);
}

/* Marquee */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Uses JS observer */

/* Delays */
.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

/* --- SCROLL ANIMATIONS --- */
.trigger-elem {
  opacity: 0.78;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    width 900ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 900ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base state: Fade Up */
.scroll-fade-up {
  transform: translateY(18px);
}

/* Base state: Pop (Scale) */
.scroll-pop {
  transform: scale(0.96);
}

/* Base state: Expand Width */
.scroll-expand {
  width: 0;
}

/* Base state: Scale Text */
.scroll-scale {
  transform: scale(0.5);
}

/* ACTIVE STATE (added by JS) */
.trigger-elem.in-view {
  opacity: 1;
  transform: translate(0) scale(1);
}

.trigger-elem.in-view.scroll-expand {
  width: 100%;
  /* Or specific width via inline style, but this ensures visibility */
}

/* --- VARIANT C STYLES (Atmosphere) --- */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(92px);
  opacity: 0.24;
  z-index: 0;
  pointer-events: none;
  animation: pulse-glow 10s infinite alternate;
}

@keyframes pulse-glow {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }

  100% {
    transform: scale(1.2);
    opacity: 0.4;
  }
}

/* --- PRICING REFINEMENT (Option 3) --- */
.halo-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate(-50%, -50%);
}

.tier-icon-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2rem;
  transition: all 0.7s ease;
}

.group:hover .tier-icon-container {
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.pricing-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

.badge-essential {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-magnet {
  background: linear-gradient(to right, #dc2626, #be185d);
  color: white;
  box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.4);
}

.badge-wingman {
  background: linear-gradient(to right, #0ea5e9, #2dd4bf);
  color: white;
  box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.4);
}

.text-gradient-blue {
  background: linear-gradient(to right, #0ea5e9, #2dd4bf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes border-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.animate-border-flow {
  background-size: 200% 200%;
  animation: border-flow 4s linear infinite;
}

#reveal-before-box {
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

/* --- TINDER SWIPER STYLES --- */
.swiper-wrapper {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 430px;
  margin: 0 auto 4.75rem;
  perspective: 1000px;
}

.swiper-card {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #0f0f11;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: 50% 100%;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
  will-change: transform, opacity;
  z-index: 1;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* Card Stack Effect */
.swiper-card:nth-last-child(1) {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}

.swiper-card:nth-last-child(2) {
  transform: translate3d(0, 12px, -20px) scale(0.97);
  opacity: 0.42;
  z-index: 2;
}

.swiper-card:nth-last-child(3) {
  transform: translate3d(0, 24px, -40px) scale(0.94);
  opacity: 0.22;
  z-index: 1;
}

.swiper-card:nth-last-child(n+4) {
  transform: translate3d(0, 36px, -60px) scale(0.91);
  opacity: 0;
  z-index: 0;
}

/* Swipe Actions */
.swiper-card.swipe-left {
  transform: translate3d(-150%, -20px, 0) rotate(-20deg) !important;
  opacity: 0 !important;
}

.swiper-card.swipe-right {
  transform: translate3d(150%, -20px, 0) rotate(20deg) !important;
  opacity: 0 !important;
}

/* Tinder Buttons */
.swiper-btn {
  min-width: 6.5rem;
  height: 4.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0f0f11;
  color: white;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
}

.swiper-btn:hover {
  transform: scale(1.1);
}

.swiper-btn-dislike:hover {
  border-color: #ef4444;
  color: #ef4444;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.3);
}

.swiper-btn-like:hover {
  border-color: #10b981;
  color: #10b981;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
}

.quiz-card {
  background:
    radial-gradient(circle at 85% 15%, rgba(253, 47, 125, 0.12), transparent 34%),
    linear-gradient(145deg, #121218, #07070a);
  border-color: rgba(255, 255, 255, 0.1);
}

.quiz-difficulty {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(253, 47, 125, 0.1);
  border: 1px solid rgba(253, 47, 125, 0.18);
  color: #fd2f7d;
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quiz-note {
  color: #8d8d99;
  font-size: 0.84rem;
  line-height: 1.6;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.quiz-result-card {
  background:
    radial-gradient(circle at center 25%, rgba(253, 47, 125, 0.16), transparent 36%),
    #0a0a0c;
}

.swiper-wrapper.quiz-complete + .swiper-controls {
  display: none;
}

@media (max-width: 640px) {
  .swiper-wrapper {
    height: 520px;
    margin-bottom: 3.5rem;
  }

  .swiper-card {
    padding: 1.35rem;
    border-radius: 1.5rem;
  }

  .swiper-btn {
    min-width: 6rem;
    height: 4rem;
  }
}

/* --- MANIFESTO STYLES --- */
.manifesto-line {
  opacity: 0.15;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(20px);
}

.manifesto-line.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Bento Card Grid for 22 reasons */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.bento-card {
  background: rgba(15, 15, 17, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2rem;
  padding: 2rem;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bento-card-gradient-red {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.07) 0%, rgba(0, 0, 0, 0.6) 100%);
  border: 1px solid rgba(220, 38, 38, 0.15) !important;
}

.bento-card-gradient-pink {
  background: linear-gradient(135deg, rgba(219, 39, 119, 0.07) 0%, rgba(0, 0, 0, 0.6) 100%);
  border: 1px solid rgba(219, 39, 119, 0.15) !important;
}

.bento-card:hover {
  background: rgba(20, 20, 22, 0.9);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -15px rgba(239, 68, 68, 0.15);
}

.break-section {
  background: radial-gradient(circle at center, rgba(220, 38, 38, 0.05) 0%, rgba(0, 0, 0, 0) 70%), #030303;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.tier-row {
  transition: all 0.3s ease;
}

.tier-row:hover {
  background: rgba(255, 255, 255, 0.03);
  transform: translateX(4px);
}