/* Big projector-safe QR screen. The QR graphic stays on solid white with a clear quiet zone. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.qrstage-page { background: #071b39; }
.qrstage {
  --stage-navy: #071b39;
  --stage-orange: #ff671d;
  --stage-pale: #b7d2f2;
  width: 100%; min-height: 100vh; min-height: 100dvh;
  height: 100vh; height: 100dvh;
  position: relative; isolation: isolate;
  color: #fff; background: var(--stage-navy);
  overflow: hidden; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.qrstage::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(95deg, #071b39 4%, #0a2951 53%, rgba(11,53,97,.86) 100%),
    url('/hero-energy.webp') right bottom / 70% auto no-repeat;
}
.qrstage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 78% 63%, rgba(20,119,195,.25), transparent 48%),
    linear-gradient(153deg, transparent 20%, rgba(24,80,145,.16) 49%, transparent 71%);
}
.qrstage-shell {
  width: min(1800px, calc(100% - clamp(34px, 7vw, 144px)));
  height: 100%; margin: 0 auto;
  padding: clamp(22px, 3vh, 38px) 0 clamp(18px, 2.4vh, 30px);
  display: flex; flex-direction: column;
}
.qrstage-top { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:50px; }
.qrstage-brand { display:flex; align-items:center; gap:14px; }
.qrstage-logomark {
  width:56px;height:56px; flex:0 0 56px; background:#fff; color:#0a3268; border:3px solid #fff;
  border-radius:14px 14px 14px 3px; display:grid; align-content:center; justify-content:center;
  line-height:.87; font-size:17px; font-weight:950; text-align:center; letter-spacing:-.07em;
  box-shadow:0 8px 35px rgba(0,0,0,.2);
}
.qrstage-logomark em { color:#ff681d; font-style:normal; }
.qrstage-brandtext { display:flex; flex-direction:column; }
.qrstage-brandtext strong { color:#fff; font-size:clamp(23px, 2.15vw, 38px); letter-spacing:-.05em; line-height:1; }
.qrstage-brandtext strong em { font-style:normal; color:#ff671d; }
.qrstage-brandtext strong span { font-weight:300; color:#dcecff; }
.qrstage-brandtext small { color:#b6ceec; font-size:clamp(9px,.85vw,13px); letter-spacing:.1em; margin-top:7px; }
.qrstage-top-tag { display:inline-block; border:1px solid rgba(183,210,242,.28); color:#b9cfee; border-radius:100px; padding:10px 15px; font-size:clamp(9px,.78vw,13px); letter-spacing:.12em; font-weight:750; margin-right:clamp(285px, 20vw, 340px); }
.qrstage-content { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(25px,3.6vw,88px); flex:1; min-height:0; }
.qrstage-message { min-width:0; }
.qrstage-kicker { font-size:clamp(11px,1vw,17px); font-weight:850; letter-spacing:.09em; color:#d3e6ff; display:flex; align-items:center; gap:12px; margin:0 0 clamp(12px,2.5vh,30px); }
.qrstage-orange-line { display:inline-block; width:5px; height:clamp(18px,2.2vh,27px); border-radius:3px; background:#ff671d; transform:skewX(-14deg); flex:0 0 5px; }
.qrstage-message h1 { font-size:clamp(36px,4.7vw,84px); font-weight:950; line-height:.99; letter-spacing:-.067em; margin:0; color:#fff; text-transform:uppercase; text-wrap:balance; }
.qrstage-message h1 em { color:#ff671d; font-style:normal; display:inline-block; margin-top:clamp(4px,.4vw,10px); }
.qrstage-subtitle { color:#e0edff; font-size:clamp(16px,1.6vw,26px); line-height:1.35; margin:clamp(17px,2.5vh,30px) 0; max-width:600px; font-weight:520; }
.qrstage-steps { display:flex; flex-direction:column; gap:clamp(8px,1.6vh,19px); margin-top:clamp(16px,3vh,35px); }
.qrstage-steps > div { display:flex; align-items:center; gap:14px; font-size:clamp(14px,1.24vw,21px); color:#d6e6ff; }
.qrstage-steps b { color:#ff7b36; font-size:clamp(14px,1.3vw,22px); font-weight:900; letter-spacing:.04em; }
.qrstage-date { display:flex; align-items:center; gap:13px; margin-top:clamp(20px,4vh,49px); }
.qrstage-date-mark { color:#ff671d; font-size:clamp(30px,3.2vw,50px); line-height:1; }
.qrstage-date span:last-child { display:flex; flex-direction:column; gap:6px; }
.qrstage-date b { font-size:clamp(11px,1vw,17px); letter-spacing:.035em; }
.qrstage-date small { color:#abc4e5; font-size:clamp(11px,.9vw,15px); }
.qrstage-code-wrap { display:flex; align-items:center; flex-direction:column; justify-content:center; min-width:0; }
.qrstage-code-card { padding:clamp(13px,1.5vw,25px); border-radius:clamp(14px,2vw,30px); background:#fff; box-shadow:0 15px 80px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.35); }
.qrstage-code-card img { display:block; width:min(67vh, 42vw, 765px); height:auto; aspect-ratio:1; object-fit:contain; background:#fff; image-rendering:pixelated; }
.qrstage-url-heading { color:#a9caee; font-weight:850; letter-spacing:.17em; font-size:clamp(10px,.92vw,16px); margin-top:clamp(12px,2vh,26px); text-align:center; }
.qrstage-url { display:block; margin-top:8px; max-width:100%; text-align:center; color:#fff; font-size:clamp(13px,1.28vw,22px); font-weight:700; overflow-wrap:anywhere; text-decoration:underline; text-decoration-color:rgba(255,255,255,.38); text-underline-offset:5px; }
.qrstage-warning { color:#ffdfb4; font-size:12px; text-align:center; max-width:450px; padding:8px 10px; margin:8px 0 0; border-radius:8px; background:rgba(124,65,0,.25); }
.qrstage-footer { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:25px; border-top:1px solid rgba(192,217,249,.2); padding-top:clamp(12px,2vh,22px); color:#bcd3ee; font-size:clamp(10px,.9vw,15px); font-weight:760; letter-spacing:.12em; }
.qrstage-footer i { font-style:normal; color:#ff671d; padding:0 5px; }
.qrstage-tools { position:absolute; z-index:6; right:clamp(15px,2.3vw,45px); top:clamp(13px,2.7vh,28px); display:flex; gap:9px; }
.qrstage-tool { color:#fff; background:rgba(5,28,58,.75); border:1px solid rgba(255,255,255,.37); backdrop-filter:blur(12px); border-radius:10px; min-height:43px; padding:11px 14px; font:700 13px/1.2 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.qrstage-tool:hover,.qrstage-tool:focus-visible { background:rgba(30,88,144,.92); }
.qrstage-tool-accent { color:#fff; background:#ff671d; border-color:#ff671d; }
.qrstage-tool-accent:hover { background:#ec5c10; }
.qrstage:fullscreen .qrstage-tools, .qrstage-overlay:fullscreen .qrstage-tools { opacity:0; pointer-events:none; }

.qrstage-overlay { position:fixed; inset:0; z-index:9999; background:#071b39; overflow:auto; }
.qrstage-overlay:fullscreen { width:100%; height:100%; }
.qrstage-overlay .qrstage-tool[hidden] { display:none; }
.qrstage-overlay .qrstage { min-height:100%; }
.qrstage-open { overflow:hidden !important; }
@media (max-width: 1010px) {
 .qrstage { height:auto; min-height:100vh; min-height:100dvh; overflow:auto; }
 .qrstage-shell { height:auto; min-height:100vh; min-height:100dvh; }
 .qrstage-top-tag { display:none; }
 .qrstage-content { grid-template-columns:1fr; gap:24px; margin:33px 0 27px; }
 .qrstage-message h1 { font-size:clamp(37px,6.3vw,69px); }
 .qrstage-message { padding-right:70px; }
 .qrstage-subtitle { max-width:none; }
 .qrstage-steps { display:none; }
 .qrstage-date { margin-top:17px; }
 .qrstage-code-card img { width:min(53vh,74vw,560px); }
 .qrstage-footer { flex-wrap:wrap; gap:10px; }
}
@media (max-width: 520px) {
 .qrstage-shell { width:calc(100% - 34px); padding:20px 0 18px; }
 .qrstage-brand { gap:9px; }
 .qrstage-logomark { width:43px;height:43px;flex-basis:43px;font-size:13px;border-radius:10px; }
 .qrstage-brandtext strong { font-size:23px; }
 .qrstage-brandtext small { font-size:8px; letter-spacing:.07em; }
 .qrstage-tools { position:static; display:flex; justify-content:center; padding:8px 15px 15px; background:#071b39; }
 .qrstage .qrstage-tools { background:none; }
 .qrstage-content { margin:24px 0 22px; gap:25px; }
 .qrstage-message { padding-right:0; }
 .qrstage-kicker { font-size:10px; }
 .qrstage-message h1 { font-size:clamp(32px,9vw,49px); letter-spacing:-.058em; }
 .qrstage-subtitle { font-size:15px; line-height:1.4; margin:13px 0; }
 .qrstage-date { display:none; }
 .qrstage-code-card { padding:12px; border-radius:17px; }
 .qrstage-code-card img { width:min(76vw,380px); }
 .qrstage-url-heading { font-size:10px; margin-top:15px; }
 .qrstage-url { font-size:13px; }
 .qrstage-footer { font-size:10px; padding:15px 0 0; }
 .qrstage-footer span:last-child { display:none; }
 .qrstage-overlay .qrstage-tools { position:absolute; right:8px; top:8px; padding:0; }
 .qrstage-overlay .qrstage-tool { font-size:11px; padding:9px; }
}
@media (max-height: 620px) and (min-width:1011px) {
 .qrstage-code-card img { width:min(61vh,42vw,765px); }
 .qrstage-message h1 { font-size:clamp(32px,4.15vw,76px); }
 .qrstage-subtitle { font-size:clamp(13px,1.3vw,20px); }
 .qrstage-steps { gap:7px; margin-top:11px; }
 .qrstage-date { margin-top:16px; }
}
@media (prefers-reduced-motion:reduce) { .qrstage-tool { transition:none; } }
