:root {
    --b1: #F5EDE4;
    --b2: #EDE0D2;
    --ac: #CF9264;
    --a2: #A14B24;
    --tx: #2d2a1e;
    --mt: #938D58;
    --bd: rgba(207,146,100,0.2);
    --navbg: rgba(245,237,228,0.95);
    --cardbg: rgba(255,255,255,0.85);
    --fn: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--fn); background:var(--b1); color:var(--tx); line-height:1.6; }
a { color:var(--a2); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ===== Navigation ===== */
.site-nav {
    background:var(--navbg);
    border-bottom:1px solid var(--bd);
    position:fixed; top:0; left:0; right:0;
    z-index:100;
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 24px;
    height:56px;
}
.site-nav .logo { font-size:18px; font-weight:700; color:var(--ac); }
.site-nav .logo span { color:var(--a2); }
.nav-links {
    display:flex;
    gap:2px;
    align-items:center;
}
.nav-links a {
    padding:6px 14px;
    font-size:14px;
    color:var(--mt);
    border-radius:6px;
    text-decoration:none;
    transition:all .2s;
}
.nav-links a:hover { color:var(--ac); background:var(--cardbg); text-decoration:none; }
.nav-link-cta {
    padding:6px 16px;
    font-size:14px;
    color:#fff;
    background:var(--ac);
    border-radius:20px;
    margin-left:6px;
    cursor:pointer;
    transition:all .2s;
}
.nav-link-cta:hover { background:var(--a2); }

/* ===== Hero (圆角居中) ===== */
.flow-hero { padding:80px 20px 10px; }
.flow-inner { max-width:960px; margin:0 auto; }
.flow-hero-card {
    background:linear-gradient(135deg,#D6B99B,#CF9264,#A14B24);
    border-radius:24px;
    padding:60px 40px;
    text-align:center;
    color:var(--tx);
    position:relative;
    overflow:hidden;
}
.flow-hero-card::before {
    content:'';
    position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 60%);
    pointer-events:none;
}
.flow-tag {
    display:inline-block;
    background:rgba(255,255,255,0.3);
    backdrop-filter:blur(4px);
    padding:6px 18px;
    border-radius:20px;
    font-size:13px;
    margin-bottom:16px;
}
.flow-hero-card h1 { font-size:42px; font-weight:800; margin-bottom:14px; line-height:1.3; }
.flow-hero-card h1 span { color:white; background:rgba(79,202,129,0.25); padding:0 6px; border-radius:4px; }
.flow-hero-card p { font-size:18px; opacity:0.85; margin-bottom:24px; }
.flow-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.flow-btn {
    display:inline-block;
    background:var(--tx);
    color:white;
    padding:14px 36px;
    border-radius:30px;
    font-weight:600;
    font-size:16px;
    cursor:pointer;
    transition:transform 0.2s;
}
.flow-btn:hover { transform:scale(1.05); }
.flow-btn-o {
    display:inline-block;
    background:transparent;
    color:var(--tx);
    padding:14px 36px;
    border-radius:30px;
    font-weight:600;
    font-size:16px;
    border:2px solid var(--tx);
    cursor:pointer;
    transition:all 0.2s;
}
.flow-btn-o:hover { background:var(--tx); color:white; }

/* ===== 4列功能卡片墙 ===== */
.flow-strip { padding:40px 20px; }
.flow-strip-inner { max-width:960px; margin:0 auto; display:flex; gap:16px; }
.flow-strip-item {
    flex:1;
    min-width:0;
    background:white;
    border-radius:16px;
    padding:28px 16px;
    text-align:center;
    box-shadow:0 2px 12px var(--bd);
    transition:all 0.25s;
    cursor:default;
}
.flow-strip-item:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(207,146,100,0.2);
}
.fs-icon { font-size:36px; display:block; margin-bottom:10px; }
.fs-title { font-size:16px; font-weight:600; display:block; color:var(--tx); margin-bottom:4px; }
.fs-desc { font-size:13px; color:var(--mt); }

/* ===== 双栏文章区 ===== */
.cl-art-section {
    background:var(--b2);
    padding:50px 24px;
}
.cl-art-inner {
    max-width:1000px;
    margin:0 auto;
    display:flex;
    gap:30px;
}
.cl-art-col { flex:1; min-width:0; }
.cl-art-col h3 { font-size:18px; font-weight:700; margin-bottom:16px; color:var(--tx); }
.cl-art-item {
    display:block;
    padding:12px 16px;
    background:var(--cardbg);
    border:1px solid var(--bd);
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    color:var(--tx);
    text-decoration:none;
    margin-bottom:8px;
    transition:all .2s;
    line-height:1.4;
}
.cl-art-item:hover {
    transform:translateX(4px);
    border-color:var(--ac);
    text-decoration:none;
}
.cl-view-all {
    display:inline-flex;
    padding:8px 20px;
    margin-top:12px;
    border-radius:50px;
    border:1px solid var(--ac);
    color:var(--ac);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:all .2s;
}
.cl-view-all:hover {
    background:var(--ac);
    color:#fff;
    text-decoration:none;
}

/* ===== CTA Banner ===== */
.cta-banner {
    text-align:center;
    padding:50px 24px;
    background:linear-gradient(135deg,var(--b2),var(--b1));
}
.cta-banner h2 { font-size:26px; font-weight:800; margin-bottom:8px; }
.cta-banner p { font-size:15px; color:var(--mt); margin-bottom:20px; }
.cta-btn {
    display:inline-block;
    background:var(--ac);
    color:#fff;
    padding:14px 40px;
    border-radius:30px;
    font-weight:600;
    font-size:16px;
    transition:all .2s;
}
.cta-btn:hover { background:var(--a2); transform:scale(1.04); text-decoration:none; }

/* ===== Footer ===== */
.site-footer {
    text-align:center;
    padding:30px 24px;
    border-top:1px solid var(--bd);
}
.footer-links {
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.footer-links a {
    font-size:14px;
    color:var(--mt);
    transition:color .2s;
}
.footer-links a:hover { color:var(--ac); }

/* ===== Responsive ===== */
@media(max-width:700px) {
    .flow-strip-inner { flex-wrap:wrap; }
    .flow-strip-item { flex:1 1 calc(50% - 8px); min-width:130px; }
    .cl-art-inner { flex-direction:column; gap:20px; }
    .flow-hero-card h1 { font-size:28px; }
    .flow-hero-card { padding:40px 20px; }
    .site-nav { padding:0 12px; }
    .nav-links a { font-size:12px; padding:4px 8px; }
}
@media(max-width:480px) {
    .flow-strip-item { flex:1 1 100%; }
}