#iosLoading {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 9999;
			background: rgba(255, 255, 255, 0.92);
			backdrop-filter: blur(0.4rem);
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 1.4rem;
		}

		html.ios-loading #iosLoading {
			display: flex;
		}

		.ios-loader-dot {
			width: 4.2rem;
			height: 4.2rem;
			border-radius: 50%;
			border: 0.4rem solid #d9ebff;
			border-top-color: #3f9bff;
			animation: iosSpin 0.9s linear infinite;
		}

		.ios-loader-text {
			font-size: 1.4rem;
			color: #3b5f83;
		}

		@keyframes iosSpin {
			to {
				transform: rotate(360deg);
			}
		}

		:root {
			--bg-top: #edf4ff;
			--bg-bottom: #f5f8fc;
			--surface: #ffffff;
			--surface-soft: #f3f8ff;
			--ink: #12263a;
			--muted: #637585;
			--line: #d9e5f3;
			--accent: #2f74e9;
			--accent-2: #4b8fff;
			--shadow: 0 1.6rem 4.2rem rgba(26, 59, 94, 0.12);
		}

		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		body {
			font-family: "PingFang SC", "Noto Sans SC", sans-serif;
			color: var(--ink);
			min-height: 100vh;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(209, 235, 255, 0.30) 100.05%);
			box-shadow: 0 -1.2rem 1.5rem 0 #CEEAFF inset;
			backdrop-filter: blur(1.870967674255371rem);
			/* background:
				radial-gradient(circle at 10% 8%, rgba(82, 157, 255, 0.26), transparent 36%),
				radial-gradient(circle at 88% 14%, rgba(133, 187, 255, 0.25), transparent 40%),
				linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 45%, #f7fbff 100%); */
			/* padding: 24px 16px 56px; */
		}

		#pcMain {
			min-width: 120rem;
			background-image: url('img/bg.png');
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: top center;
			padding: 12.6rem 0;
		}

		/* .wrap {
			max-width: 988px;
			margin: 0 auto;
		} */
		.pc-wrap {
			width: 120rem;
			margin: 0 auto;
		}

		.page-main {
			display: none;
		}

		.page-main.active {
			display: block;
		}

		.hero {
			/* position: relative; */
			overflow: visible;
			/* border-radius: 24px; */
			/* background: linear-gradient(140deg, #eaf3ff 0%, #f4f8ff 78%); */
			/* border: 1px solid #dce9f7; */
			/* padding: 24px; */
			/* box-shadow: var(--shadow); */
			display: flex;
			justify-content: space-between;
		}

		.hero::before,
		.hero::after {
			content: "";
			position: absolute;
			pointer-events: none;
		}

		.hero-intro {
			position: relative;
			z-index: 1;
			padding: 0.4rem 0.2rem;
		}

		.hero-brand {
			display: inline-flex;
			align-items: center;
			gap: 2rem;
			margin-bottom: 8rem;
		}

		.brand-icon {
			height: 10rem;
		}

		.brand-name {
			font-size: 2rem;
			font-weight: 500;
			font-size: 3.6rem;
			color: #000;
		}

		h1 {
			font-size: 4.2rem;
			margin-bottom: 1.2rem;
		}

		.subtitle {
			font-size: 2.4rem;
			color: #000;
			font-weight: 500;
			font-size: 2.4rem;
		}

		.system-tip {
			border-radius: 3rem;
			border: 1px solid #D5E7F9;
			background: linear-gradient(180deg, #FFF 27.36%, #D4E4F3 74.94%, #F2F8FC 100%);
			box-shadow: 0 -0.2rem 0.4rem 0 #FFF inset, 0 0.2rem 0.4rem 0 #E9F3FD inset, 0 0.2rem 0 0 #C8DDEF, 0 0.4rem 0.8rem 0 #D5E7F9;
			padding: 1.2rem 1.6rem;
			margin-top: 3.4rem;
			font-size: 1.8rem;
		}

		.system-tip strong {
			color: #2a6fdf;
		}

		.grid {
			margin-top: 14rem;
			grid-column: 1 / -1;
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 5.6rem;
			overflow: hidden;
		}

		.card {
			height: 18.8rem;
			background-image: url(./img/card-bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 2.6rem 3rem 2.2rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.card-main {
			display: flex;
			align-items: center;
			gap: 1.8rem;
			min-height: 0;
		}

		.os-block {
			width: 11.6rem;
			display: grid;
			justify-items: center;
			align-content: center;
			gap: 0.6rem;
		}

		.os-logo-stack {
			width: 3.6rem;
			height: 3.6rem;
			display: grid;
			place-items: center;
		}

		.os-logo {
			width: 3.6rem;
			height: 3.6rem;
			display: block;
			grid-area: 1 / 1;
			transition: opacity 0.28s ease;
		}

		.os-logo-hover {
			display: block;
			opacity: 0;
		}

		.os-logo-default {
			opacity: 1;
		}

		.os-divider {
			display: grid;
			width: 0.2rem;
			height: 9.6rem;
			flex: 0 0 auto;
			margin: 0 3rem;
		}

		.divider-img {
			grid-area: 1 / 1;
			width: 100%;
			height: 100%;
			display: block;
			object-fit: contain;
			transition: opacity 0.28s ease;
		}

		.divider-default {
			opacity: 1;
		}

		.divider-hover {
			opacity: 0;
		}

		.card-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 9.6rem;
		}

		.title {
			font-size: 2.8rem;
			font-weight: 500;
			transition: color 0.28s ease;
		}

		.desc {
			color: #2f3742;
			font-size: 2rem;
			line-height: 1.35;
			transition: color 0.28s ease;
		}

		.actions {
			margin-top: 2.4rem;
			display: flex;
			gap: 0.8rem;
			align-items: center;
			flex-wrap: wrap;
		}

		.btn {
			border-radius: 2.4rem;
			background: radial-gradient(92.72% 112.45% at 62.85% 0%, #92DBFF 6.32%, #449EFE 61.59%, #3EBAFF 93.75%);
			box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.58) inset, 0 0.4rem 0.5rem 0 #C7E9FF;
			display: flex;
			width: 17rem;
			padding: 0.8rem 1.2rem;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 1.8rem;
			font-weight: 500;
			color: #fff;
			text-decoration: none;
			transition: background 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, transform 0.28s ease, filter 0.28s ease;
		}

		.btn:hover {
			transform: translateY(-0.2rem);
			filter: brightness(0.98);
		}

		.card:hover {
			background-image: none;
			background: radial-gradient(92.72% 112.45% at 62.85% 0%, #92DBFF 6.32%, #449EFE 61.59%, #3EBAFF 93.75%);
			box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.58) inset, 0 0.4rem 0.5rem 0 #C7E9FF;
		}

		.card {
			border-radius: 2.4rem;
			transition: background 0.28s ease, box-shadow 0.28s ease;
		}

		.card:hover .os-logo-default {
			opacity: 0;
		}

		.card:hover .os-logo-hover {
			opacity: 1;
		}

		.card:hover .divider-default {
			opacity: 0;
		}

		.card:hover .divider-hover {
			opacity: 1;
		}

		.card:hover .title,
		.card:hover .desc {
			color: #fff;
		}

		.card:hover .btn {
			border: 1px solid #D5E7F9;
			background: linear-gradient(180deg, #FFF 27.36%, #D4E4F3 74.94%, #F2F8FC 100%);
			box-shadow: 0 -0.2rem 0.4rem 0 #FFF inset, 0 0.2rem 0.4rem 0 #E9F3FD inset;
			color: #249CFC;
		}

		/* .btn-primary {
			color: #fff;
			background: linear-gradient(180deg, #70c4ff 0%, #2d89f2 100%);
			box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5);
		}

		.card.recommended .btn-primary {
			background: linear-gradient(180deg, #70c4ff 0%, #2d89f2 100%);
			color: #fff;
		} */

		.btn-secondary {
			color: #3b79db;
			background: #edf4ff;
		}

		.tag {
			font-size: 1rem;
			font-weight: 700;
			color: #1f6dde;
			background: #e5f0ff;
			border: 1px solid #c6dcff;
			border-radius: 999px;
			padding: 0.3rem 0.8rem;
			display: none;
		}

		.card.recommended .tag {
			display: inline-flex;
			background: rgba(255, 255, 255, 0.18);
			border-color: rgba(255, 255, 255, 0.38);
			color: #fff;
		}

		.foot {
			text-align: center;
			color: var(--muted);
			font-size: 1.3rem;
			margin-top: 2.4rem;
		}

		.content-block {
			background: transparent;
			border: 0;
			border-radius: 0;
			padding: 0.2rem 0;
			box-shadow: none;
		}

		.section-title {
			font-size: 4.6rem;
			text-align: center;
			font-weight: 900;
			margin-bottom: 2.4rem;
			color: #30353F;
		}

		.section-subtitle {
			color: #1C1C1C;
			font-size: 2.2rem;
			text-align: center;
			margin-bottom: 3.6rem;
		}

		.pc-rating-module {
			margin: 0 auto 4.8rem;
			width: 61.7rem;
			border-radius: 8.4rem;
			border: 0.1854rem solid #D5E7F9;
			background: linear-gradient(180deg, #FFF 27.36%, #E6F3FF 74.94%, #F2F8FC 100%);
			box-shadow: 0 0.3707rem 0 0 #C8DDEF, 0 0.7415rem 1.4829rem 0 #D5E7F9;
			display: flex;
			padding: 1.2rem 1.2rem 1.2rem 2.8rem;
			align-items: center;
			gap: 2.4rem;
		}

		.pc-rating-label {
			font-size: 2.4rem;
			font-weight: 500;
			line-height: 1;
			color: #30303D;
			white-space: nowrap;
		}

		.pc-rating-stars {
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
			font-size: 3rem;
		}

		.pc-rating-stars .on {
			color: #449DFE;
		}

		.pc-rating-stars .half {
			background: linear-gradient(90deg, #449DFE 0 50%, #B9C6D4 50% 100%);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.pc-rating-value {
			margin-left: auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 1.4rem 3rem;
			border-radius: 8.4rem;
			background: radial-gradient(92.72% 112.45% at 62.85% 0%, #92DBFF 6.32%, #449EFE 61.59%, #3EBAFF 93.75%);
			box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.58) inset, 0 0.4rem 0.5rem 0 #C7E9FF;
			color: #fff;
			font-size: 3.4rem;
			font-weight: 700;
			line-height: 1;
		}

		.kpi-strip {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1.4rem;
			max-width: 66rem;
			margin: 0 auto;
		}

		.kpi {
			background: linear-gradient(180deg, #f8fbff 0%, #f0f6ff 100%);
			border: 1px solid #dbe8fb;
			border-radius: 1.2rem;
			padding: 1.2rem;
			text-align: center;
			box-shadow: 0 0.8rem 2.2rem rgba(31, 83, 152, 0.1);
		}

		.kpi strong {
			display: block;
			font-size: 4rem;
			line-height: 1.2;
			color: #2e74e8;
		}

		.kpi span {
			font-size: 1.1rem;
			color: var(--muted);
		}

		.feature-grid {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 6.4rem;
			margin: 0 auto;
		}

		.feature-item {
			border-radius: 3rem;
			border: 1px solid #D5E7F9;
			background: linear-gradient(180deg, #FFF 27.36%, #E6F3FF 74.94%, #F2F8FC 100%);
			box-shadow: 0 -0.2rem 0.4rem 0 #FFF inset, 0 0.2rem 0.4rem 0 #E9F3FD inset, 0 0.2rem 0 0 #C8DDEF, 0 0.4rem 0.8rem 0 #D5E7F9;
			padding: 3.2rem 2.4rem;
			text-align: center;
		}

		.feature-item div {
			font-size: 2.4rem;
			margin-bottom: 2.4rem;
			color: #3071FF;
			margin-top: 0.8rem;
		}

		.feature-item p {
			font-size: 1.8rem;
			color: #30303D;
		}

		.faq-title {
			font-size: 2.4rem;
			margin-bottom: 3.2rem;
			color: #343434;
		}

		.faq-list {
			display: grid;
			gap: 2.4rem;
			margin: 0 auto;
		}

		details {
			border-radius: 3rem;
			border: 1px solid #D5E7F9;
			background: linear-gradient(180deg, #FFF 27.36%, #D4E4F3 74.94%, #F2F8FC 100%);
			box-shadow: 0 -2px 4px 0 #FFF inset, 0 2px 4px 0 #E9F3FD inset, 0 2px 0 0 #C8DDEF, 0 4px 8px 0 #D5E7F9;
			color: #30303D;
			padding: 1.2rem 2.4rem;
			box-shadow: 0 0.4rem 1.6rem rgba(35, 80, 140, 0.08);
		}

		summary {
			font-weight: 700;
			cursor: pointer;
			font-size: 2.2rem;
			color: #333333;
		}

		details p {
			margin-top: 0.8rem;
			font-size: 1.8rem;
			color: var(--muted);
		}

		.qr-panel {
			display: flex;
			width: 27.6rem;
			padding: 3.4rem 3.2rem;
			flex-direction: column;
			align-items: center;
			gap: 3.4rem;
			border-radius: 2.4rem;
			border: 3px solid #FFF;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.32) 123.16%);
			box-shadow: 0 0.1871rem 0.1871rem 0 #FFF inset;
		}

		.qr-image {
			width: 21.2rem;
			height: 21.2rem;
			border-radius: 0.8rem;
			padding: 1.3rem;
			border-radius: 1.5rem;
			border: 0.1413rem solid #F5F5F5;
		}

		.qr-title {
			font-size: 3rem;
			color: #1C1C1C;
			font-weight: 500;
			text-align: center;
		}

		.qr-desc {
			color: var(--muted);
			line-height: 1.5;
			font-size: 1.1rem;
		}

		.qr-url {
			margin-top: 0.6rem;
			font-size: 1rem;
			color: #4d6272;
			word-break: break-all;
		}

		.mobile-wrap {
			max-width: 430px;
			margin: 0 auto;
			background: #fff;
			padding: 30px 14px 50px;
		}

		.m-app-head {
			display: grid;
			grid-template-columns: 100px 1fr;
			gap: 10px;
			align-items: start;
			padding-bottom: 12px;
			border-bottom: 1px solid #d7d7d7;
		}

		.m-icon-box {
			width: 100px;
			height: 100px;
		}

		.m-icon-box img {
			width: 100%;
			height: 100%;
			display: block;
		}

		.m-app-title {
			font-size: 22px;
			font-weight: 700;
			margin-bottom: 4px;
		}

		.m-app-desc {
			font-size: 10px;
			line-height: 1.35;
			color: #7d7d7d;
			margin-bottom: 8px;
		}

		.m-btn-row {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.m-install-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: 30px;
			width: 69px;
			padding: 0 11px;
			border-radius: 999px;
			background: #22C55E;
			color: #fff;
			font-size: 15px;
			font-weight: 700;
			text-decoration: none;
		}

		.m-stats {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			padding: 14px 0;
			border-bottom: 1px solid #d7d7d7;
		}

		.m-stat {
			text-align: center;
		}

		.m-stat + .m-stat > .m-stat-value {
			border-left: 1px solid #d7d7d7;
		}

		.m-stat-label {
			font-size: 12px;
			color: rgba(0, 0, 0, 0.40);
		}

		.m-stat-value {
			font-size: 32px;
			line-height: 1;
			color: rgba(0, 0, 0, 0.60);
			font-weight: 700;
			padding: 7px 0;
		}

		.m-stat-sub {
			font-size: 12px;
			color: rgba(0, 0, 0, 0.40);
		}

		.m-section {
			padding: 20px 0;
			border-bottom: 1px solid #d7d7d7;
		}
		.m-section:last-child {
			border-bottom: 0;
		}

		.m-section-title {
			font-size: 22px;
			line-height: 1;
			font-weight: 700;
			margin-bottom: 12px;
			letter-spacing: -0.8px;
		}

		.m-paragraph {
			font-size: 15px;
			color: #000;
		}

		.m-rating-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8px;
			padding: 0 8px;
		}

		.m-score-box {
			display: grid;
			gap: 4px;
		}

		.m-score-main {
			font-size: 60px;
			font-weight: 700;
			letter-spacing: -1px;
		}

		.m-score-sub {
			font-size: 20px;
			line-height: 1;
			color: #8f8f8f;
		}

		/* .m-score-note {
			font-size: 12px;
			color: rgba(60, 60, 67, 0.60);
		} */
		.m-score-note_wrap {
			padding: 0 8px;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba(60, 60, 67, 0.60);
		}

		.m-bars {
			display: grid;
			gap: 8px;
			width: 223px;
			margin-bottom: 6px;
		}

		.m-bar-row {
			display: grid;
			grid-template-columns: 42px 1fr;
			align-items: center;
			gap: 8px;
		}

		.m-bar-label {
			font-size: 6px;
			line-height: 1;
			color: #8e8e93;
			text-align: right;
			letter-spacing: 1px;
		}

		.m-bar {
			height: 3px;
			background: #E5E5EA;
			border-radius: 3px;
		}

		.m-review-card {
			margin-top: 20px;
			background: #F6F6F6;
			border-radius: 8px;
			padding: 12px 18px;
		}

		.m-review-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			margin-bottom: 2px;
		}

		.m-review-head strong {
			font-size: 18px;
			font-weight: 700;
		}

		.m-review-stars {
			color: #f8b400;
			font-size: 13px;
			letter-spacing: 1px;
			margin-bottom: 3px;
		}

		.m-review-text {
			font-size: 12px;
			line-height: 1.45;
			color: #2c2c2c;
		}

		.m-meta-row {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #7d7d7d;
			margin-bottom: 5px;
		} 
		.m-meta-row-version {
			color: #8E8E93;
		}

		.m-meta-row-date {
			color: rgba(60, 60, 67, 0.60);
		}

		.m-info-table {
			display: grid;
		}

		.m-info-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #C6C6C8;
			height: 36px;
			font-size: 12px;
		}

		.m-info-key {
			color: #8E8E93;
		}

		.m-info-val {
			color: #000;
		}

		.m-disclaimer {
			font-size: 12px;
			color: #8E8E93;
			padding-top: 10px;
		}