/* ============================================================
   layout.css — 5 tab 布局 + 响应式 + 底部 tabbar
   ============================================================ */
body{
  max-width:480px;margin:0 auto;
  padding-bottom:64px;
}

/* ---------- 页面切换 ---------- */
.page{display:none;animation:fadeIn .35s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero .pic{
  width:100%;height:230px;
  background:linear-gradient(135deg,#8e2620 0%,#b5342a 50%,#c9a05c 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:60px;
}
.hero .mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,5,.05) 40%,rgba(20,10,5,.72));}
.hero .txt{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;color:#fff;}
.hero .txt .tag{
  display:inline-block;background:rgba(201,160,92,.9);color:#fff;
  font-size:11px;padding:2px 10px;border-radius:20px;margin-bottom:6px;letter-spacing:2px;
}
.hero .txt h1{font-size:24px;letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.hero .txt p{font-size:12.5px;opacity:.95;margin-top:4px;letter-spacing:3px;}

/* ---------- 底部 tabbar ---------- */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:60;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  display:flex;padding:6px 0 max(6px,env(safe-area-inset-bottom));
}
.tab{
  flex:1;text-align:center;cursor:pointer;color:#a08d7c;
  font-size:10.5px;padding-top:3px;transition:color .2s;
}
.tab .ticon{font-size:21px;line-height:1.2;display:block;}
.tab.active{color:var(--primary);font-weight:600;}

/* ---------- 响应式 ---------- */
@media (max-width:360px){
  .hero .txt h1{font-size:20px;}
  .stats .num{font-size:18px;}
  .section-title{font-size:15px;}
}
@media (min-width:481px){
  body{box-shadow:0 0 30px rgba(0,0,0,.1);}
}