.page--home {
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  padding-top: clamp(100px, 12vh, 150px);
}

.home-decoration {
  position: absolute;
  top: 0px;
  left: 60px;
  pointer-events: none;
  z-index: 5;
  display: inline-block;
}

.home-decoration__gif {
  width: auto;
  height: auto;
  opacity: 0.1;
  transform-origin: top left;
  display: block;
  animation: floatDecorationGif 3s ease-in-out infinite;
}

.home-decoration__png {
  width: auto;
  height: auto;
  opacity: 0.1;
  display: block;
  margin-top: -60px;
  animation: floatDecorationPng 4s ease-in-out infinite;
}

@keyframes floatDecorationGif {
  0%, 100% {
    transform: translateX(100px) translateY(0) scale(1.1) rotate(45deg);
  }
  50% {
    transform: translateX(100px) translateY(-20px) scale(1.1) rotate(45deg);
  }
}

@keyframes floatDecorationPng {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.home-scroll-banner {
  position: absolute;
  bottom: 100px;
  left: -10%;
  width: 120%;
  height: 80px;
  overflow: hidden;
  transform: rotate(-5deg);
  pointer-events: none;
  z-index: 15;
  background: #ffb300;
  display: flex;
  align-items: center;
}

.home-scroll-track {
  display: flex;
  gap: 40px;
  animation: scrollBanner 20s linear infinite;
  white-space: nowrap;
}

.home-scroll-text {
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 700;
  color: #000000;
  opacity: 1;
  letter-spacing: 0.2em;
  font-family: 'Libre Baskerville', serif;
}

@keyframes scrollBanner {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.home-floating-banana {
  position: absolute;
  top: -150px;
  right: 100px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 10;
  animation: floatBanana 8s ease-in-out infinite;
}

.floating-banana-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.5;
}

@keyframes floatBanana {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, calc(50vh + 75px));
  }
  70% {
    transform: translate(calc(-100vw - 300px), calc(50vh + 75px));
  }
  100% {
    transform: translate(calc(-100vw - 300px), calc(50vh + 75px));
  }
}

.home-body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 8vw, 100px);
  width: 100%;
  max-width: 1400px;
}

.home-content {
  flex: 2;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.home-title {
  font-size: clamp(36px, 6vw, 64px);
  margin: 0;
  line-height: 1.2;
}

.home-tagline {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin: 0;
  opacity: 0.9;
}

.home-description {
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
  opacity: 0.85;
}

.home-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.home-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-width: 2px !important;
  padding: 12px 20px !important;
  box-shadow: 0 8px 0 rgba(47, 42, 30, 0.5) !important;
}

.home-download-btn:hover {
  box-shadow: 0 10px 0 rgba(47, 42, 30, 0.55) !important;
}

.home-download-icon {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.home-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-app-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(47, 42, 30, 0.3));
  transition: transform var(--duration-medium) var(--easing-primary);
}

.home-app-image:hover {
  transform: translateY(-8px) scale(1.02);
}

@media (max-width: 1100px) {
  .home-container {
    gap: 40px;
  }

  .home-content {
    max-width: 500px;
  }

  .home-media {
    max-width: 450px;
  }
}

@media (max-width: 900px) {
  .page--home {
    padding-top: calc(70px + clamp(48px, 10vw, 100px));
    justify-content: flex-start;
  }

  .home-decoration {
    display: none;
  }

  .home-floating-banana {
    display: none;
  }

  .home-container {
    flex-direction: column;
    gap: 48px;
  }

  .home-content {
    text-align: center;
    max-width: 100%;
  }

  .home-actions {
    justify-content: center;
  }

  .home-media {
    max-width: 300px;
  }

  .home-app-image {
    max-width: 100%;
  }

  .home-scroll-banner {
    bottom: 40px;
    height: 60px;
  }

  .home-scroll-text {
    font-size: clamp(18px, 3vw, 32px);
  }
}

@media (max-width: 640px) {
  .home-actions {
    flex-direction: column;
    width: 100%;
  }

  .home-actions .primary-button,
  .home-actions .ghost-button {
    width: 100%;
  }
}