/* 首页细节美化：不改结构，只在原样式之上叠加。和题库、论坛页统一：金色小标签、玻璃卡片、雪山元素。 */

/* ── 第一屏：银河星空做背景，图片底部本身就淡成浅色，再渐隐到页面背景 ── */
.hero{isolation:isolate;padding-bottom:170px;border-bottom:0;background:#06142a;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,rgba(0,0,0,.94) 58%,rgba(0,0,0,.82) 66%,rgba(0,0,0,.64) 74%,rgba(0,0,0,.42) 82%,rgba(0,0,0,.22) 89%,rgba(0,0,0,.08) 95%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 50%,rgba(0,0,0,.94) 58%,rgba(0,0,0,.82) 66%,rgba(0,0,0,.64) 74%,rgba(0,0,0,.42) 82%,rgba(0,0,0,.22) 89%,rgba(0,0,0,.08) 95%,transparent 100%)}
.hero::before{opacity:.04}
.hero::after{display:block;content:"";position:absolute;inset:0;left:0;bottom:0;width:auto;height:auto;transform:none;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 50% at 50% 38%,rgba(5,16,34,.3),rgba(5,16,34,0) 100%),
    url(/assets/hero-sky.webp) 50% 100%/cover no-repeat}

/* ── 所有卡片：和导航栏一样的半透明磨砂玻璃（浅色版），悬停不再有额外效果 ── */
.stat-card,.job-card,.other-wrap,.hook-note,.about-card,.kpi,.course-card,.cmp-table,.effect-box,
.dq-card,.qa-preview,.t-card,.contact-card{
  border:1px solid rgba(196,210,226,.78);
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.56));
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(16,36,58,.05),0 10px 28px -12px rgba(16,36,58,.2)}
.stat-card:hover,.job-card:hover,.other-wrap:hover,.about-card:hover,.kpi:hover,.course-card:hover,.cmp-table:hover,.effect-box:hover,
.dq-card:hover,.qa-preview:hover,.t-card:hover,.contact-card:hover{
  transform:none;border-color:rgba(196,210,226,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(16,36,58,.05),0 10px 28px -12px rgba(16,36,58,.2)}
/* 卡片里面的小卡片（关于我的四个数字）：边框再深一点，和外层卡片分得开 */
.about-card .kpi,.about-card .kpi:hover{border-color:rgba(184,200,219,.85);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,251,254,.8))}
/* 保留原来的强调：🔔 提示左侧金线、推荐课程金色描边、「同芯同行」对比框是深色玻璃（同导航栏） */
.hook-note{border-left:3px solid var(--gold)}
.course-card.c-featured,.course-card.c-featured:hover{border-color:rgba(216,178,74,.75)}
.effect-box.effect-ours,.effect-box.effect-ours:hover{border-color:rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(31,40,61,.94),rgba(22,30,48,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.25),0 14px 32px -12px rgba(7,20,40,.4)}
/* 顶部数字卡片：顶部一条淡金线 */
.stat-card{overflow:hidden}
.stat-card::before{content:"";position:absolute;left:22%;right:22%;top:0;height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,transparent,rgba(216,178,74,.85),transparent);opacity:.6}

/* ── 每个板块标题上方加金色小标签，和论坛 / 题库页一致 ── */
.sec-title::before{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 auto 10px;
  color:#a87d16;font-size:11.5px;font-weight:700;letter-spacing:.14em}
#jobs .sec-title::before{content:"JOBS · 每周精选"}
#about .sec-title::before{content:"ABOUT · 关于"}
#courses .sec-title::before{content:"COURSES · 课程"}
#daily-question .sec-title::before{content:"DAILY · 每日一题"}
#testimonials .sec-title::before{content:"OFFERS · 学员反馈"}
#contact .sec-title::before{content:"COMMUNITY · 加入社区"}

/* ── 板块背景：交替板块带一点金 / 蓝的柔光，玻璃卡片后面也有颜色可透 ── */
.block-alt{background:
  radial-gradient(720px 260px at 12% 0,rgba(216,178,74,.08),transparent 70%),
  radial-gradient(760px 300px at 92% 100%,rgba(66,133,214,.08),transparent 70%),
  linear-gradient(180deg,#fff,#f5f8fc)}

/* ── 岗位分组标题：左侧一条金色竖线 ── */
.lvl-header{position:relative;padding-left:12px;border-bottom-color:rgba(216,226,238,.9)}
.lvl-header::before{content:"";position:absolute;left:0;top:4px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--gold),rgba(216,178,74,.35))}

/* ── 加入社区：底部雪山收尾，接到深色页脚 ── */
#contact{position:relative;isolation:isolate;padding-bottom:150px}
#contact::after{content:"";position:absolute;left:0;right:0;bottom:0;height:300px;z-index:-1;pointer-events:none;
  background:url(/assets/forum-knowledge-mountains.webp) 50% 100%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 45%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 45%,#000 100%)}

@media(max-width:720px){
  /* 手机：浏览器顶部栏是白色（页面改不了），文字往下放，星空在顶部多留一段 */
  .hero{padding-top:64px;padding-bottom:130px;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.9) 62%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.2) 91%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.9) 62%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.2) 91%,transparent 100%)}
  .hero::after{background:
    radial-gradient(80% 40% at 50% 28%,rgba(5,16,34,.5),rgba(5,16,34,0) 100%),
    url(/assets/hero-sky.webp) 20% 100%/cover no-repeat}
  .sec-title::before{font-size:10.5px;margin-bottom:8px}
  #contact{padding-bottom:110px}
  #contact::after{height:200px;background-position:70% 100%}
}