:root {
            --brand: #1d4ed8; --brand-deep: #1e3a8a; --brand-hover: #173fad;
            --brand-light: #eff6ff; --brand-ghost: #eef2ff; --accent: #f59e0b;
            --accent-light: #fffbeb; --dark: #0f172a; --dark-mid: #1e293b;
            --text: #1e293b; --text-sub: #334155; --text-muted: #475569;
            --text-light: #64748b; --border: #e8ecf1; --border-light: #f1f5f9;
            --bg-card: #ffffff; --bg-subtle: #f8fafc; --bg-footer: #fafcff;
            --white: #ffffff;
            --shadow-xs: 0 1px 3px rgba(0,0,0,0.04); --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
            --shadow-md: 0 8px 24px rgba(0,0,0,0.06); --shadow-lg: 0 16px 36px rgba(0,0,0,0.08);
            --radius-sm: 10px; --radius: 20px; --radius-lg: 32px; --radius-xl: 44px;
            --radius-full: 9999px; --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
        body {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
            background: #fdfcfb; color: var(--text); line-height:1.65;
            -webkit-font-smoothing: antialiased; letter-spacing:0.01em;
        }
        .header { position:sticky; top:0; background:rgba(255,255,255,0.95); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); z-index:100; box-shadow:var(--shadow-xs); }
        .nav-container { max-width:1280px; margin:0 auto; padding:0.85rem 2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; }
        .logo-area { display:flex; align-items:center; gap:0.5rem; text-decoration:none; }
        .logo-icon { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 50%,#60a5fa 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:1.1rem; box-shadow:0 3px 10px rgba(29,78,216,0.25); }
        .logo-text { font-weight:800; font-size:1.6rem; letter-spacing:-0.03em; color:var(--dark); }
        .logo-text span { color:var(--brand); }
        .logo-badge { background:var(--brand-light); padding:0.18rem 0.6rem; border-radius:40px; font-size:0.65rem; font-weight:700; color:var(--brand-deep); white-space:nowrap; }
        .nav-links { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; list-style:none; }
        .nav-links a { text-decoration:none; font-weight:500; color:#334155; transition:color var(--transition); font-size:0.93rem; position:relative; padding:0.25rem 0; }
        .nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--brand); border-radius:2px; transition:width var(--transition); }
        .nav-links a:hover,.nav-links a.active { color:var(--brand); }
        .nav-links a:hover::after,.nav-links a.active::after { width:100%; }
        .btn-outline-nav { border:1.5px solid #d1d5db; padding:0.5rem 1.15rem; border-radius:40px; font-weight:600; transition:all var(--transition); font-size:0.88rem; text-decoration:none; color:#1e293b; }
        .btn-outline-nav:hover { background:#f9fafb; border-color:#9ca3af; }
        .btn-primary-sm { background:var(--brand); color:#fff; padding:0.5rem 1.25rem; border-radius:40px; font-weight:600; transition:all var(--transition); text-decoration:none; font-size:0.88rem; box-shadow:0 2px 8px rgba(29,78,216,0.22); }
        .btn-primary-sm:hover { background:var(--brand-hover); box-shadow:0 4px 16px rgba(29,78,216,0.32); transform:translateY(-1px); }
        .mobile-menu-btn { display:none; background:none; border:none; padding:0.35rem; flex-direction:column; gap:5px; }
        .mobile-menu-btn span { display:block; width:24px; height:2.5px; background:var(--dark); border-radius:2px; }

        .hero-banner { max-width:1280px; margin:2.5rem auto 3rem; padding:2.5rem 2rem; background:linear-gradient(105deg,#f8fafc 0%,#eef2ff 30%,#fafcff 60%,#fff 100%); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-md); text-align:center; }
        .hero-banner h1 { font-size:2.5rem; font-weight:800; letter-spacing:-0.02em; color:var(--dark); margin-bottom:0.7rem; }
        .hero-banner h1 span { background:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 50%,#6366f1 100%); background-clip:text; -webkit-background-clip:text; color:transparent; }
        .hero-banner .sub { color:var(--text-muted); font-size:1.1rem; max-width:680px; margin:0 auto 2rem; }
        .hero-buttons { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
        .btn-primary { background:var(--brand); color:#fff; padding:0.85rem 2.1rem; border-radius:48px; font-weight:700; font-size:1rem; text-decoration:none; display:inline-flex; align-items:center; gap:0.4rem; box-shadow:0 4px 18px rgba(29,78,216,0.28); transition:all var(--transition); }
        .btn-primary:hover { background:var(--brand-hover); transform:translateY(-2px); box-shadow:0 8px 28px rgba(29,78,216,0.38); }
        .btn-secondary { background:transparent; border:1.8px solid #cbd5e1; padding:0.85rem 2.1rem; border-radius:48px; font-weight:600; color:#1e293b; text-decoration:none; display:inline-flex; align-items:center; gap:0.4rem; transition:all var(--transition); font-size:1rem; }
        .btn-secondary:hover { background:#f8fafc; border-color:#94a3b8; transform:translateY(-1px); }

        .section { max-width:1280px; margin:4rem auto; padding:2rem; }
        .section-header { text-align:center; margin-bottom:2.5rem; }
        .section-title { font-size:1.9rem; font-weight:700; margin-bottom:0.6rem; letter-spacing:-0.02em; color:var(--dark); }
        .section-sub { color:var(--text-muted); font-size:1.05rem; max-width:620px; margin:0 auto; }

        .longread { max-width:900px; margin:0 auto; background:#fff; border-radius:var(--radius-lg); padding:2.5rem 2.8rem; box-shadow:var(--shadow-md); border:1px solid var(--border-light); line-height:1.85; color:#334155; font-size:0.98rem; }
        .longread h3 { font-size:1.25rem; color:var(--dark); margin:1.5rem 0 0.6rem; }
        .longread h3:first-child { margin-top:0; }
        .longread p { margin-bottom:0.9rem; }
        .insight { background:var(--brand-light); border-left:4px solid var(--brand); padding:1rem 1.4rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:1.2rem 0; color:#1e40af; }

        .scene-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; }
        .scene-card { background:#fff; border-radius:var(--radius); padding:1.5rem 1rem; text-align:center; border:1px solid var(--border-light); box-shadow:var(--shadow-xs); transition:all var(--transition); }
        .scene-card:hover { border-color:#c7d2fe; transform:translateY(-3px); box-shadow:var(--shadow-md); }
        .scene-card .sc-icon { font-size:2.2rem; display:block; margin-bottom:0.5rem; }
        .scene-card h3 { font-size:1rem; font-weight:700; color:var(--dark); }

        .growth-path { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
        .growth-step { display:flex; align-items:center; gap:1.2rem; background:#fff; padding:1.2rem 1.5rem; border-radius:var(--radius); border:1px solid var(--border-light); box-shadow:var(--shadow-sm); transition:all var(--transition); }
        .growth-step:hover { border-color:var(--brand); box-shadow:var(--shadow-md); transform:translateX(4px); }
        .step-icon { width:48px; height:48px; border-radius:50%; background:var(--brand-light); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--brand); flex-shrink:0; }
        .step-info h4 { font-size:1rem; font-weight:700; color:var(--dark); margin-bottom:0.2rem; }
        .step-info p { font-size:0.85rem; color:#475569; }

        .cost-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.2rem; }
        .cost-card { background:#fff; border-radius:var(--radius); padding:1.6rem; border:1px solid var(--border-light); box-shadow:var(--shadow-sm); transition:all var(--transition); text-align:center; }
        .cost-card:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
        .cost-card .co-icon { font-size:2.2rem; display:block; margin-bottom:0.5rem; }
        .cost-card h3 { font-size:1.1rem; font-weight:700; color:var(--dark); margin-bottom:0.4rem; }
        .cost-card p { font-size:0.85rem; color:#475569; }

        .tool-rec-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.2rem; }
        .tool-rec-card { background:#fff; border-radius:var(--radius); padding:1.6rem 1.5rem; border:1px dashed #cbd5e1; transition:all var(--transition); text-decoration:none; color:inherit; text-align:center; display:flex; flex-direction:column; gap:0.6rem; }
        .tool-rec-card:hover { border-style:solid; border-color:var(--brand); background:#fafcff; box-shadow:var(--shadow-md); transform:translateY(-3px); }
        .tool-rec-card .rec-icon { font-size:2.2rem; }
        .tool-rec-card h4 { font-size:1rem; font-weight:700; color:var(--dark); }
        .tool-rec-card p { font-size:0.84rem; color:#475569; flex:1; }
        .tool-rec-card .rec-link { font-weight:700; color:var(--brand); font-size:0.88rem; }

        .faq-list { max-width:820px; margin:0 auto; }
        .faq-item { border:1px solid var(--border-light); border-radius:var(--radius-sm); margin-bottom:0.7rem; background:#fff; overflow:hidden; transition:all var(--transition); }
        .faq-item:hover { border-color:#c7d2fe; }
        .faq-item summary { padding:1.15rem 1.5rem; cursor:pointer; font-weight:600; font-size:0.98rem; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--dark); }
        .faq-item summary::-webkit-details-marker { display:none; }
        .faq-item summary::after { content:'+'; font-size:1.5rem; font-weight:300; color:var(--brand); }
        .faq-item[open] summary::after { content:'−'; transform:rotate(180deg); }
        .faq-item[open] { border-color:var(--brand); box-shadow:var(--shadow-md); }
        .faq-answer { padding:0 1.5rem 1.3rem; color:#334155; font-size:0.9rem; line-height:1.7; }

        .footer { border-top:1px solid var(--border); margin-top:4rem; background:var(--bg-footer); }
        .footer-container { max-width:1280px; margin:0 auto; padding:3rem 2rem 2rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem; }
        .footer-col h4 { margin-bottom:1rem; font-size:1rem; font-weight:700; color:var(--dark); }
        .footer-col a { display:block; color:#475569; text-decoration:none; margin-bottom:0.65rem; font-size:0.88rem; transition:color var(--transition); }
        .footer-col a:hover { color:var(--brand); }
        .copyright { text-align:center; padding:1.5rem; border-top:1px solid var(--border); font-size:0.8rem; color:var(--text-light); }

        @media (max-width:900px) { .hero-banner h1 { font-size:2rem; } .longread { padding:1.8rem; } }
        @media (max-width:680px) {
            .nav-container { flex-direction:row; flex-wrap:wrap; padding:0.7rem 1.1rem; }
            .nav-links { display:none; width:100%; flex-direction:column; gap:0.3rem; background:#fff; border-radius:var(--radius-sm); padding:1rem; box-shadow:var(--shadow-lg); position:absolute; top:100%; left:0; right:0; border:1px solid var(--border); }
            .nav-links.open { display:flex; } .mobile-menu-btn { display:flex; }
            .hero-banner { padding:1.8rem 1rem; } .hero-banner h1 { font-size:1.6rem; }
            .growth-step { flex-direction:column; text-align:center; }
            .scene-grid { grid-template-columns:repeat(2,1fr); }
            .cost-grid { grid-template-columns:1fr 1fr; }
            .section { padding:1.2rem; } .longread { padding:1.4rem; }
        }
        @media (max-width:400px) { .scene-grid,.cost-grid { grid-template-columns:1fr; } }