.action.primary {
  animation: registerFloat 2.9s ease-in-out infinite;
}

@keyframes registerFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 12px 30px rgba(197, 43, 72, .2);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(225, 69, 96, .32), 0 0 0 1px rgba(255, 160, 177, .16);
  }
}

.action.primary:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.012);
}

.action {
  grid-template-columns: 40px 1fr;
  border-radius: 16px;
}

.action > i { display: none; }

.action.primary {
  color: #fff;
  border-color: rgba(255, 103, 126, .78);
  background: linear-gradient(145deg, #ec294e 0%, #d3153b 58%, #a9092b 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.3), 0 15px 34px rgba(177, 8, 43, .3);
}

.action.primary .action-icon {
  color: #fff;
  border-color: rgba(255,255,255,.3);
  background: rgba(105, 8, 28, .16);
}

.action.service,
.action.detail.red,
.action.detail.gold {
  color: #f8dfaa;
  border-color: rgba(213, 168, 87, .48);
  background: linear-gradient(145deg, rgba(112, 77, 28, .96), rgba(61, 40, 16, .94));
  box-shadow: inset 0 1px rgba(255, 229, 169, .1), 0 14px 28px rgba(0,0,0,.24);
}

.action.service .action-icon,
.action.detail.red .action-icon,
.action.detail.gold .action-icon {
  color: #f0cd82;
  border-color: rgba(226, 190, 111, .3);
  background: rgba(211, 163, 62, .12);
}

.action-copy b { letter-spacing: .03em; }

@media (min-width: 801px) {
  .stadium {
    top: 22px;
    bottom: auto;
    height: calc(100% - clamp(128px, 15vh, 154px));
    object-fit: contain;
    object-position: right top;
    transform: none;
    background: #030913;
  }

  .hero-content {
    align-items: stretch;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-top: clamp(28px, 5vh, 52px);
    transform: none;
  }

  .actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    gap: 14px;
    order: 2;
    margin-top: 0;
  }

  .trust-row {
    order: 1;
    margin-top: auto;
    margin-bottom: clamp(14px, 2vh, 22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .action.primary { animation: none; }
}

@media (max-width: 800px) {
  .action.primary { animation-duration: 3.2s; }

  .topbar { border-bottom: 0; }

  .eyebrow { transform: translateY(-38px); }

  /* Mobile composition: keep the athlete clear of the copy and anchor actions low. */
  .stadium {
    top: 0;
    bottom: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.02) contrast(1.05) brightness(1.02);
    transform: scale(1.3);
    transform-origin: 65% 31%;
  }

  .shade {
    background: linear-gradient(0deg, rgba(2, 8, 17, .56) 0%, rgba(2, 8, 17, .04) 62%, rgba(2, 8, 17, .2) 100%);
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .hero-copy h1 {
    width: 100%;
    align-self: stretch;
    margin: auto 0 8px;
    font-size: clamp(23px, 7vw, 30.5px);
    text-align: left;
    transform: none;
  }

  .hero-copy > p {
    font-size: clamp(9px, 2.55vw, 11.5px);
    line-height: 1.55;
  }

  .actions {
    align-self: stretch;
    margin-top: clamp(12px, 2vh, 18px);
    padding: 0 0 clamp(12px, 2vh, 18px);
  }

  .trust-row {
    flex: 0 0 auto;
    margin: 0;
  }

  .trust-row div,
  .trust-row div:first-child {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
}