.qr-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 18px; background: radial-gradient(circle at 50% 0%, #1a3650, #0b1017 48%, #05070a 100%); color: #edf1f6; }
.qr-shell { width: min(100%, 620px); }
.qr-back { display: inline-block; margin-bottom: 18px; color: #aab5c2; font-size: 13px; }
.qr-card { position: relative; overflow: hidden; padding: clamp(30px, 7vw, 64px); border: 1px solid rgba(185,198,214,.24); border-radius: 26px; text-align: center; background: linear-gradient(145deg, rgba(19,28,39,.96), rgba(7,10,14,.98)); box-shadow: 0 40px 120px rgba(0,0,0,.48); }
.qr-card:before { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; top: -210px; right: -100px; background: rgba(68,127,181,.18); filter: blur(30px); }
.qr-brand { position: relative; display: block; width: min(72%, 290px); height: auto; margin: 0 auto 24px; }
.qr-card h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(42px, 9vw, 68px); line-height: .97; letter-spacing: -.045em; font-weight: 400; }
.qr-copy { max-width: 430px; margin: 24px auto 28px; color: #aab5c2; font-size: 15px; line-height: 1.6; }
.qr-frame { width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 20px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(201,166,93,.35); }
.qr-frame img { display: block; width: 100%; height: 100%; border-radius: 8px; }
.qr-projects { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; color: #bcc6d1; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.qr-projects i { width: 4px; height: 4px; border-radius: 50%; background: #c9a65d; }
.qr-tip { text-align: center; color: #7f8a96; font-size: 12px; line-height: 1.5; margin: 18px auto 0; }

@media (max-width: 520px) {
  .qr-page { padding: 18px 14px; align-items: start; }
  .qr-card { padding: 36px 22px; border-radius: 22px; }
  .qr-frame { width: min(86vw, 330px); }
}