/* ==========================================================================
   1. 全局设置 (Global Settings)
   ========================================================================== */

/* 1.1 CSS变量定义 (CSS Variables)
   :root 用于定义全局CSS变量，方便统一管理和修改颜色、字体等 */
:root {
    /* -- 主要字体栈 -- */
    --font-primary: 'Roboto', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-display: 'Playfair Display', serif; /* 可选的展示性字体，如大标题 */
    
    /* -- 暗色主题颜色 -- */
    --color-dark-background: #0f0f0f;      /* 暗色背景 (近黑色) */
    --color-aigraver-hero-text: #eae8e4;   /* Hero区域及暗色主题主要文字 (米白色) */
    --color-dark-text-secondary: #a0a0a0; /* 暗色主题次要文字 (灰色) */
    --color-dark-accent: #00bfff;          /* 暗色主题强调色 (亮蓝色) */
    --color-dark-accent-hover: #009acd;    /* 暗色主题强调色悬停 */
    --color-dark-border: #252525;          /* 暗色主题边框 (深灰色) */

    /* -- 亮色主题颜色 -- */
    --color-light-background: #f6f5f0;     /* 亮色背景 (乳白色/米黄色) */
    --color-light-text-primary: #2c2c2c;   /* 亮色主题主要文字 (深灰色) */
    --color-light-text-secondary: #5c5c5c; /* 亮色主题次要文字 (中灰色) */
    --color-light-accent: var(--color-dark-accent); /* 亮色主题强调色 (复用暗色主题的强调色) */
    --color-light-border: #dcdcdc;         /* 亮色主题边框 (浅灰色) */
}

/* 1.2 HTML 和 Body 基础样式 (HTML & Body Base Styles) */
html { 
    scroll-behavior: smooth; /* 页面内锚点跳转平滑滚动 */
}

body {
    font-family: var(--font-primary);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    background-color: var(--color-dark-background); /* 默认暗色背景 */
    color: var(--color-aigraver-hero-text);       /* 默认暗色主题文字颜色 */
    overflow-x: hidden;                           /* 防止水平滚动条 */
    transition: background-color 0.5s ease;
}

/* 当body应用浅色主题时的样式 (例如 contact.html) */
body.light-theme-active {
    background-color: var(--color-light-background);
    color: var(--color-light-text-primary);
}

/* 1.3 通用布局容器与间距 (Layout Containers & Spacing) */
.container { 
    width: 90%;
    max-width: 1280px; /* 容器最大宽度 */
    margin: 0 auto;    /* 水平居中 */
    padding: 0 25px;   /* 左右内边距 */
}

.section-padding { 
    padding-top: 100px;
    padding-bottom: 100px;
} 

/* 备用深色背景，比主暗色背景稍浅 */
.alt-background { 
    background-color: #141414; 
}

/* ==========================================================================
   2. 全局导航栏 (Global Header / Navigation Bar)
   ========================================================================== */
.global-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 30px 0; /* 初始上下内边距 */
    background-color: transparent; /* 初始背景透明 */
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                background-color 0.4s ease, 
                padding 0.4s ease, 
                box-shadow 0.4s ease;
}

/* 导航栏隐藏状态 (JS控制) */
.global-header.hide-nav { 
    transform: translateY(-100%);
}

/* 导航栏显示状态 (滚动后，背景变为不透明) */
.global-header.reveal-nav {
    transform: translateY(0);
    background-color: rgba(246, 245, 240, 0.98); /* 乳白色背景，带轻微透明 */
    backdrop-filter: blur(10px);                 /* 背景模糊 (毛玻璃效果) */
    padding: 20px 0;                             /* 滚动后较小的上下内边距 */
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);     /* 底部阴影 */
}

/* 导航栏在Hero区域时的特定样式 (背景透明，无阴影) */
.global-header.on-hero {
    background-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: 30px 0; /* 保持初始内边距 */
}

.header-container { 
    display: flex;
    justify-content: space-between; /* Logo居左，导航项居右 */
    align-items: center;
}

/* 2.1 Logo样式 (Logo Styles) */
.logo { 
    display: flex;
    align-items: center;
    text-decoration: none;
} 

.logo-image { 
    height: 38px;
    margin-right: 12px;
}

.logo-text { 
    font-size: 1.8em;
    font-weight: 700;
    letter-spacing: 1px;
    /* 颜色由 .global-header.on-hero 或 .global-header.reveal-nav 控制 */
}

.logo:hover .logo-text { 
    text-decoration: none; 
}

/* 2.2 主导航链接 (Main Navigation Links) */
.main-nav { 
    display: flex;
    align-items: center;
}

.nav-link { 
    margin-left: 40px;
    font-weight: 500;
    font-size: 1em;
    letter-spacing: 0.5px;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px; /* 为下划线动画预留空间 */
    /* 文字颜色由 .global-header.on-hero 或 .global-header.reveal-nav 控制 */
}

/* 导航链接激活及悬停下划线动画 */
.nav-link::after { 
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    bottom: 0;
    right: 50%; /* 从中心展开 */
    background: currentColor; /* 继承文字颜色 */
    transition: width 0.3s ease, right 0.3s ease, left 0.3s ease; 
}

.nav-link:hover::after, 
.nav-link.active::after { 
    width: 100%;
    left: 0;
    right: auto;
}

/* 2.3 “超级个体计划”按钮 (Uiverse Button in Nav) */
/* From Uiverse.io by Ashon-G - 这部分样式来自外部库，结构保持不变 */
.uiverse {
  /* ... Uiverse 按钮原有样式 ... */
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(255, 163, 26, 0.7);
  --c-color-2: #1a23ff;
  --c-color-3: #e21bda;
  --c-color-4: rgba(255, 232, 26, 0.7);
  --c-shadow: rgba(255, 223, 87, 0.5);
  --c-shadow-inset-top: rgba(255, 223, 52, 0.9);
  --c-shadow-inset-bottom: rgba(255, 250, 215, 0.8);
  --c-radial-inner: #ffd215;
  --c-radial-outer: #fff172;
  --c-color: #fff; /* 默认文字颜色 */
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table; /* 改为 table 或 inline-table 使得在 flex 布局中表现更可控 */
  border-radius: 24px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(
    circle,
    var(--c-radial-inner),
    var(--c-radial-outer) 80%
  );
  box-shadow: 0 0 14px var(--c-shadow);
}
.uiverse:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  box-shadow:
    inset 0 3px 12px var(--c-shadow-inset-top),
    inset 0 -3px 4px var(--c-shadow-inset-bottom);
}
.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 132px; /* Uiverse 默认 */
  padding: 12px 0;   /* Uiverse 默认 */
}
.uiverse .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 1;
}
.uiverse:hover {
  --duration: 1400ms;
}
/* ... Uiverse 按钮 .circle 及 @keyframes 动画样式保持不变 ... */
.uiverse .wrapper .circle { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; filter: blur(var(--blur, 8px)); background: var(--background, transparent); transform: translate(var(--x, 0), var(--y, 0)) translateZ(0); animation: var(--animation, none) var(--duration) var(--easing) infinite;}
.uiverse .wrapper .circle.circle-1, .uiverse .wrapper .circle.circle-9, .uiverse .wrapper .circle.circle-10 { --background: var(--c-color-4); }
.uiverse .wrapper .circle.circle-3, .uiverse .wrapper .circle.circle-4 { --background: var(--c-color-2); --blur: 14px; }
.uiverse .wrapper .circle.circle-5, .uiverse .wrapper .circle.circle-6 { --background: var(--c-color-3); --blur: 16px; }
.uiverse .wrapper .circle.circle-2, .uiverse .wrapper .circle.circle-7, .uiverse .wrapper .circle.circle-8, .uiverse .wrapper .circle.circle-11, .uiverse .wrapper .circle.circle-12 { --background: var(--c-color-1); --blur: 12px; }
.uiverse .wrapper .circle.circle-1 { --x: 0; --y: -40px; --animation: circle-1; }
.uiverse .wrapper .circle.circle-2 { --x: 92px; --y: 8px; --animation: circle-2; }
.uiverse .wrapper .circle.circle-3 { --x: -12px; --y: -12px; --animation: circle-3; }
.uiverse .wrapper .circle.circle-4 { --x: 80px; --y: -12px; --animation: circle-4; }
.uiverse .wrapper .circle.circle-5 { --x: 12px; --y: -4px; --animation: circle-5; }
.uiverse .wrapper .circle.circle-6 { --x: 56px; --y: 16px; --animation: circle-6; }
.uiverse .wrapper .circle.circle-7 { --x: 8px; --y: 28px; --animation: circle-7; }
.uiverse .wrapper .circle.circle-8 { --x: 28px; --y: -4px; --animation: circle-8; }
.uiverse .wrapper .circle.circle-9 { --x: 20px; --y: -12px; --animation: circle-9; }
.uiverse .wrapper .circle.circle-10 { --x: 64px; --y: 16px; --animation: circle-10; }
.uiverse .wrapper .circle.circle-11 { --x: 4px; --y: 4px; --animation: circle-11; }
.uiverse .wrapper .circle.circle-12 { --blur: 14px; --x: 52px; --y: 4px; --animation: circle-12; }
@keyframes circle-1 { 33% { transform: translate(0px, 16px) translateZ(0); } 66% { transform: translate(12px, 64px) translateZ(0); } }
@keyframes circle-2 { 33% { transform: translate(80px, -10px) translateZ(0); } 66% { transform: translate(72px, -48px) translateZ(0); } }
@keyframes circle-3 { 33% { transform: translate(20px, 12px) translateZ(0); } 66% { transform: translate(12px, 4px) translateZ(0); } }
@keyframes circle-4 { 33% { transform: translate(76px, -12px) translateZ(0); } 66% { transform: translate(112px, -8px) translateZ(0); } }
@keyframes circle-5 { 33% { transform: translate(84px, 28px) translateZ(0); } 66% { transform: translate(40px, -32px) translateZ(0); } }
@keyframes circle-6 { 33% { transform: translate(28px, -16px) translateZ(0); } 66% { transform: translate(76px, -56px) translateZ(0); } }
@keyframes circle-7 { 33% { transform: translate(8px, 28px) translateZ(0); } 66% { transform: translate(20px, -60px) translateZ(0); } }
@keyframes circle-8 { 33% { transform: translate(32px, -4px) translateZ(0); } 66% { transform: translate(56px, -20px) translateZ(0); } }
@keyframes circle-9 { 33% { transform: translate(20px, -12px) translateZ(0); } 66% { transform: translate(80px, -8px) translateZ(0); } }
@keyframes circle-10 { 33% { transform: translate(68px, 20px) translateZ(0); } 66% { transform: translate(100px, 28px) translateZ(0); } }
@keyframes circle-11 { 33% { transform: translate(4px, 4px) translateZ(0); } 66% { transform: translate(68px, 20px) translateZ(0); } }
@keyframes circle-12 { 33% { transform: translate(56px, 0px) translateZ(0); } 66% { transform: translate(60px, -32px) translateZ(0); } }

/* 导航栏中“超级个体计划”按钮的特定调整 */
.main-nav .nav-button-super-individual {
    margin-left: 30px; /* 与其他导航项的间距，原为40px，可按需调整 */
    font-size: 0.85em !important; /* 强制缩小字体以适应导航栏 */
    /* Uiverse按钮的颜色(--c-color)在不同导航栏状态下的调整 */
}
.global-header.on-hero .nav-button-super-individual {
    --c-color: var(--color-aigraver-hero-text); /* Hero状态下文字颜色 (米白) */
     /* 如果需要，可以调整其他 --c-shadow 等变量 */
}
.global-header.reveal-nav .nav-button-super-individual {
     --c-color: var(--color-light-text-primary); /* reveal状态下文字颜色 (深色) */
     /* 如果需要，可以调整其他 --c-shadow 等变量以匹配浅色背景 */
    --c-shadow: rgba(0, 0, 0, 0.1); /* 示例：调整阴影颜色 */
    --c-shadow-inset-top: rgba(0, 0, 0, 0.05);
    --c-shadow-inset-bottom: rgba(200, 200, 200, 0.5);
    --c-radial-inner: #f0f0f0;
    --c-radial-outer: #e0e0e0;
}


/* Uiverse按钮内部wrapper在导航栏中的调整 */
.main-nav .nav-button-super-individual .wrapper {
    min-width: 120px; /* 调整最小宽度 */
    padding: 10px 20px;   /* 调整内边距 */
    box-sizing: border-box;
}

/* 2.4 语言切换器 (Language Switcher) */
.language-switcher { 
    margin-left: 40px;
    font-size: 0.9em;
}

.language-switcher .lang-option { 
    text-decoration: none;
    padding: 0 6px;
    /* 文字颜色由 .global-header.on-hero 或 .global-header.reveal-nav 控制 */
}

.language-switcher .lang-option.active { 
    font-weight: bold;
}

/* 2.5 “免费试用”按钮 (Trial Button) */
.trial-button { 
    margin-left: 30px;
    padding: 10px 22px;
    border-radius: 50px; /* 药丸形状 */
    display: inline-flex; /* 改为inline-flex确保垂直居中和自适应宽度 */
    align-items: center; 
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    border: 2px solid; /* 边框颜色由状态类控制 */
    transition: all 0.3s ease;
    white-space: nowrap; /* 防止文字换行 */
    /* 边框和文字颜色由 .global-header.on-hero 或 .global-header.reveal-nav 控制 */
}

.trial-button .trial-button-icon { /* SVG图标（如果使用） */
    height: 16px; 
    width: 16px; 
    margin-right: 8px;
    fill: currentColor;
}

/* 2.6 导航栏在不同状态下的子元素颜色 */
/* Hero区域导航栏内部元素颜色 */
.global-header.on-hero .logo-text,
.global-header.on-hero .nav-link,
.global-header.on-hero .language-switcher .lang-option {
    color: var(--color-aigraver-hero-text);
}
.global-header.on-hero .trial-button {
    border-color: rgba(234, 232, 228, 0.4); /* 米白色半透明边框 */
    color: var(--color-aigraver-hero-text);
}
.global-header.on-hero .trial-button:hover {
    border-color: var(--color-dark-accent);
    color: var(--color-dark-accent);
    background-color: rgba(0, 191, 255, 0.1); /* 浅强调色背景 */
}

/* 滚动后不透明导航栏内部元素颜色 */
.global-header.reveal-nav .logo-text,
.global-header.reveal-nav .nav-link,
.global-header.reveal-nav .language-switcher .lang-option {
    color: var(--color-light-text-primary);
}
.global-header.reveal-nav .trial-button {
    border-color: var(--color-light-border);
    color: var(--color-light-text-secondary);
}
.global-header.reveal-nav .trial-button:hover {
    border-color: var(--color-light-accent);
    color: var(--color-light-accent);
    background-color: rgba(0, 191, 255, 0.05); /* 更浅的强调色背景 */
}


/* ==========================================================================
   3. Hero区域 (Hero Section) - 首页首屏
   ========================================================================== */
.hero-section {
    min-height: 100vh;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 0 20px; /* 左右内边距，避免内容贴边 */
    box-sizing: border-box;
    background-color: var(--color-dark-background); /* Hero区深色背景 */
}

.gif-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 在 .hero-content 之下 */
    overflow: hidden; /* 确保内部slide不溢出 */
}

.gif-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0; /* 默认所有slide都是透明的 */
    transition: opacity 1s ease-in-out; /* 淡入淡出动画效果，1秒时长 */
    z-index: 1; /* 保证slide在slideshow内部 */
}

.gif-slide.active {
    opacity: 1; /* 当前活动的slide的透明度 (与您之前 hero-background-image 的 opacity 一致) */
    /* 如果希望GIF更清晰，可以将opacity调高，例如 0.5 或更高，但要注意文字可读性 */
    z-index: 2; /* 确保活动的slide在其他slide之上 */
}

.hero-background-image { 
    background: url('../images/hero_video_placeholder.jpg') no-repeat center center/cover; 
    position: absolute; top:0; left:0; width:100%; height:100%; z-index:-1; /* 比gif-slideshow更低 */
    opacity: 0.1;
}

.hero-content { 
    z-index: 3; /* 确保内容在背景图之上 */
    position: relative;
}

.hero-content .brand-name-hero { /* 主品牌名 */
    font-size: clamp(80px, 16vw, 200px); /* 响应式字体大小，最小80px，最大200px，理想16vw */
    color: var(--color-aigraver-hero-text);
    font-weight: 800;
    margin-bottom: 80px;
    letter-spacing: -0.05em; /* 字符紧凑 */
    line-height: 1.0;
    text-shadow: 0 0 30px rgba(0,0,0,0.3); /* 轻微文字阴影 */
}

.hero-content .slogan-hero { /* 宣传语 */
    font-size: 1.8em;
    color: var(--color-aigraver-hero-text);
    opacity: 0.85;
    max-width: 70%;
    margin: 0 auto 200px auto; /* 调整与底部距离 */
    line-height: 1.7;
}

.gif-slide video {
    /* 1. 定位与对齐：将视频的中心点与屏幕中心对齐 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 2. 尺寸与覆盖：这是实现“封面模式”的核心 */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/* 
  可选但强烈推荐：增加一个半透明黑色遮罩层，以突出前景文字。
  您可以调整 rgba(0, 0, 0, 0.3) 中 0.3 这个值来控制明暗。
*/
.gif-slideshow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1; /* 确保遮罩层在视频之上，但在.hero-content文字之下 */
}

/* 向下滚动指示箭头 */
.scroll-down-indicator { 
    font-size: 3em;
    color: rgba(234, 232, 228, 1); /* 米白色半透明 */
    position: absolute;
    bottom: 50px;
    animation: bounce 2s infinite;
    text-decoration: none;
    display: inline-block; /* 确保SVG能应用动画和大小 */
}
.scroll-down-indicator svg { 
    width: 30px;
    height: 30px;
    stroke: currentColor; /* SVG线条颜色继承父元素color */
}
@keyframes bounce { /* 箭头上下跳动动画 */
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-15px);}
    60% {transform: translateY(-7px);}
}


/* ==========================================================================
   4. 页面主要内容区域通用样式 (Main Content Area General Styles)
   ========================================================================== */

/* 4.1 浅色主题背景区域 (Light Theme Background Sections) 
   适用于非Hero区域的、使用浅色背景的 section 或特定页面内容容器 
*/
#demo-video, 
#core-value,
#showcase, 
.solutions-page-content,
.about-us-page-content, /* contact.html实际是关于我们页面 */
.contact-page-content { /* 如果有单独的真实联系页面 */
    background-color: var(--color-light-background);
    color: var(--color-light-text-primary);
}

/* 4.2 区域/页面标题 (Section/Page Titles) */
/* .page-title 已在下方独立页面标题中统一定义，这里针对特定 section 内的 h2 */
#demo-video h2, 
#core-value h2, 
#showcase h2,
.section-title-about { /* “关于我们”页面中各模块的标题 */
    color: var(--color-light-text-primary);
    font-family: var(--font-primary);
    font-size: 2.2em; /* 之前是2.5em，.section-title-about 是2.2em，统一或按需调整 */
    text-align: center;
    margin-bottom: 50px; /* 原为60px，.section-title-about是50px，统一为50px */
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* 独立页面的主标题 (如H1) 和简介文本 */
.page-title { /* 通用的页面主标题 (通常是H1) */
    font-size: 2.8em; 
    text-align: center; 
    margin-bottom: 30px; 
    padding-top: 30px; /* 为固定导航栏留出空间 */
    color: var(--color-light-text-primary); /* 确保在浅色背景下是深色 */
    font-weight: 700;
}
.page-intro { /* 通用的页面简介文本 */
    text-align: center; 
    font-size: 1.2em; 
    max-width: 800px; 
    margin: 0 auto 60px auto;
    color: var(--color-light-text-secondary); /* 确保在浅色背景下是中灰色 */
    line-height: 1.7;
}


/* ==========================================================================
   5. 特定页面/模块样式 (Specific Page/Module Styles)
   ========================================================================== */

/* 5.1 首页 - 核心价值模块 (#core-value on Index Page) */
#core-value .value-grid { 
    display: grid;
    gap: 25px;
}
#core-value .value-grid.five-columns { 
    grid-template-columns: repeat(5, 1fr); /* 5列等宽 */
}
#core-value .value-item {
    background-color: #ffffff;
    border: 1px solid var(--color-light-border);
    border-radius: 8px;
    padding: 25px 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
#core-value .value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: var(--color-light-accent);
}
#core-value .value-icon { 
    width: 65px; height: 65px;
    margin-bottom: -8px; /* 图标与标题略微重叠 */
    color: var(--color-light-accent);
}
#core-value .value-icon svg { 
    width: 100%; height: 100%;
    fill: currentColor;
}
#core-value .value-item h3 {
    font-family: var(--font-primary); 
    font-size: 1.25em; 
    color: var(--color-light-text-primary); 
    margin-bottom: 8px; 
    font-weight: 600; 
    line-height: 1.3; 
    min-height: 2.6em; /* 确保多行标题高度一致 */
    display: flex; align-items: center; justify-content: center;
}
#core-value .value-item p {
    color: var(--color-light-text-secondary); 
    font-size: 0.9em; 
    line-height: 1.6; 
    flex-grow: 1; /* 使描述文字占据剩余空间，帮助对齐底部 */
}
/* 核心价值模块响应式调整 */
@media (max-width: 1200px) {
    #core-value .value-grid.five-columns { grid-template-columns: repeat(3, 1fr); }
    #core-value .value-item h3 { font-size: 1.15em; min-height: 2.3em; }
    #core-value .value-item p { font-size: 0.85em; }
}
@media (max-width: 768px) {
    #core-value .value-grid.five-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    #core-value .value-grid.five-columns { grid-template-columns: 1fr; } /* 单列显示 */
}

/* 5.2 首页 - AI杰作巡礼模块 (#showcase on Index Page) */
#showcase .case-item { 
    background-color: #ffffff; 
    border: 1px solid var(--color-light-border); 
    border-radius: 8px; 
    overflow:hidden; 
}
#showcase .case-item img { 
    width: 100%; 
    display: block; 
    aspect-ratio: 4/3; /* 保持4:3宽高比 */
    object-fit: cover; /* 图片裁剪以填充 */
}
#showcase .case-item .case-title { 
    padding: 10px 15px; 
    font-weight: bold; 
    text-align: center; 
    background-color: rgba(0,0,0,0.03); 
    color: var(--color-light-text-secondary); 
}
.case-study-gallery { /* 案例画廊网格 */
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 响应式列 */
    gap: 25px; 
    margin-top: 40px; 
}


/* 5.3 "关于我们" 页面 (contact.html - About Us Page Content) */
.about-section { /* “关于我们”页面中各个模块的通用间距 */
    padding-top: 10px; 
    padding-bottom: 10px;
}
/* “关于我们”页面中交替使用的浅白色背景模块 */
.about-section.alt-background-light { 
    background-color: #ffffff; 
    border-top: 1px solid var(--color-light-border);
    border-bottom: 1px solid var(--color-light-border);
}

/* 5.3.1 "关于我们" - 开场介绍模块 (如果需要深色背景) */
/* 如果此模块设计为深色背景，请在HTML中为该section添加 .dark-theme-section 类 */
#about-intro.dark-theme-section {
    background-color: var(--color-dark-background);
    color: var(--color-aigraver-hero-text);
    /* padding-top: 120px; /* 根据导航栏高度可能需要调整 */
}
#about-intro.dark-theme-section .page-title,
#about-intro.dark-theme-section .page-intro {
    color: var(--color-aigraver-hero-text);
}
#about-intro.dark-theme-section .page-intro {
    opacity: 0.85;
}
#about-intro.dark-theme-section .page-intro strong {
    color: var(--color-dark-accent); /* 深色主题下的强调文字 */
}

/* 5.3.2 "关于我们" - AIgraver创作历程 (Timeline) */
.timeline { 
    position: relative; 
    max-width: 750px; 
    margin: 0 auto; 
    padding: 20px 0; 
}
.timeline::after { /* 时间轴中心线 */
    content: ''; 
    position: absolute; 
    width: 3px; 
    background-color: var(--color-light-accent); 
    top: 0; bottom: 0; left: 50%; 
    margin-left: -1.5px; 
}
.timeline-item { 
    padding: 10px 40px; 
    position: relative; 
    background-color: inherit; /* 透明背景，不遮挡中心线 */
    width: 50%; 
    box-sizing: border-box; 
}
.timeline-item:nth-child(odd) { left: 0; padding-right: 25px; text-align: left; } /* 奇数项在左，文本居右 */
.timeline-item:nth-child(even) { left: 50%; padding-left: 25px; text-align: left; } /* 偶数项在右，文本居左 */
.timeline-icon { /* 时间轴上的圆形图标 */
    position: absolute; 
    width: 50px; height: 50px; 
    background-color: var(--color-light-background); /* 与页面背景色一致，制造"镂空"效果 */
    border: 3px solid var(--color-light-accent); 
    top: 15px; 
    border-radius: 50%; 
    z-index: 1; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1.5em; 
    color: var(--color-light-accent); 
}
.timeline-item:nth-child(odd) .timeline-icon { right: -25px; }
.timeline-item:nth-child(even) .timeline-icon { left: -25px; }
.timeline-content { 
    padding: 20px 30px; 
    background-color: #ffffff; /* 内容块白色背景 */
    position: relative; 
    border-radius: 6px; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.08); 
    display: inline-block; /* 关键：使得父级的 text-align 生效，内容块宽度自适应 */
    max-width: 100%;       /* 避免内容过宽时超出 .timeline-item 的计算宽度 */
    vertical-align: top;   /* 改善不同高度内容块的对齐 */
    text-align: left;      /* 关键：确保内容块内部的文字总是从左到右阅读 */
}
.timeline-content h3 { 
    margin-top: 0; 
    color: var(--color-light-accent); 
    font-size: 1.3em; 
}
.timeline-content p { 
    font-size: 0.95em; 
    line-height: 1.7; 
    color: var(--color-light-text-secondary); 
}
/* Timeline 响应式 */
@media screen and (max-width: 768px) { 
    .timeline::after { left: 31px; } /* 中心线移到左侧 */
    .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; text-align: left !important; } /* 所有项都在右侧排列，文本居左 */
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; } 
    .timeline-icon, .timeline-item:nth-child(even) .timeline-icon { left: 15px; } /* 图标移到左侧 */
    .timeline-content {
        width: 100%; /* 在移动端，内容块宽度占满 */
        display: block; /* 在移动端恢复为block */
    }
}

/* 5.3.3 "关于我们" - 软件能力 (Capabilities Grid) */
.capabilities-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; 
}
.capability-item { 
    background-color: #ffffff; 
    padding: 25px; 
    border-radius: 8px; 
    text-align: center; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.07); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.capability-item:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
}
.capability-icon { 
    width: 60px; height: 60px; 
    margin-bottom: 15px; /* 原为-10px，调整为正值避免与文字重叠 */
}
.capability-item h4 { 
    font-size: 1.2em; 
    color: var(--color-light-text-primary); 
    margin-top: 0; /* 图标下方已有间距 */
    margin-bottom: 10px; 
    font-weight: 600; 
}
.capability-item p { 
    font-size: 0.9em; 
    color: var(--color-light-text-secondary); 
    line-height: 1.6; 
}

/* 5.3.4 "关于我们" - 对比优势 (Comparison List) */
.comparison-list { 
    list-style: none; 
    padding: 0; 
    max-width: 800px; 
    margin: 0 auto; 
}
.comparison-list li { 
    background-color: #ffffff; 
    padding: 20px; 
    margin-bottom: 15px; 
    border-radius: 6px; 
    border-left: 5px solid var(--color-light-accent); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
}
.comparison-list li strong { 
    color: var(--color-light-text-primary); 
    font-size: 1.1em; 
    display: block; 
    margin-bottom: 8px; /* 原为-15px，调整为正值 */
}
.comparison-list li em { 
    font-style: normal; /* 保持正常字体 */
    font-weight: 500; 
    color: var(--color-light-text-primary); /* 将AIgraver的优势部分也用主文字颜色 */
    /* 如果希望AIgraver的优势部分文字颜色不同，可以改为 var(--color-light-text-secondary) 或其他 */
}
.comparison-list li span { /* 其他：传统/其他部分文字 */
    color: var(--color-light-text-secondary);
}


/* 5.3.5 "关于我们" - 联系我们模块 (#connect-with-us on About Us page) */
#connect-with-us .container {
    text-align: center; 
}
#connect-with-us .page-intro {
    margin-bottom: 40px;
}
#connect-with-us .contact-main-info {
    margin-bottom: 30px;
    text-align: center; 
}
#connect-with-us .contact-main-info > p:first-child { /* 邮箱那一行 */
    font-size: 1.1em; 
    margin-bottom: 15px;
    text-align: center;
}
#connect-with-us .contact-main-info a { 
    color: var(--color-light-accent); 
    text-decoration: none; 
}
#connect-with-us .contact-main-info a:hover { 
    text-decoration: underline; 
}
#connect-with-us .qr-code-contact {
    margin-top: 20px;
    display: inline-block; /* 使其能被父级的text-align:center居中 */
    text-align: center; /* 内部内容居中 */
}
#connect-with-us .qr-code-contact img { 
    width: 130px; /* 原为140px */
    height: 130px;/* 原为140px */
    border: 1px solid var(--color-light-border); /* 原为3px */
    border-radius: 4px; /* 原为6px */
    display: block; /* 允许使用 margin:auto 居中 */
    margin: 0 auto 5px auto; /* 顶部0，左右自动，底部5px */
}
#connect-with-us .qr-code-contact p { 
    font-size: 0.9em; 
    color: var(--color-light-text-secondary); 
    margin-top: 5px; 
}
#connect-with-us .social-media-title { 
    font-size: 1.3em; 
    color: var(--color-light-text-primary); 
    margin-top: 40px; /* 原为50px */
    margin-bottom: 20px; 
    font-weight: 600; 
    text-align: center;
}
#connect-with-us .social-media-icons { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    flex-wrap: wrap; 
}
#connect-with-us .social-media-icons a img { 
    width: 40px; height: 40px; 
    opacity: 0.7; 
    transition: opacity 0.3s ease, transform 0.3s ease; 
}
#connect-with-us .social-media-icons a:hover img { 
    opacity: 1; 
    transform: scale(1.1); 
}


/* 5.4 解决方案页面 (Solutions Page - solutions.html) */
/* .solutions-page-content 的基本背景和文字颜色已在 4.1 中定义 */
.solutions-page-content .page-intro {
    margin-bottom: 60px; 
}

/* 5.4.1 解决方案 - 版本介绍卡片 */
.solution-version-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 35px;
    margin-bottom: 80px;
}
.version-card {
    background-color: #ffffff;
    border: 1px solid var(--color-light-border);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(44, 62, 80, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.version-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(44, 62, 80, 0.12);
}
.recommended-badge { /* “企业推荐”等徽章 */
    display: inline-block;
    background-color: var(--color-light-accent);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 10px;
    vertical-align: middle;
}
.version-card.recommended .recommended-badge { /* 定位在卡片顶部的推荐徽章 */
    position: absolute;
    top: -15px; 
    left: 50%;
    transform: translateX(-50%); 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 6px 18px;
    font-size: 0.85em;
}
.version-header {
    padding: 30px 30px 20px 30px;
    border-bottom: 1px solid var(--color-light-border);
    text-align: center;
}
.version-header h2 {
    font-size: 1.8em; 
    color: var(--color-light-text-primary);
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 700;
}
.version-tagline {
    font-size: 1em;
    color: var(--color-light-text-secondary);
    min-height: 2.5em; /* 确保多行标语高度一致 */
    line-height: 1.5;
}
.version-body {
    padding: 30px;
    flex-grow: 1; /* 使内容区域占据剩余空间 */
}
.version-body p strong { /* “目标用户：”后的加粗文字 */
    color: var(--color-light-text-primary);
    font-weight: 600;
}
.version-body h4 { /* 功能组标题 */
    font-size: 1.15em;
    color: var(--color-light-accent);
    margin-top: 25px;
    margin-bottom: 12px;
    font-weight: 600;
    border-bottom: 1px dashed var(--color-light-border);
    padding-bottom: 8px;
}
.version-body h4:first-of-type { /* 第一个功能组标题无上外边距 */
    margin-top: 0;
}
.version-body ul { /* 功能列表 */
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}
.version-body ul li {
    margin-bottom: 10px; 
    font-size: 0.95em;
    color: var(--color-light-text-secondary);
    line-height: 1.6;
    display: flex; /* 用于对齐图标和文本 */
    align-items: center; /* 顶部对齐 */
}
.text-icon { /* ✅ ⭐ ✔️ 等文本图标 */
    margin-right: 8px; 
    display: inline-flex;   /* 使用 inline-flex 更好地控制内部SVG的对齐 */
    align-items: center;    /* 垂直居中SVG */
    justify-content: center;  /* 水平居中SVG */
    width: 1.2em;           /* 给一个相对父级font-size的宽度 */
    height: 1.2em;          /* 和相对高度 */
    line-height: 1;         /* 确保line-height不会干扰 */
    flex-shrink: 0;
}
.svg-icon svg {
    width: 100%; /* SVG 宽度充满 .text-icon */
    height: 100%;/* SVG 高度充满 .text-icon */
    display: block; /* 避免底部多余空间 */
}
.text-icon.check-mark .svg-icon-check svg, 
.text-icon.check-icon-small .svg-icon-check svg {
    stroke: #28a745; /* 绿色线条 */
    fill: none;      /* 线条勾号不需要填充 */
    stroke-width: 2.5; /* 可以调整线条粗细 */
}

.text-icon.star-icon .svg-icon-star svg {
    fill: #ffc107;   /* 星星填充金色 */
    stroke: #e0a800; /* 星星边框稍暗的金色 */
    stroke-width: 1; /* 星星SVG通常自带边框或不需要额外边框，根据SVG调整 */
}.version-footer { /* 卡片底部 */
    padding: 25px 30px 30px 30px;
    text-align: center;
    border-top: 1px solid var(--color-light-border);
    margin-top: auto; /* 将页脚推到卡片底部 */
}
.version-footer .btn-primary { 
    width: 100%;
    padding: 14px 20px;
    font-size: 1.05em;
    text-transform: uppercase;
}

/* 5.4.2 解决方案 - 对比表格 */
.solution-comparison-table-wrapper {
    overflow-x: auto; /* 允许水平滚动 */
    padding-top: 60px; /* 与上方间距 */
    margin-bottom: 40px; /* 与下方CTA间距 */
}
.comparison-table {
    width: 100%; 
    min-width: 700px; /* 表格最小宽度，确保内容不被过度压缩 */
    border-collapse: separate; /* 使用 separate 以便应用 border-radius 和 border-spacing */
    border-spacing: 0; 
    font-size: 0.9em; 
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); 
    border-radius: 10px; 
    background-color: #fff; 
    border: 1px solid var(--color-light-border); 
    overflow: hidden; /* 配合 border-radius */
}
.comparison-table th, .comparison-table td {
    border-bottom: 1px solid var(--color-light-border); 
    border-right: 1px solid var(--color-light-border); 
    padding: 15px 18px; 
    text-align: left; 
    vertical-align: middle; 
}
.comparison-table tr:last-child td { border-bottom: none; } /* 最后一行单元格无底边框 */
.comparison-table th:last-child, .comparison-table td:last-child { border-right: none; } /* 最后一列单元格无右边框 */
.comparison-table thead th {
    background-color: #f8f9fa; 
    color: var(--color-light-text-primary); 
    font-weight: 600; 
    font-size: 1.05em; 
    /* border-top-left-radius and border-top-right-radius handled by table's overflow:hidden and border-radius */
}
.comparison-table thead th:first-child { width: 28%; }
.comparison-table tbody td:not(:first-child) { text-align: center; } /* 数据列居中 */
.comparison-table .table-subheader td { /* 表格中的子标题行 */
    background-color: #eef1f5; 
    font-weight: bold; 
    color: var(--color-light-text-primary); 
    font-size: 0.95em;
    text-align: left !important; 
    border-top: 2px solid var(--color-light-border); 
}
.comparison-table .check-mark-table { color: #28a745; font-size: 1.3em; font-weight: bold; } /* ✔ */
.comparison-table .cross-mark-table { color: #bbbfc3; font-size: 1.3em; font-weight: bold; } /* ✘ */
.comparison-table .benefit-highlight-table { color: var(--color-light-accent); font-weight: 600; }
.comparison-table small { display: block; font-size: 0.9em; color: var(--color-light-text-secondary); margin-top: 4px; }
.comparison-table .btn-small { padding: 8px 18px; font-size: 0.9em; }
.comparison-table .cta-cell-table { padding-top: 20px; padding-bottom: 20px; text-align: center !important; }
.text-muted-table { color: var(--color-light-text-secondary); font-style: italic; font-size: 0.9em; }

/* 5.4.3 解决方案 - 页面底部统一CTA和链接 */
.solution-cta-unified { /* “联系我们获取定制报价”按钮容器 */
    text-align: center; 
    padding-top: 50px;  
    padding-bottom: 50px; 
}
/* .solution-cta-unified .btn-large-trial 或 .cta-gradient-button 的样式已在通用按钮部分定义 */
.solution-cta-unified p { /* CTA按钮下方说明文字 */
    margin-top: 15px; 
    font-size: 0.9em; 
    color: var(--color-light-text-secondary); 
}
.table-footer-cta { /* 表格下方“查看对比优势”链接区域 */
    text-align: center; 
    margin-top: 30px; 
    font-size: 1.1em; 
}
.link-styled { /* 通用带下划线链接样式 */
    color: var(--color-light-accent); 
    text-decoration: underline; 
    font-weight: 500; 
}
.link-styled:hover {
    color: var(--color-dark-accent-hover); /* 使用已定义的悬停颜色 */
    text-decoration: none; 
}

/* 5.5 联系我们页面特定样式 (如果 contact.html 是真正的联系表单页面) */
/* .contact-page-content 的基本背景和文字颜色已在 4.1 中定义 */
.contact-page-content .contact-card { /* 联系信息卡片 */
    background-color: #ffffff;
    border: 1px solid var(--color-light-border);
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    padding: 30px; /* 示例内边距 */
    border-radius: 8px;
}
.contact-page-content .contact-card h3 {
    color: var(--color-light-accent);
    margin-top: 0;
}
.contact-page-content .qr-contact img { /* 二维码（如果使用）*/
    width: 130px; height: 130px; 
    margin: 10px auto; 
    display: block;
    border: 3px solid var(--color-light-border);
}
/* 表单相关样式见下方通用组件部分 */


/* ==========================================================================
   6. 通用组件样式 (Common Components)
   ========================================================================== */

/* 6.1 通用按钮样式 (.btn, .btn-primary, .btn-secondary) */
.btn { 
    display: inline-block; 
    padding: 10px 25px; 
    margin: 5px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: bold; 
    transition: all 0.2s ease; 
    cursor: pointer; 
    border: 2px solid transparent; 
    text-transform: uppercase; 
}
/* 主要按钮 */
.btn-primary { 
    background-color: var(--color-dark-accent); 
    color: var(--color-dark-background); /* 深色背景配深色文字可能不佳，改为#fff? */
    border-color: var(--color-dark-accent);
}
.btn-primary:hover { 
    background-color: var(--color-dark-accent-hover); 
    border-color: var(--color-dark-accent-hover); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.3); 
}
/* 浅色主题下的主要按钮 (btn-primary on light background) */
.light-theme-active .btn-primary,
body.light-theme-active .btn-primary, /* 更明确指定在浅色主题body下的按钮 */
#demo-video .btn-primary, 
#core-value .btn-primary, 
#showcase .btn-primary,
.solutions-page-content .btn-primary, 
.about-us-page-content .btn-primary,
.contact-page-content .btn-primary {
    background-color: var(--color-light-accent); 
    color: #ffffff; /* 亮色按钮配白色文字 */
    border-color: var(--color-light-accent);
}
.light-theme-active .btn-primary:hover,
body.light-theme-active .btn-primary:hover,
#demo-video .btn-primary:hover, 
#core-value .btn-primary:hover, 
#showcase .btn-primary:hover,
.solutions-page-content .btn-primary:hover, 
.about-us-page-content .btn-primary:hover,
.contact-page-content .btn-primary:hover {
    background-color: var(--color-dark-accent-hover); /* 使用已定义的悬停颜色 */
    border-color: var(--color-dark-accent-hover);
}
/* 次要按钮 */
.btn-secondary { 
    background-color: transparent; 
    color: var(--color-aigraver-hero-text); /* 暗色主题下次要按钮文字 */
    border-color: var(--color-dark-border); 
}
.btn-secondary:hover { 
    background-color: var(--color-aigraver-hero-text); 
    color: var(--color-dark-background); 
    border-color: var(--color-aigraver-hero-text); 
    transform: translateY(-2px); 
}
/* 浅色主题下的次要按钮 (btn-secondary on light background) */
.light-theme-active .btn-secondary,
body.light-theme-active .btn-secondary { 
    color: var(--color-light-text-primary); /* 浅色主题下次要按钮文字 (深色) */
    border-color: var(--color-light-border); 
}
.light-theme-active .btn-secondary:hover,
body.light-theme-active .btn-secondary:hover { 
    background-color: var(--color-light-text-primary); /* 悬停背景深色 */
    color: var(--color-light-background);      /* 悬停文字浅色 */
    border-color: var(--color-light-text-primary);
}

/* 6.2 新的咨询报价按钮样式 (CTA Gradient Button) */
/* (用于 solutions.html 等页面的特定CTA按钮) */
.cta-gradient-button {
    min-width: 9em; 
    height: 3.5em;   
    border-radius: 30em; /* 胶囊形状 */
    font-size: 16px;     
    font-family: var(--font-primary); 
    color: #000000 !important; /* 文字黑色，!important确保覆盖 */
    border: none;        
    position: relative;  
    overflow: hidden;    
    z-index: 1;          
    cursor: pointer;     
    text-decoration: none; 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    padding: 0 2em;      
    background-color: #e8e8e8; /* 新拟态风格底色 */
    box-shadow: 6px 6px 12px #c5c5c5,
                -6px -6px 12px #ffffff; /* 新拟态阴影 */
    transition: color 0.5s ease, box-shadow 0.3s ease;
}
.cta-gradient-button::before { /* 渐变背景层 */
    content: '';        
    width: 0;           /* 初始隐藏 */
    height: 100%;       
    border-radius: 30em; 
    position: absolute; 
    top: 0; left: 0;
    background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%); /* 渐变色 */
    transition: width 0.5s ease; 
    display: block;
    z-index: -1; /* 在文字下方 */
}
.cta-gradient-button:hover {
    color: #000000 !important; /* 悬停时文字依然黑色 */
    box-shadow: inset 2px 2px 5px #c5c5c5,
                inset -2px -2px 5px #ffffff, /* 注意这里原为#00000，改为#ffffff以匹配新拟态风格 */
                3px 3px 8px rgba(0,0,0,0.1), /* 外部阴影稍微减弱，原为#c5c5c5 */
                -3px -3px 8px rgba(255,255,255,0.7); /* 原为#00000 */
}
.cta-gradient-button:hover::before {
    width: 100%; /* 悬停时显示渐变背景 */
}


/* 6.3 表单元素通用样式 (Form Elements) */
form label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 500; 
    font-size: 0.95em; 
    color: var(--color-light-text-primary); /* 确保在浅色背景下可见 */
}
form input[type="text"], 
form input[type="email"], 
form input[type="tel"], 
form textarea {
    width: 100%; /* 配合box-sizing: border-box (如果全局设置了) */
    padding: 12px; 
    margin-bottom: 18px; 
    border: 1px solid var(--color-light-border); 
    border-radius: 4px; 
    background-color: #ffffff; 
    color: var(--color-light-text-primary);
    font-size: 1em; 
    box-sizing: border-box; /* 确保 padding 和 border 不会增加总宽度 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
form input[type="text"]:focus, 
form input[type="email"]:focus, 
form input[type="tel"]:focus, 
form textarea:focus {
    border-color: var(--color-light-accent); 
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.2); /* 聚焦外发光 */
}
form textarea { 
    resize: vertical; /* 只允许垂直调整大小 */
    min-height: 100px;
}
form button[type="submit"] { /* 表单提交按钮，可复用 .btn .btn-primary */
    /* width: auto; /* 默认auto，或设为100% */
    margin-top: 10px;
}
/* 联系我们页面的特定表单布局 (如果使用 #mainContactForm) */
#mainContactForm .form-row { 
    display: flex;
    gap: 25px;
    margin-bottom: 0; /* input自带margin-bottom，这里设为0，由input控制 */
}
#mainContactForm .form-row .form-group { /* 表单行内的单个表单组 */
    flex: 1; /* 平均分配宽度 */
    margin-bottom: 18px; /* 补回组的底部间距 */
}
#mainContactForm .form-row .form-group:last-child {
    /* margin-bottom: 18px; (如果需要) */
}


/* 6.4 状态消息提示 (Status Messages for Forms) */
.status-message { 
    margin-top:15px; padding: 10px 15px; border-radius: 4px; 
    text-align: center; font-size: 0.95em; 
    display: none; /* JS控制显示 */
}
.status-message.status-success { 
    background-color: rgba(40, 167, 69, 0.1); 
    color: #28a745; 
    border: 1px solid rgba(40, 167, 69, 0.3); 
}
.status-message.status-error { 
    background-color: rgba(220, 53, 69, 0.1); 
    color: #dc3545; 
    border: 1px solid rgba(220, 53, 69, 0.3); 
}


/* ==========================================================================
   7. 页脚 (Footer)
   ========================================================================== */
.main-footer { 
    background-color: #141414; /* 页脚默认深色背景 */
    color: var(--color-dark-text-secondary);
    min-height: 90px;
    display: flex;
    align-items: center;
    padding: 20px 0; /* 页脚默认上下内边距 */
}
/* 当页脚应用浅色主题时 (通常配合 body.light-theme-active) */
.main-footer.light-theme-active { 
    background-color: #e9e8e3; /* 页脚浅色背景 (比主浅色背景稍暗) */
    color: var(--color-light-text-secondary);
}
.main-footer .container {
    width: 90%; 
    max-width: 1140px; 
    margin: 0 auto;
    padding: 0 15px;
    text-align: center;
}
.main-footer .container p { 
    margin: 5px 0;
}
.main-footer a { 
    color: var(--color-dark-accent); /* 深色主题下链接颜色 */
    text-decoration: none;
}
.main-footer.light-theme-active a { 
    color: var(--color-light-accent); /* 浅色主题下链接颜色 */
}
.main-footer a:hover { 
    text-decoration: underline; /* 悬停显示下划线 */
}


/* ==========================================================================
   8. 试用覆盖层/模态框 (Trial Overlay / Modal)
   ========================================================================== */
.trial-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(15, 15, 15, 0.95); /* 深色半透明背景 */
    z-index: 2000;
    opacity: 0; visibility: hidden; /* 初始隐藏 */
    transform: translateY(30px); /* 入场动画偏移 */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0s 0.4s;
    display: flex; align-items: center; justify-content: center;
    overflow-y: auto; /* 内容过长时允许滚动 */
}
.trial-overlay.active { /* JS添加此类以显示 */
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    transition-delay: 0s, 0s, 0s !important; /* 确保visibility立即生效 */
}
.trial-overlay-content { 
    width: 100%; height: 100%; 
    padding: 60px; 
    box-sizing: border-box;
    color: var(--color-aigraver-hero-text); /* 模态框内文字颜色 */
    overflow-y: auto;
    display: flex; align-items: center; justify-content: center;
}
.trial-overlay-close-button { /* 关闭按钮 "×" */
    position: absolute; top: 30px; right: 40px;
    font-size: 2.8em;
    color: var(--color-dark-text-secondary);
    background: none; border: none;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1; padding: 0; 
    z-index: 2001; /* 确保在内容之上 */
}
.trial-overlay-close-button:hover { 
    color: var(--color-aigraver-hero-text);
    transform: rotate(90deg) scale(1.1);
}
.trial-main-html-placeholder { text-align: center; } /* 占位符内容 */
.trial-main-html-placeholder h2 {
    font-size: 2.8em; 
    color: var(--color-aigraver-hero-text);
    margin-bottom: 25px; 
    font-family: var(--font-primary); 
    font-weight: 700;
}
.trial-main-html-placeholder p {
    font-size: 1.3em; 
    color: var(--color-dark-text-secondary);
    line-height: 1.7;
}

/* ==========================================================================
   9. 文本和链接的通用辅助样式 (Text & Link Utility Styles)
   ========================================================================== */
/* 确保浅色主题区域内的文本和链接颜色正确 */
.solutions-page-content p, .solutions-page-content li,
.about-us-page-content p, .about-us-page-content li,
.contact-page-content p, .contact-page-content li {
    /* 默认段落和列表项颜色已由 body.light-theme-active 或其父级区域设置 */
    /* color: var(--color-light-text-secondary); /* 可选，如果需要更明确指定 */
}
.solutions-page-content h3, .solutions-page-content strong,
.about-us-page-content h3, .about-us-page-content strong,
.contact-page-content h3, .contact-page-content strong { 
    /* color: var(--color-light-text-primary); /* 通常标题和strong使用主文字色 */
}
/* 特定卡片内标题颜色 (如果需要覆盖通用设置) */
.solutions-page-content .solution-card h3 { 
    color: var(--color-light-accent); 
} 
/* 浅色主题区域内的链接 */
.solutions-page-content a, 
.about-us-page-content a,
.contact-page-content a {
    color: var(--color-light-accent);
    text-decoration: none;
}
.solutions-page-content a:hover, 
.about-us-page-content a:hover,
.contact-page-content a:hover {
    text-decoration: underline; /* 悬停显示下划线，原为none */
}

/* ==========================================================================
   10. 超级个体计划模态窗口 (Super Individual Plan Modal)
   ========================================================================== */

/* 10.1 遮罩层与窗口容器 (Overlay & Modal Container) */
.sip-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 15, 15, 0.6); /* 半透明黑色背景 */
    backdrop-filter: blur(8px); /* 背景模糊效果 */
    z-index: 3000; /* 确保在最顶层 */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s;
}

.sip-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

/* 防止背景页面滚动 */
body.sip-modal-open {
    overflow: hidden;
}

/* 10.2 模态窗口内容面板 (Content Panel) */
.sip-modal-content {
    background-color: var(--color-light-background);
    color: var(--color-light-text-primary);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 800px;
    height: 90vh; /* 视口高度的90% */
    max-height: 720px; /* 最大高度 */
    
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 隐藏内部滚动条的容器 */
    
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sip-modal-overlay.active .sip-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 10.3 关闭按钮 (Close Button) */
.sip-modal-close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    border-radius: 50%;
    color: var(--color-light-text-secondary);
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.sip-modal-close-button:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-light-text-primary);
    transform: rotate(90deg);
}

/* 10.4 可滚动内容区域 (Scrollable Container) */
.sip-modal-scroll-container {
    flex-grow: 1;
    overflow-y: auto; /* 关键：使这个容器可滚动 */
    padding: 40px 50px;
}

/* 10.5 内容排版 (Typography & Layout) */
.sip-modal-header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--color-light-border);
    padding-bottom: 25px;
}

.sip-modal-title {
    font-family: var(--font-primary);
    font-size: 2.2em;
    font-weight: 700;
    color: var(--color-light-text-primary);
    margin: 0 0 10px;
}

.sip-modal-tagline {
    font-size: 1.1em;
    color: var(--color-light-text-secondary);
    margin: 0;
}

.sip-modal-body {
    padding-bottom: 40px;
}

.sip-section {
    margin-bottom: 35px;
}

.sip-intro {
    font-size: 1.05em;
    line-height: 1.8;
    color: var(--color-light-text-secondary);
}

.sip-section-title {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-light-text-primary);
    margin-bottom: 20px;
}

.sip-checklist {
    list-style: none;
    padding-left: 0;
}
.sip-checklist li {
    display: flex;
    align-items: flex-start; /* 顶部对齐 */
    margin-bottom: 12px;
    font-size: 1em;
    line-height: 1.6;
    color: var(--color-light-text-secondary);
}
/* 复用 solutions.html 的图标样式，无需重写，但需确保其在 style.css 中已定义 */

.sip-feature-block {
    margin-bottom: 25px;
}
.sip-feature-block h4 {
    font-size: 1.2em;
    color: var(--color-light-accent);
    margin: 0 0 8px;
}
.sip-feature-block p {
    font-size: 0.95em;
    line-height: 1.7;
    margin: 0;
    color: var(--color-light-text-secondary);
}

/* 10.6 底部行动号召 (Footer & CTA) */
.sip-modal-footer {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--color-light-border);
}

.sip-footer-note {
    font-size: 0.85em;
    color: var(--color-light-text-secondary);
    margin-top: 15px;
}

/* 10.7 响应式设计 (Responsive Design) */
@media (max-width: 768px) {
    .sip-modal-content {
        width: 95%;
        height: 95vh;
        max-height: none;
    }
    .sip-modal-scroll-container {
        padding: 30px 25px;
    }
    .sip-modal-title {
        font-size: 1.8em;
    }
    .sip-modal-tagline {
        font-size: 1em;
    }
    .sip-section-title {
        font-size: 1.3em;
    }
}

/* ================================================================ */
/* == 解决方案页面卡片底部的行动号召区样式 (最终Flexbox版) == */
/* ================================================================ */

.version-footer {
    /* 1. 将其声明为Flex容器 */
    display: flex;
    
    /* 2. 让子元素在垂直方向上排列 */
    flex-direction: column;
    
    /* 3. 让所有子元素在交叉轴上（即水平方向）居中 */
    align-items: center; 
    
    /* 保持原有的内边距和边框 */
    padding: 25px 30px;
    margin-top: 20px;
    border-top: 1px solid var(--color-light-border);
}

.version-footer .btn {
    /* 按钮不再需要 display: inline-block 或 width: 100% */
    /* 只需要保留它作为按钮本身的样式即可 */
    margin-bottom: 15px; /* 与下方文字的间距 */
    padding: 12px 5px;  /* 给予一个舒适的内边距，让按钮看起来更大方 */
}

.version-footer .action-secondary {
    /* 这部分样式保持不变 */
    font-size: 0.9em;
    color: var(--color-light-text-secondary);
}

/* ================================================================ */
/* == 品牌架构优化样式 (Brand Architecture Styles) == */
/* ================================================================ */

/* --- 1. 导航栏Logo区域新样式 --- */

/* 新的logo容器，允许垂直排列 */
.logo-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左对齐 */
    text-decoration: none;
}

/* 主logo部分 (AIgraver) */
.main-logo {
    display: flex;
    align-items: center;
}

/* “由来朵米荣誉出品” 的副品牌样式 (优化版) */
.sub-brand {
    font-size: 12px; /* 使用固定的px值，避免受父级影响，更稳定 */
    font-weight: 500; /* 使用更细的字重 */
    color: var(--color-aigraver-hero-text); /* 在Hero区，颜色与主品牌文字统一 */
    margin-top: -2px; /* 进一步微调垂直间距 */
    margin-left: 53px; /* 进一步微调水平对齐 */
    letter-spacing: 0.8px; /* 增加字间距，提升精致感 */
    opacity: 0.6; /* 降低不透明度，让其更像背景的一部分 */
    transition: all 0.4s ease; /* 过渡效果更平滑 */
    white-space: nowrap; /* 防止文字意外换行 */
}

/* 导航栏滚动后，副品牌文字颜色变化 */
.global-header.reveal-nav .sub-brand {
    color: var(--color-light-text-secondary);
    opacity: 0.8; /* 滚动后可以稍微清晰一点 */
}

/* --- 2. Hero区域Slogan体系新样式 --- */

/* “来朵米，呈献” 的样式 */
.hero-content .brand-presenter {
    font-size: 1.8em; /* 字体大小适中 */
    font-weight: 500;
    color: var(--color-aigraver-hero-text);
    opacity: 0.8;
    margin-bottom: 0px; /* 紧贴主品牌名 */
    letter-spacing: 1px;
}

/* 主品牌名 (AIgraver)，调整与上下的间距 */
.hero-content .brand-name-hero {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* “你的专属AI雕刻师” 的样式 (优化版) */
.hero-content .brand-definition {
    font-size: 2.4em; /* 稍微再大一点，更醒目 */
    font-weight: 500;
    font-family: 'Noto Sans SC', sans-serif; /* 明确使用更柔和的中文黑体 */
    color: var(--color-aigraver-hero-text);
    margin: 0 auto;
    line-height: 1.6;
    letter-spacing: 1px; /* 增加呼吸感 */
}

/* 主Slogan (降本增效...) (优化版) */
.hero-content .slogan-hero {
    font-size: 1.3em; /* 大幅缩小字号，作为辅助说明 */
    font-weight: 400; /* 使用常规字重 */
    color: var(--color-aigraver-hero-text);
    opacity: 0.75; /* 降低不透明度，与definition形成对比 */
    margin-top: 25px; /* **大幅增加**与上方definition的间距，拉开层次 */
    margin-bottom: 150px;
    max-width: 80%;
    letter-spacing: 0.5px;
}

/* ================================================================ */
/* == solutions.html V11.0 美学与布局终极优化 == */
/* ================================================================ */

/* 1. 四卡片并排布局 (Four Cards Layout) */
.solution-version-details {
    display: grid;
    /* 核心指令：强制将可用空间分为4等份 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; /* 卡片之间的间距 */
    align-items: stretch; /* 确保所有卡片等高 */
}

/* 2. 全新系列徽章样式 (Series Badge) */
.version-card {
    position: relative; /* 为徽章定位提供基准 */
    padding-top: 45px; /* 为徽章留出充足的顶部空间 */
    display: flex; /* 让卡片内部也使用flex布局，方便页脚对齐 */
    flex-direction: column; /* 内部元素垂直排列 */
}

.version-body {
    flex-grow: 1; /* 让卡片主体内容占据所有可用空间，将页脚推到底部 */
}

.version-series-badge {
    position: absolute;
    top: 0;
    left: -1px; /* 稍微移出卡片，与边框重合 */
    background-color: var(--color-light-accent);
    color: #ffffff;
    padding: 5px 15px;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px 0 12px 0; /* 独特的圆角设计 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 创客赋能系列的徽章颜色 */
.version-series-badge.series-maker {
    background-color: #ffc107; /* 金色，与星形图标呼应 */
}

/* 3. 对比表格中的新文本样式 */
.comparison-table .text-addon-discount {
    color: var(--color-light-text-secondary);
    font-weight: 500;
    font-size: 0.95em;
}

/* 4. 价值维度板块中，第四个卡片的特殊列表样式 */
.value-dimensions .policy-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}
.value-dimensions .policy-list li {
    margin-bottom: 15px;
}
.value-dimensions .policy-list li strong {
    display: block;
    color: var(--color-light-text-primary);
    font-size: 1.05em;
    margin-bottom: 5px;
}
.value-dimensions .policy-list li p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.6;
}

/* 5. 响应式设计：确保在不同屏幕尺寸下的优雅降级 */
@media (max-width: 1200px) {
    /* 在1200px以下，变为两列 */
    .solution-version-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* 在768px以下，变为单列 */
    .solution-version-details {
        grid-template-columns: 1fr;
    }
}

/* ================================================================ */
/* == [新增修复] 价值维度板块样式 (Value Dimensions Section) == */
/* ================================================================ */

.solution-section-title {
    text-align: center;
    font-size: 2.2em;
    font-weight: 700;
    color: var(--color-light-text-primary);
    margin-bottom: 20px;
}

.dimensions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 创建一个两列的网格 */
    gap: 30px; /* 网格项之间的间距 */
}

.dimension-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    display: flex; /* 使用Flex布局，让图标和内容并排 */
    align-items: flex-start; /* 顶部对齐 */
    border: 1px solid var(--color-light-border);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dimension-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.dimension-icon {
    width: 50px; /* 限制图标容器的宽度 */
    height: 50px; /* 限制图标容器的高度 */
    margin-right: 25px; /* 图标和右侧内容的间距 */
    flex-shrink: 0; /* 防止图标在空间不足时被压缩 */
}

.dimension-icon img {
    width: 100%;
    height: 100%;
}

.dimension-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: 700;
}

.dimension-content p {
    margin: 0;
    line-height: 1.7;
    color: var(--color-light-text-secondary);
}

/* 价值维度板块的响应式设计 */
@media (max-width: 992px) {
    .dimensions-grid {
        grid-template-columns: 1fr; /* 在平板和手机上，变为单列堆叠 */
    }
}

/* ==========================================================================
   11. 移动端导航样式 (Mobile Navigation Styles)
   ========================================================================== */

/* --- 11.1 默认状态 (电脑视图) --- */
/* 首先，在默认情况下隐藏所有为手机准备的元素 */

.mobile-nav-toggle {
    display: none; /* 默认隐藏汉堡按钮 */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1550; /* 确保它在导航栏其他元素之上 */
}

.mobile-nav-panel {
    display: none; /* 默认隐藏手机菜单面板 */
}


/* --- 11.2 媒体查询：当屏幕变窄时 (手机视图) --- */
/* 这是魔法发生的地方。下面的所有样式，只在屏幕宽度小于等于 768px 时生效 */

@media (max-width: 768px) {

    /* 1. 隐藏电脑版导航，显示手机版汉堡按钮 */
    .main-nav {
        display: none; /* 隐藏原始的、横向的导航链接容器 */
    }

    .mobile-nav-toggle {
        display: block; /* 在手机上，把汉堡按钮显示出来 */
    }

    /* 2. 调整汉堡按钮的颜色以适应不同背景的导航栏 */
    .global-header.on-hero .mobile-nav-toggle {
        color: var(--color-aigraver-hero-text); /* 在Hero区时，是浅色 */
    }
    .global-header.reveal-nav .mobile-nav-toggle {
        color: var(--color-light-text-primary); /* 滚动后，是深色 */
    }

        /* 3. 手机菜单面板的样式 (优化版) */
    .mobile-nav-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 修改：不再垂直居中，而是从顶部开始，给一些内边距 */
        justify-content: flex-start;
        padding-top: 15px; /* 从顶部留出距离 */
        box-sizing: border-box;
        
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        /* 修改：提高z-index，确保它在最顶层 */
        z-index: 1500; /* 原导航栏是1000，这个值比它大即可 */
        
        /* 修改：使用一个更不透明的背景色 */
        background-color: rgba(15, 15, 15, 1); /* 更深、更实的背景 */
        backdrop-filter: blur(15px); /* 可以适当增强模糊效果 */

        /* 动画效果的准备：默认看不见 (这部分保持不变) */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    }
    
    /* 4. 当菜单面板被JS激活时 (我们将在下一步实现) */
    .mobile-nav-panel.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /* 5. 手机菜单面板里的链接样式 */
    .mobile-nav-panel .mobile-nav-links {
        display: flex;
        flex-direction: column; /* 链接垂直排列 */
        align-items: stretch; /* 修改：让链接按钮宽度一致 */
        text-align: center;   /* 文字居中 */
        gap: 25px;              /* 链接之间的间距 */
    }

    .mobile-nav-panel .nav-link,
    .mobile-nav-panel .trial-button {
        font-size: 1.2em; /* 手机上链接字体要大一些，方便点击 */
        color: var(--color-aigraver-hero-text);
        margin: 0; /* 清除原来的外边距 */
        padding: 8px 10px; /* 增加内边距，撑开背景 */
        background-color: rgba(68, 181, 230, 0.8); /* 半透明白色背景 */
        border-radius: 30px; /* 圆角（胶囊形状） */
        text-decoration: none;
        transition: background-color 0.2s ease;
    }
    
    .mobile-nav-panel #superIndividualPlanButtonMobile {
    background-color: rgba(255, 193, 7, 0.8); /* 一个黄色 */
    color: #333; /* 文字颜色可能需要变成深色以保证清晰 */
    transition: background-color 0.2s ease-in-out;
}
    .mobile-nav-panel #superIndividualPlanButtonMobile:hover,
    .mobile-nav-panel #superIndividualPlanButtonMobile:active {
    background-color: transparent;
    color: #ffc107;
}

    /* 简化手机菜单里的“超级个体计划”和“语言切换”按钮 */
    .mobile-nav-panel .uiverse {
        background: none;
        box-shadow: none;
        --c-color: var(--color-aigraver-hero-text);
        font-size: 1.2em;
    }
    .mobile-nav-panel .uiverse .wrapper {
        padding: 5px;
    }
    .mobile-nav-panel .uiverse .circle {
        display: none; /* 隐藏复杂的动画效果，简化UI */
    }
    .mobile-nav-panel .language-switcher {
        margin: 0;
        font-size: 1.2em;
    }
    .mobile-nav-panel .language-switcher .lang-option {
         color: var(--color-aigraver-hero-text);
    }
    .mobile-nav-panel .language-switcher .lang-option.active {
        color: var(--color-dark-accent);
    }
    
    /* 6. (可选优化) 当菜单打开时，汉堡按钮变成 'X' */
    .mobile-nav-toggle.is-active svg .line1 {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .mobile-nav-toggle.is-active svg .line2 {
        opacity: 0;
    }
    .mobile-nav-toggle.is-active svg .line3 {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    .mobile-nav-toggle svg line {
        transition: all 0.3s ease-in-out;
        transform-origin: center;
    }

}

/* ==========================================================================
   12. 响应式布局调整 - 首页模块
   ========================================================================== */

/* --- 12.1 AI杰作巡礼 (#showcase) 模块 --- */

/* 默认（桌面）状态：我们明确指定为三列，以获得更稳定的布局 */
#showcase .case-study-gallery {
    grid-template-columns: repeat(3, 1fr);
}

/* 中等屏幕（平板）：变为两列 */
@media (max-width: 768px) {
    #showcase .case-study-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 小型屏幕（手机）：变为单列，并微调标题样式 */
@media (max-width: 480px) {
    #showcase .case-study-gallery {
        grid-template-columns: 1fr; /* 强制单列 */
        gap: 20px; /* 可以适当减小卡片间距 */
    }

    #showcase .case-item .case-title {
        font-size: 1.1em; /* 稍微增大标题字体，使其更清晰 */
        padding: 15px 20px; /* 增加内边距，让文字不那么拥挤 */
    }
}

/* --- 12.2 Hero区域 (#hero) 响应式调整 --- */

@media (max-width: 768px) {
    
    /* 调整Hero区域的内边距，给内容更多空间 */
    .hero-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 调整主品牌名的字体大小和下方间距 */
    .hero-content .brand-name-hero {
        font-size: clamp(60px, 18vw, 120px); /* 减小字体，最小60px，理想18vw */
        margin-bottom: 20px; /* 大幅减小下边距，原为80px */
    }
    
    /* 调整“呈献”部分的字体大小和间距 */
    .hero-content .brand-presenter {
        font-size: 1.2em;
        margin-bottom: 15px;
    }
    
    /* 调整“定义”部分的字体大小 */
    .hero-content .brand-definition {
        font-size: 1.5em; /* 原为2.4em，大幅减小 */
    }

    /* 调整“Slogan”部分的字体大小和间距 */
    .hero-content .slogan-hero {
        font-size: 1.0em; /* 原为1.3em */
        max-width: 90%;   /* 允许占用更多宽度 */
        margin-top: 20px; /* 减小与上方definition的间距 */
        margin-bottom: 120px; /* 减小与下方滚动箭头的间距 */
    }
    
    /* 向下滚动箭头向上移动一点 */
    .scroll-down-indicator {
        bottom: 30px; /* 原为50px */
    }
}

/* --- 12.3 "关于我们"页面 - 核心能力模块响应式调整 --- */

@media (max-width: 992px) {
    
    /* 1. 在平板及以下尺寸，将网格改为单列 */
    .capabilities-grid {
        grid-template-columns: 1fr;
    }

    /* 2. 将卡片内部改为Flex布局，以控制图标和内容的对齐 */
    .capability-item {
        display: flex;
        align-items: flex-start; /* 顶部对齐 */
        text-align: left;        /* 文本左对齐 */
        gap: 20px;               /* 在图标和内容之间创建间距 */
    }

    /* 3. 调整图标样式，使其不被压缩 */
    .capability-icon {
        flex-shrink: 0; /* 防止图标在flex布局中被压缩 */
        margin-bottom: 0; /* 清除原来的下边距 */
    }
    
    .capability-item h4 {
        margin-top: 5px; /* 微调标题与顶部的距离 */
    }
}

/* ==========================================================================
   13. 响应式布局调整 - 解决方案页面
   ========================================================================== */

@media (max-width: 768px) {

    /* --- 13.1 页面顶部标题和简介 --- */
    .solutions-page-content .page-title {
        font-size: 2em; /* 从 2.8em 减小 */
        margin-bottom: 20px;
    }

    .solutions-page-content .page-intro {
        font-size: 1em; /* 从 1.2em 减小 */
        margin-bottom: 40px;
    }

    /* --- 13.2 表格上方的标题 --- */
    .solution-comparison-table-wrapper .section-title-about {
        font-size: 1.5em; /* 从 2em 减小 */
        margin-bottom: 20px;
    }
    
    /* --- 13.3 主要CTA按钮 --- */
    .cta-gradient-button {
        padding: 0 1.5em; /* 减小左右内边距 */
        height: 3em; /* 减小高度 */
        font-size: 15px; /* 减小字体 */
        width: 90%; /* 使其宽度适应屏幕 */
        max-width: 320px; /* 但不要过宽 */
    }

    /* --- 13.4 价值维度板块卡片内部布局 --- */
    /* (这个模块已在您的代码中通过 .dimensions-grid 的媒体查询处理了列数，
       我们这里只调整卡片内部) */
    .dimension-card {
        flex-direction: column; /* 将flex方向改为垂直 */
        align-items: center;    /* 内容居中 */
        text-align: center;     /* 文本居中 */
    }

    .dimension-icon {
        margin-right: 0;        /* 清除右边距 */
        margin-bottom: 15px;    /* 增加下边距，与下方文字隔开 */
    }
}

/* 针对价值维度板块的特定优化，覆盖上面的设置 */
/* 当屏幕小于992px时，我们就让它变成单列左对齐 */
@media (max-width: 992px) {
    .dimensions-grid {
        grid-template-columns: 1fr;
    }
    
    .dimension-card {
        flex-direction: row; /* 保持图标和内容水平排列 */
        align-items: flex-start; /* 顶部对齐 */
        text-align: left; /* 文本左对齐 */
        gap: 20px;
    }
    
    .dimension-icon {
        margin-right: 0;
        margin-bottom: 0;
    }
}