/* 汇安信 PC — 浅色高级简约 */

:root {
    --bg:        #f4f6f1;
    --surface:   #ffffff;
    --ink:       #0e1a12;
    --ink-soft:  #5b6a60;
    --ink-faint: #8c988f;
    --line:      #e5e9e1;
    --green:     #1c6b45;
    --green-2:   #25925f;
    --green-soft:#e9f3ec;
    --green-tint:#f1f7f2;
    --shadow-sm: 0 1px 2px rgba(14,26,18,.04), 0 4px 16px rgba(14,26,18,.05);
    --shadow-md: 0 8px 28px rgba(14,26,18,.08);
    --shadow-lg: 0 24px 60px rgba(14,26,18,.12);
}

* { box-sizing:border-box; }
html, body {
    margin:0; padding:0;
    font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
    background:var(--bg); color:var(--ink);
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html { font-size:calc(100vw / 120); }
@media (max-width:1280px){ html{ font-size:10.67px; } }
@media (min-width:1921px){ html{ font-size:16px; } }
@media (min-width:2560px){ html{ font-size:21.33px; } }
body { font-size:14px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

.wrap { max-width:78rem; margin:0 auto; padding:0 3rem; }

/* ── 顶栏 ── */
.topbar {
    position:sticky; top:0; z-index:100;
    background:rgba(244,246,241,.82);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
}
.topbar-inner {
    max-width:78rem; margin:0 auto; padding:1rem 3rem;
    display:flex; align-items:center; justify-content:space-between;
}
.brand { display:flex; align-items:center; }
.brand-logo-text { height:2.6rem; width:auto; }
.nav-links { display:flex; gap:2.4rem; font-size:.88rem; color:var(--ink-soft); font-weight:500; }
.nav-links a:hover { color:var(--green); }
.nav-action {
    background:var(--ink); color:#fff; border:none;
    padding:.6rem 1.5rem; border-radius:.6rem;
    font-size:.85rem; font-weight:600;
    transition:transform .2s, background .2s;
}
.nav-action:hover { background:var(--green); transform:translateY(-1px); }

/* ── Hero ── */
.hero {
    position:relative;
    text-align:center;
    padding:6rem 3rem 4rem;
    max-width:62rem; margin:0 auto;
}
.eyebrow {
    display:inline-flex; align-items:center; gap:.5rem;
    border:1px solid var(--line); background:var(--surface);
    border-radius:99px; padding:.4rem 1rem;
    font-size:.75rem; font-weight:600; color:var(--green);
    letter-spacing:.04em; margin-bottom:2rem; box-shadow:var(--shadow-sm);
}
.eyebrow-dot { width:.45rem; height:.45rem; border-radius:50%; background:var(--green-2); }
.hero h1 {
    font-size:4.6rem; font-weight:800; line-height:1.08;
    letter-spacing:-.035em; margin:0 0 1.6rem; color:var(--ink);
}
.hero h1 em { font-style:normal; color:var(--green); }
.hero-lead {
    font-size:1.1rem; line-height:1.8; color:var(--ink-soft);
    max-width:38rem; margin:0 auto 2.6rem;
}
.hero-actions { display:flex; gap:.9rem; justify-content:center; }
.btn-solid {
    background:var(--green); color:#fff; border:none;
    padding:.95rem 2.2rem; border-radius:.7rem;
    font-size:1rem; font-weight:600;
    box-shadow:var(--shadow-md);
    transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-solid:hover { transform:translateY(-2px); background:var(--green-2); box-shadow:var(--shadow-lg); }
.btn-ghost {
    background:var(--surface); color:var(--ink); border:1px solid var(--line);
    padding:.95rem 2rem; border-radius:.7rem;
    font-size:1rem; font-weight:600;
    transition:border-color .2s, transform .2s;
}
.btn-ghost:hover { border-color:var(--green); transform:translateY(-2px); }

/* ── Hero 视觉：手机聊天 mockup ── */
.hero-visual {
    position:relative;
    display:flex; justify-content:center;
    padding:4rem 0 2rem;
}
.hero-visual::before {
    content:'';
    position:absolute; top:8%; left:50%; transform:translateX(-50%);
    width:46rem; height:30rem;
    background:radial-gradient(ellipse at center, var(--green-soft) 0%, transparent 65%);
    z-index:0;
}
.phone-frame {
    position:relative; z-index:2;
    width:21rem; height:42rem;
    background:#0e1a12; border-radius:3rem;
    padding:.7rem;
    box-shadow:var(--shadow-lg), 0 0 0 1px rgba(14,26,18,.06);
}
.phone-screen {
    width:100%; height:100%; border-radius:2.4rem; overflow:hidden;
    background:linear-gradient(170deg,#f0f5f1 0%,#ffffff 60%);
    display:flex; flex-direction:column;
}
.phone-notch {
    position:absolute; top:.7rem; left:50%; transform:translateX(-50%);
    width:7rem; height:1.5rem; background:#0e1a12; border-radius:0 0 1rem 1rem; z-index:3;
}
.chat-top {
    display:flex; align-items:center; gap:.7rem;
    padding:2.4rem 1.4rem 1rem; border-bottom:1px solid var(--line);
}
.chat-avatar { width:2.4rem; height:2.4rem; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; }
.chat-avatar img { width:1.5rem; height:1.5rem; filter:brightness(0) invert(1); }
.chat-name { font-size:.92rem; font-weight:700; }
.chat-status { font-size:.68rem; color:var(--green-2); display:flex; align-items:center; gap:.3rem; }
.chat-status::before { content:''; width:.4rem; height:.4rem; border-radius:50%; background:var(--green-2); }
.chat-body { flex:1; padding:1.2rem 1rem; display:flex; flex-direction:column; gap:.8rem; }
.bubble { max-width:76%; padding:.7rem .95rem; border-radius:1.1rem; font-size:.82rem; line-height:1.5; }
.bubble.in { align-self:flex-start; background:#eef1ec; color:var(--ink); border-bottom-left-radius:.35rem; }
.bubble.out { align-self:flex-end; background:var(--green); color:#fff; border-bottom-right-radius:.35rem; }
.bubble-lock { display:flex; align-items:center; gap:.35rem; font-size:.62rem; color:var(--ink-faint); align-self:center; margin-top:.2rem; }
.bubble-lock svg { width:.7rem; height:.7rem; }
.chat-input {
    margin:0 1rem 1.2rem; padding:.7rem 1rem;
    background:#eef1ec; border-radius:99px;
    font-size:.78rem; color:var(--ink-faint);
    display:flex; align-items:center; justify-content:space-between;
}
.chat-send { width:1.7rem; height:1.7rem; border-radius:50%; background:var(--green); }

/* 浮动凭证卡 */
.float-tag {
    position:absolute; z-index:3;
    background:var(--surface); border:1px solid var(--line);
    border-radius:1rem; padding:.7rem 1rem; box-shadow:var(--shadow-md);
    display:flex; align-items:center; gap:.6rem;
    animation:bob 4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-.6rem)} }
.float-tag svg { width:1.3rem; height:1.3rem; color:var(--green); }
.float-tag strong { font-size:.8rem; display:block; }
.float-tag span { font-size:.66rem; color:var(--ink-soft); }
.ft-left { top:9rem; left:calc(50% - 19rem); }
.ft-right { bottom:8rem; right:calc(50% - 18rem); animation-delay:1.6s; }

/* ── 信任条 ── */
.trust-strip {
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--surface);
}
.trust-inner {
    max-width:78rem; margin:0 auto; padding:2.6rem 3rem;
    display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center;
}
.trust-item strong { display:block; font-size:2.2rem; font-weight:800; color:var(--green); letter-spacing:-.02em; }
.trust-item span { font-size:.82rem; color:var(--ink-soft); }

/* ── 特性 zigzag ── */
.features { padding:7rem 0 5rem; }
.section-head { text-align:center; max-width:42rem; margin:0 auto 5rem; }
.section-tag {
    font-size:.72rem; font-weight:700; letter-spacing:.22em; color:var(--green);
    text-transform:uppercase; display:block; margin-bottom:1rem;
}
.section-head h2 { font-size:2.8rem; font-weight:800; letter-spacing:-.03em; margin:0 0 1rem; }
.section-head p { font-size:1.02rem; color:var(--ink-soft); margin:0; }

.feat-row {
    display:grid; grid-template-columns:1fr 1fr; gap:4rem;
    align-items:center; margin-bottom:5rem;
}
.feat-row:nth-child(even) .feat-visual { order:2; }
.feat-num { font-size:.85rem; font-weight:700; color:var(--green); letter-spacing:.1em; margin-bottom:1rem; }
.feat-copy h3 { font-size:2rem; font-weight:800; letter-spacing:-.02em; margin:0 0 1.1rem; }
.feat-copy p { font-size:1rem; line-height:1.85; color:var(--ink-soft); margin:0 0 1.6rem; }
.feat-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.8rem; }
.feat-list li { display:flex; align-items:center; gap:.7rem; font-size:.92rem; color:var(--ink); }
.feat-list svg { width:1.1rem; height:1.1rem; color:var(--green); flex-shrink:0; }

.feat-visual {
    border-radius:2rem; padding:3.5rem;
    min-height:22rem;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
}
.feat-visual.v1 { background:linear-gradient(150deg,#1c6b45,#25925f); }
.feat-visual.v2 { background:var(--green-tint); border:1px solid var(--line); }
.feat-visual.v3 { background:linear-gradient(150deg,#0e1a12,#1c3326); }
.feat-glyph { width:7rem; height:7rem; }
.feat-visual.v1 .feat-glyph, .feat-visual.v3 .feat-glyph { color:#fff; }
.feat-visual.v2 .feat-glyph { color:var(--green); }
.feat-visual .deco {
    position:absolute; border-radius:50%; border:1px solid currentColor; opacity:.18;
}
.feat-visual.v1, .feat-visual.v3 { color:#fff; }
.feat-visual.v2 { color:var(--green); }
.deco-1 { width:16rem; height:16rem; top:-4rem; right:-4rem; }
.deco-2 { width:24rem; height:24rem; bottom:-8rem; left:-6rem; }

/* ── 下载 ── */
.download {
    background:linear-gradient(160deg,#1f5a3e 0%,#16432e 100%); color:#fff;
    padding:6rem 0;
    border-radius:2.5rem;
    max-width:78rem; margin:2rem auto 5rem;
}
.download .section-head h2 { color:#fff; }
.download .section-head p { color:rgba(255,255,255,.7); }
.download .section-tag { color:#9ff0c2; }
.download-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
    max-width:66rem; margin:0 auto; padding:0 3rem;
}
.dl-card {
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
    border-radius:1.4rem; padding:2.4rem 1.6rem; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:.65rem;
    transition:background .2s, transform .2s, border-color .2s; cursor:pointer;
}
.dl-card:hover { background:rgba(255,255,255,.14); border-color:rgba(159,240,194,.5); transform:translateY(-4px); }
.dl-icon {
    width:3.6rem; height:3.6rem; border-radius:1rem; margin-bottom:.5rem;
    background:rgba(159,240,194,.18); display:flex; align-items:center; justify-content:center; color:#9ff0c2;
}
.dl-icon svg { width:1.9rem; height:1.9rem; }
.dl-card strong { font-size:1.25rem; font-weight:700; }
.dl-card span { font-size:.9rem; color:rgba(255,255,255,.7); }
.dl-btn {
    margin-top:.9rem; width:100%; background:#9ff0c2; color:#16432e; border:none;
    font-size:1rem; font-weight:700; padding:.8rem 1rem; border-radius:.7rem;
    transition:background .2s, transform .2s;
}
.dl-card:hover .dl-btn { background:#fff; }
.dl-card:hover .dl-btn { transform:translateY(-1px); }
.dl-card.qr-type .qr-box {
    width:7.5rem; height:7.5rem; background:#fff; border-radius:.7rem; padding:.45rem; margin-top:.55rem;
    display:flex; align-items:center; justify-content:center;
}
.dl-card.qr-type .qr-box img, .dl-card.qr-type .qr-box canvas { width:100%!important; height:100%!important; display:block; }

/* ── 页脚 ── */
.footer {
    border-top:1px solid var(--line);
    padding:2.5rem 0;
}
.footer-inner {
    max-width:78rem; margin:0 auto; padding:0 3rem;
    display:flex; align-items:center; justify-content:space-between;
    font-size:.78rem; color:var(--ink-faint);
}
.footer-left { display:flex; align-items:center; gap:1rem; }
.footer-logo-text { height:1.5rem; width:auto; opacity:.8; }
.footer-right { display:flex; align-items:center; gap:1.5rem; }
.footer-icp { color:var(--ink-soft); transition:color .2s; }
.footer-icp:hover { color:var(--green); }