:root {
            --bg-color: #f5f5f7;
            --text-main: #1d1d1f;
            --text-sub: #86868b;
            /* 浅色模式标题渐变（棕色调） */
            --hero-title-gradient: linear-gradient(180deg, #2a1a12 0%, #784E33 55%, rgba(29, 29, 31, 0.65) 100%);
            --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
            --glass-border: rgba(0, 0, 0, 0.05);
            --glass-highlight: rgba(255, 255, 255, 0.8);
            --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
            --glass-hover-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
            --btn-bg: #1d1d1f;
            --btn-text: #ffffff;
            --nav-bg: rgba(255, 255, 255, 0.6);
            --blob-opacity: 0.25;
            /* 🔸 调节棕色背景的透明度：1 为完全不透明，0 为完全透明 */
            --blob-brown-opacity: 1;
        }

        [data-theme="dark"] {
            --bg-color: #000000;
            --text-main: #ffffff;
            --text-sub: rgba(255, 255, 255, 0.6);
            /* 深色模式保持白色渐变 */
            --hero-title-gradient: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.5) 100%);
            --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
            --glass-border: rgba(255, 255, 255, 0.12);
            --glass-highlight: rgba(255, 255, 255, 0.2);
            --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            --glass-hover-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
            --btn-bg: #ffffff;
            --btn-text: #000000;
            --nav-bg: rgba(30, 30, 30, 0.5);
            --blob-opacity: 0.4;
            /* 深色模式下恢复棕色默认不透明，但保留变量 */
            --blob-brown-opacity: 1;
        }

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            overflow-x: hidden;
            line-height: 1.6;
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        .ambient-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            filter: blur(80px);
            opacity: var(--blob-opacity);
            transition: opacity 0.5s ease;
        }

        .blob {
            position: absolute;
            border-radius: 50%;
            animation: float 25s infinite ease-in-out alternate;
        }

        /* 背景色流体 */
        .blob-first {
            width: 50vw;
            height: 50vw;
            background: #E0A458; /* 鲜艳棕色 */
            top: -10%;
            left: -5%;
            opacity: var(--blob-brown-opacity); /* 透明度由此控制 */
        }

        .blob-purple {
            width: 60vw;
            height: 60vw;
            background: #4300e1;
            bottom: -15%;
            right: -5%;
            animation-delay: -7s;
        }

        .blob-blue {
            width: 40vw;
            height: 40vw;
            background: #00d4ff;
            top: 30%;
            left: 35%;
            animation-delay: -12s;
        }

        /* 浅色模式：隐藏紫色与蓝色背景，只留棕色 */
        :root .blob-purple,
        :root .blob-blue {
            display: none;
        }

        /* 深色模式：重新显示所有背景 */
        [data-theme="dark"] .blob-purple,
        [data-theme="dark"] .blob-blue {
            display: block;
        }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(15vw, -5vh) scale(1.1); }
        }

        .liquid-nav {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 92%;
            max-width: 1100px;
            height: 54px;
            padding: 0 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 100px;
            z-index: 1000;
            background: var(--nav-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            transition: all 0.5s ease;
        }

        .nav-links { display: flex; gap: 24px; }
        .nav-links a {
            font-size: 13px;
            color: var(--text-sub);
            text-decoration: none;
            transition: color 0.3s;
        }
        .nav-links a:hover { color: var(--text-main); }
        .nav-logo { font-size: 18px; font-weight: 600; }

        .nav-cta {
            background: var(--btn-bg);
            color: var(--btn-text);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            transition: transform 0.2s ease;
        }
        .nav-cta:hover { transform: scale(1.05); }

        .theme-btn {
            background: none;
            border: none;
            color: var(--text-main);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            border-radius: 50%;
            transition: background 0.3s;
        }
        .theme-btn:hover { background: rgba(128, 128, 128, 0.2); }

        main { padding: 0 24px 60px; max-width: 1200px; margin: 0 auto; }

        .hero {
            text-align: center;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 120px 20px 20px;
            margin-bottom: 0;
        }

        .main-icon {
            width: 100px;
            height: 100px;
            object-fit: contain;
            margin-bottom: 24px;
            animation: floatIcon 6s ease-in-out infinite;
        }

        @keyframes floatIcon {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .hero h1 {
            font-size: clamp(40px, 8vw, 80px);
            font-weight: 800;
            letter-spacing: -2px;
            line-height: 1.1;
            margin-bottom: 20px;
            background: var(--hero-title-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background 0.5s ease;
        }

        /* 浅色模式：描述文字使用与标题相同的渐变色 */
        .hero p {
            font-size: clamp(18px, 2vw, 22px);
            max-width: 750px;
            margin: 0 auto 40px;
            font-weight: 500;
            background: var(--hero-title-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background 0.5s ease;
        }

        /* 深色模式：描述文字恢复普通颜色 */
        [data-theme="dark"] .hero p {
            background: none;
            -webkit-text-fill-color: initial;
            color: var(--text-sub);
        }

        .btn-primary {
            background: var(--btn-bg);
            color: var(--btn-text);
            border: none;
            padding: 18px 40px;
            border-radius: 40px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease;
        }
        .btn-primary:hover {
            transform: scale(1.03);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .btn-primary.full-width { width: 100%; margin-top: 20px; }

        .liquid-glass {
            background: var(--glass-bg);
            backdrop-filter: blur(24px) saturate(150%);
            -webkit-backdrop-filter: blur(24px) saturate(150%);
            border: 1px solid var(--glass-border);
            border-top: 1px solid var(--glass-highlight);
            border-left: 1px solid var(--glass-highlight);
            box-shadow: var(--glass-shadow);
            border-radius: 28px;
            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease;
        }

        .liquid-glass:hover {
            transform: translateY(-6px);
            box-shadow: var(--glass-hover-shadow);
        }

        .bento-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 24px;
            margin-bottom: 40px;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
        }

        .reveal-card {
            opacity: 0;
            transform: translateY(30px);
        }

        .reveal-card.revealed {
            animation: fadeUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .span-8 { grid-column: span 8; }
        .span-4 { grid-column: span 4; }

        .card-content {
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }

        .card-content h3 {
            font-size: 28px;
            margin-bottom: 12px;
            font-weight: 700;
            line-height: 1.2;
        }

        .card-content p {
            color: var(--text-sub);
            font-size: 16px;
        }

        .glass-placeholder {
            margin-top: 30px;
            height: 160px;
            border-radius: 16px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
        }

        .price-content {
            padding: 50px 40px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }

        .price {
            font-size: 42px;
            font-weight: 800;
            margin: 20px 0;
            letter-spacing: -1px;
        }

        @media (max-width: 850px) {
            .span-8, .span-4 { grid-column: span 12; }
            .nav-links { display: none; }
            .hero { padding: 100px 10px 20px; }
            .hero h1 { font-size: 48px; }
        }


        .site-footer {
            text-align: center;
            padding: 60px 0 30px;      /* 上方留空更多，左右无内边距 */
            color: var(--text-sub);
            font-size: 14px;
           opacity: 0.8;
        }

        .footer-divider {
            width: 100%;
            height: 1px;
            background: var(--text-sub);
            opacity: 0.2;              /* 让线条更淡雅 */
            border-radius: 1px;
            margin: 0 auto 18px;
            max-width: 1300px;         /* 比主内容区 max-width 稍宽，实现“略长” */
        }

        /* 确保版权文字与主内容对齐 */
        .site-footer p {
            padding: 0 24px;
            margin: 0;
        }