.page-home{
  --home-accent:#D4AF37;
  --home-accent-light:#E5C158;
  --home-surface:#123A30;
  --home-surface-raised:#1A4538;
  --home-border:#2E5147;
  --home-cream:#F5EFE0;
  --home-gray:#A3B5AC;
  --home-red:#8B2500;
  position:relative;
  overflow-x:hidden;
  color:var(--home-cream);
  background:
    radial-gradient(ellipse at 85% 0%, rgba(212,175,55,0.08), transparent 45%),
    radial-gradient(ellipse at 10% 90%, rgba(139,37,0,0.16), transparent 45%),
    linear-gradient(160deg,#0A2822 0%,var(--bf-bg) 42%,#0B2C2A 100%);
}
.page-home img{
  max-width:100%;
  height:auto;
}
.page-home .home-section{
  position:relative;
  padding:clamp(3rem,8vw,5.5rem) 0;
}
.page-home .home-section::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:min(30%,240px);
  height:3px;
  background:linear-gradient(90deg,transparent,var(--home-accent));
  transform:skewX(-20deg);
  transform-origin:right top;
  opacity:0.7;
}
.page-home .home-section__head{
  position:relative;
  margin-bottom:clamp(1.8rem,4vw,2.8rem);
}
.page-home .home-section__head::after{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin-top:1rem;
  background:linear-gradient(90deg,var(--home-accent),transparent);
  transform:skewX(-18deg);
}
.page-home .home-section__head h2{
  font-family:var(--bf-font-title);
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  font-weight:900;
  line-height:1.18;
  letter-spacing:0.01em;
  color:var(--home-cream);
}
.page-home .bf-lead{
  color:var(--home-gray);
  max-width:720px;
  line-height:1.75;
  margin-top:0.8rem;
  font-size:clamp(0.95rem,1.4vw,1.05rem);
}

/* ---------- 首页首屏 ---------- */
.page-home .home-hero{
  position:relative;
  display:flex;
  align-items:center;
  padding:clamp(2rem,5vw,4.5rem) 0 clamp(2.5rem,6vw,4rem);
  background:
    linear-gradient(120deg,rgba(8,32,26,0.94) 0%,rgba(12,45,38,0.92) 55%,rgba(12,38,40,0.96) 100%);
}
.page-home .home-hero__bgimg{
  position:absolute;
  top:0;
  left:0;
  width:60%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.page-home .home-hero__bgimg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0.15;
  filter:saturate(0.5) contrast(1.05);
}
.page-home .home-hero::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:min(42%,320px);
  height:3px;
  background:linear-gradient(90deg,var(--home-red),rgba(139,37,0,0));
  transform:skewX(-24deg);
  transform-origin:left center;
  z-index:2;
}
.page-home .home-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:2rem;
  grid-template-columns:minmax(0,1fr);
}
.page-home .home-hero__kicker{
  font-family:var(--bf-font-data);
  font-size:0.85rem;
  letter-spacing:0.12em;
  color:var(--home-accent);
  margin:1rem 0 0.6rem;
  text-transform:uppercase;
}
.page-home .home-hero h1{
  font-family:var(--bf-font-title);
  font-size:clamp(2.1rem,5.5vw,3.6rem);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--home-cream);
  margin:0 0 1rem;
}
.page-home .home-hero__accent{
  color:var(--home-accent);
}
.page-home .home-hero__lead{
  color:var(--home-gray);
  font-size:clamp(0.95rem,1.6vw,1.1rem);
  line-height:1.7;
  max-width:34em;
  margin-bottom:1.4rem;
}
.page-home .home-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-bottom:1.8rem;
}
.page-home .home-hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin:0;
  padding:0.9rem 0 0;
  border-top:1px solid var(--home-border);
}
.page-home .home-hero__stat{
  display:flex;
  flex-direction:column;
  padding-right:1.4rem;
  margin-right:1.4rem;
  border-right:1px solid var(--home-border);
}
.page-home .home-hero__stat:last-child{
  border-right:0;
  margin-right:0;
  padding-right:0;
}
.page-home .home-hero__stat dt{
  order:2;
  font-size:0.8rem;
  color:var(--home-gray);
  letter-spacing:0.04em;
  margin-top:0.2rem;
}
.page-home .home-hero__stat dd{
  order:1;
  margin:0;
  font-family:var(--bf-font-data);
  font-size:1.35rem;
  font-weight:700;
  color:var(--home-cream);
}
.page-home .home-hero__stat b{
  color:var(--home-accent);
  font-weight:700;
}
.page-home .home-hero__visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
}
.page-home .home-hero__chart{
  width:min(100%,460px);
  height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.4));
}

/* ---------- 01 更新要点 ---------- */
.page-home .home-updates{
  background:linear-gradient(180deg,rgba(18,58,48,0.28) 0%,rgba(12,45,38,0) 70%);
}
.page-home .home-updates__grid{
  display:grid;
  gap:1rem;
  grid-template-columns:minmax(0,1fr);
}
.page-home .home-update-card{
  position:relative;
  padding:1.5rem 1.4rem 1.4rem;
  transition:border-color 0.2s ease,background-color 0.2s ease,transform 0.2s ease;
}
.page-home .home-update-card:hover{
  border-color:var(--home-accent);
  background-color:rgba(26,69,56,0.7);
  transform:translateY(-2px);
}
.page-home .home-update-card__num{
  font-family:var(--bf-font-data);
  font-size:0.85rem;
  color:var(--home-accent);
  letter-spacing:0.1em;
  display:inline-block;
  margin-bottom:0.7rem;
}
.page-home .home-update-card h3{
  font-family:var(--bf-font-title);
  font-size:1.1rem;
  font-weight:800;
  color:var(--home-cream);
  margin:0 0 0.5rem;
  line-height:1.35;
}
.page-home .home-update-card p{
  color:var(--home-gray);
  font-size:0.92rem;
  line-height:1.65;
  margin:0 0 0.9rem;
}
.page-home .home-update-card__more{
  font-family:var(--bf-font-data);
  font-size:0.82rem;
  color:var(--home-accent);
  text-decoration:none;
  transition:color 0.15s ease;
}
.page-home .home-update-card__more:hover{
  color:var(--home-accent-light);
}

/* ---------- 02 主客场数据面板 ---------- */
.page-home .home-panelmod{
  background:
    radial-gradient(ellipse at 30% 20%,rgba(212,175,55,0.07),transparent 50%),
    linear-gradient(180deg,rgba(12,45,38,0.85),rgba(20,50,44,0.92));
}
.page-home .home-section__head--row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
}
.page-home .home-section__head--row .bf-btn{
  margin-bottom:0.4rem;
}
.page-home .home-panelmod__layout{
  display:grid;
  gap:1.4rem;
  grid-template-columns:minmax(0,1fr);
}
.page-home .home-panelmod__visual img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--home-border);
  box-shadow:0 14px 28px rgba(0,0,0,0.3);
}
.page-home .home-panelmod__tabs{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.page-home .home-panelmod__body{
  display:grid;
  gap:1rem;
}
.page-home .home-panelmod__metrics{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0.8rem;
}
.page-home .home-metric{
  padding:1.1rem 1rem;
  transition:border-color 0.2s ease,background-color 0.2s ease;
}
.page-home .home-metric:hover{
  border-color:var(--home-accent);
  background-color:rgba(26,69,56,0.75);
}
.page-home .home-metric__label{
  display:block;
  font-size:0.78rem;
  color:var(--home-gray);
  letter-spacing:0.05em;
  margin-bottom:0.3rem;
}
.page-home .home-metric__value{
  display:block;
  font-family:var(--bf-font-data);
  font-size:1.6rem;
  font-weight:700;
  color:var(--home-accent);
  line-height:1.1;
}
.page-home .home-metric__trend{
  display:block;
  font-size:0.78rem;
  color:var(--home-gray);
  margin-top:0.4rem;
}
.page-home .home-panelmod__matches{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0.8rem;
}
.page-home .home-match{
  padding:1rem 1.1rem;
  position:relative;
  transition:border-color 0.2s ease,background-color 0.2s ease;
}
.page-home .home-match:hover,
.page-home .home-match:focus-visible{
  border-color:var(--home-accent-light);
  background-color:rgba(26,69,56,0.8);
  outline:none;
}
.page-home .home-match__label{
  display:block;
  font-size:0.72rem;
  color:var(--home-gray);
  letter-spacing:0.08em;
  margin-bottom:0.3rem;
}
.page-home .home-match__score{
  font-family:var(--bf-font-data);
  font-size:1.3rem;
  font-weight:700;
  color:var(--home-cream);
  display:block;
  margin-bottom:0.2rem;
}
.page-home .home-match__score b{
  color:var(--home-accent);
  font-weight:700;
}
.page-home .home-match__sub{
  font-size:0.82rem;
  color:var(--home-gray);
  display:block;
}
.page-home .home-match__detail{
  display:block;
  max-height:0;
  opacity:0;
  overflow:hidden;
  font-size:0.82rem;
  color:var(--home-accent-light);
  margin-top:0;
  transition:opacity 0.2s ease,max-height 0.25s ease,margin-top 0.2s ease;
}
.page-home .home-match:hover .home-match__detail,
.page-home .home-match:focus-visible .home-match__detail{
  max-height:3rem;
  opacity:1;
  margin-top:0.4rem;
}

/* ---------- 03 小屏通道与快捷入口 ---------- */
.page-home .home-mobile{
  background:linear-gradient(180deg,rgba(12,45,38,0.6),rgba(18,58,48,0.35));
}
.page-home .home-mobile__layout{
  display:grid;
  gap:1.6rem;
  grid-template-columns:minmax(0,1fr);
}
.page-home .home-mobile__phone{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.page-home .home-mobile__phone img{
  width:min(220px,60%);
  height:auto;
  aspect-ratio:1/2;
  object-fit:cover;
  border-radius:22px;
  border:1px solid var(--home-border);
  box-shadow:0 20px 36px rgba(0,0,0,0.4);
}
.page-home .home-mobile__catalog{
  display:grid;
  gap:1.2rem;
}
.page-home .home-mobile__intro h3{
  font-family:var(--bf-font-title);
  font-size:1.15rem;
  font-weight:800;
  color:var(--home-cream);
  margin:0 0 0.4rem;
}
.page-home .home-mobile__intro p{
  color:var(--home-gray);
  line-height:1.7;
  margin:0;
  font-size:0.94rem;
}
.page-home .home-mobile__catalog > img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--home-border);
  box-shadow:0 12px 24px rgba(0,0,0,0.25);
}
.page-home .home-mobile__columnlist{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0.8rem;
  grid-template-columns:minmax(0,1fr);
}
.page-home .home-column{
  padding:1rem 1.1rem;
  transition:border-color 0.2s ease,transform 0.2s ease;
}
.page-home .home-column:hover{
  border-color:var(--home-accent);
  transform:translateY(-2px);
}
.page-home .home-column__tag{
  display:inline-block;
  font-family:var(--bf-font-data);
  font-size:0.7rem;
  color:var(--home-accent);
  letter-spacing:0.1em;
  border:1px solid rgba(212,175,55,0.4);
  border-radius:999px;
  padding:0.15rem 0.6rem;
  margin-bottom:0.5rem;
}
.page-home .home-column h4{
  font-family:var(--bf-font-title);
  font-size:1rem;
  font-weight:800;
  color:var(--home-cream);
  margin:0 0 0.3rem;
}
.page-home .home-column p{
  font-size:0.84rem;
  color:var(--home-gray);
  line-height:1.55;
  margin:0;
}

/* ---------- 04 常用人群定位 ---------- */
.page-home .home-audience{
  background:linear-gradient(180deg,rgba(18,58,48,0.4) 0%,rgba(12,45,38,0.9) 100%);
}
.page-home .home-audience__steps{
  display:grid;
  gap:1rem;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:1.6rem;
}
.page-home .home-step{
  position:relative;
  padding:1.4rem 1.2rem 1.3rem;
  background:rgba(18,58,48,0.6);
  border:1px solid var(--home-border);
  border-radius:10px;
  transition:border-color 0.2s ease,background-color 0.2s ease;
}
.page-home .home-step:hover{
  border-color:var(--home-accent);
  background-color:rgba(26,69,56,0.7);
}
.page-home .home-step__num{
  font-family:var(--bf-font-data);
  font-size:1.6rem;
  font-weight:700;
  color:rgba(212,175,55,0.35);
  line-height:1;
  display:block;
  margin-bottom:0.7rem;
}
.page-home .home-step:hover .home-step__num{
  color:var(--home-accent);
}
.page-home .home-step h3{
  font-family:var(--bf-font-title);
  font-size:1.05rem;
  font-weight:800;
  color:var(--home-cream);
  margin:0 0 0.45rem;
}
.page-home .home-step p{
  font-size:0.88rem;
  color:var(--home-gray);
  line-height:1.65;
  margin:0;
}
.page-home .home-audience__note{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  padding:1.5rem 1.4rem;
}
.page-home .home-audience__note p{
  margin:0;
  color:var(--home-cream);
  line-height:1.7;
  font-size:0.95rem;
}
.page-home .home-audience__actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.7rem;
}

/* ---------- 响应式：平板 ---------- */
@media (min-width: 768px){
  .page-home .home-hero__inner{
    gap:2.5rem;
  }
  .page-home .home-hero__extras{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
  }
  .page-home .home-updates__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-home .home-update-card:last-child{
    grid-column:span 2;
  }
  .page-home .home-panelmod__layout{
    grid-template-columns:minmax(0,1fr);
  }
  .page-home .home-mobile__layout{
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.2fr);
    align-items:start;
  }
  .page-home .home-mobile__phone{
    justify-content:flex-start;
  }
  .page-home .home-mobile__columnlist{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-home .home-audience__steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-home .home-audience__note{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .page-home .home-audience__note p{
    max-width:38em;
  }
}

/* ---------- 响应式：桌面 ---------- */
@media (min-width: 1024px){
  .page-home .home-hero{
    min-height:calc(100vh - var(--bf-header-height));
  }
  .page-home .home-hero__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    align-items:center;
    gap:3.5rem;
  }
  .page-home .home-hero__content{
    padding-right:1rem;
  }
  .page-home .home-hero__visual{
    justify-content:flex-end;
  }
  .page-home .home-hero__chart{
    width:min(100%,480px);
  }
  .page-home .home-updates__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-home .home-update-card:last-child{
    grid-column:auto;
  }
  .page-home .home-panelmod__layout{
    grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
    align-items:stretch;
  }
  .page-home .home-panelmod__visual img{
    height:100%;
    min-height:360px;
    object-fit:cover;
  }
  .page-home .home-mobile__layout{
    grid-template-columns:minmax(0,0.7fr) minmax(0,1.3fr);
    gap:3rem;
  }
  .page-home .home-mobile__phone img{
    width:min(260px,80%);
  }
}
