/* ========== 滚动条 ========== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(14, 127, 201, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 127, 201, 0.5);
}

::-webkit-scrollbar-track {
    background: transparent;
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 127, 201, 0.3) transparent;
}

/* ========== Header ========== */
/* 可拆为 header.php 全局引入 */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(5px);
}

.header .logo {
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
}

.header .nav {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* 导航项 — 后端可循环输出，当前页加 class="active" */
.header .nav a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    position: relative;
    transition: all 0.3s;
    font-weight: 500;
}

.header .nav a::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #0E7FC9;
    transition: width 0.3s;
}

.header .nav a:hover::after {
    width: 20px;
}

.header .nav a.active {
    color: #0E7FC9;
}

.header .nav a.active::after {
    width: 20px;
}

/* 搜索框 */
.header .search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.60);
    border-radius: 20px;
    padding: 6px 14px;
    backdrop-filter: blur(5px);
}

.header .search input {
    width: 120px;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(102, 102, 102, 0.7);
    font-size: 14px;
}

.header .search input::placeholder {
    color: rgba(102, 102, 102, 0.7);
    font-size: 14px;
}


.header .search button {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

/* ========== Banner ========== */
/* 后台可配置图片+文案，循环输出 */
.banner {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banner.png') no-repeat center center/cover;
}

.banner-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.40) 0%, rgba(30, 30, 30, 0.10) 101.28%);
}

.banner-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
}

.banner-title {
    font-size: 56px;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.banner-text p {
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
    line-height: 1.6;
    margin-bottom: 120px;
}

.btn-detail {
    display: inline-block;
    padding: 14px 36px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}

.btn-detail::after {
    content: ' →';
}

.btn-detail:hover {
    background: #0E7FC9;
    border-color: #0E7FC9;
    color: #fff;
}

/* ========== 关于我们 ========== */
/* 后台可配置文案，图片从后台替换 */
.about {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    height: 720px;
    box-sizing: border-box;
}

.about-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/aboutUs.png') no-repeat center center/cover;
    z-index: 0;
}

.about-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
}

.about-left {
    flex: 0 0 440px;
}

.about-right {
    flex: 0 0 650px;
}

.section-tag {
    font-size: 18px;
    color: #0E7FC9;
    margin-bottom: 20px;
}

.about-title {
    font-size: 48px;
    color: #333;
    line-height: 1.4;
}

.about-desc {
    font-size: 18px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 30px;
}

.about-stats {
    display: flex;
    gap: 80px;
    margin-top: 80px;
    margin-bottom: 80px;
}

.stat-num {
    font-size: 56px;
    color: #0E7FC9;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 18px;
    color: #666;
}

.about-btns {
    display: flex;
    gap: 16px;
}

.btn-outline {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 24px;
    font-size: 14px;
    border: 1px solid #ddd;
    color: #333;
    background: #fff;
    transition: all 0.3s;
}

.btn-outline::after {
    content: ' →';
    color: #0E7FC9;
    transition: color 0.3s;
}

.btn-outline:hover {
    background: #0E7FC9;
    color: #fff;
    border-color: #0E7FC9;
}

.btn-outline:hover::after {
    color: #fff;
}

/* ========== 为什么选择光宇 ========== */
/* 后台可配置文案+图片，卡片循环输出 */
/* Sticky Scroll：.why 作为滚动轨道，.why-bg + .why-inner 落入同一 grid cell，
   让两个 sticky 元素的自然位置完全对齐，避免前 100vh 只看到背景看不到内容 */
.why {
    position: relative;
    overflow: visible;
    /* 4 张卡片各占约 50vh 滚动距离：100vh 起始 + 200vh 滚动 = 总高 300vh */
    height: 300vh;
    display: grid;
    grid-template-areas: "stack";
    grid-template-columns: 1fr;
}

.why-bg {
    grid-area: stack;
    align-self: start;
    justify-self: stretch;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff; /* 兜底色 */
    z-index: 1;
    overflow: hidden;
}

/* 双层交叉渐变：两层交替显示，避免"闪白" */
.why-bg-a,
.why-bg-b {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.why-bg-a.visible,
.why-bg-b.visible {
    opacity: 1;
}

/* Ken Burns：当前激活层缓慢放大，营造电影推拉镜头感 */
.why-bg-a.visible {
    animation: kenburns 8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.why-bg-b.visible {
    animation: kenburns 8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes kenburns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.why-inner {
    grid-area: stack;
    align-self: start;
    justify-self: stretch;
    position: sticky;
    top: 0;
    z-index: 10;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 100px 0;
    overflow: hidden;
}

.why-left {
    flex: 0 0 440px;
}

.why-title {
    font-size: 48px;
    color: #333;
    line-height: 1.4;
}

/* 卡片两列错落布局 */
.why-cards {
    display: flex;
    gap: 40px;
    flex: 0 0 740px;
    will-change: transform;
}

.card-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card-col-offset {
    margin-top: 320px;
}

.card {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    padding: 40px;
    width: 350px;
    height: 420px;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}

/* 未读到：低调透明 */
.card.is-after {
    background: rgba(255, 255, 255, 0.45);
}

/* 当前激活：白底 + 蓝调投影 + 微微放大 */
.card.is-active {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(14, 127, 201, 0.2);
    z-index: 2;
    transform: scale(1.02);
}

/* 已读：继续淡化 */
.card.is-before {
    background: rgba(255, 255, 255, 0.35);
}

.card-num {
    font-size: 28px;
    color: #0E7FC9;
    font-weight: bold;
    margin-bottom: 100px;
}

.card-icon {
    margin-bottom: 24px;
}

.card-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 14px;
}

.card-desc {
    font-size: 16px;
    color: #999;
    line-height: 1.6;
}

/* ========== 主营产品 ========== */
/* 后台可配置品类+文案+图片，Tab 与面板均由 Swiper 驱动切换 */
.products {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    box-sizing: border-box;
}

.products-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/product.png') no-repeat center center/cover;
    z-index: 0;
}

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

.products-title {
    font-size: 48px;
    color: #333;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 400;
}

.products-inner > .section-tag {
    text-align: center;
    margin-bottom: 20px;
}

/* ---------- Tab 导航 ---------- */
.products-tabs {
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 1);
    border-radius: 40px;
    box-sizing: border-box;
    height: 70px;
}

.products-tabs .swiper,
.products-tabs .swiper-wrapper {
    height: 100%;
}

.products-tabs .swiper {
    overflow: hidden;
}

.products-tabs .swiper-wrapper {
    display: flex;
}

.products-tab {
    text-align: center;
    font-size: 16px;
    color: #666;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 40px;
    white-space: nowrap;
    user-select: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.products-tab.active {
    background: #0E7FC9;
    color: #fff;
}

.products-tab:hover:not(.active) {
    color: #0E7FC9;
}

/* ---------- 内容面板 ---------- */
.products-panels {
    /* 撑满版心 1440px */
}

.products-panels .swiper {
    overflow: hidden;
}

.product-panel {
    display: flex;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    min-height: 460px;
}

.product-panel-text {
    flex: 0 0 50%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.product-panel-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 60px;
}

.product-panel-line {
    width: 100%;
    height: 1px;
    background: #eee;
    margin-bottom: 60px;
}

.product-panel-desc {
    font-size: 14px;
    color: #999;
    line-height: 1.8;
    flex: 1;
}

.product-panel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #0E7FC9;
    margin-top: 30px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.product-panel-arrow:hover {
    background: #0E7FC9;
    color: #fff;
    border-color: #0E7FC9;
}

.product-panel-image {
    flex: 0 0 50%;
    overflow: hidden;
}

.product-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========== 服务市场 ========== */
.markets {
    position: relative;
    padding: 100px 0 0;
    overflow: hidden;
    box-sizing: border-box;
}

.markets-inner {
    text-align: center;
}

/* 地图 + 标记 + 飞线 */
.markets-map {
    position: relative;
    width: 100%;
    margin-top: 0;
    overflow: hidden;
}

.markets-map-stage {
    position: relative;
    width: 100%;
    margin-top: -380px;
}

.markets-map-img {
    display: block;
    width: 100%;
    height: auto;
}

/* 飞线：铺满舞台，坐标系与图片对齐 */
.markets-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.mk-line {
    stroke: #1E88E5;
    stroke-width: 1.6;
    stroke-dasharray: 6 7;
    opacity: 0;
    stroke-dashoffset: 1400;
    animation: mkDraw 2.2s ease-out forwards;
}

.mk-line#mkLineRU { animation-delay: 0.25s; }
.mk-line#mkLineSA { animation-delay: 0.5s; }
.mk-line#mkLineSE { animation-delay: 0.75s; }

@keyframes mkDraw {
    0%   { opacity: 0; stroke-dashoffset: 1400; }
    15%  { opacity: 0.55; }
    100% { opacity: 0.55; stroke-dashoffset: 0; }
}

.mk-flow {
    fill: #1E88E5;
    filter: drop-shadow(0 0 5px rgba(30, 136, 229, 0.9));
}

/* 中国中心节点 */
.mk-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    z-index: 3;
}

.mk-node-dot {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #4FA9F0, #0E7FC9);
    box-shadow: 0 0 10px rgba(14, 127, 201, 0.7);
}

.mk-node-dot::before,
.mk-node-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(14, 127, 201, 0.6);
    animation: mkPulse 2.4s ease-out infinite;
}

.mk-node-dot::after { animation-delay: 1.2s; }

@keyframes mkPulse {
    0%   { width: 16px; height: 16px; opacity: 0.8; }
    100% { width: 60px; height: 60px; opacity: 0; }
}

.mk-node-label {
    margin-left: 12px;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
}

/* 市场图钉 */
.mk-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    align-items: flex-start;
    z-index: 2;
}

.mk-pin-icon {
    flex: none;
    width: 22px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C5.37 0 0 5.37 0 12c0 8.5 12 20 12 20s12-11.5 12-20C24 5.37 18.63 0 12 0z' fill='%231E88E5'/%3E%3Ccircle cx='12' cy='12' r='4.6' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/contain;
    filter: drop-shadow(0 3px 4px rgba(30, 136, 229, 0.35));
    animation: mkFloat 3s ease-in-out infinite;
}

.mk-pin-label {
    margin-left: 8px;
    margin-top: 2px;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
}

@keyframes mkFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@media (max-width: 768px) {
    .mk-node-label,
    .mk-pin-label { font-size: 12px; }
    .mk-pin-icon { width: 16px; height: 22px; }
    .mk-node-dot { width: 12px; height: 12px; }
}

.markets-tag {
    font-size: 18px;
    color: #0E7FC9;
    margin-bottom: 20px;
}

.markets-title {
    font-size: 48px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 30px;
    font-weight: 400;
}

.markets-desc {
    font-size: 16px;
    color: #999;
    line-height: 1.8;
    max-width: 1000px;
    margin: 0 auto 0;
}

/* ========== 解决方案 ========== */
/* 后台可配置文案+图片，横向手风琴卡片切换 */
.solution {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    box-sizing: border-box;
}

.solution-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/jjfa.png') no-repeat center center/cover;
    z-index: 0;
}

.solution-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(30, 40, 50, 0.75);
}

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

/* 头部：标题 + 了解更多按钮 */
.solution-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
}

.solution-header-left .section-tag {
    color: #0E7FC9;
    margin-bottom: 16px;
}

.solution-title {
    font-size: 48px;
    color: #fff;
    line-height: 1.4;
    font-weight: 400;
}

.solution-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s !important;
    white-space: nowrap;
    margin-top: 30px;
}

.solution-more svg {
    stroke: #0E7FC9;
    transition: stroke 0.3s;
}

.solution-more:hover {
    border-color: #0E7FC9;
    background: #0E7FC9;
    color: #fff;
}

.solution-more:hover svg {
    stroke: #fff;
}

/* ---------- 手风琴卡片 ---------- */
.solution-cards {
    display: flex;
    gap: 20px;
    height: 420px;
}

.solution-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.5s ease;
    width: 140px;
    flex-shrink: 0;
}

.solution-card.active {
    width: 640px;
}

.solution-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.4s;
}

/* 激活卡片底部渐变遮罩，让文字可读 */
.solution-card.active .solution-card-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 21, 20, 0.00) 0%, rgba(22, 21, 20, 0.60) 100%);
}

/* 非激活卡片背景稍暗 */
.solution-card:not(.active) .solution-card-bg {
    filter: brightness(0.7);
}

/* 激活卡片底部蓝条 */
.solution-card-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #0E7FC9;
    opacity: 0;
    transition: opacity 0.4s;
}

.solution-card.active .solution-card-bar {
    opacity: 1;
}

/* 激活卡片内容 — 绝对定位，不受宽度变化挤压 */
.solution-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.2s;
}

.solution-card.active .solution-card-content {
    opacity: 1;
    pointer-events: auto;
}

.solution-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0E7FC9;
    display: inline-block;
    margin-right: 10px;
    flex-shrink: 0;
}

.solution-card-title {
    font-size: 24px;
    color: #fff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.solution-card-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    max-width: 400px;
}

/* 收起卡片的编号+竖排文字 */
.solution-card-label {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 1;
    transition: opacity 0.3s;
}

.solution-card.active .solution-card-label {
    opacity: 0;
    pointer-events: none;
}

.solution-card-num {
    font-size: 32px;
    color: #fff;
}

.solution-card-label-text {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 4px;
}

/* ========== 新闻资讯 ========== */
.news {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    box-sizing: border-box;
}

.news-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/news.png') no-repeat center center/cover;
    z-index: 0;
}

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

/* 头部 */
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
}

.news-header-left .section-tag {
    color: #0E7FC9;
    margin-bottom: 16px;
}

.news-title {
    font-size: 48px;
    color: #333;
    line-height: 1.4;
    font-weight: 400;
}

.news-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1px solid rgba(51, 51, 51, 0.40);
    border-radius: 30px;
    color: #333;
    font-size: 15px;
    transition: all 0.3s !important;
    white-space: nowrap;
    margin-top: 30px;
}

.news-more svg {
    transition: stroke 0.3s;
}

.news-more:hover {
    border-color: #0E7FC9;
    background: #0E7FC9;
    color: #fff;
}

.news-more:hover svg {
    stroke: #fff !important;
}

/* 内容区：左侧 2 列 + 右侧 1 列 */
.news-content {
    display: flex;
    gap: 24px;
}

.news-cards {
    flex: 0 0 864px;
    display: flex;
    gap: 24px;
}

.news-card {
    width: 420px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.3s;
}

.news-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.news-card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.news-card:hover .news-card-image img {
    transform: scale(1.05);
}

.news-card-body {
    padding: 28px 24px;
}

.news-card-title {
    font-size: 18px;
    color: #333;
    font-weight: 400;
    margin-bottom: 40px;
    line-height: 1.5;
}

.news-card-desc {
    font-size: 14px;
    color: #999;
    line-height: 1.7;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-body hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 0 0 20px;
}

.news-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1px solid #ddd;
    border-radius: 24px;
    color: #333;
    font-size: 14px;
    transition: all 0.3s !important;
    background: #fff;
}

.news-card:hover .news-card-btn {
    border-color: #0E7FC9;
    background: #0E7FC9;
    color: #fff;
}

.news-card:hover .news-card-btn svg {
    stroke: #fff !important;
}

/* 右侧新闻列表 */
.news-list {
    flex: 1;
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-list-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.news-list-item:hover .news-list-link {
    color: #0E7FC9;
}

.news-list-item:first-child {
    padding-top: 0;
}

.news-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-list-thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
}

.news-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.news-list-item:hover .news-list-thumb img {
    transform: scale(1.08);
}

.news-list-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.news-list-link {
    margin-top: auto;
}

.news-list-item:hover .news-list-title {
    color: #0E7FC9;
}

.news-list-title {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    line-height: 1.5;
    margin-bottom: 6px;
    transition: color 0.3s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-list-desc {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-list-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #333;
    transition: color 0.3s;
}

.news-list-link svg {
    stroke: #0E7FC9;
}

/* ========== 联系我们 ========== */
.contact {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    box-sizing: border-box;
}

.contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/about.png') no-repeat center center/cover;
    z-index: 0;
}

.contact-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(30, 40, 50, 0.75);
}

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

/* 头部 */
.contact-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
}

.contact-header-left .section-tag {
    color: #0E7FC9;
    margin-bottom: 16px;
}

.contact-title {
    font-size: 48px;
    color: #fff;
    line-height: 1.4;
}

.contact-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s !important;
    white-space: nowrap;
    margin-top: 30px;
}

.contact-more:hover {
    border-color: #0E7FC9;
    background: #0E7FC9;
    color: #fff;
}

.contact-more:hover svg {
    stroke: #fff !important;
}

.contact-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

/* 内容区：左栏(文案+图片) + 右栏(表单) */
.contact-content {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.contact-left {
    flex: 0 0 660px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-image {
    border-radius: 16px;
    overflow: hidden;
    height: 380px;
}

.contact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 表单卡片 */
.contact-form-wrap {
    flex: 1;
    background: rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    padding: 50px 50px 60px 50px;
    box-sizing: border-box;
}

.form-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 0 20px;
    height: 54px;
    box-sizing: border-box;
    margin-bottom: 30px;
    gap: 12px;
}

.form-input-group-textarea {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px;
    gap: 8px;
    height: 140px;
}

.form-input-group-textarea .form-label {
    margin-bottom: 0;
}

.form-input-group-textarea .form-textarea {
    width: 100%;
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    color: #333;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
}

.form-input-group-textarea .form-textarea::placeholder {
    color: #bbb;
}

.form-input-group .form-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 0;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.form-input-group .form-input {
    background: transparent;
    padding: 0;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.form-row {
    margin-bottom: 0;
}

.form-row-2 {
    display: flex;
    gap: 20px;
}

.form-row-2 .form-group {
    flex: 1;
}

.form-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    outline: none;
    box-sizing: border-box;
    transition: box-shadow 0.3s;
}

.form-input::placeholder {
    color: #bbb;
}

.form-input:focus {
    outline: none;
}

.form-submit {
    text-align: center;
    margin-top: 24px;
}

.form-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 40px;
    background: #0E7FC9;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s;
}

.form-btn:hover {
    background: #0a6aaa;
}

/* ========== Footer ========== */
.footer {
    background: #1C2025;
    padding: 80px 0 0;
}

.footer-inner {
    position: relative;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    padding-bottom: 60px;
}

.footer-left {
    flex: 0 0 400px;
}

.footer-logo {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 40px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-contact-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.footer-contact-item span {
    line-height: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.footer-links {
    display: flex;
    gap: 90px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
}

.footer-col a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px 0;
    text-align: center;
}

.footer-bottom p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}


/* ==================================================================
 * 响应式适配
 * 断点：1024（平板/整体堆叠，与 JS 关闭 Sticky 一致）｜768（手机）｜480（小屏）
 * 说明：导航后续用模板自带，这里 header 仅做窄屏兜底
 * ================================================================== */

/* ---------- ≤1024：整体由并排改为堆叠 ---------- */
@media (max-width: 1024px) {
    /* Header 兜底：窄屏隐藏本站导航与搜索（改用模板导航） */
    .header { padding: 20px 0; }
    .header .nav,
    .header .search { display: none; }

    /* Banner */
    .banner-title { font-size: 48px; line-height: 1.3; margin-bottom: 20px; }
    .banner-text p { font-size: 18px; line-height: 1.7; margin-bottom: 48px; }
    .btn-detail { padding: 12px 28px; font-size: 16px; }

    /* 关于我们：定高改自适应，左右改上下 */
    .about { height: auto; padding: 50px 0; }
    .about-inner { flex-direction: column; gap: 30px; }
    .about-left,
    .about-right { flex: 1 1 auto; width: 100%; }
    .about-stats { gap: 32px; margin-top: 30px; margin-bottom: 30px; }

    /* 为什么选择光宇：解除 Sticky 轨道，卡片竖排 */
    .why {
        height: auto;
        display: block;
        overflow: visible;
    }
    .why-bg {
        position: absolute;
        height: 100%;
        min-height: 100%;
        z-index: 0;
    }
    .why-inner {
        position: relative;
        z-index: 2;
        height: auto;
        flex-direction: column;
        gap: 30px;
        padding: 50px 0;
        transform: none;
    }
    .why-left { flex: 1 1 auto; width: 100%; }
    .why-cards {
        flex: 1 1 auto;
        width: 100%;
        flex-direction: column;
        gap: 16px;
        transform: none !important;
    }
    .card-col { gap: 16px; display: contents; }
    .card-col-offset { margin-top: 0; }
    .card-item-1 { order: 1; }
    .card-item-2 { order: 2; }
    .card-item-3 { order: 3; }
    .card-item-4 { order: 4; }
    .card {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 28px;
        background: rgba(255, 255, 255, 0.9);
    }
    /* 手机/平板：未选中的卡片略淡，建立视觉层次（点击切换由 JS 驱动） */
    .card.is-before,
    .card.is-after { background: rgba(255, 255, 255, 0.65); }
    .card.is-active { background: rgba(255, 255, 255, 0.96); }
    /* 关闭背景 Ken Burns 缩放动画，静态展示 */
    .why-bg-a,
    .why-bg-b { animation: none !important; }
    .card-num { margin-bottom: 24px; }
    .card-icon { margin-bottom: 16px; }
    .card-title { font-size: 18px; margin-bottom: 10px; }
    .card-desc { font-size: 14px; }

    /* 主营产品：图文左右改上下 */
    .product-panel { flex-direction: column; min-height: 0; }
    .product-panel-text { flex: 1 1 auto; padding: 30px; }
    .product-panel-title { margin-bottom: 24px; }
    .product-panel-line { margin-bottom: 24px; }
    .product-panel-image { flex: 1 1 auto; height: 240px; }
    /* Tab：保持 PC 胶囊样式，允许横向滑动 */
    .products-tabs {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 28px;
        padding: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }
    .products-tabs .swiper { overflow: visible; }
    .products-tabs .swiper-wrapper { flex-wrap: nowrap; }
    .products-tabs .swiper-slide { width: auto; flex: 0 0 auto; }
    .products-tab {
        flex: 0 0 auto;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 24px;
        transition: all 0.3s ease;
    }
    /* 隐藏横向滚动条 */
    .products-tabs::-webkit-scrollbar { display: none; }
    .products-tabs { scrollbar-width: none; }

    /* 解决方案：横向手风琴改竖排卡片，全部展开（纯展示，无 hover 态） */
    .solution-cards { flex-direction: column; height: auto; gap: 12px; }
    .solution-card,
    .solution-card.active { width: 100%; height: 200px; }
    /* 统一所有卡的背景亮度，去掉非激活态的暗化 */
    .solution-card .solution-card-bg,
    .solution-card.active .solution-card-bg { filter: none; }
    .solution-card .solution-card-content { opacity: 1; pointer-events: auto; padding: 20px; }
    .solution-card-title { font-size: 18px; margin-bottom: 8px; }
    .solution-card-desc { font-size: 13px; }
    .solution-card .solution-card-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(22,21,20,0) 0%, rgba(22,21,20,0.6) 100%);
    }
    /* 隐藏激活态底部蓝条，所有卡保持一致 */
    .solution-card .solution-card-bar,
    .solution-card.active .solution-card-bar { opacity: 0; }
    .solution-card-label { display: none; }

    /* 新闻资讯：左右两区改上下，大卡片并排改单列 */
    .news-content { flex-direction: column; gap: 20px; }
    .news-cards { flex: 1 1 auto; flex-direction: column; }
    .news-card { width: 100%; }
    .news-list { flex: 1 1 auto; }

    /* 联系我们：文案区与表单区改上下 */
    .contact-content { flex-direction: column; gap: 30px; }
    .contact-left,
    .contact-form-wrap { flex: 1 1 auto; width: 100%; }
    .contact-form-wrap { padding: 30px; }
    .form-input-group { margin-bottom: 20px; height: 48px; }
    .form-input-group-textarea { height: 120px; }
    .form-submit { margin-top: 16px; }

    /* Footer：品牌区与链接区改上下，链接自动换行 */
    .footer-main { flex-direction: column; gap: 30px; }
    .footer-left { flex: 1 1 auto; width: 100%; }
    .footer-links { flex-wrap: wrap; gap: 30px 48px; }
}

/* ---------- ≤768：手机，字号与间距整体收敛 ---------- */
@media (max-width: 768px) {
    /* 大标题统一缩小 */
    .about-title,
    .why-title,
    .markets-title,
    .products-title,
    .solution-title,
    .news-title,
    .contact-title { font-size: 30px; }
    .section-tag,
    .markets-tag { font-size: 15px; margin-bottom: 12px; }

    /* Banner */
    .banner-title { font-size: 38px; line-height: 1.4; letter-spacing: 1px; }
    .banner-text p { font-size: 17px; line-height: 1.7; margin-bottom: 36px; }
    .btn-detail { padding: 12px 28px; font-size: 15px; }

    /* 关于我们统计 */
    .about-stats { gap: 24px; flex-wrap: wrap; }
    .stat-num { font-size: 40px; }
    .stat-label { font-size: 15px; }

    .about-desc { font-size: 15px; margin-bottom: 20px; }

    /* 各区块通用内边距收敛 */
    .products,
    .solution,
    .news,
    .contact { padding: 48px 0; }
    .markets { padding: 48px 0 0; }
    .about { padding: 48px 0; }

    /* 主营产品 */
    .product-panel-text { padding: 24px; }
    .products-title { margin-bottom: 28px; }

    /* 头部：标题 + “了解更多” 按钮 改上下排列 */
    .solution-header,
    .news-header,
    .contact-header { flex-direction: column; gap: 16px; margin-bottom: 28px; }
    .solution-more,
    .news-more,
    .contact-more { margin-top: 0; }

    /* 地图：减小上提量，避免重叠过多 */
    .markets-title { margin-bottom: 20px; }
    .markets-desc { font-size: 14px; margin-bottom: 0; }

    /* 地图：减小上提量，避免重叠过多 */
    .markets-map-stage { margin-top: -120px; }

    /* 新闻小卡缩图缩小 */
    .news-list-thumb { flex: 0 0 90px; width: 90px; height: 90px; }
    .news-card-body { padding: 20px 18px; }
    .news-card-title { margin-bottom: 24px; font-size: 16px; }
    .news-card-desc { margin-bottom: 14px; }
    .news-card-body hr { margin: 0 0 14px; }

    /* Footer 链接两列 */
    .footer-links { gap: 32px 40px; }
    .footer-logo { font-size: 24px; margin-bottom: 24px; }
    .footer-contact { gap: 14px; }
    .footer-contact-item span { font-size: 13px; }
    .footer-bottom { padding: 16px 0; }
}

/* ---------- ≤480：小屏进一步微调 ---------- */
@media (max-width: 480px) {
    .banner-title { font-size: 30px; line-height: 1.4; }
    .about-title,
    .why-title,
    .markets-title,
    .products-title,
    .solution-title,
    .news-title,
    .contact-title { font-size: 24px; }

    /* 各区块间距再收一档 */
    .products,
    .solution,
    .news,
    .contact,
    .about { padding: 40px 0; }
    .markets { padding: 40px 0 0; }
    .footer { padding: 50px 0 0; }
    .footer-main { padding-bottom: 40px; }

    /* 统计三项单排显示（每项占约一半） */
    .about-stats { gap: 16px 24px; }

    .product-panel-text,
    .contact-form-wrap { padding: 20px; }

    /* 服务市场地图标签更小，避免拥挤 */
    .markets-map-stage { margin-top: -60px; }
    .mk-node-label,
    .mk-pin-label { font-size: 11px; }

    /* 表单并排两项改上下 */
    .form-row-2 { flex-direction: column; gap: 0; }

    /* Footer 链接三列 */
    .footer-links { gap: 32px 16px; }
    .footer-col { flex: 0 0 calc(33.333% - 11px); }
}