/* ==================================
   HERO MOCKUP PREMIUM UPGRADE
================================== */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(0,214,143,.12), transparent 32%),
    radial-gradient(circle at 15% 75%, rgba(0,214,143,.06), transparent 25%),
    radial-gradient(circle at 85% 72%, rgba(0,214,143,.05), transparent 22%),
    var(--bg);
}

.hero-copy {
  position: relative;
  z-index: 5;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 55px;
}

.hero-title {
  font-size: clamp(54px, 7vw, 92px);
  line-height: .98;
  letter-spacing: -4px;
  margin-bottom: 22px;
}

.hero-sub {
  max-width: 640px;
  margin: 0 auto 34px;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(240,250,245,.65);
}

.hero-btns {
  gap: 14px;
  margin-bottom: 24px;
}

.btn-em,
.btn-ghost {
  min-height: 54px;
  padding: 0 30px;
  border-radius: 12px;
}

.btn-em {
  box-shadow:
    0 16px 42px rgba(0,214,143,.22),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.btn-em:hover {
  transform: translateY(-3px);
}

.btn-ghost {
  backdrop-filter: blur(14px);
}

.hero-stage {
  position: relative;
  z-index: 4;
  max-width: 1180px;
  margin: 10px auto 0;
  perspective: 1200px;
}

.stage-floor {
  transform: rotateX(14deg);
  transform-origin: top center;
  transition: .35s ease;
}

.stage-floor:hover {
  transform: rotateX(9deg);
}

.app-card {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,214,143,.18);
  box-shadow:
    0 80px 160px rgba(0,0,0,.72),
    0 0 100px rgba(0,214,143,.11),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.float-card {
  border-radius: 18px;
  padding: 15px 18px;
  min-width: 170px;
  background: rgba(4,31,17,.86);
  border: 1px solid rgba(0,214,143,.22);
  backdrop-filter: blur(24px);
  box-shadow:
    0 20px 48px rgba(0,0,0,.45),
    0 0 36px rgba(0,214,143,.08);
}

.sf-left {
  position: absolute;
  left: -40px;
  top: 30px;
  animation: floatLeft 5s ease-in-out infinite;
}

.sf-right {
  position: absolute;
  right: -42px;
  top: 18px;
  animation: floatRight 5.6s ease-in-out infinite;
}

@keyframes floatLeft {
  0%,100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-14px) rotate(1deg);
  }
}

@keyframes floatRight {
  0%,100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-12px) rotate(-1deg);
  }
}

.app-card {
  animation: revealCard .9s ease both;
}

@keyframes revealCard {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {

  .hero {
    padding-top: 120px !important;
  }

  .hero-title {
    font-size: 44px;
    letter-spacing: -2px;
    line-height: 1.05;
  }

  .hero-sub {
    font-size: 15px;
    max-width: 94%;
  }

  .stage-floor {
    transform: rotateX(7deg);
  }

  .stage-floats {
    display: none;
  }
}