.nexiflow-hero {
  position: relative;

  width: 100%;
  min-height: 1350px;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  background-color: rgb(220, 238, 252);

  background-image:

    radial-gradient(
      ellipse 80% 60% at 0% 0%,
      rgba(255, 255, 255, 1) 0%,
      transparent 60%
    ),

    radial-gradient(
      ellipse 60% 40% at 100% 0%,
      rgb(253, 253, 253) 0%,
      transparent 55%
    ),

    radial-gradient(
      ellipse 50% 50% at 100% 50%,
      rgba(236, 251, 255, 0.7) 0%,
      transparent 60%
    ),

    radial-gradient(
      ellipse 60% 50% at 0% 60%,
      rgba(218, 242, 252, 0.8) 0%,
      transparent 55%
    ),

    radial-gradient(
      ellipse 70% 60% at 100% 100%,
      rgba(223, 247, 252, 0.836) 0%,
      transparent 60%
    ),

    radial-gradient(
      ellipse 80% 50% at 50% 100%,
      rgba(234, 244, 255, 0.7) 0%,
      transparent 55%
    ),

    radial-gradient(
      ellipse 45% 35% at 5% 100%,
      rgba(126, 187, 209, 0.35) 0%,
      transparent 55%
    ),

    radial-gradient(
      ellipse 35% 40% at 75% 45%,
      rgba(200, 190, 245, 0.25) 0%,
      transparent 50%
    ),

    radial-gradient(
      ellipse 90% 50% at 35% 55%,
      rgba(64, 206, 249, 0.4) 0%,
      transparent 50%
    ),

    radial-gradient(
      ellipse 60% 40% at 50% 20%,
      rgba(180, 220, 252, 0.45) 0%,
      transparent 55%
    ),

    radial-gradient(
      ellipse 40% 50% at 10% 45%,
      rgba(117, 199, 210, 0.35) 0%,
      transparent 50%
    );
}


/* ==========================================
   TOP NOTCH
========================================== */

.notch {
  position: absolute;

  top: 0;
  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  pointer-events: none;

  width: 100%;

}


/* ==========================================
   LOGO
========================================== */

.hero-logo-container {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: flex;

  align-items: center;
  justify-content: center;

  pointer-events: none;
}


.hero-logo {
  position: relative;

  margin-bottom: 800px;

  display: flex;

  align-items: center;
  justify-content: center;
}


.hero-logo-image {
  width: 1150px;

  max-width: 90vw;

  height: auto;

  object-fit: contain;
}


/* ==========================================
   LOGO OUTER GLOW
========================================== */

.hero-logo::before {
  content: "";

  position: absolute;

  inset: -80px -120px;

  background:

    radial-gradient(
      ellipse 100% 70% at 50% 50%,
      rgba(100, 180, 255, 0.6) 0%,
      transparent 60%
    ),

    radial-gradient(
      ellipse 80% 50% at 50% 50%,
      rgba(150, 100, 255, 0.5) 0%,
      transparent 50%
    ),

    radial-gradient(
      ellipse 60% 40% at 50% 50%,
      rgba(120, 200, 255, 0.4) 0%,
      transparent 40%
    );

  filter: blur(30px) brightness(1.2);

  -webkit-filter: blur(30px) brightness(1.2);

  z-index: -1;

  animation: logoGlow 3s ease-in-out infinite alternate;
}


.hero-logo::after {
  content: "";

  position: absolute;

  inset: -40px -60px;

  background:
    radial-gradient(
      ellipse 70% 50% at 50% 50%,
      rgba(200, 150, 255, 0.3) 0%,
      transparent 50%
    );

  filter: blur(15px);

  -webkit-filter: blur(15px);

  z-index: -1;

  animation: logoGlowInner 4s ease-in-out infinite alternate-reverse;
}


/* ==========================================
   CLOUDS
========================================== */

.cloud-image {
  width: 100%;

  height: auto;

  object-fit: contain;
}


.top-cloud {
  position: absolute;

  top: 100px;
  left: 72%;

  transform: translateX(-50%);

  z-index: 5;

  pointer-events: none;

  opacity: 10.65;

  filter: blur(6px);

  -webkit-filter: blur(6px);

  width: 200px;
  height: 100px;
}


.middle-cloud-left {
  position: absolute;

  top: 38%;
  left: 0;

  z-index: 5;

  pointer-events: none;

  opacity: 0.3;

  filter: blur(8px);

  -webkit-filter: blur(8px);

  animation: scrollLTR_A 28s linear infinite;
}


.middle-cloud-right {
  position: absolute;

  top: 38%;
  left: 0;

  z-index: 5;

  pointer-events: none;

  opacity: 0.2;

  filter: blur(8px);

  -webkit-filter: blur(8px);

  animation: scrollLTR_B 28s linear infinite;

  animation-delay: -14s;
}


.bottom-cloud {
  position: absolute;

  top: 65%;
  left: 0;

  z-index: 5;

  pointer-events: none;

  opacity: 0.48;

  filter: blur(10px);

  -webkit-filter: blur(10px);

  animation: scrollRTL_B 32s linear infinite;

  animation-delay: -16s;
}


/* ==========================================
   SATURN ORB
========================================== */

.saturn-orb-container {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  filter: blur(2.5px);

  flex: 1;
}


/*
  Placeholder only.

  Replace this with your actual converted
  Saturn AI Orb markup.
*/

.saturn-orb-placeholder {
  width: 1px;
  height: 1px;
}


/* ==========================================
   LOGO ANIMATIONS
========================================== */

@keyframes logoGlow {

  0% {
    opacity: 0.7;

    transform: scale(1);
  }

  100% {
    opacity: 1;

    transform: scale(1.08);
  }

}


@keyframes logoGlowInner {

  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.9;
  }

}


/* ==========================================
   CLOUD ANIMATIONS
========================================== */

@keyframes driftDown {

  0% {
    transform: translateY(-40px);
  }

  100% {
    transform: translateY(80px);
  }

}


@keyframes scrollLTR_A {

  0% {
    transform: translateX(-520px);
  }

  100% {
    transform: translateX(100vw);
  }

}


@keyframes scrollLTR_B {

  0% {
    transform: translateX(-520px);
  }

  100% {
    transform: translateX(100vw);
  }

}


@keyframes scrollRTL_A {

  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(-520px);
  }

}


@keyframes scrollRTL_B {

  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(-520px);
  }

}


/* ==========================================
   RAIN DROPS
========================================== */

@keyframes dropFall {

  0% {
    transform: translateY(0px) scaleY(1);

    opacity: 0.7;
  }

  70% {
    transform: translateY(38px) scaleY(1.3);

    opacity: 0.5;
  }

  100% {
    transform: translateY(52px) scaleY(0.4);

    opacity: 0;
  }

}


.drop {
  position: absolute;

  bottom: -4px;

  width: 3px;

  border-radius: 0 0 50% 50%;

  animation: dropFall linear infinite;

  pointer-events: none;
}


.drop-1 {
  left: 4%;
  height: 10px;
  animation-duration: 1.8s;
  animation-delay: 0s;
  background: rgba(160, 195, 235, 0.55);
}


.drop-2 {
  left: 7%;
  height: 14px;
  animation-duration: 2.3s;
  animation-delay: 0.7s;
  background: rgba(155, 190, 232, 0.5);
}


.drop-3 {
  left: 10%;
  height: 8px;
  animation-duration: 1.5s;
  animation-delay: 1.1s;
  background: rgba(165, 200, 238, 0.6);
}


.drop-4 {
  left: 14%;
  height: 12px;
  animation-duration: 2s;
  animation-delay: 0.3s;
  background: rgba(158, 193, 234, 0.5);
}


.drop-5 {
  left: 18%;
  height: 9px;
  animation-duration: 1.7s;
  animation-delay: 1.5s;
  background: rgba(162, 197, 236, 0.55);
}


.drop-6 {
  left: 22%;
  height: 13px;
  animation-duration: 2.4s;
  animation-delay: 0.9s;
  background: rgba(157, 192, 233, 0.5);
}


.drop-7 {
  left: 26%;
  height: 7px;
  animation-duration: 1.6s;
  animation-delay: 0.2s;
  background: rgba(163, 198, 237, 0.6);
}


.drop-8 {
  left: 30%;
  height: 11px;
  animation-duration: 2.1s;
  animation-delay: 1.3s;
  background: rgba(160, 195, 235, 0.55);
}


.drop-9 {
  left: 35%;
  height: 9px;
  animation-duration: 1.9s;
  animation-delay: 0.6s;
  background: rgba(156, 191, 232, 0.5);
}


.drop-10 {
  left: 39%;
  height: 13px;
  animation-duration: 2.2s;
  animation-delay: 1.8s;
  background: rgba(164, 199, 238, 0.55);
}


.drop-11 {
  left: 43%;
  height: 8px;
  animation-duration: 1.6s;
  animation-delay: 0.4s;
  background: rgba(160, 195, 235, 0.6);
}


.drop-12 {
  left: 47%;
  height: 12px;
  animation-duration: 2s;
  animation-delay: 1s;
  background: rgba(158, 193, 234, 0.5);
}


.drop-13 {
  left: 51%;
  height: 10px;
  animation-duration: 1.8s;
  animation-delay: 1.6s;
  background: rgba(162, 197, 236, 0.55);
}


.drop-14 {
  left: 55%;
  height: 14px;
  animation-duration: 2.5s;
  animation-delay: 0.1s;
  background: rgba(157, 192, 233, 0.5);
}


.drop-15 {
  left: 59%;
  height: 8px;
  animation-duration: 1.7s;
  animation-delay: 1.2s;
  background: rgba(165, 200, 238, 0.6);
}


.drop-16 {
  left: 63%;
  height: 11px;
  animation-duration: 2.1s;
  animation-delay: 0.8s;
  background: rgba(159, 194, 235, 0.55);
}


.drop-17 {
  left: 67%;
  height: 9px;
  animation-duration: 1.9s;
  animation-delay: 1.4s;
  background: rgba(161, 196, 236, 0.5);
}


.drop-18 {
  left: 71%;
  height: 13px;
  animation-duration: 2.3s;
  animation-delay: 0.5s;
  background: rgba(163, 198, 237, 0.55);
}


.drop-19 {
  left: 75%;
  height: 7px;
  animation-duration: 1.5s;
  animation-delay: 1.9s;
  background: rgba(160, 195, 235, 0.6);
}


.drop-20 {
  left: 79%;
  height: 12px;
  animation-duration: 2s;
  animation-delay: 0.3s;
  background: rgba(156, 191, 232, 0.5);
}


.drop-21 {
  left: 83%;
  height: 10px;
  animation-duration: 1.8s;
  animation-delay: 1.1s;
  background: rgba(164, 199, 238, 0.55);
}


.drop-22 {
  left: 87%;
  height: 14px;
  animation-duration: 2.4s;
  animation-delay: 0.6s;
  background: rgba(158, 193, 234, 0.5);
}


.drop-23 {
  left: 91%;
  height: 8px;
  animation-duration: 1.6s;
  animation-delay: 1.7s;
  background: rgba(162, 197, 236, 0.6);
}


.drop-24 {
  left: 95%;
  height: 11px;
  animation-duration: 2.2s;
  animation-delay: 0.2s;
  background: rgba(160, 195, 235, 0.55);
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 768px) {

  .nexiflow-hero {
    min-height: 1000px;
  }

  .hero-logo {
    margin-bottom: 600px;
  }

  .hero-logo-image {
    width: 80vw;
  }

  .top-cloud {
    left: 75%;
  }

}


@media (max-width: 480px) {

  .nexiflow-hero {
    min-height: 850px;
  }

  .hero-logo {
    margin-bottom: 500px;
  }

  .hero-logo-image {
    width: 85vw;
  }

}