:root {
  --promo-bar: oklch(43% .13 25);
  --promo-card: oklch(19% .028 25);
  --promo-coral: oklch(72% .18 35);
  --promo-gold-light: oklch(82% .07 66);
  --promo-gold: oklch(65% .09 68);
  --promo-green: oklch(64% .17 143);
  --promo-ink: oklch(18% .015 25);
  --promo-muted: oklch(80% .016 43);
  --promo-red-dark: oklch(31% .08 25);
  --promo-red: oklch(43% .135 25);
  --promo-text: oklch(98% .016 56);
}

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--promo-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: inherit; }
ul { list-style: none; }
h1 { font-size: inherit; font-weight: inherit; }

.promo-page {
  width: 100%;
  min-height: 100vh;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  background: var(--promo-ink);
  color: var(--promo-text);
  text-align: center;
}
.promo-bar {
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(90deg, var(--promo-red-dark), var(--promo-bar));
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
}
.promo-bar::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--promo-gold-light);
}
.promo-card {
  width: calc(100% - 32px);
  max-width: 480px;
  margin: 20px auto 0;
  padding: 32px 22px 36px;
  border: 1.5px solid var(--promo-gold);
  border-radius: 36px;
  background: linear-gradient(180deg, var(--promo-red-dark), var(--promo-card) 40%);
}
.promo-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  margin: 0 auto 26px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--promo-ink);
  box-shadow: 0 0 40px color-mix(in oklab, var(--promo-red) 32%, transparent);
}
.promo-logo img { width: 100%; height: 100%; object-fit: cover; }
.promo-kicker {
  margin: 0 0 22px;
  color: var(--promo-gold-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.promo-card h1 {
  margin: 0 0 22px;
  color: var(--promo-text);
  font-size: clamp(2.1rem, 10vw, 2.9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.promo-card h1 span { display: block; color: var(--promo-coral); }
.promo-lead { margin: 0 0 28px; color: var(--promo-muted); font-size: 1.1rem; line-height: 1.6; }
.promo-lead strong { color: var(--promo-text); font-weight: bolder; }
.promo-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 16px;
  border: 1.5px solid color-mix(in oklab, var(--promo-green) 78%, var(--promo-text));
  border-radius: 22px;
  background: var(--promo-green);
  box-shadow: 0 10px 30px color-mix(in oklab, var(--promo-green) 25%, transparent);
  color: var(--promo-text);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .15s, filter .15s;
}
.promo-cta:hover { filter: brightness(1.08); }
.promo-cta:active { transform: scale(.98); }
.promo-cta:focus-visible { outline: 3px solid var(--promo-text); outline-offset: 3px; }
.promo-cta svg { flex: none; width: 34px; height: 34px; }
.promo-live {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0;
  padding: 14px 26px;
  border: 1px solid color-mix(in oklab, var(--promo-muted) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--promo-ink) 88%, transparent);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.promo-live i { width: 12px; height: 12px; border-radius: 999px; background: oklch(80% .22 149); }
.promo-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.promo-tags li {
  padding: 12px 18px;
  border: 1px solid color-mix(in oklab, var(--promo-muted) 27%, transparent);
  border-radius: 14px;
  font-size: 1.02rem;
}
.promo-footer { color: color-mix(in oklab, var(--promo-muted) 65%, transparent); font-size: .9rem; }
.promo-footer p:first-child { margin: 28px 0 8px; }
.promo-footer p:last-child { margin: 0; text-decoration: underline; }

@media (width <= 390px) {
  .promo-card { padding-inline: 18px; border-radius: 30px; }
  .promo-logo { width: 176px; height: 176px; }
  .promo-cta { font-size: .95rem; }
  .promo-live { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-cta { transition: none; }
}