/* ============================================================
   獾乐官网设计系统 v3 (code.org风格) — huanle-design-v3.css
   来源: W7官网改版 v16定稿 (2026-09-29) · 维护: 巴斯
   规则: ①改此文件必须升 ?v=N 版本参数破缓存 (nginx 30d强缓存)
         ②品牌色/字体/话语层级不得改动 (SSOT-L1/L2)
   引入: <link rel="stylesheet" href="/huanle-design-v3.css?v=1">
   Hero大图页面需内联: :root{--hero-img:url('data:...')}
   ============================================================ */

  :root {
    --hl-blue: #1D3557;
    --hl-gold: #DBA531;
    --hl-ivory: #EEE4CF;
    --hl-black: #111315;
    --cta-orange: #F4A261;
    --gold-soft: #F7F1E3;
    --line: rgba(29,53,87,.12);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'PingFang SC','Noto Sans SC',-apple-system,sans-serif; color:var(--hl-black); background:#fff; }
  .container { max-width:1160px; margin:0 auto; padding:0 40px; }
  h1,h2 { letter-spacing:-.02em; }

  /* ═══ 白底导航（官方全标）═══ */
  .nav { background:#fff; height:64px; display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--line); padding:0 max(40px, calc((100% - 1160px) / 2)); }
  .nav > * { }
            body.nav-cover .nav .logo-img { background:#fff; border-radius:10px; padding:3px 6px; }
  .nav .logo-img { height:48px; }
  .nav-links { display:flex; gap:6px; flex:1; justify-content:center; }
  body.nav-cover .nav { position:absolute; top:0; left:0; right:0; background:linear-gradient(180deg,rgba(17,19,21,.45),rgba(17,19,21,0)); border-bottom:none; z-index:100; }
  body.nav-cover .nav-links a { color:#fff; }
  body.nav-cover .nav-links a:hover { background:rgba(255,255,255,.15); }
  body.nav-cover .nav-links a.active { background:rgba(219,165,49,.9); color:var(--hl-blue); }
  body.nav-cover .nav-links .dd > a::after { color:var(--hl-gold); }
  body.nav-cover .nav .logo-img { background:#fff; border-radius:10px; padding:3px 6px; }

  .nav-links a { color:var(--hl-blue); text-decoration:none; font-size:15px; font-weight:600; padding:8px 13px; border-radius:8px; transition:background .18s; }
  .nav-links a:hover { background:var(--gold-soft); }
  .nav-links a.active { background:var(--gold-soft); color:var(--hl-gold); }
  .nav-cta { background:var(--cta-orange); color:var(--hl-blue); text-decoration:none; font-size:15px; font-weight:700; padding:11px 22px; border-radius:8px; margin-left:auto; flex-shrink:0; }
  .nav-cta:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(244,162,97,.4); }

  /* ═══ Hero（全幅AI图+左文字，不变）═══ */
  .hero { position:relative; height:300px; max-height:320px; min-height:280px; display:flex; align-items:center; overflow:hidden; }
  .hero-bg { position:absolute; inset:0; background-image:var(--hero-img); background-size:cover; background-position:center right; }
  .hero::before { content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(22,42,69,.93) 0%, rgba(22,42,69,.80) 32%, rgba(22,42,69,.38) 56%, rgba(22,42,69,0) 80%); }
  .hero-copy { position:relative; z-index:2; padding:0 72px; max-width:660px; margin-top:52px; }
  .eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--hl-gold); margin-bottom:12px; }
  .eyebrow::before { content:''; width:34px; height:2px; background:var(--hl-gold); }
  .hero h1 { font-size:clamp(30px,3vw,40px); font-weight:600; line-height:1.16; color:var(--hl-ivory); margin-bottom:12px; text-shadow:0 2px 24px rgba(17,19,21,.35); }
  .hero h1 .gold { color:var(--hl-gold); }
  .hero .sub { font-size:14.5px; line-height:1.65; color:rgba(238,228,207,.88); margin-bottom:20px; max-width:500px; text-shadow:0 1px 12px rgba(17,19,21,.4); }
  .hero .sub strong { color:#fff; font-weight:600; }
  .btn-row { display:flex; gap:14px; }
  .btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; padding:11px 24px; border-radius:8px; text-decoration:none; transition:all .18s; }
  .btn-primary { background:var(--cta-orange); color:var(--hl-blue); box-shadow:0 4px 20px rgba(244,162,97,.35); }
  .btn-primary:hover { transform:translateY(-2px); }
  .btn-ghost { color:var(--hl-ivory); border:2px solid rgba(238,228,207,.45); }
  .btn-ghost:hover { border-color:var(--hl-gold); color:var(--hl-gold); }
  .hero-note { display:none; position:absolute; bottom:24px; left:72px; font-size:12px; color:rgba(238,228,207,.6); letter-spacing:1.5px; z-index:2; }

  /* ═══ 白底大标题区（code.org：居中大字+副文）═══ */
  .intro { text-align:center; padding:96px 0 72px; }
  .intro h2 { font-size:44px; font-weight:600; color:var(--hl-blue); line-height:1.25; max-width:820px; margin:0 auto 20px; }
  .intro p { font-size:17px; line-height:1.8; color:rgba(17,19,21,.65); max-width:640px; margin:0 auto; }
  .intro .em { color:var(--hl-gold); font-weight:700; }

  /* ═══ 四栏图标区（白底+小图标+上图标下文字，code.org模式）═══ */
  .pillars { padding:24px 0 48px; }
  .pillar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .pillar { text-align:center; padding:32px 24px 28px; border-radius:12px; transition:all .2s; display:flex; flex-direction:column; align-items:center; }
  .pillar:hover { background:var(--gold-soft); }
  .pillar .icon {
    width:64px; height:64px; margin:0 auto 20px; border-radius:16px;
    display:flex; align-items:center; justify-content:center; font-size:30px;
  }
  .pillar:nth-child(1) .icon { background:#EAF2FB; }
  .pillar:nth-child(2) .icon { background:#FBF3E2; }
  .pillar:nth-child(3) .icon { background:#EAF7EE; }
  .pillar:nth-child(4) .icon { background:#F3EAF8; }
  .pillar h3 { font-size:20px; font-weight:600; color:var(--hl-blue); margin-bottom:10px; }
  .pillar p { font-size:14px; line-height:1.7; color:rgba(17,19,21,.6); margin-bottom:14px; }
  .pillar .tag { display:inline-block; margin-top:auto; font-size:12px; font-weight:700; letter-spacing:1px; color:var(--hl-gold); }

  /* ═══ 白底左图右文 + 蓝勾列表（code.org核心模式）═══ */
  .feature { padding:88px 0; }
  .feature-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
  .feature-grid.rev { grid-template-columns:1fr 1.05fr; }
  .feature h2 { font-size:38px; font-weight:600; color:var(--hl-blue); line-height:1.25; margin-bottom:16px; }
  .feature .lead { font-size:16px; line-height:1.8; color:rgba(17,19,21,.65); margin-bottom:28px; }
  .checklist { list-style:none; }
  .checklist li {
    display:flex; align-items:flex-start; gap:14px;
    font-size:16px; line-height:1.65; color:rgba(17,19,21,.8);
    padding:11px 0; border-bottom:1px solid var(--line);
  }
  .checklist li:last-child { border-bottom:none; }
  .checklist .tick {
    flex:none; width:24px; height:24px; margin-top:2px; border-radius:50%;
    background:var(--hl-blue); color:#fff; font-size:13px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
  }
  .checklist b { color:var(--hl-blue); font-weight:700; }

  /* 图卡（AI图占位：金蓝渐变+中央文字，后续换生成图） */
  .photo-card { border-radius:14px; overflow:hidden; position:relative; aspect-ratio:4/3.2; background:linear-gradient(140deg,#24466E 0%,var(--hl-blue) 55%,#8A6A20 115%); display:flex; align-items:center; justify-content:center; }
  .photo-card .ph { color:rgba(238,228,207,.5); font-size:15px; letter-spacing:2px; text-align:center; line-height:2; }
  .photo-card .badge {
    position:absolute; left:18px; bottom:18px; right:18px;
    background:rgba(29,53,87,.85); backdrop-filter:blur(6px);
    border:1px solid rgba(219,165,49,.5); border-radius:10px; padding:13px 18px;
  }
  .photo-card .badge .t { color:var(--hl-gold); font-weight:700; font-size:15px; }
  .photo-card .badge .s { color:rgba(238,228,207,.75); font-size:12.5px; margin-top:2px; }

  /* ═══ 认证阶梯（白底+金色顶线卡）═══ */
  .cert { background:#FAF7F0; padding:88px 0; }
  .cert-head { text-align:center; margin-bottom:48px; }
  .cert-head .eyebrow2 { font-size:13px; font-weight:700; letter-spacing:2px; color:var(--hl-gold); margin-bottom:14px; }
  .cert-head h2 { font-size:40px; font-weight:600; color:var(--hl-blue); }
  .cert-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .cert-card { background:#fff; border-radius:12px; padding:30px 26px; border-top:4px solid var(--hl-gold); box-shadow:0 2px 12px rgba(29,53,87,.05); }
  .cert-card .v { font-size:13px; font-weight:700; letter-spacing:2px; color:var(--hl-gold); }
  .cert-card h3 { font-size:21px; font-weight:600; color:var(--hl-blue); margin:10px 0 8px; }
  .cert-card p { font-size:13.5px; line-height:1.65; color:rgba(17,19,21,.6); }

  /* ═══ 会员区（深蓝底+权益勾选+价格卡）═══ */
  .member { background:var(--hl-blue); padding:96px 0; }
  .member-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
  .member .eyebrow { color:var(--hl-gold); }
  .member h2 { font-size:40px; font-weight:600; color:var(--hl-ivory); line-height:1.25; margin-bottom:18px; }
  .member .lead { font-size:16px; line-height:1.8; color:rgba(238,228,207,.8); margin-bottom:30px; }
  .member-points { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
  .member-points .pt {
    display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:600;
    background:rgba(238,228,207,.06); border:1px solid rgba(219,165,49,.25);
    border-radius:10px; padding:15px 17px; color:var(--hl-ivory);
  }
  .member-points .tick { flex:none; width:20px; height:20px; border-radius:50%; background:var(--hl-gold); color:var(--hl-blue); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
  .price-card { background:#fff; border-radius:16px; padding:44px 38px; text-align:center; }
  .price-card .name { font-size:15px; font-weight:700; letter-spacing:2px; color:var(--hl-gold); margin-bottom:14px; }
  .price-card .price { font-size:58px; font-weight:600; letter-spacing:-2px; color:var(--hl-blue); line-height:1; }
  .price-card .price small { font-size:20px; font-weight:500; letter-spacing:0; color:rgba(17,19,21,.5); }
  .price-card .desc { font-size:14px; color:rgba(17,19,21,.6); margin:16px 0 26px; line-height:1.75; }
  .price-card .btn-primary { width:100%; justify-content:center; }
  .price-card .note { font-size:12px; color:rgba(17,19,21,.45); margin-top:14px; }

  /* ═══ 俱乐部（白底+左文右数据卡）═══ */
  .club { padding:96px 0; }
  .club-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
  .club h2 { font-size:40px; font-weight:600; color:var(--hl-blue); line-height:1.25; margin-bottom:18px; }
  .club p { font-size:16px; line-height:1.8; color:rgba(17,19,21,.7); margin-bottom:14px; }
  .club .quote { font-size:17px; font-weight:600; color:var(--hl-blue); border-left:3px solid var(--hl-gold); padding-left:16px; margin:22px 0 26px; }
  .club-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .club-stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px; }
  .club-stat .n { font-size:28px; font-weight:600; color:var(--hl-blue); letter-spacing:-.5px; }
  .club-stat .n span { color:var(--hl-gold); }
  .club-stat .l { font-size:13px; color:rgba(17,19,21,.55); margin-top:4px; }

  /* ═══ 浅金CTA区（code.org浅蓝CTA同构）═══ */
  .final-cta { background:var(--gold-soft); text-align:center; padding:96px 0; }
  .final-cta h2 { font-size:42px; font-weight:600; color:var(--hl-blue); margin-bottom:14px; letter-spacing:-.02em; }
  .final-cta p { font-size:16px; color:rgba(17,19,21,.65); margin-bottom:34px; }
  .final-cta .btn-primary { font-size:18px; padding:17px 42px; }

  /* ═══ 页脚（獾黑+签名档）═══ */
  footer { background:var(--hl-black); color:rgba(238,228,207,.6); padding:44px 0; font-size:13px; }
  footer .container { display:flex; justify-content:space-between; align-items:center; }

/* ===== 课程体系四卡（v16补样式：v13起漏配） ===== */
.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.course-card{background:#fff;border-radius:12px;padding:30px 26px;border-top:4px solid var(--hl-gold);box-shadow:0 2px 12px rgba(29,53,87,.05);display:flex;flex-direction:column}
.course-card .lv{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--hl-gold);margin-bottom:10px}
.course-card h3{font-size:21px;font-weight:600;color:var(--hl-blue);margin:0 0 8px}
.course-card p{font-size:13.5px;line-height:1.65;color:rgba(17,19,21,.6);margin:0 0 18px;flex:1}
.course-card .more{font-size:13px;font-weight:700;color:var(--hl-blue);text-decoration:none;border-bottom:2px solid var(--hl-gold);padding-bottom:2px;align-self:flex-start;transition:opacity .15s}
.course-card .more:hover{opacity:.7}
@media(max-width:960px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.course-grid{grid-template-columns:1fr}}

  @media (max-width:900px) {
    .hero-copy { padding:52px 28px 24px; }
    .hero::before { background:rgba(22,42,69,.82); }
    .hero-note { left:28px; }
    .nav { padding:0 20px; gap:16px; }
    .nav-links { display:none; }
    .container { padding:0 24px; }
    .intro h2 { font-size:32px; }
    .pillar-grid, .cert-grid { grid-template-columns:1fr 1fr; }
    .feature-grid, .feature-grid.rev, .member-grid, .club-grid { grid-template-columns:1fr; gap:32px; }
    .feature-grid.rev .photo-card { order:-1; }
  }

/* 10-01 Codex: 图片封顶防满屏 */
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center right; }
/* 10-01 Codex: 图片封顶防满屏 */
.photo-card { min-height:0; max-height:360px; overflow:hidden; }
/* 10-01 Codex: 图片封顶防满屏 */
.photo-card > img { display:block; width:100%; height:100%; max-height:360px; object-fit:cover; }
/* 10-01 Codex: 图片封顶防满屏 */
.club-stats > div[style*="grid-column:1/-1"] { max-height:240px; overflow:hidden; }
/* 10-01 Codex: 图片封顶防满屏 */
.club-stats > div[style*="grid-column:1/-1"] img { display:block; width:100%; height:240px; max-height:240px; object-fit:cover; }
/* 10-01 Codex: 图片封顶防满屏 */
.hero-people { max-height:74%; overflow:hidden; }
/* 10-01 Codex: 图片封顶防满屏 */
.hero-people img { display:block; max-height:100%; object-fit:contain; }
@media(max-width:900px){
  /* 10-01 Codex: 图片封顶防满屏 */
  .photo-card { max-height:280px; }
  /* 10-01 Codex: 图片封顶防满屏 */
  .photo-card > img { max-height:280px; }
  /* 10-01 Codex: 图片封顶防满屏 */
  .club-stats > div[style*="grid-column:1/-1"], .club-stats > div[style*="grid-column:1/-1"] img { max-height:200px; height:200px; }
}

/* 荣誉墙下拉导航 v3：所有网站页面共用同一套赛道/成长/行动分组 */
.site-nav .awards-dd > a::after{content:'⌄';display:inline-block;margin-left:6px;color:#DBA531;font-size:13px;transform:translateY(-1px)}
.site-nav .awards-menu-inner{display:block!important;min-width:min(920px,calc(100vw - 64px));padding:14px 24px 16px;background:#fff;border-top:3px solid #DBA531}
.site-nav .awards-menu-inner .mega-head{margin:0 0 7px;padding:0;color:#1D3557;font-size:16px;line-height:1.25;font-weight:900;letter-spacing:.02em}
.site-nav .awards-menu-lead{margin:-3px 0 9px;color:#6b7280;font-size:11px;line-height:1.45}
.site-nav .awards-menu-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.site-nav .awards-menu-group{min-width:0;padding:8px;border:1px solid #e6e8eb;border-radius:10px;background:#fbfcfe}
.site-nav .awards-menu-label{display:flex;align-items:center;gap:7px;margin:0 0 4px;color:#1D3557;font-size:11px;font-weight:900;letter-spacing:.04em}
.site-nav .awards-menu-label::before{content:'';width:18px;height:3px;border-radius:2px;background:#DBA531;flex:0 0 auto}
.site-nav .awards-menu-group .dd-item{display:flex!important;flex-direction:column;gap:2px;margin:1px 0;padding:5px 8px;border-radius:7px;color:#1D3557!important;line-height:1.3;transition:background .18s,color .18s,transform .18s}
.site-nav .awards-menu-group .dd-item::after{content:'→';align-self:flex-end;margin-top:-20px;color:#DBA531;font-size:15px;font-weight:900;opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s}
.site-nav .awards-menu-group .dd-item:hover{background:#eef3f8!important;color:#102a43!important;transform:translateX(2px)}
.site-nav .awards-menu-group .dd-item:hover::after{opacity:1;transform:translateX(0)}
.site-nav .awards-menu-group .dd-item strong{font-size:12px;font-weight:800}
.site-nav .awards-menu-group .dd-item span{display:block;max-width:calc(100% - 16px);margin-top:0;color:#7a8490!important;font-size:10px;line-height:1.35}
.site-nav .awards-menu-note{margin-top:6px;padding-top:6px;border-top:1px dashed #d8dde4;color:#6b7280;font-size:10px;line-height:1.45}
body.nav-cover .site-nav .nav-links .awards-menu-note a{color:#1D3557!important;font-weight:900;text-decoration:none}body.nav-cover .site-nav .nav-links .awards-menu-note a:hover{color:#DBA531!important;text-decoration:underline}
@media(max-width:900px){.site-nav .awards-menu-inner{min-width:0}.site-nav .awards-menu-grid{grid-template-columns:1fr!important}.site-nav .awards-menu-group{padding:10px}}