@charset "UTF-8";
.home-hero, .home-proof, .home-audience, .home-steps, .home-feature-teaser, .home-values, .home-discovery, .home-final-cta {
  position: relative;
  padding: 5rem 0;
}

.home-hero {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
  padding-top: 6.5rem;
  padding-bottom: 5.5rem;
  background: radial-gradient(circle at 15% 20%, rgba(15, 139, 141, 0.12), transparent 32%), radial-gradient(circle at 85% 25%, rgba(232, 63, 121, 0.12), transparent 28%), radial-gradient(circle at 65% 80%, rgba(245, 179, 59, 0.1), transparent 34%), linear-gradient(135deg, #edf7f6 0%, #f7fbfb 45%, #fff7fa 100%);
}

.home-proof {
  padding-top: 3rem;
}

.home-hero-container {
  display: flex;
  align-items: center;
  min-height: 420px;
}

.home-hero-content {
  max-width: 760px;
}

.home-section-label {
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f8b8d;
  letter-spacing: 0;
}

.home-hero-title, .home-section-title, .home-final-cta-title {
  margin: 0;
  color: #1f2a2e;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.home-hero-title {
  max-width: 820px;
  margin-bottom: 1.35rem;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 720;
}

.home-section-title {
  margin-bottom: 0.9rem;
  font-size: clamp(1.8rem, 2.8vw, 2.75rem);
  font-weight: 670;
}

.home-final-cta-title {
  margin-bottom: 1rem;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 700;
}

.home-hero-text, .home-section-text, .home-final-cta-text, .home-card-text {
  color: #5a676d;
  line-height: 1.7;
}

.home-hero-text {
  max-width: 650px;
  margin-bottom: 1.75rem;
  font-size: 1.14rem;
}

.home-section-text {
  max-width: 760px;
  margin: 0;
  font-size: 1rem;
}

.home-final-cta-text {
  max-width: 720px;
  margin: 0 auto 1.5rem auto;
  font-size: 1.05rem;
}

.home-hero-actions, .home-discovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.home-btn-primary, .home-btn-secondary {
  min-width: 200px;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none;
}

.home-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.home-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  color: #445257;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
}

.home-card-grid {
  display: grid;
  gap: 1.5rem;
}

.home-card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-card, .home-step-card, .home-discovery-box, .home-final-cta-box {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0.5rem 1.5rem rgba(23, 40, 49, 0.05);
  backdrop-filter: blur(6px);
}

.home-card, .home-step-card {
  height: 100%;
  padding: 1.5rem;
  border-radius: 1.25rem;
}

.home-card-compact {
  min-height: 150px;
}

.home-card-title {
  margin: 0 0 0.7rem 0;
  color: #1f2a2e;
  font-size: 1.28rem;
  font-weight: 650;
  line-height: 1.25;
}

.home-card-text {
  margin: 0;
  font-size: 0.98rem;
}

.home-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2rem;
  align-items: center;
}

.home-check-list {
  display: grid;
  gap: 0.85rem;
}

.home-check-item {
  position: relative;
  padding: 0.95rem 1rem 0.95rem 2.7rem;
  border-radius: 0.9rem;
  font-size: 0.96rem;
  font-weight: 500;
  color: #3b474c;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(15, 139, 141, 0.08);
  box-shadow: none;
  line-height: 1.5;
}

.home-check-item::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f8b8d;
  background: rgba(15, 139, 141, 0.1);
}

.home-section-header {
  max-width: 820px;
  margin-bottom: 2rem;
}

.home-step-number {
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.home-step-number-primary {
  background: var(--bs-primary);
  box-shadow: 0 10px 24px rgba(207, 59, 98, 0.16);
}

.home-step-number-warning {
  background: var(--bs-warning);
  box-shadow: 0 10px 24px rgba(255, 180, 60, 0.16);
}

.home-step-number-secondary {
  background: var(--bs-secondary);
  box-shadow: 0 10px 24px rgba(4, 129, 121, 0.16);
}

.home-inline-cta {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.home-discovery-box {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: 1.5rem;
}

.home-discovery-copy {
  max-width: 720px;
}

.home-final-cta-box {
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 1.75rem;
  background: radial-gradient(circle at top left, rgba(15, 139, 141, 0.12), transparent 28%), radial-gradient(circle at center, rgba(255, 225, 177, 0.2), transparent 55%), radial-gradient(circle at bottom right, rgba(232, 63, 121, 0.1), transparent 28%), linear-gradient(135deg, #f4fbfa 0%, #fff8fb 100%);
}

@media (max-width: 1199.98px) {
  .home-hero-title {
    max-width: 760px;
  }
}
@media (max-width: 991.98px) {
  .home-hero, .home-proof, .home-audience, .home-steps, .home-feature-teaser, .home-values, .home-discovery, .home-final-cta {
    padding: 4rem 0;
  }
  .home-card-grid-3, .home-split-layout {
    grid-template-columns: 1fr;
  }
  .home-discovery-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-hero-title {
    font-size: clamp(2.2rem, 8vw, 3.4rem);
  }
}
@media (max-width: 767.98px) {
  .home-hero {
    padding-top: 4.5rem;
    padding-bottom: 4rem;
  }
  .home-hero-actions, .home-discovery-actions, .home-hero-badges {
    flex-direction: column;
    align-items: stretch;
  }
  .home-btn-primary, .home-btn-secondary {
    width: 100%;
    min-width: 0;
  }
  .home-card, .home-step-card {
    padding: 1.25rem;
  }
  .home-discovery-box, .home-final-cta-box {
    padding: 1.5rem;
  }
  .home-card-title {
    font-size: 1.16rem;
  }
  .home-hero-badge {
    justify-content: center;
  }
}
.gy-5rem {
  --bs-gutter-y: 5rem;
}

.freestyle-script {
  font-family: "Freestyle Script";
}

.cooper {
  font-family: Cooper;
}

.arial-rounded {
  font-family: "Arial Rounded MT";
}

.btn-headernav {
  text-decoration: none;
  font-size: 1.75rem;
  color: var(--bs-body-color);
  opacity: 0.6;
  transition: opacity 0.5s ease-in-out;
  font-weight: 300 !important;
  position: relative;
}

.btn-headernav::after {
  content: "";
  position: absolute;
  display: block;
  border-bottom: 3px solid var(--bs-secondary);
  border-radius: 1rem;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.btn-headernav:hover {
  color: var(--bs-body-color);
  opacity: 1;
}

.btn-headernav:hover::after {
  opacity: 1;
}

.hero-image {
  background-image: url("../images/home-hero-169.webp");
  background-size: cover;
  background-position: bottom;
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.price-old {
  justify-self: end;
  align-self: start;
  text-decoration: line-through;
  text-decoration-thickness: 0.8px;
}

.price-now {
  justify-self: center;
}

.price-right {
  justify-self: start;
  align-self: end;
}

.service-tier-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  transform-origin: center;
  box-shadow: var(--bs-box-shadow);
}

.service-tier-card:hover {
  box-shadow: var(--bs-box-shadow-lg);
  transform: scale(1.1);
  z-index: 5;
}

.feature-tooltip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  min-width: 300px;
}

.feature-tooltip p:last-child {
  margin-bottom: 0;
}

.feature-tooltip > :last-child {
  margin-bottom: 0;
}

.feature-tooltip::after {
  content: "";
  position: absolute;
  right: calc(100% - 1px);
  top: 50%;
  transform: translateY(-50%);
  border: 12px solid rgba(0, 0, 0, 0);
  border-right-color: #fff;
}

.pricing-card.showing-tooltip {
  z-index: 999;
  position: relative;
}

.payments-anim {
  aspect-ratio: 5/4;
  container-type: size;
}

.payment-invoice-icons {
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
}

.payments-anim .ball {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  display: flex;
  z-index: 10;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 28px;
  color: #d63384;
}

.payments-anim .ball .label {
  font-weight: 600;
  font-size: 18px;
  color: #d63384;
}

.payments-anim .ball i {
  font-size: 42px;
}

.ball-card {
  left: 20%;
  bottom: 0%;
}

.ball-paypal {
  left: 36%;
  bottom: 0%;
}

.ball-direct-debit {
  left: 29%;
  bottom: 18%;
}

.ball-paypal, .ball-card {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 24px rgba(214, 51, 132, 0.15);
}

@keyframes float-1 {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(0.5rem, 0.7rem, 0);
  }
  50% {
    transform: translate3d(0.2rem, 0.1rem, 0);
  }
  75% {
    transform: translate3d(-0.8rem, -0.4rem, 0);
  }
}
@keyframes float-2 {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(-0.3rem, 0.1rem, 0);
  }
  50% {
    transform: translate3d(0.2rem, -0.6rem, 0);
  }
  75% {
    transform: translate3d(-0.2rem, 0.4rem, 0);
  }
}
@keyframes float-3 {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(-0.6rem, 0.9rem, 0);
  }
  50% {
    transform: translate3d(0.3rem, 0.2rem, 0);
  }
  75% {
    transform: translate3d(-0.2rem, 0.4rem, 0);
  }
}
.float-1 {
  animation: float-1 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.float-2 {
  animation: float-2 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.float-3 {
  animation: float-3 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.ball-card.float-1 {
  animation-duration: 28.7s;
}

.ball-paypal.float-2 {
  animation-duration: 32.3s;
  animation-delay: 0.7s;
}

.ball-direct-debit.float-3 {
  animation-duration: 34.5s;
  animation-delay: 1.2s;
}

.payments-anim .doc {
  position: absolute;
  right: 4%;
  width: 30%;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  filter: saturate(0.9) contrast(1.05) blur(0.3px);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.payments-anim .doc-1 {
  bottom: 22%;
  right: 28%;
  transform: rotate(1deg);
  z-index: 5;
}

.payments-anim .doc-2 {
  bottom: 0%;
  right: 20%;
  transform: rotate(-2deg);
  z-index: 4;
}

.payments-anim .doc-3 {
  top: 30%;
  right: 0%;
  transform: rotate(-3deg);
  z-index: 3;
}

.payments-anim .doc-4 {
  top: 0%;
  right: 10%;
  transform: rotate(0deg);
  z-index: 2;
}

.swap-product, .swap-money {
  position: absolute;
  left: 0%;
  top: 0%;
  will-change: left, top, transform, opacity;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.swap-product {
  left: 24%;
  top: 30%;
  z-index: 10;
  animation-name: swapProduct_xy;
}

.swap-money {
  left: 0%;
  top: 75%;
  z-index: 10;
  animation-name: swapMoney_xy;
  font-size: 48px;
}

@keyframes swapProduct_xy {
  0% {
    left: 24%;
    top: 30%;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  36% {
    left: 24%;
    top: 30%;
    transform: translate(0, 0);
  }
  44% {
    transform: translate(6cqw, 6cqh);
  }
  52% {
    left: 0%;
    top: 75%;
    transform: translate(0, 0);
  }
  96% {
    opacity: 1;
  }
  100% {
    left: 0%;
    top: 75%;
    opacity: 0;
  }
}
@keyframes swapMoney_xy {
  0% {
    left: 0%;
    top: 75%;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  20% {
    left: 0%;
    top: 75%;
    transform: translate(0, 0);
  }
  28% {
    transform: translate(-6cqw, -6cqh);
  }
  36% {
    left: 24%;
    top: 30%;
    transform: translate(0, 0);
  }
  96% {
    opacity: 1;
  }
  100% {
    left: 24%;
    top: 30%;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .float-1, .float-2, .float-3, .swap-product, .swap-money {
    animation: none !important;
  }
}
:root {
  --variant-demo-duration: 20s;
}

.variant-demo {
  position: relative;
  overflow: visible;
}

.variant-demo .square-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.variant-demo .img-1 {
  animation: showImg1 var(--variant-demo-duration) linear infinite both;
}

.variant-demo .img-2 {
  animation: showImg2 var(--variant-demo-duration) linear infinite both;
}

.variant-demo .img-3 {
  animation: showImg3 var(--variant-demo-duration) linear infinite both;
}

.variant-demo .img-4 {
  animation: showImg4 var(--variant-demo-duration) linear infinite both;
}

.variant-demo .low-stock {
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: showStock var(--variant-demo-duration) linear infinite both;
}

.variant-demo .demo-cursor {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  font-size: 28px;
  line-height: 1;
  left: 0%;
  top: 55%;
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.5));
  animation: cursorPath var(--variant-demo-duration) ease-in-out infinite both;
}

@keyframes cursorPath {
  0%, 10% {
    left: 7%;
    top: 70%;
  }
  15%, 25% {
    left: 20%;
    top: 70%;
  }
  30%, 40% {
    left: 36%;
    top: 88%;
  }
  45%, 60% {
    left: 32%;
    top: 70%;
  }
  65%, 75% {
    left: 20%;
    top: 70%;
  }
  80%, 90% {
    left: 23%;
    top: 88%;
  }
  95%, 100% {
    left: 7%;
    top: 70%;
  }
}
@keyframes showImg1 {
  0%, 17% {
    opacity: 1;
  }
  22%, 97% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes showImg2 {
  0%, 17% {
    opacity: 0;
  }
  22%, 32% {
    opacity: 1;
  }
  37%, 82% {
    opacity: 0;
  }
  87%, 97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showImg3 {
  0%, 32% {
    opacity: 0;
  }
  37%, 47% {
    opacity: 1;
  }
  52%, 67% {
    opacity: 0;
  }
  72%, 82% {
    opacity: 1;
  }
  87%, 100% {
    opacity: 0;
  }
}
@keyframes showImg4 {
  0%, 47% {
    opacity: 0;
  }
  52%, 67% {
    opacity: 1;
  }
  72%, 100% {
    opacity: 0;
  }
}
@keyframes showStock {
  0%, 47% {
    opacity: 0;
  }
  52%, 67% {
    opacity: 1;
  }
  72%, 100% {
    opacity: 0;
  }
}
.option1 {
  color: #fff;
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  animation-name: activeOption1, hit1;
}

.option2 {
  color: var(--bs-btn-color);
  background-color: #fff;
  border-color: var(--bs-secondary);
  animation-name: activeOption2, hit2;
}

.option3 {
  color: var(--bs-btn-color);
  background-color: #fff;
  border-color: var(--bs-secondary);
  animation-name: activeOption3, hit3;
}

.option4 {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  animation-name: activeOption4, hit4;
}

.option5 {
  color: var(--bs-btn-color);
  background-color: #fff;
  border-color: var(--bs-secondary);
  animation-name: activeOption5, hit5;
}

.option1, .option2, .option3, .option4, .option5, .price1, .price2 {
  animation-duration: var(--variant-demo-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes activeOption1 {
  0%, 17% {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
  20%, 97% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
  100% {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
}
@keyframes hit1 {
  0%, 95% {
    box-shadow: none;
  }
  97% {
    box-shadow: 0 0 0 3px rgba(10, 144, 119, 0.35) inset;
  }
  100% {
    box-shadow: none;
  }
}
@keyframes activeOption2 {
  0%, 17% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
  20%, 47% {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
  50%, 67% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
  70%, 97% {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
  100% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
}
@keyframes hit2 {
  0%, 15% {
    box-shadow: none;
  }
  17% {
    box-shadow: 0 0 0 3px rgba(10, 144, 119, 0.35) inset;
  }
  20%, 65% {
    box-shadow: none;
  }
  67% {
    box-shadow: 0 0 0 3px rgba(10, 144, 119, 0.35) inset;
  }
  70%, 100% {
    box-shadow: none;
  }
}
@keyframes activeOption3 {
  0%, 47% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
  50%, 67% {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
  70%, 100% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
}
@keyframes hit3 {
  0%, 45% {
    box-shadow: none;
  }
  47% {
    box-shadow: 0 0 0 3px rgba(10, 144, 119, 0.35) inset;
  }
  50%, 100% {
    box-shadow: none;
  }
}
@keyframes activeOption4 {
  0%, 32% {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
  35%, 82% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
  85%, 100% {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
}
@keyframes hit5 {
  0%, 30% {
    box-shadow: none;
  }
  32% {
    box-shadow: 0 0 0 3px rgba(10, 144, 119, 0.35) inset;
  }
  35%, 100% {
    box-shadow: none;
  }
}
@keyframes activeOption5 {
  0%, 32% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
  35%, 82% {
    color: #fff;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }
  85%, 100% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border-color: var(--bs-secondary);
  }
}
@keyframes hit4 {
  0%, 80% {
    box-shadow: none;
  }
  82% {
    box-shadow: 0 0 0 3px rgba(10, 144, 119, 0.35) inset;
  }
  100% {
    box-shadow: none;
  }
}
@keyframes price1 {
  0%, 30% {
    opacity: 1;
  }
  35%, 80% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}
@keyframes price2 {
  0%, 30% {
    opacity: 0;
  }
  35%, 80% {
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
.price1 {
  animation-name: price1;
}

.price2 {
  animation-name: price2;
}

.voucher1 {
  filter: drop-shadow(0rem 0rem 1rem rgba(0, 0, 0, 0.15));
  animation-name: voucher1;
}

.voucher2 {
  filter: drop-shadow(0.5rem 0rem 1rem rgba(0, 0, 0, 0.15));
  animation-name: voucher2;
}

.discount-ribbon {
  top: 0;
  left: 0;
  animation-name: discountRibbon;
}

.voucher-price1 {
  opacity: 0;
  top: 70%;
  left: -7%;
  animation-name: voucherPrice2;
}

.voucher-price2 {
  top: 70%;
  left: -7%;
  animation-name: voucherPrice1;
}

.discount-ribbon, .voucher-price1, .voucher-price2, .voucher1, .voucher2 {
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes voucher1 {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(10rem) rotate(0);
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
    transform: translateX(0) translateY(0rem) rotate(0);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes voucher2 {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(10rem) rotate(0);
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
    transform: translateX(0) translateY(0rem) rotate(0);
  }
  40% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(1rem) rotate(10deg);
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(1rem) rotate(10deg);
    opacity: 0;
  }
}
@keyframes voucherPrice1 {
  0%, 60% {
    opacity: 0;
  }
  75%, 95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes voucherPrice2 {
  0%, 60% {
    opacity: 1;
  }
  75%, 95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes discountRibbon {
  0%, 50% {
    transform: scale(2);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  60%, 95% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.query {
  --chars: 13;
  font-family: Consolas;
  font-variant-ligatures: none;
}

@keyframes swapQueryInput {
  0%, 33% {
    content: attr(data-1);
  }
  34%, 66% {
    content: attr(data-2);
  }
  67%, 100% {
    content: attr(data-3);
  }
}
.query::after {
  content: attr(data-1);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(3px);
  width: 0;
  background: linear-gradient(currentColor 0 0) right 50%/2px 1.2em no-repeat;
  animation: typing steps(var(--chars)) 10s infinite, caret 1s steps(1) infinite 0.3s, swapQueryInput 30s infinite steps(1);
}

.bubble {
  position: absolute;
  width: 10rem;
  height: 10rem;
  z-index: 10;
  justify-items: center;
  translate: 0 0;
  opacity: 0;
  scale: 0.85;
  animation: pop1 30s ease-out infinite;
}

.b1 {
  top: 2%;
  left: 20%;
}

.b2 {
  top: 6%;
  right: 13%;
  animation-delay: -0.05s;
}

.b3 {
  bottom: 4%;
  left: 10%;
  animation-delay: -0.15s;
}

.b4 {
  bottom: 0%;
  right: 22%;
  animation-delay: -0.2s;
}

.b5 {
  top: 3%;
  left: 17%;
  animation-name: pop2;
}

.b6 {
  top: 4%;
  right: 10%;
  animation-delay: -0.05s;
  animation-name: pop2;
}

.b7 {
  bottom: 2%;
  left: 12%;
  animation-delay: -0.15s;
  animation-name: pop2;
}

.b8 {
  bottom: 3%;
  right: 15%;
  animation-delay: -0.2s;
  animation-name: pop2;
}

.b9 {
  top: -2%;
  left: 17%;
  animation-name: pop3;
}

.b10 {
  top: 1%;
  right: 17%;
  animation-delay: -0.05s;
  animation-name: pop3;
}

.b11 {
  bottom: 0%;
  left: 9%;
  animation-delay: -0.15s;
  animation-name: pop3;
}

.b12 {
  bottom: 5%;
  right: 23%;
  animation-delay: -0.2s;
  animation-name: pop3;
}

.ai-search-demo {
  top: 50%;
  left: 50%;
  width: 60cqw;
  pointer-events: none;
}

@keyframes typing {
  0%, 10% {
    width: 0;
  }
  50%, 95% {
    width: calc(var(--chars) * 1ch);
  }
  100% {
    width: 0;
  }
}
@keyframes caret {
  50% {
    background-size: 0 1.2em;
  }
}
@keyframes pop1 {
  0%, 19% {
    opacity: 0;
    scale: 0.85;
    filter: blur(3px);
  }
  20% {
    opacity: 1;
    scale: 1.02;
  }
  21%, 33% {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
  34%, 100% {
    opacity: 0;
    scale: 0.85;
  }
}
@keyframes pop2 {
  0%, 52% {
    opacity: 0;
    scale: 0.85;
    filter: blur(3px);
  }
  53% {
    opacity: 1;
    scale: 1.02;
  }
  54%, 66% {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
  67%, 100% {
    opacity: 0;
    scale: 0.85;
  }
}
@keyframes pop3 {
  0%, 85% {
    opacity: 0;
    scale: 0.85;
    filter: blur(3px);
  }
  86% {
    opacity: 1;
    scale: 1.02;
  }
  87%, 99% {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    scale: 0.85;
  }
}
.ai-search-btn {
  color: var(--bs-btn-color);
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  animation-name: searchActive, searchHit;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes searchActive {
  0%, 52% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
  }
  55%, 95% {
    color: #fff;
    background-color: var(--bs-secondary);
    border: 1px solid var(--bs-border-color);
  }
  100% {
    color: var(--bs-btn-color);
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
  }
}
@keyframes searchHit {
  0%, 50% {
    box-shadow: none;
  }
  52% {
    box-shadow: 0 0 0 3px rgba(10, 144, 119, 0.35) inset;
  }
  100% {
    box-shadow: none;
  }
}
:root {
  --ms-green: var(--bs-secondary);
  --ms-green-rgb: var(--bs-secondary-rgb);
  --ms-pink: var(--bs-primary);
  --ms-pink-rgb: var(--bs-primary-rgb);
  --ms-yellow: var(--bs-warning);
  --ms-yellow-rgb: var(--bs-warning-rgb);
  --ink-grid: rgba(255,255,255,.1);
}

.chart-rt {
  position: relative;
  height: 100%;
  container-type: size;
}

.chart-rt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-repeat: repeat-x;
  background-position: 0 -40cqh;
  animation: slideA 12s linear infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='240' viewBox='0 0 600 240'>  <defs>    <linearGradient id='g' x1='0' y1='0' x2='0' y2='1'>      <stop offset='0%'  stop-color='rgba(4,129,121,0.30)'/>      <stop offset='100%' stop-color='rgba(4,129,121,0.00)'/>    </linearGradient>  </defs>        <path d='M0 240 L0 168            C 30 146 78 154 110 168            C 150 186 182 172 210 168            C 252 162 286 182 310 168            C 340 150 382 152 410 168            C 446 190 468 178 510 168            C 540 160 570 190 600 168            L600 240 Z' fill='url(%23g)'/> <path d='M0 168            C 30 146 78 154 110 168            C 150 186 182 172 210 168            C 252 162 286 182 310 168            C 340 150 382 152 410 168            C 446 190 468 178 510 168            C 540 160 570 190 600 168'  fill='none' stroke='%23048179' stroke-width='3' stroke-linecap='butt' stroke-linejoin='round'/> </svg>");
}

.chart-rt::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-position: 0 15cqh;
  animation: slideB 32s linear infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='240' viewBox='0 0 600 240'>  <defs>    <linearGradient id='g2' x1='0' y1='0' x2='0' y2='1'>      <stop offset='0%'  stop-color='rgba(207,59,98,0.30)'/>      <stop offset='100%' stop-color='rgba(207,59,98,0.00)'/>    </linearGradient>  </defs>  <path d='M0 240 L0 176            C 28 162 74 158 100 176            C 140 200 168 186 200 176            C 236 166 274 170 300 176            C 332 188 368 210 400 176            C 440 150 476 162 500 176            C 540 196 572 190 600 176            L600 240 Z' fill='url(%23g2)'/>  <!-- Stroke on top (pink). Edge handles mirrored: first (28,162) ↔ last (572,190) -->  <path d='M0 176            C 28 162 74 158 100 176            C 140 200 168 186 200 176            C 236 166 274 170 300 176            C 332 188 368 210 400 176            C 440 150 476 162 500 176            C 540 196 572 190 600 176'         fill='none' stroke='%23CF3B62' stroke-width='3' stroke-linecap='butt' stroke-linejoin='round'/></svg>");
}

.chart-rt .chart-rt-c {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-position: 0 -15cqh;
  animation: slideC 18s linear infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='240' viewBox='0 0 600 240'>  <defs>    <linearGradient id='g3' x1='0' y1='0' x2='0' y2='1'>      <stop offset='0%'  stop-color='rgba(255,180,60,0.30)'/>      <stop offset='100%' stop-color='rgba(255,180,60,0.00)'/>    </linearGradient>  </defs>        <path d='M0 240 L0 184            C 35 168 70 170 100 184            C 140 202 178 176 210 184            C 246 198 282 210 300 184            C 332 160 368 170 400 184            C 438 198 472 206 500 184            C 530 166 565 200 600 184            L600 240 Z' fill='url(%23g3)'/> <path d='M0 184            C 35 168 70 170 100 184            C 140 202 178 176 210 184            C 246 198 282 210 300 184            C 332 160 368 170 400 184            C 438 198 472 206 500 184            C 530 166 565 200 600 184'  fill='none' stroke='%23FFB43C' stroke-width='3' stroke-linecap='butt' stroke-linejoin='round'/> </svg>");
}

@keyframes slideB {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -600px;
  }
}
@keyframes slideC {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -600px;
  }
}
@keyframes slideA {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -600px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chart-rt::before, .chart-rt::after, .chart-rt .chart-rt-c .live-dot {
    animation: none;
  }
}
.bar-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #545b66;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ms-pink);
  box-shadow: 0 0 0 0 rgba(255, 79, 163, 0.55);
  animation-name: barColor, pulse;
  animation-duration: 18s, 1.5s;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, infinite;
  animation-delay: -0.2s;
}

.bar-graph {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.bar {
  position: relative;
  width: 50px;
  height: 100%;
}

.bar-a {
  animation-name: barColor, barAheights;
  animation-duration: 18s, 18s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: -0.4s;
}

.bar-b {
  animation-name: barColor, barBheights;
  animation-duration: 18s, 18s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: -0.3s;
}

.bar-c {
  animation-name: barColor, barCheights;
  animation-duration: 18s, 18s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: -0.2s;
}

.bar-d {
  animation-name: barColor, barDheights;
  animation-duration: 18s, 18s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-delay: -0.1s;
}

.bar-e {
  animation-name: barColor, barEheights;
  animation-duration: 18s, 18s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  transform-origin: 0% 100%;
  transform: scaleY(0);
}

@keyframes barColor {
  0%, 28% {
    background: var(--ms-pink);
    --current-color-rgb: var(--ms-pink-rgb);
  }
  33%, 61% {
    background: var(--ms-yellow);
    --current-color-rgb: var(--ms-yellow-rgb);
  }
  66%, 95% {
    background: var(--ms-green);
    --current-color-rgb: var(--ms-green-rgb);
  }
  100% {
    background: var(--ms-pink);
    --current-color-rgb: var(--ms-pink-rgb);
  }
}
@keyframes barAheights {
  0%, 28% {
    transform: scaleY(0.62);
  }
  33%, 61% {
    transform: scaleY(0.72);
  }
  66%, 95% {
    transform: scaleY(0.58);
  }
  100% {
    transform: scaleY(0.62);
  }
}
@keyframes barBheights {
  0%, 28% {
    transform: scaleY(0.56);
  }
  33%, 61% {
    transform: scaleY(0.49);
  }
  66%, 95% {
    transform: scaleY(0.66);
  }
  100% {
    transform: scaleY(0.56);
  }
}
@keyframes barCheights {
  0%, 28% {
    transform: scaleY(0.64);
  }
  33%, 61% {
    transform: scaleY(0.66);
  }
  66%, 95% {
    transform: scaleY(0.77);
  }
  100% {
    transform: scaleY(0.64);
  }
}
@keyframes barDheights {
  0%, 28% {
    transform: scaleY(0.76);
  }
  33%, 61% {
    transform: scaleY(0.47);
  }
  66%, 95% {
    transform: scaleY(0.88);
  }
  100% {
    transform: scaleY(0.76);
  }
}
@keyframes barEheights {
  0%, 28% {
    transform: scaleY(0.84);
  }
  33%, 61% {
    transform: scaleY(0.35);
  }
  66%, 95% {
    transform: scaleY(0.95);
  }
  100% {
    transform: scaleY(0.84);
  }
}
.state-label::after {
  content: "Verkäufe";
  animation: swapLabel 18s linear infinite;
  animation-delay: -0.2s;
}

@keyframes swapLabel {
  0%, 28% {
    content: "Verkäufe";
    opacity: 1;
  }
  30% {
    content: "Verkäufe";
    opacity: 0;
  }
  31% {
    content: "Offene Bestellungen";
    opacity: 0;
  }
  33%, 61% {
    content: "Offene Bestellungen";
    opacity: 1;
  }
  63% {
    content: "Offene Bestellungen";
    opacity: 0;
  }
  64% {
    content: "Umsatz";
    opacity: 0;
  }
  66%, 95% {
    content: "Umsatz";
    opacity: 1;
  }
  97% {
    content: "Umsatz";
    opacity: 0;
  }
  98% {
    content: "Verkäufe";
    opacity: 0;
  }
  100% {
    content: "Verkäufe";
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--current-color-rgb), 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(var(--current-color-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--current-color-rgb), 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fill, .live-dot, .state-label::after {
    animation: none !important;
  }
}
.shake-soft {
  animation: shake-soft 0.45s ease-in-out infinite;
}

.shake-hard {
  animation: shake-hard 0.28s linear infinite;
}

.rtto:hover > .bi-rocket-takeoff {
  animation: shake-soft 0.45s ease-in-out infinite;
}

.rtto-lg:hover > .bi-rocket-takeoff {
  animation: shake-hard 0.45s linear infinite;
}

@keyframes shake-soft {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0.6px, 0.4px) rotate(-0.25deg);
  }
  50% {
    transform: translate(0.6px, -0.4px) rotate(0.25deg);
  }
  75% {
    transform: translate(0.4px, 0.2px) rotate(-0.15deg);
  }
}
@keyframes shake-hard {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(0.5px, 0.5px) rotate(-0.6deg);
  }
  40% {
    transform: translate(-0.6px, -0.7px) rotate(0.5deg);
  }
  60% {
    transform: translate(0.5px, 0.6px) rotate(-0.5deg);
  }
  80% {
    transform: translate(-0.3px, -0.6px) rotate(0.4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rocket-wrap, .flame, .smoke span {
    animation: none !important;
  }
}
.rocket-flight {
  animation: rocketFlight 16s ease-in infinite;
}

@keyframes rocketFlight {
  0% {
    transform: translate(-80cqw, 100cqh) scale(1.2) rotate(0deg);
  }
  40%, 50%, 100% {
    transform: translate(100cqw, -100cqh) scale(0.4) rotate(0deg);
  }
}

/*# sourceMappingURL=WebCore.css.map */