/* ==================== */
/* CSS 变量 - 主题系统 */
/* ==================== */
:root {
    /* 暗色主题（默认） */
    --primary: #0b0b10;
    --secondary: #c6f432;
    --accent: #D4A656;
    --text: #ffffff;
    --text-secondary: rgba(255,255,255,0.6);
    --card-bg: rgba(255,255,255,0.04);
    --card-border: rgba(255,255,255,0.1);
    --surface-dark: #0D0F0C;
    
    /* 主题色渐变 */
    --secondary-light-grad: #e0ff70;
    --secondary-dark-grad: #9ccc1f;
    --secondary-light-grad2: #f0ff9e;
    --secondary-dark-grad2: #88b818;
    
    /* 主题色透明度变体 */
    --secondary-2: rgba(200,255,62,0.02);
    --secondary-5: rgba(200,255,62,0.05);
    --secondary-8: rgba(200,255,62,0.08);
    --secondary-10: rgba(200,255,62,0.1);
    --secondary-12: rgba(200,255,62,0.12);
    --secondary-14: rgba(200,255,62,0.14);
    --secondary-15: rgba(200,255,62,0.15);
    --secondary-20: rgba(200,255,62,0.2);
    --secondary-25: rgba(200,255,62,0.25);
    --secondary-30: rgba(200,255,62,0.3);
    --secondary-35: rgba(200,255,62,0.35);
    --secondary-50: rgba(200,255,62,0.5);
    
    /* 发光效果 */
    --glow: rgba(200,255,62,0.12);
    
    /* 酸性绿变体 */
    --acid-3: rgba(200,255,62,0.03);
    --acid-10: rgba(200,255,62,0.1);
    --acid-20: rgba(200,255,62,0.2);
    --acid-40: rgba(200,255,62,0.4);
}



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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--primary);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

::selection {
    background: var(--secondary);
    color: #000000;
}

::-webkit-selection {
    background: var(--secondary);
    color: #000000;
}

::-moz-selection {
    background: var(--secondary);
    color: #000000;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Navigation - Liquid Glass */
.nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    width: min(1300px, calc(100% - 32px));
    height: 62px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 24px;
    gap: 12px;
    background: transparent;
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(255,255,255,0.06),
        0 8px 28px rgba(0,0,0,0.22);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.nav.scrolled {
    background: rgba(11, 11, 16, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(255,255,255,0.08),
        0 14px 42px rgba(0,0,0,0.3),
        0 0 0 1px var(--secondary-15);
    border-color: var(--secondary-25);
}

/* ==================== */
/* 导航外框自动扫掠高光（玻璃折射感，不跟随鼠标） */
/* 用 @property 注册可动画角度，conic-gradient 加入冷/暖色散模拟棱镜分光 */
/* ==================== */
@property --nav-shine-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    background: conic-gradient(
        from var(--nav-shine-angle, 0deg),
        transparent 0deg,
        rgba(120, 200, 255, 0.5) 8deg,
        rgba(255, 255, 255, 0.95) 16deg,
        rgba(255, 200, 150, 0.45) 24deg,
        transparent 36deg,
        transparent 164deg,
        rgba(120, 200, 255, 0.3) 176deg,
        rgba(255, 255, 255, 0.5) 184deg,
        rgba(255, 200, 150, 0.25) 192deg,
        transparent 204deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: nav-shine-sweep 9s linear infinite;
}

@supports not (mask-composite: exclude) {
    .nav::before {
        display: none;
    }
}

@keyframes nav-shine-sweep {
    from { --nav-shine-angle: 0deg; }
    to { --nav-shine-angle: 360deg; }
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.logo-img {
    height: 32px;
    width: auto;
    display: block;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.logo:hover .logo-img {
    transform: rotate(-8deg) scale(1.05);
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links a {
    position: relative;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 9px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 14px rgba(0,0,0,0.12);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.14s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;
    overflow: hidden;
}

.nav-links a:hover {
    color: var(--secondary);
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.05);
    box-shadow:
        0 0 24px var(--secondary-12),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.nav-links a.active {
    color: var(--secondary);
    border-color: var(--secondary);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 1px var(--secondary-20);
}

.nav-links a:active {
    transform: scale(0.97);
}

/* Nav Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-cta {
    position: relative;
    overflow: hidden;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.14);
    background: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 14px rgba(0,0,0,0.12);
    transition: transform 0.16s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-cta:hover {
    color: var(--secondary);
    border-color: var(--secondary);
    background: rgba(255,255,255,0.05);
    box-shadow:
        0 0 0 1px var(--secondary-25),
        0 0 24px var(--secondary-12),
        inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

.nav-cta:active {
    transform: scale(0.97);
}

.nav-cta span {
    font-size: 14px;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}

.nav-cta:hover span {
    transform: translateX(3px);
}

/* Burger（移动端菜单按钮：视觉语言与 PC 端 nav-cta / nav-links 保持一致） */
.burger {
    display: none;
    width: 44px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 14px rgba(0,0,0,0.12);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    transition: background 0.22s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.16s cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
}

.burger:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--secondary);
    box-shadow:
        0 0 0 1px var(--secondary-25),
        0 0 24px var(--secondary-12),
        inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

.burger:active {
    transform: scale(0.97);
}

.burger.open {
    border-color: var(--secondary-25);
    box-shadow:
        0 0 0 1px var(--secondary-20),
        0 0 24px var(--secondary-12),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.burger i {
    width: 16px;
    height: 1.8px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, background 0.25s ease;
}

.burger:hover i,
.burger.open i {
    background: var(--secondary);
}

.burger.open i:nth-child(1) {
    transform: translateY(5.8px) rotate(45deg);
}

.burger.open i:nth-child(2) {
    opacity: 0;
}

.burger.open i:nth-child(3) {
    transform: translateY(-5.8px) rotate(-45deg);
}

/* Mobile Menu */
.mmenu {
    position: fixed;
    inset: 0;
    z-index: 945;
    background: rgba(19,21,18,0.85);
    backdrop-filter: blur(30px) saturate(1.6);
    -webkit-backdrop-filter: blur(30px) saturate(1.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 34px;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.mmenu.open {
    opacity: 1;
    pointer-events: auto;
}

.mmenu a {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    gap: 16px;
    align-items: baseline;
    color: var(--text);
}

.mmenu a span {
    font-family: var(--font-mono, 'SF Mono', monospace);
    font-size: 12px;
    color: var(--secondary);
}

.mmenu a .mm-en {
    font-style: normal;
    font-size: 26px;
    font-weight: 100;
    letter-spacing: 0.04em;
    color: var(--secondary);
}

.footer-brand-link {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.footer-brand-link:hover {
    opacity: 0.8;
}

.footer-brand-logo {
    height: 64px;
    width: auto;
    flex-shrink: 0;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: safe center;
    position: relative;
    padding: 90px 24px 0;
    overflow: hidden;
}

/* 安全区域：整体内容最大 1400px 居中，左文右图合并为一张卡片 */
.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 96px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
    overflow: hidden;
    border-radius: 32px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid #ffffff1c;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(255,255,255,0.06),
        0 8px 28px rgba(0,0,0,0.22);
    transition: box-shadow 0.1s ease, border-color 0.35s ease;
}

/* hero-container 卡片入场动画：首屏 fullpage.js 给 .hero 加 .fp-active 时触发，
   比内部文字（0.8s + 错峰）快一点点，形成"卡片先来、文字跟上"的层级效果；
   优先级高于全局 .fp-active [data-animate]，避免被它直接显示而跳过动画 */
.hero-container[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.1s ease, border-color 0.35s ease;
}
.hero-container[data-animate].animate-in,
.fp-active .hero-container[data-animate] {
    opacity: 1;
    transform: translateY(0);
}

.hero-visual {
    position: relative;
    z-index: 1;
    height: 100%;
}

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

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-grid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    mask-image: radial-gradient(ellipse 100% 90% at 50% 45%, #000 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, #000 40%, transparent 85%);
}

.hero-glow {
    position: absolute;
    width: 640px;
    height: 640px;
    right: -160px;
    top: -160px;
    background: radial-gradient(circle, var(--secondary-14), transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 56px 64px 72px;
}

/* ==================== */
/* Hero 卡片自动扫掠高光边框（与导航同款液态玻璃棱镜分光） */
/* ==================== */
@property --hero-shine-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.hero-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    background: conic-gradient(
        from var(--hero-shine-angle, 0deg),
        transparent 0deg,
        rgba(120, 200, 255, 0.5) 8deg,
        rgba(255, 255, 255, 0.95) 16deg,
        rgba(255, 200, 150, 0.45) 24deg,
        transparent 36deg,
        transparent 164deg,
        rgba(120, 200, 255, 0.3) 176deg,
        rgba(255, 255, 255, 0.5) 184deg,
        rgba(255, 200, 150, 0.25) 192deg,
        transparent 204deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: hero-shine-sweep 11s linear infinite;
}

@supports not (mask-composite: exclude) {
    .hero-container::before {
        display: none;
    }
}

@keyframes hero-shine-sweep {
    from { --hero-shine-angle: 0deg; }
    to { --hero-shine-angle: 360deg; }
}

/* 保证卡片内容浮在高光边框之上 */
.hero-container > * {
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    font-size: 13px;
    letter-spacing: 0.42em;
    color: var(--secondary);
    margin-bottom: 28px;
    text-transform: uppercase;
}

.hero-title {
    font-size: clamp(48px, 8vw, 112px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
}

.title-line {
    display: block;
    white-space: nowrap;
}

.title-line.accent {
    color: var(--secondary);
}

/* 标题逐字滑动动画（参考 MOTION STUDIO 的 split-text 效果） */
.hero-title .char {
    display: inline-block;
    will-change: transform, opacity;
    transform-origin: 50% 100%;
}

.hero-desc {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.9;
    margin-bottom: 2.5rem;
    max-width: 560px;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-primary {
    background: var(--secondary);
    color: var(--surface-dark);
    border: 2px solid var(--secondary);
}

.btn-primary:hover {
    background: transparent;
    color: var(--secondary);
    transform: translateY(-3px);
    box-shadow:
        0 15px 30px var(--secondary-30),
        0 0 24px var(--secondary-12),
        inset 0 0 20px var(--secondary-8);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 2px solid rgba(255,255,255,0.3);
}

.btn-outline:hover {
    border-color: var(--text);
    background: rgba(255,255,255,0.05);
    transform: translateY(-3px);
    box-shadow:
        0 0 24px var(--secondary-12),
        inset 0 0 20px var(--secondary-8);
}

/* 首页 hero 区域：禁用按钮鼠标悬停视觉（变色/位移/发光），保持静态外观不变 */
.hero .btn-primary:hover,
.hero .btn-primary:active {
    background: var(--secondary);
    color: var(--surface-dark);
    border: 2px solid var(--secondary);
    transform: none;
    box-shadow: none;
}
.hero .btn-outline:hover,
.hero .btn-outline:active {
    background: transparent;
    color: var(--text);
    border: 2px solid rgba(255,255,255,0.3);
    transform: none;
    box-shadow: none;
}

.btn-lg {
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
}

.hero-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
}

.hero-brand .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 10px var(--secondary);
    flex-shrink: 0;
}

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

/* ==================== */
/* 走马灯（关键词横幅） */
/* ==================== */
.hero .marquee {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100vw;
    padding: 18px 0;
    overflow: hidden;
    z-index: 3;
    background: var(--surface-dark);
    border-top: 1px solid var(--secondary-15);
}

.marquee-track {
    display: flex;
    gap: 56px;
    width: max-content;
    will-change: transform;
}

.marquee-track span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 56px;
}

.marquee-track span::after {
    content: "✦";
    color: var(--secondary);
    font-size: 0.7em;
}

/* 滚动：整页切换的平滑缓动由 js/fullpage.js 接管，这里不启用 CSS smooth（避免冲突） */
html {
    scroll-behavior: auto;
}

/* Section Styles */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 28px;
}

.section-tag {
    font-size: 0.8rem;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 14px;
    position: relative;
    display: inline-block;
}

/* 跑马灯线条：暗色底轨 + 酸绿光条从中滑过，起止都在屏外，循环时从左边滑出（不闪现） */
.section-tag::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 44px;
    height: 1.5px;
    border-radius: 1px;
    background-color: rgba(255, 255, 255, 0.18);   /* 底轨 */
    background-image: linear-gradient(90deg, transparent 0%, var(--secondary) 25%, var(--secondary) 75%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 40% 100%;                      /* 光条占线条长度的 40% */
    animation: section-beam 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes section-beam {
    0%   { background-position: -70% 0; }   /* 光条完全在左边屏外，向左滑入 */
    55%  { background-position: 170% 0; }   /* 光条完全滑到右边屏外 */
    100% { background-position: 170% 0; }   /* 停在屏外，循环回起点（屏外→屏外，无闪现） */
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
}

.head-title {
    min-width: 0;
}

.head-title .section-title {
    margin: 0;
}

.section-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 360px;
    text-align: right;
    flex-shrink: 0;
}

.view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--secondary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.view-all:hover {
    gap: 0.8rem;
}

.view-all-wrap {
    text-align: center;
    margin-top: 2.5rem;
}

/* Services Section */
.services {
    padding: 4rem 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
}

/* 通用 services-grid（首页/关于页共用，自适应排列） */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* 首页 services 板块：PC 端 1 行 4 列，中屏/手机端 2 行 2 列 */
.services .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .services .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* 通用 service-card 基础（首页/关于页共用） */
.service-card {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 1.75rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--secondary-25);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px var(--secondary-5);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--secondary-10);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    background: var(--secondary);
    color: #000;
    transform: scale(1.1) rotate(5deg);
}

.service-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.service-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* 首页 services 图文卡片（仅首页生效，不影响关于/联系页）
   3D 翻转结构：卡片只做透视容器（无背景边框），正/背两面的外观由 .flip-front / .flip-back 自带，
   hover 时内层 .flip-inner 旋转 180° 露出背面服务标签 */
.services .service-card {
    padding: 0;
    position: relative;
    background: transparent;
    border: none;
    overflow: visible;
    perspective: 1200px;
    /* 入场淡入由下方 @keyframes 独立实现，不受此 transition 影响 */
    transition: opacity 0.25s ease;
}

/* 覆盖通用 .service-card:hover 的上浮/外阴影：翻转时卡片整体保持不动，只转内层 */
.services .service-card:hover {
    transform: none;
    box-shadow: none;
}

.services .service-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.services .flip-inner {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.services .flip-front {
    position: relative;
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.services .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* 翻转时正/背两面同步点亮边框和外发光 */
.services .service-card:hover .flip-front,
.services .service-card:hover .flip-back {
    border-color: var(--secondary-25);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px var(--secondary-5);
}

/* 背面：标题置顶 + 服务标签胶囊流式排列 */
.services .flip-back-title {
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--card-border);
}

.services .flip-back-title i {
    color: var(--secondary);
    font-size: 1.3rem;
    opacity: 0.9;
}

.services .service-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.6rem;
    overflow: hidden;
}

.services .service-items li {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--secondary-10);
    color: var(--secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* 触屏设备（手机/平板）没有 hover：改为点击翻转（.flipped 由 JS 点击切换） */
@media (hover: none) {
    .services .service-card.flipped .flip-inner {
        transform: rotateY(180deg);
    }
}

/* 中小屏（平板/手机 2 列较窄）：背面标题与标签胶囊缩小、长标签允许换行，避免内容显示不完全 */
@media (max-width: 1024px) {
    .services .flip-back {
        padding: 1rem 0.9rem;
        gap: 0.6rem;
    }
    .services .flip-back-title {
        font-size: 1.1rem;
        gap: 0.45rem;
        padding-bottom: 0.5rem;
    }
    .services .flip-back-title i {
        font-size: 1rem;
    }
    .services .service-items {
        gap: 0.4rem;
    }
    .services .service-items li {
        font-size: 0.78rem;
        padding: 0.28rem 0.6rem;
        line-height: 1.35;
        white-space: normal;
    }
}

/* 首页服务卡片入场动画：用 @keyframes 播放（不占用 transition，避免影响 hover 回落速度，效果与案例卡片一致） */
@keyframes serviceCardIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.services .service-card[data-animate].animate-in {
    animation: serviceCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.services .service-image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.services .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.services .service-card:hover .service-image img {
    transform: scale(1.06);
}

.services .service-body {
    flex: 1;
    padding: 1.25rem 1.15rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* 服务卡片文字与「用创意为品牌赋能」卡片一致大小 */
.services .service-body h3 {
    font-size: 1.8rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.services .service-body h3 i {
    color: var(--secondary);
    font-size: 1.5rem;
    opacity: 0.9;
}

.services .service-body p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* Featured Works */
.featured-works {
    padding: 8rem 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
}

/* 强制统一板块容器宽度 */
.featured-works .container,
.brand-story .container,
.process .container,
.blog-section .container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .works-grid {
        grid-template-columns: repeat(2, 4fr);
        gap: 1rem;
    }
}

/* Brand Story Section - 与 .featured-works / .process 实现一致，container/header/desc 走全局 */
.brand-story {
    padding: 8rem 0;
    background: var(--secondary-2);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
}

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

.story-card {
    padding: 2.8rem 2.4rem;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
    position: relative;
    overflow: hidden;
}

.story-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, transparent 100%);
    pointer-events: none;
}

.story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.25);
    border-color: var(--secondary-25);
}

.story-phon {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--secondary);
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.story-phon small {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    margin-top: 0.2rem;
}

.story-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
}

.story-card p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 340px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .story-card {
        padding: 2rem 1.5rem;
    }
}

/* Process Section */
.process {
    padding: 3rem 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    /* .container 已由下方统一规则强制 width:100% + max-width，flex 不会压缩宽度；
       垂直居中保证一屏内完整显示且不被固定导航遮挡 */
}

/* 一屏内完整显示：本板块标题区间距与字号（全局 section-header 为 3rem 间距） */
.process .section-header {
    margin-bottom: 1.8rem;
    gap: 20px;
}
.process .section-tag {
    font-size: 0.75rem;
    letter-spacing: 2.5px;
    margin-bottom: 10px;
}
.process .section-tag::before {
    bottom: -5px;
    width: 38px;
}
.process .section-title {
    font-size: 2.15rem;
}
.process .section-desc {
    font-size: 1rem;
    max-width: 460px;
}

/* 4 步玻璃卡片流：4 列等高玻璃卡片（1→2→3→4），单向顺序由 01~04 序号 + 左→右排布承担 */
.process-steps {
    --node: 64px;
    --col-gap: 2rem;
    position: relative;
    /* 去掉原 max-width:1180px，改为与 .works-grid 等板块一致满宽，消除左右留白过大、卡片偏窄的问题 */
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "s1 s2 s3 s4";
    column-gap: var(--col-gap);
}

/* 玻璃卡片：渐变半透明背景 + 细边框 + 大圆角，等高由 grid 单行 stretch + min-height 保证 */
.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 340px;
    padding: 2.4rem 1.9rem;
    border-radius: 20px;
    background: linear-gradient(160deg, var(--secondary-8), rgba(198,244,50,0.015) 75%);
    border: 1px solid var(--secondary-15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.process-step:nth-child(1) { grid-area: s1; }
.process-step:nth-child(2) { grid-area: s2; }
.process-step:nth-child(3) { grid-area: s3; }
.process-step:nth-child(4) { grid-area: s4; }

/* 顶部单向渐变细线已移除：玻璃卡片自带边框/背景，细线穿行会割裂卡片观感 */
/* 顺序单向感由 01~04 序号 + 卡片从左到右排布承担 */

/* 大号圆形图标节点：玻璃卡片内承载步骤图标 */
.step-node {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--node);
    height: var(--node);
    border-radius: 50%;
    color: var(--secondary);
    background: linear-gradient(160deg, var(--secondary-20), rgba(198,244,50,0.04));
    border: 1px solid var(--secondary-30);
    box-shadow: 0 0 0 6px rgba(200,255,62,0.05), 0 0 18px rgba(200,255,62,0.16),
                inset 0 1px 0 rgba(255,255,255,0.12);
    transition: box-shadow 0.2s ease;
}
.step-node i {
    font-size: 1.5rem;
    line-height: 1;
}

/* hover：去掉上浮位移，仅保留边框/背景/辉光的颜色反馈 */
.process-steps .process-step:hover {
    border-color: var(--secondary-35);
    background: linear-gradient(160deg, var(--secondary-12), rgba(198,244,50,0.03) 78%);
    box-shadow: 0 20px 46px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}
.process-step:hover .step-node {
    box-shadow: 0 0 0 8px rgba(200,255,62,0.10), 0 0 30px var(--glow),
                inset 0 1px 0 rgba(255,255,255,0.14);
}

/* 步骤正文：卡片内内容整体垂直居中，序号次要 → 标题主角 → 描述次级 */
.step-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5rem;
}

.step-index {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--secondary);
    opacity: 0.8;
    margin-bottom: 0.55rem;
}

.step-body h3 {
    font-size: 1.36rem;
    margin-bottom: 0.6rem;
    letter-spacing: 0.02em;
}

.step-body p {
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.7;
    max-width: 280px;
    margin: 0 auto;
}

/* 流程出口 CTA：居中主按钮引导下一动作 */
.process-cta {
    margin-top: 2.3rem;
    text-align: center;
    position: relative;
    z-index: 1;
}
.process-cta .btn {
    display: inline-flex;
    padding: 1.05rem 2.6rem;
    font-size: 1.02rem;
}

/* 合作流程：去掉入场动画，卡片直接静态显示（覆盖全局 [data-animate] 的淡入+上移，不再依次浮现） */
.process .process-steps .process-step[data-animate],
.process .process-cta[data-animate] {
    opacity: 1;
    transform: none;
}

/* 移动端：降为纵向单列时间轴，左侧圆点+竖线，节点圆点承载图标 */
@media (max-width: 768px) {
    .process-steps {
        --node: 44px;
        display: flex;
        flex-direction: column;
        row-gap: 1.25rem;
        max-width: 420px;
        /* 竖线改为容器背景绘制：不依赖伪元素拉伸，避免绝对定位下 height 塌陷为 0 */
        background-image: linear-gradient(180deg, transparent, var(--secondary) 12%, var(--secondary) 88%, transparent);
        background-repeat: no-repeat;
        background-position: 22px 22px;
        background-size: 3px calc(100% - 44px);
    }
    .process-step {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1.1rem;
        text-align: left;
        padding: 0;
        min-height: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
    }
    /* 桌面玻璃卡片 hover 效果在移动端重置，避免触控残留上浮/辉光 */
    /* 同提特异性至 (0,3,0) 并位于桌面 hover 规则之后，确保移动端重置仍生效 */
    .process-steps .process-step:hover {
        transform: none;
        border-color: transparent;
        background: none;
        box-shadow: none;
    }
    .process-step .step-node {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        font-size: 1rem;
        box-shadow: 0 0 0 4px rgba(200,255,62,0.04), 0 0 12px rgba(200,255,62,0.10),
                    inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .process-step .step-node i {
        font-size: 1.05rem;
    }
    .process-step .step-body {
        margin-top: 0.1rem;
        padding-bottom: 0.3rem;
        text-align: left;
        flex: 1;
        display: block;
        align-items: initial;
    }
    .step-index {
        margin-bottom: 0.5rem;
    }
    .step-body h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    .step-body p {
        font-size: 0.88rem;
        line-height: 1.6;
        max-width: none;
        margin: 0;
        min-height: 0;
    }
    .process-cta {
        margin-top: 1.6rem;
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    .process-cta .btn {
        width: 100%;
        justify-content: center;
        padding: 0.95rem 1.6rem;
    }
}

/* Footer - Liquid Glass on Dark */
.footer {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 2.5rem;

    border-top: 1px solid var(--secondary-15);
}

/* 页脚极光背景层：内容浮于其上 */
.footer > .container {
    position: relative;
    z-index: 1;
}

.footer > .container {
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.footer-qrcode {
    text-align: center;
}

.footer-qrcode h4 {
    margin-bottom: 1rem;
    color: var(--text);
}

.footer-qrcode .qrcode-img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.footer-qrcode p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* 顶部品牌区：logo + 标语，横向铺满整个页脚顶部 */
.footer-head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid var(--secondary-12);
}

.footer-tagline {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.footer-tagline span {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    margin-left: 0.5rem;
}

.footer-contact h4,
.footer-form h4,
.footer-qrcode h4 {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* h4 左侧酸绿小圆点，呼应全站点缀 */
.footer-contact h4::before,
.footer-form h4::before,
.footer-qrcode h4::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 10px var(--secondary);
    flex-shrink: 0;
}

.footer-contact ul li {
    margin-bottom: 0.7rem;
    break-inside: avoid;
}

.footer-contact li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.footer-contact li:hover {
    color: var(--text);
    border-color: var(--secondary-20);
    background: rgba(255,255,255,0.04);
}

.footer-contact li i {
    color: var(--secondary);
    width: 20px;
    flex-shrink: 0;
}

/* 版权信息：放在左列联系方式下方，用分割线隔开 */
.footer-copyright {
    border-top: 1px solid var(--card-border);
    padding-top: 1.4rem;
}

.footer-copyright p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ===== 页脚 v2：快速咨询表单 + 社媒描边按钮 ===== */
.footer-v2 .footer-grid {
    grid-template-columns: 1.55fr 1.9fr 1.55fr;
}

/* 三列等高；左列联系方式/社媒上下分布，右列二维码垂直居中 */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-col-left {
    justify-content: flex-start;
}

.footer-col-right {
    justify-content: center;
}

.footer-form {
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 1.6rem;
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 20px 48px rgba(0,0,0,0.25);
    height: 100%;
}

.footer-form form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.footer-form input,
.footer-form textarea {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-form input::placeholder,
.footer-form textarea::placeholder {
    color: var(--text-secondary);
}

.footer-form input:focus,
.footer-form textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px var(--secondary-10), 0 0 18px var(--secondary-10);
}

.footer-form textarea {
    min-height: 66px;
    resize: vertical;
}

.footer-form .footer-form-btn {
    padding: 0.55rem 1.4rem;
    font-size: 0.85rem;
    align-self: flex-start;
    gap: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--secondary-light-grad2), var(--secondary-dark-grad2));
    border: none;
    color: #000;
    font-weight: 600;
    box-shadow: 0 8px 24px var(--secondary-20);
    transition: transform 0.14s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
}

.footer-form .footer-form-btn:hover {
    box-shadow: 0 10px 30px var(--secondary-30);
    transform: translateY(-1px);
}

.footer-form .footer-form-btn:active {
    transform: scale(0.97);
}

.footer-form-success {
    color: var(--secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 0.6rem 0;
}

.footer-form-error {
    color: #ff6b6b;
    font-size: 0.8rem;
    margin: 0;
}

/* 右列：两个二维码合并为一张卡片 */
.footer-qrcode-card {
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 1.5rem;
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 20px 48px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.footer-v2 .footer-qrcodes {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.footer-v2 .footer-qrcode {
    text-align: center;
    flex: 1;
    max-width: 140px;
}

.footer-v2 .footer-qrcode h4 {
    font-size: 0.82rem;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.footer-v2 .footer-qrcode .qrcode-img {
    width: 130px;
    height: 130px;
}

/* 左列社媒：标题在上，描边圆按钮一行排列 */
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
}

.social-rings {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.social-ring {
    width: 48px;
    height: 48px;
    border: 1px solid var(--secondary-15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.social-ring:hover {
    border-color: var(--secondary);
    color: var(--secondary);
    box-shadow: 0 0 20px var(--secondary-12);
    transform: translateY(-3px);
}

/* ===== 首页满屏页脚（复用公共 footer-v2 结构 + 全屏修饰） ===== */

/* 首页页脚极光单独收敛：只覆盖页脚上部，避免满屏光带太抢眼 */
.footer-fullscreen > .page-aurora {
    top: 0;
    bottom: auto;
    height: 48%;
    opacity: 0.65;
}

.footer-fullscreen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid var(--card-border);
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 3.5rem;
}
.footer-fullscreen .container {
    position: relative;
    z-index: 1;
    width: 100%;
}
.footer-fullscreen .footer-head {
    text-align: center;
    justify-content: center;
    padding: 0 0 2.5rem;
}
.footer-fullscreen .footer-grid {
    margin-left: auto;
    margin-right: auto;
}
.footer-fullscreen .footer-bottom {
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 1.4rem;
    text-align: center;
}

/* 较矮视口（<800px 高）压缩满屏页脚内容，确保整屏内容不溢出被裁 */
@media (max-height: 800px) {
    .footer-fullscreen {
        min-height: 100vh;
        padding: 3.5rem 0 2.5rem;
    }
    .footer-fullscreen .footer-head {
        padding-bottom: 1.8rem;
    }
    .footer-fullscreen .footer-grid {
        gap: 1.4rem;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nav {
        top: 12px;
        height: 52px;
        padding: 0 6px 0 16px;
        width: calc(100% - 24px);
    }

    .nav-links {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .burger {
        display: flex;
    }

    .logo-img {
        height: 26px;
    }
}

@media (max-width: 1080px) {
    .hero-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .hero-visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 100px 20px 0;
        min-height: 100vh;
    }

    .hero-inner {
        text-align: center;
        padding: 40px 26px;
    }

    .hero-eyebrow {
        font-size: 11px;
        margin-bottom: 20px;
    }

    .hero-title {
        font-size: clamp(36px, 10vw, 56px);
        margin-bottom: 20px;
    }

    .hero-desc {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-brand {
        font-size: 11px;
        letter-spacing: 0.25em;
    }

    .hero .marquee {
        padding: 14px 0;
    }

    .marquee-track {
        gap: 32px;
    }

    .marquee-track span {
        font-size: clamp(14px, 3.2vw, 20px);
        gap: 32px;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-desc {
        text-align: left;
        max-width: 100%;
    }

    .section-header {
        gap: 14px;
    }

    .footer-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
        margin-bottom: 2.2rem;
        padding-bottom: 2rem;
    }

    .footer {
        padding: 3.5rem 0 2rem;
    }

    /* 必须用 .footer-v2 .footer-grid 覆盖桌面三列（特异性需≥桌面定义），否则移动端仍被挤压成三列 */
    .footer-v2 .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* 首页满屏页脚：移动端不强制满屏，自然高度承接 */
    .footer-fullscreen {
        min-height: auto;
        padding: 3.5rem 0 2.5rem;
    }
    .footer-fullscreen .footer-head {
        padding-bottom: 2rem;
    }

    .footer-v2 .footer-grid > div + div {
        border-top: 1px solid var(--card-border);
        padding-top: 2rem;
    }

    /* 左列内部不再重复加分隔线：社媒并入联系方式一体，版权保留分割线 */
    .footer-col-left {
        gap: 1.2rem;
    }

    .footer-v2 .footer-qrcodes {
        justify-content: center;
        gap: 1.2rem;
    }

    .footer-v2 .footer-qrcode .qrcode-img {
        width: 108px;
        height: 108px;
    }

    .footer-copyright {
        padding-top: 1.4rem;
    }

    .social-ring {
        width: 38px;
        height: 38px;
        font-size: 0.78rem;
    }

    .social-rings {
        gap: 0.65rem;
    }

    /* 表单卡片：去等高撑高、收紧内边距，标题与输入框间距协调 */
    .footer-form {
        height: auto;
        padding: 1.15rem;
    }

    .footer-form h4 {
        margin-bottom: 1.25rem;
    }

    .footer-form textarea {
        min-height: 72px;
    }

    /* 按钮：全宽居中，避免贴边裁切 */
    .footer-form .footer-form-btn {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    /* 右列二维码卡片：收紧内边距、取消等高撑高 */
    .footer-qrcode-card {
        padding: 1.15rem;
        height: auto;
    }

    /* 顶部品牌区与标语：小屏缩小字号 */
    .footer-tagline {
        font-size: 1.15rem;
    }

    .footer-tagline span {
        font-size: 0.85rem;
    }
}

/* ==================== */
/* 作品集页面样式 */
/* ==================== */
.page-header {
    position: relative;
    overflow: hidden;
    padding: 140px 40px 60px;
    text-align: center;

}

/* Aurora 极光背景层：absolute 铺满 header，置于内容之下 */
.page-aurora {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* 首页 Hero 极光：往上收敛，仅覆盖上部并向下渐隐，避免与底部网格/内容叠满 */
.hero .page-aurora {
    top: 0;
    bottom: auto;
    height: 80%;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.page-aurora-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* 让 header 内文字浮在极光之上 */
.page-header > h1,
.page-header > p,
.page-header > .container {
    position: relative;
    z-index: 1;
}

.page-header h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.portfolio-section {
    padding: 4rem 0;
}

.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.blog-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.search-box input {
    width: 100%;
    padding: 0.8rem 2.5rem 0.8rem 2.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 50px;
    color: var(--text);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.search-box input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px var(--acid-10);
}

.search-box input::placeholder {
    color: var(--text-secondary);
}

.search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.search-box .search-clear {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.search-box .search-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.filter-btn {
    position: relative;
    overflow: hidden;
    padding: 0.8rem 1.8rem;
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary);
    box-shadow: 0 0 20px var(--secondary-12);
}

.filter-btn.active {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #000;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.portfolio-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* 固定整张卡片总高，hover 时图片才能把空间让给下方灰色信息区、实现“向上缩小” */
    height: clamp(340px, 38vw, 440px);
}

/* 触屏设备（手机/平板）没有鼠标，hover 效果一律不生效 */
@media (hover: hover) {
    .portfolio-item:hover {
        transform: translateY(-10px);
        border-color: var(--secondary-20);
        box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 40px var(--secondary-5);
    }
}

/* 图片默认撑满卡片剩余空间（更大），hover 时被下方信息区顶上去、往上缩小 */
.portfolio-item-image {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* 图片上的黑色透明蒙版，只作用于图片区域 */
.portfolio-item-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

@media (hover: hover) {
    .portfolio-item:hover .portfolio-item-image::after {
        opacity: 0;
    }
}

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

.portfolio-item-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

@media (hover: hover) {
    .portfolio-item:hover .portfolio-item-overlay {
        opacity: 1;
    }
}

.portfolio-item-category {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--secondary);
    color: #000;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: fit-content;
}

/* 灰色信息区：默认压得较矮，只露出标题+两行描述；hover 时张高，把“查看详情”顶出来 */
.portfolio-item-info {
    background: rgba(255,255,255,0.05);
    border-top: 1px solid rgba(255,255,255,0.05);
    flex: 0 0 auto;
    height: 92px;
    overflow: hidden;
    padding: 0.9rem 1.25rem;
    transition: height 0.4s ease;
}

@media (hover: hover) {
    .portfolio-item:hover .portfolio-item-info {
        height: 150px;
    }
}

.portfolio-item-info h3 {
    font-size: 1.35rem;
    margin-bottom: 0.4rem;
    transition: color 0.3s ease;
}

@media (hover: hover) {
    .portfolio-item:hover .portfolio-item-info h3 {
        color: var(--secondary);
    }
}

.portfolio-item-info p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portfolio-item-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.9rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease 0.15s;
}

@media (hover: hover) {
    .portfolio-item:hover .portfolio-item-link {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio-item-link i {
    transition: transform 0.3s ease;
}

@media (hover: hover) {
    .portfolio-item-link:hover i {
        transform: translateX(5px);
    }
}

/* 手机上卡片两列排布、宽度更窄，稍微压低总高避免图片拉得过长 */
/* 手机端无鼠标：去掉压暗蒙版，信息区默认全展开、常显"查看详情" */
@media (max-width: 768px) {
    .portfolio-item {
        height: 300px;
    }

    .portfolio-item-image::after {
        display: none;
    }

    .portfolio-item-overlay {
        opacity: 1;
    }

    .portfolio-item-info {
        height: auto;
    }

    .portfolio-item-link {
        opacity: 1;
        transform: none;
    }
}

/* ==================== */
/* 关于页面样式 */
/* ==================== */
.about-section {
    padding: 3rem 0;
}

.about-text h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.about-text p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* ==================== */
/* 联系页面样式 */
/* ==================== */
.contact-section {
    padding: 4rem 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.contact-info p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.contact-method:hover {
    border-color: var(--secondary-30);
    transform: translateX(10px);
}

.contact-method-icon {
    width: 50px;
    height: 50px;
    background: var(--secondary-8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    font-size: 1.2rem;
}

.contact-method-info h4 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.contact-method-info p,
.contact-method-info a {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.contact-method-info a:hover {
    color: var(--secondary);
}

.contact-form {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 2.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    color: var(--text);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary);
    background: var(--secondary-5);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== */
/* 作品详情页样式 */
/* ==================== */
.project-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 120px 40px 4rem;
    overflow: hidden;
}

.project-hero-container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

.project-hero-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    justify-content: space-between;
}

.project-hero-top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-category {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: var(--secondary);
    color: #000;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: fit-content;
}

.project-hero h1 {
    font-size: 3rem;
    line-height: 1.15;
    margin: 0;
}

.project-subtitle {
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1.7;
    margin: 0;
}

.project-tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.project-tag {
    padding: 0.3rem 0.6rem;
    background: var(--secondary-15);
    border: 1px solid var(--secondary-30);
    border-radius: 12px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
}

.project-hero-right {
    display: flex;
    align-items: stretch;
}

.project-overview {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    width: 100%;
    height: 100%;
}

.project-overview h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--secondary);
}

.project-overview p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

.project-content {
    padding: 5rem 0 12rem;
    position: relative;
}

.project-section {
    margin-bottom: 4rem;
}

.project-section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.project-section p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1.1rem;
}

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

.project-gallery img {
    width: 100%;
    transition: transform 0.3s ease;
}

.project-gallery img:first-child {
    grid-column: 1 / -1;
}

.project-gallery img:hover {
    transform: scale(1.02);
}

/* style-b minimap 小地图：不放大（跟随滚动，仅上下移动） */
.project-gallery.gallery-style-b .gallery-minimap img:hover {
    transform: none;
}

.project-nav-card {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    opacity: 0.6;
    z-index: 1000;
    max-width: 1200px;
    width: calc(100% - 2rem);
    box-sizing: border-box;
}

.project-nav-card.fixed-at-anchor {
    position: absolute;
    bottom: auto;
    left: 1rem;
    right: 1rem;
    transform: none;
    margin: 3rem auto 0;
    width: calc(100% - 2rem);
    /* 进入锚点（文档流）模式后降低层级，避免盖住顶部固定导航 .nav (z-index:950) */
    z-index: 900;
}

.project-nav-anchor {
    height: 0;
}

.project-nav-card:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(255,255,255,0.1);
}



.project-nav-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
    color: var(--text-primary);
    min-width: 180px;
    max-width: 220px;
    flex-shrink: 0;
}

.project-nav-link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--acid-40);
    transform: translateX(-3px);
}

.project-nav-link.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.project-nav-link.next {
    text-align: right;
}

.project-nav-link.next:hover {
    transform: translateX(3px);
}

.project-nav-link span:first-child {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.project-nav-link span:last-child {
    font-weight: 600;
    font-size: 0.9rem;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.5rem;
    background: var(--secondary);
    color: #000;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--acid-40);
}

@media (max-width: 1024px) {
    .project-hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 20px;
    }
    
    .project-hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .project-hero {
        padding: 100px 20px 3rem;
        min-height: auto;
    }
    
    .project-hero-container {
        padding: 0;
    }
    
    .project-hero h1 {
        font-size: 2rem;
    }
    
    .project-subtitle {
        font-size: 1rem;
    }
    
    .project-gallery {
        grid-template-columns: 1fr;
    }

    /* 手机端导航卡片改为文档流展示，收窄原为 PC 浮窗预留的底部留白 */
    .project-content {
        padding: 3rem 0 2rem;
    }

    .project-nav-card {
        position: static;
        flex-direction: column;
        gap: 0.8rem;
        padding: 1rem;
        background: var(--card-bg);
        backdrop-filter: none;
        opacity: 1;
        border: 1px solid var(--card-border);
        width: 100%;
        margin: 1.5rem 0 0;
        transform: none;
    }
    
    .project-nav-card.fixed-at-anchor {
        position: static;
        margin: 1.5rem 0 0;
        width: 100%;
    }
    
    .project-nav-card:hover {
        opacity: 1;
        background: var(--card-bg);
        border-color: var(--card-border);
    }

    .project-nav-link {
        width: 100%;
        min-width: auto;
        max-width: none;
        justify-content: flex-start;
        background: var(--card-bg);
        border-color: var(--card-border);
    }

    .project-nav-link.next {
        text-align: left;
    }

    .project-nav-link:hover {
        transform: none;
    }

    .project-nav-link.next:hover {
        transform: none;
    }

    .back-btn {
        width: 100%;
    }
}

/* ==================== */
/* 滚动动画 */
/* ==================== */
[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 整页切换模式：激活屏内容进入，离开时退场（由 fullpage.js 切换 .fp-active） */
.fp-active [data-animate] {
    opacity: 1;
    transform: translateY(0);
}

/* 延迟动画 */
[data-animate]:nth-child(2) { transition-delay: 0.1s; }
[data-animate]:nth-child(3) { transition-delay: 0.2s; }
[data-animate]:nth-child(4) { transition-delay: 0.3s; }
[data-animate]:nth-child(5) { transition-delay: 0.4s; }
[data-animate]:nth-child(6) { transition-delay: 0.5s; }

/* ==================== */
/* 整页切换："向下滑动"提示（绿渐变下滑条 + 箭头），挂在右侧导航 .fp-dots 下方 */
/* ==================== */
.fp-scroll-hint {
    position: relative;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}
.fp-scroll-hint.show { opacity: 1; }

/* 绿渐变下滑条 */
.fp-scroll-hint .bar {
    position: relative;
    width: 28px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(200,255,62,0.22);
    overflow: hidden;
}
.fp-scroll-hint .bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translate(-50%, -100%);
    background: linear-gradient(to bottom, var(--secondary-light-grad2), var(--secondary-dark-grad2));
    border-radius: 2px;
    animation: hintSlide 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes hintSlide {
    0%   { transform: translate(-50%, -100%); opacity: 0; }
    40%  { opacity: 1; }
    100% { transform: translate(-50%, 100%);  opacity: 0; }
}
.fp-scroll-hint .arrow {
    color: var(--secondary);
    font-size: 14px;
    animation: bob 1.8s ease-in-out infinite;
}

/* 通用卡片悬停渐变光效（首页/关于页共用；首页图文卡片禁用，避免遮挡图片） */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-8) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.service-card:hover::before {
    opacity: 1;
}

.services .service-card::before {
    display: none;
}

/* ==================== */
/* 卡片光效 */
/* ==================== */
.portfolio-item {
    position: relative;
}

.portfolio-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--secondary-8) 0%, transparent 45%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.portfolio-item:hover::after {
    opacity: 1;
}

/* ==================== */
/* 图片加载动画 */
/* ==================== */
img {
    opacity: 1;
    transition: opacity 0.5s ease;
}

img.loaded {
    opacity: 1;
}

/* ==================== */
/* 按钮涟漪效果 + Specular 镜面高光 */
/* ==================== */
.btn {
    position: relative;
    overflow: hidden;
}

/* 涟漪效果（点击时） */
.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

/* ==================== */
/* Specular 镜面高光层（统一按钮效果） */
/* 由 spark.js 注入 <span class="specular-shine">， */
/* 边缘高光沿按钮描边流动，光向跟随鼠标（JS 更新 --shine-angle / --shine-t） */
/* ==================== */
.specular-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    z-index: 1;
    opacity: calc(var(--shine-t, 0));
    background: conic-gradient(
        from calc(var(--shine-angle, 2.4rad)),
        transparent 0deg,
        rgba(255, 255, 255, 1) 16deg,
        transparent 34deg,
        transparent 166deg,
        rgba(255, 255, 255, 0.65) 194deg,
        transparent 212deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* 不支持 mask-composite 的浏览器隐藏高光层，避免整面盖住按钮 */
@supports not (mask-composite: exclude) {
    .specular-shine {
        display: none;
    }
}

/* ==================== */
/* 鼠标跟随光效 */
/* ==================== */
.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--secondary-8) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

/* ==================== */
/* 毛玻璃效果增强 */
/* ==================== */
.glass {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
}

/* ==================== */
/* 分页控件样式 */
/* ==================== */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 12px;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-btn {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--secondary);
    color: var(--secondary);
}

.pagination-btn.active {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #000;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn.arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    font-size: 0.85rem;
}

.pagination-btn.arrow:hover:not(:disabled) {
    border-color: var(--secondary);
    color: var(--secondary);
    background: var(--acid-10);
}

.pagination-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pagination-jump {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--card-border);
}

.pagination-jump-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pagination-jump-input {
    width: 65px;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
    text-align: center;
    transition: all 0.3s ease;
}

.pagination-jump-input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px var(--acid-20);
}

.pagination-jump-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.pagination-extras {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pagination-size-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pagination-size-select {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-size-select:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px var(--acid-20);
}

.pagination-size-select option {
    background: #1a1a1a;
    color: var(--text);
}

@media (max-width: 768px) {
    .pagination-container {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .pagination-btn {
        min-width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
    
    .pagination-btn.arrow {
        width: 34px;
        height: 34px;
    }
    
    .pagination-container > .pagination-jump {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--card-border);
        padding-top: 0.75rem;
    }

    .pagination-extras {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-size {
        gap: 0.5rem;
    }
}

/* ==================== */
/* 滚动驱动横向滚动区域 - Trae风格 */
/* ==================== */
.horizontal-scroll-section {
    position: relative;
    background: var(--primary);
}

.hs-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 2rem 0;
}

/* 横向板块标题与其他板块统一：定宽居中，与 .container 一致，避免全屏贴边 */
.horizontal-scroll-section .section-header {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 3rem;
    padding: 0 40px;
    box-sizing: border-box;
}

.hs-slider-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* 隐藏横向滚动条（保留滚动手势） */
.hs-slider-container::-webkit-scrollbar {
    display: none;
}

.hs-track {
    display: flex;
    gap: 2.5rem;
    /* 轨道宽度按内容撑开：否则卡片会从轨道右缘溢出，
       右侧 padding 缓冲落不到最后一张卡片之外，导致04号卡片滚动到最右时贴屏幕边 */
    width: max-content;
    min-width: 100%;
    padding: 0 70px;
    will-change: transform;
}

/* 横向滚动进度条（绿色渐变），手机上提示卡片还能横向滑动 */
.hs-progress {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 0 40px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.hs-progress.show { opacity: 1; }
.hs-progress-track {
    position: relative;
    width: 240px;
    height: 4px;
    border-radius: 999px;
    background: rgba(200,255,62,0.12);
    overflow: hidden;
}
.hs-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--secondary-light-grad2), var(--secondary-dark-grad2));
    transition: width 0.08s linear;
}

.hs-slide {
    flex: 0 0 auto;
    width: 1000px;
    height: 800px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    /* 聚光灯圆孔默认在屏幕外，保证未聚焦时图片灰暗 */
    --card-mouse-x: -9999px;
    --card-mouse-y: -9999px;
    transition: border-color 0.4s ease, transform 0.3s cubic-bezier(0.23,1,0.32,1);
}

.hs-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--secondary-5) 0%, transparent 50%);
    pointer-events: none;
    z-index: 2;
}

/* 卡片图片聚光灯层：只作用于图片背景（z-index 在文字内容之下），
   卡片间隙、文字标题与标签均不受影响。圆孔内图片透出彩色+白光，其余灰暗 */
.hs-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle 600px at var(--card-mouse-x) var(--card-mouse-y), rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 40%, transparent 70%);
    backdrop-filter: grayscale(1) brightness(0.6);
    -webkit-backdrop-filter: grayscale(1) brightness(0.6);
    mask-image: radial-gradient(circle 600px at var(--card-mouse-x) var(--card-mouse-y), transparent 0%, transparent 20%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.38) 68%, rgba(0,0,0,.6) 86%, white 100%);
    -webkit-mask-image: radial-gradient(circle 600px at var(--card-mouse-x) var(--card-mouse-y), transparent 0%, transparent 20%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.38) 68%, rgba(0,0,0,.6) 86%, white 100%);
}

.hs-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hs-slide:hover img {
    transform: scale(1.03);
}

/* hover 白色边框发光 */
.hs-slide:hover {
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 0 30px rgba(255,255,255,0.15), 0 0 60px rgba(255,255,255,0.08);
}

.hs-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.95) 100%);
    z-index: 3;
}

.hs-slide-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.hs-slide-category {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: var(--secondary-20);
    border: 1px solid var(--secondary-30);
    border-radius: 25px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary);
    letter-spacing: 1px;
}

.hs-slide-number {
    font-size: 5rem;
    font-weight: 900;
    color: var(--secondary-50);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hs-slide-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
}

.hs-slide-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.hs-slide-content p {
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.hs-slide-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hs-slide-year {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

.hs-slide-arrow {
    width: 44px;
    height: 44px;
    background: var(--secondary-20);
    border: 1px solid var(--secondary-30);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.hs-slide:hover .hs-slide-arrow {
    background: var(--secondary);
    color: #000;
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .horizontal-scroll-section {
        height: auto;
    }

    .hs-slide {
        width: 320px;
        height: 320px;
    }

    /* 移动端无鼠标：去掉聚光灯灰暗滤镜，图片保持彩色，不被压灰 */
    .hs-slide::after {
        display: none;
    }

    /* 移动端卡片较小：压缩文字区排版，避免内容超高把顶部序号挤出卡片被裁剪 */
    .hs-slide-content {
        padding: 1.25rem;
    }
    .hs-slide-number {
        font-size: 2.5rem;
        color: var(--secondary-50);
    }
    .hs-slide-content h3 {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }
    .hs-slide-content p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.9rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hs-slide-arrow {
        width: 36px;
        height: 36px;
    }

    .hs-progress-track {
        width: 70%;
    }

    .fp-scroll-hint {
        bottom: 18px;
    }
}

/* ==================== */
/* 博客板块样式 - 首页 */
/* ==================== */
.blog-section {
    padding: 6rem 0;
    background: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: stretch;
}

.blog-card-featured {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.blog-card-featured:hover {
    transform: translateY(-4px);
    border-color: var(--secondary-25);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

.blog-card-featured .blog-image {
    flex-shrink: 0;
    height: 220px;
    overflow: hidden;
}

.blog-card-featured .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card-featured:hover .blog-image img {
    transform: scale(1.04);
}

.blog-card-featured .blog-content {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-card-mini {
    display: flex;
    gap: 1.2rem;
    padding: 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: all 0.35s ease;
    cursor: pointer;
}

.blog-card-mini:hover {
    transform: translateX(6px);
    border-color: var(--secondary-25);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.blog-card-mini .blog-mini-image {
    width: 90px;
    height: 65px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-card-mini .blog-mini-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 首页/详情页图片容器：默认不画渐变，真实图加载成功就完全干净不扎眼；
   只有 img onerror 触发后加 .img-placeholder 才显示渐变+图标。 */
.blog-card-featured .blog-image,
.blog-card-mini .blog-mini-image,
.blog-detail-image {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
}
.blog-card-featured .blog-image.img-placeholder,
.blog-card-mini .blog-mini-image.img-placeholder,
.blog-detail-image.img-placeholder {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 50%, #6c5ce7 100%);
}
.blog-card-featured .blog-image.img-placeholder::before,
.blog-card-mini .blog-mini-image.img-placeholder::before,
.blog-detail-image.img-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>') center center / 48px no-repeat;
    opacity: 1;
    z-index: 0;
}
.blog-card-featured .blog-image img,
.blog-card-mini .blog-mini-image img,
.blog-detail-image img {
    position: relative;
    z-index: 1;
    display: block; /* 取消 img 内联默认的 3-4px 下边距间隙 */
}

.blog-card-mini .blog-mini-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-card-mini .blog-mini-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.blog-card-mini:hover .blog-mini-title {
    color: var(--secondary);
}

.blog-card-mini .blog-mini-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.blog-card-mini .blog-mini-category {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--secondary-10);
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--secondary);
}

.blog-category {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--secondary-10);
    border-radius: 18px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: 0.9rem;
}

.blog-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    line-height: 1.45;
}

.blog-content h3 a {
    color: var(--text);
    transition: color 0.3s ease;
}

.blog-content h3 a:hover {
    color: var(--secondary);
}

.blog-content p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.blog-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding-top: 0.5rem;
}

.blog-author,
.blog-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-author i,
.blog-date i {
    font-size: 0.72rem;
    color: var(--secondary);
}

@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    
    .blog-card-featured .blog-image {
        height: 180px;
    }
    
    .blog-card-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        gap: 0.8rem;
    }
    
    .blog-card-mini {
        flex-shrink: 0;
        width: 260px;
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .blog-card-mini .blog-mini-image {
        width: 100%;
        height: 120px;
    }
    
    .blog-card-mini .blog-mini-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* ==================== */
/* 博客详情页样式 */
/* ==================== */
.blog-detail {
    min-height: 60vh;
}

.blog-detail-header {
    padding: 120px 40px 3rem;
    text-align: left;
}

.blog-detail-header .container {
    max-width: 1200px;
    margin: 0 auto;
}

.breadcrumb {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--secondary);
}

.breadcrumb-sep {
    color: var(--text-secondary);
    opacity: 0.6;
}

.breadcrumb-current {
    color: var(--text-secondary);
    opacity: 0.8;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-detail-category {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: var(--secondary-15);
    border: 1px solid var(--secondary-30);
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary);
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.blog-detail-header h1 {
    font-size: 3rem;
    max-width: 900px;
    margin-bottom: 1.2rem;
    line-height: 1.2;
}

.blog-detail-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.blog-detail-author,
.blog-detail-date,
.blog-detail-readtime {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-detail-author i,
.blog-detail-date i,
.blog-detail-readtime i {
    color: var(--secondary);
}

.author-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--secondary-15);
    border: 1px solid var(--secondary-30);
    color: var(--secondary);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meta-dot {
    color: var(--text-secondary);
    opacity: 0.5;
    font-weight: 700;
}

.blog-detail-readtime i {
    font-style: normal;
}

.blog-detail-image {
    width: calc(100% - 80px); /* 原来的 padding:0 40px 改成宽度扣掉 80，这样 img 能填满整个容器而不会在两侧露 padding 区域 */
    max-width: 1200px;
    margin: 2.5rem auto 0;
    max-height: 500px;
    overflow: hidden;
    border-radius: 20px;
    /* 强制 aspect-ratio 保持宽高比例一致，避免图片因尺寸不匹配 object-fit 导致两侧露背景 */
    aspect-ratio: 1200 / 500;
}

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

.blog-detail-wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    padding: 4rem 0;
}

.article-container {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-detail-content {
    padding: 0;
    text-align: left;
    max-width: 720px;
    margin: 0;
}

.blog-sidebar {
    position: sticky;
    top: 120px;
    height: fit-content;
}

.sidebar-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
}

.sidebar-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sidebar-section h3 i {
    color: var(--secondary);
}

.sidebar-post-item {
    display: flex;
    gap: 1rem;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.sidebar-post-item:hover {
    border-color: var(--acid-20);
    background: var(--acid-3);
    transform: translateX(4px);
}

.sidebar-post-image {
    width: 70px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.sidebar-post-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sidebar-post-category {
    font-size: 0.68rem;
    color: var(--secondary);
    background: var(--acid-10);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    width: fit-content;
    margin-bottom: 0.4rem;
}

.sidebar-post-info h4 {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    transition: color 0.3s ease;
}

.sidebar-post-item:hover .sidebar-post-info h4 {
    color: var(--secondary);
}

/* 文章目录 TOC */
.toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.toc li {
    margin: 0;
}

.toc a {
    display: block;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 6px;
    line-height: 1.5;
    transition: all 0.25s ease;
}

.toc a:hover {
    color: var(--secondary);
    background: var(--secondary-8);
}

.toc a.active {
    color: var(--secondary);
    border-left-color: var(--secondary);
    background: var(--secondary-12);
    font-weight: 600;
}

.toc .toc-h3 a {
    padding-left: 1.4rem;
    font-size: 0.8rem;
}

.blog-detail-content h1 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--text);
}

.blog-detail-content h2 {
    font-size: 1.6rem;
    margin: 2rem 0 1rem;
    color: var(--text);
    padding: 0.1rem 0 0.5rem 0.9rem;
    border-left: 4px solid var(--secondary);
    border-bottom: 1px solid var(--card-border);
    scroll-margin-top: 110px;
}

.blog-detail-content h3 {
    font-size: 1.3rem;
    margin: 1.5rem 0 0.8rem;
    color: var(--text);
    scroll-margin-top: 110px;
}

.blog-detail-content .blog-lead {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.blog-detail-content p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.blog-detail-content img {
    max-width: 100%;
    border-radius: 12px;
    margin: 1.5rem 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.blog-detail-content blockquote {
    border-left: 4px solid var(--secondary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--secondary-5);
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
    font-style: italic;
}

.blog-detail-content ul,
.blog-detail-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.2rem;
}

.blog-detail-content li {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.blog-detail-content a {
    color: var(--secondary);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.blog-detail-content a:hover {
    color: var(--accent);
}

.blog-detail-content code {
    background: rgba(255,255,255,0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.9rem;
    color: var(--secondary);
}

.blog-detail-content pre {
    background: rgba(0,0,0,0.3);
    padding: 1.2rem;
    border-radius: 12px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.blog-detail-content pre code {
    background: transparent;
    padding: 0;
    color: var(--text);
}

/* ==================== */
/* 博客详情 - 完读收尾区 */
/* ==================== */
.blog-detail-end {
    padding: 3rem 0 4rem;
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.blog-detail-end .container {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: none;
    margin: 0 0 2.5rem;
}

.blog-pager-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.2rem 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-pager-link.next {
    text-align: right;
    align-items: flex-end;
}

.blog-pager-link:hover {
    border-color: var(--secondary-30);
    background: var(--secondary-8);
}

.blog-pager-link.placeholder {
    visibility: hidden;
}

.pager-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-pager-link.next .pager-label {
    justify-content: flex-end;
}

.pager-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    transition: color 0.3s ease;
}

.blog-pager-link:hover .pager-title {
    color: var(--secondary);
}

.related-posts {
    max-width: none;
    margin: 0 0 2.5rem;
}

.related-posts-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.related-posts-title i {
    color: var(--secondary);
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.related-post {
    flex-direction: column;
}

.related-post .sidebar-post-image {
    width: 100%;
    height: 130px;
}

.blog-end-back {
    text-align: center;
}

@media (max-width: 1024px) {
    .blog-detail-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .blog-sidebar {
        display: none;
    }

    .blog-detail-image {
        border-radius: 12px;
        padding: 0 20px;
        max-height: 360px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .blog-detail-header {
        padding: 110px 20px 2rem;
    }
    
    .blog-detail-header h1 {
        font-size: 2rem;
    }
    
    .blog-detail-image {
        max-height: 300px;
        margin-top: 1.5rem;
    }
    
    .blog-detail-content {
        padding: 2rem 0;
    }
    
    .blog-detail-content h2 {
        font-size: 1.4rem;
    }
    
    .sidebar-post-item {
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .sidebar-post-image {
        width: 100%;
        height: 120px;
    }
    
    .sidebar-post-info h4 {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .blog-pager {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .related-post .sidebar-post-image {
        height: 160px;
    }
}

/* ==================== */
/* 博客列表页样式 - 新闻列表 */
/* ==================== */
.blog-list-section {
    padding: 4rem 0;
    min-height: 500px;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.4s ease;
}

.news-item:hover {
    transform: translateY(-4px);
    border-color: var(--secondary-30);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.news-image {
    width: 220px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block; /* 取消 img 的内联元素默认下边距间隙 */
}

/* 图片容器默认不画渐变/图标（避免真实图加载成功后还露边）。
   只有图片 onerror 时，父容器加 .img-placeholder 才显示渐变占位。 */
.news-image {
    min-height: 150px;
    aspect-ratio: 220 / 150;
    position: relative;
    overflow: hidden; /* 防止 object-fit 溢出超出圆角 */
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.02); /* 真实图加载前只有极淡的背景，不会露渐变边 */
}
.news-image.img-placeholder {
    background: linear-gradient(135deg, #00cec9 0%, #0984e3 50%, #6c5ce7 100%);
}
.news-image.img-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>') center center / 48px no-repeat;
    opacity: 1;
    z-index: 0;
}
.news-image img {
    position: relative;
    z-index: 1;
}

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

.news-content {
    flex: 1;
}

.news-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.news-content h3 a {
    color: var(--text);
    transition: color 0.3s ease;
}

.news-content h3 a:hover {
    color: var(--secondary);
}

.news-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.news-author,
.news-date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.news-author i,
.news-date i {
    font-size: 0.75rem;
    color: var(--secondary);
}

.news-category {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--secondary-10);
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--secondary);
}

.news-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 1rem;
    border-left: 1px solid var(--card-border);
}

.news-action .btn {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .news-item {
        flex-direction: column;
    }
    
    .news-image {
        width: 100%;
        height: 200px;
    }
    
    .news-content {
        gap: 0.5rem;
    }
    
    .news-action {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--card-border);
        padding-top: 1rem;
        justify-content: flex-start;
    }
}

/* ==================== */
/* 其他案例推荐板块 */
/* ==================== */
.other-cases-section {
    padding: 4rem 0;
    background: rgba(0,0,0,0.03);
}

.other-cases-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.other-cases-section .section-header h2 {
    font-size: 1.8rem;
    margin: 0;
}

.cases-nav {
    display: flex;
    gap: 0.8rem;
}

.cases-prev-btn,
.cases-next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.cases-prev-btn:hover,
.cases-next-btn:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #000;
}

.cases-scroll-container {
    position: relative;
    overflow: hidden;
    padding: 1rem 0;
}

.cases-list {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.3s ease;
}

.case-item {
    flex-shrink: 0;
    width: 260px;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.case-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.case-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.case-item:hover .case-image img {
    transform: scale(1.05);
}

.case-info {
    padding: 1.2rem;
}

.case-category {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.case-info h3 {
    font-size: 1rem;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .other-cases-section {
        padding: 2rem 0;
    }
    
    .other-cases-section .section-header h2 {
        font-size: 1.4rem;
    }
    
    .case-item {
        width: 200px;
    }
    
    .case-image {
        height: 120px;
    }
}

/* ==================== */
/* 案例展示方式A：长图叠放 */
/* ==================== */
.project-gallery.gallery-style-a {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2rem;
}

.project-gallery.gallery-style-a img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.project-gallery.gallery-style-a img:not(:first-child) {
    margin-top: 0;
}

.project-gallery.gallery-style-a img:hover {
    transform: none;
}

.project-gallery.gallery-style-a [data-animate],
.project-gallery.gallery-style-a [data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

/* ==================== */
/* 案例展示方式B：轮播图 */
/* ==================== */
.project-gallery.gallery-style-b {
    display: flex;
    align-items: stretch;   /* 强制子项跟随最高项的高度（主图 1000px），不再依赖侧栏自己写 height */
    gap: 2rem;
    margin-top: 2rem;
}

.gallery-main {
    width: 750px;
    height: 1000px;
    flex-shrink: 0;        /* 主图尺寸不压缩 */
    background: var(--primary);
    border-radius: 16px;
    overflow: hidden !important;
    position: relative;
    cursor: pointer;
}

/* ===== viewer/wrapper：始终 block，不切换 display ===== */
.gallery-main-viewer {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.gallery-main-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    transition: transform 0.2s ease-out;
    position: relative;
}

/* 非长图模式：图片 object-fit contain */
#gallery-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--primary);
    transition: opacity 0.3s ease;
}

/* ===== 长图模式 ===== */
.gallery-main.long-image-mode {
    cursor: grab;
}

.gallery-main.long-image-mode .gallery-main-viewer {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scroll-behavior: auto;
    scrollbar-width: none;
}

.gallery-main.long-image-mode .gallery-main-viewer::-webkit-scrollbar {
    display: none;
}

/* ============ 图片防下载模块 image-protect ============
 * 全局禁用图片选择、长按菜单、拖拽行为
 * 透明遮罩物理隔离：父容器 relative + 透明 overlay 拦截所有鼠标操作
 * JS 端会自动给 <img> 添加 draggable=false 并在合适容器中插入 .img-protect-overlay
 * 标记 data-no-protect="1" 可跳过遮罩（如二维码、需要长按识别的图片）
 * ==================================================== */
img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* 禁止 iOS 长按弹出菜单 */
    -webkit-user-drag: none; /* 禁止 Safari 拖拽 */
}

/* 单图容器自动 relative（由 JS 标记 .img-protect-host） */
.img-protect-host {
    position: relative;
}

/* 透明遮罩：绝对定位铺满父容器，拦截所有鼠标操作 */
.img-protect-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: auto; /* 遮罩本身接收事件，阻止事件穿透到图片 */
    z-index: 9;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* 包装容器（由 JS 在需要时将单张 <img> 包装到 span.img-protect-wrap 内）
   用于父容器包含多元素或需要 inline-block 包裹的场景 */
.img-protect-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: top;
    max-width: 100%;
}

.img-protect-wrap > img {
    display: block;
    pointer-events: none; /* 图片不接收事件，全部交给 overlay */
}

/* 响应式图片：wrap 撑满父容器，避免包装破坏 width:100% 布局 */
.img-protect-wrap.img-protect-fluid {
    display: block;
    width: 100%;
}

.gallery-main.long-image-mode .gallery-main-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.gallery-main.long-image-mode #gallery-main-image {
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.gallery-main.long-image-mode .gallery-click-hint {
    display: none !important;
}

/* ===== minimap 小地图（独立 flex item）——花瓣三层叠加 ===== */
.gallery-minimap {
    position: relative;
    flex-shrink: 0;
    align-self: flex-end;
    width: 40px;
    height: auto;
    max-height: 1000px;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    display: none;
    overflow: hidden;
    cursor: pointer;
    z-index: 5;
}

/* 长图模式下：minimap 显示 */
.gallery-style-b.has-long-image .gallery-minimap {
    display: block;
}

/* Layer 1: 底层缩略图（完整亮） */
.gallery-minimap .minimap-base {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
}

/* Layer 2: 暗色遮罩（全暗） */
.gallery-minimap .minimap-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}

/* Layer 3: 视口框（overflow:hidden 裁出亮窗口） */
.gallery-minimap .minimap-viewport {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    outline: 2px solid var(--secondary);
    box-sizing: border-box;
    border-radius: 2px;
}

/* 视口内部：第二张缩略图（负 top 对齐滚动位置） */
.gallery-minimap .minimap-viewport-img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    /* top 由 JS 动态设置为负值 */
}

.gallery-click-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(0,0,0,0.6);
    border-radius: 30px;
    color: white;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-main:hover .gallery-click-hint {
    opacity: 1;
}

.gallery-sidebar {
    flex: 1;
    min-width: 180px;
    /* 不再写死 height:1000px：由父级 .gallery-style-b 的 align-items:stretch 自动匹配主图高度 */
    align-self: stretch;
    min-height: 0;          /* stretch + min-height:0 是「溢出时截断而不撑开」的黄金组合 */
    max-height: 1000px;     /* 上限还是 1000px，配合下面的 overflow:hidden 终极安全网 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
}

.gallery-thumbs {
    flex: 1;
    height: 0;             /* 配合 flex:1 让容器从 0 高度扩展，彻底触发 overflow-y 滚动条 */
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    overflow-y: auto;
    align-content: flex-start;
    padding: 3px;
    padding-right: 6px;
    box-sizing: border-box;
}

.gallery-thumbs::-webkit-scrollbar {
    width: 6px;
}

.gallery-thumbs::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.gallery-thumbs::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

.gallery-thumb-item {
    flex: 0 0 calc(25% - 0.45rem);
    aspect-ratio: 1/1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 0 2px transparent;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.gallery-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.gallery-thumb-item.active {
    box-shadow: 0 0 0 2px var(--secondary);
    opacity: 1;
}

.gallery-thumb-item:hover {
    opacity: 0.9;
}

/* ==================== */
/* 大图弹窗样式 */
/* ==================== */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 96vh;   /* PC 端更满，压缩底部空隙（手机端有独立覆盖不受影响） */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox-close {
    position: absolute;
    top: -28px;
    right: -60px;
    width: 44px;
    height: 44px;
    background: var(--secondary);
    border: none;
    border-radius: 25px;
    color: #000;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--acid-40);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    width: 44px;
    height: 44px;
    background: var(--secondary);
    border: none;
    border-radius: 25px;
    color: #000;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 20;
}

/* 切换箭头下移到缩略图行两侧，与其垂直居中对齐，不再贴紧图片显示区 */
.lightbox-prev {
    left: 12px;
    bottom: 42px;
}

.lightbox-next {
    right: 12px;
    bottom: 42px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--acid-40);
}

.lightbox-thumbnails {
    margin-top: 1.5rem;
    width: calc(100% - 136px);   /* 两侧各留 68px 给左右切换箭头，不叠在缩略图上 */
    height: 90px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
}

.lightbox-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.lightbox-thumbnails::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.lightbox-thumbnails::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

#lightbox-thumbnails-container {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    min-width: max-content;
}

.lightbox-thumbnail-item {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: all 0.3s ease;
}

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

.lightbox-thumbnail-item.active {
    border-color: var(--secondary);
    opacity: 1;
}

.lightbox-thumbnail-item:hover {
    opacity: 0.8;
}

.lightbox-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
    z-index: 5;
    pointer-events: none;   /* 不挡图片区的拖拽/滚轮操作 */
}

/* ==================== */
/* 长图查看器（花瓣风格） */
/* ==================== */
/* 灯箱图片区：默认随图片自适应大小（要么限制高、要么限制宽），保证打开时整图可见、
   箱体紧贴图片无空白；缩放/平移时 overflow:hidden 负责裁剪 */
.lightbox-image-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex: 1 1 auto;   /* 图片区占满剩余纵向空间，底部工具栏固定在下方 */
    min-height: 0;
    width: 100%;
    height: auto;
    max-width: 100%;
    background: transparent;
    cursor: grab;
    user-select: none;
    touch-action: none; /* 移动端：双指捏合由 JS 接管，禁止浏览器接管手势 */
    -webkit-overflow-scrolling: touch;
}

.lightbox-image-viewer.dragging {
    cursor: grabbing;
}

/* wrapper：JS 设置 transform: translate(panX,panY) scale(zoom)，默认铺满 viewer，图片在其中完整居中 */
.lightbox-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    will-change: transform;
    line-height: 0;
    max-width: 100%;
    max-height: 100%;
}

#lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 阴影贴着图片，不再套在整个查看区上 */
    pointer-events: none;
}

/* 长图模式（minimap 出现）：图片按宽度铺满 viewer，高度自内容，可上下平移 */
.lightbox-overlay.long-image-mode .lightbox-image-viewer {
    width: 100%;
}

.lightbox-overlay.long-image-mode .lightbox-image-wrapper {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
}

.lightbox-overlay.long-image-mode #lightbox-image {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
}

/* 小地图（minimap）——花瓣三层叠加 */
.lightbox-minimap {
    position: absolute;
    right: -110px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 0;
    display: none;
    z-index: 5;
    overflow: hidden;
}

.lightbox-overlay.long-image-mode .lightbox-minimap {
    display: block;
}

/* Layer 1: 底层缩略图 */
.lightbox-minimap .minimap-base {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
}

/* Layer 2: 暗色遮罩 */
.lightbox-minimap .minimap-dim {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}

/* Layer 3: 视口框 */
.lightbox-minimap .minimap-viewport {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    outline: 2px solid var(--secondary);
    box-sizing: border-box;
    border-radius: 2px;
    background: transparent;
    border: none;
}

/* 视口内部第二张缩略图 */
.lightbox-minimap .minimap-viewport-img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
}

/* ==================== */
/* 缩放控件栏 */
/* ==================== */
.lightbox-zoom-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin-top: 0.5rem;
    background: #1a1a1a;
    border-radius: 20px;
    padding: 4px 8px;
    z-index: 10;
    flex-shrink: 0;   /* 不被图片区压缩，始终固定在底部 */
}

.zoom-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: relative;
}

.zoom-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.zoom-btn:hover::after {
    opacity: 1;
}

.zoom-btn:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}

.zoom-level {
    min-width: 55px;
    text-align: center;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}

/* 背景切换 */
.lightbox-overlay.bg-white {
    background: #fff;
}

/* 白底模式下白图会融进背景，加一圈极淡描边区分边界 */
.lightbox-overlay.bg-white #lightbox-image {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.12);
}

.lightbox-overlay.bg-checker {
    background-color: #2a2a2a;
    background-image:
        linear-gradient(45deg, #555 25%, transparent 25%),
        linear-gradient(-45deg, #555 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #555 75%),
        linear-gradient(-45deg, transparent 75%, #555 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .project-gallery.gallery-style-b {
        flex-direction: column;
        align-items: center;
    }

    .gallery-main {
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 3/4;
    }

    /* 移动端：不进长图模式，minimap 始终隐藏 */
    .gallery-style-b .gallery-minimap {
        display: none !important;
    }

    .gallery-main.long-image-mode {
        aspect-ratio: 3/4;
        height: auto;
        cursor: pointer;
    }

    .gallery-sidebar {
        width: 100%;
        max-width: 300px;
    }

    .gallery-thumbs {
        max-height: none;
        justify-content: center;   /* 手机端缩略图不满一行时水平居中 */
    }

    .gallery-thumb-item {
        aspect-ratio: 1/1;
    }

    .lightbox-prev {
        left: 10px;
        z-index: 20;
    }

    .lightbox-next {
        right: 10px;
        z-index: 20;
    }

    /* 手机端：内容区改用 dvh（随地址栏伸缩的真实可见高度），并预留顶部按钮空间，
       避免关闭按钮被浏览器地址栏裁切、或盖住图片显示区 */
    .lightbox-content {
        max-height: calc(100vh - 88px);
        max-height: calc(100dvh - 88px);
        padding: 56px 0 10px;
    }

    .lightbox-close {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: 10px;
        z-index: 20;
    }

    .lightbox-image-viewer {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
    }

    .lightbox-thumbnails {
        width: calc(100% - 108px);   /* 手机端两侧各留 54px 给箭头（10px 边距 + 44px 按钮） */
    }

    #lightbox-image {
        max-width: 100%;
        max-height: 100%;
    }

    .lightbox-overlay.long-image-mode .lightbox-image-viewer {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .lightbox-overlay.long-image-mode #lightbox-image {
        width: 100%;
        max-width: 100%;
        max-height: none;
        height: auto;
    }

    /* 移动端：灯箱 minimap 始终隐藏 */
    .lightbox-minimap {
        display: none !important;
    }
}

/* ==================== */
/* Click Spark 点击火花效果 */
/* ==================== */
#spark-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* 用户开启"减少动态效果"时，标题直接显示，不做逐字滑动 */
@media (prefers-reduced-motion: reduce) {
    .hero-title .char {
        transform: none !important;
        opacity: 1 !important;
    }
    /* 注：不在 reduce 下禁用 .hero-container::before 动画，
       与 .nav::before 行为保持一致，保证 PC 端 hero 卡片光效扫描边正常显示 */
}

/* ==================== */
/* 整页切换：侧边指示器 */
/* ==================== */
.fp-dots {
    position: fixed;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.fp-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.fp-dot span {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: rgba(255,255,255,0);
    white-space: nowrap;
    transition: color 0.3s ease;
    pointer-events: none;
}

.fp-dot:hover {
    border-color: var(--secondary);
    background: var(--secondary-20);
}

.fp-dot:hover span {
    color: var(--text-secondary);
}

.fp-dot.active {
    background: var(--secondary);
    border-color: var(--secondary);
    transform: scale(1.25);
    box-shadow: 0 0 12px rgba(200,255,62,0.6);
}

.fp-dot.active span {
    color: #000;
}

/* 小屏隐藏指示器，避免遮挡 */
@media (max-width: 768px) {
    .fp-dots {
        display: none;
    }

    /* 移动端统一内容边距（此处位于所有组件样式之后，确保覆盖生效） */
    .container {
        padding: 0 20px;
    }
    .horizontal-scroll-section .section-header {
        padding: 0 20px;
    }
    .hs-track,
    .hs-progress {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 移动端解除整屏(PPT式)限制：区块按内容自然高度排列，避免一屏一页滑过头 */
    .hero,
    .services,
    .featured-works,
    .brand-story,
    .process,
    .blog-section {
        min-height: auto;
    }

    /* 移动端：服务卡片 2 列较窄，缩小标题/图标避免「品牌设/计」这类中间换行，排版更紧凑 */
    .services .service-body {
        padding: 1rem 0.9rem 1.15rem;
        gap: 0.55rem;
    }
    .services .service-body h3 {
        font-size: 1.25rem;
        gap: 0.45rem;
    }
    .services .service-body h3 i {
        font-size: 1.1rem;
    }
    .services .service-body p {
        font-size: 0.92rem;
    }

    /* 横向滚动区移动端不再吸顶占满整屏 */
    .hs-sticky {
        height: auto;
        position: static;
    }
}