@font-face {
  font-family: "PingFang";
  src: url("../fonts/PingFangNormal.ttf");
  font-weight: normal;
  font-style: normal;
}
:root {
  /* Default unit. H5 keeps --u = 1px so calc(N * var(--u)) == Npx.
     PC media query overrides --u to a viewport-derived length so all
     dimensions scale proportionally without transform: scale (no blur). */
  --u: 1px;
}
* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: "PingFang", "Roboto", "-apple-system", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #1d2939;
  background: #d9eeff;
}

/* =================================================
   PC LAYOUT  (>= 901px)
   Designed at 1920 x 1080. All sizes use
   calc(N * var(--u)); --u is overridden in the PC
   media query so widths/heights/font-sizes scale
   in real pixels (no transform: scale, no blur).
   ================================================= */
.pc-main {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
  overflow: hidden;
}
.pc-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: url(../imgs/bg.jpg) center center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
.pc-content {
  position: relative;
  z-index: 2;
  width: calc(1700 * var(--u));
  margin: 0 auto;
  padding: calc(130 * var(--u)) calc(60 * var(--u)) 0 calc(60 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(30 * var(--u));
}
.pc-left {
  flex: 0 0 calc(720 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  left: calc(100 * var(--u));
  z-index: 1;
}
.pc-right {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  z-index: 0;
}
.pc-banner {
  display: block;
  width: 85%;
  max-width: calc(800 * var(--u));
  height: auto;
  pointer-events: none;
}

.pc-header {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  margin-bottom: calc(32 * var(--u));
}
.pc-logo {
  width: calc(172 * var(--u));
  height: auto;
  display: block;
}
.pc-divider {
  width: calc(2 * var(--u));
  height: calc(56 * var(--u));
  background: linear-gradient(180deg, transparent 0%, #6b87b2 50%, transparent 100%);
  display: inline-block;
  margin: 0 calc(4 * var(--u));
}
.pc-domain {
  height: calc(50 * var(--u));
  width: auto;
  display: block;
}

.pc-title {
  display: block;
  width: calc(648 * var(--u));
  max-width: 100%;
  height: auto;
  margin: 0;
}

.pc-subtitle {
  margin: calc(18 * var(--u)) 0 calc(22 * var(--u));
  font-family: "PingFang SC", "PingFang", "Microsoft YaHei", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(38.1679 * var(--u));
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #414655;
  text-align: center;
}

.pc-info-card {
  width: calc(729 * var(--u));
  background: url(../imgs/content-bg.png) center center / 100% 100% no-repeat;
  border-radius: calc(18 * var(--u));
  padding: calc(22 * var(--u)) calc(26 * var(--u));
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pc-info-card .card-title {
  font-size: calc(24 * var(--u));
  font-weight: 700;
  color: #1f2a44;
  line-height: 1.4;
}
.pc-info-card .card-desc {
  margin-top: calc(10 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 400;
  color: #5b6577;
  line-height: 1.7;
}

.email-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--u));
  margin-top: calc(16 * var(--u));
}
.email-pill {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  background: #ffffff;
  border-radius: calc(12 * var(--u));
  border: calc(1 * var(--u)) solid #e3edff;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(58, 109, 199, 0.08);
  flex: 1 1 0;
  min-width: calc(200 * var(--u));
}
.email-pill .email-icon {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  flex-shrink: 0;
}
.email-pill .email-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.email-pill .email-label {
  font-size: calc(14 * var(--u));
  font-weight: 500;
  color: #8a94a6;
  line-height: 1.4;
}
.email-pill .email-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 600;
  color: #2780FF;
  line-height: 1.4;
}
.email-pill .email-value span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-icon {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  cursor: pointer;
  flex-shrink: 0;
}

.contact-row {
  display: flex;
  gap: calc(16 * var(--u));
  margin-top: calc(14 * var(--u));
}
.contact-pill {
  position: relative;
  width: calc(200 * var(--u));
  height: calc(64 * var(--u));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(9 * var(--u));
  box-sizing: border-box;
  background:
    linear-gradient(90deg, #EAEDFB 0.98%, #F7F9FF 36.56%, #EBF0FC 68.02%, #E8EEF9 100%);
  border: calc(0.565476 * var(--u)) solid #FFFFFF;
  border-radius: calc(30.5357 * var(--u));
  box-shadow: inset 0 calc(7.91667 * var(--u)) calc(2.71429 * var(--u)) calc(3.39286 * var(--u)) rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(calc(5.17411 * var(--u)));
  -webkit-backdrop-filter: blur(calc(5.17411 * var(--u)));
}
.contact-pill .contact-icon {
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  flex-shrink: 0;
}
.contact-pill .contact-text {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  flex: 1;
  min-width: 0;
}
.contact-pill .contact-label {
  font-family: "PingFang SC", "PingFang", "Microsoft YaHei", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(13 * var(--u));
  line-height: 100%;
  letter-spacing: 0.05em;
  color: #414655;
}
.contact-pill .contact-actions {
  display: flex;
  gap: calc(5 * var(--u));
}
.contact-pill .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(20 * var(--u));
  padding: 0;
  font-family: "PingFang SC", "PingFang", "Microsoft YaHei", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(10 * var(--u));
  line-height: 100%;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: calc(10 * var(--u));
  box-sizing: border-box;
}
.contact-pill .action.consult {
  width: calc(58 * var(--u));
  background: linear-gradient(94.84deg, #6FACFF 25.19%, #2780FF 87.16%);
  color: #FFFFFF;
}
.contact-pill .action.copy {
  width: calc(42 * var(--u));
  background: #E7F1FE;
  color: #2780FF;
  border: calc(0.75 * var(--u)) solid #2780FF;
}

.pc-qr-area {
  position: absolute;
  z-index: 3;
  right: 0;
  left: 0;
  bottom: calc(-32 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(25 * var(--u));
}
#qrcode {
  width: calc(117 * var(--u));
  height: calc(117 * var(--u));
  padding: calc(6 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(20, 50, 110, 0.25);
}
#qrcode img,
#qrcode canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.pc-enter {
  display: inline-block;
  width: calc(360 * var(--u));
  height: calc(48 * var(--u));
  text-decoration: none;
  line-height: 0;
}
.pc-enter img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pc-enter:hover {
  filter: brightness(1.05);
}

.pc-sport-bar {
  position: absolute;
  bottom: calc(80 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(1593 * var(--u));
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* =================================================
   H5 LAYOUT  (<= 900px)
   Designed at 375 x 838
   ================================================= */
.h5-main {
  display: none;
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Reserve room at the bottom so content isn't hidden behind .h5-bottom-bar (97px). */
  /* padding: 0 0 113px 0; */
  overflow: hidden;
}
.h5-bg {
  position: absolute;
  inset: 0;
  background: url(../imgs/bg.jpg) center center / cover no-repeat;
  z-index: 0;
}
.h5-main > *:not(.h5-bg):not(.h5-bottom-bar) {
  position: relative;
  z-index: 1;
}

.h5-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 0;
}
.h5-logo {
  width: 110px;
  height: auto;
  display: block;
}
.h5-divider {
  width: 1.5px;
  height: 36px;
  background: linear-gradient(180deg, transparent 0%, #6b87b2 50%, transparent 100%);
}
.h5-domain {
  height: 32px;
  width: auto;
  display: block;
}

.h5-title {
  display: block;
  width: calc(100% - 48px);
  max-width: 311px;
  height: auto;
  margin: 22px auto 0;
}

.h5-subtitle {
  margin: 12px 24px 0;
  font-family: "PingFang SC", "PingFang", "Microsoft YaHei", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.08em;
  color: #414655;
  text-align: center;
}

.h5-info-card {
  margin: 18px 12px 0;
  padding: 13px 10px;
  background: url(../imgs/content-bg.png) center center / 100% 100% no-repeat;
  border-radius: 14px;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.h5-info-card .card-title {
  font-size: 13px;
  font-weight: 700;
  color: #1f2a44;
  line-height: 1.4;
}
.h5-info-card .card-desc {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #5b6577;
  line-height: 1.65;
}
.h5-info-card .email-line {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a44;
  line-height: 1.4;
}
.h5-info-card .email-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h5-info-card .email-line .copy-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 2px;
}
.h5-info-card .contact-row {
  margin-top: 14px;
  gap: 10px;
}
.h5-info-card .contact-pill {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  border-radius: 24px;
  padding: 6px 10px;
}
.h5-info-card .contact-pill .contact-icon {
  width: 32px;
  height: 32px;
}
.h5-info-card .contact-pill .contact-label {
  font-size: 11px;
}
.h5-info-card .contact-pill .action {
  font-size: 9px;
  padding: 3px 6px;
}

.h5-banner {
  display: block;
  margin: 18px auto 0;
  width: 92%;
  height: auto;
}

.h5-sport-bar {
  display: block;
  margin: 6px auto 0;
  width: 78%;
  height: auto;
}

.h5-bottom-bar {
  /* position: fixed;
  left: 0;
  right: 0;
  bottom: 0; */
  width: 100%;
  /* height: 97px; */
  box-sizing: border-box;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid #FFFFFF;
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 10;
  margin-top: 10px;
}

.h5-download {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 12px;
  background:
    url(../imgs/download-btn-bg.png) center center / cover no-repeat,
    linear-gradient(180deg, #73b2ff 0%, #3981ff 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 2px;
  box-shadow:
    0 -1px 3px rgba(88, 148, 255, 0.6) inset,
    0 4px 10px rgba(57, 129, 255, 0.35);
}

.h5-visit {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #4A8FFF;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =================================================
   Toast
   ================================================= */
#copy-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 999;
}
#copy-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* =================================================
   Responsive switch
   ================================================= */
@media (max-width: 900px) {
  .pc-main, .pc-bg { display: none; }
  .h5-main { display: block; }
}
@media (min-width: 901px) {
  html, body {
    height: 100%;
    overflow: hidden;
    background: #d9eeff;
  }
  :root {
    /* Scale factor as a length: pick the smaller of viewport-w/1920 and
       viewport-h/1080 so the 1920x1080 canvas always fits without overflow.
       calc(N * var(--u)) yields real-pixel dimensions — no transform: scale. */
    --u: min(calc(100vw / 1920), calc(100vh / 1080));
  }
  .pc-main, .pc-bg { display: block; }
  .h5-main { display: none; }
}