/* 可视化首页区块样式（前台页面与后台拖拽画布共用） */
.hp-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.hp-flex{display:flex;align-items:center}
/* header */
.hp-header{position:sticky;top:0;z-index:99;background:rgba(255,255,255,.96);box-shadow:0 1px 8px rgba(0,0,0,.06)}
.hp-header .hp-wrap{height:70px;justify-content:space-between}
.hp-logo{display:flex;align-items:center;font-size:20px;font-weight:700;color:#2c3e50}
.hp-logo img{height:38px;width:auto;margin-right:10px}
.hp-nav a{margin:0 16px;font-size:15px;color:#5a6b7b;transition:color .2s}
.hp-nav a:hover{color:#ff5a3c}
.hp-actions{display:flex;align-items:center;gap:12px}
.hp-btn{display:inline-block;padding:8px 20px;border-radius:22px;font-size:14px;cursor:pointer;transition:all .2s}
.hp-btn-ghost{border:1px solid #ff5a3c;color:#ff5a3c}
.hp-btn-ghost:hover{background:#fff3f0}
.hp-btn-solid{background:linear-gradient(90deg,#ff7a45,#ff4d4f);color:#fff}
.hp-btn-solid:hover{opacity:.9}
/* banner */
.hp-banner{position:relative;overflow:hidden;background:#f4f6f9}
.hp-banner .hp-bn-slide{display:none;position:relative}
.hp-banner .hp-bn-slide.on{display:block}
.hp-banner .hp-bn-slide img{width:100%;object-fit:cover}
.hp-bn-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.hp-bn-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
.hp-bn-dots i.on{background:#fff;width:22px;border-radius:5px}
/* section common */
.hp-sec{padding:70px 0}
.hp-sec-title{text-align:center;font-size:30px;font-weight:700;margin-bottom:12px}
.hp-sec-sub{text-align:center;color:#8a97a5;font-size:15px;margin-bottom:48px}
.hp-alt{background:#f7f9fc}
/* features */
.hp-feat{display:grid;gap:24px;min-width:0}
.hp-feat-item{min-width:0;background:#fff;border:1px solid #eef1f5;border-radius:12px;padding:32px 24px;text-align:center;transition:all .25s}
.hp-feat-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.08);border-color:transparent}
.hp-feat-item img{height:56px;width:56px;margin:0 auto 18px;object-fit:contain}
.hp-feat-item h4{font-size:18px;margin-bottom:8px}
.hp-feat-item p{color:#8a97a5;font-size:14px}
/* core funcs */
.hp-core-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hp-core-col{min-width:0;background:#fff;border:1px solid #eef1f5;border-radius:12px;padding:24px}
.hp-core-col h5{font-size:17px;margin-bottom:16px;padding-left:10px;border-left:4px solid #ff5a3c}
.hp-core-item{display:flex;align-items:center;padding:8px 0;color:#5a6b7b;font-size:14px}
.hp-core-item img{width:22px;height:22px;margin-right:10px;object-fit:contain}
/* tab show */
.hp-tab{display:flex;gap:40px;align-items:stretch}
.hp-tab-nav{width:220px;flex-shrink:0}
.hp-tab-nav .t{padding:18px 20px;border-radius:10px;cursor:pointer;margin-bottom:10px;background:#f2f5f9;font-size:16px;transition:all .2s}
.hp-tab-nav .t.on{background:linear-gradient(90deg,#ff7a45,#ff4d4f);color:#fff}
.hp-tab-body{flex:1;display:none;background:#fff;border:1px solid #eef1f5;border-radius:12px;padding:36px}
.hp-tab-body.on{display:block}
.hp-tab-body h4{font-size:22px;margin-bottom:14px}
.hp-tab-body p{color:#5a6b7b;margin-bottom:20px}
/* solution */
.hp-sol-row{display:flex;align-items:center;gap:50px;margin-bottom:56px}
.hp-sol-row:last-child{margin-bottom:0}
.hp-sol-row.rev{flex-direction:row-reverse}
.hp-sol-txt{flex:1}
.hp-sol-txt h4{font-size:24px;margin-bottom:14px}
.hp-sol-txt p{color:#5a6b7b}
.hp-sol-img{flex:1;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08)}
/* rich text */
.hp-rich{padding:50px 0}
/* cta */
.hp-cta{background:linear-gradient(120deg,#ff7a45,#ff4d4f);color:#fff;text-align:center;padding:70px 20px}
.hp-cta h3{font-size:32px;margin-bottom:28px}
.hp-cta .hp-btn{background:#fff;color:#ff4d4f;padding:14px 44px;font-size:16px;border-radius:30px}
/* footer */
.hp-footer{background:#1f2a37;color:#9aa7b4;padding:40px 0;font-size:14px;text-align:center}
.hp-footer a{color:#cdd6df;margin:0 10px}

@media(max-width:900px){
	.hp-core-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hp-tab{flex-direction:column}
	.hp-tab-nav{width:100%}
	.hp-sol-row,.hp-sol-row.rev{flex-direction:column}
	.hp-nav{display:none}
}