#home-four {
				--cyan: #22D3EE;
				--bg: #020617;
				--text: #e2e8f0;
				--text-secondary: #94a3b8;
				--text-muted: #475569;
				--card-bg: rgba(15, 23, 42, 0.55);
				--border: rgba(255, 255, 255, 0.06);
			}
#home-four * {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
#home-four {
				background-color: var(--bg);
				font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
				color: var(--text);
				-webkit-font-smoothing: antialiased;
				margin: 0;
				padding: 0;
				overflow: visible;
				min-height: auto;
				display: block;
			}
#home-four .section {
				width: 100%;
				max-width: 1440px;
				margin: 0 auto;
				padding: 3rem 2rem 1.5rem;
				position: relative;
				overflow: visible;
			}
#home-four .section::before {
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				width: 430px;
				height: 320px;
				background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.045) 0%, transparent 70%);
				pointer-events: none;
				z-index: 0;
				filter: blur(38px);
			}
#home-four .content-layer {
				position: relative;
				z-index: 1;
			}
/* ====== 顶部标题 ====== */
#home-four .header-group {
				margin-bottom: 1.85rem;
				max-width: 1100px;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
			}
#home-four .main-heading {
				font-size: clamp(2rem, 3.4vw, 2.7rem);
				font-weight: 800;
				letter-spacing: -0.02em;
				color: #fff;
				margin-bottom: 1rem;
				line-height: 1.16;
			}
#home-four .sub-heading {
				font-size: 0.95rem;
				color: var(--text-secondary);
				line-height: 1.8;
				max-width: 1120px;
				margin-left: auto;
				margin-right: auto;
			}
/* ====== 左右布局 ====== */
#home-four .app-layout {
				display: grid;
				grid-template-columns: minmax(0, 39%) minmax(0, 61%);
				gap: 1.2rem;
				align-items: stretch;
				overflow: visible;
			}
@media (max-width: 1000px) {
#home-four .app-layout {
					grid-template-columns: 1fr;
					gap: 1.2rem;
				}
#home-four .left-panel {
					width: 100% !important;
					display: grid !important;
					grid-template-columns: repeat(2, 1fr);
					gap: 0.8rem !important;
				}
#home-four .right-panel {
					width: 100% !important;
					min-height: auto !important;
				}

}
@media (max-width: 550px) {
#home-four .left-panel {
					grid-template-columns: 1fr;
				}
#home-four .img-frame {
					min-height: 180px !important;
				}

}
/* ====== 左侧硬件按钮面板 ====== */
#home-four .left-panel {
				display: flex;
				flex-direction: column;
				gap: 0.9rem;
				min-width: 0;
				width: 100%;
			}
/* 硬件卡片 */
#home-four .hw-card {
				position: relative;
				width: 100%;
				padding: 1.2rem 1.35rem;
				border-radius: 1rem;
				border: 1px solid rgba(255, 255, 255, 0.07);
				background:
					repeating-linear-gradient(90deg,
						transparent,
						transparent 5px,
						rgba(255, 255, 255, 0.012) 5px,
						rgba(255, 255, 255, 0.012) 6px),
					rgba(15, 23, 42, 0.5);
				backdrop-filter: blur(6px);
				-webkit-backdrop-filter: blur(6px);
				cursor: pointer;
				overflow: hidden;
				transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
				display: flex;
				align-items: flex-start;
				gap: 1rem;
				min-height: 94px;
				user-select: none;
				z-index: 1;
			}
#home-four .hw-card:hover {
				border-color: rgba(34, 211, 238, 0.4);
				z-index: 3;
			}
#home-four .hw-card.active {
				border-color: var(--cyan);
				box-shadow: 0 0 22px rgba(34, 211, 238, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4);
				z-index: 4;
			}
/* 电光青蓄力进度条 */
#home-four .hw-card::after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 0%;
				height: 100%;
				background: rgba(34, 211, 238, 0.07);
				transition: width 0.4s ease;
				z-index: 0;
				pointer-events: none;
				border-radius: inherit;
			}
#home-four .hw-card:hover::after {
				width: 100%;
			}
#home-four .hw-card.active::after {
				width: 100%;
				background: rgba(34, 211, 238, 0.1);
			}
/* 左侧编号区块 */
#home-four .hw-num-block {
				position: relative;
				z-index: 2;
				flex-shrink: 0;
				width: 52px;
				height: 52px;
				border-radius: 0.6rem;
				background: rgba(34, 211, 238, 0.06);
				border: 1px solid rgba(34, 211, 238, 0.2);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				transition: all 0.35s ease;
			}
#home-four .hw-card.active .hw-num-block {
				background: rgba(34, 211, 238, 0.14);
				border-color: var(--cyan);
				box-shadow: 0 0 14px rgba(34, 211, 238, 0.25);
			}
#home-four .hw-num-block .hw-code {
				font-family: 'JetBrains Mono', 'Fira Code', monospace;
				font-size: 0.54rem;
				font-weight: 700;
				letter-spacing: 0.08em;
				color: var(--text-muted);
				transition: color 0.35s;
				line-height: 1;
				margin-bottom: 0.15rem;
			}
#home-four .hw-card.active .hw-num-block .hw-code {
				color: var(--cyan);
			}
#home-four .hw-num-block .hw-num {
				font-family: 'JetBrains Mono', 'Fira Code', monospace;
				font-size: 1.18rem;
				font-weight: 800;
				color: #cbd5e1;
				transition: color 0.35s;
				line-height: 1;
			}
#home-four .hw-card.active .hw-num-block .hw-num {
				color: #fff;
			}
/* 右侧文字 */
#home-four .hw-info {
				position: relative;
				z-index: 2;
				display: flex;
				flex-direction: column;
				gap: 0.22rem;
				min-width: 0;
			}
#home-four .hw-info .hw-icon {
				font-size: 1.1rem;
				line-height: 1;
				transition: transform 0.35s;
			}
#home-four .hw-card.active .hw-info .hw-icon {
				transform: scale(1.1);
			}
#home-four .hw-info .hw-title {
				font-size: 1rem;
				font-weight: 700;
				color: #cbd5e1;
				transition: color 0.35s;
				letter-spacing: -0.01em;
				line-height: 1.25;
				overflow-wrap: anywhere;
			}
#home-four .hw-card.active .hw-info .hw-title {
				color: #fff;
			}
#home-four .hw-info .hw-sub {
				font-size: 0.66rem;
				color: var(--text-muted);
				font-family: 'JetBrains Mono', 'Fira Code', monospace;
				letter-spacing: 0.05em;
				transition: color 0.35s;
				line-height: 1.25;
				overflow-wrap: anywhere;
			}
#home-four .hw-card.active .hw-info .hw-sub {
				color: var(--cyan);
			}
/* ====== 右侧数据内舱 ====== */
#home-four .right-panel {
				position: relative;
				min-height: auto;
				background: rgba(15, 23, 42, 0.45);
				backdrop-filter: blur(12px);
				-webkit-backdrop-filter: blur(12px);
				border: 1px solid rgba(255, 255, 255, 0.06);
				border-radius: 1.2rem;
				overflow: hidden;
				box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
				min-width: 0;
				width: 100%;
				display: flex;
				flex-direction: column;
			}
#home-four .right-panel::before {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 55%;
				height: 1px;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
				z-index: 5;
				pointer-events: none;
			}
/* 面板堆叠 */
#home-four .data-panel {
				position: relative;
				inset: auto;
				padding: 1.65rem 1.55rem 1.4rem;
				display: none;
				flex-direction: column;
				gap: 1rem;
				opacity: 1;
				pointer-events: auto;
				transition: none;
				align-items: stretch;
				width: 100%;
				min-width: 0;
			}
#home-four .data-panel.active {
				display: flex;
				flex: 1 1 auto;
			}
/* 内舱左侧文案 */
#home-four .inner-left {
				flex: 1 1 auto;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				gap: 0.95rem;
				min-width: 0;
				min-height: auto;
			}
#home-four .inner-copy {
				width: 100%;
				max-width: 100%;
			}
#home-four .inner-title {
				font-size: 1.35rem;
				font-weight: 700;
				color: #fff;
				margin-bottom: 0.55rem;
				display: flex;
				align-items: flex-start;
				gap: 0.65rem;
				line-height: 1.28;
				overflow-wrap: anywhere;
			}
#home-four .inner-title .dot {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: var(--cyan);
				box-shadow: 0 0 8px var(--cyan);
				flex-shrink: 0;
				animation: ipv4-four-titlePulse 2.5s ease-in-out infinite;
			}
@keyframes ipv4-four-titlePulse {

				0%,
				100% {
					box-shadow: 0 0 6px var(--cyan);
				}

				50% {
					box-shadow: 0 0 16px var(--cyan);
				}
			}
#home-four .inner-desc {
				font-size: 0.92rem;
				color: #94a3b8;
				line-height: 1.8;
				max-width: 100%;
				overflow-wrap: anywhere;
			}
#home-four .inner-media {
				width: 100%;
				height: clamp(220px, 18vw, 320px);
				min-height: 0;
				flex: 0 0 auto;
				margin-top: 0.15rem;
				border: 1px solid rgba(34, 211, 238, 0.18);
				border-radius: 0.8rem;
				overflow: hidden;
				position: relative;
				background: rgba(2, 6, 23, 0.45);
				box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.24);
			}
#home-four .inner-media img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: center;
				border-radius: 0.8rem;
			}
#home-four .inner-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 0.45rem;
				margin-top: 0.2rem;
				padding-top: 0;
				border-top: 0;
				min-width: 0;
			}
#home-four .inner-tag {
				font-family: 'JetBrains Mono', 'Fira Code', monospace;
				font-size: 0.68rem;
				padding: 0.3rem 0.65rem;
				border-radius: 0.35rem;
				border: 1px solid rgba(255, 255, 255, 0.1);
				color: #94a3b8;
				background: rgba(255, 255, 255, 0.02);
				transition: all 0.25s;
				white-space: normal;
				line-height: 1.25;
				max-width: 100%;
				overflow-wrap: anywhere;
				cursor: default;
			}
#home-four .inner-tag:hover {
				border-color: var(--cyan);
				color: var(--cyan);
				background: rgba(34, 211, 238, 0.05);
			}
#home-four .inner-link {
				display: inline-flex;
				align-items: center;
				gap: 0.4rem;
				color: #94a3b8;
				font-size: 0.82rem;
				font-weight: 500;
				cursor: pointer;
				transition: all 0.25s;
				margin-top: 0.15rem;
				width: fit-content;
				white-space: normal;
				line-height: 1.35;
			}
#home-four .inner-link:hover {
				color: var(--cyan);
			}
#home-four .inner-link .arrow {
				transition: transform 0.3s;
			}
#home-four .inner-link:hover .arrow {
				transform: translateX(3px);
			}
#home-four .img-frame {
				width: 100%;
				height: 100%;
				min-height: 0;
				border: 1px solid rgba(34, 211, 238, 0.25);
				border-radius: 0.8rem;
				background:
					radial-gradient(circle, rgba(34, 211, 238, 0.04) 1px, transparent 1px),
					rgba(2, 6, 23, 0.6);
				background-size: 18px 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				overflow: hidden;
				transition: all 0.4s ease;
				box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(34, 211, 238, 0.06);
			}
#home-four .img-frame:hover {
				border-color: var(--cyan);
				box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(34, 211, 238, 0.15);
			}
#home-four .img-frame::before {
				content: '';
				position: absolute;
				top: 0;
				left: 10%;
				right: 10%;
				height: 1px;
				background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.4), transparent);
				z-index: 2;
				pointer-events: none;
				animation: ipv4-four-frameGlint 4s ease-in-out infinite;
			}
@keyframes ipv4-four-frameGlint {

				0%,
				100% {
					opacity: 0.3;
				}

				50% {
					opacity: 0.8;
				}
			}
#home-four .img-frame .placeholder-text {
				font-family: 'JetBrains Mono', 'Fira Code', monospace;
				font-size: 0.6rem;
				color: rgba(148, 163, 184, 0.5);
				text-align: center;
				line-height: 1.5;
				padding: 1rem;
				letter-spacing: 0.04em;
			}
#home-four .img-frame .corner {
				position: absolute;
				width: 14px;
				height: 14px;
				border-color: rgba(34, 211, 238, 0.4);
				border-style: solid;
				z-index: 3;
				pointer-events: none;
			}
#home-four .corner.tl {
				top: 8px;
				left: 8px;
				border-width: 1px 0 0 1px;
			}
#home-four .corner.tr {
				top: 8px;
				right: 8px;
				border-width: 1px 1px 0 0;
			}
#home-four .corner.bl {
				bottom: 8px;
				left: 8px;
				border-width: 0 0 1px 1px;
			}
#home-four .corner.br {
				bottom: 8px;
				right: 8px;
				border-width: 0 1px 1px 0;
			}
@media (max-width: 768px) {
#home-four .section {
					padding: 2.4rem 1rem 1.4rem;
				}
#home-four .data-panel {
					position: relative;
					padding: 1.3rem 1.15rem 1.2rem;
					gap: 1rem;
				}
#home-four .right-panel {
					min-height: auto !important;
				}
#home-four .inner-left {
					flex: 1 1 auto;
				}
#home-four .inner-desc {
					font-size: 0.84rem;
				}
#home-four .inner-media {
					height: auto;
					aspect-ratio: 16 / 9;
					min-height: 220px;
				}
#home-four .img-frame {
					min-height: 0;
				}

}