<section class="hs-mar" aria-label="Hero">
  <div class="hs-mar-track hs-mar-r" aria-hidden="true">
    <span
      >EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
    </span>
    <span
      >EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
    </span>
  </div>
  <div class="hs-mar-inner">
    <h2>Drop 04. <em>Tuesday 11am EST.</em></h2>
    <p>72 pieces. No restock. No back-orders. No DM begging.</p>
    <a class="hs-mar-cta" href="#join">Set the alarm</a>
  </div>
  <div class="hs-mar-track hs-mar-l" aria-hidden="true">
    <span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
    <span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
  </div>
</section>

.hs-mar {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; min-height: 480px;
  padding: 0;
  background: #2a1410;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffe4d6;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout paint;
}
.hs-mar-track {
  display: flex; gap: 32px;
  white-space: nowrap; overflow: hidden;
  padding: 18px 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 900;
  font-style: italic; letter-spacing: -0.01em;
  background: #f04e23; color: #2a1410;
  border-block: 4px solid #2a1410;
}
.hs-mar-track span { animation: hs-mar-roll 22s linear infinite; flex-shrink: 0; }
.hs-mar-r span { animation-direction: normal; }
.hs-mar-l { background: #2a1410; color: #f04e23; border-color: #f04e23; }
.hs-mar-l span { animation-direction: reverse; }
@keyframes hs-mar-roll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.hs-mar-inner {
  flex: 1;
  display: grid; place-items: center;
  padding: clamp(24px, 4vw, 56px);
  text-align: center;
}
.hs-mar h2 {
  margin: 0 0 14px;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.05;
  color: #ffe4d6;
}
.hs-mar h2 em { color: #f5b148; font-style: italic; }
.hs-mar p { margin: 0 auto 22px; font-size: 16px; color: #c8a899; max-width: 460px; line-height: 1.55; }
.hs-mar-cta {
  display: inline-block; padding: 13px 28px;
  background: #f5b148; color: #2a1410;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 14.5px; letter-spacing: 0.04em;
  transition: background 0.15s;
}
.hs-mar-cta:hover { background: #ffe4d6; }
@media (prefers-reduced-motion: reduce) {
  .hs-mar-track span { animation: none; }
  .hs-mar-cta { transition: none; }
}