@media (min-width: 768px) and (max-width: 991px) {
  .zptable table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-break: break-word !important;
  }
}

@media (max-width: 768px) {
  .zptable {
    overflow-x: hidden !important;
  }
  .zptable table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-break: break-word !important;
  }
}

.gradient-shift {
  /* keep original text properties */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  color: inherit;

  /* animated gradient behind text */
  background: radial-gradient(circle at 20% 30%, #FDC00A, transparent 45%),
              radial-gradient(circle at 80% 25%, #212DF1, transparent 50%);
  background-blend-mode: overlay;
  background-size: 140% 140%;
  animation: shiftFlow 10s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  filter: blur(0); /* default no blur */
}

/* animate background positions and blur only on key frames */
@keyframes shiftFlow {
  0% {
    background-position: 0% 0%, 100% 100%;
    filter: blur(0); /* no blur */
  }
  20% {
    background-position: 50% 100%, 0% 50%;
    filter: blur(1.5px); /* slight blur when dominant color near text */
  }
  40% {
    background-position: 100% 50%, 0% 100%;
    filter: blur(0); /* back to no blur */
  }
  60% {
    background-position: 50% 0%, 100% 50%;
    filter: blur(1.5px); /* slight blur again */
  }
  80% {
    background-position: 0% 100%, 100% 0%;
    filter: blur(0); /* no blur */
  }
  100% {
    background-position: 0% 0%, 100% 100%;
    filter: blur(0); /* reset */
  }
}


/* Apply this class to your table */
.float-table {
  animation: gentleFloat 3s ease-in-out infinite;
  transform-origin: center;
}

/* Smooth floating up and down */
@keyframes gentleFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px); /* gentle upward float */
  }
  100% {
    transform: translateY(0);
  }
}

/* ✨ Subtle line-by-line text reveal */
.line-reveal {
  display: inline-block;
  overflow: hidden;
}

.line-reveal span {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  animation: lineFadeIn 1s ease-out forwards;
}

/* Animate each line with a small delay */
.line-reveal span:nth-child(1) { animation-delay: 0.8s; }
.line-reveal span:nth-child(2) { animation-delay: 1.8s; }
.line-reveal span:nth-child(3) { animation-delay: 2s; }
.line-reveal span:nth-child(4) { animation-delay: 2.1s; }
.line-reveal span:nth-child(5) { animation-delay: 2.4s; }

/* Keyframes for reveal */
@keyframes lineFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth tilt effect container */
.tilt-section {
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
  perspective: 1000px;
}

/* Optional subtle shadow to enhance the 3D feel */
.tilt-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 70%);
  transition: opacity 0.3s;
  opacity: 0;
}

.tilt-section:hover::after {
  opacity: 1;
}



.block-two {
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.block-one:hover ~ .block-two,
.block-one:focus-within ~ .block-two {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.block-one:hover,
.block-one:focus-within {
  filter: brightness(1.2);
  transition: filter .3s ease;
}

.block-two::after {
  content: "";
  display: block;
  width: 0%;
  height: 2px;
  background: currentColor;
  margin-top: 4px;
  transition: width .4s ease .1s;
}

.block-one:hover ~ .block-two::after,
.block-one:focus-within ~ .block-two::after {
  width: 100%;
}


.css-distorted-blob {
  width: 300px;
  height: 300px;
  border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
  animation: blobMorph 10s cubic-bezier(0.57,0.06,1,0.84) infinite;
  background: radial-gradient(ellipse at 73% 73%, #73e3ff 41%, #c88cff 65%, #63f1a9 94%, #1a254480 100%);
  box-shadow: 0 7px 20px rgba(60,40,130,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 30px auto;
  overflow: hidden;
  transition: filter 0.9s;
}

@keyframes blobMorph {
  0% {
    border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
    background: radial-gradient(ellipse at 73% 73%, #73e3ff 41%, #c88cff 65%, #63f1a9 94%, #1a254480 100%);
  }
  20% {
    border-radius: 58% 42% 57% 43% / 56% 58% 40% 62%;
    background: radial-gradient(ellipse at 70% 75%, #83eaff 42%, #b484f1 64%, #57eec1 92%, #23326a82 100%);
  }
  40% {
    border-radius: 55% 45% 58% 42% / 61% 59% 43% 49%;
    background: radial-gradient(ellipse at 68% 78%, #63dfee 41%, #e2b0fc 66%, #79f1e2 93%, #2f254f92 100%);
  }
  60% {
    border-radius: 59% 41% 56% 44% / 58% 63% 37% 56%;
    background: radial-gradient(ellipse at 69% 70%, #97e2ff 41%, #bd92fa 65%, #76f2e1 91%, #23346a75 100%);
  }
  80% {
    border-radius: 61% 39% 54% 46% / 58% 61% 39% 58%;
    background: radial-gradient(ellipse at 71% 73%, #73e3ff 41%, #c88cff 65%, #63f1a9 94%, #1a254480 100%);
  }
  100% {
    border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
    background: radial-gradient(ellipse at 73% 73%, #73e3ff 41%, #c88cff 65%, #63f1a9 94%, #1a254480 100%);
  }
}




.css-blob-rainbowfire {
  width: 300px;
  height: 300px;
  border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
  animation: blobMorphRF 10s cubic-bezier(0.57,0.06,1,0.84) infinite;
  background: radial-gradient(ellipse at 70% 80%, #ff4141 50%, #58fd4e 76%, #ffe15b 86%, #224bf5 100%, #000 110%);
  box-shadow: 0 7px 20px rgba(60,40,130,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 32px auto;
  overflow: hidden;
  transition: filter 0.9s;
}

@keyframes blobMorphRF {
  0% {
    border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
    background: radial-gradient(ellipse at 70% 80%, #ff4141 50%, #58fd4e 76%, #ffe15b 86%, #224bf5 100%, #000 110%);
  }
  20% {
    border-radius: 58% 42% 57% 43% / 56% 58% 40% 62%;
    background: radial-gradient(ellipse at 67% 81%, #fe2324 50%, #40ee56 75%, #ffe37b 89%, #2c5df2 100%, #060617 110%);
  }
  40% {
    border-radius: 55% 45% 58% 42% / 61% 59% 43% 49%;
    background: radial-gradient(ellipse at 60% 88%, #fc3932 52%, #6bf165 78%, #fff095 88%, #184ac6 100%, #13131c 110%);
  }
  60% {
    border-radius: 59% 41% 56% 44% / 58% 63% 37% 56%;
    background: radial-gradient(ellipse at 68% 80%, #ff4141 48%, #42fe73 81%, #fcdd4d 91%, #2565ff 100%, #000 110%);
  }
  80% {
    border-radius: 61% 39% 54% 46% / 58% 61% 39% 58%;
    background: radial-gradient(ellipse at 77% 92%, #fc3932 52%, #58fd4e 76%, #ffe15b 86%, #224bf5 100%, #000 110%);
  }
  100% {
    border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
    background: radial-gradient(ellipse at 70% 80%, #ff4141 50%, #58fd4e 76%, #ffe15b 86%, #224bf5 100%, #000 110%);
  }
}

@keyframes blobWobble {
  0%   { transform: scale(1,1); }
  40%  { transform: scale(0.99,1.01) rotate(-2deg); }
  60%  { transform: scale(1.01,0.99) rotate(2deg); }
  100% { transform: scale(1,1); }
}

.css-blob-rainbowfire h2,
.css-blob-rainbowfire span,
.css-blob-rainbowfire .blob-text {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 38px;
  font-weight: bold;
  letter-spacing: -1.5px;
  z-index: 2;
  text-shadow: 0 2px 12px #181e3088;
  margin: 0;
  width: 100%;
  text-align: center;
  user-select: none;
  pointer-events: none;
}


.css-blob-lightaurora {
  width: 300px;
  height: 300px;
  border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
  animation: blobMorphLA 10s cubic-bezier(0.57,0.06,1,0.84) infinite;
  background: radial-gradient(ellipse at 82% 21%, #ffe366 16%, #ff9020 36%, #e545f5 49%, #3f60ff 72%, #1e2242 95%, #52ffae 101%);
  box-shadow: 0 7px 20px rgba(60,40,130,0.13), 0 0 0 4px #52ffae30;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 32px auto;
  overflow: hidden;
  transition: filter 0.9s;
}

@keyframes blobMorphLA {
  0% {
    border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
    background: radial-gradient(ellipse at 82% 21%, #ffe366 16%, #ff9020 36%, #e545f5 49%, #3f60ff 72%, #1e2242 95%, #52ffae 101%);
  }
  20% {
    border-radius: 58% 42% 57% 43% / 56% 63% 40% 62%;
    background: radial-gradient(ellipse at 85% 28%, #fff391 19%, #ffae51 39%, #dc6df4 54%, #6354d8 67%, #222145 94%, #41ffab 104%);
  }
  40% {
    border-radius: 55% 45% 58% 42% / 61% 59% 43% 49%;
    background: radial-gradient(ellipse at 75% 19%, #fec33e 22%, #ff6503 38%, #b041df 50%, #4246dd 80%, #2d2d54 97%, #8dffc6 107%);
  }
  60% {
    border-radius: 59% 41% 56% 44% / 58% 63% 37% 56%;
    background: radial-gradient(ellipse at 78% 22%, #fff888 20%, #ff7e16 37%, #ee6ff0 51%, #3b49ff 70%, #211f44 94%, #52ffae 101%);
  }
  80% {
    border-radius: 61% 39% 54% 46% / 58% 61% 39% 58%;
    background: radial-gradient(ellipse at 86% 24%, #ffe366 16%, #ff9020 36%, #e545f5 49%, #3f60ff 72%, #1e2242 95%, #52ffae 101%);
  }
  100% {
    border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
    background: radial-gradient(ellipse at 82% 21%, #ffe366 16%, #ff9020 36%, #e545f5 49%, #3f60ff 72%, #1e2242 95%, #52ffae 101%);
  }
}

.css-blob-lightaurora h2,
.css-blob-lightaurora span,
.css-blob-lightaurora .blob-text {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 38px;
  font-weight: bold;
  letter-spacing: -1.5px;
  z-index: 2;
  text-shadow: 0 2px 12px #181e3088;
  margin: 0;
  width: 100%;
  text-align: center;
  user-select: none;
  pointer-events: none;
}



.css-blob-gentlefade {
  width: 340px;
  height: 340px;
  border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
  animation: blobMorphGF 16s cubic-bezier(0.67,0.17,0.33,0.83) infinite;
  background: radial-gradient(ellipse at 28% 72%, #fdc689 6%, #c8fcea 31%, #6afdcf 74%, #18e7b4 94%, #A6FFD6 100%);
  box-shadow: 0 7px 20px 0px rgba(60,40,130,0.11);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 32px auto;
  overflow: hidden;
  transition: filter 1.8s;
}

@keyframes blobMorphGF {
  0% {
    border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
    background: radial-gradient(ellipse at 28% 72%, #fdc689 6%, #c8fcea 31%, #6afdcf 74%, #18e7b4 94%, #A6FFD6 100%);
  }
  16% {
    border-radius: 59% 41% 57% 43% / 53% 64% 39% 61%;
    background: radial-gradient(ellipse at 34% 67%, #ffe1bb 13%, #6df2b8 38%, #3dfdb9 81%, #bcfdc7 97%, #eafdda 100%);
  }
  32% {
    border-radius: 61% 39% 49% 51% / 47% 59% 49% 53%;
    background: radial-gradient(ellipse at 29% 75%, #ffe493 7%, #cff7e6 41%, #82ffc7 68%, #37e8bd 95%, #f6fff6 100%);
  }
  48% {
    border-radius: 55% 47% 53% 58% / 60% 53% 44% 59%;
    background: radial-gradient(ellipse at 36% 69%, #ffd19e 12%, #c1ffe2 35%, #5cf6b2 77%, #17f3aa 98%, #e9ffeb 100%);
  }
  64% {
    border-radius: 56% 44% 57% 43% / 51% 63% 37% 57%;
    background: radial-gradient(ellipse at 31% 73%, #ffe1bc 15%, #bbffe8 39%, #79ffde 67%, #21f3a3 92%, #caffef 100%);
  }
  80% {
    border-radius: 58% 42% 54% 46% / 58% 61% 39% 58%;
    background: radial-gradient(ellipse at 28% 70%, #fdc689 6%, #c8fcea 31%, #6afdcf 74%, #18e7b4 94%, #A6FFD6 100%);
  }
  100% {
    border-radius: 60% 40% 55% 45% / 54% 62% 38% 46%;
    background: radial-gradient(ellipse at 28% 72%, #fdc689 6%, #c8fcea 31%, #6afdcf 74%, #18e7b4 94%, #A6FFD6 100%);
  }
}

.css-blob-gentlefade h2,
.css-blob-gentlefade span,
.css-blob-gentlefade .blob-text {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 38px;
  font-weight: bold;
  letter-spacing: -1.5px;
  z-index: 2;
  text-shadow: 0 2px 12px #181e3088;
  margin: 0;
  width: 100%;
  text-align: center;
  user-select: none;
  pointer-events: none;
}



.button-block {
    position: relative;
}

.button-block::after {
    content: "Launching soon ☺";
    font-family: Arial;
    font-size: 16px;
    color: #ffffff;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.button-block:hover::after,
.button-block:active::after {
    opacity: 1;
}



.ee-premium-text {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(
    130deg,
    #F4C87E 0%,
    #CD9140 20%,
    #A16726 45%,
    #663915 70%,
    #27150B 100%
  );
  background-size: 400% 400%;
  animation: eeTextShift 9s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  display: inline-block;
  filter: contrast(1.35) brightness(1.35);
}

@keyframes eeTextShift {
  0%   { background-position: 0% 40% }
  35%  { background-position: 80% 60% }
  70%  { background-position: 20% 80% }
  100% { background-position: 0% 40% }
}