*, *::before, *::after {
 box-sizing: border-box;
}

body {
 margin: 0;
 padding: 0;
 width: 100%;
 min-height: 100vh;
 font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
 color: #fff;
}

.wrap {
 width: 100%;
 min-height: 100vh;
 background: url("/static/images/background.jpg") center/cover no-repeat fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 40px 20px;
}

.content-card {
 width: 100%;
 max-width: 960px;
 background: rgba(0, 0, 0, 0.6);
 border-radius: 16px;
 padding: 40px 32px;
 backdrop-filter: blur(4px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.company-name {
 margin: 0;
 font-size: 32px;
 letter-spacing: 1px;
 text-align: center;
}

.cta {
 display: flex;
 flex-direction: column;
 gap: 18px;
 align-items: center;
}

.cta-message {
 margin: 0;
 font-size: 18px;
 line-height: 1.8;
 text-align: center;
}

.screenshot-button {
 padding: 12px 28px;
 border: none;
 border-radius: 10px;
 background: linear-gradient(135deg, #6fd3ff, #3a8dff);
 color: #0f1c3f;
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 box-shadow: 0 12px 24px rgba(58, 141, 255, 0.35);
}

.screenshot-button:hover,
.screenshot-button:focus-visible {
 transform: translateY(-2px);
 box-shadow: 0 16px 28px rgba(58, 141, 255, 0.45);
 background: linear-gradient(135deg, #83ddff, #4c9aff);
 outline: none;
}

.screenshot-button:active {
 transform: translateY(0);
 box-shadow: 0 8px 18px rgba(58, 141, 255, 0.4);
}

.contact-list {
 display: flex;
 justify-content: center;
 gap: 16px 28px;
 font-size: 16px;
}

.contact-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 18px;
 background: rgba(255, 255, 255, 0.08);
 border-radius: 12px;
}

.contact-label {
 font-weight: 600;
 letter-spacing: 1px;
 color: #c6e9ff;
}

.contact-link {
 color: #7ad6ff;
 text-decoration: none;
}

.contact-link:hover {
 color: #c0ecff;
 text-decoration: underline;
}

.screenshot-modal {
 position: fixed;
 inset: 0;
 background: rgba(9, 19, 48, 0.92);
 display: none;
 align-items: center;
 justify-content: center;
 padding: 32px;
 z-index: 1000;
}

.screenshot-modal.is-visible {
 display: flex;
}

.modal-content {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 max-width: min(1200px, 100%);
 width: 100%;
 max-height: 100%;
}

.screenshot-modal img {
 width: auto;
 height: auto;
 max-width: min(100%, 1200px);
 max-height: calc(100vh - 120px);
 border-radius: 18px;
 box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65);
}

.modal-close {
 position: absolute;
 top: 12px;
 right: 12px;
 width: 44px;
 height: 44px;
 border: none;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.55);
 color: #fff;
 font-size: 24px;
 line-height: 1;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.2s ease, transform 0.2s ease;
}

.modal-close:hover,
.modal-close:focus-visible {
 background: rgba(255, 255, 255, 0.2);
 transform: scale(1.05);
 outline: none;
}

.noscript-message {
 margin: 20px auto;
 max-width: 960px;
 padding: 18px 24px;
 background: rgba(0, 0, 0, 0.6);
 color: #f0f6ff;
 border-radius: 12px;
 text-align: center;
 font-size: 16px;
 line-height: 1.6;
}

.qr-section {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 24px;
}

.qr-card {
 background: rgba(255, 255, 255, 0.1);
 border-radius: 14px;
 padding: 20px;
 width: 220px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
 text-align: center;
 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.qr-card img {
 width: 160px;
 height: 160px;
 object-fit: cover;
 border-radius: 12px;
 background: #fff;
 padding: 8px;
}

.qr-card span {
 font-size: 15px;
 line-height: 1.5;
}

@media (max-width: 768px) {
 .content-card {
  padding: 28px 20px;
 }

 .company-name {
  font-size: 26px;
 }

 .cta-message {
  font-size: 16px;
 }

 .screenshot-button {
  width: 100%;
  max-width: 280px;
 }

 .screenshot-modal {
  padding: 20px;
 }

 .modal-close {
  top: 8px;
  right: 8px;
 }

 .contact-item {
  width: 100%;
  justify-content: space-between;
 }

 .qr-card {
 width: 100%;
 max-width: 260px;
 }

 .qr-card img {
  width: 180px;
  height: 180px;
 }
}

@media (max-width: 480px) {
 .contact-list {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
 }

 .contact-item {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
 }

 .contact-link {
  word-break: break-all;
 }
}