/* 
整体样式设计:
采用纯白色背景，结合冷色调与霓虹色的配色方案，主色占70%，辅色占25%，点缀色占5%。使用高级CSS3特性如渐变、阴影、动画、过渡等，为网页增添质感和层次感。页面采用不对称网格布局，模块化设计，确保信息有序呈现且响应式布局在320px到1920px宽度范围内表现良好。留白符合呼吸感原则，通过渐变线条和装饰元素分隔不同视觉区块，增强页面的动态性和沉浸感。

字体设计:
标题采用'Blambot Neon'，赋予未来主义风格；正文字体选用'Roboto'，确保易读性与现代感。正文字号设定为16px，标题字号为18px，保持视觉层次分明。

导航设计:
固定顶部导航栏，采用半透明背景，悬停时背景颜色加深。导航菜单为多级下拉菜单，使用CSS3的过渡效果实现平滑显示。所有内部链接添加rel="nofollow"属性，确保SEO优化。

按钮设计:
按钮采用悬停颜色渐变效果，结合微动画，增强交互体验。按钮在悬停时颜色由主色渐变为点缀色，同时轻微放大，点击时略微缩小，提供反馈感。

卡片设计:
内容卡片采用3D变换，鼠标悬停时轻微旋转，增加立体感。卡片背景使用半透明效果，搭配阴影，提升视觉层次。卡片间采用适当留白，通过渐变线条分隔不同内容区块。

动画与过渡:
使用关键帧动画实现动态渐变背景，背景颜色缓慢过渡，营造流动感。页面滚动时，采用滚动视差效果，增强页面深度和互动性。加载动画使用旋转立方体，提升用户等待时的体验。

图片呈现:
装饰性图片采用圆角、阴影、悬浮效果，确保美观呈现。图片使用静态资源，不依赖外部链接，描述属性为空（alt=""）。通过CSS3的网格布局，合理排列图片，保持页面整洁与美观。

响应式设计:
使用Flexbox和Grid布局，确保页面在不同设备上的响应式表现。媒体查询针对不同屏幕尺寸优化布局，调整字体大小和模块排列，确保无论在手机、平板还是桌面设备上，都能获得良好的浏览体验。

章节导航:
设计清晰的章节导航系统，使用固定侧边导航栏，包含有意义的标题，引导用户快速定位到指定内容区域。导航栏采用CSS3的固定定位和动态显示效果，提升用户体验。

代码示例样式:
插入CSS3代码示例部分，采用代码块样式展示，使用等宽字体，背景色与整体设计协调。代码行号与高亮色彩区分，增强可读性和美观性。

其他细节:
确保所有链接内部添加rel="nofollow"，禁用外部链接。页面中不包含任何文本框、电话号码、邮箱地址等敏感信息。通过综合运用CSS3的各种特性，打造一个视觉冲击力强、互动性高且用户友好的未来主义风格智能投顾与量化交易网站。
*/
body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: #0A192F;
}

/* 固定顶部导航栏 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(10, 25, 47, 0.9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.navbar:hover {
    background-color: rgba(10, 25, 47, 1);
}

.navbar .logo {
    font-family: 'Blambot Neon', sans-serif;
    font-size: 24px;
    color: #34C759;
}

.navbar .menu {
    display: flex;
    gap: 20px;
}

.navbar .menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    transition: color 0.3s ease;
}

.navbar .menu a:hover {
    color: #4C9BF5;
}

.navbar .menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #34C759;
    left: 0;
    bottom: -5px;
    transition: width 0.3s;
}

.navbar .menu a:hover::after {
    width: 100%;
}

.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-45deg, #0A192F, #37065E, #4C9BF5, #8F0FD1);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}

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

.hero h1 {
    font-family: 'Blambot Neon', sans-serif;
    font-size: 48px;
    color: #34C759;
    text-align: center;
    animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.section {
    padding: 80px 60px;
    background-color: #ffffff;
}

.section:nth-child(even) {
    background-color: #f0f4f8;
}

.section h2 {
    font-size: 24px;
    color: #0A192F;
    margin-bottom: 20px;
    position: relative;
}

.section h2::after {
    content: '';
    width: 50px;
    height: 3px;
    background-color: #34C759;
    position: absolute;
    left: 0;
    bottom: -10px;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background-color: rgba(10, 25, 47, 0.8);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.3);
}

.card img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.card img:hover {
    transform: scale(1.05);
}

.button {
    background-color: #34C759;
    border: none;
    padding: 12px 24px;
    color: #ffffff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
}

.button:hover {
    background-color: #4C9BF5;
    transform: scale(1.05);
}

.button:active {
    transform: scale(0.95);
}

.footer {
    padding: 40px 30px;
    background-color: rgba(10, 25, 47, 0.9);
    color: #ffffff;
    text-align: center;
}

.footer a {
    color: #34C759;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #4C9BF5;
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu {
        flex-direction: column;
        width: 100%;
    }

    .menu a {
        padding: 10px 0;
        width: 100%;
        border-bottom: 1px solid #ffffff;
    }

    .hero h1 {
        font-size: 32px;
    }

    .section {
        padding: 60px 30px;
    }
}