@charset "utf-8";
/* ============ Design Tokens ============ */
:root{
  --bg:#F6F5F0;
  --card:#FFFFFF;
  --ink:#202522;
  --ink-2:#646B66;
  --green:#356C55;
  --green-soft:#E7EFE9;
  --orange:#C8783A;
  --border:#DDE1DC;
  --green-deep:#2A5644;
  --shadow-sm:0 1px 2px rgba(32,37,34,.04),0 2px 8px rgba(32,37,34,.05);
  --shadow-md:0 4px 14px rgba(32,37,34,.07),0 12px 32px rgba(32,37,34,.06);
  --radius:18px;
  --radius-sm:12px;
  --maxw:1200px;
  --font:"Noto Sans SC","Source Han Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{ font-family:var(--font);background:var(--bg); color:var(--ink);line-height:1.7; -webkit-font-smoothing:antialiased  font-size:16px;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}





/* ============ 顶部 ============ */
header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(140%) blur(12px);  box-shadow:var(--shadow-sm);}
.nav{ display:flex;align-items:center;justify-content:space-between;height:68px}
.brand {}
.brand img { height: 41px; }
.nav-links { display:flex;gap:30px;font-size:15px;color:var(--ink-2);font-weight:500}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--green)}

.btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:600;font-size:15px;cursor:pointer;border:none;border-radius:11px;transition:transform .15s,box-shadow .2s,background .2s; font-family:inherit; background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(53,108,85,.28);padding:10px 18px;}
.btn2:hover{background:var(--green-deep);transform:translateY(-1px)}



.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:600;font-size:15px;cursor:pointer;border:none;border-radius:11px;transition:transform .15s,box-shadow .2s,background .2s; font-family:inherit;}

.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(53,108,85,.28);padding:15px 30px;font-size:16px}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.8);color:var(--ink);border:1px solid var(--border);padding:15px 30px;font-size:16px}
.btn-ghost:hover{border-color:var(--green);color:var(--green);}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(200,120,58,.28)}
.btn-orange:hover{filter:brightness(1.05);transform:translateY(-1px)}




/* ============ 第一屏 ============ */
.hero { padding:80px 0 100px 0; background: url(../images/bj01.jpg) center -20px no-repeat; background-size: cover; /*background:radial-gradient(1200px 420px at 78% -8%,var(--green-soft),transparent 60%);*/}
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr;  gap:56px;/*align-items:center;*/}
.hero h1 { font-size:44px;font-weight:800;line-height:1.12;letter-spacing:-.02em;margin-bottom:6px;}
.hero .core-title{font-size:30px;font-weight:800;color:var(--green);margin-bottom:16px;line-height:1.3}
.hero .sub{font-size:17px;color:var(--ink-2);margin-bottom:14px;max-width:520px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.trust{ display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2); background:#fff;border:1px solid var(--border);border-radius:12px;padding:15px 20px; box-shadow:var(--shadow-sm);max-width:540px;}
.trust .badge{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;color:var(--green);font-weight:800;font-size:14px;}
.trust b{color:var(--ink);font-weight:700}


/* ============ 村事 ·工作台 ============ */
.stage{ background:#fff;border:1px solid var(--border);border-radius:20px; box-shadow:var(--shadow-md);overflow:hidden;}
.stage-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--border);background:#FBFAF7}
.stage-bar i{width:10px;height:10px;border-radius:50%;background:var(--border);display:block}
.stage-bar i:first-child{background:#E2A98A}
.stage-bar .url{margin-left:10px;font-size:12px;color:var(--ink-2);background:var(--bg);padding:4px 12px;border-radius:7px}
.stage-body{display:grid;grid-template-columns:118px 1fr 200px;min-height:380px}
.stage-nav{background:var(--green-soft);padding:16px 12px;border-right:1px solid var(--border)}
.stage-nav .ttl{font-size:11px;font-weight:700;color:var(--green);letter-spacing:.06em;margin-bottom:12px;padding-left:4px}
.chip{ display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--green-deep); padding:8px 9px;border-radius:9px;margin-bottom:7px;background:rgba(255,255,255,.6);}
.chip .seal{ flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--green);color:#fff; display:grid;place-items:center;font-size:11px;font-weight:800;}
.stage-chat{padding:18px 18px;display:flex;flex-direction:column;gap:12px}
.bubble{font-size:13px;line-height:1.55;border-radius:12px;padding:12px 14px;max-width:92%}
.bubble.in{background:var(--bg);border:1px solid var(--border);align-self:flex-start}
.bubble.in b{color:var(--ink)}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.tag-row.show{opacity:1;transform:none}
.tag{font-size:11.5px;font-weight:600;color:var(--green-deep);background:var(--green-soft);padding:5px 10px;border-radius:999px;border:1px solid rgba(53,108,85,.18)}
.think{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .4s}
.think.show{opacity:1}
.think .spin{width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage-pkg{padding:16px 14px;border-left:1px solid var(--border);background:#FBFAF7}
.stage-pkg .ttl{font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.05em;margin-bottom:12px;display:flex;justify-content:space-between}
.pkg-item{ display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 10px;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--ink); opacity:0;transform:translateX(10px);transition:opacity .45s,transform .45s;}
.pkg-item.show{opacity:1;transform:none}
.pkg-item .ic{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:10px;font-weight:800}
.pkg-item .st{margin-left:auto;font-size:10px;color:var(--orange);font-weight:700}



/* ============ 基层真实问题 ============ */
.lm { font-size:40px; line-height:1.2em; font-weight:800;color:#356c55; margin:0; text-align:center; }

#problem { background: #f6f5f0; padding:80px 0; }
.cards-3 {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px; }
.card { text-align: center; background:var(--card);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s; padding:32px 28px 28px;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card h2 { text-align: center;  display:grid;place-items:center; margin-bottom:20px; }
.card h2 img { width:25%;}
.card h3{font-size:22px;font-weight:700;margin:10px 0 8px 0;}
.card p{font-size:16px;color:var(--ink-2)}
.close-note{margin-top:30px;font-size:17px;color:var(--ink-2);max-width:780px;padding:22px 26px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--green);border-radius:14px;}






/* ============ 产品演示 ============ */
#demo { background: #356c55; padding:80px 0; }

.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.duo-col{display:flex;flex-direction:column;gap:18px}
.duo-head { margin-bottom: 20px; }
.duo-head h2{font-size:36px;font-weight:800;color:#fff; line-height: 1.2em;}
.duo-head p{font-size:16px;color:rgba(255,255,255,.8); margin-top:15px;line-height:1.5em}
.dtalk{
  margin:0;background:#EDEDED;border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;height:620px;
}
.dtalk-head{
  flex:0 0 auto;padding:14px 16px;background:#F4F4F4;border-bottom:1px solid #E5E5E5;
  display:flex;align-items:center;gap:12px;
}
.dtalk-head .av{
  width:36px;height:36px;border-radius:8px;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:16px;font-weight:800;
}
.dtalk-head .meta h3{font-size:15px;font-weight:700;color:var(--ink);line-height:1.2}
.dtalk-head .meta .stat{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.dtalk-body{
  flex:1;overflow-y:auto;padding:18px 14px;display:flex;flex-direction:column;gap:14px;
}
.dtalk-body::-webkit-scrollbar{width:4px}
.dtalk-body::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
.dtalk-row{display:flex;gap:8px;align-items:flex-start}
.dtalk-row.r{flex-direction:row-reverse}
.dtalk-row .av-s{
  width:30px;height:30px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;
}
.dtalk-row.l .av-s{background:var(--green)}
.dtalk-row.r .av-s{background:#1677FF}
.dtalk-bubble{
  max-width:74%;padding:9px 12px;border-radius:4px;font-size:13.5px;line-height:1.55;
  position:relative;
}
.dtalk-row.l .dtalk-bubble{background:#fff;color:var(--ink);border:1px solid #EAEAEA}
.dtalk-row.r .dtalk-bubble{background:#95EC69;color:var(--ink)}
.dtalk-bubble .tri{
  position:absolute;top:12px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.dtalk-row.l .dtalk-bubble .tri{left:-6px;border-right:6px solid #fff}
.dtalk-row.r .dtalk-bubble .tri{right:-6px;border-left:6px solid #95EC69}
.doc-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.doc-card{
  display:flex;align-items:center;gap:10px;background:#F7F7F7;border:1px solid #EAEAEA;
  border-radius:6px;padding:9px 11px;min-width:230px;
}
.doc-card .ic{
  flex:0 0 auto;width:28px;height:32px;border-radius:4px;display:grid;place-items:center;
  color:#fff;font-size:10px;font-weight:800;position:relative;
}
.doc-card .ic.doc{background:#2B82F0}
.doc-card .ic.doc::before{content:'DOC'}
.doc-card .ic.ppt{background:#E8743A}
.doc-card .ic.ppt::before{content:'PPT'}
.doc-card .ic.xls{background:#2BA85E}
.doc-card .ic.xls::before{content:'XLS'}
.doc-card .meta{flex:1;min-width:0}
.doc-card .meta .nm{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-card .meta .sz{font-size:11px;color:var(--ink-2);margin-top:2px}
.doc-card .dl{flex:0 0 auto;color:var(--green);font-size:18px}
.dtalk-input{
  flex:0 0 auto;padding:10px 12px;background:#F7F7F7;border-top:1px solid #E5E5E5;
  display:flex;align-items:center;gap:10px;
}
.dtalk-input .tools{display:flex;gap:10px;color:var(--ink-2);font-size:18px}
.dtalk-input .box{
  flex:1;background:#fff;border:1px solid #E5E5E5;border-radius:4px;padding:7px 10px;
  font-size:13px;color:var(--ink-2);
}
.dtalk-input .send{
  background:var(--green);color:#fff;font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:4px;
}

/* ============ 文字说明 ============ */
.golden{margin-top:10px;text-align:center;font-size:20px; font-weight:500; line-height: 2.75em; color:#fff; background:rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.8);  border-radius:var(--radius); box-shadow: var(--shadow-sm); letter-spacing:-.01em;}




/* ============ 真实案例 ============ */
#case { background: #fff; padding:80px 0;}

.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:50px;}
.case-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.case-card .photo{width:100%;height:240px;object-fit:cover;display:block}
.case-card .body{padding:20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.case-card .body h3{font-size:22px;font-weight:700;color:var(--ink)}
.case-card .body .desc{font-size:16px;color:var(--ink-2);line-height:1.6}
.case-card .body .src{font-size:14px;color:var(--green);font-weight:400;margin-top:auto}


.case-wrap{ margin-left:auto;margin-right:auto; display:grid;grid-template-columns:1fr;margin-top:30px;align-items:start;}
.case-demo{ background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.case-demo .ttl{font-weight:700; font-size:22px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.case-demo .flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px}
.case-demo .flow span{font-size:16px;font-weight:500;background:var(--green-soft);color:var(--green-deep);padding:10px 25px;border-radius:999px;position:relative}
.case-demo .flow span:not(:last-child)::after{content:"";position:absolute;right:-20px;top:50%;width:20px;height:2px;background:var(--green);transform:translateY(-50%);opacity:.5}

.case-note{margin-top:20px;font-size:14px;color:var(--orange);font-weight:500;text-align:center}




/* ============ 服务模式 ============ */
#modes { background: #f6f5f0; padding:80px 0; }
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.mode{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.mode.feature{border:2px solid var(--green);box-shadow:var(--shadow-md)}
.mode .tier{font-size:13px;font-weight:700;color:var(--green);letter-spacing:.05em;margin-bottom:8px}
.mode h3{font-size:21px;font-weight:800;margin-bottom:10px}
.mode .who{font-size:13.5px;color:var(--ink-2);background:var(--bg);border-radius:10px;padding:10px 14px;margin-bottom:18px}
.mode ul{list-style:none;flex:1}
.mode li{font-size:14px;color:var(--ink-2);padding:9px 0;border-bottom:1px dashed var(--border);display:flex;gap:10px;align-items:flex-start}
.mode li:last-child{border-bottom:none}
.mode li::before{content:"✓";color:var(--green);font-weight:800;flex:0 0 auto}
.mode .btn{margin-top:22px;width:100%}


.fwms { text-align:center;}
.fwms span {display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em; color:var(--green);background:var(--green-soft);padding:7px 14px;border-radius:999px;margin-bottom:20px;}
.fwms span b {width:6px;height:6px;border-radius:50%;background:var(--green)}
.fwms h2 {color:#356c55; font-size:40px;font-weight:800;line-height:1.25; letter-spacing:-.01em;margin-bottom:14px; }
.fwms p {font-size:17px;color:var(--ink-2);max-width:720px;margin-bottom:8px; margin: 0 auto;}





/* ============ 底部 ============ */
footer{background:var(--green); padding:45px 0; display:block; width: 100%; float: left; }
.foot-grid{/*display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px*/}

.foot-brand { float: left; width: 37%; }
.foot-brand h4{color:#fff;font-size:18px;font-weight:600;margin-bottom:16px;letter-spacing:.03em}
.foot-brand p{font-size:14px;color:rgba(255,255,255,.7); margin: 10px 0;}
.foot-brand p img { width: 120px;margin:5px 0;}
.foot-col { float: left; width: 21%;}
.foot-col h4{color:#fff;font-size:18px;font-weight:600;margin-bottom:16px;letter-spacing:.03em}
.foot-col a{display:block;font-size:14px;color:rgba(255,255,255,.7);padding:6px 0;transition:color .2s}
.foot-col a:hover{color:#fff}

.foot-bottom{float: left; width: 100%;  border-top:1px solid rgba(255,255,255,.2); margin-top:32px; padding-top:22px; display:flex;justify-content:space-between;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.7);}



.reveal { opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease; }
.reveal.in{opacity:1;transform:none}


@media(max-width:749px){
	
	/* ============ 顶部 ============ */
header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(140%) blur(12px);}
.nav{ display:flex;align-items:center;justify-content:space-between;height:14vw;}
.brand { }
.brand img { height: 7vw; }
.nav-links{display:none}

.btn2{font-size:3.5vw; border-radius:2.5vw; padding:1.6vw 4vw; font-weight: 500;}
.btn2:hover{background:var(--green-deep);transform:translateY(-1px)}
	
.btn { font-size:3.5vw; border-radius:2.5vw; padding:1.6vw 4vw; font-weight: 500; }
	
.wrap{padding:0 5%}
	
/* ============ 第一屏 ============ */
.hero { padding:7vw 0; background: url(../images/bj01_mob.jpg) left top no-repeat; background-size: 100%; }
.hero-grid{grid-template-columns:1fr;gap:40px}
.hero h1 { font-size:7vw;ine-height:1.12;margin-bottom:6px;}
.hero .core-title{font-size:5vw;margin-bottom:2vw;line-height:1.3}
.hero .sub{font-size:3.75vw;margin-bottom:14px;max-width:70%}
.hero .cta-row{margin-bottom:1vw}
.trust{ font-size:3.5vw;border-radius:2.5vw; padding:2.5vw 4vw; max-width:92%; margin-top:5vw;}
.trust .badge{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;color:var(--green);font-weight:800;font-size:14px;}
.trust b{color:var(--ink);font-weight:700}
	
/* ============ 村事 ·工作台 ============ */	
.stage{border-radius:2.5vw; margin-top: 38vw;}
.stage-body {grid-template-columns:1fr; min-height:50vw;}
.stage-nav,.stage-pkg{display:none}

	
/* ============ 基层真实问题 ============ */
.lm { font-size:6vw; line-height:1.2; }

#problem { background: #f6f5f0; padding:6vw 0; }
.cards-3 {grid-template-columns:1fr 1fr;gap:3.5vw;margin-top:5vw;}
.card { padding:4vw;}
.card h2 { margin-bottom:2vw; }
.card h2 img { width:35%;}
.card h3{font-size:4vw;margin:10px 0 8px 0;}
.card p{font-size:3.5vw;}	
.close-note{margin-top:4vw;font-size:3.75vw;max-width:100%;padding:3.5vw 4.5vw; border-radius:2.5vw;}


/* ============ 产品演示 ============ */
#demo { background: #356c55;  padding:6vw 0; }
.duo-grid{grid-template-columns:1fr;}
.duo-col{gap:0}
.duo-head { margin-bottom: 5vw; }
.duo-head h2{font-size:6vw; }
.duo-head p{font-size:3.75vw; margin-top:2.5vw;}
	
.golden{margin-top:3vw;;font-size:4vw;line-height: 2.75em;   border-radius:var(--radius); box-shadow: var(--shadow-sm); letter-spacing:-.01em;}	
	

	
/* ============ 真实案例 ============ */	
#case { background: #fff;  padding:6vw 0;  }
.case-grid{grid-template-columns:1fr;gap:5vw ; margin-top:5vw;}
.case-card .photo{;height:50vw;}
	
.case-card .body{ padding:3.5vw 4.5vw;gap:1vw;}
.case-card .body h3{font-size:4.5vw;font-weight:700;color:var(--ink)}
.case-card .body .desc{font-size:3.25vw;}
.case-card .body .src{font-size:3.25vw;}

.case-wrap { grid-template-columns:1fr;gap:5vw; margin-top:5vw;}
.case-demo { padding:3.75vw 4.5vw;}
.case-demo .ttl{font-weight:700;font-size:4vw;margin-bottom:3vw;gap:1vw}
	
.case-demo .flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3vw}
.case-demo .flow span{font-size:3.25vw;font-weight:500;background:var(--green-soft);color:var(--green-deep);padding:1.5vw 3.75vw;border-radius:999px;position:relative}
.case-demo .flow span:not(:last-child)::after{content:"";position:absolute;right:-3vw;top:50%;width:3vw;height:2px;background:var(--green);transform:translateY(-50%);opacity:.5}

.case-note{margin-top:20px;font-size:3vw;color:var(--orange);font-weight:500;text-align:center}

	
	
	
/* ============ 服务模式 ============ */
#modes { background: #f6f5f0; padding:6vw 0; }
.modes{grid-template-columns:1fr;gap:5vw;margin-top:5vw}
.fwms { text-align:center;}
.fwms span {gap:1.5vw;font-size:3vw; font-weight:500; padding:1.5vw 4vw; margin-bottom:2.5vw;}
.fwms span b {width:5px;height:5px;border-radius:50%;background:var(--green)}
.fwms h2 {font-size:6vw;margin-bottom:2.5vw; }
.fwms p {font-size:3.5vw;max-width:100%;margin-bottom:8px; }
	
	

/* ============ 底部 ============ */
footer{ padding:6vw 0;  }


.foot-brand { width: 100%; text-align: center; }
.foot-brand h4{font-size:5vw;margin-bottom:0;}
.foot-brand p {font-size:3.25vw;; margin: 3.5vw 0;  }
.foot-brand p img { width:30vw; margin:0 auto;}
	
.foot-col {width: 33%; display: none; }
.foot-col h4{font-size:3.5vw;fmargin-bottom:3vw;}
.foot-col a{font-size:3vw;}


.foot-bottom{ margin-top:2vw; padding-top:5vw; line-height: 1.8em; font-size:3.25vw;color:rgba(255,255,255,.7); }
	.foot-bottom span { text-align: center; width: 100%;}

}