.qr-hero-page { background: #f5f9ff; color: #071a3b; overflow-x: clip; }
.qr-hero-page .info-shell { width: 100%; max-width: none; margin: 0; padding: 0; }
.qr-hero-page .info-navbar { position: absolute; z-index: 20; top: 24px; left: 50%; width: min(calc(100% - 48px), 1420px); margin: 0; transform: translateX(-50%); box-shadow: 0 18px 60px rgba(26,61,112,.1); }
.qr-hero-page main { margin: 0; }
.qr-hero { position: relative; width: 100%; min-height: 0; height: auto; aspect-ratio: 1672 / 941; overflow: hidden; background: #f5f9ff; }
.qr-hero::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(249,252,255,.88) 0%, rgba(249,252,255,.42) 34%, transparent 52%); }
.qr-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.qr-hero__inner { position: relative; z-index: 2; width: min(calc(100% - 72px), 1320px); height: 100%; margin: 0 auto; display: flex; align-items: center; padding-top: 104px; }
.qr-hero__copy { width: min(43%, 590px); }
.qr-hero__eyebrow { margin: 0 0 24px; color: #1e6de9; font: 800 13px/1.2 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.qr-hero h1 { max-width: 620px; margin: 0; color: #071a3b; font-family: Georgia, "Times New Roman", serif; font-size: clamp(56px, 5vw, 82px); font-weight: 500; letter-spacing: -.05em; line-height: .96; }
.qr-hero h1 em { display: block; color: #236fe9; font-style: normal; }
.qr-hero__lead { max-width: 520px; margin: 28px 0 0; color: #5d6e88; font-size: 18px; line-height: 1.7; }

.qr-journey { position: relative; padding: 96px 0 118px; background: #f5f9ff; }
.qr-journey__inner { width: min(calc(100% - 72px), 1480px); margin: 0 auto; }
.qr-journey__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.qr-journey__eyebrow { margin: 0 0 20px; color: #1267eb; font: 800 13px/1.2 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.qr-journey h2 { max-width: 1180px; margin: 0; color: #071a3b; font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 4vw, 64px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.qr-journey h2 em { color: #1267eb; font-style: normal; }
.qr-journey__motto { flex: 0 0 auto; margin: 0 12px 13px 0; color: #183967; font: 700 12px/1.5 Arial, sans-serif; letter-spacing: .28em; text-transform: uppercase; }
.qr-journey__motto span { color: #2171ef; }
.qr-journey__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 280px 140px 140px; gap: 28px 30px; }
.qr-flow-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #d9e7f8; border-radius: 16px; box-shadow: 0 22px 60px rgba(24,66,124,.08); }
.qr-flow-card h3 { margin: 0; color: #071a3b; font-family: Georgia, "Times New Roman", serif; font-size: 31px; font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.qr-flow-card__number { margin: 0 0 22px; color: #071a3b; font-family: Georgia, "Times New Roman", serif; font-size: 34px; line-height: 1; text-transform: uppercase; }
.qr-flow-card__number span { color: #1870ef; font-size: 22px; }
.qr-flow-card__number::after { content: ""; display: inline-block; width: 30px; height: 1px; margin: 0 0 7px 14px; background: #1870ef; }
.qr-flow-card__aside { margin: 0; color: #6680a4; font: 700 10px/1.65 Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.qr-flow-card__topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.qr-flow-card--scan { grid-column: 1 / 8; grid-row: 1 / 3; min-height: 448px; background: #061f47; border-color: #0e376d; color: #fff; }
.qr-flow-card--scan > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.qr-flow-card__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,28,64,.98) 0%, rgba(5,28,64,.92) 38%, rgba(5,28,64,.28) 68%, rgba(5,28,64,.04) 100%); }
.qr-flow-card__content { position: relative; z-index: 2; width: 48%; height: 100%; padding: 42px 38px; }
.qr-flow-card--scan .qr-flow-card__number,
.qr-flow-card--scan h3 { color: #fff; }
.qr-flow-card--scan h3 { font-size: 33px; }
.qr-scan-list { display: grid; gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.qr-scan-list li { display: flex; align-items: center; gap: 14px; color: #dce9fb; font: 500 14px/1.35 Arial, sans-serif; }
.qr-scan-list svg { width: 25px; height: 25px; flex: 0 0 auto; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.qr-flow-card--progress { grid-column: 8 / 13; grid-row: 1; padding: 34px 36px 30px; background: #fff; }
.qr-flow-card--progress .qr-flow-card__number { margin-bottom: 18px; }
.qr-flow-card--progress h3 { font-family: Arial, sans-serif; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.qr-progress { position: relative; display: flex; justify-content: space-between; gap: 8px; margin: 34px 0 0; padding: 0; list-style: none; }
.qr-progress::before { content: ""; position: absolute; top: 18px; right: 5%; left: 5%; height: 2px; background: linear-gradient(90deg, #3382f4 0 68%, #c7dcf6 68% 100%); }
.qr-progress li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 9px; min-width: 48px; color: #567091; font: 500 11px/1.25 Arial, sans-serif; text-align: center; }
.qr-progress li > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1.5px solid #70a9f4; border-radius: 50%; background: #f7fbff; color: #1667dc; font-weight: 700; }
.qr-progress li.is-complete > span { border-color: #2e7ff2; background: #2e7ff2; color: #fff; box-shadow: 0 8px 18px rgba(46,127,242,.28); }

.qr-flow-card--access { grid-column: 1 / 8; grid-row: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 26px 34px; background: #fff; }
.qr-flow-card--access h3 { font-family: Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.qr-flow-card--access p:not(.qr-flow-card__aside) { margin: 8px 0 0; color: #6680a4; font: 500 13px/1.45 Arial, sans-serif; }
.qr-device-set { display: flex; align-items: flex-end; gap: 9px; padding-right: 27px; border-right: 1px solid #92baf2; }
.qr-device-set svg { width: 34px; height: 34px; fill: none; stroke: #071a3b; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qr-device-set svg:last-child { width: 52px; }

.qr-flow-card--reward { grid-column: 8 / 13; grid-row: 2 / 4; padding: 30px 34px; background: #eaf5ff; border-color: #bfdcff; }
.qr-flow-card--reward .qr-flow-card__number { margin-bottom: 13px; }
.qr-flow-card--reward h3 { max-width: 360px; font-family: Arial, sans-serif; font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.qr-reward-body { display: grid; grid-template-columns: .78fr .8fr 1.2fr; align-items: center; gap: 18px; min-height: 165px; margin-top: 14px; }
.qr-reward-body > p { margin: 0; color: #49688f; font: 500 13px/1.55 Arial, sans-serif; }
.qr-reward-body > img { width: 148px; max-width: 100%; height: auto; justify-self: center; filter: drop-shadow(0 16px 18px rgba(22,67,124,.12)); }
.qr-reward-ticket { position: relative; display: grid; min-height: 134px; align-content: center; padding: 20px 46px 20px 24px; border: 1px solid #bdd7fa; border-radius: 14px; background: rgba(255,255,255,.8); box-shadow: 0 14px 34px rgba(29,89,161,.08); }
.qr-reward-ticket__icon { display: grid; width: 32px; height: 32px; margin-bottom: 6px; place-items: center; border-radius: 50%; background: #e5f1ff; }
.qr-reward-ticket__icon svg { width: 18px; height: 18px; fill: none; stroke: #0d3b77; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qr-reward-ticket small { color: #6581a8; font: 600 10px/1.2 Arial, sans-serif; }
.qr-reward-ticket strong { margin-top: 7px; color: #071a3b; font: 500 21px/1.08 Georgia, "Times New Roman", serif; }
.qr-reward-ticket__arrow { position: absolute; top: 50%; right: 16px; color: #0b3b78; font: 300 34px/1 Arial, sans-serif; transform: translateY(-50%); }

.qr-connector { position: absolute; z-index: 5; display: block; pointer-events: none; }
.qr-connector::before,
.qr-connector::after { content: ""; position: absolute; border-radius: 50%; background: #176bed; }
.qr-connector--right { top: 48px; right: -31px; width: 31px; height: 2px; background: #176bed; }
.qr-connector--right::before { top: -5px; left: -6px; width: 12px; height: 12px; }
.qr-connector--right::after { top: -5px; right: -6px; width: 12px; height: 12px; }
.qr-connector--down { bottom: -29px; left: 50%; width: 2px; height: 29px; background: #176bed; transform: translateX(-50%); }
.qr-connector--down::before { top: -5px; left: -5px; width: 12px; height: 12px; }
.qr-connector--down::after { bottom: -5px; left: -5px; width: 12px; height: 12px; }
@media (max-width: 1080px) {
  .qr-hero-page .info-navbar { top: 18px; width: calc(100% - 36px); }
  .qr-hero__inner { width: calc(100% - 48px); }
  .qr-hero__copy { width: 49%; }
  .qr-hero h1 { font-size: clamp(50px, 6vw, 68px); }
  .qr-journey__inner { width: calc(100% - 48px); }
  .qr-journey__grid { grid-template-rows: 270px 132px 132px; gap: 24px; }
  .qr-flow-card__content { width: 53%; padding: 34px 28px; }
  .qr-flow-card--scan h3 { font-size: 29px; }
  .qr-flow-card--progress { padding: 28px 26px; }
  .qr-flow-card--progress h3 { font-size: 19px; }
  .qr-progress { margin-top: 27px; }
  .qr-progress li { min-width: 36px; font-size: 10px; }
  .qr-progress li > span { width: 33px; height: 33px; }
  .qr-flow-card--access { gap: 18px; padding: 22px 25px; }
  .qr-flow-card--access .qr-flow-card__aside { display: none; }
  .qr-flow-card--reward { padding: 26px; }
  .qr-reward-body { grid-template-columns: .8fr .75fr 1.15fr; gap: 10px; }
  .qr-reward-body > img { width: 124px; }
}
@media (max-width: 820px) {
  .qr-hero-page .info-navbar { top: 14px; width: calc(100% - 28px); }
  .qr-hero { min-height: 0; height: auto; aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; }
  .qr-hero::after { display: none; }
  .qr-hero__inner { order: 1; width: 100%; height: auto; padding: 132px 24px 52px; background: #f8fbff; }
  .qr-hero__copy { width: 100%; max-width: 620px; }
  .qr-hero h1 { font-size: clamp(46px, 10vw, 62px); }
  .qr-hero__lead { max-width: 590px; font-size: 17px; }
  .qr-hero__media { position: relative; order: 2; inset: auto; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; object-position: center; }
  .qr-journey { padding: 72px 0 84px; }
  .qr-journey__inner { width: calc(100% - 32px); }
  .qr-journey__header { display: block; margin-bottom: 34px; }
  .qr-journey h2 { font-size: clamp(42px, 9vw, 58px); }
  .qr-journey__motto { margin: 24px 0 0; }
  .qr-journey__grid { display: flex; flex-direction: column; gap: 18px; }
  .qr-flow-card--scan { min-height: 430px; }
  .qr-flow-card__content { width: 58%; }
  .qr-flow-card--progress { min-height: 280px; }
  .qr-flow-card--reward { min-height: 300px; }
  .qr-flow-card--access { min-height: 140px; order: 4; }
  .qr-flow-card--reward { order: 3; }
  .qr-connector { display: none; }
}
@media (max-width: 560px) {
  .qr-hero__inner { padding: 120px 18px 42px; }
  .qr-hero__eyebrow { font-size: 11px; }
  .qr-hero h1 { font-size: 44px; }
  .qr-hero__lead { line-height: 1.62; }
  .qr-hero__media { aspect-ratio: 1672 / 941; object-position: center; }
  .qr-journey { padding: 58px 0 70px; }
  .qr-journey__inner { width: calc(100% - 24px); }
  .qr-journey__eyebrow { font-size: 11px; }
  .qr-journey h2 { font-size: 42px; }
  .qr-journey__motto { font-size: 10px; }
  .qr-flow-card { border-radius: 14px; }
  .qr-flow-card--scan { min-height: 520px; }
  .qr-flow-card--scan > img { object-position: 66% center; }
  .qr-flow-card__shade { background: linear-gradient(180deg, rgba(5,28,64,.96) 0%, rgba(5,28,64,.84) 48%, rgba(5,28,64,.12) 79%, rgba(5,28,64,.02) 100%); }
  .qr-flow-card__content { width: 100%; height: auto; padding: 28px 24px; }
  .qr-flow-card--scan h3 { font-size: 28px; }
  .qr-scan-list { gap: 13px; margin-top: 25px; }
  .qr-flow-card--progress { min-height: 270px; padding: 27px 22px; }
  .qr-flow-card__aside { display: none; }
  .qr-progress { gap: 3px; margin-top: 38px; }
  .qr-progress::before { top: 16px; }
  .qr-progress li { min-width: 0; width: 16.66%; font-size: 9px; }
  .qr-progress li > span { width: 32px; height: 32px; }
  .qr-flow-card--reward { min-height: 430px; padding: 27px 22px; }
  .qr-reward-body { grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .qr-reward-body > p { grid-column: 1; }
  .qr-reward-body > img { grid-column: 2; width: 128px; }
  .qr-reward-ticket { grid-column: 1 / -1; min-height: 118px; }
  .qr-flow-card--access { grid-template-columns: auto 1fr; gap: 18px; min-height: 156px; padding: 24px 20px; }
  .qr-flow-card--access h3 { font-size: 17px; }
  .qr-device-set { gap: 4px; padding-right: 15px; }
  .qr-device-set svg { width: 26px; height: 26px; }
  .qr-device-set svg:last-child { width: 38px; }
}
@media (prefers-reduced-motion: reduce) { .qr-hero-page *, .qr-hero-page *::before, .qr-hero-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }