/* roulang page: index */
:root {
			--primary: #3E91F7;
			--primary-dark: #2A7DE0;
			--primary-soft: #EAF3FE;
			--accent: #FF8345;
			--accent-dark: #F06E2A;
			--success: #10B981;
			--dark: #12263A;
			--body: #4A5B6E;
			--muted: #7B8A9D;
			--line: #E4EDF7;
			--bg: #F5F9FE;
			--white: #FFFFFF;
			--warmbg: #F8FAFD;
			--radius-sm: 10px;
			--radius: 14px;
			--radius-lg: 22px;
			--radius-pill: 999px;
			--shadow-1: 0 6px 20px rgba(40, 80, 150, 0.06);
			--shadow-2: 0 12px 32px rgba(40, 80, 150, 0.10);
			--shadow-3: 0 18px 40px rgba(40, 80, 150, 0.14);
			--transition-1: all .22s ease;
			--container-w: 1200px;
		}

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

		html {
			scroll-behavior: smooth;
		}

		body {
			font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
			background: var(--bg);
			color: var(--dark);
			font-size: 16px;
			line-height: 1.75;
			-webkit-font-smoothing: antialiased;
		}

		.grid-container {
			max-width: 1220px;
		}

		a {
			color: var(--primary);
			text-decoration: none;
			transition: color .2s ease, background .2s ease, border .2s ease, box-shadow .2s ease;
		}

		a:hover {
			color: var(--primary-dark);
		}

		img {
			max-width: 100%;
			height: auto;
			display: block;
		}

		button,
		input,
		textarea,
		select {
			font-family: inherit;
			font-size: inherit;
		}

		ul,
		ol {
			list-style: none;
		}

		.section {
			padding: 78px 0 76px;
		}

		.section-tight {
			padding: 0;
		}

		.badge {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			font-size: 13px;
			line-height: 1;
			padding: 8px 13px;
			border-radius: var(--radius-pill);
			background: var(--primary-soft);
			color: var(--primary-dark);
			font-weight: 500;
			letter-spacing: .02em;
		}

		.badge i {
			font-size: 14px;
		}

		.section-eyebrow {
			font-size: 13px;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--primary);
			margin-bottom: 12px;
			font-weight: 600;
		}

		.section-title {
			font-size: 28px;
			line-height: 1.35;
			font-weight: 700;
			color: var(--dark);
			margin-bottom: 10px;
			letter-spacing: .01em;
		}

		.section-lead {
			font-size: 17px;
			color: var(--body);
			max-width: 640px;
		}

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			height: 46px;
			padding: 0 26px;
			border-radius: var(--radius-pill);
			font-weight: 600;
			font-size: 15px;
			line-height: 1;
			border: 1.5px solid transparent;
			transition: all .24s ease;
			white-space: nowrap;
		}

		.btn:hover {
			transform: translateY(-2px);
		}

		.btn-orange {
			background: var(--accent);
			color: #fff;
			box-shadow: 0 8px 20px rgba(255, 131, 69, 0.26);
		}

		.btn-orange:hover {
			background: var(--accent-dark);
			color: #fff;
			box-shadow: 0 12px 28px rgba(255, 110, 52, 0.30);
		}

		.btn-blue {
			background: var(--primary);
			color: #fff;
			box-shadow: 0 8px 20px rgba(62, 145, 247, 0.24);
		}

		.btn-blue:hover {
			background: var(--primary-dark);
			color: #fff;
			box-shadow: 0 12px 26px rgba(42, 125, 224, 0.28);
		}

		.btn-outline {
			background: transparent;
			color: var(--primary-dark);
			border-color: var(--primary);
		}

		.btn-outline:hover {
			background: var(--primary-soft);
			color: var(--primary-dark);
			border-color: var(--primary-dark);
		}

		.btn-ghost-light {
			background: rgba(255, 255, 255, .78);
			color: var(--dark);
			border: 1.5px solid rgba(255, 255, 255, 0.6);
		}

		.btn:focus-visible,
		a:focus-visible,
		button:focus-visible,
		input:focus-visible {
			outline: 2px solid var(--primary);
			outline-offset: 3px;
		}

		.site-header {
			position: sticky;
			top: 16px;
			z-index: 100;
			padding: 0 12px;
		}

		.header-navbar {
			max-width: 1240px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: rgba(255, 255, 255, 0.78);
			backdrop-filter: blur(14px);
			-webkit-backdrop-filter: blur(14px);
			border: 1px solid rgba(255, 255, 255, 0.6);
			border-radius: var(--radius-pill);
			box-shadow: 0 8px 30px rgba(24, 52, 90, 0.08);
			padding: 10px 14px 10px 28px;
			transition: background .3s ease, box-shadow .3s ease;
		}

		.brand-logo {
			font-size: 19px;
			font-weight: 700;
			letter-spacing: .01em;
			color: var(--dark);
			flex-shrink: 0;
		}

		.brand-logo i {
			color: var(--primary);
			margin-right: 8px;
		}

		.header-menu {
			display: flex;
			align-items: center;
			gap: 20px;
		}

		.nav-links {
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.nav-item {
			margin: 0;
		}

		.nav-link {
			display: inline-flex;
			align-items: center;
			min-height: 38px;
			padding: 0 18px;
			border-radius: var(--radius-pill);
			color: var(--body);
			font-size: 15px;
			font-weight: 500;
			transition: all .2s ease;
		}

		.nav-link:hover {
			color: var(--primary-dark);
			background: rgba(234, 243, 254, 0.65);
		}

		.nav-link.active {
			background: var(--primary-soft);
			color: var(--primary-dark);
			font-weight: 600;
		}

		.navbar-login {
			height: 42px;
			padding: 0 22px;
			border-radius: var(--radius-pill);
			background: var(--primary);
			color: #fff;
			font-size: 14px;
			font-weight: 600;
			display: inline-flex;
			align-items: center;
			gap: 7px;
		}

		.navbar-login:hover {
			background: var(--primary-dark);
			color: #fff;
			box-shadow: 0 8px 20px rgba(62, 145, 247, .28);
		}

		.nav-toggle-input,
		.nav-toggle {
			display: none;
		}

		.hero {
			position: relative;
			overflow: hidden;
			padding: 84px 0 40px;
			background: radial-gradient(600px 300px at 8% 0%, rgba(62, 145, 247, .10), transparent 70%),
				radial-gradient(500px 280px at 92% 28%, rgba(62, 145, 247, .08), transparent 70%),
				linear-gradient(rgba(247, 250, 253, .92), rgba(247, 250, 253, .95)),
				url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
		}

		.hero::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 64px;
			background: linear-gradient(to bottom, transparent, var(--bg));
		}

		.hero-grid {
			position: relative;
			z-index: 2;
		}

		.hero-kicker {
			margin-bottom: 22px;
		}

		.hero-title {
			font-size: 34px;
			line-height: 1.28;
			letter-spacing: .01em;
			color: var(--dark);
			font-weight: 800;
			margin-bottom: 24px;
		}

		.hero-title .hero-title-main {
			font-size: 45px;
			line-height: 1.18;
			display: block;
			color: var(--dark);
		}

		.hero-title .hero-title-sub {
			display: block;
			margin-top: 2px;
			font-size: 27px;
			line-height: 1.4;
			font-weight: 400;
			color: var(--body);
			letter-spacing: .02em;
		}

		.hero-subtitle {
			color: var(--body);
			font-size: 17px;
			margin: 18px 0 30px;
			line-height: 1.8;
			max-width: 520px;
		}

		.hero-buttons {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			margin-bottom: 26px;
		}

		.hero-trust-holder {
			border-top: 1px solid rgba(62, 145, 247, .16);
			padding-top: 14px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px;
			color: var(--muted);
			font-size: 13px;
		}

		.hero-trust-item {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			padding: 4px 0;
		}

		.hero-trust-item i {
			color: var(--success);
		}

		.hero-login-wrapper {
			position: relative;
			z-index: 3;
			padding: 8px 0 14px;
		}

		.login-card {
			background: var(--white);
			border-radius: var(--radius-lg);
			padding: 32px 32px 26px;
			box-shadow: var(--shadow-3);
			border: 1px solid #F1F6FC;
			position: relative;
		}

		.demo-ribbon {
			position: absolute;
			top: 16px;
			right: 18px;
			background: var(--primary-soft);
			color: var(--primary-dark);
			font-size: 12px;
			padding: 5px 10px;
			border-radius: 999px;
			font-weight: 500;
			line-height: 1;
			letter-spacing: .02em;
		}

		.login-card-head {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 22px;
			padding-right: 80px;
		}

		.login-card-icon {
			width: 46px;
			height: 46px;
			border-radius: 13px;
			background: var(--primary-soft);
			color: var(--primary);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			flex-shrink: 0;
		}

		.login-card-head h3 {
			font-size: 19px;
			line-height: 1.3;
			color: var(--dark);
		}

		.login-card-head p {
			color: var(--muted);
			font-size: 12px;
			line-height: 1.2;
			margin-top: 2px;
		}

		.login-form {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.form-field label {
			font-size: 13px;
			color: var(--body);
			font-weight: 500;
			margin-bottom: 7px;
			display: block;
		}

		.form-field input {
			width: 100%;
			height: 46px;
			border-radius: var(--radius-sm);
			border: 1.5px solid var(--line);
			padding: 0 14px;
			background: #F9FBFE;
			transition: .2s;
			font-size: 15px;
		}

		.form-field input:focus {
			outline: none;
			border-color: var(--primary);
			background: #fff;
			box-shadow: 0 0 0 4px rgba(62, 145, 247, 0.18);
		}

		.login-options {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			font-size: 13px;
			color: var(--body);
			margin-top: 2px;
		}

		.login-remember {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			color: var(--muted);
			cursor: pointer;
		}

		.login-remember input {
			width: 16px;
			height: 16px;
			accent-color: var(--primary);
			cursor: pointer;
		}

		.login-forgot {
			color: var(--primary);
		}

		.login-btn {
			width: 100%;
			justify-content: center;
			height: 48px;
			border-radius: var(--radius-sm);
			background: var(--accent);
			color: #fff;
			font-size: 16px;
			gap: 10px;
		}

		.login-btn:hover {
			background: var(--accent-dark);
			color: #fff;
		}

		.login-note {
			font-size: 12px;
			line-height: 1.6;
			color: var(--muted);
			margin-top: 17px;
			padding: 10px 12px;
			border-radius: 10px;
			background: #F7FAFE;
			display: flex;
			gap: 7px;
		}

		.login-note i {
			color: var(--success);
			margin-top: 1px;
		}

		.stat-band {
			background: #FFF;
			border-top: 1px solid var(--line);
			border-bottom: 1px solid var(--line);
			padding: 26px 0;
		}

		.stat-grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 20px;
		}

		.stat-grid .stat-item {
			text-align: center;
		}

		.stat-num {
			font-size: 30px;
			line-height: 1.25;
			font-weight: 700;
			color: var(--dark);
			font-variant-numeric: tabular-nums;
		}

		.stat-num small {
			font-size: 18px;
			font-weight: 600;
			color: var(--primary);
			margin-left: 1px;
		}

		.stat-label {
			font-size: 13px;
			color: var(--body);
			line-height: 1.4;
		}

		.stat-divider {
			display: flex;
			flex-direction: row;
		}

		.text-logo-ticker {
			margin-top: 18px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			gap: 16px;
			color: var(--muted);
			font-size: 13px;
			border-top: 1px dashed var(--line);
			padding-top: 20px;
		}

		.text-logo-ticker span {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			color: var(--dark);
			opacity: 0.8;
			font-weight: 500;
		}

		.text-logo-ticker span::before {
			content: '';
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background: var(--primary);
			opacity: .4;
		}

		.story-section {
			background: var(--bg);
		}

		.story-figure {
			border-radius: 24px;
			overflow: hidden;
			position: relative;
			box-shadow: var(--shadow-2);
			height: 100%;
			min-height: 360px;
		}

		.story-figure img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.story-figure::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(200deg, rgba(62, 145, 247, .10), transparent 42%);
		}

		.story-content {
			padding: 10px 0 10px 18px;
		}

		.story-content h2 {
			font-size: 24px;
			line-height: 1.35;
			margin: 18px 0 14px;
			color: var(--dark);
		}

		.story-content p {
			color: var(--body);
			line-height: 1.9;
			font-size: 15.5px;
			margin-bottom: 16px;
		}

		.story-meta-list {
			margin: 20px 0 28px;
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.story-meta-list li {
			display: flex;
			gap: 9px;
			align-items: center;
			color: var(--body);
			font-size: 14.5px;
		}

		.story-meta-list li i {
			color: var(--primary);
			width: 18px;
			text-align: center;
		}

		.module-section {
			background: var(--bg);
			padding: 78px 0 80px;
		}

		.module-header {
			margin-bottom: 34px;
		}

		.module-title {
			font-size: 28px;
			font-weight: 700;
			color: var(--dark);
		}

		.module-lead {
			color: var(--body);
			margin-top: 6px;
			font-size: 16px;
		}

		.feature-high {
			margin-bottom: 24px;
		}

		.module-card {
			position: relative;
			border-radius: var(--radius-lg);
			overflow: hidden;
			background: var(--white);
			box-shadow: var(--shadow-1);
			transition: transform .24s ease, box-shadow .24s ease;
			display: flex;
			flex-direction: column;
		}

		.module-card:hover {
			transform: translateY(-5px);
			box-shadow: var(--shadow-3);
		}

		.module-card-cover {
			position: relative;
			height: 100%;
			min-height: 290px;
			background: #fff;
			display: block;
		}

		.module-card-cover img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			inset: 0;
		}

		.module-card-cover::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(188deg, rgba(18, 38, 58, .0) 45%, rgba(18, 38, 58, .78) 100%);
			pointer-events: none;
		}

		.module-card-content {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			color: #fff;
			padding: 26px 24px 24px;
			z-index: 1;
		}

		.module-card-content .module-card-tag {
			color: #fff;
			font-size: 12px;
			opacity: .9;
			display: inline-flex;
			align-items: center;
			gap: 5px;
			margin-bottom: 6px;
			font-weight: 400;
		}

		.module-card-content h3 {
			font-size: 22px;
			line-height: 1.35;
			font-weight: 700;
			margin-bottom: 8px;
		}

		.module-card-content p {
			font-size: 13.5px;
			line-height: 1.7;
			opacity: .95;
			max-width: 95%;
		}

		.module-card-content .card-link {
			margin-top: 16px;
			display: inline-flex;
			align-items: center;
			color: #FFEAD2;
			font-weight: 600;
			gap: 6px;
			font-size: 14px;
		}

		.module-card-content .card-link i {
			transition: transform .2s;
		}

		.module-card:hover .card-link i {
			transform: translateX(4px);
		}

		.module-card--small {
			min-height: 222px;
		}

		.module-card--small .module-card-content {
			padding: 20px 20px 18px;
		}

		.module-card--small .module-card-content h3 {
			font-size: 18px;
			margin-bottom: 6px;
		}

		.module-card--small .module-card-content p {
			font-size: 13px;
		}

		.module-card--plain {
			border-radius: 18px;
			overflow: hidden;
		}

		.module-card--plain .module-card-cover {
			height: 146px;
			min-height: auto;
			position: relative;
		}

		.module-card--plain .module-card-cover img {
			position: relative;
			height: 146px;
		}

		.module-card--plain .module-card-cover::after {
			background: none;
		}

		.module-card--plain .card-body {
			padding: 19px 19px 20px;
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.module-card--plain .card-body h3 {
			font-size: 16px;
			color: var(--dark);
			font-weight: 600;
			margin-bottom: 8px;
			line-height: 1.4;
		}

		.module-card--plain .card-body p {
			color: var(--body);
			font-size: 13px;
			line-height: 1.7;
			flex: 1;
		}

		.module-card--plain .card-meta {
			color: var(--muted);
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 14px;
			border-top: 1px solid var(--line);
			padding-top: 11px;
		}

		.news-section {
			background: var(--white);
		}

		.news-section .section-lead {
			font-size: 15px;
		}

		.news-list {
			margin-top: 28px;
		}

		.news-item {
			display: flex;
			align-items: center;
			gap: 18px;
			background: #fff;
			border: 1px solid var(--line);
			padding: 20px 22px;
			border-radius: var(--radius);
			margin-bottom: 12px;
			transition: transform .2s ease, box-shadow .2s ease, border .2s ease;
		}

		.news-item:hover {
			border-color: var(--primary);
			box-shadow: var(--shadow-2);
			transform: translateX(3px);
		}

		.news-item .news-date-box {
			width: 68px;
			text-align: center;
			flex-shrink: 0;
			background: var(--primary-soft);
			border-radius: 13px;
			color: var(--primary-dark);
			padding: 6px 4px 7px;
			line-height: 1.3;
		}

		.news-item .news-date-box strong {
			font-size: 21px;
			font-weight: 700;
			display: block;
		}

		.news-item .news-date-box span {
			font-size: 12px;
			opacity: .85;
		}

		.news-info {
			flex: 1;
			min-width: 0;
		}

		.news-info .news-cate-tag {
			font-size: 12px;
			color: var(--primary-dark);
			background: var(--primary-soft);
			border-radius: 999px;
			padding: 3px 10px;
			display: inline-flex;
			margin-bottom: 6px;
		}

		.news-info h3 {
			font-size: 17px;
			color: var(--dark);
			line-height: 1.45;
			font-weight: 600;
			margin-bottom: 4px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.news-info p {
			font-size: 13.5px;
			color: var(--body);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0;
			line-height: 1.6;
		}

		.news-arrow {
			color: var(--muted);
			flex-shrink: 0;
			margin-left: 10px;
		}

		.news-item:hover .news-arrow {
			color: var(--primary);
			transform: translateX(4px);
		}

		.news-footer {
			margin-top: 18px;
			display: flex;
			justify-content: flex-end;
		}

		.news-link-more {
			font-size: 14px;
			color: var(--primary);
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-weight: 600;
			background: var(--primary-soft);
			padding: 10px 20px;
			border-radius: var(--radius-pill);
		}

		.news-empty {
			min-height: 210px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
			background: #F6F8FB;
			border-radius: var(--radius);
		}

		.news-empty .empty-state {
			text-align: center;
			color: var(--muted);
			font-size: 15px;
			line-height: 1.8;
		}

		.news-empty .empty-state i {
			font-size: 34px;
			color: #C6D2E0;
			display: block;
			margin-bottom: 10px;
		}

		.security-section {
			background: var(--bg);
		}

		.security-visual {
			border-radius: 24px;
			overflow: hidden;
			box-shadow: var(--shadow-2);
			position: relative;
			min-height: 410px;
			height: 100%;
		}

		.security-visual img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.security-visual:after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(155deg, rgba(18,38,58,0.18) 10%, transparent 45%);
		}

		.security-content {
			padding-left: 20px;
		}

		.security-features {
			margin-top: 24px;
		}

		.security-feature-item {
			display: flex;
			width: 100%;
			gap: 14px;
			padding: 18px 0;
			border-bottom: 1px solid var(--line);
		}

		.security-feature-item:last-child {
			border-bottom: none;
		}

		.security-feature-item .sec-icon {
			width: 44px;
			height: 44px;
			border-radius: 13px;
			flex-shrink: 0;
			background: #FFFFFF;
			color: var(--primary);
			font-size: 18px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			box-shadow: var(--shadow-1);
		}

		.security-feature-item h4 {
			font-size: 16px;
			color: var(--dark);
			font-weight: 600;
			margin: 0 0 4px;
		}

		.security-feature-item p {
			color: var(--body);
			font-size: 13.5px;
			line-height: 1.7;
		}

		.cta-row {
			background: linear-gradient(130deg, #EAF3FE 15%, #F7FAFD 42%, #FFF8F0 86%);
			border: 1px solid #E9F1F9;
			border-radius: 28px;
			padding: 62px 48px;
			text-align: center;
			position: relative;
			overflow: hidden;
		}

		.cta-row:after {
			content: "";
			position: absolute;
			inset: 0;
			background: url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
			opacity: .05;
			pointer-events: none;
		}

		.cta-row>* {
			position: relative;
			z-index: 2;
		}

		.cta-badge {
			display: inline-block;
			font-size: 13px;
			background: #fff;
			color: var(--primary-dark);
			padding: 7px 16px;
			border-radius: 999px;
			margin-bottom: 16px;
			box-shadow: var(--shadow-1);
		}

		.cta-row h2 {
			font-size: 28px;
			line-height: 1.3;
			color: var(--dark);
			font-weight: 700;
			margin-bottom: 16px;
		}

		.cta-row .cta-group {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 14px;
			margin-top: 22px;
		}

		.site-footer {
			background: #FFFFFF;
			border-top: 1px solid var(--line);
			padding-top: 60px;
			margin-top: 90px;
		}

		.footer-main {
			padding-bottom: 40px;
		}

		.footer-brand-text {
			font-size: 20px;
			font-weight: 700;
			color: var(--dark);
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 14px;
		}

		.footer-brand-text i {
			color: var(--primary);
		}

		.footer-description {
			color: var(--body);
			font-size: 14px;
			line-height: 1.9;
			max-width: 320px;
		}

		.footer-heading {
			font-size: 15px;
			font-weight: 700;
			color: var(--dark);
			margin-bottom: 18px;
			margin-top: 8px;
		}

		.footer-links li {
			margin-bottom: 10px;
		}

		.footer-links a {
			color: var(--body);
			font-size: 14px;
			display: inline-flex;
			align-items: center;
			gap: 5px;
			transition: all .2s ease;
		}

		.footer-links a:hover {
			color: var(--primary);
			padding-left: 4px;
		}

		.footer-contact li {
			font-size: 14px;
			color: var(--body);
			margin-bottom: 10px;
			display: flex;
			align-items: flex-start;
			gap: 8px;
		}

		.footer-contact i {
			color: var(--primary);
			width: 17px;
			text-align: center;
			margin-top: 3px;
		}

		.footer-bottom {
			border-top: 1px solid var(--line);
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px 30px;
			justify-content: center;
			padding: 22px 0 24px;
			color: var(--muted);
			font-size: 13px;
		}

		.footer-bottom i {
			margin-right: 1px;
		}

		.footer-bottom .footer-safe-domain {
			color: var(--body);
			font-weight: 500;
		}

		.footer-copy {
			line-height: 1.6;
			text-align: center;
		}

		/* inner utility */
		.mt-0 {
			margin-top: 0 !important;
		}

		.mb-0 {
			margin-bottom: 0 !important;
		}

		/* responsive */
		@media (max-width: 1024px) {
			.section {
				padding: 64px 0 60px;
			}
			.hero-title .hero-title-main {
				font-size: 38px;
			}
			.hero-title .hero-title-sub {
				font-size: 23px;
			}
			.stat-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
			}
			.stat-grid .stat-item {
				text-align: center;
				border: 1px solid var(--line);
				padding: 20px 12px;
				border-radius: var(--radius);
				background: #fff;
			}
			.security-content {
				padding-left: 0;
				margin-top: 24px;
			}
		}

		@media (max-width: 860px) {
			.logo-nav {
				gap: 18px;
			}
			.hero {
				padding-top: 48px;
			}
			.hero-login-wrapper {
				padding: 26px 0 8px;
			}
			.nav-links {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				width: 100%;
			}
			.nav-item {
				width: 100%;
			}
			.nav-link {
				width: 100%;
				justify-content: flex-start;
				padding: 10px 18px;
				border-radius: 12px;
			}
			.header-menu {
				display: flex;
				flex-direction: column;
				align-items: stretch;
				gap: 12px;
				position: absolute;
				top: calc(100% + 10px);
				left: 8px;
				right: 8px;
				background: rgba(255, 255, 255, .97);
				backdrop-filter: blur(14px);
				padding: 18px;
				border-radius: 22px;
				box-shadow: var(--shadow-3);
				opacity: 0;
				visibility: hidden;
				transform: translateY(-8px);
				transition: all .2s ease;
			}
			.nav-toggle {
				display: block;
				width: 42px;
				height: 42px;
				margin-left: 4px;
				border-radius: 999px;
				background: rgba(255, 255, 255, 0.25);
				border: 1px solid rgba(255, 255, 255, 0.3);
				position: relative;
				cursor: pointer;
				z-index: 12;
				flex-shrink: 0;
			}
			.nav-toggle span,
			.nav-toggle span:before,
			.nav-toggle span:after {
				position: absolute;
				left: 11px;
				width: 20px;
				height: 2px;
				border-radius: 999px;
				background: var(--dark);
				content: '';
				transition: all .3s ease;
			}
			.nav-toggle span {
				top: 20px;
			}
			.nav-toggle span:before {
				top: -7px;
			}
			.nav-toggle span:after {
				top: 7px;
			}
			.nav-toggle-input {
				display: none;
			}
			.header-menu .navbar-login {
				width: 100%;
				height: 46px;
				justify-content: center;
				margin-top: 6px;
			}
			.nav-toggle-input:checked~.header-menu {
				opacity: 1;
				visibility: visible;
				transform: translateY(0);
			}
			.nav-toggle-input:checked+label .nav-toggle span {
				background: transparent;
			}
			.nav-toggle-input:checked+label .nav-toggle span:before {
				transform: rotate(45deg);
				top: 0;
			}
			.nav-toggle-input:checked+label .nav-toggle span:after {
				transform: rotate(-45deg);
				top: 0;
			}
			.nav-toggle-input:checked~.header-menu {
				display: flex;
			}
			.stat-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.feature-high .module-card-cover {
				min-height: 260px;
			}
		}

		@media (max-width: 640px) {
			body {
				font-size: 15px;
			}
			.section {
				padding: 50px 0 44px;
			}
			.hero {
				padding: 26px 0 34px;
			}
			.hero-title {
				font-size: 28px;
			}
			.hero-title .hero-title-main {
				font-size: 32px;
			}
			.hero-title .hero-title-sub {
				font-size: 20px;
				line-height: 1.4;
			}
			.hero-subtitle {
				font-size: 15px;
			}
			.hero-buttons .btn {
				width: 100%;
				justify-content: center;
			}
			.login-card {
				padding: 24px 20px 22px;
			}
			.demo-ribbon {
				top: 13px;
				right: 14px;
			}
			.section-title {
				font-size: 24px;
			}
			.section-lead {
				font-size: 14px;
			}
			.module-title {
				font-size: 24px;
			}
			.stat-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 10px;
			}
			.stat-num {
				font-size: 26px;
			}
			.text-logo-ticker {
				gap: 8px 6px;
				font-size: 12px;
				line-height: 1.6;
				text-align: center;
			}
			.story-figure {
				min-height: 260px;
			}
			.story-content {
				padding: 24px 0 0;
			}
			.security-visual {
				min-height: 240px;
			}
			.cta-row {
				padding: 42px 18px;
			}
			.cta-row h2 {
				font-size: 22px;
			}
			.cta-group .btn {
				width: 100%;
			}
			.news-item {
				flex-wrap: wrap;
				padding: 17px 16px;
				gap: 12px;
			}
			.news-info {
				width: calc(100% - 96px);
			}
			.news-item .news-date-box {
				width: 62px;
			}
			.news-info h3 {
				font-size: 15.5px;
				white-space: normal;
				overflow: visible;
				text-overflow: clip;
			}
			.news-info p {
				white-space: normal;
			}
			.news-arrow {
				display: none;
			}
			.footer-bottom {
				text-align: center;
			}
			.site-header {
				top: 8px;
			}
			.header-navbar {
				padding-left: 18px;
			}
			.brand-logo {
				font-size: 17px;
			}
		}

/* roulang page: article */
:root{
    --primary:#3E91F7;
    --primary-dark:#2B7FE8;
    --primary-soft:#EAF3FE;
    --primary-faint:#F2F8FF;
    --accent:#FF8345;
    --accent-dark:#F26A25;
    --success:#10B981;
    --text:#12263A;
    --text-sub:#4A5B6E;
    --text-soft:#8A9DB0;
    --line:#E4EDF7;
    --line-deep:#DCE7F1;
    --bg-body:#F5F9FE;
    --bg-card:#FFFFFF;
    --radius-xs:8px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-pill:999px;
    --shadow-1:0 6px 20px rgba(40,80,150,.06);
    --shadow-2:0 12px 32px rgba(40,80,150,.10);
    --shadow-3:0 18px 46px rgba(40,80,150,.12);
    --space-section:86px;
    --font-main:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
    margin:0;
    font-family:var(--font-main);
    font-size:16px;
    line-height:1.75;
    color:var(--text);
    background:var(--bg-body);
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease;}
ul,ol{margin:0;padding:0;list-style:none;}
button,input,textarea,select{font-family:inherit;}
h1,h2,h3,h4,h5{font-weight:700;line-height:1.35;margin:0;}
.grid-container{max-width:1200px;margin:0 auto;padding:0 20px;}
.fa-regular,.fa-solid,.fa-brands{font-smooth:auto;}
.page-bg-decor{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
    radial-gradient(circle at 8% 12%,rgba(62,145,247,.12),transparent 28%),
    radial-gradient(circle at 92% 20%,rgba(255,131,69,.08),transparent 24%),
    radial-gradient(circle at 70% 80%,rgba(62,145,247,.08),transparent 26%),
    var(--bg-body);
}

/* ===== pill navigation ===== */
.site-header{
    position:fixed;
    top:16px;
    left:12px;
    right:12px;
    z-index:120;
    pointer-events:none;
}
.header-navbar{
    max-width:1240px;
    margin:0 auto;
    pointer-events:auto;
    display:flex;
    align-items:center;
    min-height:64px;
    padding:6px 10px 6px 22px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 8px 30px rgba(24,52,90,.08);
    transition:background .25s ease,box-shadow .25s ease,min-height .25s ease;
}
.brand-logo{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:19px;
    font-weight:800;
    color:var(--text);
    white-space:nowrap;
    letter-spacing:-.02em;
}
.brand-logo i{
    color:var(--primary);
    font-size:20px;
    background:var(--primary-soft);
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
}
.header-menu{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:12px;
}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 17px;
    border-radius:var(--radius-pill);
    font-size:15px;
    font-weight:500;
    color:var(--text-sub);
    white-space:nowrap;
    transition:background .2s ease,color .2s ease;
}
.nav-link:hover{background:var(--primary-soft);color:var(--primary);}
.nav-link.active{background:var(--primary-soft);color:var(--primary);font-weight:600;}
.navbar-login{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:0 22px;
    border-radius:var(--radius-pill);
    background:var(--accent);
    color:#fff;
    font-size:15px;
    font-weight:600;
    transition:background .2s ease,transform .2s ease;
}
.navbar-login:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px);}
.nav-toggle-input{position:absolute;opacity:0;width:0;height:0;}
.nav-toggle{
    display:none;
    width:38px;
    height:38px;
    border-radius:12px;
    background:var(--primary-soft);
    cursor:pointer;
    position:relative;
    margin-left:auto;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
    content:"";
    position:absolute;
    width:18px;
    height:2px;
    background:var(--primary);
    border-radius:2px;
    left:50%;
    margin-left:-9px;
    transition:transform .25s,top .25s,opacity .25s;
}
.nav-toggle span{top:50%;margin-top:-1px;}
.nav-toggle span::before{top:-6px;margin-left:0;left:0;}
.nav-toggle span::after{top:6px;margin-left:0;left:0;}
.nav-toggle-input:checked ~ .nav-toggle span{background:transparent;}
.nav-toggle-input:checked ~ .nav-toggle span::before{transform:rotate(45deg);top:0;}
.nav-toggle-input:checked ~ .nav-toggle span::after{transform:rotate(-45deg);top:0;}

/* ===== common button ===== */
.btn-main{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 26px;
    border:1px solid transparent;
    border-radius:var(--radius-sm);
    background:var(--accent);
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.btn-main:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,131,69,.25);}
.btn-line{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 26px;
    border:1.5px solid rgba(62,145,247,.4);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.6);
    color:var(--primary);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.btn-line:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);transform:translateY(-2px);}
.btn-block{width:100%;}

/* ===== article page main ===== */
.article-page-main{
    position:relative;
    padding:132px 0 32px;
    min-height:76vh;
}
.article-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:13px;
    line-height:1.4;
    color:var(--text-soft);
    margin-bottom:26px;
    letter-spacing:.01em;
}
.article-breadcrumb a{color:var(--text-sub);transition:color .2s;}
.article-breadcrumb a:hover{color:var(--primary);}
.article-breadcrumb .crumb-sep{color:var(--line-deep);font-size:12px;}
.article-breadcrumb .crumb-current{
    color:var(--text);
    max-width:330px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.article-grid{margin-bottom:24px;}

.article-primary{padding-right:8px;}
.article-detail-card{
    background:var(--bg-card);
    border:1px solid rgba(232,240,248,.8);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-1);
    padding:38px 40px 42px;
    margin-bottom:26px;
}
.article-head{
    padding-bottom:30px;
    margin-bottom:18px;
    border-bottom:1px solid var(--line);
}
.article-tagline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}
.tag-soft{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--primary-soft);
    color:var(--primary);
    border-radius:var(--radius-pill);
    padding:5px 13px;
    font-size:13px;
    font-weight:600;
}
.head-meta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text-soft);
    font-size:13px;
}
.head-meta i{color:var(--primary);}
.article-detail-title{
    font-size:34px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.02em;
    color:var(--text);
    margin-bottom:16px;
}
.article-source-tip{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    color:var(--text-sub);
    font-size:13px;
    margin:0;
}
.article-source-tip i{color:var(--success);}

.article-content-wrap{
    max-width:760px;
    font-size:16px;
    line-height:1.85;
    color:var(--text);
    padding-bottom:12px;
}
.article-content-wrap p{
    margin:0 0 1.5em;
}
.article-content-wrap img{
    width:auto;
    max-width:100%;
    height:auto;
    border-radius:20px;
    margin:1.8em 0;
    box-shadow:var(--shadow-1);
}
.article-content-wrap h2,.article-content-wrap h3,.article-content-wrap h4{
    color:var(--text);
    scroll-margin-top:110px;
}
.article-content-wrap h2{
    font-size:25px;
    margin:1.9em 0 .8em;
    padding-bottom:.55em;
    border-bottom:1px solid var(--line);
    letter-spacing:-.01em;
}
.article-content-wrap h3{
    font-size:21px;
    margin:1.8em 0 .6em;
}
.article-content-wrap h4{
    font-size:18px;
    margin:1.4em 0 .4em;
}
.article-content-wrap a{
    color:var(--primary);
    border-bottom:1px solid rgba(62,145,247,.35);
}
.article-content-wrap a:hover{color:var(--primary-dark);border-bottom-color:var(--primary);}
.article-content-wrap blockquote{
    margin:1.8em 0;
    padding:20px 22px;
    border-left:4px solid var(--primary);
    background:var(--primary-faint);
    border-radius:0 12px 12px 0;
    color:var(--text-sub);
}
.article-content-wrap ul,.article-content-wrap ol{
    margin:0 0 1.5em;
    padding-left:1.3em;
}
.article-content-wrap li{margin-bottom:.5em;}
.article-content-wrap ul li{list-style:disc;}
.article-content-wrap ol li{list-style:decimal;}
.article-content-wrap table{
    width:100%;
    border-collapse:collapse;
    margin:1.6em 0;
    font-size:14px;
}
.article-content-wrap th,.article-content-wrap td{
    border:1px solid var(--line);
    padding:11px 13px;
    text-align:left;
    vertical-align:top;
}
.article-content-wrap th{background:var(--primary-faint);font-weight:600;}
.article-content-wrap pre{
    background:#0F1B2D;
    color:#DDE8F5;
    border-radius:16px;
    padding:20px 22px;
    overflow-x:auto;
    font-size:14px;
    line-height:1.7;
    margin:1.8em 0;
}
.article-content-wrap code{
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
    font-size:.92em;
    background:#EDF3FA;
    color:#215FA6;
    border-radius:5px;
    padding:2px 6px;
}
.article-content-wrap pre code{background:transparent;color:inherit;padding:0;border-radius:0;}

/* ===== detail footer cards ===== */
.article-foot-links{
    margin-top:34px;
    padding-top:26px;
    border-top:1px solid var(--line);
}
.article-foot-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:16px;
}
.article-foot-heading h3{font-size:19px;}
.article-foot-heading a{
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--primary);
}
.foot-card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.foot-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:#FAFCFF;
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:18px 16px;
    transition:transform .22s,box-shadow .22s,border-color .22s;
}
.foot-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--primary);}
.foot-card-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    background:var(--primary-soft);
    font-size:16px;
}
.foot-card-info strong{font-size:15px;display:block;margin-bottom:4px;}
.foot-card-info span{
    font-size:13px;
    color:var(--text-sub);
    line-height:1.5;
    display:block;
}
.foot-card-info em{
    font-style:normal;
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    color:var(--primary);
    margin-top:8px;
}

/* ===== aside module ===== */
.article-aside{padding-left:8px;}
.aside-card{
    background:var(--bg-card);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-1);
    border:1px solid rgba(232,240,248,.8);
    padding:24px 22px;
    margin-bottom:20px;
}
.aside-login-entry{
    background:linear-gradient(140deg,#FFFFFF,#F5FAFF);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-2);
    border:1px solid var(--line);
    padding:24px 22px;
    margin-bottom:20px;
}
.login-entry-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    background:var(--primary);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:14px;
    box-shadow:0 8px 20px rgba(62,145,247,.26);
}
.login-entry-title{font-size:19px;margin-bottom:8px;}
.login-entry-desc{font-size:14px;color:var(--text-sub);line-height:1.7;margin:0 0 16px;}
.btn-login-guide{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--accent);
    color:#fff;
    min-height:46px;
    padding:0 18px;
    width:100%;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    transition:background .2s,transform .2s,box-shadow .2s;
}
.btn-login-guide:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,131,69,.22);}
.aside-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    color:var(--text);
    font-weight:700;
    border-left:3px solid var(--primary);
    padding-left:11px;
    margin-bottom:17px;
    line-height:1.3;
}
.aside-title i{color:var(--primary);}
.article-info-list li{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:10px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
}
.article-info-list li:last-child{border:0;padding-bottom:0;}
.article-info-list .info-label{color:var(--text-soft);flex-shrink:0;}
.article-info-list .info-value{color:var(--text-sub);text-align:right;word-break:break-all;}

.aside-faq details{
    border-bottom:1px solid var(--line);
    padding:14px 0;
}
.aside-faq details:first-child{padding-top:0;}
.aside-faq details:last-child{border-bottom:0;padding-bottom:0;}
.aside-faq summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    color:var(--text);
    line-height:1.5;
}
.aside-faq summary::-webkit-details-marker{display:none;}
.aside-faq summary i{
    color:var(--primary);
    font-size:14px;
    flex:0 0 auto;
    transition:transform .25s;
}
.aside-faq details[open] summary i{transform:rotate(45deg);}
.aside-faq .faq-answer{
    color:var(--text-sub);
    font-size:13px;
    line-height:1.75;
    padding-top:10px;
}
.aside-media-card{
    border-radius:var(--radius-md);
    overflow:hidden;
    background:var(--bg-card);
    box-shadow:var(--shadow-1);
    border:1px solid var(--line);
    margin-bottom:20px;
    position:relative;
}
.aside-media-card img{width:100%;height:126px;object-fit:cover;}
.aside-media-card-body{
    padding:17px 18px 20px;
    background:#fff;
}
.aside-media-card-body strong{
    font-size:15px;
    line-height:1.5;
    display:block;
    margin-bottom:7px;
}
.aside-media-card-body span{
    font-size:13px;
    color:var(--text-sub);
    line-height:1.6;
    display:block;
    margin-bottom:10px;
}
.aside-media-card-body a{
    color:var(--primary);
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:600;
}

/* need some section on very mobile */
.faq-collapse-title{font-size:17px;margin-bottom:14px;}

/* ===== not found ===== */
.article-empty {
	max-width:560px;
	margin:40px auto;
	background:#fff;
	border-radius:var(--radius-lg);
	border:1px solid var(--line);
	box-shadow:var(--shadow-1);
	padding:70px 30px;
	text-align:center;
	min-height:320px;
}
.article-empty i{
	font-size:40px;
	width:74px;
	height:74px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:var(--primary-soft);
	color:var(--primary);
	border-radius:24px;
	margin-bottom:20px;
}
.article-empty h1{
	font-size:26px;
	margin-bottom:14px;
}
.article-empty a{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:16px;
	min-height:46px;
	padding:0 22px;
	background:var(--primary);
	color:#fff;
	border-radius:12px;
	font-size:15px;
	font-weight:600;
	transition:transform .22s,background .22s;
}
.article-empty a:hover{background:var(--primary-dark);transform:translateY(-2px);}
.article-empty .empty-backlink{
	background:transparent;
	color:var(--primary);
	border:1px solid var(--primary);
	margin-left:10px;
}
.article-empty .empty-backlink:hover{background:var(--primary-soft);}

/* ===== safety service band ===== */
.article-safety-cta{
	margin:10px 0 58px;
	border-radius:var(--radius-lg);
	overflow:hidden;
	position:relative;
	background:#fff;
	background-image:linear-gradient(94deg,rgba(18,38,58,.88),rgba(28,72,122,.76)),url('/assets/images/backpic/back-1.webp');
	background-size:cover;
	background-position:center;
	padding:38px 0;
}
.article-safety-inner{
	text-align:center;
	color:#fff;
}
.article-safety-inner i{
	font-size:30px;
	width:60px;
	height:60px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:18px;
	background:rgba(255,255,255,.14);
	color:#fff;
	margin-bottom:14px;
	border:1px solid rgba(255,255,255,.24);
}
.article-safety-inner h2{
	color:#fff;
	font-size:25px;
	font-weight:700;
	margin-bottom:10px;
}
.article-safety-inner p{
	color:rgba(255,255,255,.88);
	font-size:14px;
	width:min(700px,100%);
	margin:0 auto 20px;
	line-height:1.8;
}
.article-safety-inner a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:48px;
	padding:0 30px;
	background:#fff;
	color:var(--primary-dark);
	font-weight:700;
	font-size:15px;
	border-radius:12px;
	transition:transform .22s,background .22s;
}
.article-safety-inner a:hover{background:var(--primary-soft);transform:translateY(-2px);}

/* ===== footer ===== */
.site-footer{
	background:#FBFCFE;
	border-top:1px solid var(--line);
	padding:48px 0 20px;
	margin-top:20px;
}
.footer-main{
	padding-bottom:30px;
	border-bottom:1px solid var(--line);
	margin-bottom:18px;
}
.footer-brand-text{
	font-size:19px;
	font-weight:800;
	color:var(--text);
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin-bottom:12px;
}
.footer-brand-text i{
	color:var(--primary);
	background:var(--primary-soft);
	width:32px;
	height:32px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	font-size:16px;
}
.footer-description{
	color:var(--text-sub);
	font-size:13px;
	line-height:1.8;
	margin:0;
	max-width:400px;
}
.footer-heading{
	font-size:15px;
	font-weight:700;
	color:var(--text);
	margin-bottom:14px;
}
.footer-links li{margin-bottom:8px;}
.footer-links a{
	display:inline-flex;
	align-items:center;
	gap:4px;
	font-size:13px;
	color:var(--text-sub);
	transition:color .2s,padding-left .2s;
}
.footer-links a:hover{color:var(--primary);padding-left:4px;}
.footer-links i{color:var(--primary);font-size:12px;}
.footer-contact{margin-top:0;}
.footer-contact li{display:flex;gap:8px;font-size:13px;color:var(--text-sub);margin-bottom:9px;line-height:1.7;}
.footer-contact i{color:var(--primary);margin-top:3px;}
.footer-bottom{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:8px 18px;
	color:var(--text-soft);
	font-size:12px;
	padding-top:8px;
}
.footer-bottom span{display:inline-flex;align-items:center;gap:5px;}
.footer-icp{
	color:#B9C5D2;
}

/* ===== responsive ===== */
@media(max-width:1024px){
	.article-page-main{padding-top:118px;}
	.site-header{left:8px;right:8px;}
	.header-navbar{min-height:60px;}
	.nav-link{padding:9px 11px;font-size:14px;}
	.brand-logo{font-size:16px;}
	.article-primary{padding-right:0;}
	.article-aside{padding-left:0;}
	.article-detail-card{padding:30px 24px;}
	.article-detail-title{font-size:30px;}
	.foot-card-grid{grid-template-columns:1fr;}
}
@media(max-width:860px){
	.header-navbar{
		flex-wrap:wrap;
		border-radius:20px;
		padding:8px 8px 8px 14px;
		min-height:60px;
	}
	.nav-toggle{display:block;}
	.nav-toggle-input:checked ~ .header-menu{
		display:flex;
	}
	.header-menu{
		display:none;
		flex-basis:100%;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		padding:12px 4px 8px;
	}
	.nav-links{
		flex-direction:column;
		align-items:stretch;
		gap:2px;
		width:100%;
	}
	.nav-link{
		display:flex;
		justify-content:flex-start;
		width:100%;
		border-radius:12px;
		padding:12px 14px;
	}
	.navbar-login{
		margin-top:8px;
		display:flex;
		width:100%;
	}
	.brand-logo i{width:30px;height:30px;}
	.article-page-main{padding-top:100px;}
	.article-detail-card{padding:24px 18px;}
	.article-detail-title{font-size:26px;line-height:1.4;}
	.article-content-wrap{font-size:15px;}
	.article-tagline{gap:8px 12px;}
	.foot-card-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
	.article-page-main{padding:90px 0 20px;}
	.article-breadcrumb{margin-bottom:18px;}
	.article-breadcrumb .crumb-current{max-width:150px;}
	.article-detail-card{border-radius:16px;padding:22px 16px;box-shadow:none;border:1px solid var(--line);}
	.article-head{padding-bottom:20px;}
	.article-detail-title{font-size:23px;}
	.head-meta{font-size:12px;}
	.aside-card,.aside-login-entry{padding:20px 16px;}
	.article-safe-cta-row{padding:28px 0;}
	.footer-main{border-bottom:0;margin-bottom:0;}
	.footer-bottom{
		flex-direction:column;
		align-items:flex-start;
		font-size:12px;
	}
	.nav-toggle-input:checked ~ .header-menu{max-height:520px;}
	.header-menu{
		max-height:0;
		overflow:hidden;
		transition:max-height .25s ease;
	}
}

/* roulang page: category1 */
:root {
			--main: #3E91F7;
			--main-deep: #2B76DC;
			--main-light: #EAF3FE;
			--orange: #FF8345;
			--orange-deep: #EE6D2B;
			--green-online: #10B981;
			--bg-page: #F5F9FE;
			--card-bg: #FFFFFF;
			--text-1: #12263A;
			--text-2: #4A5B6E;
			--text-3: #8499AF;
			--line: #E3EDF7;
			--line-soft: rgba(45, 90, 150, .09);
			--shadow-sm: 0 6px 20px rgba(40, 80, 150, .06);
			--shadow-md: 0 16px 42px rgba(40, 80, 150, .10);
			--shadow-lg: 0 24px 56px rgba(21, 54, 105, .12);
			--radius-sm: 12px;
			--radius-md: 18px;
			--radius-lg: 26px;
			--radius-pill: 999px;
			--font-stack: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}
		html {
			scroll-behavior: smooth;
		}
		body {
			margin: 0;
			font-family: var(--font-stack);
			background: var(--bg-page);
			color: var(--text-1);
			font-size: 16px;
			line-height: 1.7;
			-webkit-font-smoothing: antialiased;
			text-rendering: optimizeLegibility;
		}
		body,
		div,
		section,
		header,
		footer,
		main,
		aside,
		nav {
			box-sizing: border-box;
		}
		img {
			max-width: 100%;
			height: auto;
			display: block;
		}
		a {
			color: var(--main);
			text-decoration: none;
			transition: color .25s ease, background .25s ease, border-color .25s ease;
		}
		ul,
		ol {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		p {
			margin: 0 0 16px;
		}
		h1,
		h2,
		h3,
		h4,
		h5 {
			margin: 0;
			font-weight: 700;
			color: var(--text-1);
			letter-spacing: -0.015em;
		}
		button,
		input,
		select,
		textarea {
			font-family: inherit;
			font-size: inherit;
		}
		button:focus-visible,
		a:focus-visible,
		input:focus-visible,
		summary:focus-visible {
			outline: 2px solid var(--main);
			outline-offset: 4px;
			border-radius: 10px;
		}

		.grid-container {
			max-width: 1200px;
		}

		/* ===== Buttons ===== */
		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			border-radius: var(--radius-pill);
			border: 1.5px solid transparent;
			font-weight: 600;
			font-size: 15px;
			line-height: 1.2;
			padding: 0 26px;
			height: 46px;
			transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
			white-space: nowrap;
			cursor: pointer;
			user-select: none;
		}
		.btn i {
			font-size: 15px;
		}
		.btn-blue {
			background: var(--main);
			color: #fff;
		}
		.btn-blue:hover {
			background: var(--main-deep);
			transform: translateY(-2px);
			box-shadow: 0 10px 22px rgba(46, 110, 217, .22);
			color: #fff;
		}
		.btn-orange {
			background: var(--orange);
			color: #fff;
		}
		.btn-orange:hover {
			background: var(--orange-deep);
			transform: translateY(-2px);
			box-shadow: 0 10px 24px rgba(255, 131, 69, .26);
			color: #fff;
		}
		.btn-outline {
			background: rgba(255, 255, 255, .8);
			border-color: #C7D9EC;
			color: var(--text-1);
		}
		.btn-outline:hover {
			background: var(--main-light);
			border-color: var(--main);
			color: var(--main);
			transform: translateY(-2px);
		}

		/* ===== Section Shared ===== */
		.section {
			padding: 92px 0;
		}
		.section-alt {
			background: #EDF4FC;
		}
		.section-plain {
			background: #FFF;
		}
		.sec-head {
			max-width: 840px;
			margin-bottom: 48px;
		}
		.sec-head .eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 7px 16px;
			border-radius: var(--radius-pill);
			background: var(--main-light);
			color: var(--main);
			font-size: 13px;
			font-weight: 600;
			margin-bottom: 16px;
		}
		.sec-title {
			font-size: 34px;
			line-height: 1.32;
			margin-bottom: 16px;
		}
		.sec-sub {
			font-size: 16px;
			color: var(--text-2);
			line-height: 1.8;
			margin-bottom: 0;
		}

		/* ===== Site Header / Capsule Nav ===== */
		.site-header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			padding: 14px 14px 0;
			display: flex;
			justify-content: center;
			transition: padding .3s ease;
		}
		.header-navbar {
			position: relative;
			width: 100%;
			max-width: 1220px;
			height: 64px;
			display: flex;
			align-items: center;
			padding: 0 18px 0 20px;
			background: rgba(255, 255, 255, .76);
			backdrop-filter: blur(18px);
			-webkit-backdrop-filter: blur(18px);
			border: 1px solid rgba(255, 255, 255, .68);
			border-radius: var(--radius-pill);
			box-shadow: 0 8px 30px rgba(23, 52, 90, .09);
			transition: background .3s, box-shadow .3s, height .3s;
		}
		.site-header.scrolled {
			padding-top: 6px;
		}
		.site-header.scrolled .header-navbar {
			background: rgba(255, 255, 255, .94);
			box-shadow: 0 10px 32px rgba(25, 64, 118, .12);
		}
		.brand-logo {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			font-size: 20px;
			font-weight: 800;
			letter-spacing: -0.01em;
			color: var(--text-1);
			white-space: nowrap;
		}
		.brand-logo i {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 34px;
			height: 34px;
			border-radius: 11px;
			background: var(--main-light);
			color: var(--main);
			font-size: 16px;
		}
		.header-menu {
			display: flex;
			align-items: center;
			margin-left: auto;
		}
		.nav-links {
			display: flex;
			align-items: center;
			gap: 4px;
		}
		.nav-item {
			margin: 0;
		}
		.nav-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: 42px;
			padding: 0 17px;
			border-radius: var(--radius-pill);
			color: var(--text-2);
			font-size: 15px;
			font-weight: 500;
			background: transparent;
		}
		.nav-link:hover {
			background: #F1F7FD;
			color: var(--main);
		}
		.nav-link.active {
			background: var(--main-light);
			color: var(--main);
			font-weight: 600;
		}
		.navbar-login {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			height: 42px;
			padding: 0 22px;
			margin-left: 10px;
			border-radius: var(--radius-pill);
			background: var(--orange);
			color: #fff;
			font-weight: 600;
			font-size: 14px;
			transition: background .25s ease, transform .25s ease, box-shadow .25s;
		}
		.navbar-login:hover {
			background: var(--orange-deep);
			color: #fff;
			box-shadow: 0 8px 18px rgba(255, 131, 69, .24);
			transform: translateY(-1px);
		}
		.nav-toggle,
		.nav-toggle-input {
			display: none;
		}
		.nav-toggle {
			position: relative;
			margin-left: auto;
			width: 42px;
			height: 42px;
			border-radius: 50%;
			cursor: pointer;
			background: var(--main-light);
			align-items: center;
			flex-direction: column;
			justify-content: center;
			gap: 5px;
		}
		.nav-toggle span,
		.nav-toggle span::before,
		.nav-toggle span::after {
			content: "";
			display: block;
			width: 18px;
			height: 2px;
			background: var(--text-1);
			border-radius: 4px;
			transition: transform .3s ease, opacity .3s ease;
		}
		.nav-toggle span::before {
			transform: translateY(-5px);
		}
		.nav-toggle span::after {
			transform: translateY(3px);
		}
		.nav-toggle-input:checked ~ .header-menu + .nav-toggle span {
			background: transparent;
		}
		.nav-toggle-input:checked ~ .nav-toggle span::before {
			transform: rotate(45deg);
		}
		.nav-toggle-input:checked ~ .nav-toggle span::after {
			transform: rotate(-45deg);
		}

		/* ===== Page Hero ===== */
		.page-hero {
			position: relative;
			padding: 176px 0 78px;
			background-color: #EAF4FE;
			background-image: linear-gradient(100deg, rgba(231, 244, 255, .94), rgba(244, 249, 253, .88)), url('/assets/images/backpic/back-1.webp');
			background-size: cover;
			background-position: center;
			overflow: hidden;
		}
		.page-hero::before {
			content: "";
			position: absolute;
			top: -140px;
			left: -40px;
			width: 420px;
			height: 420px;
			background: radial-gradient(circle, rgba(62, 145, 247, .16), transparent 65%);
			pointer-events: none;
		}
		.page-hero::after {
			content: "";
			position: absolute;
			right: -100px;
			bottom: -160px;
			width: 460px;
			height: 460px;
			background: radial-gradient(circle, rgba(255, 131, 69, .10), transparent 65%);
			pointer-events: none;
		}
		.page-hero-content {
			position: relative;
			z-index: 1;
		}
		.hero-breadcrumb {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 13px;
			color: var(--text-3);
			margin-bottom: 18px;
		}
		.hero-breadcrumb a {
			color: var(--main);
			font-weight: 500;
		}
		.hero-breadcrumb i {
			font-size: 12px;
			color: #AABBD0;
		}
		.page-hero h1 {
			font-size: 46px;
			line-height: 1.2;
			font-weight: 800;
			margin-bottom: 18px;
			letter-spacing: -0.02em;
			color: #102B4A;
		}
		.page-hero .hero-lead {
			max-width: 760px;
			font-size: 17px;
			line-height: 1.86;
			color: var(--text-2);
			margin-bottom: 28px;
		}
		.hero-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
		}
		.hero-tag {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			padding: 9px 16px;
			border-radius: var(--radius-pill);
			background: rgba(255, 255, 255, .72);
			border: 1px solid rgba(255, 255, 255, .8);
			color: var(--text-2);
			font-size: 13px;
			box-shadow: 0 6px 16px rgba(53, 92, 144, .05);
		}
		.hero-tag i {
			color: var(--main);
		}

		/* ===== Overview / Intro ===== */
		.overview-wrap {
			align-items: center;
		}
		.overview-text .sec-kicker {
			display: inline-flex;
			align-items: center;
			padding: 6px 14px;
			border-radius: var(--radius-pill);
			background: var(--main-light);
			color: var(--main);
			font-size: 13px;
			font-weight: 600;
			margin-bottom: 16px;
		}
		.overview-text h2 {
			font-size: 32px;
			line-height: 1.35;
			margin-bottom: 22px;
		}
		.overview-text .lead {
			color: var(--text-2);
			font-size: 16px;
			line-height: 1.85;
			margin-bottom: 18px;
		}
		.text-p {
			color: var(--text-2);
			font-size: 15px;
			line-height: 1.8;
		}
		.overview-points {
			margin-top: 26px;
		}
		.overview-points li {
			position: relative;
			padding: 10px 0 0 32px;
			font-size: 15px;
			color: var(--text-2);
		}
		.overview-points li::before {
			content: "";
			position: absolute;
			left: 6px;
			top: 19px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--main);
			box-shadow: 0 0 0 4px rgba(62, 145, 247, .14);
		}
		.visual-wrap {
			position: relative;
		}
		.visual-main {
			width: 100%;
			border-radius: var(--radius-lg);
			box-shadow: var(--shadow-md);
			aspect-ratio: 5 / 4;
			object-fit: cover;
			border: 1px solid rgba(255, 255, 255, .6);
		}
		.visual-note {
			position: absolute;
			bottom: 18px;
			left: 18px;
			right: 18px;
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 14px 18px;
			border-radius: 18px;
			background: rgba(255, 255, 255, .92);
			box-shadow: var(--shadow-sm);
			border: 1px solid rgba(255, 255, 255, .8);
			backdrop-filter: blur(8px);
			font-size: 14px;
			color: var(--text-1);
		}
		.visual-note i {
			width: 38px;
			height: 38px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 12px;
			background: var(--main-light);
			color: var(--main);
			font-size: 16px;
			flex: 0 0 auto;
		}
		.visual-note strong {
			display: block;
			font-size: 14px;
			margin-bottom: 2px;
		}
		.visual-note span {
			color: var(--text-3);
			font-size: 13px;
		}

		/* ===== Service Module 2x2 ===== */
		.card-module {
			height: 100%;
			padding: 32px 30px;
			background: #fff;
			border-radius: 20px;
			border: 1px solid var(--line);
			box-shadow: var(--shadow-sm);
			transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
		}
		.card-module:hover {
			transform: translateY(-5px);
			box-shadow: var(--shadow-md);
			border-color: #DAE9F8;
		}
		.module-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 54px;
			height: 54px;
			border-radius: 16px;
			background: var(--main-light);
			color: var(--main);
			font-size: 21px;
			margin-bottom: 20px;
		}
		.module-icon.orange {
			background: #FFF0E8;
			color: var(--orange);
		}
		.module-icon.green {
			background: #E7FAF4;
			color: var(--green-online);
		}
		.card-module h3 {
			font-size: 20px;
			line-height: 1.45;
			margin-bottom: 12px;
		}
		.card-module p {
			color: var(--text-2);
			font-size: 15px;
			line-height: 1.8;
			margin-bottom: 0;
		}

		/* ===== Timeline ===== */
		.timeline-wrap {
			position: relative;
			max-width: 920px;
			margin: 0 auto;
		}
		.timeline-wrap::before {
			content: "";
			position: absolute;
			left: 23px;
			top: 16px;
			bottom: 16px;
			width: 2px;
			background: linear-gradient(180deg, var(--main), #D9E9FA 70%, transparent);
		}
		.timeline-item {
			position: relative;
			padding: 4px 0 38px 74px;
		}
		.timeline-item::before {
			content: "";
			position: absolute;
			left: 13px;
			top: 12px;
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background: var(--main);
			border: 5px solid #EAF3FE;
			box-shadow: 0 0 0 2px rgba(62, 145, 247, .24), 0 6px 10px rgba(41, 108, 195, .16);
		}
		.timeline-item .time-num {
			font-size: 13px;
			font-weight: 700;
			color: var(--main);
			letter-spacing: .06em;
			background: var(--main-light);
			display: inline-block;
			padding: 4px 12px;
			border-radius: var(--radius-pill);
			margin-bottom: 12px;
		}
		.timeline-item h3 {
			font-size: 22px;
			margin-bottom: 10px;
			color: #1B3A5D;
		}
		.timeline-item p {
			font-size: 15px;
			color: var(--text-2);
			line-height: 1.8;
			max-width: 720px;
			margin-bottom: 0;
		}

		/* ===== Visit Guide Panel ===== */
		.guide-panel {
			background: #fff;
			border-radius: var(--radius-lg);
			border: 1px solid var(--line);
			box-shadow: var(--shadow-sm);
			padding: 42px 46px;
			align-items: center;
		}
		.guide-panel .guide-copy h2 {
			font-size: 30px;
			line-height: 1.35;
			margin-bottom: 16px;
		}
		.guide-panel .guide-copy p {
			color: var(--text-2);
			font-size: 15px;
			line-height: 1.82;
			margin-bottom: 0;
		}
		.guide-list li {
			display: flex;
			gap: 14px;
			padding: 14px 0;
			border-bottom: 1px solid var(--line);
			align-items: flex-start;
		}
		.guide-list li:last-child {
			border-bottom: 0;
			padding-bottom: 0;
		}
		.guide-list .li-icon {
			flex: 0 0 auto;
			width: 38px;
			height: 38px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 12px;
			background: var(--main-light);
			color: var(--main);
			font-size: 15px;
			margin-top: 3px;
		}
		.guide-list strong {
			display: block;
			font-size: 15px;
			color: var(--text-1);
		}
		.guide-list span {
			font-size: 14px;
			color: var(--text-2);
			line-height: 1.7;
		}

		/* ===== FAQ ===== */
		.faq-wrap {
			max-width: 960px;
			margin: 0 auto;
		}
		.faq-item {
			background: #fff;
			border: 1px solid var(--line);
			border-radius: 18px;
			box-shadow: var(--shadow-sm);
			margin-bottom: 14px;
			overflow: hidden;
			transition: box-shadow .25s ease;
		}
		.faq-item[open] {
			box-shadow: var(--shadow-md);
		}
		.faq-item summary {
			list-style: none;
			display: flex;
			align-items: center;
			gap: 14px;
			padding: 22px 26px;
			cursor: pointer;
			font-size: 17px;
			font-weight: 600;
			color: var(--text-1);
			line-height: 1.5;
		}
		.faq-item summary::-webkit-details-marker {
			display: none;
		}
		.faq-item summary i {
			margin-left: auto;
			flex: 0 0 auto;
			width: 30px;
			height: 30px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background: var(--main-light);
			color: var(--main);
			transition: transform .3s ease, background .3s ease, color .3s ease;
		}
		.faq-item[open] summary i {
			transform: rotate(45deg);
			background: var(--main);
			color: #fff;
		}
		.faq-answer {
			padding: 4px 30px 28px 62px;
			color: var(--text-2);
			font-size: 15px;
			line-height: 1.85;
		}
		.faq-answer p {
			margin-bottom: 12px;
		}
		.faq-answer p:last-child {
			margin-bottom: 0;
		}

		/* ===== CTA ===== */
		.cta-section {
			padding: 20px 0 96px;
		}
		.cta-banner {
			background: #FFFFFF;
			border: 1px solid var(--line);
			border-radius: 30px;
			text-align: center;
			padding: 70px 40px;
			position: relative;
			overflow: hidden;
			box-shadow: var(--shadow-md);
		}
		.cta-banner::before {
			content: "";
			position: absolute;
			left: -80px;
			top: -80px;
			width: 260px;
			height: 260px;
			background: radial-gradient(circle, rgba(62, 145, 247, .14), transparent 70%);
		}
		.cta-banner::after {
			content: "";
			position: absolute;
			right: -70px;
			bottom: -100px;
			width: 300px;
			height: 300px;
			background: radial-gradient(circle, rgba(255, 131, 69, .12), transparent 70%);
		}
		.cta-banner h2 {
			position: relative;
			z-index: 1;
			font-size: 34px;
			margin-bottom: 18px;
			color: #16354F;
		}
		.cta-banner p {
			position: relative;
			z-index: 1;
			max-width: 680px;
			margin: 0 auto 30px;
			color: var(--text-2);
			font-size: 16px;
			line-height: 1.8;
		}
		.cta-btns {
			position: relative;
			z-index: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 16px;
		}

		/* ===== Footer ===== */
		.site-footer {
			background: #fff;
			border-top: 1px solid var(--line);
			padding: 66px 0 0;
		}
		.footer-brand-text {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 20px;
			font-weight: 800;
			color: var(--text-1);
			margin-bottom: 16px;
			letter-spacing: -0.01em;
		}
		.footer-brand-text i {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 34px;
			height: 34px;
			border-radius: 11px;
			background: var(--main-light);
			color: var(--main);
			font-size: 15px;
		}
		.footer-description {
			font-size: 14px;
			color: var(--text-2);
			line-height: 1.8;
			max-width: 390px;
			margin-bottom: 0;
		}
		.footer-heading {
			font-size: 16px;
			font-weight: 700;
			color: var(--text-1);
			margin-bottom: 18px;
		}
		.footer-links {
			display: flex;
			flex-direction: column;
			gap: 9px;
		}
		.footer-links a {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			color: var(--text-2);
			font-size: 14px;
		}
		.footer-links a:hover {
			color: var(--main);
			transform: translateX(3px);
		}
		.footer-links a i {
			font-size: 12px;
			color: var(--text-3);
		}
		.footer-links a:hover i {
			color: var(--main);
		}
		.footer-contact {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}
		.footer-contact li {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			font-size: 14px;
			color: var(--text-2);
			line-height: 1.6;
		}
		.footer-contact li i {
			margin-top: 5px;
			color: var(--main);
			font-size: 15px;
		}
		.footer-bottom {
			margin-top: 50px;
			border-top: 1px dashed #DCE9F5;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 10px 24px;
			justify-content: space-between;
			padding: 23px 0;
			font-size: 13px;
			color: var(--text-3);
		}
		.footer-bottom span {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}
		.footer-bottom i {
			font-size: 12px;
		}

		/* ===== Responsive ===== */
		@media screen and (max-width: 1024px) {
			.section {
				padding: 70px 0;
			}
			.page-hero {
				padding: 150px 0 60px;
			}
			.page-hero h1 {
				font-size: 38px;
			}
			.sec-title {
				font-size: 29px;
			}
			.overview-text h2 {
				font-size: 27px;
			}
			.guide-panel {
				padding: 34px;
			}
			.cta-banner {
				padding: 54px 28px;
			}
			.header-navbar {
				height: 60px;
				padding: 0 14px;
			}
			.header-menu {
				position: absolute;
				top: calc(100% + 12px);
				left: 0;
				right: 0;
				flex-direction: column;
				align-items: stretch;
				background: rgba(255, 255, 255, .98);
				border: 1px solid var(--line);
				border-radius: 22px;
				box-shadow: var(--shadow-lg);
				padding: 14px;
				gap: 4px;
				visibility: hidden;
				opacity: 0;
				transform: translateY(-8px);
				transition: opacity .25s ease, transform .25s ease, visibility .25s;
				margin-left: 0;
			}
			.nav-toggle-input:checked ~ .header-menu {
				visibility: visible;
				opacity: 1;
				transform: translateY(0);
			}
			.nav-links {
				flex-direction: column;
				width: 100%;
				align-items: stretch;
				gap: 2px;
			}
			.nav-link {
				width: 100%;
				justify-content: flex-start;
				height: 48px;
				padding: 0 16px;
				border-radius: 14px;
			}
			.navbar-login {
				margin: 10px 0 0;
				width: 100%;
				height: 48px;
				border-radius: 14px;
			}
			.nav-toggle {
				display: flex;
			}
			.nav-toggle-input {
				display: none;
			}
		}

		@media screen and (max-width: 768px) {
			.page-hero {
				padding: 130px 0 48px;
			}
			.page-hero h1 {
				font-size: 33px;
				line-height: 1.25;
			}
			.page-hero .hero-lead {
				font-size: 16px;
			}
			.section {
				padding: 56px 0;
			}
			.sec-head {
				margin-bottom: 34px;
			}
			.overview-points li {
				padding-left: 28px;
			}
			.visual-note {
				bottom: 10px;
				left: 10px;
				right: 10px;
				padding: 12px 14px;
			}
			.visual-note strong {
				font-size: 13px;
			}
			.card-module {
				padding: 24px 22px;
			}
			.timeline-item {
				padding-left: 58px;
				padding-bottom: 32px;
			}
			.timeline-wrap::before {
				left: 18px;
			}
			.timeline-item::before {
				left: 9px;
				width: 20px;
				height: 20px;
			}
			.faq-answer {
				padding-left: 28px;
				padding-right: 24px;
			}
			.faq-item summary {
				padding: 18px 20px;
				font-size: 16px;
			}
			.cta-section {
				padding-bottom: 60px;
			}
			.cta-banner h2 {
				font-size: 27px;
			}
			.site-footer {
				padding-top: 48px;
			}
		}

		@media screen and (max-width: 560px) {
			.brand-logo {
				font-size: 17px;
			}
			.brand-logo i {
				width: 30px;
				height: 30px;
				border-radius: 9px;
			}
			.header-navbar {
				border-radius: 999px;
			}
			.page-hero h1 {
				font-size: 29px;
			}
			.sec-title {
				font-size: 24px;
			}
			.btn {
				padding: 0 20px;
				height: 44px;
				font-size: 14px;
			}
			.visual-note span {
				display: none;
			}
			.footer-bottom {
				flex-direction: column;
				align-items: flex-start;
				gap: 8px;
			}
		}

/* roulang page: category2 */
:root {
            --primary: #3E91F7;
            --primary-dark: #2C7DE0;
            --primary-light: #EAF3FE;
            --accent: #FF8345;
            --success: #10B981;
            --text-1: #12263A;
            --text-2: #4A5B6E;
            --text-light: #74879B;
            --line: #E4EDF7;
            --line-soft: rgba(46, 92, 158, .12);
            --bg: #F7FAFD;
            --card: #FFFFFF;
            --shadow-card: 0 6px 20px rgba(40, 82, 150, .06);
            --shadow-hover: 0 12px 32px rgba(40, 82, 150, .10);
            --radius-sm: 10px;
            --radius: 16px;
            --radius-lg: 24px;
            --radius-pill: 999px;
            --container: 1200px;
            --space: 88px;
            --space-sm: 50px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
            background: var(--bg);
            color: var(--text-1);
            line-height: 1.6;
            font-size: 15px;
            -webkit-font-smoothing: antialiased;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:focus-visible,
        button:focus-visible,
        summary:focus-visible,
        input:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 3px;
            border-radius: 6px;
        }

        ul,
        ol {
            list-style: none;
        }

        button,
        input,
        summary {
            font: inherit;
        }

        i,
        svg {
            font-style: normal;
        }

        .wrap {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 20px;
        }

        .section {
            padding: var(--space) 0;
        }

        .section-tight {
            padding: 60px 0;
        }

        .section-head {
            margin-bottom: 40px;
        }

        .section-head .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 16px;
            background: var(--primary-light);
            color: var(--primary-dark);
            font-size: 13px;
            font-weight: 500;
            border-radius: var(--radius-pill);
            margin-bottom: 16px;
        }

        .section-title {
            font-size: 30px;
            font-weight: 700;
            line-height: 1.35;
            letter-spacing: .5px;
        }

        .section-desc {
            max-width: 720px;
            color: var(--text-2);
            font-size: 16px;
            line-height: 1.85;
            margin-top: 14px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 48px;
            padding: 0 28px;
            border-radius: var(--radius-pill);
            font-size: 16px;
            font-weight: 600;
            border: 1.5px solid transparent;
            transition: all .22s ease;
            cursor: pointer;
            white-space: nowrap;
        }

        .btn:active {
            transform: translateY(1px);
        }

        .btn-accent {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 8px 24px rgba(255, 131, 69, .24);
        }

        .btn-accent:hover {
            background: #f57238;
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(255, 131, 69, .32);
        }

        .btn-primary {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 8px 24px rgba(62, 145, 247, .22);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(62, 145, 247, .30);
        }

        .btn-outline {
            border-color: var(--line);
            background: rgba(255, 255, 255, .72);
            color: var(--text-1);
        }

        .btn-outline:hover {
            border-color: var(--primary);
            background: var(--primary-light);
            color: var(--primary-dark);
            transform: translateY(-2px);
        }

        .btn-ghost-light {
            border-color: rgba(255, 255, 255, .8);
            background: rgba(255, 255, 255, .1);
            color: #fff;
        }

        .btn-ghost-light:hover {
            background: #fff;
            color: var(--text-1);
        }

        /* ========= 悬浮胶囊导航 ========= */
        .site-header {
            position: fixed;
            top: 16px;
            left: 0;
            right: 0;
            z-index: 100;
            pointer-events: none;
            transition: top .3s ease;
        }

        .site-header.scrolled {
            top: 8px;
        }

        .header-navbar {
            pointer-events: auto;
            position: relative;
            width: min(1240px, calc(100% - 24px));
            margin: 0 auto;
            height: 66px;
            background: rgba(255, 255, 255, .72);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, .7);
            box-shadow: 0 8px 30px rgba(24, 52, 90, .08);
            border-radius: var(--radius-pill);
            padding: 0 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            transition: width .3s ease, height .3s ease, box-shadow .3s ease, background .3s ease;
        }

        .site-header.scrolled .header-navbar {
            width: min(1220px, calc(100% - 30px));
            height: 60px;
            background: rgba(255, 255, 255, .9);
            box-shadow: 0 10px 34px rgba(24, 52, 90, .1);
        }

        .brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            font-weight: 700;
            color: var(--text-1);
            letter-spacing: .2px;
            flex: none;
            padding: 4px 12px 4px 4px;
            margin-left: -4px;
        }

        .brand-logo i {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 18px;
        }

        .header-menu {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 18px;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 8px;
            list-style: none;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 42px;
            padding: 0 18px;
            color: var(--text-1);
            font-size: 15px;
            font-weight: 500;
            border-radius: 999px;
            transition: all .2s ease;
        }

        .nav-link:hover {
            background: var(--primary-light);
            color: var(--primary-dark);
        }

        .nav-link.active {
            background: var(--primary-light);
            color: var(--primary-dark);
            font-weight: 600;
        }

        .navbar-login {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 42px;
            padding: 0 22px;
            border-radius: 999px;
            background: linear-gradient(135deg, #FFF3EB, #FFE9DA);
            color: #E86822;
            border: 1px solid rgba(255, 131, 69, .20);
            font-size: 15px;
            font-weight: 600;
            flex: none;
            transition: all .2s ease;
        }

        .navbar-login:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            box-shadow: 0 6px 18px rgba(255, 131, 69, .22);
        }

        .nav-toggle-input {
            display: none;
        }

        .nav-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .7);
            position: relative;
        }

        .nav-toggle span,
        .nav-toggle span::before,
        .nav-toggle span::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 2px;
            background: var(--text-1);
            border-radius: 6px;
            transition: all .25s ease;
            left: 10px;
        }

        .nav-toggle span {
            top: 20px;
        }

        .nav-toggle span::before {
            top: -6px;
        }

        .nav-toggle span::after {
            top: 6px;
        }

        .nav-toggle-input:checked~.nav-toggle span {
            background: transparent;
        }

        .nav-toggle-input:checked~.nav-toggle span::before {
            top: 0;
            transform: rotate(45deg);
        }

        .nav-toggle-input:checked~.nav-toggle span::after {
            top: 0;
            transform: rotate(-45deg);
        }

        /* ========= 内页小页头 ========= */
        .cat-hero {
            position: relative;
            padding: 148px 0 64px;
            overflow: hidden;
            background:
                linear-gradient(120deg, rgba(247, 250, 253, .92) 0%, rgba(232, 244, 255, .82) 52%, rgba(255, 244, 236, .75) 100%),
                url('/assets/images/backpic/back-2.png') center / cover no-repeat;
        }

        .cat-hero::after {
            content: "";
            position: absolute;
            right: -140px;
            top: 60px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            background: rgba(62, 145, 247, .08);
            filter: blur(60px);
            pointer-events: none;
        }

        .cat-hero .breadcrumb {
            position: relative;
            z-index: 2;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-2);
            margin-bottom: 42px;
        }

        .breadcrumb a:hover {
            color: var(--primary);
        }

        .breadcrumb .sep {
            color: var(--line);
        }

        .cat-hero-badge {
            display: inline-flex;
            align-items: center;
            color: var(--primary-dark);
            background: var(--primary-light);
            border-radius: var(--radius-pill);
            padding: 6px 16px;
            font-size: 13px;
            margin-bottom: 18px;
            position: relative;
            z-index: 2;
        }

        .cat-hero h1 {
            font-size: 44px;
            line-height: 1.25;
            font-weight: 800;
            letter-spacing: 1px;
            color: var(--text-1);
            position: relative;
            z-index: 2;
        }

        .cat-hero-lead {
            max-width: 760px;
            color: var(--text-2);
            font-size: 17px;
            line-height: 1.9;
            margin-top: 16px;
            position: relative;
            z-index: 2;
        }

        .cat-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 28px;
            position: relative;
            z-index: 2;
        }

        .cat-hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 26px;
            margin-top: 30px;
            color: var(--text-light);
            font-size: 13px;
            position: relative;
            z-index: 2;
        }

        .cat-hero-meta span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .cat-hero-meta i {
            color: var(--primary);
        }

        /* ========= 数据条 ========= */
        .data-strip {
            background: #fff;
            border-bottom: 1px solid var(--line);
            padding: 32px 0;
        }

        .data-strip-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 8px 10px;
        }

        .data-strip-item .num {
            font-size: 28px;
            font-weight: 800;
            color: var(--primary-dark);
            line-height: 1;
            min-width: 56px;
        }

        .data-strip-item .num-head {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--text-1);
        }

        .data-strip-item .num-sub {
            font-size: 12px;
            color: var(--text-2);
        }

        .brand-wall {
            margin-top: 22px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 26px;
            color: var(--text-light);
            font-size: 13px;
        }

        .brand-wall b {
            color: var(--text-2);
            font-weight: 600;
        }

        /* ========= 资讯内容版块 ========= */
        .info-overview {
            padding: var(--space) 0;
        }

        .overview-lead .lead-card {
            background: #fff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            padding: 28px 28px 24px;
            height: 100%;
            transition: box-shadow .25s ease;
        }

        .overview-lead .lead-card:hover {
            box-shadow: var(--shadow-hover);
        }

        .info-overview .image-wrap {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            height: 100%;
            min-height: 320px;
        }

        .info-overview .image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .info-overview .image-wrap:hover img {
            transform: scale(1.03);
        }

        .icon-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 20px;
            margin-bottom: 16px;
        }

        .lead-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 16px;
            line-height: 1.4;
        }

        .lead-text {
            color: var(--text-2);
            font-size: 15px;
            line-height: 1.85;
        }

        .chip-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 22px;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: var(--primary-light);
            border-radius: var(--radius-pill);
            color: var(--primary-dark);
            font-size: 13px;
        }

        /* ========= 内容索引行 ========= */
        .index-card-list {
            background: linear-gradient(180deg, #fff 0%, #F4F9FE 100%);
            padding: 76px 0;
        }

        .index-card {
            display: flex;
            align-items: stretch;
            gap: 20px;
            background: #fff;
            border-radius: var(--radius);
            padding: 24px 26px;
            margin-bottom: 18px;
            box-shadow: var(--shadow-card);
            transition: transform .25s ease, box-shadow .25s ease;
            border: 1px solid rgba(255, 255, 255, .8);
        }

        .index-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }

        .index-card .index-icon {
            flex: none;
            width: 58px;
            height: 58px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 24px;
        }

        .index-card:nth-child(2) .index-icon {
            background: #FFF3EA;
            color: var(--accent);
        }

        .index-card:nth-child(3) .index-icon {
            background: #E6FAF3;
            color: var(--success);
        }

        .index-card:nth-child(4) .index-icon {
            background: #F1F0FF;
            color: #6B5DF9;
        }

        .index-card .index-body {
            flex: 1;
            min-width: 0;
        }

        .index-card .index-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .index-card .index-desc {
            color: var(--text-2);
            font-size: 15px;
            line-height: 1.8;
        }

        .index-card .index-meta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-light);
            font-size: 13px;
            margin-top: 12px;
        }

        .index-card .index-arrow {
            flex: none;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 18px;
            align-self: center;
            transition: all .25s ease;
        }

        .index-card:hover .index-arrow {
            background: var(--accent);
            color: #fff;
            transform: translateX(3px);
        }

        /* ========= 流程步骤 ========= */
        .process-section {
            padding: var(--space) 0;
        }

        .process-step {
            position: relative;
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow-card);
            padding: 26px 24px 36px;
            transition: box-shadow .25s ease, transform .25s ease;
            height: 100%;
            border-top: 3px solid transparent;
        }

        .process-step:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .process-step .step-num {
            font-size: 64px;
            font-weight: 800;
            line-height: 1;
            background: linear-gradient(120deg, var(--primary-light), #F1F8FE);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            opacity: .9;
        }

        .process-step h3 {
            font-size: 19px;
            font-weight: 700;
            margin: 18px 0 12px;
        }

        .process-step p {
            color: var(--text-2);
            font-size: 14px;
            line-height: 1.8;
        }

        .process-step .step-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--primary);
            font-weight: 600;
            font-size: 14px;
            margin-top: 16px;
        }

        .process-step .step-link i {
            transition: transform .2s ease;
        }

        .process-step .step-link:hover i {
            transform: translateX(4px);
        }

        /* ========= FAQ ========= */
        .faq-section {
            padding: 70px 0;
            background: #fff;
        }

        .faq-list {
            max-width: 900px;
            margin: 0 auto;
        }

        .faq-item {
            border-bottom: 1px solid var(--line);
            border-radius: 0;
        }

        .faq-item:first-child {
            border-top: 1px solid var(--line);
        }

        .faq-item summary {
            display: flex;
            align-items: center;
            gap: 18px;
            width: 100%;
            min-height: 64px;
            padding: 14px 4px;
            cursor: pointer;
            list-style: none;
            font-size: 17px;
            font-weight: 600;
            color: var(--text-1);
            position: relative;
            transition: color .2s;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary:hover {
            color: var(--primary-dark);
        }

        .faq-item summary .faq-i {
            width: 24px;
            display: inline-flex;
            justify-content: center;
            color: var(--primary);
        }

        .faq-item summary::after {
            content: "+";
            margin-left: auto;
            font-size: 30px;
            color: var(--primary-dark);
            font-weight: 300;
            transition: transform .28s ease, color .2s;
            flex: none;
        }

        .faq-item[open] summary::after {
            transform: rotate(45deg);
            color: var(--accent);
        }

        .faq-body {
            padding: 0 0 24px 54px;
            max-width: 790px;
            color: var(--text-2);
            font-size: 15px;
            line-height: 1.8;
        }

        /* ========= CTA / 登录入口 ========= */
        .cta-login {
            padding: 84px 0;
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(135deg, rgba(234, 243, 254, .94), rgba(255, 243, 235, .90)),
                url('/assets/images/backpic/back-1.webp') center / cover no-repeat;
        }

        .cta-login::before {
            content: "";
            position: absolute;
            width: 440px;
            height: 440px;
            background: rgba(62, 145, 247, .12);
            filter: blur(80px);
            border-radius: 50%;
            left: -120px;
            bottom: -120px;
            pointer-events: none;
        }

        .cta-card {
            position: relative;
            z-index: 2;
            max-width: 1080px;
            margin: 0 auto;
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-hover);
            padding: 46px 52px;
            border: 1px solid #fff;
        }

        .cta-card h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.45;
            margin-bottom: 16px;
        }

        .cta-card p {
            color: var(--text-2);
            font-size: 16px;
            line-height: 1.8;
            max-width: 760px;
        }

        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 28px;
        }

        .login-point-list {
            margin-top: 30px;
            padding-top: 28px;
            border-top: 1px solid var(--line);
            display: flex;
            flex-wrap: wrap;
            gap: 14px 20px;
            color: var(--text-2);
            font-size: 14px;
        }

        .login-point-list span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #F3F8FF;
            padding: 7px 14px;
            border-radius: 999px;
        }

        .login-point-list i {
            color: var(--success);
        }

        /* ========= 页脚 ========= */
        .site-footer {
            background: #fff;
            border-top: 1px solid var(--line);
            padding: 56px 0 0;
            color: var(--text-2);
        }

        .footer-main {
            padding-bottom: 40px;
        }

        .footer-brand-text {
            font-size: 21px;
            font-weight: 800;
            color: var(--text-1);
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
        }

        .footer-brand-text i {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
        }

        .footer-description {
            font-size: 14px;
            line-height: 1.9;
            max-width: 330px;
        }

        .footer-heading {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-1);
            margin-bottom: 16px;
        }

        .footer-links,
        .footer-contact {
            list-style: none;
            display: grid;
            gap: 12px;
        }

        .footer-links a,
        .footer-contact li {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-2);
            font-size: 14px;
            line-height: 1.6;
            transition: color .2s ease;
        }

        .footer-links a i {
            color: var(--primary);
            font-size: 10px;
            transition: transform .2s;
        }

        .footer-links a:hover {
            color: var(--primary-dark);
        }

        .footer-links a:hover i {
            transform: translateX(4px);
        }

        .footer-contact i {
            color: var(--primary);
            font-size: 14px;
        }

        .footer-bottom {
            border-top: 1px solid var(--line);
            padding: 22px 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px 24px;
            font-size: 13px;
            color: var(--text-light);
        }

        .footer-icp {
            color: var(--text-light);
            opacity: .85;
        }

        .footer-safe-domain {
            color: var(--primary-dark);
        }

        /* ========= 响应式断点 ========= */
        @media (max-width: 1024px) {
            .header-navbar {
                gap: 12px;
                padding: 0 14px;
            }

            .nav-links {
                gap: 4px;
            }

            .nav-link {
                padding: 0 13px;
                font-size: 14px;
            }

            .navbar-login {
                padding: 0 16px;
                font-size: 14px;
            }

            .brand-logo {
                font-size: 17px;
            }

            .section {
                padding: 62px 0;
            }

            .cat-hero {
                padding-top: 124px;
            }

            .cta-card {
                padding: 38px 28px;
            }
        }

        @media (max-width: 860px) {
            .cat-hero h1 {
                font-size: 36px;
            }

            .cat-hero-lead {
                font-size: 16px;
            }

            .section-title {
                font-size: 26px;
            }

            .data-strip-item {
                margin-bottom: 8px;
            }

            .index-card {
                flex-wrap: wrap;
            }

            .index-card .index-arrow {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .site-header {
                top: 10px;
            }

            .header-navbar {
                width: calc(100% - 20px);
                height: 60px;
                padding: 0 10px;
            }

            .site-header.scrolled .header-navbar {
                width: calc(100% - 20px);
                height: 58px;
            }

            .brand-logo {
                font-size: 16px;
                gap: 8px;
                padding-right: 6px;
            }

            .brand-logo i {
                width: 32px;
                height: 32px;
                font-size: 15px;
            }

            .nav-toggle {
                display: inline-flex;
                flex: none;
            }

            .header-menu {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 6px;
                position: absolute;
                top: calc(100% + 12px);
                left: 0;
                right: 0;
                background: rgba(255, 255, 255, .96);
                backdrop-filter: blur(20px);
                box-shadow: 0 14px 40px rgba(24, 52, 90, .14);
                border: 1px solid rgba(255, 255, 255, .9);
                border-radius: 24px;
                padding: 16px 16px 20px;
                opacity: 0;
                visibility: hidden;
                transform: translateY(10px);
                transition: all .28s ease;
            }

            .nav-toggle-input:checked~.header-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            .nav-links {
                flex-direction: column;
                align-items: stretch;
                gap: 4px;
            }

            .nav-link {
                display: flex;
                width: 100%;
                justify-content: flex-start;
                height: 46px;
                padding: 0 22px;
                font-size: 16px;
            }

            .navbar-login {
                margin-top: 10px;
                display: flex;
                height: 48px;
            }

            .cat-hero {
                padding: 116px 0 46px;
            }

            .breadcrumb {
                padding-left: 4px;
            }

            .cat-hero h1 {
                font-size: 32px;
            }

            .cat-hero-actions .btn {
                width: 100%;
            }

            .info-overview .image-wrap {
                min-height: 220px;
            }
        }

        @media (max-width: 640px) {
            .section {
                padding: 48px 0;
            }

            .section-title {
                font-size: 23px;
            }

            .lead-title {
                font-size: 20px;
            }

            .cat-hero-meta {
                gap: 8px 16px;
            }

            .process-step .step-num {
                font-size: 54px;
            }

            .cta-login {
                padding: 40px 0;
            }

            .cta-card {
                padding: 26px 20px;
                border-radius: 18px;
            }

            .cta-card h2 {
                font-size: 23px;
            }

            .btn {
                height: 44px;
                padding: 0 20px;
                font-size: 15px;
            }

            .index-card {
                padding: 18px 14px;
                gap: 14px;
            }

            .index-card .index-icon {
                width: 46px;
                height: 46px;
                font-size: 20px;
            }

            .index-card .index-title {
                font-size: 17px;
            }

            .index-card .index-desc {
                font-size: 14px;
            }

            .footer-bottom {
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                text-align: left;
            }

            .faq-item summary {
                font-size: 15px;
                line-height: 1.6;
                align-items: flex-start;
            }

            .faq-body {
                padding: 0 0 18px 30px;
            }

            body {
                font-size: 15px;
            }
        }

        @media (min-width: 1024px) {
            .header-navbar {
                width: min(1200px, 98%);
            }
        }

/* roulang page: category3 */
:root {
  --primary: #3E91F7;
  --primary-dark: #2D7EE5;
  --primary-light: #EAF3FE;
  --accent: #FF8345;
  --accent-dark: #F5722F;
  --success: #10B981;
  --ink: #12263A;
  --text: #4A5B6E;
  --muted: #7C8DA0;
  --bg: #F5F9FE;
  --card: #FFFFFF;
  --border: #E4EDF7;
  --shadow: 0 6px 20px rgba(40, 80, 150, 0.06);
  --shadow-hover: 0 14px 34px rgba(40, 80, 150, 0.11);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container: 1200px;
  --space-section: 96px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  line-height: 1.35;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid-container {
  max-width: var(--container);
  padding-left: 20px;
  padding-right: 20px;
}

.site-header {
  position: fixed;
  top: 16px;
  left: 12px;
  right: 12px;
  z-index: 1000;
  pointer-events: none;
}

.header-navbar {
  pointer-events: auto;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 30px rgba(24, 52, 90, 0.08);
  padding: 0 12px 0 24px;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.site-header.scrolled .header-navbar {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(20, 46, 80, 0.09);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  padding: 8px 0;
}

.brand-logo i {
  color: var(--primary);
  font-size: 20px;
}

.nav-toggle {
  display: none;
}

.nav-toggle-input {
  display: none;
}

.header-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-item {
  margin: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 15px;
  font-size: 15px;
  color: var(--text);
  border-radius: var(--radius-pill);
  font-weight: 500;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--primary);
  background: rgba(62, 145, 247, 0.08);
}

.nav-link.active {
  color: var(--primary);
  background: var(--primary-light);
  font-weight: 600;
}

.navbar-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 20px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.navbar-login:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255, 115, 60, 0.25);
}

.page-hero {
  position: relative;
  padding: 142px 0 70px;
  background-image: linear-gradient(135deg, rgba(245, 249, 255, 0.88), rgba(224, 240, 255, 0.72)), url('/assets/images/backpic/back-1.webp');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(228, 237, 247, 0.8);
  text-align: center;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: -100px;
  top: -120px;
  background: radial-gradient(circle, rgba(62, 145, 247, 0.14), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.page-hero .grid-container {
  position: relative;
  z-index: 2;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.breadcrumb a {
  color: var(--primary);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--primary);
  background: rgba(234, 243, 254, 0.9);
  border: 1px solid rgba(62, 145, 247, 0.15);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
  font-weight: 500;
}

.page-hero h1 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}

.page-hero .hero-lead {
  font-size: 17px;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto 26px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.22s ease;
  background: transparent;
  color: inherit;
}

.btn i {
  font-size: 15px;
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgba(255, 131, 69, 0.22);
}

.btn-accent:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 14px 28px rgba(255, 117, 55, 0.3);
}

.btn-blue {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 8px 18px rgba(62, 145, 247, 0.2);
}

.btn-blue:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 12px 26px rgba(62, 145, 247, 0.28);
}

.btn-outline {
  border-color: #C7D6E6;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: rgba(62, 145, 247, 0.3);
  transform: translateY(-2px);
}

.btn:focus-visible,
.nav-link:focus-visible,
.brand-logo:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.section {
  padding: var(--space-section) 0;
}

.section-alt {
  background: var(--card);
}

.section-white {
  background: #fff;
}

.section-lightblue {
  background: linear-gradient(180deg, #F5F9FE 0%, #EAF3FE 100%);
}

.section-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 54px;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 6px 15px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 32px;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 14px;
}

.section-header p {
  color: var(--muted);
  font-size: 16px;
  margin: 0;
}

.steps-section {
  position: relative;
}

.step-item {
  margin-bottom: 24px;
}

.step-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 28px 36px;
  height: 100%;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-bottom: 16px;
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.step-order {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 50px;
  padding: 0 15px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 22px;
}

.step-card::after {
  content: attr(data-step);
  position: absolute;
  right: -10px;
  bottom: -38px;
  font-size: 118px;
  font-weight: 800;
  line-height: 1;
  color: rgba(62, 145, 247, 0.06);
  pointer-events: none;
  letter-spacing: -0.05em;
}

.step-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 15px;
  margin-bottom: 18px;
}

.step-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-points li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}

.step-points li i {
  color: var(--success);
  margin-top: 5px;
}

.prepare-section {
  background: #fff;
  border-top: 1px solid rgba(228, 237, 247, 0.7);
  border-bottom: 1px solid rgba(228, 237, 247, 0.7);
}

.prepare-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.prepare-media img {
  width: 100%;
  object-fit: cover;
  min-height: 330px;
}

.prepare-content {
  padding: 8px 0 0 12px;
}

.prepare-content .eyebrow {
  margin-bottom: 12px;
}

.prepare-content h2 {
  font-size: 30px;
  margin-bottom: 16px;
}

.prepare-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prepare-list li {
  display: flex;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.prepare-list li:last-child {
  border-bottom: none;
}

.prepare-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 17px;
}

.prepare-list strong {
  display: block;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 2px;
}

.prepare-list p {
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
  color: var(--text);
}

.access-card {
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 32px 30px;
  height: 100%;
  margin-bottom: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.access-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.access-card i {
  color: var(--primary);
  font-size: 28px;
  margin-bottom: 18px;
}

.access-card h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

.access-card p {
  font-size: 15px;
  margin: 0 0 18px;
}

.link-arrow {
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-arrow i {
  font-size: 13px;
  margin-bottom: 0;
  transition: transform 0.2s ease;
}

.link-arrow:hover i {
  transform: translateX(4px);
}

.faq-section {
  background: linear-gradient(180deg, #F5F9FE, #EAF3FE);
}

.faq-wrap {
  max-width: 880px;
  margin: 0 auto;
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(40, 80, 150, 0.04);
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.faq-item:hover {
  border-color: rgba(62, 145, 247, 0.25);
  box-shadow: var(--shadow);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 66px;
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  user-select: none;
  outline: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary);
  font-size: 16px;
  transition: transform 0.25s ease;
  flex: 0 0 18px;
  text-align: center;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-content {
  padding: 0 24px 22px;
}

.faq-content p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
  border-left: 3px solid var(--primary-light);
  padding-left: 16px;
  margin: 0;
}

.cta-section {
  padding: 80px 0;
  background: #fff;
}

.cta-box {
  position: relative;
  background: linear-gradient(135deg, rgba(234, 243, 254, 0.78), rgba(255, 255, 255, 0.92)), url('/assets/images/backpic/back-3.webp');
  background-size: cover;
  background-position: center;
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 62px 44px;
  text-align: center;
  overflow: hidden;
}

.cta-box h2 {
  font-size: 30px;
  margin-bottom: 12px;
}

.cta-box p {
  color: var(--text);
  max-width: 680px;
  margin: 0 auto 30px;
  font-size: 16px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 64px 0 0;
}

.footer-main {
  padding-bottom: 40px;
}

.footer-brand-text {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
}

.footer-brand-text i {
  color: var(--primary);
}

.footer-description {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.85;
  max-width: 360px;
  margin-bottom: 20px;
}

.footer-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 18px;
}

.footer-links li,
.footer-contact li {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text);
}

.footer-links a,
.footer-contact a {
  color: var(--text);
}

.footer-links a i,
.footer-contact li i {
  font-size: 12px;
  color: var(--primary);
  margin-right: 3px;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--primary);
}

.footer-contact li {
  line-height: 1.7;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 22px 0;
  font-size: 13px;
  color: var(--muted);
}

.footer-copy i {
  font-size: 13px;
  margin-right: 2px;
}

.footer-safe-domain {
  color: var(--text);
}

@media (max-width: 1024px) {
  .page-hero h1 {
    font-size: 40px;
  }

  .section-header h2 {
    font-size: 28px;
  }
}

@media (max-width: 860px) {
  .header-navbar {
    min-height: 62px;
    border-radius: 28px;
    padding: 0 12px 0 20px;
  }

  .nav-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
    background: transparent;
    position: relative;
    z-index: 1002;
  }

  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 4px;
    position: relative;
    transition: all 0.25s ease;
  }

  .nav-toggle span::before {
    position: absolute;
    top: -6px;
  }

  .nav-toggle span::after {
    position: absolute;
    top: 6px;
  }

  .nav-toggle-input:checked + .nav-toggle span {
    background: transparent;
  }

  .nav-toggle-input:checked + .nav-toggle span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle-input:checked + .nav-toggle span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .header-menu {
    position: absolute;
    top: 72px;
    left: 12px;
    right: 12px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 22px;
    padding: 18px 18px;
    box-shadow: 0 22px 44px rgba(20, 46, 80, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.24s ease;
  }

  .nav-toggle-input:checked ~ .header-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    justify-content: flex-start;
    width: 100%;
    border-radius: 12px;
  }

  .navbar-login {
    margin-top: 10px;
  }

  .page-hero {
    padding-top: 120px;
    padding-bottom: 56px;
  }

  .section {
    --space-section: 74px;
  }

  .prepare-content {
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-hero h1 {
    font-size: 34px;
    line-height: 1.28;
  }

  .page-hero .hero-lead {
    font-size: 16px;
  }

  .section-header {
    margin-bottom: 38px;
  }

  .section-header h2 {
    font-size: 25px;
  }

  .step-card {
    padding: 26px 22px 34px;
  }

  .step-card::after {
    font-size: 90px;
    right: -6px;
    bottom: -24px;
  }

  .prepare-media img {
    min-height: 230px;
    object-fit: cover;
  }

  .prepare-list strong {
    font-size: 15px;
  }

  .prepare-list p {
    font-size: 13px;
  }

  .access-card {
    padding: 26px 22px;
  }

  .faq-item summary {
    font-size: 15px;
    min-height: 60px;
    padding: 14px 18px;
  }

  .faq-content {
    padding: 0 18px 18px;
  }

  .faq-content p {
    font-size: 14px;
    padding-left: 12px;
  }

  .cta-box {
    padding: 44px 22px;
    border-radius: 20px;
  }

  .cta-box h2 {
    font-size: 24px;
  }

  .cta-actions .btn {
    width: 100%;
  }

  .footer-main .cell {
    margin-bottom: 6px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 24px 0;
  }
}

/* roulang page: category4 */
:root {
  --primary-blue: #3E91F7;
  --primary-blue-deep: #256fd8;
  --primary-blue-soft: #EAF3FE;
  --accent-orange: #FF8345;
  --accent-orange-deep: #e56b2c;
  --success-green: #10b981;
  --body-bg: #F7FAFD;
  --card-bg: #FFFFFF;
  --text-main: #12263A;
  --text-secondary: #4A5B6E;
  --text-light: #7A8B9F;
  --border-line: #E4EDF7;
  --soft-line: rgba(45, 90, 150, 0.12);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 6px 20px rgba(40, 80, 150, 0.06);
  --shadow-hover: 0 12px 32px rgba(40, 80, 150, 0.1);
  --gap-section: 84px;
  --container-width: 1200px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--text-main);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, opacity 0.22s ease, transform 0.22s ease;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button, input, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

button {
  cursor: pointer;
}

.grid-container {
  max-width: var(--container-width);
}

.sec-title-wrap {
  margin-bottom: 38px;
}

.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--primary-blue-soft);
  color: var(--primary-blue-deep);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.sec-h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  margin: 16px 0 10px;
}

.sec-desc {
  color: var(--text-secondary);
  max-width: 760px;
  font-size: 16px;
  line-height: 1.85;
}

.sec-desc.limited {
  max-width: 820px;
}

/* ===== 悬浮导航 ===== */
.site-header {
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
  padding: 0 14px;
}

.header-navbar {
  pointer-events: auto;
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 66px;
  padding: 0 14px 0 22px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(24, 52, 90, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.header-navbar.is-mini {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 22px rgba(24, 52, 90, 0.12);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-main);
  white-space: nowrap;
}

.brand-logo i {
  color: var(--primary-blue);
  font-size: 20px;
}

.header-menu {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-item {
  line-height: 1;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.nav-link:hover {
  color: var(--primary-blue-deep);
  background: rgba(234, 243, 254, 0.72);
}

.nav-link.active {
  color: var(--primary-blue-deep);
  background: var(--primary-blue-soft);
  font-weight: 600;
}

.navbar-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(255, 131, 69, 0.24);
}

.navbar-login i {
  font-size: 16px;
}

.navbar-login:hover {
  background: var(--accent-orange-deep);
  color: #fff;
  transform: translateY(-2px);
}

.nav-toggle-input {
  display: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-blue-soft);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-main);
  content: "";
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle span::before {
  margin-top: -6px;
}

.nav-toggle span::after {
  margin-top: 4px;
}

@media screen and (max-width: 980px) {
  .header-navbar {
    height: 60px;
    padding: 0 8px 0 18px;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .header-menu {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    padding: 14px;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(22, 45, 90, 0.16);
    border: 1px solid var(--border-line);
  }
  #navToggle:checked ~ .header-menu {
    display: flex;
  }
  #navToggle:checked ~ .nav-toggle span {
    background: transparent;
  }
  #navToggle:checked ~ .nav-toggle span::before {
    transform: translateY(6px) rotate(45deg);
  }
  #navToggle:checked ~ .nav-toggle span::after {
    transform: translateY(-4px) rotate(-45deg);
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .nav-link {
    height: 46px;
    width: 100%;
    justify-content: flex-start;
    font-size: 16px;
  }
  .navbar-login {
    margin-top: 8px;
    justify-content: center;
    height: 48px;
  }
}

/* ===== 页头横幅 ===== */
.page-hero {
  position: relative;
  padding: 154px 0 72px;
  background: linear-gradient(105deg, rgba(18, 38, 58, 0.62), rgba(62, 145, 247, 0.22)), url('/assets/images/backpic/back-1.webp') center / cover no-repeat;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70px;
  background: linear-gradient(to top, var(--body-bg), rgba(247, 250, 253, 0));
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
}

.breadcrumb-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.9);
  width: fit-content;
  font-size: 13px;
}

.breadcrumb-path a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-path a:hover {
  opacity: 0.8;
}

.breadcrumb-path .sep {
  font-size: 12px;
  opacity: 0.8;
}

.page-hero-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  margin: 12px 0 14px;
}

.page-hero-sub {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 10px;
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.2);
  color: #eafaf3;
  font-size: 13px;
}

.hero-note i {
  color: #7ee2b8;
}

/* ===== 面包屑 / 页面内容 ===== */
.page-body {
  position: relative;
  z-index: 2;
}

/* 安全提示信息条 */
.safety-strip {
  background: #fff;
  border-bottom: 1px solid var(--border-line);
  padding: 28px 0;
}

.safety-strip .grid-x {
  align-items: center;
}

.safety-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  padding: 6px 0;
}

.safety-strip-item i {
  color: var(--primary-blue);
  font-size: 20px;
}

.safety-strip-item strong {
  font-weight: 600;
  color: var(--text-main);
}

/* 图文概览 */
.overview-section {
  padding: 76px 0 70px;
}

.overview-section .overview-grid {
  align-items: center;
}

.overview-media {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
}

.overview-media img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.overview-media .media-note {
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 13px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.overview-content {
  padding-left: 28px;
}

.overview-list {
  margin-top: 20px;
}

.overview-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px dashed var(--border-line);
  font-size: 15px;
  color: var(--text-secondary);
}

.overview-list li:last-child {
  border-bottom: none;
}

.overview-list i {
  color: var(--success-green);
  margin-top: 5px;
  font-size: 14px;
}

.overview-content .btn-inline {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  background: var(--primary-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.overview-content .btn-inline:hover {
  background: var(--primary-blue-deep);
  transform: translateY(-2px);
}

/* 四方位快速帮助 */
.guide-section {
  background: #fff;
  padding: 78px 0;
  border-top: 1px solid var(--border-line);
  border-bottom: 1px solid var(--border-line);
}

.guide-card {
  background: var(--body-bg);
  border: 1px solid rgba(228, 237, 247, 0.7);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  height: 100%;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  background: #fff;
}

.guide-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  font-size: 20px;
  margin-bottom: 16px;
}

.guide-card h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 10px;
}

.guide-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 14px;
}

.guide-card ul {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.9;
}

.guide-card ul li {
  padding-left: 14px;
  position: relative;
}

.guide-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-orange);
}

/* 目录 + FAQ 手风琴 */
.faq-section {
  padding: 84px 0 76px;
}

.faq-layout .side-navi {
  position: sticky;
  top: 110px;
}

.side-panel {
  background: #fff;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow-card);
}

.side-title {
  font-size: 17px;
  font-weight: 700;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--primary-blue-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}

.side-title i {
  color: var(--primary-blue);
}

.side-list li {
  border-bottom: 1px solid rgba(228, 237, 247, 0.75);
}

.side-list li:last-child {
  border-bottom: none;
}

.side-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 4px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.side-list a:hover {
  color: var(--primary-blue);
}

.side-list .num {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 auto;
}

.side-contact {
  margin-top: 16px;
}

.side-contact .side-contact-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-main);
  margin-bottom: 8px;
}

.side-contact p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 6px;
}

.side-contact a {
  color: var(--primary-blue);
  font-weight: 600;
}

.faq-group {
  margin-bottom: 32px;
}

.faq-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.faq-group-head .tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.faq-group-head h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 0;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(40, 80, 150, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item.is-open {
  border-color: rgba(62, 145, 247, 0.42);
  box-shadow: 0 8px 22px rgba(40, 80, 150, 0.06);
}

.faq-title {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  background: transparent;
  border-radius: var(--radius-md);
  transition: color 0.2s ease;
}

.faq-title:hover {
  color: var(--primary-blue);
}

.faq-title i {
  color: var(--primary-blue);
  font-size: 17px;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.faq-item.is-open .faq-title i {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 0 22px 20px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.85;
}

.faq-item.is-open .faq-answer {
  display: block;
}

.faq-answer .answer-line {
  border-left: 3px solid var(--primary-blue-soft);
  padding-left: 14px;
}

/* 底部安全处理区块 */
.process-section {
  background: #f1f7fe;
  padding: 78px 0;
}

.process-steps {
  counter-reset: process;
}

.process-step {
  counter-increment: process;
  position: relative;
  display: flex;
  gap: 20px;
  padding: 22px 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  align-items: flex-start;
}

.process-step .step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.process-step .step-num::before {
  content: counter(process);
}

.process-step h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

.process-step p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.75;
}

/* 登录入口 / CTA */
.entry-strip {
  padding: 80px 0;
  background: #fff;
}

.entry-banner {
  background: linear-gradient(120deg, #eaf3fe, #f7fbff);
  border-radius: 24px;
  padding: 42px 46px;
  position: relative;
  overflow: hidden;
}

.entry-banner::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(62, 145, 247, 0.1);
}

.entry-banner::after {
  content: "";
  position: absolute;
  right: 46px;
  bottom: -90px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 131, 69, 0.12);
}

.entry-banner .grid-x {
  align-items: center;
}

.entry-media {
  position: relative;
  z-index: 1;
}

.entry-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--primary-blue);
  box-shadow: var(--shadow-card);
  font-size: 28px;
  margin-bottom: 16px;
}

.entry-media h3 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 800;
  margin: 0 0 8px;
}

.entry-media p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 4px;
}

.entry-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-left: 24px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(255, 131, 69, 0.28);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.btn-primary:hover {
  background: var(--accent-orange-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 131, 69, 0.32);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border: 1.5px solid rgba(62, 145, 247, 0.44);
  border-radius: 999px;
  color: var(--primary-blue);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 15px;
}

.btn-outline:hover {
  background: #fff;
  border-color: var(--primary-blue);
  transform: translateY(-2px);
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== 页脚公共样式 ===== */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--border-line);
  padding: 56px 0 0;
}

.footer-main {
  padding-bottom: 28px;
}

.footer-main .cell {
  margin-bottom: 26px;
}

.footer-brand-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 12px;
}

.footer-brand-text i {
  color: var(--primary-blue);
  font-size: 22px;
}

.footer-description {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
  max-width: 370px;
}

.footer-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 14px;
  padding-bottom: 6px;
  position: relative;
}

.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-blue);
  opacity: 0.6;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a, .footer-contact li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links a i {
  font-size: 12px;
  color: var(--primary-blue);
  opacity: 0.8;
}

.footer-links a:hover {
  color: var(--primary-blue);
  transform: translateX(3px);
}

.footer-contact {
  color: var(--text-secondary);
  font-size: 14px;
}

.footer-contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.footer-contact i {
  color: var(--primary-blue);
  margin-top: 4px;
  width: 18px;
  text-align: center;
}

.footer-bottom {
  border-top: 1px solid var(--border-line);
  padding: 18px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  color: var(--text-light);
  font-size: 13px;
}

.footer-copy, .footer-safe-domain, .footer-icp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== 响应式调整 ===== */
@media screen and (max-width: 1024px) {
  .overview-content {
    padding-left: 0;
    margin-top: 30px;
  }
  .faq-layout .side-navi {
    position: static;
    margin-bottom: 30px;
  }
  .entry-actions {
    padding-left: 0;
    margin-top: 20px;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --gap-section: 54px;
  }

  .page-hero {
    padding: 118px 0 54px;
  }

  .page-hero-sub {
    font-size: 16px;
  }

  .brand-logo {
    font-size: 16px;
  }

  .brand-logo i {
    font-size: 17px;
  }

  .overview-media img {
    height: 230px;
  }

  .guide-card {
    padding: 22px 18px;
  }

  .faq-group-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .faq-title {
    font-size: 15px;
    padding: 14px 16px;
  }

  .faq-answer {
    padding: 0 16px 18px;
  }

  .entry-banner {
    padding: 32px 22px;
  }

  .entry-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-primary, .btn-outline {
    width: 100%;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 6px;
  }
}