/* camps.css · 营页（2026-09-30 对标改版）
   老板 09-30：「这个营的 UI 不高级，不像 4980 该有的样子」「找一找好的，对标一下」。
   对标 Reforge / Maven / Section / Ship 30 for 30 的共同点，搬到自家夜晚金色底子上：
     ① 开场一句话 + 一个按钮 + 真人大图，不放假的小卡片；
     ② 数字一行大字，不加框；
     ③ 把「赢」画成一条路（30 格 + 四道门），不用表情符号；
     ④ 每屏只说一件事，细线分隔，框线和圆角卡片尽量少；
     ⑤ 奖励用实拍整幅铺开，字压在图上。
   颜色全走 site.css / study.css 的变量，白天夜晚都能用。 */
.cx{max-width:var(--wrap);margin:0 auto;padding:0 2.5rem;overflow-x:clip}
.cx-sec{padding-top:clamp(5.5rem,9vw,8.5rem)}
.cx-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-bottom:clamp(2.4rem,4vw,3.6rem)}
.cx-head.left{text-align:left;align-items:flex-start}
.cx-head h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.18;margin:0;letter-spacing:0}
.cx-head p{font-size:var(--fs-3);color:var(--text-secondary);margin:0;max-width:30em;line-height:1.7}
.cx-eyebrow{font-size:var(--fs-1);font-weight:600;color:var(--gold);letter-spacing:.06em}
.cx-link{font-size:var(--fs-1);color:var(--text-secondary);text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:.15rem;transition:color .2s,border-color .2s}
.cx-link:hover{color:var(--gold);border-color:var(--gold)}
.cx-actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:.6rem}
.cx-actions .btn-primary{padding:1.1rem 2.4rem;font-size:var(--fs-3)}

/* 1 开场 */
.cx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(3rem,6vw,5rem) 0 0;min-height:min(86vh,800px)}
.cx-hero-copy{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.cx-hero h1{font-size:clamp(2.8rem,6vw,5.4rem);line-height:1.08;margin:0;letter-spacing:-.01em}
.cx-hero .lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.75;color:var(--text-secondary);max-width:28em;margin:0}
.cx-hero-art{position:relative;margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.cx-hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.cx-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,8,6,.78) 100%);pointer-events:none}
.cx-hero-art figcaption{position:absolute;left:1.6rem;right:1.6rem;bottom:1.4rem;z-index:1;display:flex;flex-direction:column;gap:.2rem;color:#f3eee4}
.cx-hero-art figcaption b{font-family:var(--serif);font-size:var(--fs-4);font-weight:700}
.cx-hero-art figcaption span{font-size:var(--fs-0);letter-spacing:.06em;opacity:.8}

/* 数字带 */
.cx-stats{list-style:none;margin:clamp(3rem,5vw,4.5rem) 0 0;padding:clamp(1.8rem,3vw,2.6rem) 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cx-stats li{display:flex;flex-direction:column;gap:.5rem;padding:0 2rem;border-left:1px solid var(--border)}
.cx-stats li:first-child{padding-left:0;border-left:none}
.cx-stats b{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums}
.cx-stats b i{font-style:normal;font-size:.5em;color:var(--gold);margin-left:.1em}
.cx-stats span{font-size:var(--fs-1);color:var(--text-secondary);line-height:1.5}

/* 2 30 天的路 */
.cx-path{position:relative;padding-top:6.4rem}
.cx-track{display:grid;grid-template-columns:repeat(30,1fr);gap:4px;height:18px}
.cx-track i{display:block;border-radius:3px;background:var(--gold-soft);transform-origin:left;transition:background .35s var(--ease);transition-delay:calc(var(--i)*40ms)}
.cx-track.go i{background:var(--gold)}
.cx-track i.m{position:relative}
.cx-track i.m::after{content:"";position:absolute;left:50%;top:-9px;width:2px;height:32px;background:var(--gold);transform:translateX(-50%);opacity:0;transition:opacity .35s;transition-delay:calc(var(--i)*40ms)}
.cx-track.go i.m::after{opacity:.55}
.cx-marks{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:0;height:6rem}
.cx-marks li{position:absolute;left:calc(var(--at)/30*100%);top:0;display:flex;flex-direction:column;gap:.25rem;max-width:14em;white-space:nowrap}
.cx-marks li.end{left:auto;right:0;text-align:right;align-items:flex-end}
.cx-marks b{font-family:var(--serif);font-size:var(--fs-4);color:var(--text-primary);line-height:1.2}
.cx-marks span{font-size:var(--fs-1);color:var(--text-secondary);line-height:1.5}
.cx-marks li:nth-child(2){left:calc(6/30*100% + 8px)}
.cx-marks li:nth-child(3){left:calc(14/30*100% + 8px)}

/* 3 三件事 */
.cx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border)}
.cx-steps li{display:flex;flex-direction:column;gap:.8rem;padding:2.4rem 2.4rem 2.4rem 0;border-right:1px solid var(--border);margin-right:2.4rem}
.cx-steps li:last-child{border-right:none;margin-right:0;padding-right:0}
.cx-steps .n{font-family:var(--serif);font-size:clamp(3rem,5vw,4.4rem);line-height:1;color:var(--gold);font-weight:700;margin-bottom:.4rem}
.cx-steps b{font-size:clamp(1.3rem,1.8vw,1.6rem);color:var(--text-primary);font-family:var(--serif);font-weight:700}
.cx-steps p{margin:0;font-size:var(--fs-2);line-height:1.75;color:var(--text-secondary)}

/* 4 陪你的人 */
.cx-with{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.cx-with-art{margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.cx-with-art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.cx-with-copy{display:flex;flex-direction:column}
.cx-with .cx-head{margin-bottom:2rem}
.cx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.cx-list li{display:grid;grid-template-columns:minmax(9em,.4fr) 1fr;gap:1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--border);align-items:baseline}
.cx-list b{font-family:var(--serif);font-size:var(--fs-4);color:var(--text-primary);font-weight:700}
.cx-list span{font-size:var(--fs-2);color:var(--text-secondary);line-height:1.7}

/* 5 奖励 */
.cx-prize{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:21/10;box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.cx-prize img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.cx-prize::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.86) 0%,rgba(10,8,6,.55) 45%,rgba(10,8,6,.05) 80%);pointer-events:none}
.cx-prize figcaption{position:absolute;left:clamp(1.6rem,4vw,3.6rem);top:50%;transform:translateY(-50%);z-index:1;display:flex;flex-direction:column;gap:1rem;max-width:30em;color:#f3eee4}
.cx-prize figcaption h2{font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.18;margin:0;color:#f3eee4;letter-spacing:0;white-space:nowrap}
.cx-prize figcaption p{margin:0;font-size:var(--fs-3);line-height:1.7;color:rgba(243,238,228,.82);max-width:22em}
.cx-prize .cx-eyebrow{color:#c9a961}
.cx-rules{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.cx-rules li{display:flex;align-items:baseline;gap:.7rem;padding:1.2rem 2rem 1.2rem 0;border-right:1px solid var(--border);margin-right:2rem}
.cx-rules li:last-child{border-right:none;margin-right:0;padding-right:0;justify-content:flex-end}
.cx-rules b{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,2rem);color:var(--gold);font-weight:700;white-space:nowrap}
.cx-rules span{font-size:var(--fs-1);color:var(--text-secondary);line-height:1.5;white-space:nowrap}
.cx-rules a{font-size:var(--fs-1);color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:.15rem}
.cx-rules a:hover{color:var(--gold)}

/* 6 问答 */
.cx-faq{max-width:40em;margin:0 auto}
#faq .cx-head{margin-bottom:1.6rem}

/* 7 线下营一条 */
.cx-offline{margin-top:clamp(5rem,8vw,7rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.6rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cx-offline small{display:block;font-size:var(--fs-0);letter-spacing:.06em;color:var(--gold);margin-bottom:.3rem}
.cx-offline p{margin:0;font-size:var(--fs-2);color:var(--text-secondary)}
.cx-offline .btn-ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border);white-space:nowrap}
.cx-offline .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

@media(max-width:1024px){
  .cx-hero{grid-template-columns:1fr;min-height:0}
  .cx-hero-art{max-width:520px}
  .cx-stats{grid-template-columns:repeat(2,1fr);row-gap:1.8rem}
  .cx-stats li:nth-child(3){padding-left:0;border-left:none}
  .cx-with{grid-template-columns:1fr}
  .cx-with-art{max-width:520px}
  .cx-rules{grid-template-columns:1fr 1fr}
  .cx-rules li:nth-child(2){border-right:none;margin-right:0}
  .cx-rules li:last-child{justify-content:flex-start}
}
@media(max-width:640px){
  .cx{padding:0 1.15rem}
  .cx-sec{padding-top:4rem}
  .cx-hero{padding-top:2rem}
  .cx-hero h1{font-size:clamp(2.4rem,11vw,3.2rem)}
  .cx-stats{grid-template-columns:1fr 1fr;padding:1.4rem 0}
  .cx-stats li{padding:0 1rem}
  .cx-path{padding-top:0}
  .cx-marks{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;margin-bottom:1.4rem}
  .cx-marks li,.cx-marks li:nth-child(2),.cx-marks li:nth-child(3){position:static;left:auto;max-width:none}
  .cx-marks li.end{text-align:left;align-items:flex-start}
  .cx-track{height:10px;gap:3px}
  .cx-track i.m::after{display:none}
  .cx-steps{grid-template-columns:1fr}
  .cx-steps li{border-right:none;margin-right:0;padding:1.6rem 0;border-bottom:1px solid var(--border)}
  .cx-list li{grid-template-columns:1fr;gap:.3rem}
  .cx-prize{aspect-ratio:4/5}
  .cx-prize::after{background:linear-gradient(180deg,rgba(10,8,6,.05) 30%,rgba(10,8,6,.86) 100%)}
  .cx-prize figcaption{top:auto;bottom:1.6rem;transform:none;right:1.6rem}
  .cx-rules{grid-template-columns:1fr}
  .cx-rules li{border-right:none;margin-right:0;padding:1rem 0;border-bottom:1px solid var(--border)}
  .cx-rules li:last-child{border-bottom:none}
  .cx-offline{flex-direction:column;align-items:flex-start}
}
/* 按词组断行，手机上别落单 */
.nw{display:inline-block;white-space:nowrap}