.qp-hero{
  --qp-hero-ink: #001220;
  --qp-hero-gold: var(--color-primary, #FF6F61);
  --qp-section-bg: var(--color-surface, #001220);

  position: relative;
  min-height: clamp(560px, 720px, 900px);
  display: flex;
  align-items: center;
  padding: clamp(96px, 12vh, 140px) 0 calc(clamp(72px, 9vw, 110px) + var(--qp-wave-overlap, 60px));
  background: var(--qp-section-bg);
  overflow: visible;
}

.qp-hero > .qp-section-wave{
  z-index: 6;
}

/* Full-bleed photo plane */
.qp-hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--qp-hero-ink);
  background-image: var(--qp-hero-bg);
  background-position: 68% center;
  background-size: cover;
  background-repeat: no-repeat;
}

.qp-hero__media::before{
  content: "";
  position: absolute;
  inset: -5%;
  background-image: var(--qp-hero-bg);
  background-position: 68% center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.05);
  animation: qp-hero-drift 26s ease-in-out infinite alternate;
}

@keyframes qp-hero-drift{
  from{ transform: scale(1.05) translate3d(0, 0, 0); }
  to{ transform: scale(1.1) translate3d(-2%, 1%, 0); }
}

.qp-hero__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(0, 18, 32, 0.94) 0%,
      rgba(0, 18, 32, 0.78) 34%,
      rgba(0, 18, 32, 0.28) 62%,
      rgba(199, 36, 130, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 18, 32, 0.35) 0%,
      transparent 28%,
      transparent 55%,
      rgba(0, 18, 32, 0.88) 100%
    );
}

.qp-hero__inner{
  position: relative;
  z-index: 3;
  width: 100%;
}

.qp-hero__row{
  display: flex;
  align-items: center;
  width: 100%;
  gap: clamp(24px, 4vw, 56px);
}

.qp-hero__decor{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(260px, 32vh, 400px);
  pointer-events: none;
  opacity: 0;
  animation: qp-hero-decor-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

@keyframes qp-hero-decor-in{
  from{
    opacity: 0;
    transform: scale(0.92);
    filter: blur(6px);
  }
  to{
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.qp-hero__chip-orbit{
  position: relative;
  width: clamp(280px, 36vw, 440px);
  height: clamp(260px, 34vh, 360px);
  margin: auto;
}

.qp-hero__chip,
.qp-hero__dice{
  position: absolute;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.38));
}

.qp-hero__chip{
  width: 80px;
  color: #ea4670;
  animation: qp-hero-chip-float 5.6s ease-in-out infinite;
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.34))
    drop-shadow(0 4px 10px rgba(255, 255, 255, 0.08));
}

.qp-hero__chip svg{
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.qp-hero__chip--1:nth-child(1){
  top: 2%;
  left: 42%;
  color: #ea4670;
  perspective: 520px;
}

.qp-hero__chip--1:nth-child(1) svg{
  animation: qp-hero-chip-tilt-y 4.8s ease-in-out infinite;
}

.qp-hero__chip--1:nth-child(2){
  top: 48%;
  right: 0;
  width: 72px;
  color: #FF6F61;
  animation: qp-hero-chip-float-alt 6.4s ease-in-out infinite;
  animation-delay: -1.8s;
}

.qp-hero__chip--1:nth-child(2) svg{
  animation: qp-hero-chip-spin-z 14s linear infinite reverse;
}

.qp-hero__chip--1:nth-child(3){
  bottom: 4%;
  left: 8%;
  width: 68px;
  color: #c72482;
  animation: qp-hero-chip-float 4.8s ease-in-out infinite;
  animation-delay: -3.2s;
  perspective: 480px;
}

.qp-hero__chip--1:nth-child(3) svg{
  animation: qp-hero-chip-tilt-y 6.2s ease-in-out infinite reverse;
}

.qp-hero__dice{
  width: 58px;
  filter:
    drop-shadow(0 16px 26px rgba(0, 0, 0, 0.3))
    drop-shadow(0 3px 10px rgba(255, 255, 255, 0.08));
}

.qp-hero__dice svg{
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  transform-style: preserve-3d;
}

.qp-hero__dice--1{
  top: 28%;
  left: 2%;
  animation: qp-hero-dice-float-a 6.2s ease-in-out infinite;
}

.qp-hero__dice--1 svg{
  transform: rotate(-14deg);
  animation: qp-hero-dice-rock-a 5.4s ease-in-out infinite;
}

.qp-hero__dice--2{
  bottom: 33%;
  right: 44%;
  width: 50px;
  animation: qp-hero-dice-float-b 7s ease-in-out infinite;
  animation-delay: -2.4s;
}

.qp-hero__dice--2 svg{
  transform: rotate(18deg);
  animation: qp-hero-dice-rock-b 6.8s ease-in-out infinite;
}

@keyframes qp-hero-chip-float{
  0%, 100%{
    transform: translate3d(0, 0, 0);
  }
  50%{
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes qp-hero-chip-float-alt{
  0%, 100%{
    transform: translate3d(0, 0, 0);
  }
  50%{
    transform: translate3d(-8px, -10px, 0);
  }
}

@keyframes qp-hero-chip-spin-z{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes qp-hero-chip-tilt-y{
  0%, 100%{
    transform: rotateY(-16deg);
  }
  50%{
    transform: rotateY(16deg);
  }
}

@keyframes qp-hero-dice-float-a{
  0%, 100%{
    transform: translate3d(0, 0, 0);
  }
  50%{
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes qp-hero-dice-float-b{
  0%, 100%{
    transform: translate3d(0, 0, 0);
  }
  50%{
    transform: translate3d(8px, -8px, 0);
  }
}

@keyframes qp-hero-dice-rock-a{
  0%, 100%{ transform: perspective(240px) rotateX(8deg) rotateY(-12deg) rotateZ(-14deg); }
  50%{ transform: perspective(240px) rotateX(-4deg) rotateY(10deg) rotateZ(-4deg); }
}

@keyframes qp-hero-dice-rock-b{
  0%, 100%{ transform: perspective(240px) rotateX(-6deg) rotateY(14deg) rotateZ(18deg); }
  50%{ transform: perspective(240px) rotateX(6deg) rotateY(-8deg) rotateZ(8deg); }
}

.qp-hero__content{
  position: relative;
  flex: 0 0 auto;
  width: min(790px, 100%);
  max-width: min(790px, 100%);
  padding-top: 22px;
  padding-left: 28px;
}

.qp-hero__content::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.18em;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--qp-hero-gold) 0%,
    var(--color-secondary, #c72482) 45%,
    transparent 100%
  );
  transform: scaleY(0);
  transform-origin: top;
  animation: qp-hero-bar 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.qp-hero__content::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(260px, 48vw, 520px);
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--qp-hero-gold) 0%,
    var(--color-secondary, #c72482) 45%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: left;
  animation: qp-hero-bar-x 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes qp-hero-bar{
  from{ transform: scaleY(0); }
  to{ transform: scaleY(1); }
}

@keyframes qp-hero-bar-x{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}

.qp-hero__title,
.qp-hero__description,
.qp-hero__actions{
  animation: qp-hero-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.qp-hero__title{ animation-delay: 0.28s; }
.qp-hero__description{ animation-delay: 0.48s; }
.qp-hero__actions{ animation-delay: 0.64s; }

@keyframes qp-hero-rise{
  from{
    opacity: 0;
    transform: translateY(22px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.qp-hero__title{
  margin: 0 0 18px;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: clamp(42px, 7vw, 78px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.qp-hero__title strong,
.qp-hero__title span{
  color: var(--qp-hero-gold);
  font-weight: inherit;
}

.qp-hero__description{
  margin: 0 0 1.75rem;
  max-width: 68ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.65;
}

.qp-hero__description p{
  margin: 0 0 0.75em;
}

.qp-hero__description p:last-child{
  margin-bottom: 0;
}

.qp-hero__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.qp-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 30px;
  text-decoration: none !important;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff !important;
  background: var(--qp-btn-bg, #ea4670);
  border: 2px solid transparent;
  border-radius: 0;
  box-shadow: var(--qp-btn-shadow);
}

.qp-hero__btn--ghost{
  color: #fff !important;
  background: transparent;
  border-color: rgba(255, 111, 97, 0.55);
  box-shadow: none;
  transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}

.qp-hero__btn--ghost:hover,
.qp-hero__btn--ghost:focus-visible{
  color: #fff !important;
  background: rgba(255, 111, 97, 0.12);
  border-color: var(--color-primary, #FF6F61);
  box-shadow: none;
}

.qp-hero__btn:focus-visible{
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

.qp-hero__btn-icon{
  font-size: 0.95em;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.qp-hero__btn--ghost:hover .qp-hero__btn-icon,
.qp-hero__btn--ghost:focus-visible .qp-hero__btn-icon{
  transform: translateX(5px);
}

@media (max-width: 900px){
  .qp-hero{
    min-height: clamp(520px, 88vh, 760px);
    align-items: flex-end;
    padding-top: 88px;
    padding-bottom: calc(56px + var(--qp-wave-overlap, 60px));
  }

  .qp-hero__decor{
    display: none;
  }

  .qp-hero__media,
  .qp-hero__media::before{
    background-position: center top;
  }

  .qp-hero__content{
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 767px){
  .qp-hero__title{
    font-size: clamp(36px, 11vw, 50px);
  }

  .qp-hero__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .qp-hero__btn{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .qp-hero__media::before,
  .qp-hero__content::before,
  .qp-hero__content::after,
  .qp-hero__title,
  .qp-hero__description,
  .qp-hero__actions,
  .qp-hero__decor{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .qp-hero__chip,
  .qp-hero__chip svg,
  .qp-hero__dice,
  .qp-hero__dice svg{
    animation: none !important;
  }

  .qp-hero__media::before{
    transform: none;
  }
}