/* pages.css — home (hero + corridor, board, just listed, deploy box, flywheel teaser, rules) and page stubs
 * (docs/05-design.md §4.6, §4.7) */

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 420px at 78% 42%,rgba(244,183,40,.055),transparent 70%)}
.hero-in{display:flex;min-height:min(690px,calc(100vh - var(--hdr) - var(--strip-h)));padding-top:72px;padding-bottom:56px}
.hero-copy{width:560px;max-width:100%;display:flex;flex-direction:column}
.hero-copy>*{position:relative;z-index:1}
.kicker{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:12px;color:var(--text-3)}
.kicker .tag{height:22px;padding:0 8px;font-size:12px}
.h1{margin-top:26px;font:700 64px/1.1 var(--sans);letter-spacing:-.02em;color:var(--text)}
.h1 .caret{display:inline-block;width:.36em;height:.78em;margin-left:.06em;vertical-align:-.03em;background:var(--gold);animation:blink 1.1s steps(1) infinite}
html[lang="zh-CN"] .h1 .caret{margin-left:-.34em}
.lead{margin-top:22px;max-width:33em;font-size:16px;line-height:1.78;color:var(--text-2)}
.cta-row{display:flex;gap:12px;margin-top:32px}
.trust{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:20px;font-size:12px;color:var(--text-3)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:5px;height:5px;background:var(--gold);opacity:.75}
.hero .stats{margin-top:auto;padding-top:44px}


/* ---------- just listed ---------- */
.jlist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.lc{display:block;padding:16px 16px 14px;min-width:0;transition:border-color .15s,background-color .15s}
.lc:hover{border-color:var(--line-3);background:var(--panel-2)}
.lc-h{display:flex;align-items:center;gap:10px;min-width:0}
.lc-h>div{min-width:0}
.lc-h b{display:block;font:600 14px/1.2 var(--mono);letter-spacing:.05em}
.lc-h small{display:block;margin-top:3px;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.lc-h .tag{margin-left:auto}
.lc-px{margin:16px 0 4px;font:500 20px/1.1 var(--mono);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-px small{font-size:12px;color:var(--text-3);margin-left:4px;letter-spacing:0}
.lc-px .pend{font-size:13.5px}
.lc-pl{font:400 11px/1.3 var(--sans);color:var(--text-3);white-space:nowrap}
.lc-un{display:flex;align-items:center;gap:8px;margin:12px 0 12px;font:500 11px/1 var(--mono);color:var(--text-3);white-space:nowrap}
.lc-un .bar{height:4px}
.lc-f{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.lc-f>div{min-width:0}
.lc-f small{display:block;font-size:11px;color:var(--text-3);white-space:nowrap}
.lc-f b{display:block;margin-top:4px;font:500 14.5px/1.1 var(--mono);white-space:nowrap}
.lc-f .usd{display:block;margin-top:3px;font:400 11px/1 var(--mono);color:var(--text-3);white-space:nowrap}
.lc-f .r{text-align:right}
.lc.ghost{border-style:dashed;background:transparent}

/* ---------- deploy box ---------- */
.dep-b{display:grid;gap:16px;padding:20px}
.fld>label,.fld>.lb{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-size:12px;color:var(--text-3)}
.fld>label b,.fld>.lb b{font:500 12px/1 var(--mono);color:var(--text-3);white-space:nowrap}
.dep-in{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);transition:border-color .15s}
.dep-in:focus-within{border-color:var(--g50)}
.dep-in.bad{border-color:rgba(242,98,110,.45)}
.dep-in input{flex:1;width:0;min-width:0;height:100%;border:0;outline:0;background:none;font:600 22px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--text)}
.dep-in input::placeholder{color:var(--text-4)}
.dep-st{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--sans);white-space:nowrap}
.dep-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dep-st.ok{color:var(--up)}.dep-st.no{color:var(--down)}.dep-st.wait{color:var(--text-3)}
.dep-st.wait.spin::before{background:transparent;border:1.5px solid var(--line-3);border-top-color:var(--text-2);width:8px;height:8px;animation:spin .9s linear infinite}
.dep-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:8px}
.dep-k>div{padding:11px 12px;border-left:1px solid var(--line);min-width:0}
.dep-k>div:first-child{border-left:0}
.dep-k small{display:block;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.dep-k b{display:block;margin-top:6px;font:500 14px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dep-k b.pend{font:500 12.5px/1 var(--sans)}
.dep-code{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dep-code .code{padding:12px 16px 14px;font-size:12.5px;line-height:1.75}
.dep-note{font-size:12px;line-height:1.6;color:var(--text-3)}

/* ---------- flywheel teaser ---------- */
.flyt-b{display:grid;gap:18px;padding:20px}
.flyt-rule{display:grid;gap:8px;padding:14px 16px;border:1px dashed var(--line-2);border-radius:8px;font-size:12.5px;line-height:1.65;color:var(--text-2)}
.flyt-rule li{position:relative;padding-left:14px}
.flyt-rule li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--gold);opacity:.75}
.flyt-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--text-3)}
.flyt-meta b{font:500 12px/1 var(--mono);color:var(--text-2)}

/* ---------- rules: four steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.steps li{display:flex;flex-direction:column;padding:22px 22px 0;border-left:1px solid var(--line);min-width:0}
.steps li:first-child{border-left:0}
.steps .n{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);color:var(--gold)}
.steps code{font:500 11px/1 var(--mono);color:var(--text-3);padding:4px 6px;border:1px solid var(--line);border-radius:4px}
.steps h3{margin-top:18px;font:600 17px/1.3 var(--sans)}
.steps p{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--text-2);flex:1}
.steps .ft{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;padding:13px 0 15px;border-top:1px dashed var(--line-2);font-size:12px;color:var(--text-3)}
.steps .ft b{font:500 12.5px/1 var(--mono);color:var(--text)}

/* vertical timeline (deploy page) */
.tlv{padding:20px 20px 6px}
.tlv li{position:relative;padding:0 0 18px 28px}
.tlv li::before{content:"";position:absolute;top:12px;bottom:0;left:5px;width:1px;background:repeating-linear-gradient(180deg,var(--line-3) 0 4px,transparent 4px 8px)}
.tlv li:last-child::before{display:none}
.tlv li i{position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--line-3)}
.tlv li.now i{border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(244,183,40,.16);animation:ring 1.8s infinite}
.tlv li.done i{background:var(--gold);border-color:var(--gold)}
.tlv li.done::before{background:var(--gold)}
.tlv li b{display:block;font:600 13.5px/1.3 var(--sans)}
.tlv li.now b{color:var(--gold)}
.tlv li small{display:block;margin-top:4px;font:400 12.5px/1.6 var(--sans);color:var(--text-3)}

/* ---------- stub pages ---------- */
.stub{padding:8px 0 72px}
.stub .panel{max-width:760px}
.tt{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tt h1{font:600 38px/1 var(--mono);letter-spacing:.07em}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .jlist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jlist .lc:nth-child(n+4){display:none}
}
@media (max-width:1100px){
  .hero-copy{width:520px}
  .h1{font-size:56px}
}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(3){border-left:0}
  .steps li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .hero-in{min-height:0;padding-top:28px;padding-bottom:28px}
  .hero-copy{width:100%}
  .kicker{font-size:11.5px}
  .h1{margin-top:18px;font-size:40px;line-height:1.14}
  .lead{margin-top:16px;font-size:15px;line-height:1.72}
  .cta-row{margin-top:24px;gap:10px}
  .cta-row .btn{flex:1;padding:0 12px;min-width:0}
  .trust{gap:6px 14px;margin-top:16px;font-size:11.5px}
  .hero .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:18px;margin-top:0;row-gap:16px}
  .hero .stat{padding:0 0 0 14px}
  .hero .stat:first-child{grid-column:1/-1;padding:0 0 14px;border-left:0;border-bottom:1px solid var(--line)}
  .hero .stat:nth-child(2){padding-left:0;border-left:0}
  .hero .stat:first-child .st-v{font-size:38px}
  .hero .stat:first-child .st-v.pend{font-size:15px;line-height:24px}
  .st-v{font-size:20px}
  .st-v.pend{font-size:14px;line-height:20px}
  .st-s{font-size:11px;white-space:normal}
  .jlist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);gap:12px;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px;scrollbar-width:none}
  .jlist::-webkit-scrollbar{display:none}
  .jlist .lc{flex:0 0 76%;scroll-snap-align:start}
  .jlist .lc:nth-child(n+4){display:block}
  .dep-b,.flyt-b{padding:16px}
  .dep-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dep-k>div:nth-child(3){border-left:0}
  .dep-k>div:nth-child(n+3){border-top:1px solid var(--line)}
  .seg button{font-size:12px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{border-left:0;border-top:1px solid var(--line);padding:18px 18px 0}
  .steps li:first-child{border-top:0}
  .steps h3{margin-top:12px}
  .tlv{padding:16px 16px 4px}
  .tt h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .h1 .caret,.tlv li.now i{animation:none}
  .dep-st.wait.spin::before{animation:none}
}