.hero__actions .btn { height: var(--hero-btn-h); }

.hero__card {
  color: var(--text-white);
  background: var(--indigo);
  height: clamp(43.375rem, calc(40.2875rem + 13.176vw), 46.875rem);
}
@media (min-width: 800px)  { .hero__card { height: clamp(46.875rem, calc(45.83125rem + 2.087vw), 47.5rem); } }
@media (min-width: 1280px) { .hero__card { height: clamp(47.5rem, calc(30rem + 21.875vw), 51.875rem); } }
@media (min-width: 1600px) { .hero__card { height: calc(var(--cw) * 0.546053); } }

.hero__scene {
  position: absolute; inset: 0; z-index: 0;
  isolation: isolate;

  background: var(--indigo);
}
.hero__bg {
  --bg-scale: 1.4;
  --bg-x: -3%;
  --bg-y: -8%;
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(var(--bg-x), var(--bg-y)) scale(var(--bg-scale));
}

.prism__prism_base,
.prism__cover,
.prism__triangle,
.prism__glow_long,
.prism__glow_short { mix-blend-mode: screen; }
.prism__beam_glow,
.prism__beam       { mix-blend-mode: normal; }
.hero__coin        { position: absolute; height: auto; mix-blend-mode: normal; }

.hero__prism {
  position: absolute;
}
.hero__prism > img { position: absolute; height: auto; }

  .prism__prism_base { left: 13.7984%; top: 43.5739%; width: 52.0930%; }
  .prism__beam_glow { left: 1.5000%; top: 0.0000%; width: 100.0000%; }
  .prism__beam { left: -3.0000%; top: 12.0000%; width: 100.0000%; }
  .prism__cover { left: 13.7984%; top: 43.5739%; width: 52.0930%; }
  .prism__triangle { left: 13.7984%; top: 43.5739%; width: 52.0930%; }
  .prism__glow_long { left: 20.0000%; top: 62.5000%; width: 20.0698%; }
  .prism__glow_short { left: 25.5%; top: 67.9137%; width: 10.2326%; }

@media (min-width: 1280px) {
  .hero__prism { left: clamp(22.8938rem, calc(-28.5312rem + 64.2812vw), 35.75rem); top: clamp(-57.5rem, calc(-35.75rem + -21.75vw), -53.15rem); width: clamp(74.1437rem, calc(48.2188rem + 32.4063vw), 80.625rem); height: clamp(130.588rem, calc(84.9375rem + 57.0625vw), 142rem); }
  .hero__coin { left: clamp(42.8953rem, calc(-15.5234rem + 73.0234vw), 57.5rem); top: clamp(20.5928rem, calc(12.2143rem + 10.4732vw), 22.6875rem); width: clamp(18.7371rem, calc(12.1855rem + 8.1895vw), 20.375rem); }
}

@media (min-width: 800px) and (max-width: 1279px) {
  .hero__prism { left: clamp(11.6438rem, calc(-7.14539rem + 37.5783vw), 22.8938rem); top: clamp(-53.15rem, calc(-42.6363rem + -13.1524vw), -49.2125rem); width: 74.1437rem; height: 130.588rem; }
  .hero__coin { left: clamp(31.6453rem, calc(12.8562rem + 37.5783vw), 42.8953rem); top: clamp(20.5928rem, calc(31.1065rem + -13.1524vw), 24.5303rem); width: 18.7371rem; }
}

@media (min-width: 1600px) {
  .hero__prism { left: 37.6316%; top: calc(var(--cw) * -0.605263); width: 84.8684%; height: calc(var(--cw) * 1.494737); }
  .hero__coin { left: 60.5263%; top: calc(var(--cw) * 0.238816); width: 21.4474%; }
}

.hero__content {
  position: relative;
  z-index: 10;
  height: 100%;
  align-content: start;
  grid-auto-rows: min-content;
  padding-top: var(--hero-pad-top);
}
.hero__content > * { min-width: 0; color: var(--text-white); }

.hero__preamble { grid-row: 1; grid-column: 2 / span 3; }
.hero__title    { grid-row: 2; grid-column: 2 / span 7; }
.hero__kicker   { grid-row: 3; grid-column: 3 / span 3; }
.hero__text     { grid-row: 4; grid-column: 3 / span 4; }
.hero__actions  { grid-row: 5; grid-column: 3 / span 3; }

.hero__preamble {
  font-size: var(--fs-hero-preamble);
  line-height: var(--lh-hero-preamble);
}
.hero__title {
  font-weight: 700;
  font-size: var(--fs-hero-h1);
  line-height: var(--lh-hero-h1);
  letter-spacing: 0;
  margin-top: var(--hero-gap-title);
}
.hero__title em { color: var(--accent-primary-2); }

.hero__kicker {
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-hero-kicker);
  line-height: var(--lh-hero-kicker);
  margin-top: var(--hero-gap-kicker);
}
.hero__text {
  font-size: var(--fs-hero-text);
  line-height: var(--lh-hero-text);
  margin-top: var(--hero-gap-text);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hero-btn-gap);
  margin-top: var(--hero-gap-btn);
}

.hero__actions .btn--primary { flex: 999 1 auto; min-width: 8.125rem; }

.link-verify {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hero-btn-h);
  padding-inline: 0.625rem;
  border-radius: var(--radius-btn);
  border: 0.0625rem solid transparent;
  font-weight: 500;
  font-size: var(--fs-btn1);
  line-height: 1;
  white-space: nowrap;
  transition: border-color .18s ease;
}
.link-verify:hover { border-color: var(--beige-light); }

.br-d { display: inline; }
.br-m { display: none; }

@media (min-width: 800px) and (max-width: 1279px) {
  .hero__preamble { grid-column: 2 / span 5; max-width: 19.5rem; }

  .hero__title { grid-column: 2 / span 9; }
}

@media (max-width: 999px) {
  .hero__kicker, .hero__text, .hero__actions { grid-column: 2 / span 5; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn--primary, .link-verify { width: 100%; }
}

@media (max-width: 799px) {
  .hero__card { text-align: center; }
  .hero__preamble, .hero__title { grid-column: 2 / span 10; }
  .hero__kicker, .hero__text, .hero__actions { grid-column: 2 / span 10; }
  .hero__title em { font-style: italic; }
  .br-d { display: none; }
  .br-m { display: inline; }

  .hero__prism,
  .hero__coin { display: none; }

  .hero__bg { object-fit: cover; object-position: left top; --bg-scale: 1; --bg-y: 0; }

  .hero__title em { color: inherit; }
}

.hero__coin { aspect-ratio: 326 / 328; }
.coin__face { position: absolute; inset: 0; width: 100%; height: auto; }

.coin__body { position: absolute; inset: 0; }
.coin__ghost {
  position: absolute; inset: 0;
  width: 100%; height: auto;
  opacity: 0;
  pointer-events: none;
}

.hero.is-live .hero__coin { animation: coin-enter 2.6s cubic-bezier(.22,.8,.3,1) both; }
.hero.is-live .coin__body    { animation: coin-float 9s ease-in-out 2.6s infinite; }
.hero.is-live .coin__ghost--a { animation: flash-a 2s linear 2.60s infinite; }
.hero.is-live .coin__ghost--b { animation: flash-b 2s linear 2.68s infinite; }
.hero.is-live .coin__ghost--c { animation: flash-c 2s linear 2.76s infinite; }

@keyframes coin-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(2.2%, -4.5%) rotate(6deg); }
  50%      { transform: translate(-.6%, -6.5%) rotate(-1.5deg); }
  75%      { transform: translate(-2.4%, -3.2%) rotate(-6.5deg); }
}

@keyframes flash-a {
  0%, 14%, 100% { opacity: 0; transform: translate(0, 0); }
  3.5%          { opacity: .95; transform: translate(4.5%, -2.8%); }
  8.75%         { opacity: .5;  transform: translate(2%, -1.2%); }
}
@keyframes flash-b {
  0%, 14%, 100% { opacity: 0; transform: translate(0, 0); }
  3.5%          { opacity: .9;  transform: translate(-4%, 2.5%); }
  8.75%         { opacity: .45; transform: translate(-1.8%, 1.1%); }
}
@keyframes flash-c {
  0%, 14%, 100% { opacity: 0; transform: translate(0, 0); }
  3.5%          { opacity: .85; transform: translate(1%, 4.8%); }
  8.75%         { opacity: .4;  transform: translate(.4%, 2%); }
}

@keyframes coin-enter {
  from { transform: translate(-75.4%, 160%); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: translate(0, 0); opacity: 1; }
}

@media (max-width: 799px) {
  .hero__coin { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-live .hero__coin,
  .hero.is-live .coin__body,
  .hero.is-live .coin__ghost--a,
  .hero.is-live .coin__ghost--b,
  .hero.is-live .coin__ghost--c { animation: none; }
}