.hero-header {
    position: relative;
    background: var(--deep-blue);
    padding: 32px 0;
    margin-top: -80px; /* 负上边距让 hero-header 从页面顶部开始 */
    padding-top: 112px; /* 为透明 header 预留空间 (80px + 32px) */
}

/* Banner video background */
.hero-header { overflow: hidden }
.hero-header .video-bg { position:absolute; inset:0; z-index:0; pointer-events:none }
.hero-header .bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.8) saturate(1.05) }
.hero-header .hero-content { position:relative; z-index:1 }

.hero-header:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/static/picture/lego4.jpg) center/cover no-repeat;
    opacity: .45;
    mix-blend-mode: multiply
}

.hero-header .hero-content {
    position: relative;
    z-index: 1
}

.hero-title {
    font-size: 48px;
    color: var(--light);
    font-weight: 900;
    margin: 0 0 6px
}

.hero-subtitle {
    color: var(--accent-mint);
    letter-spacing: .12em
}


body {
    background: var(--deep-blue);
    color: var(--text-secondary)
}


.header .nav-link {
    color: var(--text-secondary)
}

.header .nav-link:hover,
.header .nav-link.active {
    color: var(--green)
}

.dropdown-menu {
    background: var(--deep-blue-2);
    border: 1px solid rgba(255, 255, 255, .08)
}

.dropdown-menu a {
    color: #c7e0f8
}


.search-icon {
    filter: invert(89%) sepia(10%) saturate(478%) hue-rotate(161deg) brightness(105%) contrast(95%)
}



.footer {
    background: var(--deep-blue-2);
    color: var(--text-secondary);
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(34,197,94,.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(59,130,246,.06) 0%, transparent 50%);
    pointer-events: none
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px
}

.footer-title {
    color: var(--light);
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 12px;
    background: linear-gradient(135deg, var(--light) 0%, rgba(255,255,255,.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.footer-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0 0 24px;
    line-height: 1.6
}

.email-signup {
    display: flex;
    gap: 12px;
    align-items: center;
    max-width: 400px
}

.email-input {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--light);
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    transition: all .2s ease
}

.email-input::placeholder { color: rgba(255,255,255,.5); }

.email-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
    outline: none
}

.email-submit {
    background: var(--green);
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 12px rgba(34,197,94,.3);
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center
}

.email-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34,197,94,.4)
}

.email-submit::after {
    content: "→";
    color: var(--text-on-accent);
    font-size: 18px;
    font-weight: bold;
}

.social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    justify-content: flex-end
}

.social-icon {
    border-radius: 6px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all .2s ease;
    position: relative;
    overflow: hidden
}

.social-icon:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34,197,94,.2)
}

.social-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transform: translate(-50%, -50%);
    opacity: .7
}

.footer-info {
    text-align: right;
    line-height: 1.8
}

.footer-info p {
    margin: 0 0 8px;
    color: var(--text-secondary)
}

.footer a {
    color: var(--green);
    text-decoration: none;
    transition: color .2s ease
}

.footer a:hover { color: var(--green-2); }


.home {
    font-family: var(--font-sans);
    color: #c7e0f8;
    background: var(--deep-blue)
}

.sec {
    max-width: 1440px;
    margin: 0 auto;
    padding: 22px 32px
}

/* Hero */
.hero {
    position: relative;
    min-height: 126vh;
    color: #fff;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(5, 25, 40, .9), rgba(5, 25, 40, .85)), var(--deep-blue);
    margin-top: -80px; /* 负上边距让 hero 从页面顶部开始 */
    padding-top: 80px; /* 为 header 预留空间 */
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/static/picture/lego4.jpg) center/cover no-repeat;
    mix-blend-mode: multiply;
    opacity: .55
}

.hero .inner {
    position: relative;
    z-index: 1;
    width: 1360px;
    margin: 0 auto;
}

.hero h1 {
    font-size: var(--fs-6xl);
    line-height: 1.14;
    margin: 0 0 28px;
    font-weight: 900;
    letter-spacing: .5px
}

.hero .play {
    display: inline-flex;
    align-items: center;
    gap: 14px
}

.hero .btn-play {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--green), #0b3a4f);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(34, 197, 94, .35)
}

.hero .btn-play:after {
    content: "";
    border-left: 18px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 6px
}

.hero .label {
    letter-spacing: .28em;
    color: #a7f3d0
}

/* Title */
.title {
    font-size: var(--fs-4xl);
    font-weight: 900;
    margin: 0 0 28px;
    color: var(--text-light)
}

.section-light {
    background: var(--deep-blue-2);
    border-radius: 16px
}

.muted {
    color: #99b5c8
}

.latest {
    display: grid;
    grid-template-columns: 1.6fr 1.6fr;
    gap: 36px
}

.card {
    background: var(--card-deep);
    color: var(--light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45)
}

.card img {
    width: 100%;
    height: auto;
    display: block
}

.card .pad {
    padding: 18px
}

.card .headline {
    font-size: var(--fs-2xl);
    line-height: 1.28;
    font-weight: 900;
    margin: 12px 0
}

.tag {
    display: inline-block;
    background: var(--green);
    color: var(--tag-text-dark);
    font-weight: 800;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px
}

.tiles3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px
}

.tile {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    min-height: 360px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35)
}

.tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.75)
}

.tile .tinner {
    position: relative;
    padding: 32px
}

.tile .big {
    font-size: 46px;
    font-weight: 900
}

.tile .small {
    max-width: 360px;
    margin-top: 10px;
    color: var(--text-secondary)
}

.tile .ghost {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 50px;
    height: 50px;
    border: 2px solid var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.tile .ghost:after {
    content: "";
    border-left: 10px solid var(--white);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 4px
}

.tiles3 .label {
    position: absolute;
    left: 24px;
    top: 24px;
    font-weight: 900;
    color: #cbd5e1
}

.cta {
    display: inline-block;
    background: var(--green);
    color: #062a1a;
    padding: 14px 22px;
    border-radius: 6px;
    border: 0;
    box-shadow: 0 8px 24px rgba(34, 197, 94, .35);
    font-weight: 800
}

.nav-arrows {
    display: flex;
    gap: 16px;
    margin-top: 20px
}

.nav-arrows .circle {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: 2px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center
}

.nav-arrows .circle:before {
    content: "";
    border-right: 10px solid var(--green);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
}

.nav-arrows .next:before {
    transform: rotate(180deg)
}

.intro {
    background: linear-gradient(180deg, #051928, #0a2233);
    color: var(--text-secondary);
    padding: 120px 24px
}

.intro .wrap {
    max-width: 1360px;
    margin: 0 auto
}

.intro h2 {
    font-size: 56px;
    line-height: 1.18;
    margin: 0 0 14px;
    font-weight: 900
}

.intro p {
    color: #bfe7d3;
    font-size: 20px
}

.intro .ghost {
    display: inline-block;
    margin-top: 18px;
    border: 2px solid var(--green);
    color: var(--accent-mint);
    padding: 10px 16px;
    border-radius: 4px
}

@media(max-width:1024px) {
    .latest {
        grid-template-columns: 1fr
    }

    .tiles3 {
        grid-template-columns: 1fr
    }

    .hero h1 {
        font-size: 48px
    }
}



body {
    background: var(--deep-blue);
    color: #c7e0f8
}

.category-nav {
    background: var(--deep-blue-2);
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.category-tab {
    color: #c7e0f8
}

.category-tab.active,
.category-tab:hover {
    background: var(--green);
    color: #062a1a
}

.main {
    background: transparent
}

.news-item {
    background: var(--deep-blue-2);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35)
}

.news-meta .news-category {
    color: var(--green)
}

.news-title a {
    color: var(--light)
}

.pagination a {
    color: #c7e0f8
}

.pagination .active a {
    background: var(--green);
    color: #062a1a
}

.pagination a:hover {
    color: var(--green)
}

.modern-layout {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            rgba(30, 64, 175, 0.02) 0%,
            rgba(5, 150, 105, 0.02) 50%,
            rgba(30, 64, 175, 0.02) 100%);
}

.hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px
}

.floating-shape {
    position: absolute;
    background: var(--green);
    border-radius: 50%;
    opacity: 0.08;
    animation: float 15s ease-in-out infinite;
}

.shape-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.shape-2 {
    width: 80px;
    height: 80px;
    top: 30%;
    right: 20%;
    animation-delay: 5s;
}

.shape-3 {
    width: 60px;
    height: 60px;
    bottom: 40%;
    left: 70%;
    animation-delay: 10s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(90deg);
    }

    50% {
        transform: translateY(-10px) rotate(180deg);
    }

    75% {
        transform: translateY(-15px) rotate(270deg);
    }
}

.nav-bread-wrapper {
    padding: 2rem 0;
    backdrop-filter: blur(10px);
    border-radius: 12px;
}

.nav-bread {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.95rem;
    color: var(--text-muted-2);
    padding: 0 1.5rem;
    font-weight: 500;
}

.breadcrumb-icon {
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-bread a {
    color: var(--green);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

.nav-bread a:hover {
    color: var(--green);
    transform: translateX(2px);
}
.article-header {
    margin-bottom: 3rem;
}

.back-link {
    margin-bottom: 3rem;
}

.back-arrow {
    color: var(--brand-blue);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.back-arrow:hover {
    color: var(--brand-blue-dark);
}

.article-title-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.article-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--text-title);
    flex: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
}

.article-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 120px;
    text-align: right;
}

.article-category {
    color: var(--brand-blue);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.article-date {
    color: var(--text-mid);
    font-size: 0.9rem;
    font-weight: 400;
}

.article-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-base);
    margin-bottom: 3rem;
    padding: 0;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: var(--text-title);
    margin: 2rem 0 1rem 0;
    font-weight: 600;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: 1.5rem 0;
}

.article-content blockquote {
    border-left: 4px solid var(--brand-blue);
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    background: var(--bg-light-1);
    font-style: italic;
    color: var(--text-base);
}

.article-content a {
    color: var(--green);
    text-decoration: underline;
}

/* 鏍囩 */
.article-tags {
    margin: 2rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-soft);
    background: white;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-item {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--bg-light-2);
    color: var(--text-base);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.tag-item:hover {
    background: var(--border-neutral);
    color: var(--text-base);
}

/* 鎿嶄綔鎸夐挳 */
.article-actions {
    margin: 2rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-soft);
}

.action-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--border-soft-2);
    background: var(--white);
    color: var(--text-base);
    border-radius: 4px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.9rem;
}

.action-btn:hover {
    background: var(--bg-light-1);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

/* 鏂囩珷瀵艰埅 */
.article-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    padding: 2rem 0;
    border-top: 1px solid var(--border-soft);
}

.nav-prev,
.nav-next {
    position: relative;
}

.nav-content {
    flex: 1;
}

.nav-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.nav-title {
    display: block;
    font-weight: 500;
    color: var(--text-base);
    line-height: 1.4;
    font-size: 0.9rem;
}

.sidebar {
    position: sticky;
    top: 2rem;
}

.more-news {
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.more-news-title {}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.news-card {
    border: none;
    box-shadow: none;
    backdrop-filter: blur(10px);
    margin-bottom: 0;
    overflow: hidden;
}

.news-image {
    position: relative;
    margin-bottom: 1rem;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.news-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--green);
    color: white;
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.news-content {
    padding: 0rem;
}

.news-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    line-height: 1.4;
    color: #1e293b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-title a:hover {
    color: var(--green);
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.news-category {
    color: var(--green);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: rgba(30, 64, 175, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.news-date {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
}

/* 鍝嶅簲寮忚璁?*/
@media (max-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .more-news-title {
        font-size: 1.8rem;
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 768px) {

    .x8,
    .x4 {
        width: 100%;
        margin-bottom: 2rem;
    }

    .article-title-section {
        flex-direction: column;
        gap: 1rem;
    }

    .article-title {
        font-size: 2rem;
    }

    .article-meta {
        align-items: flex-start;
        text-align: left;
    }

    .article-navigation {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    .sidebar {
        position: static;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .more-news-title {
        font-size: 1.3rem;
        margin-bottom: 2rem;
    }
}

/* 鏂囩珷澶撮儴鐜颁唬鍖栬璁?*/
.article-header {
    position: relative;
    color: white;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.article-header-background {
    position: absolute;
}

.header-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border-radius: 50%;
    transform: translate(50%, -50%);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(50%, -50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translate(50%, -50%) scale(1.1);
    }
}

.title-wrapper {
    position: relative;
    z-index: 1;
    max-width: 1400px;
}

.article-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    transition: all 0.3s ease;
}

.article-category-badge:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.category-icon {
    color: rgba(255, 255, 255, 0.9);
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.article-title {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 0 0 2.5rem 0 !important;
    color: white !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg,
            #ffffff 0%,
            #e0f2fe 30%,
            #ffffff 60%,
            #dcfce7 100%) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShine 3s ease-in-out infinite;
}

@keyframes textShine {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }
}

.article-meta-enhanced {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 1rem 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.meta-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.meta-icon {
    color: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
}

.meta-label {
    font-size: 0.85rem;
    opacity: 0.8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-value {
    font-weight: 700;
    color: white;
    font-size: 0.95rem;
}

/* 鏂囩珷鍐呭鍖哄煙 */
.article-content {
    padding: 0;
    font-size: 1.2rem !important;
    line-height: 1.8 !important;
    color: #374151 !important;
}

.article-content h1,
.article-content h2,
.article-content h3 {
    background: linear-gradient(135deg, var(--green) 0%, var(--green) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    margin: 3rem 0 1.5rem 0 !important;
}

.article-content h2 {
    font-size: 2.2rem !important;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--green) 0%, var(--green) 100%) 1;
    padding-bottom: 1rem;
}

.article-content img {
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease !important;
}

.article-content img:hover {
    transform: scale(1.02) !important;
}

.article-content a {
    color: var(--green) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    position: relative;
    transition: all 0.3s ease;
}

.article-content a:hover {
    color: var(--green) !important;
}

/* 鍝嶅簲寮忚璁?*/
@media (max-width: 768px) {
    .article-title {
        font-size: 2.5rem !important;
    }

    .article-header {
        padding: 2.5rem 2rem 2rem !important;
    }

    .article-content {
        padding: 2.5rem 2rem !important;
    }

    .article-meta-enhanced {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-arrow-wrapper {
        width: 35px;
        height: 35px;
        margin: 0 1rem;
    }
}

/* Title card as white panel */
.article-title {
    color: #0f172a !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    text-shadow: none !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12) !important;
    margin-bottom: 1.75rem !important;
}

/* Pills look for meta chips */
.meta-item {
    border-radius: 999px !important;
    padding: 0.75rem 1.25rem !important;
}

.article-category-badge {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

.more-news-title {
    color: #0f172a !important;
}

/* ===== B2B/Foreign-trade minimal style overrides ===== */
/* Header: plain white card with subtle border */
.article-header-background,
.header-decoration {
    display: none !important;
}

.article-category-badge {
    background: #f3f6fb !important;
    color: #1e8f6f !important;
    border: 1px solid #e6eaf0 !important;
    backdrop-filter: none !important;
}

.category-icon {
    animation: none !important;
}

.article-title {
    background: none !important;
    box-shadow: none !important;
    -webkit-text-fill-color: initial !important;
    color: #0f172a !important;
}

.article-meta-enhanced .meta-item {
    background: #f8fafc !important;
    border: 1px solid #e6eaf0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.meta-icon {
    color: #64748b !important;
}

.meta-label {
    color: #64748b !important;
}

.meta-value {
    color: #0f172a !important;
}

/* Body: pure white, no gradients */
.article-content {}

.article-content h1,
.article-content h2,
.article-content h3 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #0f172a !important;
}

/* Sidebar cards: white cards with borders */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.news-card {
    margin-bottom: 30px;
}

.news-image {
    margin: 0;
}

.news-image img {
    height: 320px;
}

.news-content {
    padding: 0rem;
}

.news-tag {
    background: var(--green-2) !important;
}

.news-title a {
    color: #0f172a;
}

.news-title a:hover {
    color: #1e8f6f;
}

.news-category {
    color: var(--green-2);
}



.products-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 16px;
    background: var(--deep-blue)
}

.prod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px
}

.prod-head {
    font-size: 34px;
    margin: 8px 0 12px;
    font-weight: 800;
    color: #e6f9ff;
    text-align: center;
}

.prod-head .num {
    color: var(--green)
}

.prod-head .unit {
    font-style: italic;
    color: #a9bfd1
}

.prod-img {
    border-radius: 8px;
    overflow: hidden;
    background: #0b2a3d
}

.prod-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block
}

.card {
    background: var(--deep-blue-2);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: #c7e0f8
}

.card h3 {
    margin: 0 0 16px;
    font-size: 30px;
    color: var(--green);
    font-weight: 800;
    text-align: center;
}

.card h3 a {
    color: var(--green)
}

.card p {
    margin: 0 0 14px;
    color: #a9bfd1;
    font-size: 18px;
    line-height: 1.9
}

.btn {
    display: inline-block;
    margin-top: 10px;
    background: var(--green);
    color: #062a1a;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none
}

@media(max-width:1024px) {
    .prod-grid {
        grid-template-columns: 1fr
    }

    .prod-img img {
        height: 300px
    }
}


.hydro100-page {
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
    color: #e9f1ff;
    background: var(--deep-blue)
}

.hydro100-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 60px 20px;
    margin-bottom: 0;
    padding-bottom: 0;
}

.hydro100-hero {
    position: relative;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 40px;
    align-items: center
}

.hydro100-hero h1 {
    font-size: 36px;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--green);
    letter-spacing: .5px
}

.hydro100-hero h2 {
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 14px;
    color: #ffffff
}

.hydro100-hero p {
    font-size: 16px;
    color: #c7e0f8;
    margin: 0 0 24px
}

.hydro100-btn {
    display: inline-block;
    background: var(--green);
    color: #062a1a;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px
}

.hydro100-hero-img {
    min-height: 180px;
    background: #083146;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

.hydro100-spec-mini {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    gap: 12px;
    margin-top: 16px
}

.hydro100-spec-mini .item {
    background: #0a2739;
    border-radius: 10px;
    padding: 10px 12px
}

.hydro100-spec-mini .k {
    color: #8cd7b3;
    margin-bottom: 6px;
    font-size: 12px
}

.hydro100-spec-mini .v {
    color: #fff;
    font-weight: 700;
    font-size: 16px
}

.hydro100-feats {
    margin-top: 20px
}

.hydro100-feats ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 0 0
}

.hydro100-feats li {
    padding: 12px 8px;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.hydro100-feats li:nth-last-child(-n+3) {
    border-bottom: 1px solid rgba(255, 255, 255, .12)
}

/* why + video */
.hydro100-why {
    padding: 80px 20px;
    text-align: center
}

.hydro100-why h3 {
    font-size: 46px;
    color: #ff9e00;
    margin: 0 0 14px
}

.hydro100-why p {
    max-width: 980px;
    margin: 0 auto;
    color: #d5e3ff;
    line-height: 1.9
}

.hydro100-video {
    margin-top: 36px;
    display: flex;
    justify-content: center
}

.hydro100-video iframe {
    width: 100%;
    max-width: 960px;
    height: 540px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

.contact-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px
}

.section-gap {
    padding: 56px 20px
}

/* Heading */
.contact-head h2 {
    margin: 0 0 8px;
    font-size: 36px;
    color: var(--light);
    font-weight: 800
}

.contact-head p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.9
}

/* Form */
.contact-form {
    margin-top: 32px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

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

.label {
    color: #fff;
    font-size: 14px;
    font-weight: 600
}

.required::after {
    content: "*";
    color: #ff4d4f;
    margin-left: 4px
}

.input,
.select,
.textarea {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: var(--light);
    padding: 12px 12px;
    font-size: 16px;
    outline: none;
    border-radius: 10px;
    transition: all .2s ease
}

.input::placeholder,
.textarea::placeholder { color: rgba(255,255,255,.5); }

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(34,197,94,.18)
}

.select { appearance: none; background: rgba(255,255,255,.06) }

.textarea { min-height: 180px; resize: vertical }

/* Consent */
.consent {
    margin: 24px 0;
    color: var(--light);
    line-height: 1.8
}

.consent input {
    margin-right: 10px
}

/* Recaptcha + Submit */
.actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 12px
}

.recaptcha {
    width: 320px;
    height: 78px;
    background: #eef2f7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 14px
}

.btn {
    background: var(--green);
    color: var(--text-on-accent);
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(34,197,94,.28);
    transition: transform .15s ease, box-shadow .15s ease
}

.btn:hover { box-shadow: 0 10px 24px rgba(34,197,94,.35); transform: translateY(-1px) }

/* Footer Info */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-top: 48px
}

.info h4 {
    letter-spacing: 2px;
    color: var(--text-secondary);
    font-weight: 800;
    margin: 0 0 16px
}

.info p {
    margin: 0 0 10px;
    color: var(--light);
    font-size: 20px
}

.info a {
    color: var(--green);
    text-decoration: none
}

.info .logo {
    margin-top: 16px
}

@media(max-width:900px) {
    .form-grid {
        grid-template-columns: 1fr
    }

    .info-grid {
        grid-template-columns: 1fr
    }
}


/* choose section */
.hydro100-choose {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 40px;
    align-items: center;
    padding: 40px 20px
}

.hydro100-choose .img {
    min-height: 420px;
    background-size: cover;
    background-position: center
}

.hydro100-choose h3 {
    font-size: 42px;
    color: var(--green);
    margin: 0 0 10px
}

.hydro100-choose h4 {
    font-size: 28px;
    margin: 0 0 20px;
    color: #fff
}

.hydro100-kv {
    border: none;
    border-radius: 12px;
    overflow: hidden
}

.hydro100-kv .row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-top: none
}

.hydro100-kv .row:first-child {
    border-top: none
}

.hydro100-kv .cell {
    padding: 16px 18px
}

.hydro100-kv .k {
    background: #0f3561;
    color: #9fbaff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.hydro100-kv .v {
    background: #103966;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* specs + downloads */
.h100-specs-section {
    background: #efefef
}

.h100-specs-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0px 20px;
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 40px;
    background-color: #efefef;
}

.h100-left .group {
    margin-bottom: 36px;
    padding-top: 70px;
    background-color: #efefef;
}

.h100-left .g-title {
    font-size: 28px;
    color:var(--accent);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 14px
}

.h100-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

.h100-table th,
.h100-table td {
    border: none;
    border-bottom: 1px solid #B2B2B2;
    padding: 14px 16px;
    background: transparent;
    color: #093159
}

.h100-table th {
    width: 260px;
    background: transparent;
    border-bottom: 1px solid #B2B2B2;
    background-color: #fff;
}

.h100-table tr:last-child th,
.h100-table tr:last-child td {
    border-bottom: none;
}

.h100-right {
    background-color: #fff;
    padding: 70px;
}

.h100-right .title {
    font-size: 44px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px
}

.h100-right .sub {
    font-size: 44px;
    color: var(--accent);
    margin-bottom: 20px;
    line-height: 1
}

.h100-right .model {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    margin: 12px 0
}

.h100-right .dl {
    margin-top: 14px
}

.h100-right .dl a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    border: none;
    border-radius: 0;
    color: #0b2b4a;
    background: transparent;
    text-decoration: none;
    margin-bottom: 10px
}

.h100-right .dl a:hover {
    text-decoration: underline
}

.h100-right .dl a span {
    opacity: .45
}

@media (max-width:1024px) {
    .hydro100-hero {
        grid-template-columns: 1fr
    }

    .hydro100-spec-mini {
        grid-template-columns: 1fr 1fr
    }
}



body {
    background: var(--deep-blue);
    color: #c7e0f8
}

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

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.hero-section {
    text-align: center;
    padding: 60px 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: left
}

.hero-logo img {
    width: 100%;
    height: auto;
    display: block
}

.hero-title {
    font-size: 40px;
    line-height: 1.35;
    font-weight: 800;
    color: var(--light);
    margin: 0
}

.hero-desc {
    max-width: 1000px;
    margin: 32px auto 0;
    color: #99b5c8;
    line-height: 1.9;
    font-size: 16px;
    padding: 0 16px
}

.hero-desc a {
    color: var(--accent);
    text-decoration: none
}

.voyis-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.voyis-logo::after {
    content: "鈿?;
    color: #FFD700;
    margin-left: 10px;
    font-size: 40px;
}

.mission-text {
    max-width: 600px;
    margin: 0 auto;
    color: #666;
    line-height: 1.6;
    font-size: 16px;
    text-align: left;
}

.mission-text h3 {
    color: #333;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    text-align: right;
    margin-left: auto;
    max-width: 400px;
}

.mission-text p {
    margin-bottom: 15px;
    font-weight: 400;
}

.photo-gallery {
    margin: 60px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
    gap: 24px;
    max-width: 1200px;
}

.photo-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.photo-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.photo-item:nth-child(3) {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.photo-item:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
}

.photo-item:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
}

.photo-item:nth-child(6) {
    grid-column: 3;
    grid-row: 3;
}

.photo-item:nth-child(7) {
    grid-column: 1 / span 2;
    grid-row: 3;
}

.integrations-section {
    padding: 80px 0 24px;
    margin: 0;
}

.integrations-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
}

.integrations-text h2 {
    color: var(--light);
    margin-bottom: 12px;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.25;
}

.integrations-text p {
    color: #99b5c8;
    line-height: 1.9;
    margin-bottom: 6px;
    font-size: 14px;
}

.partner-logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
}

.partner-logo {
    background: transparent;
    text-align: center;
    min-width: 140px;
}

.partner-logo:first-child {
    font-size: 36px;
    font-weight: bold;
    color: #999;
}

.partner-logo img {
    max-width: 150px;
    height: auto;
    opacity: .9;
}

.mid-divider {
    height: 1px;
    background: #ececf2;
    margin: 40px 0 0
}

.resellers-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin: 24px 0 88px;
    align-items: center;
}

.resellers-text h2 {
    color: var(--accent);
    margin-bottom: 12px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
}

.resellers-text p {
    color: #555;
    line-height: 1.9;
    font-size: 14px;
}

.reseller-logos {
    display: flex;
    align-items: center;
    gap: 24px;
}

.reseller-logo {
    background: transparent;
    text-align: center;
    min-width: 180px;
}

.reseller-logo img {
    max-width: 180px;
    height: auto;
    opacity: .9;
}

.values-section {
    position: relative;
    background: linear-gradient(180deg, var(--deep-blue-2) 0%, var(--deep-blue) 100%);
    color: #fff;
    padding: 96px 0 88px;
    overflow: hidden;
}
.values-section:before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 60%;
    background: radial-gradient(600px 300px at 10% 0%, rgba(34,197,94,.12), transparent 60%),
                radial-gradient(500px 260px at 90% 10%, rgba(59,130,246,.08), transparent 60%);
    pointer-events: none;
}

.values-eyebrow {
    text-align: center;
    letter-spacing: 3px;
    color: var(--accent);
    font-size: 12px;
    margin-bottom: 8px;
}

.values-title {
    text-align: center;
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 56px;
    font-weight: 800;
}

.values-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    align-items: start;
}

.value {
    display: grid;
    grid-template-columns: 56px auto;
    column-gap: 16px;
    row-gap: 8px;
}

.value-icon {
    width: 48px;
    height: 48px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.value-icon svg {
    width: 24px;
    height: 24px;
    stroke: #ffffff;
}

.value-h {
    font-size: 22px;
    font-weight: 700;
}

.value-p {
    font-size: 14px;
    line-height: 1.8;
    opacity: .9;
    margin: 0;
}

@media (max-width: 1024px) {

    .integrations-content,
    .resellers-section {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .photo-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .photo-item:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2;
        height: 200px;
    }

    .photo-item:nth-child(7) {
        grid-column: 1 / 3;
        grid-row: 4;
    }
}

@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
    }

    .photo-gallery {
        grid-template-columns: 1fr;
    }

    .photo-item {
        height: 200px !important;
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .partner-logos,
    .reseller-logos {
        flex-direction: column;
        gap: 20px;
    }
}

.bg-deep { background: var(--surface-deep); }
.bg-deep-2 { background: var(--surface-deep-2); }
.text-accent { color: var(--accent) !important; }
.text-light { color: var(--light) !important; }
.border-accent { border-color: var(--accent) !important; }
.btn,
.cta,
.hydro100-btn {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border: 0 !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, .28) !important;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.btn:hover,
.cta:hover,
.hydro100-btn:hover {
    background: var(--accent-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(34, 197, 94, .35) !important;
}

.btn:active,
.cta:active,
.hydro100-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(34, 197, 94, .25) !important;
}

.btn:focus,
.cta:focus,
.hydro100-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .25) !important;
}

/* 缁熶竴寰界珷/鏍囩鐨勪富棰樿壊 */
.tag,
.news-tag,
.article-category,
.news-category {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

/* 涓婚閾炬帴锛堝彲鎸夐渶娣诲姞绫诲悕 .link-accent 浣跨敤锛?*/
.link-accent,
a.link-accent,
.article-content a.link-accent {
    color: var(--accent) !important;
    text-decoration: none;
    transition: color .2s ease;
}

.link-accent:hover,
a.link-accent:hover,
.article-content a.link-accent:hover {
    color: var(--accent-2) !important;
}

/* === 鍏ㄧ珯缁熶竴瑕嗙洊锛堢‘淇濇墍鏈夊墠绔〉涓€鑷达級 === */
/* 閾炬帴 */
a { color: var(--accent); transition: color .2s ease; }
a:hover { color: var(--accent-2); }

/* 澶撮儴/搴曢儴鑳屾櫙鑹茬粺涓€ */
.header {  }
.footer { background: var(--surface-deep-2) !important; }

/* 鎵€鏈夋寜閽粺涓€锛堝父瑙侀€夋嫨鍣ㄥ叏闈㈣鐩栵級 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.button,
.cta,
.action-btn,
.email-submit,
.hydro100-btn {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border: 0 !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.btn:hover,
.button:hover,
.cta:hover,
.action-btn:hover,
.email-submit:hover,
.hydro100-btn:hover {
    background: var(--accent-2) !important;
}

/* 鏍囩/寰界珷 */
.tag,
.badge,
.news-tag,
.article-category,
.news-category { background: var(--accent) !important; color: var(--text-on-accent) !important; }

/* 鍒嗛〉涓庡垎绫绘爣绛?*/
.pagination .active a { background: var(--accent) !important; color: var(--text-on-accent) !important; }
.pagination a:hover { color: var(--accent) !important; }
.category-tab.active,
.category-tab:hover { background: var(--accent) !important; color: var(--text-on-accent) !important; }

/* === Lists Images (defence landing) === */
.def-wrap{font-family:var(--font-sans);color:var(--light);position:relative;overflow:hidden}
.def-wrap:before{content:"";position:absolute;inset:-15%;background:radial-gradient(1200px 600px at -10% -10%, rgba(34,197,94,.06), transparent 60%),radial-gradient(900px 500px at 110% 0%, rgba(59,130,246,.06), transparent 55%);pointer-events:none}
.def-section{max-width:1400px;margin:0 auto;padding:64px 24px}
.def-title{font-size:44px;line-height:1.2;text-align:center;font-weight:800;margin:0 0 36px;color:var(--light);position:relative}
.def-title:after{content:"";display:block;height:3px;width:120px;margin:14px auto 0;background:linear-gradient(90deg,var(--green),transparent);border-radius:2px;opacity:.9}
.def-features{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;justify-items:stretch}
.def-feature{display:flex;flex-direction:column;align-items:center;text-align:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;min-height:220px;box-shadow:0 8px 26px rgba(0,0,0,.25);transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
.def-feature:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.35);background:rgba(255,255,255,.06)}
.def-icon{width:88px;height:88px;margin-bottom:14px;border-radius:18px;padding:14px;background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);box-shadow:0 10px 22px rgba(34,197,94,.12)}
/* 寮哄埗灏嗗唴鑱擲VG鐨?fill/stroke 鏇挎崲涓轰富棰樼豢鑹?*/
.def-icon [fill]{fill:var(--green) !important}
.def-icon [stroke]{stroke:var(--green) !important}
.def-caption{font-size:20px;font-weight:800;margin-bottom:8px;color:var(--light);letter-spacing:.2px}
.def-sub{font-size:16px;color:var(--text-secondary)}
.def-app{background:var(--deep-blue-2);color:#e2e8f0}
.def-app .def-section{display:grid;grid-template-columns:420px 1fr;gap:36px;align-items:center}
.def-app h3{font-size:42px;margin:0 0 14px;color:#fff}
.def-app p{font-size:18px;line-height:1.6;color:#cbd5e1;margin:0 0 18px}
.def-app .app-list{margin-top:18px}
.def-app .app-item{margin:22px 0}
.def-app .app-item .k{display:block;font-size:22px;color:#fff;font-weight:800;margin-bottom:6px}
.def-app .video{position:relative;border-radius:4px;overflow:hidden}
.def-app .video img{display:block;width:100%;height:auto}
.def-app .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:60px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.def-app .play:after{content:"";border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:8px}
.def-case .card{position:relative;color:#fff;border-radius:6px;overflow:hidden;box-shadow:0 12px 36px rgba(15,23,42,.45)}
.def-case .card img{display:block;width:100%;height:auto;filter:brightness(.65)}
.def-case .card .inner{position:absolute;left:0;right:0;bottom:0;top:0;padding:32px}
.def-case .tag{letter-spacing:.18em;color:var(--accent-yellow);font-weight:800}
.def-case .headline{font-size:36px;line-height:1.25;margin:16px 0 14px;font-weight:800}
.def-case .desc{font-size:16px;opacity:.9}
.def-case .more{display:inline-block;margin-top:18px;color:var(--accent);font-weight:800;text-decoration:none}
.def-products .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:flex-start}
.def-products .p{text-align:center}
.def-products .p img{display:block;width:86%;max-width:420px;margin:0 auto 18px}
.def-products .p .name{font-size:22px;font-weight:800}
.def-faq .grid{display:grid;grid-template-columns:360px 1fr 1fr;gap:36px}
.def-expert{border-right:1px solid var(--border-light);padding-right:24px}
.def-expert .avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;margin-bottom:10px}
.def-expert .avatar img{width:100%;height:100%;object-fit:cover}
.def-expert .name{font-size:20px;font-weight:700;margin:6px 0 4px}
.def-q{background:var(--deep-blue-2);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:18px 18px 18px 52px;position:relative;box-shadow:0 10px 24px rgba(0,0,0,.28);color:var(--light)}
.def-q:before{content:"?";position:absolute;left:14px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--green);color:#062a1a;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 6px 14px rgba(34,197,94,.28)}
.def-q h4{margin:0 0 8px;font-size:22px}
.def-q p{margin:0;color:var(--text-secondary);line-height:1.7}
@media (max-width:1024px){
  .def-features{grid-template-columns:repeat(2,1fr)}
  .def-app .def-section{grid-template-columns:1fr}
  .def-products .grid{grid-template-columns:repeat(2,1fr)}
  .def-faq .grid{grid-template-columns:1fr}
  .def-expert{border-right:0;border-bottom:1px solid var(--border-light);padding:0 0 18px;margin-bottom:18px}
}
@media (max-width:640px){
  .def-title{font-size:32px}
  .def-features{gap:28px}
  .def-caption{font-size:18px}
}

/* === Single Other (press/news detail) === */
.other-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.meta{color:var(--text-secondary);font-size:16px;margin:24px 0}
.headline{font-size:56px;line-height:1.15;color:var(--light);text-shadow:0 6px 24px rgba(0,0,0,.35);font-weight:900;margin:0 0 24px}
.article{font-size:18px;line-height:1.9;color:var(--light)}
.article p{margin:0 0 20px}
.article b{font-weight:800}
.contact-card{display:grid;grid-template-columns:420px 1fr;gap:32px;align-items:center;background:var(--deep-blue-2);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.28);border-radius:18px;padding:24px 24px 24px 0;margin:40px 0}
.contact-card .photo{border-radius:14px;overflow:hidden;margin-left:24px}
.contact-card .photo img{width:100%;height:auto;display:block}
.contact-card h3{margin:0 0 12px;font-size:32px;color:var(--light);font-weight:800}
.contact-card h4{margin:0 0 16px;font-size:18px;color:var(--text-secondary);font-weight:700}
.contact-card .email{display:flex;align-items:center;gap:10px;color:var(--light);margin:8px 0 16px}
.contact-card a{color:var(--green);text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:2px}
@media(max-width:980px){
  .headline{font-size:40px}
  .contact-card{grid-template-columns:1fr;padding:24px}
  .contact-card .photo{margin:0}
}

.logo-grid-wrap{max-width:1360px;margin:0 auto;padding:56px 16px}
.logo-header{text-align:center;margin:0 0 28px}
.logo-header h2{margin:0 0 8px;font-size:28px;color:#e6f9ff;font-weight:800}
.logo-header p{margin:0;color:#99b5c8}
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.logo-card{border:1px solid rgba(255,255,255,.06);border-radius:var(--card-radius);background:var(--deep-blue-2);padding:18px 18px 16px;display:grid;grid-template-rows:auto auto;gap:12px;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:transform .2s ease, box-shadow .2s ease}
.logo-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.logo{height:56px;display:flex;align-items:center;justify-content:center;opacity:.95}
.logo img{max-width:100%;max-height:80px;object-fit:contain}
.logo-title{font-size:16px;font-weight:800;color:#e6f9ff;margin:0;text-align:center}
.logo-desc{font-size:14px;color:#99b5c8;line-height:1.8;margin:6px 0 0}
@media(max-width:1024px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.logo-grid{grid-template-columns:1fr}.logo-grid-wrap{padding:40px 16px}}


/* === Article List (lists_article.htm) === */
.category-nav{background:var(--deep-blue-2);border-bottom:1px solid rgba(255,255,255,.06)}
.category-tabs{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.category-tabs::-webkit-scrollbar{display:none}
.category-tab{display:flex;align-items:center;padding:1.2rem 2.5rem;color:var(--text-secondary);text-decoration:none;font-size:.95rem;font-weight:500;border-bottom:3px solid transparent;transition:all .3s ease;white-space:nowrap;background:transparent;flex-shrink:0}
.category-tab:hover{color:var(--text-on-accent);background:rgba(34,197,94,.18);border-bottom-color:var(--green)}
.category-tab.active{color:var(--text-on-accent);background:rgba(34,197,94,.18);border-bottom-color:var(--green);font-weight:600}

.main{background:transparent}
.news-list{display:flex;flex-direction:column;gap:2rem;padding:2rem 0}
.news-item{display:flex;border-radius:12px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35);background:var(--deep-blue-2);border:1px solid rgba(255,255,255,.06)}
.news-image{flex:0 0 520px;height:320px;overflow:hidden}
.news-image img{width:100%;height:100%;object-fit:cover;display:block}
.news-content{flex:1;padding:1.75rem}
.news-meta{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}
.news-category{color:var(--green);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.news-date{color:var(--text-mid);font-size:.85rem}
.news-title{font-size:1.4rem;font-weight:800;margin:0 0 .75rem 0;color:var(--light)}
.news-title a{color:var(--light);text-decoration:none}
.news-excerpt{color:var(--muted-blue-1)}

.pagination{display:flex;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08)}
.pagination ul{list-style:none}
.pagination ul li{display:inline-block;padding:.5rem 1rem;border:1px solid var(--border-neutral);border-radius:.5rem;cursor:pointer;transition:all .3s ease;margin:0 .5rem;color:var(--light)}
.pagination ul li.active{background:var(--green);color:var(--text-on-accent)}
.pagination ul li a{color:var(--light);text-decoration:none}

@media (max-width: 1024px){
  .news-item{flex-direction:column}
  .news-image{flex:none;height:250px}
}

/* === Article view (view_article.htm) readability & buttons === */
.article-header{margin-bottom:2rem}
.article-title{color:var(--light) !important;text-shadow:0 6px 24px rgba(0,0,0,.35)}
.article-meta-enhanced{gap:1rem}
.article-meta-enhanced .meta-item{color:var(--light);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 12px}
.article-meta-enhanced .meta-icon{color:var(--light)}
.article-meta-enhanced .meta-label{color:var(--text-secondary)}
.article-meta-enhanced .meta-value{color:var(--light)}

.article-content{background:var(--deep-blue-2);color:var(--light) !important;padding:28px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.article-content p{color:var(--light)}
.article-content a{color:var(--green) !important}
.article-content h2,.article-content h3,.article-content h4{color:var(--light) !important;margin-top:1.75rem}
.article-content blockquote{background:rgba(255,255,255,.05);border-left:4px solid var(--green);color:var(--text-secondary)}

.tag-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--light)}
.tag-item:hover{background:rgba(34,197,94,.18);border-color:var(--green);color:var(--text-on-accent)}

.article-navigation{grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid rgba(255,255,255,.06)}
.article-navigation .nav-link{display:flex;align-items:center;justify-content:space-between;background:var(--deep-blue-2);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 18px;text-decoration:none;transition:all .25s ease;color:var(--light)}
.article-navigation .nav-link:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.nav-arrow-wrapper{width:40px;height:40px;border-radius:50%;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;margin-left:12px}
.nav-label{color:var(--text-secondary)}
.nav-title{color:var(--light)}

/* === Careers (lists_single_careers.htm) === */
.careers-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.section-gap{padding:56px 0}
/* Open Roles */
.roles-eyebrow{letter-spacing:3px;color:var(--green);text-align:center;font-size:14px;margin-bottom:8px}
.roles-title{font-size:28px;text-align:center;line-height:1.6;color:var(--light);margin:0 auto 40px;max-width:920px}
.roles-list{display:flex;flex-direction:column;gap:24px}
.role{border-top:1px solid var(--border-soft);padding-top:24px}
.role-title{font-size:20px;font-weight:700;color:var(--green);margin:0 0 8px}
.role-meta{display:flex;align-items:center;gap:12px;color:var(--text-mid)}
.badge{border:1px solid var(--border-light);border-radius:10px;padding:6px 10px;font-size:12px;color:var(--text-base);background:var(--white)}
/* About band */
.about-band{background:var(--deep-blue-2)}
.about-grid{display:grid;grid-template-columns:1fr 520px;gap:24px;align-items:center}
.about-text{font-size:18px;line-height:1.9;color:var(--text-secondary)}
.about-text p{margin:0 0 16px}
.about-cta{margin-top:8px}
.about-cta a{color:var(--green);text-decoration:none}
.about-figure{display:flex;justify-content:flex-end}
.about-figure img{max-width:100%;height:auto;display:block}
/* Perks */
.perks-eyebrow{letter-spacing:3px;color:var(--green);text-align:center;font-size:14px;margin-bottom:8px}
.perks-title{font-size:44px;font-weight:800;text-align:center;margin:0 0 40px;color:var(--light)}
.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.perk{display:grid;grid-template-columns:48px auto;column-gap:16px;row-gap:6px}
.perk-icon{width:40px;height:40px;border:2px solid var(--green);border-radius:10px;display:flex;align-items:center;justify-content:center}
.perk-icon svg{width:22px;height:22px;stroke:var(--green)}
.perk h4{margin:0;color:var(--light);font-size:22px}
.perk p{margin:0;color:var(--text-secondary);opacity:.9;line-height:1.8;font-size:14px}
/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gallery img{width:100%;height:240px;object-fit:cover;border-radius:4px}
@media(max-width:1024px){
  .perks-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .gallery{grid-template-columns:1fr}
}

/* resources-hero 专用（可选） */
.resources-hero { position: relative; height: 400px; overflow: hidden; }
.resources-hero .resources-bg { position: absolute; inset: 0; }
.resources-hero .bg-image { width: 100%; height: 100%; object-fit: cover; }
.resources-hero .resources-content { position: absolute; inset: 0; display: flex; align-items: center; }
/* ==================================
/* 默认：def-app（左文右图）你原来的保持不动 */

/* def-app-left：左图右文，用 grid areas 明确指定 */
/* 左图右文布局 */
.def-app.def-app-left .def-section {
  display: grid;
  grid-template-columns: 850px 1fr;
  grid-template-areas: "media text";
  gap: 36px;
  align-items: center;
}

.def-app.def-app-left .video {
  grid-area: media;
}

.def-app.def-app-left .def-section > div:first-child {
  grid-area: text;
}

/* 针对 1024px 以下屏幕，调整为 2列并排 */
@media (max-width: 1024px) {
  .def-app.def-app-left .def-section {
    grid-template-columns: 420px 1fr !important;
    grid-template-areas: "media text" !important;
  }
}

/* 针对 768px 以下屏幕，改为单列布局：文字在上，图片在下 */
@media (max-width: 768px) {
  .def-app.def-app-left .def-section {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "text"
      "media" !important;
  }
}

/* 确保图片样式一致 */
.def-app .video {
  width: 100%;
  aspect-ratio: 13/9; /* 与第一段保持一致的宽高比 */
  height: auto;
  overflow: hidden;
}

.def-app .video img {
  display: block;
  width: 100%;
  height: 100%;
  /*object-fit: cover; /* 确保图片填满容器并保持比例 */
}

/* 1) 去掉“变暗膜”：取消图片亮度滤镜 */
.def-case .card img{
  filter: none !important;
}



/* 3) 如果你还想让文字更清楚，用文字阴影代替“膜” */
.def-case .card .headline,
.def-case .card .desc,
.def-case .card .tag{
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}