:root {
  font-family: Nunito, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #22242a;
  background: #eceef3;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  background: radial-gradient(circle at 50% -8%, rgba(90,105,245,.12), transparent 30rem), #eceef3;
}

.offer-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 80px rgba(20,28,44,.16);
}

.reward-hero {
  position: relative;
  min-height: 350px;
  padding: 20px 22px 0;
  text-align: center;
  color: #fff;
  border-radius: 0 0 16px 16px;
  background: radial-gradient(circle at 50% 110%, rgba(50,72,113,.48), transparent 48%), linear-gradient(180deg, #0b1019, #161d2a);
}

.partner-row { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 15px; }
.partner-brand { display: flex; align-items: center; gap: 7px; }
.partner-brand strong { font-size: .78rem; font-weight: 900; }
.brand-orb { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #d84dd8, #2169d4); box-shadow: 0 6px 15px rgba(111,74,221,.32); font-weight: 900; }
.partner-x { color: #758095; font-weight: 900; }
.mini-card { width: 60px; height: 31px; display: grid; place-content: center; border-radius: 6px; background: linear-gradient(125deg, #db24cd, #844ae4 50%, #17b9ed); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.mini-card span { font-size: .72rem; font-weight: 900; line-height: .85; }
.mini-card small { font-size: .31rem; font-weight: 900; letter-spacing: .1em; }

.programme-pill { width: fit-content; display: flex; align-items: center; gap: 5px; margin: 0 auto 13px; padding: 5px 10px; border-radius: 999px; color: #08111e; background: linear-gradient(90deg, #d84dd8, #50bdf0 54%, #68e6a0); font-size: .6rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.reward-hero h1 { margin: 0; font-size: clamp(1.85rem, 8vw, 2.35rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 900; }
.reward-hero h1 span { color: transparent; background: linear-gradient(90deg, #26bcec, #7a63ee 42%, #d84dd8 70%, #64e4a0); -webkit-background-clip: text; background-clip: text; }

.gift-card {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -52px;
  width: 224px;
  height: 136px;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 10px;
  text-align: left;
  padding: 4px 14px 12px 62px;
  color: #fff;
  background: linear-gradient(125deg, #db24cd, #844ae4 48%, #17b9ed);
  box-shadow: 0 22px 42px rgba(37,37,62,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.gift-card::after { content: ""; position: absolute; inset: auto 0 0; height: 14px; background: rgba(255,255,255,.9); }
.gift-card strong { position: relative; z-index: 2; display: block; font-size: 4rem; line-height: .92; font-weight: 500; letter-spacing: -.07em; }
.reward-name { position: relative; z-index: 2; display: block; font-size: 1.6rem; line-height: 1; font-weight: 900; }
.gift-card small { position: relative; z-index: 2; display: block; margin-top: 3px; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gift-orb { position: absolute; z-index: 1; display: block; border-radius: 50%; }
.gift-orb-one { width: 76px; height: 76px; left: -21px; top: 16px; background: #20bbec; }
.gift-orb-two { width: 38px; height: 38px; left: 27px; top: 49px; background: linear-gradient(135deg, #fff, #c7c9d2); }
.gift-orb-three { width: 37px; height: 37px; right: 14px; bottom: 17px; background: #9f39ef; }
.brand-note { position: absolute; z-index: 3; left: 50%; bottom: -52px; width: 224px; margin: 0; transform: translate(-50%,100%); color: #30323a; font-size: .52rem; font-weight: 700; }

.content-panel { padding: 86px 10px 25px; }
.progress-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-bottom: 22px; }
.progress-bars { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.progress-bars span { height: 5px; border-radius: 999px; background: #d8d9e1; }
.progress-bars .active { background: #2169d4; }
.progress-row p { margin: 0; color: #65666d; font-size: .78rem; }

.intro { margin-bottom: 14px; text-align: center; }
.intro h2 { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; }
.intro p { margin: 5px 0 18px; color: #777b85; font-size: .78rem; }
.primary-actions { margin-bottom: 14px; }

.steps-card { border: 1px solid #dfe2ea; border-radius: 20px; background: #f8f9fc; box-shadow: 0 12px 30px rgba(31,42,68,.07); }
.steps-card ol { list-style: none; margin: 0; padding: 8px 14px; }
.steps-card li { min-height: 64px; display: grid; grid-template-columns: 37px 1fr; gap: 11px; align-items: center; }
.steps-card li + li { border-top: 1px solid #e4e6ed; }
.step-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #d84dd8, #28b9ec 56%, #56e29a); box-shadow: 0 6px 14px rgba(33,105,212,.2); font-size: .78rem; font-weight: 900; }
.steps-card p { margin: 0; }
.steps-card strong { display: block; font-size: .88rem; font-weight: 900; }
.steps-card small { display: block; margin-top: 2px; color: #737781; font-size: .72rem; line-height: 1.25; }

.requirements { margin: 12px 7px 17px; color: #777b85; font-size: .65rem; line-height: 1.4; }
.actions { display: grid; gap: 10px; }
.secondary-actions { margin-top: 0; }
.actions button { min-height: 60px; border-radius: 999px; font: inherit; font-size: .86rem; font-weight: 900; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.actions button:hover, .actions button:focus-visible { transform: translateY(-2px); outline: none; }
.actions button:active { transform: scale(.99); }
.actions button:disabled { cursor: wait; opacity: .72; }
.primary-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255,255,255,.34); color: #fff; background: linear-gradient(105deg, #1554b5, #2169d4 48%, #6181eb); background-size: 180% 100%; box-shadow: 0 13px 27px rgba(33,105,212,.3), inset 0 1px 0 rgba(255,255,255,.34); animation: blue-breathe 3.4s ease-in-out infinite; }
.primary-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3s ease-in-out infinite; }
.primary-cta span { position: relative; z-index: 1; }
.cta-spark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: rgba(8,31,79,.72); }
.secondary-cta { border: 1px solid #d8dbe4; color: #383b43; background: #f4f5f9; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }

.status-strip { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 0 15px; border: 1px solid #dfe2ea; border-radius: 12px; color: #777b85; background: #fafbfc; font-size: .72rem; }
.status-label { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; color: #5f6470; font-weight: 800; white-space: nowrap; }
.status-label i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #3bd78a; box-shadow: 0 0 0 5px rgba(59,215,138,.1), 0 0 14px rgba(39,207,126,.5); animation: activity-dot 1.8s ease-in-out infinite; }
.status-strip strong {
  min-width: 0;
  text-align: right;
  color: transparent;
  background: linear-gradient(90deg, #15995c 0%, #20c979 38%, #15995c 72%, #3bd78a 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 7px rgba(32,201,121,.24));
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.15;
  animation: activity-flow 2.8s ease-in-out infinite;
}

footer { padding: 17px 22px 23px; text-align: center; color: #747781; background: #fbfbfd; border-top: 1px solid #f0f0f4; font-size: .61rem; line-height: 1.4; }
footer p { margin: 3px 0; }

@keyframes blue-breathe { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes shine { 0%,58% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes activity-flow { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes activity-dot { 0%,100% { opacity: .72; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }

@media (min-width: 700px) {
  body { padding: 28px 0; }
  .offer-shell { min-height: 0; border-radius: 20px; }
  .reward-hero { border-radius: 20px 20px 16px 16px; }
}

@media (max-width: 360px) {
  .reward-hero { padding-inline: 14px; }
  .reward-hero h1 { font-size: 1.75rem; }
  .status-strip { gap: 8px; padding-inline: 12px; }
  .status-strip strong { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .actions button, .primary-cta, .primary-cta::after, .status-label i, .status-strip strong { animation: none; transition: none; }
}