/* 
 * Hero区域样式
 * 版本: 2.0.0
 */

.hero {
    /* 基础背景渐变 */
    background: linear-gradient(135deg, #eaf2ff 0%, var(--white-bg) 70%);
    padding: 80px 0 100px;
    position: relative;
    transition: background 0.3s ease;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden; /* 确保内容不溢出 */
    box-sizing: border-box; /* 确保padding不会增加宽度 */
    
    /* 抽象图形背景 - 更显眼 */
    background-image:
        /* 柔和的粒子效果 (更高透明度，更大尺寸) */
        radial-gradient(circle at 10% 20%, rgba(0, 123, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(0, 123, 255, 0.15) 0%, transparent 50%),
        /* 稀疏的几何网格线 (更高透明度，更密) */
        repeating-linear-gradient(45deg, rgba(0, 123, 255, 0.08) 0, rgba(0, 123, 255, 0.08) 1px, transparent 1px, transparent 20px),
        repeating-linear-gradient(-45deg, rgba(0, 123, 255, 0.08) 0, rgba(0, 123, 255, 0.08) 1px, transparent 1px, transparent 20px),
        /* 新增：抽象电路板/数据流线 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='100' height='100' fill='none'/%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23007bff' stroke-opacity='0.05' stroke-width='1'/%3E%3Cline x1='100' y1='0' x2='0' y2='100' stroke='%23007bff' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='25' cy='25' r='2' fill='%23007bff' fill-opacity='0.08'/%3E%3Ccircle cx='75' cy='75' r='2' fill='%23007bff' fill-opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
    background-size: 400px 400px, 400px 400px, 20px 20px, 20px 20px, 100px 100px;
    background-position: top left, bottom right, 0 0, 0 0, 0 0;
}

[data-theme="dark"] .hero {
    /* 基础背景渐变 */
    background: linear-gradient(135deg, rgba(58, 142, 255, 0.1) 0%, var(--light-bg) 70%);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden; /* 确保内容不溢出 */
    box-sizing: border-box; /* 确保padding不会增加宽度 */
    
    /* 抽象图形背景 (深色模式) - 更显眼 */
    background-image:
        /* 柔和的粒子效果 (更高透明度，更大尺寸) */
        radial-gradient(circle at 10% 20%, rgba(58, 142, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(58, 142, 255, 0.2) 0%, transparent 50%),
        /* 稀疏的几何网格线 (更高透明度，更密) */
        repeating-linear-gradient(45deg, rgba(58, 142, 255, 0.1) 0, rgba(58, 142, 255, 0.1) 1px, transparent 1px, transparent 20px),
        repeating-linear-gradient(-45deg, rgba(58, 142, 255, 0.1) 0, rgba(58, 142, 255, 0.1) 1px, transparent 1px, transparent 20px),
        /* 新增：抽象电路板/数据流线 */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='100' height='100' fill='none'/%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%233a8eff' stroke-opacity='0.08' stroke-width='1'/%3E%3Cline x1='100' y1='0' x2='0' y2='100' stroke='%233a8eff' stroke-opacity='00.08' stroke-width='1'/%3E%3Ccircle cx='25' cy='25' r='2' fill='%233a8eff' fill-opacity='0.12'/%3E%3Ccircle cx='75' cy='75' r='2' fill='%233a8eff' fill-opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
    background-size: 400px 400px, 400px 400px, 20px 20px, 20px 20px, 100px 100px;
    background-position: top left, bottom right, 0 0, 0 0, 0 0;
}

.hero-content {
    text-align: center;
}

.hero-text {
    margin: 0 auto;
    max-width: 700px;
}

.hero-text h1 {
    font-size: 3.2em;
    font-weight: 500; /* 赋能 生活创新 的字重改为中等 */
    line-height: 1.3;
    margin-bottom: 20px;
    color: #333333; /* 赋能 生活创新 的文字颜色改为深灰色 */
}

.hero-text h1 .highlight {
    color: #333333; /* 赋能 的文字颜色改为深灰色 */
    font-weight: 500; /* 赋能 的字重改为中等 */
}

.hero-text p {
    font-size: 1.2em;
    color: var(--light-text);
    margin-bottom: 35px;
}

/* AI 关键词高亮 */
.ai-highlight {
    /* 移除背景块相关样式 */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    display: inline; /* 恢复为内联显示 */
    margin-right: 0; /* 移除右侧间距 */
    white-space: normal; /* 恢复正常换行 */

    color: var(--primary-color); /* AI文字颜色改为网站主蓝色 */
    font-weight: 900; /* AI文字字重设置为Black */
}

[data-theme="dark"] .ai-highlight {
    background-color: transparent; /* 深色模式下也移除背景块 */
    color: var(--primary-color); /* 深色模式下AI文字颜色改为网站主蓝色 */
}

.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white-bg);
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1em;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: var(--primary-hover);
    color: var(--white-bg);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
}

.hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-image: var(--wave-bg-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom;
    margin-bottom: -1px; /* 消除底部可能的间隙 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hero {
        padding: 80px 0 80px; /* 增加顶部间距，为导航栏留出更多空间 */
        margin-top: 20px; /* 增加与导航栏的间距 */
    }
    
    .hero-text h1 {
        font-size: 2.5em;
    }
    
    .hero-text p {
        font-size: 1.1em;
    }
    
    .hero-wave {
        height: 60px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 70px 0 70px; /* 增加顶部间距 */
        margin-top: 25px; /* 增加与导航栏的间距 */
    }
    
    .hero-text h1 {
        font-size: 2.2em;
    }
    
    .hero-text p {
        font-size: 1em;
    }
    
    .cta-button {
        padding: 12px 25px;
        font-size: 1em;
    }
}