/* HERO SECTION */

.hero {
  position: relative;

  padding-top: clamp(220px, 14vw, 280px);

  overflow: visible;
}

/* HERO CONTENT */

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 80px;
}

/* HERO TEXT */

.hero-text {
  flex: 0 1 52%;

  width: 100%;
  max-width: 900px;
}

/* HERO BADGE */

.hero-badge {
  display: inline-flex;
  align-items: center;

  padding: 10px 18px;

  margin-bottom: 28px;

  border-radius: 999px;

  background: var(--primary-soft);

  border: 1px solid var(--primary-glow-soft);

  color: var(--primary);

  font-size: 0.75rem;
  font-weight: 700;

  letter-spacing: 1px;
}

/* HERO TITLE */

.hero h1 {
  margin-bottom: 2px;

  min-height: 4.4em;

  font-size:
    clamp(2.5rem, 6vw, 5rem);

  max-width: 22ch;

  line-height: 1.05;

  color: var(--text);
}

/* HERO DESCRIPTION */

.hero-description {
  max-width: 560px;

  margin-bottom: 42px;

  font-size: 1.15rem;

  line-height: 1.8;
}

/* HERO BUTTONS */

.hero-buttons {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-bottom: 42px;
}

/* HERO RATING */

.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;

  margin-top: 2rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem 1rem;

  background: var(--white);
  border: 1px solid var(--border);

  border-radius: 999px;

  text-decoration: none;
  color: inherit;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.hero-rating:hover {
  transform: translateY(-2px);

  border-color: var(--primary-border);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.06);
}

.hero-rating-stars {
  color: #fbbf24;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 1px;
}

.hero-rating-text strong {
  display: block;
  font-size: 0.95rem;
}

.hero-rating-text p {
  font-size: 0.8rem;
  opacity: 0.75;
}

.hero-rating:active {
  transform: translateY(0);
}

/* HERO AVATARS */

.hero-avatars {
  display: flex;
}

.hero-avatars img {
  width: 42px;
  height: 42px;

  margin-left: -10px;

  border: 3px solid var(--white);
  border-radius: 50%;
}

.hero-avatars img:first-child {
  margin-left: 0;
}

/* HERO VISUAL */

.hero-visual {
  position: relative;

  display: flex;
  flex-direction: column;
  flex: 0 1 48%;
  align-items: center;

  gap: 24px;
}

.hero-rating {
  margin-top: 8px;

  display: inline-flex;
  align-items: center;
  gap: 0.75rem;

  padding: 0.75rem 1rem;

  border-radius: 999px;

  background: var(--white);
  border: 1px solid var(--border);

  text-decoration: none;

  transition: transform .2s ease;
}

.hero-rating:hover {
  transform: translateY(-2px);
}

/* DESKTOP MOCKUP */

.desktop-mockup {
  max-width: 900px;

  overflow: hidden;

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-lg);

  transform:
    perspective(1400px)
    rotateY(-8deg)
    rotateX(2deg);
}

.desktop-mockup img {
  width: 100%;
}

/* HERO GLOW */

.hero-glow {
  position: absolute;

  width: 400px;
  height: 400px;

  background: var(--primary-glow-soft);

  border-radius: 50%;

  filter: blur(var(--blur-glow-lg));

  z-index: -1;

  animation:
    glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {

  0% {
    opacity: 0.5;

    transform: scale(1);
  }

  50% {
    opacity: 0.9;

    transform: scale(1.15);
  }

  100% {
    opacity: 0.5;

    transform: scale(1);
  }

}

/* FLOATING ANIMATIONS */

.desktop-mockup {
  animation:
    floatDesktop 6s ease-in-out infinite;
}

/* DESKTOP FLOAT */

@keyframes floatDesktop {

  0% {
    transform:
      perspective(1400px)
      rotateY(-8deg)
      rotateX(2deg)
      translateY(0px);
  }

  50% {
    transform:
      perspective(1400px)
      rotateY(-8deg)
      rotateX(2deg)
      translateY(-18px);
  }

  100% {
    transform:
      perspective(1400px)
      rotateY(-8deg)
      rotateX(2deg)
      translateY(0px);
  }

}

/* MOBILE FLOAT */

@keyframes floatMobile {

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

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

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

}