/* Static-site equivalents of the Typeset and Fontsource package imports. */
@import url("./typeset.css");
@import url("./fonts/noto-sans/index.css");

:root {
    --font-noto-sans: 'Noto Sans Variable', sans-serif;
}

.typeset-docs {
    --typeset-font-body: var(--font-noto-sans);
    --typeset-font-heading: var(--font-noto-sans);
    --typeset-font-mono: var(--font-noto-sans);
    --typeset-size: 18px;
    --typeset-leading: 1.75;
    --typeset-flow: 1em;
    max-width: 42em;
    min-width: 0;
}

.seo-content.typeset-docs {
    max-width: 42em;
    width: 100%;
}

/* Embedded UI keeps the site's font scale as well as its own component CSS. */
.typeset :where(.not-typeset, [data-not-typeset]) {
    font-family: var(--site-font, inherit);
    font-size: 1rem;
    line-height: normal;
}

/* --- 全局内容限制和居中 --- */
html {
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
}
main {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* 解决固定导航栏遮挡问题 */
body {
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 16px;
    overflow-x: hidden; 
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
    color: #333;
    background-color: #ffffff;
    overscroll-behavior-y: smooth;
    display: flex;
    flex-flow: row wrap;
}
.page-wrapper {
    width: 100%;
}

/* 英雄区域 */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden; 
    text-align: center;
    margin-top: 0;
}

/* 导航栏样式 */
.navbar {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 74px;
    padding: 12px clamp(24px, 4vw, 72px) !important;
    background: transparent;
    color: white;
    transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, padding 0.3s ease;
    z-index: 99; 
    box-sizing: border-box;
}

.navbar nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 2.1vw, 34px);
}

/* --- 导航栏 CTA 按钮样式 --- */
.cta-button-nav {
    position: absolute;
    right: clamp(24px, 4vw, 72px);
    top: 50%;
    transform: translateY(-50%);
    padding: 13px 32px!important;
    border: none;
    border-radius: 999px;
    background-color: rgba(20, 122, 255, 0.95);
    margin-left: 0;
    color: white !important; 
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1; 
    vertical-align: middle; 
    display: inline-block; 
    box-shadow: 0 10px 30px rgba(20, 122, 255, 0.22);
}

.cta-button-nav:hover {
    background-color: #0066cc; 
    color: white !important; 
    transform: translateY(-50%) scale(1.02);
}

/* 滚动状态 CTA */
.navbar.scrolled .cta-button-nav {
    background-color: white; 
    color: #147aff !important;
    border: 2px solid #147aff;
    padding: 12px 30px !important;
    border-radius: 999px;
    box-shadow: none;
}

.navbar.scrolled .cta-button-nav:hover {
    background-color: #0066cc;
    color: white !important;
}

/* Logo */
.navbar .logo {
    position: absolute;
    left: clamp(24px, 4vw, 72px);
    top: 50%;
    transform: translateY(-50%);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.navbar .logo img {
    height: 44px;
    width: auto;
    vertical-align: middle; 
    transition: opacity 0.3s ease; 
}

.navbar .logo .logo-scrolled { display: none; opacity: 0; }
.navbar .logo .logo-default { display: block; opacity: 1; }

.navbar.scrolled .logo .logo-default { display: none; opacity: 0; }
.navbar.scrolled .logo .logo-scrolled { display: block; opacity: 1; }

/* 导航链接样式 (统一对齐) */
.navbar nav a {
    font-size: 0.9rem;
    color: white;
    text-decoration: none;
    margin-left: 0;
    transition: color 0.25s ease, opacity 0.25s ease;
    display: inline-block; 
    line-height: 1; 
    vertical-align: middle; 
    padding: 12px 0;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.92;
}

.navbar nav a:hover { color: #ffffff; opacity: 1; }

/* --- 导航栏下拉菜单样式 --- */
.nav-dropdown {
    position: relative;
    display: inline-block;
    margin-left: 0;
    flex-shrink: 0;
}

.nav-dropdown .dropdown-toggle {
    font-size: 0.8em;
    color: white;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    vertical-align: middle;
    padding: 15px 0;
    margin-left: 0;
    transition: color 0.3s;
}

.nav-dropdown .dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-bottom: 3px;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-toggle::after {
    transform: rotate(-135deg);
    margin-bottom: 0;
    margin-top: 3px;
}

.nav-dropdown .dropdown-toggle:hover {
    color: #00bcd4;
}

/* 下拉菜单容器 */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 180px;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* 下拉菜单顶部小三角 */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 下拉菜单链接 */
.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #555 !important;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    margin-left: 0 !important;
    border-radius: 8px;
    text-align: center;
    position: relative;
}

.dropdown-menu a:hover {
    background: linear-gradient(135deg, #147aff 0%, #3b8eff 100%);
    color: #ffffff !important;
    transform: translateX(0);
}

/* 滚动后的下拉菜单样式 */
.navbar.scrolled .nav-dropdown .dropdown-toggle {
    color: #333333;
}

.navbar.scrolled .nav-dropdown .dropdown-toggle:hover {
    color: #147aff;
}

/* 滚动后的导航栏样式 */
.navbar.scrolled {
    background: #ffffff;
    box-shadow: 0 2px 5px rgb(214, 214, 214);
}
.navbar.scrolled nav a { color: #333333; }
.navbar.scrolled nav a:hover { color: #147aff; }

/* 滚动内容包裹层样式 */
.scroll-content-wrapper {
    background-color: white; 
    z-index: 5; 
    position: relative; 
    width: 100%;
    margin-top: 0; 
    overflow-x: hidden;
}

/* 视频容器 */
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.video-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 1;
}
.video-item.active { opacity: 1; z-index: 2; }
.video-item video { width: 100%; height: 100%; object-fit: cover; }

/* 视频加载占位图 */
.video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: #000;
}
.video-poster.hidden {
    display: none;
}
.poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-video-play {
    position: absolute;
    left: 50%;
    top: 35%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 20px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.72);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.hero-video-play[hidden] { display: none; }
.hero-video-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* 视频控制 - 毛玻璃胶囊 */
.video-controls {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    padding: 6px 8px;
}
.video-controls > button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: color 0.25s, background 0.25s;
    padding: 0;
    flex-shrink: 0;
}
.video-controls > button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}
#video-indicators {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0;
    padding: 0 8px;
}
.indicator-dot {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 28px;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.site-main { width: 100%; min-width: 0; }
.indicator-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.3);
    transition: width 0.1s ease, background-color 0.1s ease;
}
.indicator-dot.active::before {
    background-color: #ffffff;
    width: 18px;
    border-radius: 100px;
}
.indicator-dot:focus-visible { outline: 2px solid white; outline-offset: 1px; }

/* Reserve room for the enlarged video controls without covering school names. */
@media (min-width: 1025px) and (max-width: 1600px) {
    body.home-page .hero-trust-strip { width: calc(100% - 620px); }
    body.home-page .hero-trust-marquee { gap: 12px; }
    body.home-page .hero-trust-column span { font-size: clamp(14px, 1.2vw, 19px); }
}
@media (min-width: 1025px) and (max-width: 1279px) {
    body.home-page .hero-trust-marquee { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.home-page .hero-trust-column:nth-child(n+4) { display: none; }
}

/* 英雄内容 */
.hero-content {
    position: fixed; 
    left: 50%;
    transform: translateX(-50%);
    bottom: 90px; 
    z-index: 3; 
    color: white;
    text-shadow: none;
    max-width: 80%; 
    width: 100%;
}


/* --- 英雄区域按钮组布局 (垂直堆叠) --- */

.hero-btn-group {
    display: flex;
    /* ❗ 关键：改为垂直排列 */
    flex-direction: column; 
    align-items: center; /* 居中对齐 */
    gap: 30px; /* 两个按钮之间的间距 */
    margin-top: 60px; /* 距离上方文字稍微远一点，留出呼吸感 */
}

/* 确保按钮在手机上也能良好显示 */
@media (max-width: 768px) {
    .hero-btn-group {
        flex-direction: column; /* 手机上垂直排列 */
        gap: 15px;
        padding: 0 40px; /* 增加左右内边距防止贴边 */
    }
    
    .hero-btn-group .cta-button {
        width: 100%; /* 手机上按钮占满宽度 */
        box-sizing: border-box;
        text-align: center;
    }
}

/* --- 主按钮：开始绘图 (磨砂玻璃 + 流光边线) --- */
.cta-button.primary-btn {
    font-size: 2em;
    padding: 25px 80px;
    font-weight: bold;
    letter-spacing: 0.05em;

    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    text-decoration: none;

    position: relative;
    overflow: visible;
    z-index: 1;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 流光边线 - 紫蓝渐变沿边缘流动 */
.cta-button.primary-btn::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        90deg,
        rgba(155, 100, 255, 0.85),
        rgba(130, 120, 230, 0.15),
        rgba(100, 160, 255, 0.9),
        rgba(130, 120, 230, 0.15),
        rgba(155, 100, 255, 0.85)
    );
    background-size: 300% 100%;
    animation: edge-flow 6s ease-in-out infinite;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes edge-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 悬停 - 底部边缘发光 */
.cta-button.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.15),
        0 14px 40px -10px rgba(100, 120, 255, 0.45),
        0 22px 60px -14px rgba(140, 90, 240, 0.25);
}
.cta-button.primary-btn:hover::before {
    animation-duration: 3.5s;
}

/* 点击 */
.cta-button.primary-btn:active {
    transform: translateY(0);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 6px 20px -6px rgba(100, 120, 255, 0.3);
}

/* --- 次要按钮：了解更多 (低调、位于下方) --- */
.cta-button.secondary-btn {
    font-size: 1.1em;
    padding: 10px 30px;
    
    /* 幽灵按钮风格：透明背景，细边框 */
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    text-decoration: none;
    
    transition: all 0.3s ease;
}

/* 次要按钮悬停效果 */
.cta-button.secondary-btn:hover {
    background-color: white;
    color: #147aff;
    border-color: white;
}

/* --- 移动端适配 --- */
@media (max-width: 768px) {
    .hero-btn-group {
        margin-top: 40px;
    }

    .cta-button.primary-btn {
        font-size: 1.5em;
        padding: 20px 60px;
        width: 80%;
        text-align: center;
        box-sizing: border-box;
    }
    
    .cta-button.secondary-btn {
        font-size: 1em;
        width: auto;
    }
}
.hero-content h1 { font-size: clamp(2.2rem, 5vw, 5rem); line-height: 1.15; margin: 0; }
.hero-content p { font-size: 1.5em; margin-bottom: 50px; margin-top: 0; }
.cta-button {
    display: inline-block;
    padding: 20px 40px;
    background-color: #147aff;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s;
}
.cta-button:hover { background-color: #4595ff; }

/* 内容区通用 */
.content-section {
    width: 100%;
    padding: 0;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #147aff;
}
.content-section:nth-child(even) { background-color: #f4f4f4; }
.content-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 5%;
    text-align: left;
}
.content-container h2 { text-align: center; font-size: 2em; }
#works > .content-container h2,
#gallery > .content-container h2 {
    color: #111111;
}
.section-description {
    max-width: 800px;
    margin: 0 auto 40px auto;
    text-align: center;
    font-size: 1.1em;
    color: #666;
}

/* 首页按任务进入服务、平台、作品与教程 */
#research-start {
    background: #ffffff;
    color: #111111;
    scroll-margin-top: 96px;
}
#research-start .content-container {
    max-width: calc(var(--site-width, 1400px) + 2 * var(--site-gutter, 5vw));
    padding-top: 64px;
    padding-bottom: 80px;
}
#research-start h2 { margin: 0 0 14px; }
#research-start .section-description { margin-bottom: 40px; line-height: 1.75; }
#research-start .home-path-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
#research-start .home-path-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
}
#research-start .home-path-image,
#services .service-card-media {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    aspect-ratio: 1;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 12px;
    background: #dce1e6;
    color: #ffffff;
    text-decoration: none;
}
#research-start .home-path-image img,
#services .service-card-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
#research-start .home-path-image-label {
    position: absolute;
    left: 18px;
    bottom: 24px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 36px);
    padding: 11px 14px;
    border: 1px solid rgba(232, 245, 255, 0.55);
    border-radius: 999px;
    background: rgba(35, 76, 146, 0.9);
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
}
#research-start .home-path-card:nth-child(3) .home-path-image-label { background: rgba(76, 56, 147, 0.9); }
#research-start .home-path-card:nth-child(4) .home-path-image-label { background: rgba(58, 68, 145, 0.9); }
#research-start .home-path-icon {
    display: block;
    flex: none;
    width: 28px;
    height: 28px;
}
#research-start .home-path-image:focus-visible { outline: 3px solid #147aff; outline-offset: 5px; }
#research-start h3 { margin: 0 0 12px; font-size: 1.2em; line-height: 1.4; }
#research-start .home-path-card p { margin: 0 0 14px; color: #666666; font-size: 0.95em; line-height: 1.8; }
#research-start .home-path-links { display: flex; margin-top: auto; padding-top: 6px; }
#research-start .home-path-links a,
#services .service-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 18px;
    border: 1px solid #191919;
    border-radius: 999px;
    background: #191919;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
#research-start .home-path-links a:hover,
#services .service-card-button:hover { background: #363636; border-color: #363636; }
#research-start .home-path-links a:focus-visible,
#services .service-card-button:focus-visible { outline: 2px solid #147aff; outline-offset: 4px; }
#research-start .home-path-links a span,
#services .service-card-button span { flex: none; font-size: 14px; line-height: 1; }
@media (hover: hover) {
    #research-start .home-path-image:hover img { transform: scale(1.025); }
}
@media (max-width: 1050px) {
    #research-start .home-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    #research-start .content-container {
        padding: 48px var(--site-gutter, 20px) 64px !important;
    }
    #research-start .home-path-links a { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
}
@media (max-width: 640px) {
    #research-start .home-path-grid { grid-template-columns: minmax(0, 1fr); }
    #research-start .home-path-image { margin-bottom: 20px; }
    #research-start .home-path-image-label { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    #research-start .home-path-image img,
    #services .service-card-media img { transition: none; }
    #research-start .home-path-image:hover img { transform: none; }
}

/* 作品画廊 (横向拖拽) */
.portfolio-grid {
    display: flex; 
    flex-wrap: nowrap;
    overflow-x: scroll; 
    overflow-y: hidden;
    gap: 20px;
    padding-bottom: 20px; 
    width: 100%; 
    -webkit-overflow-scrolling: touch; 
    
    /* ❗ 关键：禁用平滑滚动，确保拖拽流畅 */
    scroll-behavior: auto !important;
    
    /* 鼠标拖拽样式 */
    cursor: grab;
    user-select: none; /* 防止选中文字图片 */
    
    /* 优化滚动性能 */
    will-change: scroll-position;
    -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.portfolio-grid.active { cursor: grabbing; }
.portfolio-grid::-webkit-scrollbar { display: none; }

.portfolio-wrapper {
    position: relative;
    margin: 0 -5%; 
    padding: 0 5%;
    z-index: 1;
}
/* --- 画廊渐变蒙版样式 --- */

/* 1. 确保包裹层是定位基准 */
.portfolio-wrapper {
    position: relative;
    /* 保持之前的全宽延伸设置 */
    margin: 0 -5%; 
    padding: 0 5%;
    z-index: 1;
}

/* 2. 定义蒙版通用样式 */
.portfolio-wrapper::before,
.portfolio-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px; /* 蒙版的宽度，根据需要调整 */
    height: 100%;
    z-index: 10; /* 确保在图片之上 */
    
    /* ❗ 关键：允许鼠标穿透蒙版进行拖拽和点击 */
    pointer-events: none; 
}

/* 3. 左侧蒙版 (白色 -> 透明) */
.portfolio-wrapper::before {
    left: 0;
    /* 0% 到 30% 是实心白，平滑过渡到透明 */
    background: linear-gradient(to right, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
}

/* 4. 右侧蒙版 (透明 -> 白色) */
.portfolio-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, #ffffff 20%, rgba(255, 255, 255, 0) 100%);
}

/* 5. 移动端调整 (可选：手机屏幕较窄，可以减小蒙版宽度) */
@media (max-width: 768px) {
    .portfolio-wrapper::before,
    .portfolio-wrapper::after {
        width: 50px; /* 手机上改窄一点，避免遮挡太多内容 */
    }
}

.work-card {
    flex-shrink: 0; 
    width: 360px; 
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    padding: 0; 
    text-align: center; 
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px; 
}
.work-detail-link {
    display: block;
    width: 100%;
    height: 100%;
}
.work-detail-link:focus-visible {
    outline: 3px solid #242424;
    outline-offset: -3px;
}
.work-card:hover .work-image { transform: scale(1.1); }
.work-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.work-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* 品牌轮播：浅色文案面板、代码渐变与透明品牌标志。 */
#stats.brand-statement {
    padding: 0;
    background: #ffffff;
    color: #111111;
}
#stats .brand-statement-content {
    width: 100%;
    padding: 0 var(--site-gutter, 5vw);
}
#stats .brand-carousel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    padding: 16px;
    border: 1px solid #ececee;
    border-radius: 20px;
    overflow: hidden;
    background-color: #c0b9ef;
    background-image:
        radial-gradient(ellipse at 96% 100%, #bd6898 0%, transparent 33%),
        radial-gradient(ellipse at 65% 75%, #f6d7bc 0%, transparent 37%),
        radial-gradient(ellipse at 90% 24%, #a89aea 0%, transparent 45%),
        linear-gradient(110deg, #fafafa 25%, #f4ddd1 51%, #bec9fb 76%, #d6c2f2);
    text-align: left;
    touch-action: pan-y pinch-zoom;
}
#stats .brand-carousel[data-tone="service"] {
    background-image:
        radial-gradient(ellipse at 90% 100%, #639dd5 0%, transparent 37%),
        radial-gradient(ellipse at 63% 65%, #c8c9f5 0%, transparent 44%),
        linear-gradient(115deg, #fafafa 25%, #e0dff4 49%, #9eb9ef 78%, #adcfe4);
}
#stats .brand-carousel[data-tone="work"] {
    background-image:
        radial-gradient(ellipse at 98% 100%, #9b7fce 0%, transparent 38%),
        radial-gradient(ellipse at 64% 70%, #f3d8cb 0%, transparent 44%),
        linear-gradient(115deg, #fafafa 25%, #e3d8ef 51%, #b9abed 77%, #c6b6ee);
}
#stats .brand-carousel-deck { min-width: 0; }
#stats .brand-slide {
    display: flex;
    flex-direction: column;
    min-height: 480px;
    height: 100%;
    padding: 40px;
    border-radius: 14px;
    background: rgba(249, 249, 251, 0.9);
    color: #111111;
}
#stats .brand-slide[hidden],
#stats .brand-carousel-controls[hidden] { display: none; }
#stats .brand-slide-eyebrow {
    margin: 0;
    color: #55555b;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}
#stats .brand-slide-message {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 0;
}
#stats .brand-quote-mark {
    height: 36px;
    color: #dedee2;
    font-family: Georgia, serif;
    font-size: 68px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}
#stats .brand-slide h3 {
    margin: 10px 0 0;
    color: #111111;
    font-size: clamp(28px, 2.5vw, 38px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.45;
}
#stats .brand-slide h3 span { display: block; }
#stats .brand-slide-source {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 28px 0 0;
    font-size: 14px;
    line-height: 1.7;
}
#stats .brand-slide-source strong { font-weight: 600; }
#stats .brand-slide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #e7e5ec;
    color: #111111;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 160ms ease;
}
#stats .brand-slide-link svg { flex: none; }
#stats .brand-slide-link:hover { background: #dcd9e5; }
#stats .brand-carousel-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 0 28px 32px;
}
#stats .brand-carousel-logo {
    display: block;
    width: min(82%, 320px);
    height: auto;
    object-fit: contain;
    user-select: none;
}
#stats .brand-carousel-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}
#stats .brand-carousel-controls button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    color: #24232b;
    cursor: pointer;
    transition: background-color 160ms ease;
}
#stats .brand-carousel-controls button:hover { background: #ffffff; }
#stats :is(.brand-slide-link, .brand-carousel-controls button):focus-visible {
    outline: 2px solid #147aff;
    outline-offset: 4px;
}
#stats .brand-screen-reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
#stats .brand-carousel[data-ready] .brand-slide:not([hidden]) { animation: brand-slide-appear 240ms ease-out; }
@keyframes brand-slide-appear {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1050px) {
    #stats .brand-slide { min-height: 440px; padding: 32px; }
    #stats .brand-carousel-visual { padding-inline: 12px; }
}
@media (max-width: 768px) {
    #stats .brand-statement-content { padding: 0 var(--site-gutter, 20px) !important; }
    #stats .brand-carousel {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }
    #stats .brand-slide { min-height: 376px; padding: 28px 24px; }
    #stats .brand-slide h3 { font-size: 26px; letter-spacing: -0.04em; }
    #stats .brand-slide-message { padding: 28px 0; }
    #stats .brand-slide-source { margin-top: 24px; }
    #stats .brand-slide-eyebrow { font-size: 14px; }
    #stats .brand-carousel-visual { min-height: 208px; padding: 28px 16px 72px; }
    #stats .brand-carousel-logo { width: min(82%, 240px); }
    #stats .brand-carousel-controls { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    #stats :is(.brand-slide-link, .brand-carousel-controls button) { transition: none; }
    #stats .brand-carousel[data-ready] .brand-slide:not([hidden]) { animation: none; }
}

/* 平铺网格 - 固定3列，等比缩放 */
.image-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 0;
    width: 100%;
}
.grid-item {
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    line-height: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
}
.gallery-image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.grid-item:hover .gallery-image { transform: scale(1.05); }
.grid-item figcaption {
    display: none;
    color: #666;
    border-top: 1px solid #eee;
}

/* 图片放大弹窗 Lightbox */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}
.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.lightbox-overlay.active .lightbox-image {
    transform: scale(1);
}
.lightbox-close {
    position: absolute;
    top: -40px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease, transform 0.3s ease;
}
.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Published figure detail lightbox */
.lightbox-overlay {
    inset: 0;
    padding: clamp(18px, 3vw, 44px);
    background: rgba(0, 0, 0, 0.82);
    align-items: center;
    justify-content: center;
}
.lightbox-content {
    position: relative;
    width: min(1320px, 94vw);
    max-width: none;
    max-height: 90vh;
    overflow: auto;
    display: block;
    padding: clamp(24px, 3vw, 42px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(18, 18, 18, 0.96);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
}
.lightbox-header {
    max-width: 980px;
    margin: 0 64px 24px 0;
}
.lightbox-kicker {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.9rem;
    font-weight: 700;
}
.lightbox-header h3 {
    margin: 0;
    color: #f8f8f8;
    font-size: clamp(1.35rem, 2.1vw, 2.3rem);
    line-height: 1.2;
    letter-spacing: 0;
}
.lightbox-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: clamp(18px, 2.6vw, 34px);
    align-items: start;
}
.lightbox-figure {
    margin: 0;
    min-width: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: #f7f7f7;
}
.lightbox-image {
    width: 100%;
    max-width: 100%;
    max-height: 62vh;
    object-fit: contain;
    display: block;
    border-radius: 0;
    box-shadow: none;
    transform: scale(0.985);
}
.lightbox-overlay.active .lightbox-image {
    transform: scale(1);
}
.lightbox-meta {
    min-width: 0;
}
.lightbox-doi-panel {
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.lightbox-doi-panel span {
    display: block;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.lightbox-doi-panel a {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.lightbox-doi-panel a:hover {
    text-decoration: underline;
}

.lightbox-actions {
    order: 3;
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    justify-content: flex-start;
}

.lightbox-detail-button {
    min-height: 44px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #111827;
    border-radius: 10px;
    background: #111827;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lightbox-detail-button:hover {
    border-color: #2f6fed;
    background: #2f6fed;
    transform: translateY(-1px);
}

.lightbox-detail-button:focus-visible {
    outline: 3px solid rgba(47, 111, 237, 0.28);
    outline-offset: 3px;
}
.lightbox-summary {
    margin-top: 28px;
    max-width: 880px;
    color: rgba(255, 255, 255, 0.76);
}
.lightbox-summary h4 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 1.15rem;
    letter-spacing: 0;
}
.lightbox-summary p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.85;
}
.lightbox-close {
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: white;
    background: rgba(255, 255, 255, 0.08);
    line-height: 1;
}
.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 860px) {
    .lightbox-overlay {
        padding: 12px;
        align-items: flex-start;
    }
    .lightbox-content {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 22px;
        border-radius: 14px;
    }
    .lightbox-header {
        margin-right: 48px;
    }
    .lightbox-body {
        grid-template-columns: 1fr;
    }
    .lightbox-image {
        max-height: 52vh;
    }
    .lightbox-summary {
        margin-top: 22px;
    }
}

/* 联系我们 */
.contact-layout { display: flex; gap: 50px; align-items: flex-start; margin-top: 40px; }
.contact-info { flex: 1; min-width: 300px; padding: 20px; border-right: 1px solid #eee; font-size: 1.1em; }
.contact-info h3 { color: #147aff; font-size: 1.4em; margin-bottom: 20px; }
.contact-info ul { list-style: none; padding: 0; line-height: 2; }
.contact-info li { margin-bottom: 12px; font-size: 1.1em; }
.contact-form { flex: 2; max-width: 600px; padding: 20px; }
.contact-form h3 { color: #333; font-size: 1em; margin-bottom: 25px; }
.form-group { margin-bottom: 20px; display: flex; flex-direction: column; }
.form-group label { font-weight: bold; margin-bottom: 5px; color: #555; font-size: 0.8em; }
.form-group input[type="text"], .form-group input[type="email"], .form-group textarea {
    padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 1em; width: 100%; box-sizing: border-box; transition: border-color 0.3s;
}
.form-group input:focus, .form-group textarea:focus {
    border-color: #147aff; outline: none; box-shadow: 0 0 5px rgba(20, 122, 255, 0.2);
}
.submit-button {
    background-color: #147aff; color: white; border: none; padding: 12px 25px; border-radius: 25px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.3s;
}
.submit-button:hover { background-color: #0066cc; }

/* 首页联系区 */
#contact {
    background: #000000;
    color: #ffffff;
    scroll-margin-top: 96px;
}
#contact .content-container {
    max-width: 1460px;
    padding-top: 112px;
    padding-bottom: 120px;
    text-align: center;
}
#contact h2 {
    margin: 0 0 18px;
    color: #ffffff;
}
#contact .section-description {
    max-width: 760px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.8;
}
#contact .contact-primary-button {
    min-width: 176px;
    padding: 14px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: #242424;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
#contact .contact-primary-button:hover,
#contact .contact-primary-button:focus-visible {
    background: #f2f2f2;
    border-color: #f2f2f2;
    color: #111111;
    transform: translateY(-2px);
}
#contact .wechat-copy-status {
    min-height: 1.4em;
    margin: 10px 0 30px;
    color: #d7d7d7;
}
.wechat-qr-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.wechat-qr-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.wechat-qr-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(8px);
}
.wechat-qr-dialog {
    position: relative;
    width: min(420px, 92vw);
    max-height: min(720px, 88vh);
    overflow: auto;
    padding: 28px;
    border-radius: 24px;
    background: #ffffff;
    color: #111111;
    text-align: center;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.2s ease;
}
.wechat-qr-modal.active .wechat-qr-dialog {
    transform: translateY(0) scale(1);
}
.wechat-qr-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #f2f4f7;
    color: #111111;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}
.wechat-qr-kicker {
    margin: 4px 0 8px;
    color: #147aff;
    font-size: 0.86rem;
    font-weight: 800;
}
.wechat-qr-dialog h3 {
    margin: 0 34px 18px;
    font-size: 1.55rem;
    color: #111111;
}
.wechat-qr-dialog img {
    display: block;
    width: min(280px, 100%);
    height: auto;
    margin: 0 auto 18px;
    border-radius: 16px;
    border: 1px solid #edf0f5;
}
.wechat-qr-dialog p {
    margin: 0 auto 10px;
    max-width: 320px;
    color: #5f6673;
    line-height: 1.7;
}
.wechat-qr-dialog strong {
    display: inline-block;
    margin-top: 4px;
    color: #111111;
}
.contact-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 18px;
    text-align: left;
}
.contact-card {
    min-height: 238px;
    padding: 34px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    background: #111111;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.contact-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.24);
    background: #171717;
}
.contact-card h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 1.55em;
    line-height: 1.35;
}
.contact-card p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
}
.contact-card strong,
.contact-card a {
    color: #d7d7d7;
    font-size: 1.04em;
    line-height: 1.5;
    text-decoration: none;
}
.contact-card a:hover,
.contact-card a:focus-visible { color: #ffffff; }

/* 页脚 */
.full-width-footer.dark-footer { width: 100%; flex: 0 0 100%; box-sizing: border-box; background-color: #0d0d0d; color: #999999; padding: 60px 0 0 0; }
.main-footer {
    background: #0d0d0d;
    color: #999999;
    padding: 60px 0 44px;
}
.main-footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}
.footer-container { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding-bottom: 40px; }
.footer-column { flex-basis: 15%; min-width: 140px; margin-bottom: 30px; }
.footer-column.brand-info { flex-basis: 30%; min-width: 250px; }
.footer-logo img { width: 150px; height: auto; margin-bottom: 50px; }
.company-tagline { font-size: 1.1em; color: #f0f0f0; margin-top: 0; margin-bottom: 20px; }
.footer-column h4 { color: #ffffff; font-size: 1.1em; margin-bottom: 20px; font-weight: bold; }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column ul li { margin-bottom: 10px; }
.footer-column ul li a { color: #999999; text-decoration: none; transition: color 0.3s; }
.footer-column ul li a:hover { color: #147aff; }
.social-links a { color: #999999; font-size: 1.2em; margin-right: 15px; transition: color 0.3s; }
.social-links a:hover { color: #147aff; }
.footer-social-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-social-links a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 0; color: #999999; text-decoration: none; }
.footer-social-links a:focus-visible { color: #147aff; outline: 2px solid #147aff; outline-offset: 3px; border-radius: 4px; }
.social-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: invert(64%); transition: filter 0.3s; }
.footer-social-links a:hover .social-icon, .footer-social-links a:focus-visible .social-icon { filter: invert(43%) sepia(97%) saturate(3399%) hue-rotate(201deg) brightness(101%) contrast(101%); }
.footer-bottom { border-top: 1px solid #1a1a1a; padding: 20px 0; }
.footer-bottom-container { max-width: 1000px; display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; padding: 0 5%; margin: 0 auto; flex-wrap: wrap; gap: 10px; }
.privacy-links a { color: #999999; margin-right: 20px; text-decoration: none; transition: color 0.3s; }
.privacy-links a:hover { color: #147aff; }
.copyright-text { margin: 0; }
.footer-operator-note {
    flex: 0 0 100%;
    width: 100%;
    margin: 4px 0 0;
    color: #747474;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}
.main-footer > .footer-operator-note {
    width: auto;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5% 24px;
    box-sizing: border-box;
}

.company-identity-note {
    margin: -8px 0 28px;
    color: #7a8490;
    font-size: 13px;
    line-height: 1.7;
}
.company-identity-note p,
.legal-operator-summary {
    margin: 0;
}

/* 备案信息样式 */
.beian-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0 10px;
    gap: 8px;
    flex-wrap: wrap;
}
.beian-link {
    color: #666666;
    text-decoration: none;
    font-size: 0.85em;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.beian-link:hover { color: #999999; }
.beian-divider { color: #444444; font-size: 0.8em; }
.gongan-icon { width: 14px; height: 14px; vertical-align: middle; }
.gongan-link { display: inline-flex; align-items: center; gap: 4px; }

/* 业务介绍图标对齐 */
.service-item h3 {
    font-size: 1em; color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 0;
    display: flex; align-items: center; gap: 8px; 
}

/* 首页企业核心业务：品牌介绍与服务入口 */
#services {
    background: #ffffff;
    color: #191919;
}
#services .content-container {
    max-width: calc(var(--site-width, 1400px) + 2 * var(--site-gutter, 5vw));
    padding-top: 72px;
    padding-bottom: 80px;
}
#services h2 {
    color: #191919;
    margin: 0 0 40px;
}
#services .services-intro-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    margin-bottom: 48px;
}
#services .services-intro-copy {
    min-width: 0;
    padding: 24px 0;
}
#services .services-intro-copy .services-kicker {
    margin: 0 0 20px;
    color: #666666;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}
#services .services-intro-copy h3 {
    margin: 0 0 32px;
    color: #111111;
    font-size: clamp(40px, 4.2vw, 72px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.045em;
}
#services .services-intro-copy h3 span { display: block; }
#services .services-intro-copy p {
    max-width: 54ch;
    margin: 0;
    color: #333333;
    font-size: 16px;
    line-height: 1.8;
}
#services .services-intro-copy p + p { margin-top: 12px; }
#services .services-intro-copy a {
    color: #30333f;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
#services .services-intro-copy a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
#services .services-intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 32px;
}
#services .services-intro-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 0;
    color: #111111;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
}
#services .services-intro-actions .services-intro-primary {
    padding-inline: 22px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
}
#services .services-intro-primary:hover { background: #333333; }
#services .services-intro-secondary:hover { text-decoration: underline; text-underline-offset: 4px; }
#services .services-brand-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    isolation: isolate;
    overflow: hidden;
    background: #e5e6f1;
}
#services .services-brand-visual > .services-studio-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
#services .services-request-card {
    position: absolute;
    z-index: 1;
    top: 8%;
    left: 6%;
    width: 88%;
    padding: clamp(16px, 2.1vw, 30px);
    border-radius: clamp(16px, 2vw, 28px);
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(66, 49, 100, 0.08);
}
#services .services-request-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
#services .services-request-logo {
    display: block;
    width: clamp(120px, 13vw, 180px);
    height: auto;
    flex: none;
}
#services .services-request-header > span {
    color: #77717f;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}
#services .services-request-card p {
    margin: 18px 0 0;
    color: #19151f;
    font-size: clamp(16px, 1.45vw, 22px);
    font-weight: 400;
    line-height: 1.65;
    text-align: left;
}
#services .services-request-card p span {
    color: #8051ce;
    font-weight: 500;
}
#services .services-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    align-items: stretch;
}
#services .service-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
#services .service-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}
#services .service-card h3 {
    margin: 0 0 12px;
    color: #191919;
    font-size: 1.2em;
    line-height: 1.5;
}
#services .service-card p {
    margin: 0 0 16px;
    color: #666666;
    font-size: 0.94em;
    line-height: 1.8;
}
#services .service-card-button {
    align-self: flex-start;
    margin-top: auto;
}
@media (max-width: 1050px) {
    #services .services-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    #services .services-intro-panel { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    #services .services-intro-copy { padding: 0; }
    #services .services-intro-copy .services-kicker { margin-bottom: 16px; font-size: 14px; }
    #services .services-intro-copy h3 { font-size: clamp(36px, 10vw, 48px); margin-bottom: 24px; }
    #services .services-intro-actions { margin-top: 28px; }
    #services .services-brand-visual { min-height: 0; aspect-ratio: 1; }
    #services .services-request-card { padding: 18px; }
    #services .services-request-logo { width: 120px; }
    #services .services-request-card p { margin-top: 14px; font-size: 15px; }
    #services .services-list { grid-template-columns: 1fr; gap: 28px; }
}
.service-subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px auto 0;
    max-width: 980px;
}
.service-subnav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.service-subnav a:hover,
.service-subnav a:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.34);
    color: #ffffff;
}

#services h2,
#contact h2 {
    font-size: clamp(2.8rem, 4vw, 3.75rem);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

/* 响应式调整 */

/* PC 端隐藏汉堡按钮 */
.menu-toggle { display: none !important; border: none; z-index: 101; }
.menu-toggle span { display: block; width: 25px; height: 3px; background: white; margin: 5px 0; transition: 0.4s; }
.navbar.scrolled .menu-toggle span { background: #147aff !important; }

@media (min-width: 1025px) {
    .navbar nav { transform: none !important; visibility: visible !important; }
}

/* 中等桌面宽度：压缩留白，避免导航文字被挤成逐字竖排。 */
@media (min-width: 1025px) and (max-width: 1280px) {
    .navbar { padding: 15px 4% !important; }
    .navbar nav a { margin-left: 16px; }
    .navbar nav .nav-dropdown { margin-left: 16px; }
    .navbar nav a.cta-button-nav {
        margin-left: 16px;
        padding: 15px 30px !important;
    }
}

/* 小屏幕 (max-width: 1024px) */
@media (max-width: 1024px) {
    .navbar { padding: 15px 20px; gap: 10px; justify-content: space-between; }
    .hero-btn-group .primary-btn { display: none; }
    .menu-toggle { 
        display: block !important; 
        background: transparent !important; 
        border: none !important; 
        z-index: 101; 
        flex-shrink: 0;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .menu-toggle span { background: white !important; }
    
    /* Logo 绝对定位，防止挤压 */
    .navbar .logo {
        position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
        z-index: 102; margin: 0; padding: 0; max-width: 40vw;
    }
    .navbar .logo img { height: 30px !important; margin: 0; width: auto; }

    .navbar nav {
        position: fixed; top: 0; right: 0; width: 100%; height: 100vh;
        background-color: rgba(0, 0, 0, 0.95); flex-direction: column !important;
        justify-content: center; align-items: center; gap: 30px; z-index: 90;
        visibility: hidden; transform: translateX(100%);
        transition: transform 0.3s ease-in-out, visibility 0.3s;
        box-sizing: border-box; padding: 40px 0;
    }
    .navbar nav.active { transform: translateX(0); visibility: visible; }
    .navbar nav a { font-size: 1.5em; margin: 0; color: white; display: block; width: 100%; text-align: center; padding: 10px 0; }
    .navbar nav a.cta-button-nav { margin-left: 0; margin-top: 10px; display: block; max-width: 250px; }
    
    /* 移动端下拉菜单样式 */
    .navbar nav .nav-dropdown {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    
    .navbar nav .nav-dropdown .dropdown-toggle {
        font-size: 1.5em;
        color: white;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 10px 0;
    }
    
    .navbar nav .nav-dropdown .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: none;
        border-radius: 12px;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        border: none;
        margin: 0 20px;
        gap: 0;
    }
    
    .navbar nav .nav-dropdown .dropdown-menu::before {
        display: none;
    }
    
    .navbar nav .nav-dropdown:hover .dropdown-menu,
    .navbar nav .nav-dropdown.active .dropdown-menu {
        max-height: 300px;
        padding: 8px;
    }
    
    .navbar nav .dropdown-menu a {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 1.1em;
        padding: 14px 20px;
        background: transparent;
        border-radius: 8px;
        text-align: center;
    }
    
    .navbar nav .dropdown-menu a:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        color: white !important;
    }
    .footer-bottom-container { padding: 0 20px; }
    
    /* 隐藏画廊左右渐变 */
    .portfolio-wrapper::before, .portfolio-wrapper::after { display: none !important; }
    .contact-card-grid { grid-template-columns: 1fr; gap: 18px; }
    .contact-card { min-height: 190px; }
}

/* 更小屏幕 (max-width: 768px) */
@media (max-width: 768px) {
    .content-container { padding: 30px 15px !important; }
    .portfolio-wrapper { margin: 0; padding: 0; }
    .portfolio-grid { padding-left: 15px; padding-right: 15px; }
    .work-card { width: 60vw; height: auto; max-height: 70vh; }
    .work-image { aspect-ratio: 21 / 28; width: 100%; height: 100%; max-height: 70vh; object-fit: contain; }
    
    .services-list, .contact-layout, .footer-container { flex-direction: column; gap: 20px; }
    .service-item, .footer-column { flex: 1 1 100%; min-width: unset; }
    #services .content-container { padding: 48px var(--site-gutter, 20px) 64px !important; }
    #services .service-card-content { padding: 0; }
    .service-subnav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 22px;
    }
    .service-subnav a {
        justify-content: center;
        width: 100%;
        padding: 12px 14px;
        text-align: center;
    }
    #contact .content-container { padding-top: 64px !important; padding-bottom: 68px !important; }
    #services h2 { font-size: 26px; }
    #contact h2 { font-size: 2.35em; }
    #contact .section-description { margin-bottom: 22px; }
    #contact .wechat-copy-status { margin-bottom: 22px; }
    .contact-card { min-height: 0; padding: 26px 22px; border-radius: 18px; }
    .contact-card h3 { font-size: 1.3em; margin-bottom: 12px; }
    .contact-card p { margin-bottom: 14px; }
    .hero-content h1 { font-size: 2.2em !important; }
    .hero-content p { font-size: 1em !important; }
    .image-grid-container { grid-template-columns: repeat(2, 1fr); gap: 2px; }
    .work-card, .service-item { margin-bottom: 20px; }
}

/* 返回顶部按钮 */
#back-to-top {
    position: fixed; bottom: 30px; right: 30px; z-index: 100;
    background-color: rgba(36, 36, 36, 0.94); color: white; border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 12px 18px; border-radius: 5px; cursor: pointer; font-size: 1.2em; line-height: 1;
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, background-color 0.3s, color 0.3s;
}
#back-to-top:hover { background-color: #f2f2f2; color: #111111; }
#back-to-top.show { opacity: 1; visibility: visible; }

/* ========== 子页面专用样式 ========== */
/* 子页面内容包裹层 - 不同于首页的滚动包裹层 */
.subpage-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 100px; /* 为固定导航栏留出空间 */
    background-color: #fff;
}

/* 子页面主内容区 - 自动填充剩余空间 */
.subpage-main {
    flex: 1;
    width: 100%;
}

/* 子页面标题横幅 */
.subpage-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}

.subpage-hero h1 {
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.subpage-hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* SEO 内容页、服务页与统计授权条 */
.breadcrumb {
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 20px 0;
    color: #667085;
    font-size: 0.9rem;
}
.breadcrumb a { color: #147aff; text-decoration: none; }
.seo-content {
    max-width: 920px;
    margin: 0 auto;
    padding: 36px 20px 70px;
    color: #333;
}
.seo-content:where(:not(.typeset)) h2,
.seo-content :where(.not-typeset, [data-not-typeset]) h2 { margin: 34px 0 14px; color: #147aff; font-size: 1.55rem; }
.seo-content:where(:not(.typeset)) h3,
.seo-content :where(.not-typeset, [data-not-typeset]) h3 { margin: 26px 0 10px; color: #333; font-size: 1.16rem; }
.seo-content:where(:not(.typeset)) :is(p, li),
.seo-content :where(.not-typeset, [data-not-typeset]) :is(p, li) { line-height: 1.85; }
.seo-content:where(:not(.typeset)) :is(ul, ol),
.seo-content :where(.not-typeset, [data-not-typeset]) :is(ul, ol) { padding-left: 24px; }
.seo-case-figure {
    margin: 0 0 28px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.seo-case-figure img {
    display: block;
    width: 100%;
    height: auto;
}
.seo-case-figure figcaption {
    padding: 14px 18px;
    color: #667085;
    font-size: 0.92rem;
}
.seo-summary, .seo-cta, .wechat-contact-panel {
    border-radius: 14px;
    background: #f6f9ff;
    border: 1px solid rgba(20, 122, 255, 0.14);
    padding: 22px 24px;
    margin: 24px 0;
}
.geo-answer-box {
    margin: 24px 0;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.geo-answer-kicker {
    margin: 0 0 8px;
    color: #147aff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.geo-answer-box h2 {
    margin: 0 0 12px;
    color: #111111;
}
.geo-answer-box p {
    margin: 0 0 14px;
    color: #4b5563;
    line-height: 1.8;
}
.geo-answer-box ul {
    margin: 0;
    padding-left: 20px;
    color: #374151;
}
.geo-answer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.geo-answer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
}
.seo-cta { text-align: center; }
.seo-cta .cta-button { display: inline-block; margin-top: 10px; }
.seo-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}
.seo-card {
    padding: 22px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.seo-card h2, .seo-card h3 { margin-top: 0; }
.seo-card a, .service-link, .read-more-link { color: #147aff; font-weight: 700; text-decoration: none; }
.seo-faq-section {
    margin-top: 34px;
    border-top: 1px solid #e7eaf0;
    padding-top: 10px;
}
.seo-faq-item {
    border-bottom: 1px solid #e7eaf0;
    padding: 0;
}
.seo-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 0;
    color: #111111;
    font-weight: 800;
    line-height: 1.45;
}
.seo-faq-item summary::-webkit-details-marker { display: none; }
.seo-faq-item summary::after {
    content: "+";
    float: right;
    margin-left: 16px;
    color: #147aff;
    font-weight: 800;
}
.seo-faq-item[open] summary::after { content: "-"; }
.seo-faq-item p {
    margin: 0;
    padding: 0 0 18px;
    color: #555555;
}
.case-index-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 28px 0 36px;
}
.case-topic-hub {
    margin: 0 0 34px;
    padding: 30px;
    border-radius: 12px;
    background: #0a0a0a;
    color: #ffffff;
}
.case-topic-hub h2 {
    margin: 0 0 10px;
    color: #ffffff;
    text-align: center;
}
.case-topic-hub > p {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}
.case-topic-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.case-topic-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid #333333;
    border-radius: 999px;
    background: #151515;
    color: #d7d7d7;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.case-topic-links a:hover,
.case-topic-links a:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: #111111;
    transform: translateY(-2px);
}
.case-index-card {
    overflow: hidden;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.case-index-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #f4f6f8;
}
.case-index-card-body {
    padding: 20px;
}
.case-index-card h2 {
    margin-top: 8px;
    font-size: 1.2rem;
}
.case-index-card h2 a {
    color: #111111;
    text-decoration: none;
}
.article-meta-line { color: #667085; font-size: 0.9rem; margin-top: 14px; }
.section-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.section-actions .read-more-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: #242424;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.section-actions .read-more-link:hover,
.section-actions .read-more-link:focus-visible {
    background: #f2f2f2;
    border-color: #d8d8d8;
    color: #111111;
    transform: translateY(-2px);
}
.portfolio-image-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.portfolio-library-hero,
.portfolio-detail-hero {
    width: 100%;
    box-sizing: border-box;
    background: #050505;
    color: #ffffff;
    padding: 132px 20px 72px;
}
.portfolio-library-hero-inner,
.portfolio-detail-hero-copy {
    max-width: 1100px;
    margin: 0 auto;
}
.portfolio-library-hero h1,
.portfolio-detail-hero h1 {
    margin: 0 0 18px;
    max-width: 860px;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.08;
    letter-spacing: 0;
}
.portfolio-library-hero p,
.portfolio-detail-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.08rem;
    line-height: 1.75;
}
.portfolio-library-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 38px 20px 84px;
}
.portfolio-library-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    border-bottom: 1px solid #e7eaf0;
    padding-bottom: 24px;
}
.portfolio-library-intro h2 {
    margin: 0 0 10px;
    color: #111111;
    font-size: 1.6rem;
}
.portfolio-library-intro p {
    max-width: 780px;
    margin: 0;
    color: #667085;
    line-height: 1.8;
}
.portfolio-library-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.portfolio-library-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 28px;
}
.portfolio-library-tags span {
    padding: 7px 11px;
    border: 1px solid #e7eaf0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    font-size: 0.86rem;
}
.portfolio-topic-hub {
    margin: 0 0 30px;
    padding: 20px;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    background: #f8fafc;
}
.portfolio-topic-hub h3 {
    margin: 0 0 16px;
    color: #111111;
    font-size: 1.08rem;
}
.portfolio-topic-hub .case-topic-links {
    justify-content: flex-start;
}
.portfolio-topic-hub .case-topic-links a {
    flex-direction: column;
    align-items: flex-start;
    min-height: 54px;
    background: #ffffff;
    border-color: #e0e4ea;
    color: #1d2939;
    text-align: left;
}
.portfolio-topic-hub .case-topic-links a span {
    margin-top: 3px;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 600;
}
.cover-library-controls {
    display: grid;
    gap: 14px;
    margin: 24px 0 30px;
}
.cover-filter-modes {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: fit-content;
    padding: 3px;
    border: 1px solid #e1e5ea;
    border-radius: 999px;
    background: #f4f6f8;
}
.cover-filter-modes button,
.cover-filter-options button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #475467;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}
.cover-filter-modes button:hover,
.cover-filter-modes button:focus-visible,
.cover-filter-modes button.is-active {
    background: #ffffff;
    color: #111111;
    box-shadow: 0 1px 5px rgba(16, 24, 40, 0.08);
}
.cover-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cover-filter-options[hidden] {
    display: none;
}
.cover-filter-options button {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #e1e5ea;
    background: #ffffff;
    font-size: 0.84rem;
}
.cover-filter-options button:hover,
.cover-filter-options button:focus-visible,
.cover-filter-options button.is-active {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}
.portfolio-library-card[hidden] {
    display: none;
}
.portfolio-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.portfolio-library-grid-cover {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.portfolio-library-card {
    overflow: hidden;
    border: 1px solid #e7eaf0;
    border-radius: 10px;
    background: #ffffff;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.portfolio-library-card:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 122, 255, 0.28);
    box-shadow: 0 16px 38px rgba(16, 24, 40, 0.1);
}
.portfolio-library-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6f8;
}
.portfolio-library-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f4f6f8;
}
.portfolio-library-card-cover .portfolio-library-image-link {
    aspect-ratio: 3 / 4;
    padding: 8px;
    border-bottom: 1px solid #eef2f6;
}
.portfolio-library-card-cover img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    background: transparent;
}
.portfolio-library-card-body {
    padding: 18px;
}
.portfolio-library-card-cover .portfolio-library-card-body {
    display: grid;
    align-content: start;
    min-height: 86px;
    padding: 12px 14px 14px;
    box-sizing: border-box;
}
.cover-card-journal {
    overflow: hidden;
    margin: 0 0 6px !important;
    color: #667085 !important;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portfolio-library-card-cover h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.portfolio-library-card h2 {
    margin: 8px 0 10px;
    font-size: 1.12rem;
    line-height: 1.45;
}
.portfolio-library-card h2 a {
    color: #111111;
    text-decoration: none;
}
.portfolio-library-card p {
    margin: 0 0 12px;
    color: #667085;
    line-height: 1.7;
}
.portfolio-back-link {
    display: inline-flex;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
    text-decoration: none;
}
.portfolio-detail-hero .cover-detail-disclosure {
    max-width: 760px;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.78rem;
    line-height: 1.55;
}
.portfolio-detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.8fr);
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 20px 84px;
}
.portfolio-detail-artwork {
    grid-row: span 4;
    overflow: hidden;
    margin: 0;
    border: 1px solid #e7eaf0;
    border-radius: 12px;
    background: #f8fafc;
}
.portfolio-detail-artwork img {
    display: block;
    width: 100%;
    height: auto;
}
.portfolio-detail-artwork-images {
    display: grid;
    gap: 12px;
    padding: 12px;
}
.portfolio-detail-artwork-images img {
    border: 1px solid #e7eaf0;
    border-radius: 8px;
    background: #ffffff;
}
.portfolio-detail-artwork figcaption {
    padding: 16px 18px;
    background: #ffffff;
}
.portfolio-detail-facts,
.portfolio-detail-section {
    border: 1px solid #e7eaf0;
    border-radius: 12px;
    background: #ffffff;
    padding: 22px;
}
.portfolio-detail-facts h2,
.portfolio-detail-section:where(:not(.typeset)) h2 {
    margin: 0 0 14px;
    color: #111111;
    font-size: 1.25rem;
}
.portfolio-detail-facts dl {
    margin: 0 0 18px;
}
.portfolio-detail-facts dl div {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #eef2f6;
}
.portfolio-detail-facts dt {
    color: #667085;
    font-weight: 700;
}
.portfolio-detail-facts dd {
    margin: 0;
    color: #111111;
    line-height: 1.6;
}
.portfolio-detail-facts dd a {
    color: #147aff;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.portfolio-detail-facts dd a:hover,
.portfolio-detail-facts dd a:focus-visible {
    text-decoration: underline;
}
.portfolio-detail-section {
    grid-column: 2;
}
.portfolio-detail-section:where(:not(.typeset)) p,
.portfolio-detail-section:where(:not(.typeset)) li {
    color: #475467;
    line-height: 1.85;
}
.portfolio-detail-section:where(:not(.typeset)) ul {
    margin: 0;
    padding-left: 20px;
}
.portfolio-detail-attribution {
    border-color: #dce5ee;
    background: #f8fafc;
}
.portfolio-legal-attribution {
    margin: 12px 0 0;
    color: #7d8792;
    font-size: 12px;
    line-height: 1.7;
}
.portfolio-detail-shell > .portfolio-legal-attribution {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid #e7ebef;
}
.portfolio-related-grid {
    display: grid;
    gap: 12px;
}
.portfolio-related-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: #111111;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
}
.portfolio-related-card img {
    width: 82px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
    background: #f4f6f8;
}
.portfolio-related-card-cover {
    grid-template-columns: 64px minmax(0, 1fr);
}
.portfolio-related-card-cover img {
    width: 64px;
    aspect-ratio: 3 / 4;
    padding: 4px;
    object-fit: contain;
    background: #f4f6f8;
    box-sizing: border-box;
}
.portfolio-detail-cta {
    grid-column: 1 / -1;
}
.wechat-copy-button {
    border: 0;
    border-radius: 22px;
    background: #147aff;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 10px 20px;
}
.wechat-copy-button:hover { background: #0066cc; }
.wechat-copy-status { min-height: 1.4em; color: #147aff; margin: 10px 0 0; }
.analytics-consent-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 920px;
    margin: 0 auto;
    padding: 14px 18px;
    border: 1px solid rgba(20, 122, 255, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.14);
    color: #333;
    box-sizing: border-box;
}
.analytics-consent-banner p { margin: 0; line-height: 1.55; font-size: 0.9rem; }
.analytics-consent-banner a { color: #147aff; }
.analytics-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.analytics-consent-actions button {
    min-height: 44px;
    border: 1px solid #d0d5dd;
    border-radius: 18px;
    background: #fff;
    color: #475467;
    cursor: pointer;
    padding: 8px 16px;
}
.analytics-consent-actions .accept { border-color: #147aff; background: #147aff; color: #fff; }
.analytics-consent-actions button:hover { filter: brightness(0.96); }
.analytics-consent-actions button:focus-visible,
.analytics-consent-banner a:focus-visible { outline: 2px solid #147aff; outline-offset: 3px; }

/* 子页面响应式调整 */
@media (max-width: 768px) {
    .subpage-wrapper {
        padding-top: 70px;
    }
    
    .subpage-hero {
        padding: 40px 15px;
    }
    
    .subpage-hero h1 {
        font-size: 1.8rem;
    }
    
    .subpage-hero p {
        font-size: 1rem;
    }
    .seo-card-grid { grid-template-columns: 1fr; }
    .case-index-grid { grid-template-columns: 1fr; gap: 18px; }
    .portfolio-library-hero,
    .portfolio-detail-hero { padding: 96px 18px 48px; }
    .portfolio-library-intro { grid-template-columns: 1fr; align-items: start; }
    .portfolio-library-cta { width: 100%; box-sizing: border-box; }
    .portfolio-library-grid { grid-template-columns: 1fr; gap: 18px; }
    .portfolio-library-grid-cover { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .cover-filter-options { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .portfolio-library-card-cover .portfolio-library-card-body { min-height: 82px; padding: 11px 12px 13px; }
    .portfolio-library-card-cover h2 { font-size: 0.94rem; }
    .cover-card-journal { font-size: 0.74rem; }
    .portfolio-detail-shell { grid-template-columns: 1fr; gap: 18px; padding: 28px 16px 62px; }
    .portfolio-detail-artwork,
    .portfolio-detail-section { grid-column: 1; grid-row: auto; }
    .portfolio-detail-facts dl div { grid-template-columns: 1fr; gap: 4px; }
    .analytics-consent-banner { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); align-items: stretch; flex-direction: column; gap: 12px; padding: 14px 16px; width: auto; }
    .analytics-consent-actions { justify-content: flex-end; width: 100%; }
    .analytics-consent-actions button { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 430px) {
    .portfolio-library-grid-cover { grid-template-columns: 1fr; }
}

/* Homepage Codex-inspired first-screen revision */
@media (min-width: 1025px) {
    body .navbar {
        min-height: 66px;
        padding: 12px clamp(28px, 3.8vw, 68px) !important;
        background: transparent;
        box-shadow: none;
    }

    body .navbar .logo {
        left: clamp(28px, 3.8vw, 68px);
    }

    body .navbar .logo img {
        height: 38px;
    }

    body .navbar nav {
        position: static;
        min-height: 50px;
        padding: 6px 10px;
        gap: 6px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body .navbar nav a,
    body .navbar .nav-dropdown .dropdown-toggle {
        min-height: 36px;
        padding: 0 16px;
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 0.96rem;
        font-weight: 600;
        line-height: 36px;
        opacity: 1;
        text-shadow: none;
        transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, text-shadow 0.2s ease;
    }

    body .navbar nav a:hover,
    body .navbar .nav-dropdown:hover .dropdown-toggle {
        color: #111827;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        text-shadow: none;
    }

    body .navbar .nav-dropdown .dropdown-toggle::after {
        display: none;
    }

    body .navbar .dropdown-menu {
        top: calc(100% + 10px);
        width: min(520px, 62vw);
        min-width: 0;
        padding: 22px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 18px;
        border: 1px solid rgba(255, 255, 255, 0.46);
        border-radius: 16px;
        background: rgba(244, 247, 255, 0.78);
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(22px) saturate(120%);
        -webkit-backdrop-filter: blur(22px) saturate(120%);
    }

    body .navbar .dropdown-menu::after {
        content: "";
        position: absolute;
        top: 22px;
        bottom: 22px;
        left: 50%;
        width: 1px;
        background: rgba(15, 23, 42, 0.08);
        pointer-events: none;
    }

    body .navbar .dropdown-menu::before {
        display: none;
    }

    body .navbar .nav-dropdown:hover .dropdown-menu {
        display: grid;
        transform: translateX(-50%) translateY(0);
    }

    body .navbar .dropdown-menu a {
        padding: 13px 16px;
        border-radius: 12px;
        color: rgba(17, 24, 39, 0.84) !important;
        font-size: 0.98rem;
        font-weight: 600;
        line-height: 1.25;
        text-align: left;
        background: transparent;
        text-shadow: none;
    }

    body .navbar .dropdown-menu a:hover {
        color: #111827 !important;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
        transform: none;
    }

    body .navbar .cta-button-nav,
    body .navbar.scrolled .cta-button-nav {
        right: clamp(28px, 3.8vw, 68px);
        padding: 14px 30px !important;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        color: #ffffff !important;
        background: rgba(8, 8, 10, 0.94);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    }

    body .navbar .cta-button-nav:hover,
    body .navbar.scrolled .cta-button-nav:hover {
        color: #ffffff !important;
        background: #000000;
    }

    body .navbar.scrolled {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 10px 34px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(18px) saturate(120%);
        -webkit-backdrop-filter: blur(18px) saturate(120%);
    }

    body .navbar.scrolled nav a,
    body .navbar.scrolled .nav-dropdown .dropdown-toggle {
        color: rgba(17, 24, 39, 0.82);
    }

    body .navbar.scrolled nav a:hover,
    body .navbar.scrolled .nav-dropdown:hover .dropdown-toggle {
        color: #111827;
        background: rgba(15, 23, 42, 0.06);
    }
}

body .hero-content {
    top: 38.5%;
    max-width: min(720px, 84vw);
    text-align: center;
    text-shadow: none;
}

body .hero-brand-icon {
    width: clamp(58px, 5vw, 82px);
    height: clamp(58px, 5vw, 82px);
    margin: 0 auto 26px;
    border-radius: 28%;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

body .hero-brand-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

body .hero-content h1 {
    display: block;
    width: fit-content;
    max-width: min(620px, 100%);
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(3rem, 4.9vw, 5.1rem);
    line-height: 0.98;
    letter-spacing: 0;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.14);
}

body .hero-content h1::after {
    content: "";
    display: block;
    width: min(260px, 72%);
    height: 2px;
    margin: 14px auto 0;
    background: rgba(255, 255, 255, 0.72);
}

body .hero-content p {
    margin-top: 18px;
    font-size: clamp(1.15rem, 1.65vw, 1.75rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 5px 12px rgba(0, 0, 0, 0.12);
}

body .hero-btn-group {
    margin-top: 28px;
}

body .cta-button.primary-btn {
    min-width: 148px;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    color: #111111;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.54);
}

body .hero-trust-strip {
    position: fixed;
    left: 50%;
    bottom: 92px;
    z-index: 4;
    width: min(1040px, 74vw);
    transform: translateX(-50%);
    padding: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body .hero-trust-strip p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    font-weight: 600;
    text-shadow: none;
}

body .hero-trust-marquee {
    width: 100%;
    height: 54px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: clamp(18px, 4vw, 54px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

body .hero-trust-column {
    display: flex;
    height: 54px;
    flex-direction: column;
    align-items: center;
    animation: hero-trust-roll 10s cubic-bezier(0.76, 0, 0.24, 1) infinite;
    will-change: transform;
}

body .hero-trust-column:nth-child(2) { animation-delay: -1.4s; }
body .hero-trust-column:nth-child(3) { animation-delay: -2.8s; }
body .hero-trust-column:nth-child(4) { animation-delay: -4.2s; }
body .hero-trust-column:nth-child(5) { animation-delay: -5.6s; }

body .hero-trust-column span {
    flex: 0 0 auto;
    height: 54px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: none;
    white-space: nowrap;
}

@keyframes hero-trust-roll {
    0%, 13% { transform: translateY(0); }
    20%, 33% { transform: translateY(-54px); }
    40%, 53% { transform: translateY(-108px); }
    60%, 73% { transform: translateY(-162px); }
    80%, 100% { transform: translateY(-216px); }
}

@media (max-width: 1280px) and (min-width: 1025px) {
    body .navbar .logo img {
        height: 34px;
    }

    body .navbar nav {
        gap: 2px;
    }

    body .navbar nav a,
    body .navbar .nav-dropdown .dropdown-toggle {
        padding: 0 13px;
        font-size: 0.9rem;
    }

    body .hero-trust-strip {
        width: min(820px, 72vw);
    }

    body .hero-content h1 {
        font-size: clamp(2.55rem, 5.4vw, 4rem);
    }
}

@media (max-width: 1024px) {
    body .navbar > .cta-button-nav {
        display: none;
    }

    body .hero-content {
        top: 46%;
        max-width: 86vw;
    }

    body .hero-brand-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 18px;
    }

    body .hero-content h1 {
        font-size: clamp(2.2rem, 8.6vw, 3.2rem) !important;
        letter-spacing: 0;
    }

    body .hero-content h1::after {
        width: min(240px, 56vw);
        margin-top: 14px;
    }

    body .hero-content p {
        font-size: clamp(1.05rem, 4.6vw, 1.45rem) !important;
        letter-spacing: 0.02em;
    }

    body .hero-btn-group .primary-btn {
        display: inline-block;
    }

    body .cta-button.primary-btn {
        min-width: 128px;
        padding: 12px 24px;
        font-size: 1rem;
    }

    body .hero-trust-strip {
        left: 24px;
        right: 24px;
        bottom: 86px;
        width: auto;
        transform: none;
        padding: 0;
    }

    body .hero-trust-strip p {
        margin-bottom: 12px;
        font-size: 0.88rem;
    }

    body .hero-trust-marquee {
        height: 42px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    body .hero-trust-column {
        height: 42px;
    }

    body .hero-trust-column:nth-child(n+4) {
        display: none;
    }

    body .hero-trust-column span {
        height: 42px;
        font-size: 0.92rem;
    }

    @keyframes hero-trust-roll {
        0%, 13% { transform: translateY(0); }
        20%, 33% { transform: translateY(-42px); }
        40%, 53% { transform: translateY(-84px); }
        60%, 73% { transform: translateY(-126px); }
        80%, 100% { transform: translateY(-168px); }
    }
}

@media (max-width: 640px) {
    body .hero-content {
        top: 47%;
    }

    body .hero-trust-strip {
        display: none;
    }

    body .video-controls {
        right: 16px;
        bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .hero-trust-column {
        animation: none;
    }

    .video-item { transition: none; }
}

/* Figure modal refinement */

.lightbox-overlay {
    padding: clamp(22px, 4vw, 60px);
    background: rgba(248, 250, 252, 0.72);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    box-sizing: border-box;
    width: min(1120px, 82vw);
    max-height: min(760px, 84vh);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 34px);
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.lightbox-header {
    grid-column: 1 / -1;
    max-width: 900px;
    margin: 0;
    padding-right: 56px;
}

.lightbox-kicker {
    margin: 0 0 10px;
    color: #667085;
    font-size: 0.86rem;
    font-weight: 700;
}

.lightbox-header h3 {
    margin: 0;
    color: #111827;
    font-size: clamp(1.24rem, 1.75vw, 1.95rem);
    line-height: 1.28;
    letter-spacing: 0;
}

.lightbox-body {
    display: contents;
}

.lightbox-figure {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    margin: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    background: #f7f9fc;
}

.lightbox-image {
    width: 100%;
    height: min(52vh, 500px);
    max-height: none;
    object-fit: contain;
    display: block;
    border-radius: 0;
    box-shadow: none;
    transform: scale(0.99);
}

.lightbox-overlay.active .lightbox-image {
    transform: scale(1);
}

.lightbox-meta {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lightbox-meta .lightbox-summary {
    order: 1;
    margin: 0;
    max-width: none;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    color: #475467;
}

.lightbox-content > .lightbox-summary {
    display: none;
}

.lightbox-summary h4 {
    margin: 0 0 12px;
    color: #111827;
    font-size: 1.02rem;
    letter-spacing: 0;
}

.lightbox-summary p {
    margin: 0;
    max-height: 220px;
    overflow: auto;
    padding-right: 6px;
    color: #475467;
    font-size: 0.96rem;
    line-height: 1.75;
}

.lightbox-doi-panel {
    order: 2;
    padding: 18px 0;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.lightbox-doi-panel span {
    display: block;
    margin-bottom: 10px;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lightbox-doi-panel a {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.lightbox-doi-panel a:hover {
    text-decoration: underline;
}

.lightbox-close {
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: #111827;
    background: rgba(17, 24, 39, 0.06);
    line-height: 1;
}

.lightbox-close:hover {
    background: rgba(17, 24, 39, 0.1);
}

@media (max-width: 1024px) {
    .lightbox-overlay {
        padding: clamp(14px, 4vw, 28px);
        align-items: center;
    }

    .lightbox-content {
        width: min(760px, 92vw);
        max-height: 86vh;
        overflow: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 18px;
        padding: clamp(20px, 5vw, 30px);
        border-radius: 20px;
    }

    .lightbox-body {
        display: block;
    }

    .lightbox-figure,
    .lightbox-meta {
        grid-column: auto;
        grid-row: auto;
    }

    .lightbox-figure {
        margin-bottom: 18px;
    }

    .lightbox-image {
        height: min(42vh, 420px);
    }

    .lightbox-summary p {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 560px) {
    .lightbox-overlay {
        padding: 10px;
        align-items: flex-start;
    }

    .lightbox-content {
        width: 100%;
        max-height: calc(100vh - 20px);
        padding: 18px;
        border-radius: 18px;
    }

    .lightbox-header {
        padding-right: 48px;
    }

    .lightbox-header h3 {
        font-size: 1.08rem;
    }

    .lightbox-image {
        height: min(38vh, 340px);
    }

    .lightbox-actions,
    .lightbox-detail-button {
        width: 100%;
    }
}

/* Generated knowledge articles */
.stat-proof {
    display: block;
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.service-inquiry {
    max-width: 920px;
    margin: 28px auto 0;
    padding: 24px;
    border: 1px solid #d6dcd7;
    border-radius: 16px;
    background: #f4f7f4;
    color: #24352a;
    text-align: left;
    scroll-margin-top: 100px;
}
.service-page .subpage-hero { background: #f8faf9; color: #24352a; }
.service-page .subpage-hero h1 { max-width: 960px; margin-left: auto; margin-right: auto; }
.service-inquiry h2 { margin: 0 0 10px; font-size: 22px; color: #24352a; }
.subpage-hero .service-inquiry p, .service-inquiry p { margin: 10px 0; font-size: 16px; line-height: 1.7; color: #425147; }
.service-inquiry-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.service-inquiry-actions button { min-height: 44px; margin: 0; cursor: pointer; }
.service-qr-button { border: 1px solid #7b8a7f; border-radius: 24px; padding: 10px 20px; background: #fff; color: #24352a; font: inherit; }
.service-inquiry .service-inquiry-note { font-size: 13px; color: #526057; overflow-wrap: anywhere; }
.service-inquiry code { user-select: all; font-weight: 700; }
.service-inquiry .wechat-copy-status:empty { display: none; }
.service-case-studies { margin: 36px 0; }
.service-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service-case-card { border: 1px solid #e1e4e2; border-radius: 14px; overflow: hidden; background: #fff; min-width: 0; }
.service-case-card > a { display: block; background: #f6f7f6; }
.service-case-card img { display: block; width: 100%; height: 240px; object-fit: contain; }
.service-case-card > div { padding: 18px; }
.service-case-card h3 { margin: 8px 0; font-size: 18px; line-height: 1.55; }
.service-case-card p { font-size: 14px; line-height: 1.7; }
.service-case-card .service-case-status { font-size: 12px; color: #4c6656; margin-top: 0; }
.service-contact-dock { display: none; }
.service-inquiry button:focus-visible, .service-contact-dock a:focus-visible { outline: 3px solid #416d53; outline-offset: 4px; }
@media (max-width: 768px) {
    .service-page { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .service-inquiry { padding: 18px; }
    .service-inquiry-actions { align-items: stretch; flex-direction: column; }
    .service-case-grid { grid-template-columns: 1fr; }
    .service-contact-dock { position: fixed; z-index: 900; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #d6dcd7; font-size: 13px; }
    .service-contact-dock a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border-radius: 24px; background: #24352a; color: #fff; font-weight: 600; text-decoration: none; }
    .service-page #back-to-top { bottom: 92px; }
    body:has(#analytics-consent-banner) .service-contact-dock { display: none; }
}

.article-sources,
.article-related-links {
    margin-top: 40px;
    padding-top: 8px;
    border-top: 1px solid #e4e4e4;
}

.article-sources span {
    color: #737373;
}

/* 首页模块节奏：8px 倍数间距，内页及品牌宣言保持各自布局。 */
body.home-page {
    --home-section-space: 112px;
    --home-block-space: 48px;
    --home-grid-row-space: 48px;
    --home-panel-space: 64px;
}
body.home-page :is(#research-start, #works, #gallery, #contact, #services) > .content-container {
    padding: var(--home-section-space) var(--site-gutter, 5vw) !important;
}
body.home-page :is(#research-start, #works, #gallery, #contact) > .content-container > h2 {
    margin: 0 0 16px;
}
body.home-page :is(#research-start, #works, #gallery, #contact) > .content-container > .section-description {
    margin: 0 auto var(--home-block-space);
    padding-block: 0;
}
body.home-page #services > .content-container > h2 {
    margin: 0 0 var(--home-block-space);
}
body.home-page #research-start .home-path-grid,
body.home-page #services .services-list {
    row-gap: var(--home-grid-row-space);
}
body.home-page #services .services-intro-panel { margin-bottom: var(--home-panel-space); }
body.home-page :is(#works, #gallery) .section-actions { margin-top: 32px; }
@media (max-width: 1050px) {
    body.home-page {
        --home-section-space: 88px;
        --home-block-space: 40px;
        --home-panel-space: 48px;
    }
}
@media (max-width: 768px) {
    body.home-page {
        --home-section-space: 64px;
        --home-block-space: 32px;
        --home-grid-row-space: 40px;
        --home-panel-space: 40px;
    }
}