/* ── Mobile Layout: 1rem = viewport/375 (set dynamically by JS) ── */

/* ══════════════════════════
   ROOT MOBILE VIEW
══════════════════════════ */
.mobile-view {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: url(images/h5-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Scroll container */
.m-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ══════════════════════════
   FIXED HEADER
══════════════════════════ */
.m-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 10rem;
  padding-bottom: 0;
  pointer-events: none;
}

.m-header-inner {
  z-index: 5;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: rgba(15,7,6,0.8);
  padding: 6rem 10rem;
  border-radius: 10rem;
}

/* Logo */
.m-logo {
  display: flex;
  align-items: center;
  gap: 6rem;
}

.m-logo-icon {
  width: 39rem;
  height: 39rem;
  border-radius: 10rem;
  background-image: url(images/h5-logo.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.m-logo-texts {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.m-logo-name-row {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.m-logo-title {
  color: #fff;
  font-size: 16rem;
  line-height: 12rem;
  letter-spacing: 1.12rem;
  font-weight: 600;
  white-space: nowrap;
}

.m-official-badge {
  width: 24rem;
  height: 14rem;
  background-image: url("data:image/webp;base64,UklGRnIFAABXRUJQVlA4WAoAAAAQAAAARAAAKQAAQUxQSF8BAAABkCTbtmlLc5/307aNum3WbDvb4uyAbZQysmRbHbCtz/vvWYmH/+85DYiICaBIM6z/xuPPymtVr8mvFxd2zG1HHZvRYNWTRFktPz8JzEoyWPJOGfbS05GYleDoeEXZP9yIXFGOqeXKvtergbgiHCukNHtKlYzFFTAWySvIVBqOy+OYKq9ga/pggNHxZ0Bebxvlu6BU4abajwFzFbbXUMBeBCY9ABYo/LFwIwJn6VIVni9vsUAxnLkzCtueRuHalyi8qY5CpeJYG4fyKFS/icKnK1F4tCkKu6dHYWOz3xGo7sXpCDyEURFYAdwL7m0Dg0HBrcRw7FUaUKpbGGAN38iHo1+d89EnkQ/FawaO/x1DpTQMr7U48jtGJUoDSKUVmBXAMeCNfOa8yqfgKDZH46PK/rVOOIo3Y8SjjD2fDUapZjDu3O/MJLcX53BGHbeeufXi8x9J/STlz86s6QlmFAkAVlA4IOwDAABQFACdASpFACoAPp1En0uwJKsoJnqpWLATiWwAnTlBVJ4bfQ/yH9ier/1vfkTNwxNuT5gPKg/Sv3L/7f1AP7x1DHoAeWl+1XwkfuX6SSau0QNLjNE8h/1FpIAP8fvPvAKzHX2+4psHSzz5W9P+uIYhPTpUZm+NyP+V4OYu94+1ttmYmoy+0z9oHjonFbROD8lp1Q3LMx6az/UEeKeGCT2z0nxS27ivfRhrAAAA/uc7ntYizzxu35aO2FGwUWdOkgPffjX3VHMwCUXfiOfA3w7oFePQbIYuz4NPk/c7a8F9LD0YvWMkb7IgtEJAjwMxcNBxXZkKE4qWfXr+jo4sGqSdMuH3gw0dw/hCR9Ut+Hjgl9VACpIXU4L82hp/Zk1BucLdwX/jypRE8bJPLuQDLI3yd5CYXIKrqkCHcQusfmI6cuf0xGIX1Aly9+vkJQL8R0Y+nWk1yTdLeO5l+On88ZT8emoR2KFCRUXiMZ9DqJ8bA0085p/BKCkvVObupgbGvnjmkUkpBzoXLbC06uf+7FmUsAnyoSGhEK98hm3GX172w9Al46/3GNmVUvGesyNGN5BkL/6SurnBytnFStr/XE/1wNqBF2UoBBPBrH8sRj3lb88soyuhOtprKsoTqITV/enQ5pNANd4gW+W8PVOLkMZlgwdPzsKFxCn/koOsgJYWIhJnmh1Fyr1QFL2C5ySZLHmmt8rJMMmKz/oe55CrWKlK8G8nFyXqYi61+W1/M95MubfuWMqYj8Ty1KZqzm0QlXM+35EzwSwk2BDh/KC9E+EhJZNA9FIv2QbJx1jzS496P/Kosllgm1xwBxYAcX2cVOx9rrimIdPdKKDE60F5GF3Y7j4N0dWcWb8JngIIN08UKYXdFFp8WflSHTnenIIGeoBtYLQBJZxoKy5Ba/DxtqkBY7Io0aarMYPoTl945/KCXDQYjmvpu8M3wVTbgF0Smubuhf/3TpeGgOKe/Vqylhuighe+hWStrgvA/JirW1i8NLwN452gGqDD/9ax4vwhvi2n7YRLb14oT5vwIZi3NVw2WJ5g/6tcGyf8q9RVw2sy+xf2WludZIXk9yK564g2N7rOXoHw2rHfvwzKm+oDX0rjTGT39lvcU359EL/+fW/7yGJhmWfjDB1HgcWSKIX+Jz//z3Ttuof+aAHS1cdP/BPXb/RbTwZC8uVRbW/6+drU6SW6sC/+koxjE1dSbpOpF+KUDTs3eKJ3z5s8rM5O1ZlWG4ewJe59+vqW19gBQnWn3QDE8IrZGfOT0R5VLkLqMGj/OunNUzBqOxXeOmaa6/vVnvbjf7+d2cdRef1GHluGabyRMYo+7fKJ2sAAAA==");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.m-logo-subtitle {
  font-size: 10rem;
  line-height: 10rem;
  letter-spacing: 1.3rem;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}

/* Contact icons in header */
.m-contacts {
  display: flex;
  align-items: center;
  gap: 10rem;
  margin-left: auto;
  pointer-events: auto;
}

.m-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40rem;
  gap: 0;
  text-decoration: none;
  cursor: pointer;
}

.m-contact-icon {
  width: 24rem;
  height: 24rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.m-business-icon { background-image: url(images/h5-contact-business.webp); }
.m-cs-icon       { background-image: url(images/h5-contact-cs.webp); }

.m-dl-icon {
  width: 24rem;
  height: 24rem;
  background-image: url("data:image/webp;base64,UklGRoAHAABXRUJQVlA4WAoAAAAQAAAARwAARwAAQUxQSOgDAAANoG1r2yFJet6IyELbtm3btm1cxNyIbdu22bZtFRL/dxCRkVFZNTyKiAngv2ZhUbJaZpT1bK70yXNGba+/ZFoj07EXfqttmjMQSE1t/NrFWlY2HDB5E2/+Ucu8ABDUr3/FapfLpgRgoo7MoToC499yqyuMf6qmugL7S5NFyeLElhWLDLxG1ZUYcS3KMwNZkWB0ntq56utvquKYQs1Gdav4eX+OYjVGL07lGrTc+3xFDAzosrbt3RL78r1ssdBtngO/z8IbT9xzvkUIY8DaNKRGDfnmq2LRlPqE22299nCVK4lwFfTabIRHtf/yWpH47RwmoMmusy9ca6zQDdd6lwGYvG43iiV3snELmTC12n31zawXSo+bU0lYcKIhRWofX15ZIpNMPVafzBLuMe8uef88RqKygmRcfKnlKk8mmVrWNxPQqhl5T7waJGOAF8OByTjxTM+VnkCAKPDkMykQVhh0HdMq6xTy/YvfnsZkHHm27woPCxV68ukUyIyge7fyrMMw/Mzpo2lv4vzgboCFjPL0u18RPvRcnxWBTAUdfzoFctBg+VCXFiaEBd4fXy3qA+AR3XRKp/d/N4BDT/deE8hUwPFnApCDYFl/wPdEWB2Gl99XFYo7q8k790Icf6b7qkCmWKefDkAO6DKSAruMGUGhQa+ztyM4/nSntaUyxTj8XArkADrlCjB559t4BZBJkffYU53Xl8iU58/nfZAjHKS9eIIHZ3QrJO3n49zjndcEMkWcfF4gR2TGSuKRPXF/6axWvgPkRzkvBmcfa7+uTCbg4IspkCPaSRGZKiek6q8PXXp1T9dmlstlu49tlgAnH2m7tVzA7y/7IEdeI8L9+NWdErzczUal3PhqTwbPXO8ZrSKMuLLLjzZe3wj2vyGQo2D36485h0OEK24CqCEJGFx54s6A8nMnUiBHktVkMGKrQVWEmeKA7MJrx3L1BHLENQEmyqiicOdFZIJ4BulLaUCO2Fn5hIUlEC2XjRfTiJ/zAYHzKNgyvh/R5lYFsgTiyqBdlsgcCV4ubRxiRMsPnFGjBq2HRllFKoEzrnNEh1UV71wyrwbM/H6zrhCZueglcO5sv4aAadDiZreznvIZCAPL5+qVVxF9/C4JZr5sMRiToM34bn7O8gkMGcqjwJE3+1GDBGR79sxpJhOA71GwyC9ifnuOBI3sy9l1nkwU76n3vSSQ3Xi+9RJPmIrBBJdeLCdRkx18oe2yFohiFO63txuTsMn2vlg9a2y9onDnP9yfAlkimOzKO3vqD+hS38MsCbMIKXP90JFyQI6EDdyeL87cyRgoCRFtXllTQGbUaObCtbRRo0a08f9SVlA4IHIDAABQEwCdASpIAEgAPplAmEgsqCKhMLTtULATCWoAzQnA/wHU1dA6PyYPSJmd1T+H/UB6mPE+/R3rneYDzqvQB6AH+x6kD0APLO9le/QH5ntPDR5ILID29PjfRGWMr6B8Pk/YE+NGDyIw3Ai48cTESScQh9V/UxssKyOVfG7CTg/ynfH75t2v39QYQUbASOpbu2DwE1nYFQyYQ3zSZ0+v2kolT/QAAP78XPg/lpF45RaJbig6RL9qXi80vDifzv81z9h7//k2H/97YjXn3Car/43KifCiS42Jh64/9Y7searBzheIvSijd5uEo21Kq2x//PKpSwB89ki/ywbbGhq/SiFWZY5ndEik0miDuSLHvUJOr8SJtHUCXUefIe7qmXPD/8c/plxOMK8vPUWcAyIQoUGta5eJPg9AQczIWNgR4FRDfmUUSZl11he2If9bGQ+Ls2iuhR653jfC9xrTh/AO7QlUrO64fdKlIftQ3IxKZ3PHicekgGlF6UaIb6E/MwLlqxs3fQcP9F4feIAnwf4aj4oCgg1uL9uRaLwvUlFJ9Z9gXo7RQN1gO7eKZU0egGEnSyjb/kLI7FZyVQ+P9x7Jzd5IjNFqMw59rkN3GvI44o23Xb1tb0I7ocufpo+Hctw6LhU9GoIE8irR69sxTs8g7E+KKeXYSpAkOXp3Z4/4Urvjt1Dy+4HzTaNnR2N8XUPOSUbi+ContwQkwqE7yMwYIKXxE9l8sNfQCOCZM/OQ/JhZwrvzLND2By9LZX/Z//jVzTMD138dFrBcPs1KEo8Ii0QHqlJpIcQSp57rgaHhYHxdaYL5xSNHwLcg9E+86yzquHfk+0/+CFbVCIIpIqVyVvRrqZuQIgWf3xtDz1sbZRasAbsNQ5BccDDAYIdv6t39H5MsKN7ekedt40LC6Dp7Z5btNllBpBlEf9jdqeL27QJxx7NfluuVQoGqEXiKGV3Qs/zaYDseDpeuCGdwOaD+f/wgcEGSgjM1jij+6KwHIbh3x8boF5kPSQba/WNQUXvh7kKkuwkqXrLr5D5YiGD+paqaBDOwoKIVzDaCyvP9QlVocVGipZuQYQnuSAoAb1+SPj3LkzmxS7zLcVi3CXQrp6k/51yLwXHqcJs0p0//MX7av1o/8vD/uRt2JHZESIo9OeL+Nwnnbz4rm4DIrESREkMAAAA=");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.m-contact-label {
  font-size: 10rem;
  line-height: 10rem;
  color: #fff;
  white-space: nowrap;
}

/* Spacer below fixed header (prevents overlap with banner) */
.m-header-spacer {
  height: 61rem;
  width: 100%;
  flex-shrink: 0;
}

/* ══════════════════════════
   BANNER (scrolling strip)
══════════════════════════ */
.m-banner-wrap {
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  flex-shrink: 0;
}

@keyframes banner-scroll {
  from { transform: translate(0); }
  to   { transform: translate(-350rem); }
}

.m-banner {
  width: 725rem;
  height: 262rem;
  display: block;
  animation: banner-scroll 8s linear infinite;
  will-change: transform;
}

/* ══════════════════════════
   HERO (char + title)
══════════════════════════ */
.m-hero {
  width: 335rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -183rem;
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex-shrink: 0;
}

.m-hero-char {
  width: 336rem;
  height: 427rem;
  display: block;
}

.m-hero-title {
  margin-top: -92rem;
  width: 346rem;
  height: 129rem;
  display: block;
}

/* ══════════════════════════
   MAIN CONTENT CONTAINER
══════════════════════════ */
.m-content {
  width: 345rem;
  padding-bottom: 92rem;
  pointer-events: none;
  flex-shrink: 0;
}

/* Outer gap-[30rem] flex column */
.m-sections {
  display: flex;
  flex-direction: column;
  gap: 30rem;
}

/* First block: PromoCard1 + TagGrid + PromoCard2 (gap-11) */
.m-cards-block {
  display: flex;
  flex-direction: column;
  gap: 11rem;
}

/* PromoCard2 wrapper with top margin */
.m-promo2-wrap {
  margin-top: 19rem;
}

/* Tab + video block: gap-15 pb-20 */
.m-tabs-block {
  display: flex;
  flex-direction: column;
  gap: 15rem;
  padding-bottom: 20rem;
}

/* ══════════════════════════
   PROMO CARDS
══════════════════════════ */
.m-promo {
  position: relative;
  width: 100%;
  height: 167rem;
  border-radius: 10rem;
}

/* Background layer */
.m-promo-bg {
  position: absolute;
  inset: 0;
  border-radius: 10rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.m-promo-bg-1 { background-image: url(images/h5-g1-bg.webp); }
.m-promo-bg-2 { background-image: url(images/h5-g2-bg.webp); }

/* Character image (hangs outside the card) */
.m-promo-char {
  position: absolute;
  width: 146rem;
  height: 194rem;
  z-index: 5;
  pointer-events: none;
  display: block;
}

.m-promo-char-1 {
  bottom: -10rem;
  right: -10rem;
}

.m-promo-char-2 {
  bottom: -15rem;
  left: 0;
}

/* Info header inside promo card */
.m-promo-info-row {
  position: absolute;
  top: 6rem;
  display: flex;
  align-items: center;
  gap: 8rem;
  z-index: 2;
}

.m-promo-info-row.left  { left: 13rem; }
.m-promo-info-row.right { right: 13rem; }

.m-promo-avatar {
  width: 29rem;
  height: 29rem;
  border-radius: 8rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.m-promo-texts { display: flex; flex-direction: column; }

.m-promo-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 1rem;
  font-size: 14.5rem;
  line-height: 14rem;
  font-weight: 600;
  color: #fff;
}

.m-promo-title .hl { color: #FEDD5F; }

.m-promo-sub {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 7rem;
  line-height: 7rem;
  letter-spacing: 1.61rem;
  margin-top: 4rem;
}

.m-promo-sub .hl { color: #FEDD5F; margin: 0 1.5rem; }

/* Carousel container inside promo card */
.m-carousel-wrap {
  position: absolute;
  left: 11rem;
  right: 11rem;
  top: 50rem;
  height: 108rem;
  border-radius: 10rem;
  overflow: hidden;
  padding: 0 10rem;
  z-index: 1;
}

@keyframes promo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-704rem); }
}

.m-carousel-track {
  display: flex;
  height: 100%;
  animation: promo-scroll 10s linear infinite;
  will-change: transform;
}

.m-carousel-slide {
  width: 78rem;
  height: 108rem;
  border-radius: 8rem;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  margin-right: 10rem;
}

/* ══════════════════════════
   TAG GRID (3×3)
══════════════════════════ */
.m-tag-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11rem 10rem;
}

.m-tag-item {
  height: 151rem;
  border-radius: 10rem;
  position: relative;
  overflow: hidden;
}

.m-tag-item-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Semi-transparent blur for sensitive tag images */
.m-tag-item-img.blur {
  filter: blur(8px) brightness(0.85);
}

.m-tag-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22rem;
  background: linear-gradient(to right, #FAA323, #D22833);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13rem;
  line-height: 12rem;
  color: #fff;
}

.m-tag-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18rem;
  height: 18rem;
  background-image: url(images/h5-play.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* ══════════════════════════
   TAB BAR
══════════════════════════ */
.m-tab-bar {
  width: 100%;
  height: 45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-tab-btn {
  position: relative;
  width: 111.667rem;
  height: 45rem;
  overflow: hidden;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
}

.m-tab-btn-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18rem;
  line-height: 18rem;
  font-weight: bold;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.m-tab-btn-inner.inactive {
  color: rgba(255,255,255,0.2);
  background-image: url("data:image/webp;base64,UklGRnoCAABXRUJQVlA4WAoAAAAQAAAAWwEAhQAAQUxQSKEBAAABgFBbe9tGEARBEAxBEAzBDCIGMQQzUBikDAxBEAThh/B3anW945MREYwkSYpSLTs0Z1DnAaZfPsSUFZAkXVdvxspHUVSSOK7DnkWBKQ2qnEShKbp+pqTclF13r6KTzH2eUenJd+CS4kNce8oKUNm2jiJMqmsjV4Wotq6zUiQ2TVKMiG0gc0RDSx9I9qa9uDbPilJTdZwlS4VFWbLWjisw2SoITGLlrZySbQS0XFTBLttp4snO1PJ50NJMUnldT5NUZqbJS5n1JsEr08SVUZocw16BJluZjSaBs1eiyXQIe3ma7E//vX60l6NJvn3wutJk5uwlOL3Q/mLB2WuhSWT7i8VNgpc9bL3Y/uV63HqxDTTyLMJrwul1mxDr7SbB6/Y21ttNb7hdj9Pr9jbQyC2C137b6yVkX4AanCvREtDiKmScbbDLlhobzKilNRaypbE8S6qHbd/AjPMfgJopyz6ok7P7AOqwtCbjhGCaTLNmgKPVhPJlXXofxfpspldTBjfNm365C7XdgnkX08oerBkmFxKrntWbwbI+bJGQtuBHrDcAVlA4ILIAAADQDwCdASpcAYYAPp1On02iBEdjAxYCcS0t3C5oI2gKLQXsgnmXi9kE1S8vsaBggx5l4vZBPMvDxuKN2QTzLxeyCeZUdZl4vZBPMvF7CRTTXxAoMaa+IEvD08y8XsgnmXi9B/3LxeyCeZeL2PQKrGpviBQY018QKDGe3sKfl4vZBPMvF6C91wAA/v7Zn4r0l//q/vtQgfmSAAOr7oib/OH/xQL+Ae9zL2JFmV7hvN3+2QAA");
}

.m-tab-btn-inner.active {
  color: #fff;
  background-image: url(images/h5-active.webp);
}

/* ══════════════════════════
   VIDEO PANELS
══════════════════════════ */
.m-video-panel {
  display: none;
  width: 100%;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6rem;
}

.m-video-panel.active {
  display: grid;
}

.m-video-item { width: 100%; }

.m-video-thumb {
  width: 100%;
  height: 107rem;
  border-radius: 8rem;
  overflow: hidden;
  position: relative;
  display: block;
}

.m-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Blur overlay for dark tab */
/*.m-video-thumb .dark-blur {*/
/*  position: absolute;*/
/*  top: 0; right: 0; bottom: 0; left: 0;*/
/*  background: rgba(0,0,0,0.3);*/
/*  backdrop-filter: blur(3rem);*/
/*  -webkit-backdrop-filter: blur(3rem);*/
/*}*/

.m-video-title {
  margin-top: 5rem;
  color: #fff;
  font-size: 12rem;
  line-height: 15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ══════════════════════════
   FIXED DOWNLOAD BAR
══════════════════════════ */
.m-dl-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
}

/* Outer container — Android: 92rem, iOS: 78rem */
.m-dl-outer {
  position: relative;
  width: 100%;
  background: #0F0706;
  border-radius: 20rem 20rem 0 0;
}
.m-dl-outer--android { height: 92rem; }
.m-dl-outer--ios     { height: 78rem; }

/* Brown stripe: 2rem above the bar */
.m-dl-border {
  position: absolute;
  left: 0;
  right: 0;
  top: -2rem;
  bottom: 0;
  border-radius: 20rem 20rem 0 0;
  background: #75372F;
}

/* Dark background covers the stripe */
.m-dl-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 20rem 20rem 0 0;
  background: #0F0706;
}

/* Content area (respects 20rem side padding) */
.m-dl-content {
  position: relative;
  padding: 0 20rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Flex row: justify-between for both Android (2 btns) and iOS (logo + 1 btn) */
.m-dl-row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rem;
  pointer-events: auto;
}

/* Download button (same size in both layouts) */
.m-dl-btn {
  position: relative;
  width: 130rem;
  height: 54rem;
  border-radius: 10px;
  background-image: url(images/h5-btn.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  flex-shrink: 0;
  gap: 0;
  flex-direction: column;
}
.m-dl-btn-sub {
  font-size: 7rem;
  bottom: 10rem;
  position: absolute;
}

/* JustifyText — spread characters evenly like original Vue component */
.m-dl-just {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  font-size: 15rem;
  font-weight: 700;
  color: #fff;
  line-height: 26rem;
}

/* iOS only: logo + text area (flex-1 to fill remaining space) */
.m-dl-logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10rem;
  white-space: nowrap;
  overflow: hidden;
}

.m-dl-logo-icon {
  width: 39rem;
  height: 39rem;
  border-radius: 10rem;
  background-image: url(images/h5-logo.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.m-dl-logo-text {
  display: flex;
  flex-direction: column;
  color: #fff;
}

.m-dl-app-name {
  font-size: 15rem;
  line-height: 18rem;
  font-weight: 600;
}

.m-dl-app-sub {
  font-size: 12rem;
  line-height: 14rem;
  margin-top: 2rem;
  letter-spacing: 0.05em;
}