/* =====================================================
   HERO
===================================================== */


.hero {
  min-height: calc(100vh - 82px);


  padding:
    8vw var(--page-padding) 7vw;


  display: grid;
  grid-template-columns: 1.05fr 0.95fr;


  align-items: center;


  gap: 4vw;
}


.hero-copy {
  max-width: 720px;
}


.hero h1 {
  font-size: clamp(45px, 6vw, 91px);
  line-height: 0.98;
  letter-spacing: -0.055em;


  margin: 24px 0;
}


.hero h1 em {
  font-style: normal;
  color: var(--accent);
}


.hero-lead {
  max-width: 590px;


  color: var(--muted);


  line-height: 1.75;
  font-size: 15px;
}


.hero-actions {
  display: flex;
  gap: 12px;


  margin-top: 30px;
}


.btn {
  padding: 14px 20px;


  border-radius: 999px;


  font-size: 15px;
  font-weight: 700;

  letter-spacing: -0.01em;


  transition: 0.25s;
}


.btn-primary {
  background: var(--accent);
  color: var(--black);
}


.btn-primary:hover {
  transform: translateY(-2px);
}


.btn-ghost {
  border: 1px solid rgba(253, 249, 250, 0.18);
}


.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}


.btn span {
  margin-left: 14px;

  font-size: 18px;
  font-weight: 700;
}



/* =====================================================
   HERO SERVICE VISUAL
===================================================== */


.hero-visual {
  height: 560px;


  position: relative;


  display: grid;
  place-items: center;
}


.core {
  width: 200px;
  height: 200px;


  border-radius: 50%;


  background:
    radial-gradient(circle,
      rgba(236, 244, 1, 0.2),
      rgba(236, 244, 1, 0.06) 22%,
      #111018 48%,
      var(--black) 72%);


  border: 1px solid rgba(236, 244, 1, 0.38);


  box-shadow:
    0 0 100px rgba(236, 244, 1, 0.12);


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


  position: relative;
  z-index: 3;


  overflow: hidden;
}


.core img {
  width: 130px;
  object-fit: contain;
}


.core-ring {
  position: absolute;


  inset: -16px;


  border:
    1px solid rgba(236, 244, 1, 0.16);


  border-radius: 50%;


  animation: pulse 3s infinite;
}


.orbit {
  position: absolute;


  border:
    1px solid rgba(253, 249, 250, 0.10);


  border-radius: 50%;
}


.orbit-one {
  width: 410px;
  height: 410px;
}


.orbit-two {
  width: 530px;
  height: 250px;


  transform: rotate(-18deg);
}


.orbit-three {
  width: 330px;
  height: 520px;


  transform: rotate(46deg);
}



/* =====================================================
   FLOATING SERVICES
===================================================== */


.service-dot {
  position: absolute;
  z-index: 4;


  display: flex;
  align-items: center;


  gap: 8px;


  font-size: 10px;
  color: var(--off-white);


  background: rgba(4, 3, 21, 0.90);


  border:
    1px solid rgba(236, 244, 1, 0.25);


  padding: 7px 10px;


  border-radius: 999px;


  box-shadow:
    0 0 25px rgba(236, 244, 1, 0.08);


  animation:
    float 5s ease-in-out infinite;


  transition: 0.25s;
}


.service-dot:hover {
  transform: scale(1.07);


  border-color:
    rgba(236, 244, 1, 0.75);


  box-shadow:
    0 0 30px rgba(236, 244, 1, 0.18);
}


.service-dot i {
  font-style: normal;
  color: var(--accent);
  font-size: 13px;
}


.dot-1 {
  top: 10%;
  left: 4%;
  animation-delay: -1s;
}


.dot-2 {
  top: 18%;
  right: 2%;
  animation-delay: -2.5s;
}


.dot-3 {
  top: 43%;
  right: -3%;
  animation-delay: -0.5s;
}


.dot-4 {
  bottom: 19%;
  right: 5%;
  animation-delay: -3s;
}


.dot-5 {
  bottom: 4%;
  left: 20%;
  animation-delay: -1.5s;
}


.dot-6 {
  bottom: 22%;
  left: -2%;
  animation-delay: -4s;
}


.dot-7 {
  top: 63%;
  left: 3%;
  animation-delay: -2s;
}


.dot-8 {
  top: 4%;
  left: 42%;
  animation-delay: -3.5s;
}


.dot-9 {
  top: 46%;
  left: 13%;
  animation-delay: -2.7s;
}



/* =====================================================
   HERO ANIMATIONS
===================================================== */


@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }


  50% {
    transform: translateY(-12px);
  }
}


@keyframes pulse {
  50% {
    transform: scale(1.08);
    opacity: 0.5;
  }
}

/* =====================================================
   HERO WORD INTRO ANIMATION
===================================================== */

.animated-hero-title .hero-word {
  position: relative;

  display: inline-block;

  color: var(--off-white);

  transition:
    color 0.45s ease,
    transform 0.45s cubic-bezier(.2, .8, .2, 1),
    text-shadow 0.45s ease;

  z-index: 1;
}


/* Word currently being highlighted */

.animated-hero-title .hero-word.hero-word-active {
  color: var(--accent);

  transform:
    translateY(-3px) scale(1.025);

  text-shadow:
    0 0 18px rgba(236, 244, 1, 0.16);
}


/* Liquid / glass movement behind active word */

.animated-hero-title .hero-word::before {
  content: "";

  position: absolute;

  left: -5px;
  right: -5px;

  top: 8%;
  bottom: 5%;

  z-index: -1;

  border-radius: 14px;

  background:
    linear-gradient(110deg,
      rgba(236, 244, 1, 0),
      rgba(236, 244, 1, 0.10),
      rgba(255, 255, 255, 0.08),
      rgba(236, 244, 1, 0.06),
      rgba(236, 244, 1, 0));

  filter:
    blur(5px);

  opacity: 0;

  transform:
    scaleX(0.65);

  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(.2, .8, .2, 1);
}


.animated-hero-title .hero-word.hero-word-active::before {
  opacity: 1;

  transform:
    scaleX(1);
}


/* Final state:
   MOVE stays yellow after animation finishes
*/

.animated-hero-title .hero-final-word.hero-word-settled {
  color: var(--accent);

  transform: none;

  text-shadow: none;
}


.animated-hero-title .hero-final-word.hero-word-settled::before {
  opacity: 0;
}