/* =================================
   首页 About 卡片毛玻璃效果
   ================================= */
.home-about-us {
    background-image: url("../images/map.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(90%, 1100px) auto;
}

.hs-home-about-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(246, 248, 251, 0.64) 100%) !important;
    border: 1px solid rgba(209, 213, 219, 0.72);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hs-home-about-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 248, 251, 0.88) 100%) !important;
    }
}

/* =================================
   左侧手风琴文字展开/收起动画
   ================================= */
.solutions-list .solution-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #000;
}

.solutions-list .solution-desc.active {
    max-height: 400px;
    /* 根据内容可调整 */
    opacity: 1;
}
.solutions-list .solution-desc.active a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c8c8c8;
    transition: color 0.3s;
}

.solutions-list .solution-desc.active a::after {
    content: "→";
    color: currentColor;
    font-size: 1em;
    line-height: 1;
}

.solutions-list .solution-desc.active a:hover {
    color: #f0001e;
}
.solutions-list .solution-title {
    cursor: pointer;
    padding: 14px 0;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #eee;
    transition: color 0.3s;
}

.solutions-list .solution-title.active {
    background: linear-gradient(90deg, #f0001e 0%, #000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #f0001e;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

:is(.home-contact-select, .hs-contact-select) {
	display: grid;
	width: 100%;
	gap: 12px;
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 12px;
	color: #111;
	font-size: 15px;
	line-height: 1.35;
	border: 1px solid rgba(17, 24, 39, 0.18);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__indicator {
	display: grid;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	place-items: center;
	border: 1px solid rgba(17, 24, 39, 0.38);
	border-radius: 4px;
	background: #fff;
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__indicator::after {
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	content: "";
	opacity: 0;
	transform: translateY(-1px) rotate(45deg);
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__input:checked + .home-contact-select__indicator {
	border-color: #f0001e;
	background: #f0001e;
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__input:checked + .home-contact-select__indicator::after {
	opacity: 1;
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__input:checked ~ .home-contact-select__label {
	color: #f0001e;
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__option:hover,
:is(.home-contact-select, .hs-contact-select) .home-contact-select__option:has(.home-contact-select__input:checked) {
	border-color: rgba(240, 0, 30, 0.5);
	background: rgba(240, 0, 30, 0.05);
}

:is(.home-contact-select, .hs-contact-select) .home-contact-select__input:focus-visible + .home-contact-select__indicator {
	outline: 2px solid #f0001e;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	:is(.home-contact-select, .hs-contact-select) .home-contact-select__options {
		grid-template-columns: 1fr;
	}
}

/* =================================
   右侧图片淡入淡出动画
   ================================= */
.solutions-images {
    position: relative;
    width: 100%;
    min-height: clamp(280px, 32vw, 520px);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    overflow: hidden;
    border-radius: 10px;
}

.solutions-images .solution-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
    border-radius: inherit;
}

.solutions-images .solution-img.active {
    opacity: 1;
    z-index: 1;
}

/* =================================
   荣誉资质横向循环动效，沿用 R&D 页面效果
   ================================= */
.hs-honors-qualifications {
    --hs-honors-marquee-gap: clamp(9px, 1.3vw, 20px);
    --hs-honors-marquee-distance: 0px;
    --hs-honors-edge-fade: clamp(24px, 4vw, 72px);
    width: 80vw !important;
    max-width: 80vw !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--hs-honors-edge-fade),
        #000 calc(100% - var(--hs-honors-edge-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--hs-honors-edge-fade),
        #000 calc(100% - var(--hs-honors-edge-fade)),
        transparent 100%
    );
}

.hs-honors-qualifications[data-hs-honors-marquee="true"] {
    display: block;
}

.hs-honors-qualifications__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: hs-honors-marquee var(--hs-honors-marquee-duration, 90s) linear infinite;
}

.hs-honors-qualifications__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--hs-honors-marquee-gap);
    padding-right: var(--hs-honors-marquee-gap);
}

.hs-honors-qualifications__group > * {
    flex: 0 0 auto;
}

.hs-honors-qualifications__group img {
    display: block;
    width: clamp(260px, 24vw, 430px);
    aspect-ratio: 16 / 9;
    padding: clamp(5px, 0.55vw, 9px);
    background: #fff;
    object-fit: contain;
    object-position: center;
    border-radius: 16px;
}

@keyframes hs-honors-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(var(--hs-honors-marquee-distance) * -1), 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-honors-qualifications__track {
        animation: none;
        transform: none;
    }
}

/* =================================
   响应式调整
   ================================= */
@media (max-width: 768px) {
    .solutions-container {
        flex-direction: column;
    }

    .solutions-images {
        min-height: 220px;
        aspect-ratio: 4 / 3;
    }

    .solutions-list .solution-title {
        font-size: 16px;
    }

    .solutions-list .solution-desc {
        font-size: 14px;
    }
}