/* ============================================================
   hz001 体育企业模板（足球版） · 参考 materialistica.com 落地页架构
   深色星空 Hero 玻璃卡 / 圆形渐变图标 WhyUs / 紫粉 Tab 五专区
   粉白 Changelog 卡 / 米黄 App+悬浮二维码 / 青黄 News 横滚 / 暗色图片页脚
   全站统一 hz- 前缀 class，Bootstrap 5 之上做皮肤层。
   ============================================================ */
:root{
    --hz-page:#f7f9fc;
    --hz-surface:#ffffff;
    --hz-ink:#0f1a3a;
    --hz-ink-2:#5b6688;
    --hz-line:#e5eaf3;
    --hz-primary:#4e7bff;
    --hz-primary-2:#2a53ff;
    --hz-primary-grad:linear-gradient(90deg,#4e7bff,#2a53ff);
    --hz-header-grad:linear-gradient(90deg,#4e54c8,#8f94fb);
    --hz-icon-grad:linear-gradient(135deg,#5e9dfd,#7f77f8);
    --hz-orange:#ff9900;
    --hz-orange-2:#ffb347;
    --hz-hero-dark-1:#0a0f2c;
    --hz-hero-dark-2:#000814;
    --hz-section-1:#eef2f9;
    --hz-section-2:linear-gradient(135deg,#e49bff,#bbe9ff);
    --hz-section-3:linear-gradient(135deg,#eeeeee,#ffe6f7);
    --hz-section-4:linear-gradient(135deg,#d1e9f6,#f6eacb);
    --hz-section-5:linear-gradient(135deg,#a8f1ff,#f6f6da);
    --hz-shadow:0 8px 24px rgba(30,50,120,.08);
    --hz-shadow-lg:0 20px 50px rgba(30,50,120,.15);
    --hz-radius:16px;
    --hz-radius-lg:24px;
}

/* ---------- 基础 ---------- */
html{scroll-behavior:smooth;}
.hz-body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--hz-page);color:var(--hz-ink);line-height:1.75;-webkit-font-smoothing:antialiased;}
.hz-body img{max-width:100%;}
.hz-body a{text-decoration:none;color:var(--hz-primary);}
.hz-body a:hover{color:var(--hz-primary-2);}
.mipcms-main{background:transparent;}

/* ---------- Skip Link (a11y) ---------- */
.hz-skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:10px 20px;background:var(--hz-primary);color:#fff;border-radius:0 0 8px 8px;font-size:14px;font-weight:700;text-decoration:none;transition:top .2s;}
.hz-skip-link:focus{top:0;color:#fff;}

#backTop{position:fixed;right:22px;bottom:32px;width:46px;height:46px;border:0;border-radius:50%;background:var(--hz-primary-grad);color:#fff;font-size:20px;box-shadow:0 12px 26px rgba(78,123,255,.4);opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s;z-index:1030;}
#backTop.show{opacity:1;visibility:visible;transform:none;}
#backTop:hover{transform:translateY(-4px);}

/* ---------- 按钮 ---------- */
.hz-btn-primary-pill{background:var(--hz-primary-grad);color:#fff !important;border:0;border-radius:999px;padding:.7rem 1.9rem;font-weight:700;box-shadow:0 10px 22px rgba(78,123,255,.32);transition:.25s;display:inline-flex;align-items:center;gap:.4rem;}
.hz-btn-primary-pill:hover,.hz-btn-primary-pill:focus{color:#fff !important;transform:translateY(-2px);box-shadow:0 14px 30px rgba(78,123,255,.42);}
.hz-btn-outline-pill{background:transparent;color:var(--hz-ink);border:1.5px solid rgba(15,26,58,.35);border-radius:999px;padding:.7rem 1.9rem;font-weight:700;transition:.25s;display:inline-flex;align-items:center;gap:.4rem;}
.hz-btn-outline-pill:hover{color:var(--hz-primary);border-color:var(--hz-primary);transform:translateY(-2px);}
.hz-btn-lg{padding:.85rem 2.1rem;font-size:16px;}

/* Hero 内的橙/透明白双胶囊 */
.hz-btn-hero-primary{background:var(--hz-orange);color:#0f1a3a !important;border:0;border-radius:999px;padding:.78rem 1.9rem;font-weight:800;box-shadow:0 12px 26px rgba(255,153,0,.35);transition:.25s;display:inline-flex;align-items:center;gap:.45rem;}
.hz-btn-hero-primary:hover{background:var(--hz-orange-2);color:#0f1a3a !important;transform:translateY(-2px);}
.hz-btn-hero-secondary{background:rgba(255,255,255,.08);color:#fff !important;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:.78rem 1.9rem;font-weight:800;backdrop-filter:blur(6px);transition:.25s;display:inline-flex;align-items:center;gap:.45rem;}
.hz-btn-hero-secondary:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff !important;transform:translateY(-2px);}

/* ---------- 顶部导航（蓝紫渐变 sticky） ---------- */
.hz-nav{background:var(--hz-header-grad);padding:.7rem 0;box-shadow:0 6px 22px rgba(78,84,200,.28);}
.hz-brand{display:flex;align-items:center;gap:.6rem;}
.hz-logo{width:40px;height:40px;display:inline-flex;flex:none;}
.hz-logo svg{width:100%;height:100%;}
.hz-brand-text{color:#fff;font-weight:900;font-size:19px;letter-spacing:.02em;}
.hz-nav .nav-link{color:rgba(255,255,255,.85);font-weight:600;padding:.45rem 1rem !important;border-radius:999px;transition:.2s;}
.hz-nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.14);}
.hz-nav .nav-item.active .nav-link{color:#fff;background:rgba(255,255,255,.2);}
.hz-nav-cta{background:#fff;color:var(--hz-primary-2);border:0;border-radius:999px;padding:.5rem 1.4rem;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.16);}
.hz-nav-cta:hover{color:var(--hz-primary-2);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22);}
.hz-nav .navbar-toggler{border-color:rgba(255,255,255,.35);}
.hz-nav .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

/* ---------- 通用小节标题 ---------- */
.hz-sec-head{margin-bottom:2.4rem;}
.hz-sec-head.center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto;}
.hz-eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--hz-primary);background:rgba(78,123,255,.1);border:1px solid rgba(78,123,255,.24);padding:.28rem 1rem;border-radius:999px;margin-bottom:.85rem;}
.hz-sec-title{font-size:clamp(24px,3.2vw,36px);font-weight:900;color:var(--hz-ink);margin:0 0 .8rem;line-height:1.28;}
.hz-sec-sub{color:var(--hz-ink-2);font-size:16px;margin:0;}
.hz-sec-sub.small{font-size:14px;}
.hz-sec-foot{text-align:center;margin-top:2rem;}

/* ---------- 1. Hero（深色星空 + 玻璃卡） ---------- */
.hz-hero{position:relative;padding:88px 0 96px;background:radial-gradient(1200px 700px at 20% -10%,rgba(94,157,253,.28),transparent 60%),radial-gradient(900px 600px at 90% 20%,rgba(143,148,251,.22),transparent 65%),radial-gradient(1200px 800px at 50% 110%,rgba(42,83,255,.35),transparent 65%),linear-gradient(180deg,var(--hz-hero-dark-1) 0%,var(--hz-hero-dark-2) 100%);color:#fff;overflow:hidden;}
.hz-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 60% 15%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 80% 55%,rgba(255,255,255,.5),transparent),radial-gradient(2px 2px at 30% 78%,rgba(255,255,255,.35),transparent),radial-gradient(1px 1px at 90% 88%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 45% 92%,rgba(255,255,255,.4),transparent);pointer-events:none;opacity:.85;}
.hz-hero-inner{position:relative;z-index:1;}
.hz-hero-card{max-width:820px;margin:0 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--hz-radius-lg);padding:22px 22px 32px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);text-align:center;}
.hz-hero-cover{border-radius:16px;overflow:hidden;margin-bottom:22px;box-shadow:0 18px 40px rgba(0,0,0,.35);}
.hz-hero-cover img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;}
.hz-hero-body{padding:0 8px;}
.hz-hero-title{font-size:clamp(24px,3.6vw,38px);font-weight:900;line-height:1.3;margin:0 0 1rem;text-shadow:0 4px 20px rgba(0,0,0,.4);}
.hz-hero-sub{font-size:clamp(15px,1.6vw,17px);color:rgba(255,255,255,.82);max-width:640px;margin:0 auto 1.8rem;line-height:1.75;}
.hz-hero-sub strong{color:var(--hz-orange-2);font-weight:800;}
.hz-hero-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;}

/* ---------- 2. Why Us ---------- */
.hz-why{background:var(--hz-section-1);padding:5rem 0;}
.hz-why-grid{justify-content:center;}
.hz-why-card{background:rgba(255,255,255,.78);border-radius:20px;padding:1.6rem 1.4rem;box-shadow:0 8px 20px rgba(30,60,130,.05);border:1px solid rgba(255,255,255,.8);display:flex;gap:1.1rem;align-items:flex-start;height:100%;transition:.28s;backdrop-filter:blur(6px);}
.hz-why-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(78,123,255,.14);background:#fff;}
.hz-why-ico{width:56px;height:56px;flex:none;border-radius:50%;background:var(--hz-ic,var(--hz-icon-grad));color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px rgba(94,157,253,.28);}
.hz-why-body h3{font-size:17px;font-weight:800;margin:0 0 .35rem;color:var(--hz-ink);}
.hz-why-body p{font-size:14px;color:var(--hz-ink-2);margin:0;line-height:1.7;}

/* ---------- 3. Departments（Tab 五专区） ---------- */
.hz-dept{background:var(--hz-section-2);padding:5rem 0;}
.hz-dept-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.4rem;margin-bottom:2rem;}
.hz-dept-title-block{max-width:560px;}
.hz-dept-title-block .hz-sec-title{margin-bottom:.5rem;}
.hz-dept-sub{color:rgba(15,26,58,.68);margin:0;font-size:15px;}
.hz-dept-tabs{display:flex;flex-wrap:wrap;gap:.5rem;}
.hz-dept-tabs .nav-item{margin:0;}
.hz-tab-btn{background:#2c3e50;color:#fff;border:0;border-radius:8px;padding:.55rem 1.15rem;font-size:14.5px;font-weight:700;transition:.22s;cursor:pointer;}
.hz-tab-btn:hover{background:#1e2d3d;transform:translateY(-1px);}
.hz-tab-btn.active{background:#0f1a3a;box-shadow:0 8px 18px rgba(15,26,58,.28);}
.hz-dept-panels{position:relative;}
.hz-dept-panels .tab-pane{display:none;opacity:1;}
.hz-dept-panels .tab-pane.active{display:block;opacity:1;}
.hz-dept-inner{background:#fff;border-radius:var(--hz-radius-lg);padding:2.2rem 2.4rem;box-shadow:var(--hz-shadow-lg);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.4rem;align-items:center;}
.hz-dept-text h3{font-size:22px;font-weight:900;margin:0 0 .8rem;color:var(--hz-ink);}
.hz-dept-text p{color:var(--hz-ink-2);font-size:15.5px;margin:0 0 1.4rem;}
.hz-dept-img{border-radius:14px;overflow:hidden;box-shadow:0 16px 36px rgba(30,60,130,.18);}
.hz-dept-img img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover;}

/* ---------- 4. Update / Changelog ---------- */
.hz-update{background:var(--hz-section-3);padding:5rem 0;}
.hz-update-grid{justify-content:center;}
.hz-update-card{background:#fff;border-radius:18px;padding:1.6rem 1.7rem;box-shadow:var(--hz-shadow);border:1px solid rgba(255,255,255,.8);height:100%;transition:.28s;}
.hz-update-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(200,80,180,.14);}
.hz-update-card h3{font-size:18px;font-weight:900;margin:0 0 1.1rem;color:var(--hz-ink);display:flex;align-items:center;gap:.6rem;}
.uc-ico{width:34px;height:34px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:#fff;}
.uc-ico-1{background:linear-gradient(135deg,#5e9dfd,#7f77f8);}
.uc-ico-2{background:linear-gradient(135deg,#43cea2,#185adb);}
.uc-ico-3{background:linear-gradient(135deg,#ff9a8b,#ff6a88);}
.uc-ico-4{background:linear-gradient(135deg,#f6a821,#e0512f);}
.hz-update-card ul{list-style:none;padding:0;margin:0;font-size:14px;color:var(--hz-ink-2);}
.hz-update-card li{padding:.55rem 0;border-bottom:1px dashed var(--hz-line);line-height:1.7;}
.hz-update-card li:last-child{border-bottom:0;}
.hz-update-card li strong{color:var(--hz-primary);font-weight:800;margin-right:.3rem;}

/* ---------- 5. 用户口碑 ---------- */
.hz-voice{background:linear-gradient(180deg,#f0f5ff,#e8f4fd);padding:5rem 0;}
.hz-voice-grid{justify-content:center;}
.hz-voice-card{background:#fff;border-radius:18px;padding:1.8rem 1.6rem 1.5rem;box-shadow:var(--hz-shadow);border:1px solid rgba(200,220,255,.5);height:100%;display:flex;flex-direction:column;transition:.28s;}
.hz-voice-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(78,123,255,.12);}
.hz-voice-quote{font-size:48px;line-height:1;color:var(--hz-primary);opacity:.25;font-family:Georgia,serif;margin-bottom:-.3rem;}
.hz-voice-text{font-size:15px;line-height:1.8;color:var(--hz-ink-2);flex:1;margin:0 0 1rem;}
.hz-voice-stars{color:#f6a821;font-size:16px;letter-spacing:2px;margin-bottom:.9rem;}
.hz-voice-user{display:flex;align-items:center;gap:.75rem;}
.hz-voice-avatar{width:40px;height:40px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;}
.hz-voice-user div{display:flex;flex-direction:column;}
.hz-voice-user strong{font-size:14.5px;color:var(--hz-ink);}
.hz-voice-user span{font-size:12.5px;color:var(--hz-ink-soft);}

/* ---------- 6. App 下载 ---------- */
.hz-app{background:var(--hz-section-4);padding:5rem 0;position:relative;}
.hz-app-visual-col{position:relative;}
.hz-app-visual{position:relative;text-align:center;}
.hz-app-visual img{display:block;width:100%;max-width:280px;max-height:420px;object-fit:cover;object-position:center top;margin:0 auto;border-radius:26px;box-shadow:0 30px 60px rgba(15,26,58,.22);border:5px solid #fff;}
.hz-qr-badge{position:absolute;top:12%;right:calc(50% - 210px);background:#fff;border-radius:14px;padding:.7rem .9rem;box-shadow:0 16px 32px rgba(15,26,58,.2);display:flex;align-items:center;gap:.6rem;font-size:12.5px;font-weight:800;color:var(--hz-ink);transform:translateX(20%);}
.hz-qr-badge img{width:66px;height:66px;border-radius:8px;display:block;}
.hz-app-lead{color:var(--hz-ink-2);font-size:15.5px;margin:.4rem 0 1.2rem;}
.hz-app-list{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1.4rem;}
.hz-app-list li{display:flex;align-items:center;gap:.65rem;color:var(--hz-ink);font-size:14.5px;font-weight:700;}
.al-ico{width:30px;height:30px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:#fff;}
.al-ico-1{background:linear-gradient(135deg,#ff9a8b,#ff6a88);}
.al-ico-2{background:linear-gradient(135deg,#43cea2,#185adb);}
.al-ico-3{background:linear-gradient(135deg,#f6a821,#e0512f);}
.al-ico-4{background:linear-gradient(135deg,#5e9dfd,#7f77f8);}
.hz-app-cta{display:flex;gap:1rem;flex-wrap:wrap;}
.hz-app-btns{display:flex;gap:1rem;flex-wrap:wrap;}
.hz-qr-mobile{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;padding:.7rem 1rem;background:rgba(255,255,255,.7);border:1px dashed rgba(15,26,58,.2);border-radius:14px;}
.hz-qr-mobile img{width:80px;height:80px;border-radius:8px;}
.hz-qr-mobile span{font-size:13.5px;font-weight:700;color:var(--hz-ink);}

/* ---------- 6. News（横向滚动） ---------- */
.hz-news{background:var(--hz-section-5);padding:5rem 0 5.4rem;}
.hz-title-icon{display:inline-block;margin-right:.4rem;}
.hz-news-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,320px);gap:16px;overflow-x:auto;padding:6px 4px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.hz-news-rail::-webkit-scrollbar{height:8px;}
.hz-news-rail::-webkit-scrollbar-thumb{background:rgba(15,26,58,.2);border-radius:8px;}
.hz-news-rail::-webkit-scrollbar-track{background:rgba(255,255,255,.4);border-radius:8px;}
.hz-news-card{background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:16px;overflow:hidden;box-shadow:var(--hz-shadow);transition:.28s;scroll-snap-align:start;display:flex;flex-direction:column;color:var(--hz-ink);height:100%;}
.hz-news-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px rgba(30,60,130,.16);color:var(--hz-ink);}
.hz-news-thumb{display:block;overflow:hidden;background:#eef2f9;}
.hz-news-thumb img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .5s ease;}
.hz-news-card:hover .hz-news-thumb img{transform:scale(1.05);}
.hz-news-body{padding:.9rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.hz-news-body h3{font-size:16px;font-weight:800;margin:0;line-height:1.45;color:var(--hz-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hz-news-body p{font-size:13.5px;color:var(--hz-ink-2);margin:0;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hz-news-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#9aa4b8;padding-top:.4rem;}
.hz-news-foot time{font-size:12.5px;color:#9aa4b8;}
.hz-news-more{color:var(--hz-primary);font-weight:700;}
.hz-news-rail-demo .hz-news-card{cursor:default;}

/* ---------- 页脚（暗色 + 底纹图） ---------- */
.hz-footer{position:relative;background:#050a24 url('../images/footer_bg.jpg') center top / cover no-repeat;color:rgba(255,255,255,.7);padding:4.5rem 0 1.6rem;}
.hz-footer-mask{position:absolute;inset:0;background:rgba(0,0,0,.82);}
.hz-footer-inner{position:relative;z-index:1;}
.hz-foot-row1{border-color:rgba(255,255,255,.1) !important;}
.hz-foot-row1 h6{color:#fff;font-weight:800;font-size:15.5px;margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem;}
.col-md-4.text-md-end h6{justify-content:flex-end;}
.hf-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:14px;}
.hf-ico.ico-warn{background:rgba(255,193,7,.18);color:#ffc107;}
.hf-ico.ico-info{background:rgba(94,157,253,.2);color:#5e9dfd;}
.hz-foot-list{list-style:none;padding:0;margin:0;font-size:14px;}
.hz-foot-list li{margin-bottom:.5rem;}
.hz-foot-list a{color:rgba(255,255,255,.65);}
.hz-foot-list a:hover{color:#fff;}
.hz-foot-contact li{color:rgba(255,255,255,.7);}
.col-md-4.text-md-end .hz-foot-list{margin-left:auto;}
.hz-foot-brand{display:flex;align-items:center;gap:.6rem;justify-content:flex-end;margin-bottom:.7rem;}
.hz-logo-foot{width:44px;height:44px;}
.hz-foot-name{color:#fff;font-weight:900;font-size:18px;}
.hz-foot-desc{font-size:14px;color:rgba(255,255,255,.6);margin:0;max-width:100%;line-height:1.75;}
.hz-foot-links{padding:1.2rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13.5px;display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;}
.hz-foot-links .fl-label{color:#ffc107;font-weight:800;}
.hz-foot-links a{color:rgba(255,255,255,.6);}
.hz-foot-links a:hover{color:#fff;}
.hz-foot-row2{font-size:13px;color:rgba(255,255,255,.5);}
.hz-foot-inline a{color:rgba(255,255,255,.65);}
.hz-foot-inline a:hover{color:#fff;}
.hz-foot-copy a{color:rgba(255,255,255,.7);}
.hz-foot-copy a:hover{color:#fff;}

/* ============================================================
   内页公共（栏目 / 详情 / 标签 / 搜索 / DIY 单页复用类名）
   ============================================================ */
.hz-pagehead{background:linear-gradient(135deg,#4e54c8,#8f94fb);color:#fff;padding:4rem 0 3rem;position:relative;overflow:hidden;}
.hz-pagehead::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);}
.hz-pagehead .container{position:relative;z-index:1;}
.hz-ph-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.16em;color:#fff;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);padding:.28rem .95rem;border-radius:999px;margin-bottom:.9rem;}
.hz-pagehead h1{font-size:clamp(24px,3.4vw,38px);font-weight:900;margin:0 0 .6rem;color:#fff;}
.hz-ph-sub{color:rgba(255,255,255,.78);margin:0 0 .8rem;font-size:15px;}
.hz-crumb{font-size:13.5px;color:rgba(255,255,255,.6);}
.hz-crumb a{color:rgba(255,255,255,.75);}
.hz-crumb a:hover{color:#fff;}
.hz-crumb-bar{background:var(--hz-surface);border-bottom:1px solid var(--hz-line);padding:.8rem 0;font-size:14px;color:var(--hz-ink-2);}
.hz-crumb-bar a{color:var(--hz-ink-2);}
.hz-crumb-bar a:hover{color:var(--hz-primary);}
.hz-crumb-bar .sep{margin:0 .5rem;color:#c3c8d4;}

/* 内容容器 / 列表 */
.hz-box{background:var(--hz-surface);border:1px solid var(--hz-line);border-radius:var(--hz-radius);padding:1.6rem 1.7rem;box-shadow:var(--hz-shadow);}
.hz-lists{display:flex;flex-direction:column;}
.hz-list-item{display:flex;gap:1.15rem;padding:1.25rem 0;border-bottom:1px dashed var(--hz-line);}
.hz-list-item:first-child{padding-top:.2rem;}
.hz-list-item:last-child{border-bottom:0;}
.hz-list-item .yli-thumb{flex:0 0 200px;border-radius:12px;overflow:hidden;}
.hz-list-item .yli-thumb img{width:200px;height:130px;object-fit:cover;display:block;transition:transform .5s ease;}
.hz-list-item:hover .yli-thumb img{transform:scale(1.06);}
.hz-list-item .yli-body{flex:1;min-width:0;}
.hz-list-item .yli-body h4{font-size:17px;font-weight:800;margin:0 0 .4rem;line-height:1.5;}
.hz-list-item .yli-body h4 a{color:var(--hz-ink);}
.hz-list-item .yli-body h4 a:hover{color:var(--hz-primary);}
.hz-list-item .yli-exc{font-size:14px;color:var(--hz-ink-2);margin:0 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hz-list-item .yli-meta{display:flex;gap:1.2rem;font-size:13px;color:#9aa4b8;}

/* 侧栏 */
.hz-side-box{background:var(--hz-surface);border:1px solid var(--hz-line);border-radius:var(--hz-radius);padding:1.3rem 1.4rem;margin-bottom:1.2rem;}
.hz-side-title{font-size:16.5px;font-weight:900;margin:0 0 1rem;color:var(--hz-ink);position:relative;padding-left:.75rem;}
.hz-side-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:75%;border-radius:4px;background:var(--hz-primary-grad);}
.hz-rank{list-style:none;margin:0;padding:0;}
.hz-rank li{display:flex;align-items:flex-start;gap:.75rem;padding:.55rem 0;font-size:14.5px;border-bottom:1px dashed var(--hz-line);}
.hz-rank li:last-child{border-bottom:0;}
.hz-rank .rk-idx{flex:none;min-width:26px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:900;color:#9aa4b8;background:var(--hz-page);border-radius:6px;padding:0 .4rem;}
.hz-rank .rk-idx.hot{color:#fff;background:var(--hz-primary-grad);}
.hz-rank a{color:var(--hz-ink);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hz-rank a:hover{color:var(--hz-primary);}
.hz-tagcloud{display:flex;flex-wrap:wrap;gap:.5rem;}
.hz-tagcloud a{font-size:13px;color:var(--hz-ink-2);background:var(--hz-page);border:1px solid var(--hz-line);border-radius:999px;padding:.3rem .95rem;transition:.2s;}
.hz-tagcloud a:hover{color:#fff;background:var(--hz-primary-grad);border-color:transparent;}
.hz-tagcloud.big a{font-size:14.5px;padding:.42rem 1.2rem;}
.hz-side-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hz-side-gallery img{width:100%;height:96px;object-fit:cover;border-radius:10px;transition:.3s;}
.hz-side-gallery img:hover{transform:scale(1.04);}

/* 详情页 */
.hz-detail-title{font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.42;margin:.4rem 0 .9rem;color:var(--hz-ink);}
.hz-detail-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:13.5px;color:#9aa4b8;padding-bottom:1rem;border-bottom:1px dashed var(--hz-line);margin-bottom:1.4rem;}
.hz-detail-meta a{color:var(--hz-ink-2);}
.hz-detail-meta a:hover{color:var(--hz-primary);}
.hz-detail-body{font-size:16px;color:#2c2f38;line-height:1.9;}
.hz-detail-body p{margin-bottom:1.1rem;}
.hz-detail-body img{max-width:100%;height:auto;border-radius:12px;}
.hz-detail-body h2,.hz-detail-body h3{font-weight:900;margin:1.8rem 0 .9rem;color:var(--hz-ink);}
.hz-detail-body blockquote{border-left:4px solid var(--hz-primary);background:rgba(78,123,255,.06);padding:1rem 1.3rem;border-radius:0 12px 12px 0;color:var(--hz-ink-2);margin:1.4rem 0;}
.hz-detail-body table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:14.5px;}
.hz-detail-body th,.hz-detail-body td{border:1px solid var(--hz-line);padding:.6rem .8rem;text-align:left;}
.hz-detail-body th{background:var(--hz-page);font-weight:800;}
.hz-detail-body ul,.hz-detail-body ol{padding-left:1.5rem;}
.hz-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.8rem 0;}
.hz-tags a{font-size:13.5px;color:var(--hz-primary);background:rgba(78,123,255,.08);border:1px solid rgba(78,123,255,.24);border-radius:999px;padding:.3rem 1rem;font-weight:700;transition:.2s;}
.hz-tags a:hover{color:#fff;background:var(--hz-primary-grad);border-color:transparent;}
.hz-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0;}
.hz-prevnext .ypn{background:var(--hz-page);border:1px solid var(--hz-line);border-radius:12px;padding:.9rem 1.1rem;}
.hz-prevnext .ypn.next{text-align:right;}
.hz-prevnext .ypn p{margin:0 0 .3rem;font-size:12.5px;color:#9aa4b8;}
.hz-prevnext .ypn a{font-size:14.5px;font-weight:700;color:var(--hz-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hz-prevnext .ypn a:hover{color:var(--hz-primary);}
.hz-related{margin-top:2rem;}
.hz-related .hz-side-title{margin-bottom:1rem;}

/* 图集 */
.hz-imggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.hz-imggrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;}

/* 标签页 */
.hz-tag-head{display:flex;align-items:center;gap:1.1rem;padding-bottom:1.2rem;border-bottom:1px dashed var(--hz-line);margin-bottom:.6rem;}
.hz-tag-badge{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--hz-primary-grad);color:#fff;font-size:26px;font-weight:900;box-shadow:0 10px 24px rgba(78,123,255,.3);}
.hz-tag-head h2{margin:0;font-size:24px;font-weight:900;color:var(--hz-ink);}
.hz-tag-head p{margin:.2rem 0 0;font-size:14px;color:var(--hz-ink-2);}
.hz-empty{color:var(--hz-ink-2);padding:2rem 0;text-align:center;}

/* 搜索页 */
.hz-search-title{font-size:20px;font-weight:900;margin:0 0 1rem;color:var(--hz-ink);}
.hz-search-title span{color:var(--hz-primary);}

/* 分页 */
.hz-pag-wrap{margin-top:1.6rem;}
.hz-pag-wrap .pagination{justify-content:center;flex-wrap:wrap;gap:.4rem;}
.hz-pag-wrap .page-link{border-radius:10px !important;border:1px solid var(--hz-line);color:var(--hz-ink-2);font-weight:700;padding:.5rem .95rem;background:var(--hz-surface);}
.hz-pag-wrap .page-item.active .page-link,.hz-pag-wrap .page-link:hover{background:var(--hz-primary-grad);border-color:transparent;color:#fff;}

/* DIY 单页 */
.hz-diy{background:var(--hz-page);padding:3.2rem 0 4rem;}
.hz-diy-sec{background:var(--hz-surface);border:1px solid var(--hz-line);border-radius:var(--hz-radius);padding:1.8rem 2rem;margin-bottom:1.6rem;}
.hz-diy-t{font-size:20px;font-weight:900;color:var(--hz-ink);margin:0 0 1rem;padding-bottom:.7rem;border-bottom:2px solid var(--hz-page);position:relative;}
.hz-diy-t::after{content:"";position:absolute;left:0;bottom:-2px;width:52px;height:2px;background:var(--hz-primary-grad);border-radius:2px;}
.hz-diy-sec p{color:var(--hz-ink-2);font-size:15px;margin-bottom:.9rem;}
.hz-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.hz-info-card{background:var(--hz-page);border:1px solid var(--hz-line);border-radius:14px;padding:1.3rem;transition:.25s;}
.hz-info-card:hover{transform:translateY(-4px);box-shadow:var(--hz-shadow-lg);border-color:rgba(78,123,255,.35);}
.hz-info-card .ic-ico{font-size:26px;margin-bottom:.5rem;}
.hz-info-card h4{font-size:16px;font-weight:800;margin:0 0 .35rem;color:var(--hz-ink);}
.hz-info-card p{font-size:13.5px;color:var(--hz-ink-2);margin:0;}
.hz-cta-band{background:linear-gradient(135deg,#4e54c8,#8f94fb);border-radius:18px;padding:2.2rem 2.4rem;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem;position:relative;overflow:hidden;}
.hz-cta-band::before{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);}
.hz-cta-band h3{margin:0 0 .3rem;font-size:21px;font-weight:900;position:relative;color:#fff;}
.hz-cta-band p{margin:0;color:rgba(255,255,255,.78);font-size:14.5px;position:relative;}
.hz-cta-band .btn{position:relative;}
.hz-dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.6rem 0;}
.hz-dl-grid .dl-card{background:var(--hz-surface);border:1px solid var(--hz-line);border-radius:14px;padding:1.4rem 1.3rem;text-align:center;transition:.25s;}
.hz-dl-grid .dl-card:hover{transform:translateY(-5px);box-shadow:var(--hz-shadow-lg);border-color:rgba(78,123,255,.4);}
.hz-dl-grid .dl-ico{font-size:30px;margin-bottom:.5rem;}
.hz-dl-grid h4{font-size:16px;font-weight:800;margin:0 0 .35rem;color:var(--hz-ink);}
.hz-dl-grid p{font-size:13.5px;color:var(--hz-ink-2);margin:0;}
.hz-contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.4rem;align-items:start;}
.hz-form .form-label{font-weight:700;font-size:14px;color:var(--hz-ink);}
.hz-form .form-control{border:1.5px solid var(--hz-line);border-radius:12px;padding:.65rem 1rem;background:var(--hz-page);}
.hz-form .form-control:focus{border-color:var(--hz-primary);box-shadow:0 0 0 .2rem rgba(78,123,255,.14);background:var(--hz-surface);}
.hz-ci-item{display:flex;gap:.9rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px dashed var(--hz-line);}
.hz-ci-item:last-child{border-bottom:0;}
.hz-ci-ico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(78,123,255,.1);font-size:18px;}
.hz-ci-item strong{display:block;font-size:14.5px;color:var(--hz-ink);}
.hz-ci-item span{font-size:13.5px;color:var(--hz-ink-2);}
.hz-demo-row{display:flex;gap:1rem;flex-wrap:wrap;}
.hz-app-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;background:var(--hz-surface);border:1px solid var(--hz-line);border-radius:var(--hz-radius);padding:1.6rem 1.8rem;}
.hz-app-hero .ah-img{text-align:center;}
.hz-app-hero .ah-img img{display:block;width:100%;max-width:250px;max-height:320px;margin:0 auto;object-fit:cover;object-position:center top;border-radius:18px;box-shadow:var(--hz-shadow-lg);}
.hz-app-hero p{color:var(--hz-ink-2);font-size:15px;}

/* ---------- 响应式 ---------- */
@media (max-width:1199px){
    .hz-qr-badge{right:calc(50% - 170px);}
}
@media (max-width:991px){
    .hz-dept-inner{grid-template-columns:1fr;padding:1.6rem 1.4rem;}
    .hz-dept-img img{max-height:220px;}
    .hz-app-visual img{max-width:230px;max-height:340px;}
    .hz-qr-badge{display:none;}
    .hz-app-list{grid-template-columns:1fr;}
    .hz-pagehead{padding:3.4rem 0 2.4rem;}
    .hz-contact-grid{grid-template-columns:1fr;}
    .hz-dl-grid{grid-template-columns:repeat(2,1fr);}
    .hz-info-grid{grid-template-columns:1fr;}
    .hz-app-hero{grid-template-columns:1fr;}
    .hz-nav .navbar-collapse{background:rgba(15,26,58,.96);border-radius:14px;padding:1rem;margin-top:.8rem;}
}
@media (max-width:767px){
    .hz-hero{padding:70px 0 78px;}
    .hz-hero-card{padding:16px 14px 22px;}
    .hz-hero-cover img{max-height:220px;}
    .hz-hero-cta{flex-direction:column;align-items:stretch;}
    .hz-hero-cta .btn{width:100%;}
    .hz-dept-head{flex-direction:column;align-items:flex-start;}
    .hz-dept-tabs{width:100%;}
    .hz-tab-btn{font-size:13.5px;padding:.45rem .85rem;}
    .hz-update-grid .col-md-6{width:100%;max-width:100%;flex:0 0 100%;}
    .hz-news-rail{grid-auto-columns:minmax(240px,86%);}
    .hz-list-item .yli-thumb{flex-basis:120px;}
    .hz-list-item .yli-thumb img{width:120px;height:84px;}
    .hz-prevnext{grid-template-columns:1fr;}
    .hz-prevnext .ypn.next{text-align:left;}
    .hz-foot-row1 .col-md-4.text-md-end{text-align:left;}
    .hz-foot-row1 .col-md-4.text-md-end .hz-foot-brand{justify-content:flex-start;}
    .hz-foot-row2{text-align:left !important;}
    .hz-foot-row2 .text-md-end{text-align:left !important;}
    .hz-cta-band{flex-direction:column;align-items:flex-start;}
    .hz-imggrid{grid-template-columns:repeat(2,1fr);}
}