:root {

            --tech-blue: #1a5af0;   /* 加深蓝色 */

            --deep-blue: #003399;   /* 加深深蓝色 */

            --light-blue: #e0ecff;  /* 微调浅蓝 */

            --cyber-cyan: #00c0d1; /* 微调青色 */

            --electric-purple: #6a3dff; /* 微调紫色 */

            --dark-bg: #0a1a35;

            --card-bg: #f0f6ff;

            --text-dark: #333;

            --text-light: #fff;

            --gray-light: #f5f7fa;

            --gray-border: #d8e1f0;

            --chart-green: #00c853;

            --chart-red: #ff3d00;

        }

        

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        

        body {

            font-family: 'Noto Sans SC', sans-serif;

            color: var(--text-dark);

            background: linear-gradient(135deg, var(--light-blue) 0%, #d0dfff 100%);

            line-height: 1.8;

            background-attachment: fixed;

            overflow-x: hidden;

            position: relative;

        }

        

        /* 祥云背景图案 */

        body::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M0,128L48,117.3C96,107,192,85,288,101.3C384,117,480,171,576,170.7C672,171,768,117,864,117.3C960,117,1056,171,1152,176C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");

            z-index: -1;

        }

        

        .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 20px;

        }

        

        /* 头部导航 */

        header {

            background: rgba(255, 255, 255, 0.95);

            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);

            position: sticky;

            top: 0;

            z-index: 1000;

            backdrop-filter: blur(5px);

            border-bottom: 1px solid rgba(26, 90, 240, 0.1);

            padding: 10px 0;

        }

        

        .header-content {

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        

        .logo {

            display: flex;

            align-items: center;

        }

        

        .logo-icon {

            font-size: 2.5rem;

            color: var(--tech-blue);

            margin-right: 10px;

            position: relative;

            width: 50px;

            height: 50px;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        

        /* 祥云图标样式 */

        .logo-icon::before {

            content: "\f0c2";

            font-family: "Font Awesome 6 Free";

            font-weight: 900;

            font-size: 2.2rem;

            position: absolute;

            z-index: 1;

            color: var(--tech-blue);

        }

        

        .logo-icon::after {

            content: "";

            position: absolute;

            width: 35px;

            height: 35px;

            background: rgba(26, 90, 240, 0.1);

            border-radius: 50%;

            z-index: 0;

        }

        

        .logo-text {

            font-family: 'Noto Serif SC', serif;

            font-size: 1.8rem;

            font-weight: 700;

            color: var(--tech-blue);

            letter-spacing: 2px;

        }

        

        .logo-text span {

            color: var(--electric-purple);

            font-weight: 400;

        }

        

        nav ul {

            display: flex;

            list-style: none;

        }

        

        nav ul li {

            margin: 0 15px;

        }

        

        nav ul li a {

            text-decoration: none;

            color: var(--deep-blue);

            font-weight: 500;

            font-size: 1.1rem;

            padding: 8px 12px;

            border-radius: 20px;

            transition: all 0.3s ease;

        }

        

        nav ul li a:hover, 

        nav ul li a.active {

            background: rgba(26, 90, 240, 0.1);

            color: var(--tech-blue);

        }

        

        .nav-buttons {

            display: flex;

            align-items: center;

        }

        

        .btn {

            padding: 10px 25px;

            border-radius: 30px;

            font-weight: 500;

            font-size: 1rem;

            cursor: pointer;

            transition: all 0.3s ease;

            margin-left: 15px;

            text-decoration: none;

            display: inline-block;

        }

        

        .btn-outline {

            border: 1px solid var(--tech-blue);

            color: var(--tech-blue);

            background: transparent;

        }

        

        .btn-outline:hover {

            background: var(--tech-blue);

            color: white;

        }

        

        .btn-primary {

            background: var(--tech-blue);

            color: white;

            border: 1px solid var(--tech-blue);

        }

        

        .btn-primary:hover {

            background: var(--deep-blue);

            border-color: var(--deep-blue);

            transform: translateY(-3px);

            box-shadow: 0 5px 15px rgba(26, 90, 240, 0.3);

        }

        

        /* 主视觉区域 */

        .hero {

            height: 85vh;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            text-align: center;

            position: relative;

            padding: 0 20px;

            overflow: hidden;

        }

        

        .hero-bg {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: linear-gradient(45deg, rgba(224, 236, 255, 0.9) 0%, rgba(208, 223, 255, 0.85) 100%);

            z-index: -2;

        }

        

        .hero-pattern {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: 

                radial-gradient(circle at 10% 20%, rgba(0, 192, 209, 0.1) 0%, transparent 20%),

                radial-gradient(circle at 90% 80%, rgba(106, 61, 255, 0.1) 0%, transparent 20%),

                radial-gradient(circle at 50% 50%, rgba(26, 90, 240, 0.1) 0%, transparent 30%);

            z-index: -1;

            opacity: 0.5;

        }

        

        .hero-content {

            max-width: 900px;

            z-index: 1;

        }

        

        .hero h1 {

            font-family: 'Noto Serif SC', serif;

            font-size: 3.5rem;

            font-weight: 700;

            color: var(--tech-blue);

            margin-bottom: 20px;

            line-height: 1.3;

        }

        

        .hero h1 span {

            color: var(--electric-purple);

            display: block;

            font-size: 2.2rem;

            font-weight: 400;

            margin-top: 15px;

        }

        

        .slogan {

            font-size: 1.8rem;

            color: var(--deep-blue);

            margin: 40px 0;

            font-style: italic;

            position: relative;

            padding: 0 20px;

            font-weight: 300;

        }

        

        .slogan::before, .slogan::after {

            content: "“";

            font-size: 4rem;

            position: absolute;

            color: rgba(26, 90, 240, 0.15);

            font-family: serif;

        }

        

        .slogan::before {

            top: -30px;

            left: -20px;

        }

        

        .slogan::after {

            content: "”";

            bottom: -60px;

            right: -20px;

        }

        

        .cta-button {

            background: var(--tech-blue);

            color: white;

            border: none;

            padding: 15px 40px;

            font-size: 1.1rem;

            border-radius: 30px;

            cursor: pointer;

            transition: all 0.3s ease;

            font-family: 'Noto Sans SC', sans-serif;

            letter-spacing: 1px;

            box-shadow: 0 4px 15px rgba(26, 90, 240, 0.3);

            position: relative;

            overflow: hidden;

            z-index: 1;

        }

        

        .cta-button::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

            transition: 0.5s;

            z-index: -1;

        }

        

        .cta-button:hover::before {

            left: 100%;

        }

        

        .cta-button:hover {

            background: var(--electric-purple);

            transform: translateY(-3px);

            box-shadow: 0 6px 20px rgba(26, 90, 240, 0.4);

        }

        

        /* 核心价值部分 */

        .section {

            padding: 100px 0;

        }

        

        .section-title {

            text-align: center;

            font-family: 'Noto Serif SC', serif;

            font-size: 2.2rem;

            color: var(--tech-blue);

            margin-bottom: 60px;

            position: relative;

            display: inline-block;

            padding: 0 20px;

        }

        

        .section-title::before, .section-title::after {

            content: "";

            position: absolute;

            top: 50%;

            width: 60px;

            height: 1px;

            background: var(--cyber-cyan);

        }

        

        .section-title::before {

            left: -70px;

        }

        

        .section-title::after {

            right: -70px;

        }

        

        .section-subtitle {

            text-align: center;

            max-width: 800px;

            margin: 0 auto 60px;

            font-size: 1.2rem;

            color: var(--deep-blue);

            font-weight: 300;

        }

        

        /* 价值观金字塔 */

        .value-pyramid {

            display: flex;

            flex-direction: column;

            align-items: center;

            max-width: 800px;

            margin: 0 auto;

        }

        

        .pyramid-layer {

            background: white;

            border-radius: 16px;

            padding: 40px 30px;

            margin-bottom: 30px;

            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

            width: 100%;

            border-top: 4px solid var(--tech-blue);

            position: relative;

            overflow: hidden;

            transition: transform 0.3s ease;

        }

        

        .pyramid-layer:hover {

            transform: translateY(-10px);

        }

        

        .layer-1 { width: 100%; z-index: 3; }

        .layer-2 { width: 90%; z-index: 2; }

        .layer-3 { width: 80%; z-index: 1; }

        

        .layer-title {

            font-family: 'Noto Serif SC', serif;

            font-size: 1.6rem;

            color: var(--deep-blue);

            margin-bottom: 25px;

            display: flex;

            align-items: center;

            padding-bottom: 15px;

            border-bottom: 1px solid rgba(26, 90, 240, 0.1);

        }

        

        .layer-title i {

            margin-right: 15px;

            color: var(--cyber-cyan);

            font-size: 1.8rem;

        }

        

        .layer-content p {

            margin-bottom: 15px;

            padding-left: 35px;

            position: relative;

        }

        

        .layer-content p::before {

            content: "•";

            position: absolute;

            left: 0;

            color: var(--cyber-cyan);

            font-size: 1.5rem;

            top: -5px;

        }

        

        /* 核心功能部分 */

        .features {

            background: linear-gradient(135deg, rgba(224, 236, 255, 0.8) 0%, rgba(208, 223, 255, 0.8) 100%);

            padding: 100px 0;

            position: relative;

            overflow: hidden;

        }

        

        .features::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: 

                radial-gradient(circle at 20% 30%, rgba(0, 192, 209, 0.05) 0%, transparent 40%),

                radial-gradient(circle at 80% 70%, rgba(106, 61, 255, 0.05) 0%, transparent 40%);

            z-index: -1;

        }

        

        .features-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

            gap: 40px;

            margin-top: 50px;

        }

        

        .feature-card {

            background: white;

            border-radius: 20px;

            padding: 40px 30px;

            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

            transition: all 0.4s ease;

            border: 1px solid var(--gray-border);

            position: relative;

            overflow: hidden;

        }

        

        .feature-card:hover {

            transform: translateY(-15px);

            box-shadow: 0 20px 50px rgba(26, 90, 240, 0.15);

        }

        

        .feature-icon {

            width: 80px;

            height: 80px;

            background: rgba(26, 90, 240, 0.1);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 25px;

        }

        

        .feature-icon i {

            font-size: 2.5rem;

            color: var(--tech-blue);

        }

        

        .feature-card h3 {

            font-size: 1.6rem;

            color: var(--deep-blue);

            margin-bottom: 20px;

            font-family: 'Noto Serif SC', serif;

        }

        

        .feature-card p {

            color: var(--deep-blue);

            margin-bottom: 20px;

        }

        

        /* 用户见证 */

        .testimonials {

            background: linear-gradient(135deg, rgba(26, 90, 240, 0.03) 0%, rgba(0, 192, 209, 0.03) 100%);

            padding: 100px 0;

            position: relative;

        }

        

        .testimonials-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 30px;

            margin-top: 50px;

        }

        

        .testimonial-card {

            background: white;

            border-radius: 20px;

            padding: 30px;

            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

            position: relative;

            border: 1px solid var(--gray-border);

        }

        

        .testimonial-card::before {

            content: "“";

            position: absolute;

            top: 20px;

            left: 20px;

            font-size: 5rem;

            color: rgba(26, 90, 240, 0.1);

            font-family: serif;

            line-height: 1;

        }

        

        .testimonial-content {

            margin-top: 40px;

            font-style: italic;

            color: var(--deep-blue);

        }

        

        .user-info {

            display: flex;

            align-items: center;

            margin-top: 25px;

        }

        

        .user-avatar {

            width: 50px;

            height: 50px;

            border-radius: 50%;

            background: var(--light-blue);

            margin-right: 15px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--tech-blue);

            font-weight: bold;

        }

        

        /* 禅意交易流程 */

        .zen-process {

            padding: 100px 0;

            text-align: center;

        }

        

        .process-steps {

            display: flex;

            justify-content: center;

            flex-wrap: wrap;

            gap: 30px;

            margin-top: 50px;

        }

        

        .process-step {

            width: 250px;

            position: relative;

        }

        

        .step-number {

            width: 50px;

            height: 50px;

            background: var(--tech-blue);

            color: white;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 25px;

            font-size: 1.5rem;

            font-weight: bold;

        }

        

        .step-icon {

            font-size: 3rem;

            color: var(--cyber-cyan);

            margin-bottom: 20px;

        }

        

        .step-title {

            font-family: 'Noto Serif SC', serif;

            color: var(--tech-blue);

            margin-bottom: 15px;

            font-size: 1.4rem;

        }

        

        /* CTA区域 */

        .cta-section {

            padding: 100px 0;

            text-align: center;

            background: linear-gradient(135deg, var(--tech-blue) 0%, var(--deep-blue) 100%);

            color: white;

        }

        

        .cta-section h2 {

            font-family: 'Noto Serif SC', serif;

            font-size: 2.5rem;

            margin-bottom: 30px;

        }

        

        .cta-section p {

            max-width: 700px;

            margin: 0 auto 40px;

            font-size: 1.2rem;

            opacity: 0.9;

        }

        

        .cta-buttons {

            display: flex;

            justify-content: center;

            gap: 20px;

        }

        

        .btn-light {

            background: white;

            color: var(--tech-blue);

        }

        

        .btn-light:hover {

            background: rgba(255, 255, 255, 0.9);

            transform: translateY(-3px);

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

        }

        

        /* 页脚 */

        footer {

            background: var(--dark-bg);

            color: white;

            padding: 80px 0 40px;

            position: relative;

            overflow: hidden;

        }

        

        /* 页脚祥云背景 */

        footer::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23003a9e' fill-opacity='0.2' d='M0,96L48,112C96,128,192,160,288,170.7C384,181,480,171,576,160C672,149,768,139,864,149.3C960,160,1056,192,1152,192C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");

            z-index: 0;

        }

        

        .footer-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 40px;

            position: relative;

            z-index: 1;

        }

        

        .footer-column h3 {

            font-family: 'Noto Serif SC', serif;

            font-size: 1.5rem;

            margin-bottom: 25px;

            position: relative;

            padding-bottom: 15px;

        }

        

        .footer-column h3::after {

            content: "";

            position: absolute;

            bottom: 0;

            left: 0;

            width: 50px;

            height: 2px;

            background: var(--cyber-cyan);

        }

        

        .footer-links {

            list-style: none;

        }

        

        .footer-links li {

            margin-bottom: 15px;

        }

        

        .footer-links a {

            color: rgba(255, 255, 255, 0.8);

            text-decoration: none;

            transition: all 0.3s ease;

        }

        

        .footer-links a:hover {

            color: var(--cyber-cyan);

            padding-left: 5px;

        }

        

        .contact-info {

            color: rgba(255, 255, 255, 0.8);

            margin-bottom: 15px;

        }

        

        .contact-info i {

            margin-right: 10px;

            color: var(--cyber-cyan);

        }

        

        .social-links {

            display: flex;

            gap: 15px;

            margin-top: 20px;

        }

        

        .social-links a {

            width: 40px;

            height: 40px;

            border-radius: 50%;

            background: rgba(255, 255, 255, 0.1);

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            transition: all 0.3s ease;

        }

        

        .social-links a:hover {

            background: var(--cyber-cyan);

            transform: translateY(-3px);

        }

        

        .copyright {

            text-align: center;

            margin-top: 60px;

            padding-top: 20px;

            border-top: 1px solid rgba(255, 255, 255, 0.2);

            color: rgba(255, 255, 255, 0.6);

            position: relative;

            z-index: 1;

        }

        

        /* 响应式调整 */

        @media (max-width: 768px) {

            .section-title::before, 

            .section-title::after {

                width: 30px;

            }

            

            .section-title::before {

                left: -40px;

            }

            

            .section-title::after {

                right: -40px;

            }

            

            .cta-buttons {

                flex-direction: column;

                align-items: center;

            }

            

            .hero h1 {

                font-size: 2.5rem;

            }

            

            .hero h1 span {

                font-size: 1.6rem;

            }

            

            .slogan {

                font-size: 1.4rem;

            }

        }