/* ============================================================
   惠民盒子官网模板三 · 视觉增强层 enhance.css (UI智能体设计, ZCode落地)
   依赖: 必须在 index.css 之后加载
   范围: 仅作用于 index3 模板引用的类名, 不影响 index/index2
   品牌: logo 蓝白体系 (2026-11-04 从绿切换)
   ============================================================ */

/* ========== 0. 设计令牌 ========== */
:root{
  --hm-blue:#4095D7;        /* 主蓝 (logo 蓝面平均色) */
  --hm-blue-dark:#1668B4;   /* 深蓝: 导航/页脚底/标题 */
  --hm-blue-bright:#5FB3F0; /* 亮蓝: hover/渐变亮头 */
  --hm-blue-light:#EAF4FC;  /* 极浅蓝底 */
  --hm-gold:#FFB800;        /* 金色强调 */
  --hm-orange:#FF7A45;      /* 橙(次强调, 备用) */
  --hm-text:#333;
  --hm-text2:#666;
  --hm-text3:#999;
  --hm-bg:#F6F7FA;
  --hm-line:#E8EDF2;
  --hm-dur:.25s;
}

/* ========== 1. hero 蓝白渐变已由 index.css 打底, 这里补文字阴影/金色高亮/按钮 hover ========== */
.bannerbox{position:relative;}
.bannerbox .banner_t1{text-shadow:0 2px 12px rgba(0,40,90,.35);}
.bannerbox .banner_t1 .hl{color:var(--hm-gold);}
.bannerbox [class*="btn"]{transition:transform var(--hm-dur) ease,box-shadow var(--hm-dur) ease;}
.bannerbox [class*="btn"]:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,40,90,.3);}

/* ========== 2. banner 截图浮层微动效 (轮播切换层内) ========== */
.bannerbox .banner_pic{transition:transform .4s ease;}
.bannerbox .banner1.on .banner_pic,
.bannerbox .banner2.on .banner_pic,
.bannerbox .banner3.on .banner_pic{transform:translateY(-50%) translateY(-6px);}

/* ========== 3. 区块节奏 ========== */
.contentbox2{background-color:var(--hm-blue-light);}

/* ========== 4. 能力卡 hover 上浮 + 图标微放大 ========== */
.contentbox .con1 .item{
  transition:transform var(--hm-dur) ease,box-shadow var(--hm-dur) ease;
}
.contentbox .con1 .item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(22,104,180,.18);
}
.contentbox .con1 .item .co .it .t1{transition:transform var(--hm-dur) ease;}
.contentbox .con1 .item:hover .co .it .t1{transform:scale(1.08);}

/* ========== 5. 区块大标题金色短下划线 + desc 灰 ========== */
.contentbox .content .title,
.contentbox2 .content .title,
.contentbox3 .content .title{position:relative;}
.contentbox .content .title::after,
.contentbox2 .content .title::after,
.contentbox3 .content .title::after{
  content:"";
  display:block;
  width:40px;height:4px;border-radius:2px;
  background-color:var(--hm-gold);
  margin:14px auto 0;
}
.contentbox .content .desc,
.contentbox2 .content .desc{color:#767676;}

/* ========== 6. bannertip 优势条: 图标浅蓝圆底 + hover 上浮 ========== */
.bannertip .item img{
  box-sizing:border-box;
  width:56px;height:56px;padding:12px;
  border-radius:50%;
  background-color:var(--hm-blue-light);
  transition:background-color var(--hm-dur) ease;
}
.bannertip .item:hover img{background-color:var(--hm-blue);}
.bannertip .item:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(22,104,180,.1);}

/* ========== 7. 功能展示区截图: 浏览器窗口感 (顶部圆角+细边+柔影, 基础在 index.css) ========== */
.contentbox2 .co .f2 img{
  box-shadow:0 10px 30px rgba(22,104,180,.12);
}

/* ========== 8. 价值区: 深蓝底已在 index.css, 文字反白 + 金色按钮 (AA 对比) ========== */
.contentbox3 .content .title{color:#fff;}
.contentbox3 .content .desc{color:rgba(255,255,255,.8);}
.contentbox3 .content .con1 .left .item .f2 .t1{color:#fff;}
.contentbox3 .content .con1 .left .item .f2 .t2{color:rgba(255,255,255,.78);}
.contentbox3 .content .con1 .left .item img{
  padding:8px;border-radius:50%;background:rgba(255,255,255,.12);box-sizing:border-box;
}
.contentbox3 .bottomtip .f1{color:#fff;}
.contentbox3 .btn1{
  background-color:var(--hm-gold);
  color:var(--hm-blue-dark);
}
.contentbox3 .btn1:hover{background-color:#ffc633;}
a[href*="beian"]:hover,
a[href*="Beian"]:hover{color:#fff;}

/* ========== 9. 入场动画 (backwards: 结束后归还 hover 控制权) ========== */
@keyframes hmFadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
.contentbox .con1 .item{animation:hmFadeUp .5s ease backwards;}
.contentbox .con1 .item:nth-child(2){animation-delay:.06s;}
.contentbox .con1 .item:nth-child(3){animation-delay:.12s;}
.contentbox .con1 .item:nth-child(4){animation-delay:.18s;}
.contentbox2 .content .con1 .co .f1 .t3 .btn1{transition:all var(--hm-dur) ease;}
.contentbox2 .content .con1 .co .f1 .t3 .btn1:hover{border-color:var(--hm-blue);color:var(--hm-blue-dark);}

/* ========== 10. 全局交互过渡统一 0.25s ========== */
a,
.contentbox2 .content .con1 .ti .item{
  transition:color var(--hm-dur) ease,background-color var(--hm-dur) ease,border-color var(--hm-dur) ease,transform var(--hm-dur) ease,box-shadow var(--hm-dur) ease;
}

/* ========== 11. P0 断点修复: 容器收敛(≤480 与 481-767) ========== */
@media (min-width:481px) and (max-width:767px){
  .bannerbox .main,
  .contentbox .content,
  .contentbox2 .content,
  .contentbox3 .content{width:calc(100% - 24px);}
}
@media (max-width:480px){
  .bannerbox .main,
  .contentbox .content,
  .contentbox2 .content,
  .contentbox3 .content{
    width:calc(100% - 20px);
    box-sizing:border-box;
  }
  .toptab .logo .title{display:none;}
  .toptab{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .toptab .item{flex:none;white-space:nowrap;}
  /* 手机端截图展示区 */
  .contentbox2 .co .f2 img{max-width:260px;}
}

/* ========== 12. 增强层自身 reduced-motion 兜底 ========== */
@media (prefers-reduced-motion:reduce){
  .contentbox .con1 .item{animation:none;}
  .contentbox .con1 .item:hover,
  .bannertip .item:hover,
  .bannerbox [class*="btn"]:hover,
  .bannerbox .banner_pic{transform:none;}
  .contentbox .con1 .item .co .it .t1{transform:none;}
  a,
  .contentbox .con1 .item,
  .bannertip .item,
  .bannertip .item img{transition:none;}
}