/* ===== 自托管可变字体（子集化：680 汉字 + 拉丁/西语 + 标点）===== */
    @font-face {
        font-family: 'Noto Sans SC';
        src: url('fonts/NotoSansSC.woff2') format('woff2');
        font-weight: 300 700;   /* 可变轴，一个文件覆盖 300/400/500/700 */
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Noto Serif SC';
        src: url('fonts/NotoSerifSC.woff2') format('woff2');
        font-weight: 300 700;
        font-style: normal;
        font-display: swap;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    :root {
        --bg-color: #050509;
        --text-main: #ffffff;
        --text-muted: #b8b8d0;
        --glass-bg: rgba(255, 255, 255, 0.03);
        --glass-border: rgba(255, 255, 255, 0.08);
        /* 核心修改：修正后的蓝紫渐变色，提取自您的截图 */
        --neon-gradient: linear-gradient(90deg, #5E2CFF 0%, #00C6FF 100%);
        --accent-glow: 0 0 20px rgba(94, 44, 255, 0.4);
    }

    /* 渐变文字效果类 */
    .gradient-text {
        background: var(--neon-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* --- 修改区域开始 --- */
    html, body {
        /* contain = 保留 iOS 原生橡皮筋回弹，同时阻止滚动链 & Chrome 下拉刷新。
           none 会把橡皮筋也一起关掉，不要用。 */
        overscroll-behavior-y: contain;
        /* 核心优化：消除300ms点击延迟，禁用双击缩放，提升按钮响应速度 */
        touch-action: manipulation;
    }
    /* --- 修改区域结束 --- */
    
    body {
        font-family: 'Noto Sans SC', sans-serif;
        background-color: var(--bg-color);
        color: var(--text-main);
        min-height: 100vh;
        min-height: 100svh;  /* svh = 最小视口高度，Safari 算错高度时也不会露出空白 */
        min-height: 100dvh;  /* v391 dvh = 动态视口：工具栏收起/展开时实时对齐，短页面下方不再露空白（现代浏览器优先用它；不支持则回落 svh） */
        overflow-x: hidden;
    }
    
    /* 底部弹性拉动区域 */
    .bottom-bounce-indicator {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        background: linear-gradient(to top, rgba(94, 44, 255, 0.15), transparent);
        pointer-events: none;
        transition: height 0.15s ease-out;
        z-index: 50;
    }

    /* ===== 性能：常驻动画节能 ===== */
    /* v384 注：形象动画已静态化，下面这套后台缓解已非必需（animation-play-state / will-change
       归零都成了空操作），降级为纯防御性保留——无害，且 visibility:hidden 仍省一点后台绘制。 */
    /* 标签页不可见时只冻结【氛围层】，不碰交互动画（原来用 * 通配符太粗暴） */
    html.page-hidden .nebula,
    html.page-hidden .stars {
        animation-play-state: paused !important;
        /* 🚨 v381 关键补丁：仅"暂停"动画不够——will-change/translateZ 会让这两层
           永久常驻各自的 GPU 合成层，即便动画停了、标签页切到后台，纹理照样吃显存。
           手机 OS 在后台回收这些层纹理、切回来时合成器可能贴【旧帧/空白】＝你遇到的显示 bug。
           切走时把 will-change 归零，允许浏览器【下放合成层、释放显存】。 */
        will-change: auto !important;
    }
    /* 氛围层整体在后台直接隐藏：反正看不见，让浏览器把这层的绘制/纹理彻底丢掉，
       后台 GPU 占用 → 归零；切回前台时是一次全新重绘，顺带把"合成器卡在旧帧"的空白 bug 一并冲掉。
       全程标签页不可见，无可见闪烁；page-hidden 一摘除立刻恢复可见。 */
    html.page-hidden .art-background { visibility: hidden; }
    /* v392：后台时卸掉固定头部的毛玻璃——backdrop-filter 是全站唯一还在烧的常驻合成层
       （每次滚动/重绘都要重算模糊）。前台观感完全不变；仅在标签页不可见时把这层最贵的纹理放掉，
       让合成器在被 OS 挂起前就轻装，缩小"解锁贴旧帧空白"的触发面。切回前台立刻恢复毛玻璃。 */
    html.page-hidden header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* 尊重系统"减弱动态效果"：关掉页面切换位移、平滑滚动降级为即时。
       （形象动画自 v384 起对所有人都已静态，这里不必再单独处理 .nebula/.stars。） */
    @media (prefers-reduced-motion: reduce) {
        .page   { animation: none; }   /* 页面切换不做位移 */
        html    { scroll-behavior: auto; }
    }

    /* v393：移除 v389 的诊断规则 `*{animation:none}`——它当初用于排查"零动画下底部空白还犯不犯"，
       任务已完成。v384 起所有常驻/无限动画早已静态化，全站只剩两个一次性 keyframe：fadeIn（页面淡入）
       与 starBurst（点击许愿星爆）——都廉价、瞬时、不占常驻合成层，却被这条规则一起冻住
       （底部 logo 点击后星星僵在原点 1.5 秒即此故）。故删除，恢复这两个一次性动画。
       ⚠️ 星空 canvas 的浮动仍由 JS 单独关着（未调 beginMotion）、保持静态，不受本次影响——
          合成器瘦身（v392）不动摇：常驻 GPU 负载依旧为零，只放行一次性点击/切页效果。 */

    .art-background {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: -1;
        background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
        overflow: hidden;
    }
    
    .nebula {
        position: absolute;
        width: 100%; height: 100%;
        background-image: 
            radial-gradient(circle at 20% 30%, rgba(76, 29, 149, 0.15) 0%, transparent 40%),
            radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.1) 0%, transparent 40%);
        /* v384：形象动画静态化——移除 breathe/will-change/translateZ，不再永久占用 GPU 合成层。
           静态 opacity 取原动画 0.5–0.8 的中值，视觉与原"呼吸静止态"几乎一致。 */
        opacity: 0.65;
    }

    /* v385：星空改为单 <canvas> 绘制（真随机分布 + 真星形 + 就位后原地慢浮动）。
       单张位图、普通合成，无 will-change/translateZ 常驻层——从架构上避开旧的底部空白 bug。
       星云 .nebula 仍为静态 CSS，不动。 */
    #stars {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        display: block;
    }

    header {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 100;
        background: rgba(5, 5, 9, 0.7);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--glass-border);
    }
    nav {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1.2rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        position: relative;
        text-decoration: none;
    }
    .logo-icon {
        width: 36px;
        height: 36px;
        transition: transform 0.3s ease;
    }
    .logo:hover .logo-icon {
        transform: scale(1.08) rotate(-3deg);
    }
    .logo-text {
        font-family: 'Noto Serif SC', serif;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--text-main);
        letter-spacing: 2px;
        position: relative;
    }
    .logo-text::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--neon-gradient);
        border-radius: 1px;
        box-shadow: var(--accent-glow);
        transition: width 0.3s ease;
    }
    .logo:hover .logo-text::after { width: 100%; }

    .nav-center {
        display: flex;
        gap: 1.2rem;
        list-style: none;
    }
    .nav-center a {
        text-decoration: none;
        color: var(--text-muted);
        font-size: 0.85rem;
        padding: 0.5rem 0;
        transition: all 0.3s;
        position: relative;
        cursor: pointer;
    }
    .nav-center a:hover, .nav-center a.active {
        color: #fff;
    }
    .nav-center a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0; height: 1px;
        background: #fff;
        transition: width 0.3s;
    }
    .nav-center a:hover::before, .nav-center a.active::before {
        width: 100%;
    }

    /* 语言切换器 */
    .nav-right {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .lang-switcher {
        display: flex;
        gap: 0.4rem;
        align-items: center;
    }
    .lang-switcher button {
        background: transparent;
        border: 1px solid var(--glass-border);
        color: var(--text-muted);
        padding: 0.35rem 0.6rem;
        font-size: 0.7rem;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        font-family: inherit;
    }
    .lang-switcher button:hover {
        border-color: rgba(255,255,255,0.3);
        color: #fff;
    }
    .lang-switcher button.active {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.3);
        color: #fff;
    }

    /* 移动端语言地球图标 */
    .lang-globe {
        display: none;
        position: relative;
        cursor: pointer;
        padding: 5px;
    }
    .lang-globe svg {
        width: 22px;
        height: 22px;
        color: var(--text-muted);
        transition: color 0.3s;
    }
    .lang-globe:hover svg {
        color: #fff;
    }
    .lang-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 10px;
        background: rgba(20, 20, 30, 0.98);
        /* v382: 底色 0.98 近全不透明，blur 本就看不出来——删掉省 GPU，视觉零变化 */
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        padding: 0.5rem;
        display: none;
        flex-direction: column;
        gap: 0.3rem;
        min-width: 100px;
        z-index: 200;
    }
    .lang-dropdown.show {
        display: flex;
    }
    .lang-dropdown button {
        background: transparent;
        border: none;
        color: var(--text-muted);
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        text-align: left;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s;
        font-family: inherit;
    }
    .lang-dropdown button:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
    }
    .lang-dropdown button.active {
        color: #fff;
        background: rgba(94, 44, 255, 0.3);
    }

    /* 汉堡菜单按钮 */
    .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 5px;
        z-index: 101;
    }
    .hamburger span {
        width: 24px;
        height: 2px;
        background: #fff;
        transition: all 0.3s;
    }
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .page {
        display: none;
        position: relative;
        z-index: 1;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;  /* v391 dvh 动态视口：切到矮页时页容器随可视高度对齐，工具栏收起后底部不留空白 */
        padding-top: 80px;
        animation: fadeIn 0.6s ease;
    }
    .page.active { display: block; }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Hero */
    .hero {
        min-height: calc(100vh - 80px);
        min-height: calc(100svh - 80px);
        display: flex;
        align-items: center;
        padding: 2rem;
        position: relative;
    }
    
    .hero-inner {
        max-width: 1100px;
        margin: 0 auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 5rem;
        align-items: center;
    }
    .hero-content h1 {
        font-family: 'Noto Serif SC', serif;
        font-size: 3.2rem;
        line-height: 1.2;
        margin-bottom: 1rem;
        font-weight: 700;
        color: #fff;
    }
    /* 首页标题渐变修正 */
    .hero-content h1 .gradient-part {
        background: var(--neon-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    /* 首页标题白色部分 */
    .hero-content h1 .white-highlight {
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
    }

    .hero-content .tagline {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 2rem;
        letter-spacing: 4px;
        text-transform: uppercase;
    }
    .hero-content p {
        color: var(--text-muted);
        line-height: 1.9;
        font-size: 0.95rem;
        margin-bottom: 2.5rem;
    }
    .hero-buttons {
        display: flex;
        gap: 1rem;
    }
    .btn {
        padding: 0.9rem 2rem;
        border-radius: 6px;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s;
        border: none;
        font-family: inherit;
    }
    .btn-primary {
        background: var(--neon-gradient);
        color: #fff;
        box-shadow: var(--accent-glow);
    }
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(94, 44, 255, 0.6);
    }
    .btn-outline {
        background: transparent;
        border: 1px solid var(--glass-border);
        color: var(--text-muted);
    }
    .btn-outline:hover {
        border-color: #fff;
        color: #fff;
    }

    .hero-visual {
        position: relative;
    }
    .showcase-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .showcase-item {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.4s ease;
        position: relative;
    }
    .showcase-item::before {
        content: '';
        display: block;
        padding-top: 75%;
    }
    .showcase-item img {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .showcase-item:hover {
        transform: translateY(-8px);
        border-color: rgba(94, 44, 255, 0.5);
        box-shadow: 0 15px 40px rgba(94, 44, 255, 0.2);
    }
    .showcase-item:hover img {
        transform: scale(1.05);
    }
    .showcase-item .overlay {
        position: absolute;
        bottom: 0; left: 0;
        right: 0;
        padding: 2.5rem 1rem 1rem;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
        transition: all 0.3s;
    }
    .showcase-item .overlay h4 {
        font-size: 0.85rem;
        font-weight: 500;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .showcase-item .overlay span {
        font-size: 0.7rem;
        color: rgba(255,255,255,0.75);
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .showcase-item:hover .overlay {
        padding-bottom: 1.2rem;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
    }

    /* 页面头部 - 核心修改区域 */
    .page-header {
        text-align: center;
        padding: 4rem 2rem 2rem;
    }
    .page-header h1 {
        font-family: 'Noto Serif SC', serif;
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        
        /* 1. 应用修正后的渐变色 */
        background: var(--neon-gradient);
        /* 2. 文字渐变必备属性 */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        /* 兼容性增强 */
        
        font-weight: 700;
        /* 3. 【关键修复】使用 inline-block */
        /* 之前是 block，背景铺满整行导致渐变被拉伸看不出效果 */
        /* 改为 inline-block 后，背景只包裹文字，渐变效果会非常明显 */
        display: inline-block;
    }
    .page-header p {
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    /* 页面介绍区域 */
    .page-intro {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 2rem 3rem;
        text-align: center;
    }
    .page-intro .intro-subtitle {
        font-family: 'Noto Serif SC', serif;
        font-size: 1.3rem;
        color: var(--text-main);
        margin-bottom: 2rem;
        line-height: 1.6;
        font-weight: 500;
    }
    .page-intro .intro-content {
        color: var(--text-muted);
        font-size: 0.95rem;
        line-height: 1.9;
    }
    .page-intro .intro-content > p {
        margin-bottom: 1.5rem;
    }
    .page-intro .intro-content h3 {
        color: var(--text-main);
        font-size: 1rem;
        margin: 2rem 0 1.2rem;
        font-weight: 500;
        letter-spacing: 0.5px;
    }
    .page-intro .intro-content ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .page-intro .intro-content ul li {
        margin-bottom: 1rem;
        line-height: 1.8;
    }
    .page-intro .intro-content ul li::before {
        content: '✦ ';
        color: #ffffff;
        font-size: 0.85rem;
    }
    .page-intro .intro-content b, 
    .page-intro .intro-content strong {
        color: #fff;
        font-weight: 700;
    }
    .page-intro .intro-highlight {
        color: var(--text-main);
        font-weight: 500;
    }
    .page-intro .intro-footer {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--glass-border);
        font-style: italic;
        color: rgba(184, 184, 208, 0.9);
    }

    .content-section {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    /* 轮播画廊 - 居中显示 */
    .gallery-carousel {
        position: relative;
        width: 100%;
        /* 限制最大宽度，强制只露出3张图的区域 */
        /* 计算：280*2 + 310(放大后) + 24*2 = 918px，留点余量约960px */
        max-width: 960px;
        margin: 0 auto;
        overflow: hidden;
    }
    .gallery-track {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 40px 0;
        /* v392：移除常驻 will-change:transform——它永久占用一个 GPU 合成层，即便不动也吃显存。
           轮播滑动时浏览器会在 transform 那刻自动提升；无需常驻提示。少一个后台需维持的合成层，
           缩小"锁屏挂起→解锁贴旧帧空白"的触发面。 */
        /* 
         * 居中计算（PC端）：
         * 让第2张(active)的中心对准容器中心
         * 第2张中心距离track起点 = 280px(第1张) + 24px(gap) + 140px(第2张一半) = 444px
         * 使用50%基于父容器宽度，而非50vw基于视口
         */
        padding-left: calc(50% - 444px);
        padding-right: calc(50% - 140px);
    }
    .gallery-item {
        flex: 0 0 280px;
        width: 280px;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        /* 过渡动画与JS中的track动画参数一致 */
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        opacity: 0.4;
        transform: scale(0.85);
        filter: blur(1px);
    }
    /* 中间那张通过.active类识别 */
    .gallery-item.active {
        opacity: 1;
        transform: scale(1.1);
        border-color: rgba(94, 44, 255, 0.6);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(94, 44, 255, 0.2);
        filter: blur(0);
        z-index: 2;
    }
    .gallery-item img {
        width: 100%;
        height: auto;
        display: block;
    }
    .gallery-item:hover {
        opacity: 0.8;
    }
    .gallery-item.active:hover {
        opacity: 1;
    }
    /* 轮播箭头 */
    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background: rgba(255,255,255,0.1);
        border: 1px solid var(--glass-border);
        border-radius: 50%;
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
    .carousel-btn:hover {
        background: rgba(94, 44, 255, 0.3);
        border-color: rgba(94, 44, 255, 0.5);
    }
    /* 按钮位置：active图片(280*1.1=308)两侧，留出一点间距 */
    .carousel-btn.prev { left: calc(50% - 154px - 60px); }
    .carousel-btn.next { right: calc(50% - 154px - 60px); }

    .lightbox {
        position: fixed;
        top: 0; left: 0;
        right: 0; bottom: 0;
        background: rgba(0,0,0,0.95);
        z-index: 1000;
        display: none;
        justify-content: center;
        align-items: center;
        padding: 2rem;
    }
    .lightbox.show {
        display: flex;
    }
    .lightbox img {
        max-width: 90%;
        max-height: 90vh;
        object-fit: contain;
        border-radius: 8px;
    }
    .lightbox-close {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 2.5rem;
        color: #fff;
        cursor: pointer;
        transition: transform 0.3s;
        line-height: 1;
    }
    .lightbox-close:hover {
        transform: rotate(90deg);
    }

    /* 移动端图片查看器 - 支持双指缩放和单指移动 */
    .mobile-viewer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
        touch-action: none;
        /* 防止body transform影响fixed定位 */
        transform: none !important;
    }
    .mobile-viewer.show {
        display: flex;
    }
    .mobile-viewer-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .mobile-viewer-img {
        max-width: 95%;
        max-height: 90vh;
        object-fit: contain;
        touch-action: none;
        user-select: none;
        -webkit-user-drag: none;
        transform-origin: center center;
        transition: none;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .mobile-viewer-close {
        position: absolute;
        top: env(safe-area-inset-top, 20px);
        right: 20px;
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        transition: all 0.3s;
        margin-top: 20px;
    }
    .mobile-viewer-close:hover {
        background: rgba(255, 255, 255, 0.25);
    }
    .contact-section {
        max-width: 600px;
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
    }
    .contact-buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }
    .contact-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px 32px;
        border: none;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        font-family: inherit;
    }
    .contact-btn .icon {
        width: 24px;
        height: 24px;
    }
    
    /* 【恢复】原本的多彩按钮样式 */
    .whatsapp-btn {
        background: #25D366;
        color: #fff;
    }
    .whatsapp-btn:hover {
        background: #1da851;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    }
    .wechat-btn {
        background: #07C160;
        color: #fff;
    }
    .wechat-btn:hover {
        background: #06a850;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(7, 193, 96, 0.4);
    }
    .phone-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
    }
    .phone-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }
    .email-btn {
        background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
        color: #fff;
    }
    .email-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(9, 132, 227, 0.4);
    }

    /* 微信弹窗 */
    .wechat-modal {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.8);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1001;
    }
    .wechat-modal.show {
        display: flex;
    }
    .wechat-modal-content {
        background: #fff;
        color: #333;
        padding: 30px 40px;
        border-radius: 16px;
        text-align: center;
        max-width: 320px;
    }
    .wechat-modal-content h3 {
        margin-bottom: 15px;
        font-size: 18px;
    }
    .wechat-id {
        font-size: 28px;
        font-weight: 700;
        color: #07C160;
        margin: 15px 0;
        letter-spacing: 1px;
    }
    .email-id {
        font-size: 18px;
        font-weight: 700;
        background: var(--neon-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 15px 0;
        letter-spacing: 0.5px;
    }
    .modal-btn.email-copy {
        background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
        color: #fff;
    }
    .modal-btn.email-copy:hover {
        box-shadow: 0 4px 15px rgba(9, 132, 227, 0.4);
    }
    .wechat-modal-content p {
        font-size: 13px;
        color: #666;
        margin-bottom: 20px;
    }
    .modal-btns {
        display: flex;
        gap: 10px;
    }
    .modal-btn {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }
    .modal-btn.copy {
        background: #07C160;
        color: #fff;
    }
    .modal-btn.copy:hover {
        background: #06a850;
    }
    .modal-btn.close {
        background: #eee;
        color: #666;
    }
    .modal-btn.close:hover {
        background: #ddd;
    }

    /* 更多服务页信息 */
    .more-info {
        text-align: center;
        padding: 0 2rem 2rem;
        max-width: 700px;
        margin: 0 auto;
    }
    .more-info p {
        color: var(--text-muted);
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }
    .more-contact-btn {
        background: var(--neon-gradient);
        color: #fff;
        border: none;
        padding: 0.9rem 2.5rem;
        border-radius: 6px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s;
        font-family: inherit;
    }
    .more-contact-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(94, 44, 255, 0.6);
    }

    /* Toast */
    #toast {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        background: rgba(255, 255, 255, 0.95);
        color: #333;
        padding: 14px 28px;
        border-radius: 10px;
        font-size: 14px;
        opacity: 0;
        transition: all 0.4s ease;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        z-index: 1002;
    }
    #toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    footer {
        text-align: center;
        padding: 3rem 2rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        border-top: 1px solid var(--glass-border);
        position: relative;
        overflow: hidden;
    }
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .footer-logo {
        width: 48px;
        height: 48px;
        opacity: 0.8;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        z-index: 10;
    }
    .footer-logo:hover {
        opacity: 1;
        transform: scale(1.1);
    }
    .footer-logo:active {
        transform: scale(0.95);
    }
    .footer-brand {
        font-family: 'Noto Serif SC', serif;
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-main);
        letter-spacing: 2px;
    }
    .footer-tagline {
        font-size: 0.7rem;
        color: var(--text-muted);
        letter-spacing: 3px;
        text-transform: uppercase;
    }
    
    /* 星星爆发效果 */
    .star {
        position: absolute;
        font-size: 20px;
        animation: starBurst 1.2s ease-out forwards;
        text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
        pointer-events: none;
        z-index: 99999;
    }
    .star.golden { color: #FFD700; }
    .star.white { color: #FFFFFF; }
    .star.purple { color: #A78BFA; }
    .star.cyan { color: #22D3EE; }
    .star.pink { color: #F472B6; }
    
    @keyframes starBurst {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0) rotate(0deg);
        }
        20% {
            opacity: 1;
            transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%)) scale(1.2) rotate(180deg);
        }
        100% {
            opacity: 0;
            transform: translate(calc(var(--tx) * 2.5 - 50%), calc(var(--ty) * 2.5 + 30px - 50%)) scale(0.3) rotate(360deg);
        }
    }

    /* === 修复平板竖屏/小屏笔记本的轮播居中问题 === */
    @media (min-width: 769px) and (max-width: 1080px) {
        .gallery-carousel {
            width: 100%;
            overflow: hidden;
            /* 确保平板上也能触摸滑动 */
            touch-action: pan-y;
        }

        .gallery-track {
            /* 1. 禁用PC端的 padding 居中算法 */
            padding-left: 0;
            padding-right: 0;
            
            /* 2. 启用移动端的绝对居中算法 */
            position: relative;
            left: 50%;
            width: max-content;
            
            /* 3. 重新计算偏移量 (基于PC端尺寸) */
            /* 图片宽 280px */
            /* gap 1.5rem ≈ 24px */
            /* 偏移公式 = -(第一张图宽 280 + 间距 24 + 第二张图一半 140) */
            margin-left: -444px; 
            
            /* 确保间距单位统一为 px 以配合 margin 计算 */
            gap: 24px;
        }

        .gallery-item {
            /* 保持 PC 端尺寸 */
            flex: 0 0 280px;
            width: 280px;
        }
    }

    /* ==================== 手机端响应式 ==================== */
    @media (max-width: 768px) {
        nav {
            padding: 1rem 1.2rem;
        }
        .logo-icon {
            width: 30px;
            height: 30px;
        }
        .logo-text {
            font-size: 1.1rem;
        }
        .nav-right {
            gap: 0.8rem;
        }
        .lang-switcher {
            display: none;
        }
        .lang-globe {
            display: block;
        }
        .hamburger {
            display: flex;
        }
        .nav-center {
            position: fixed;
            top: 60px;
            left: 0; right: 0;
            background: rgba(5, 5, 9, 0.98);
            /* v382: 同上，0.98 底色下 blur 不可见，删掉省 GPU */
            flex-direction: column;
            padding: 1.5rem;
            gap: 0;
            transform: translateY(-100%);
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
            border-bottom: 1px solid var(--glass-border);
        }
        .nav-center.show {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .nav-center a {
            padding: 1rem 0;
            font-size: 1rem;
            border-bottom: 1px solid var(--glass-border);
        }
        .nav-center a:last-child {
            border-bottom: none;
        }

        .hero {
            padding: 1.5rem;
            min-height: auto;
        }
        .hero-inner {
            grid-template-columns: 1fr;
            gap: 2.5rem;
        }
        .hero-content {
            text-align: center;
        }
        .hero-content h1 {
            font-size: 2rem;
        }
        .hero-content .tagline {
            font-size: 0.7rem;
            letter-spacing: 2px;
        }
        .hero-content p {
            font-size: 0.9rem;
        }
        .hero-buttons {
            justify-content: center;
            flex-wrap: wrap;
        }
        .btn {
            padding: 0.8rem 1.5rem;
            font-size: 0.8rem;
        }
        .showcase-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.8rem;
        }

        .page-header {
            padding: 2.5rem 1.5rem 2rem;
        }
        .page-header h1 {
            font-size: 1.8rem;
        }
        .page-header p {
            font-size: 0.8rem;
        }

        .content-section {
            padding: 1rem;
        }
        
        /* 修复1：轮播容器强制隐藏溢出，防止页面被撑大出现黑边 */
        .gallery-carousel {
            /* 抵消父级 padding: 1rem，让轮播图宽度占满全屏 */
            width: calc(100% + 2rem); 
            margin-left: -1rem; 
            
            overflow: hidden; /* 【关键】必须隐藏溢出 */
            position: relative;
            touch-action: pan-y; /* 允许垂直滚动，优化左右滑动体验 */
        }

        .gallery-track {
            display: flex;
            align-items: center;
            gap: 16px; /* 统一使用 px，避免 rem 计算误差 */
            
            /* 居中计算逻辑 (屏幕宽度 < 768px 但 > 480px 时) */
            /* 图片宽 180px + gap 16px = 196px */
            /* 中心偏移 = 180(前一张) + 16(gap) + 90(当前张一半) = 286px */
            padding-left: 0;
            padding-right: 0;
            position: relative;
            left: 50%;
            margin-left: -286px; 
            width: max-content; /* 确保轨道宽度包含所有图片 */
        }

        .gallery-item {
            flex: 0 0 180px;
            width: 180px;
            /* 修复层级问题，确保 active 图片能盖住旁边的 */
            position: relative; 
        }

        .gallery-item.active {
            transform: scale(1.1);
            z-index: 10; /* 提高当前图片层级 */
        }
        
        .carousel-btn {
            width: 36px; height: 36px; font-size: 1.2rem;
            /* 确保按钮在最上层 */
            z-index: 20; 
        }
        .carousel-btn.prev { left: 15px; }
        .carousel-btn.next { right: 15px; }

        .contact-section {
            padding: 1.5rem;
        }
        .contact-btn {
            padding: 14px 24px;
            font-size: 0.9rem;
        }

        .more-info {
            padding: 0 1.5rem 1.5rem;
        }
        .more-info p {
            font-size: 0.9rem;
        }

        .lightbox {
            padding: 1rem;
        }
        .lightbox-close {
            top: 15px;
            right: 20px;
            font-size: 2rem;
        }

        footer {
            padding: 2rem 1.5rem;
        }
        .footer-logo {
            width: 40px;
            height: 40px;
        }
        .footer-brand {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 480px) {
        .hero-content h1 {
            font-size: 1.6rem;
        }
        .showcase-grid {
            gap: 0.6rem;
        }
        
        /* 小屏核心修复 */
        .gallery-track {
            gap: 12px; /* 缩小间距 */
            
            /* 小屏居中计算逻辑： */
            /* 图片宽 150px + gap 12px = 162px */
            /* 中心偏移 = 150(前一张) + 12(gap) + 75(当前张一半) = 237px */
            margin-left: -237px; 
        }
        
        .gallery-item {
            width: 150px;
            flex: 0 0 150px;
        }
        
        .carousel-btn { width: 30px; height: 30px; font-size: 1rem; }
        .carousel-btn.prev { left: 8px; }
        .carousel-btn.next { right: 8px; }
        .contact-btn {
            padding: 12px 20px;
            font-size: 0.85rem;
        }
    }