/* 投递工作台 W3 · M1-M4 区块
 * 语言沿用 main.css 的 token（2026-10-03 切换为浅色 SaaS 基准 B：浅灰底 #F5F7FA / 主强调 #0D7A62 / 次强调 #1D4ED8 / 白卡）
 * 共享锚点：每幕左侧的「光流轨道」(.sec-rail) 由 GSAP 按滚动进度 scaleY 展开
 * 揭示：统一的 .rv / .is-in 类，由 IntersectionObserver 驱动（减动效下直接终态）
 */

.sec{position:relative; z-index:2; max-width:1240px; margin:0 auto;
  padding:clamp(54px,8.5vh,104px) clamp(16px,5vw,56px)}
.sec + .sec{border-top:1px solid var(--line2)}

/* 光流轨道（共享锚点） */
.sec-rail{position:absolute; top:0; bottom:0; width:2px; left:calc(clamp(16px,5vw,56px) / 2 - 1px);
  background:rgba(15,23,42,.05); border-radius:2px; pointer-events:none}
.sec-rail i{display:block; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(180deg, rgba(13,122,98,.05), var(--teal) 22%, var(--blue) 78%, rgba(29,78,216,.05));
  transform:scaleY(0); transform-origin:top center; will-change:transform}
.sec-rail i{transition:transform 1.05s cubic-bezier(.22,.61,.36,1)}
.sec-rail i.is-in,.sec-rail.no-anim i{transform:scaleY(1)}

/* 幕头 */
.sec-head{margin:0 0 clamp(22px,3.6vh,40px); max-width:840px}
.sec-eyebrow{display:flex; align-items:center; gap:9px; margin:0 0 13px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.sec-dot{width:7px; height:7px; border-radius:50%; background:rgba(15,23,42,.18); flex:0 0 auto;
  transition:background .45s ease, box-shadow .45s ease, transform .45s ease}
.sec-dot.is-lit{background:var(--teal); box-shadow:0 0 12px rgba(13,122,98,.75); transform:scale(1.15)}
.sec-title{margin:0; font-size:clamp(26px,3.7vw,44px); line-height:1.14; letter-spacing:-.012em; font-weight:700}
.sec-sub{margin:13px 0 0; max-width:62ch; color:var(--body); font-size:clamp(14px,1.15vw,16.5px); line-height:1.75}
.sec-sub strong{color:var(--txt); font-weight:600}
.sec-note{margin:14px 0 0; font-size:12.5px; color:var(--faint)}

/* 统一揭示 */
.rv{opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1; transform:none}

/* ---- M1 三条承诺 ---- */
.pcards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.9vw,22px)}
.pcard{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:20px 20px 18px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.pcard::before{content:""; position:absolute; left:20px; right:20px; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(13,122,98,.5),transparent);
  opacity:0; transition:opacity .5s ease}
.pcard.is-lit::before{opacity:1}
.p-ratio{display:flex; align-items:baseline; gap:8px; font-family:var(--font-mono); font-size:11.5px; color:var(--dim)}
.p-idx{color:var(--teal)}
.p-title{margin:9px 0 7px; font-size:17px; font-weight:650; letter-spacing:.005em}
.p-desc{margin:0; font-size:13.2px; line-height:1.68; color:var(--body)}
.p-ev{margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line2);
  font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--faint)}
.p-ev b{color:#9FE7D2; font-weight:600}

/* ---- M2 能力看板（Bento 点选） ---- */
.bento{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(138px,auto);
  gap:clamp(11px,1.5vw,18px)}
.cell{position:relative; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:linear-gradient(180deg,rgba(15,23,42,.030),rgba(15,23,42,.010));
  border:1px solid var(--line); border-radius:14px; padding:17px 18px 16px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .3s ease, filter .3s ease}
.cell:hover{border-color:rgba(13,122,98,.34); transform:translateY(-2px)}
.cell:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.cell.is-active{border-color:rgba(13,122,98,.58); transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(13,122,98,.10),rgba(15,23,42,.02));
  box-shadow:0 0 0 1px rgba(13,122,98,.20), 0 18px 44px rgba(15,23,42,.10)}
.bento.has-active .cell:not(.is-active){opacity:.52; filter:saturate(.72)}
.cell.w2{grid-column:span 2}
.cell.w3{grid-column:span 3}
.c-idx{font-family:var(--font-mono); font-size:11.5px; color:var(--teal)}
.cell h3{margin:8px 0 7px; font-size:16.5px; font-weight:650; letter-spacing:.005em}
.c-desc{margin:0; font-size:13px; line-height:1.66; color:var(--dim); max-width:46ch}
.chip-state{position:absolute; right:14px; top:14px; font-size:10.5px; letter-spacing:.02em;
  padding:2px 7px; border-radius:999px; border:1px solid var(--line); color:var(--dim); white-space:nowrap}
.chip-state.live{color:var(--teal); border-color:rgba(13,122,98,.35); background:rgba(13,122,98,.07)}
.chip-state.plan{color:#C7B27A; border-color:rgba(199,178,122,.3); background:rgba(199,178,122,.06)}
.c-vis{position:absolute; right:16px; bottom:14px; width:78px; height:34px; opacity:.75; pointer-events:none}
.c-vis i{position:absolute; bottom:0; width:6px; border-radius:2px;
  background:linear-gradient(180deg,rgba(13,122,98,.85),rgba(29,78,216,.35))}
.board-note{margin:20px 0 0; border-left:2px solid rgba(13,122,98,.5); padding:2px 0 2px 14px;
  min-height:46px; font-size:13.4px; line-height:1.7; color:var(--body)}
.board-note b{color:var(--txt)}
.board-hint{margin:12px 0 0; font-size:12px; color:var(--faint)}

/* ---- M3 价格与红线 ---- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.9vw,22px)}
.tier{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:20px 20px 18px}
.tier.is-featured{border-color:rgba(13,122,98,.42);
  box-shadow:0 22px 50px rgba(15,23,42,.10)}
.t-name{margin:0; font-size:15.5px; font-weight:650}
.t-tier-tag{margin:6px 0 0; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.t-price{margin:14px 0 0; font-family:var(--font-mono); font-size:27px; font-weight:700; letter-spacing:-.01em}
.t-price small{display:block; margin-top:5px; font-family:var(--font-ui); font-size:11.5px; font-weight:400; color:var(--faint)}
.t-what{margin:15px 0 0; padding:14px 0 0; border-top:1px solid var(--line2); list-style:none}
.t-what li{position:relative; padding-left:14px; margin:7px 0; font-size:13px; color:var(--body)}
.t-what li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:rgba(13,122,98,.8)}
.redlines{margin:clamp(22px,3.4vh,34px) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px}
.redlines li{position:relative; padding-left:20px; font-size:13.2px; line-height:1.62; color:var(--body)}
.redlines li::before{content:""; position:absolute; left:1px; top:.42em; width:9px; height:9px;
  border-left:2px solid rgba(180,35,24,.75); border-bottom:2px solid rgba(180,35,24,.75);
  transform:rotate(-45deg); border-radius:1px}
.price-disclaimer{margin:16px 0 0; font-size:12px; color:var(--faint)}

/* ---- M4 收尾 ---- */
.cta-final{text-align:center; max-width:760px; margin:0 auto}
.beam-converge{display:block; width:100%; height:132px; margin:0 auto 6px; overflow:visible}
.bc-track{fill:none; stroke:rgba(15,23,42,.10); stroke-width:1.2}
.bc-line{fill:none; stroke:url(#bcGrad); stroke-width:1.8; stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(13,122,98,.5))}
.bc-node{fill:var(--teal); filter:drop-shadow(0 0 12px rgba(13,122,98,.8))}
.bc-ring{fill:none; stroke:rgba(13,122,98,.5); stroke-width:1.2}
.cta-final h2{margin:6px 0 14px; font-size:clamp(25px,3.4vw,40px); line-height:1.16; letter-spacing:-.012em}
.cta-final p{margin:0 auto; max-width:56ch; color:var(--body); font-size:clamp(14px,1.15vw,16px); line-height:1.75}
.cta-final .cta-row{justify-content:center; margin:26px 0 0}
.cta-final .foot-links{margin:18px 0 0; font-size:12.5px; color:var(--faint)}
.cta-final .foot-links button{background:none; border:0; padding:0 4px; color:#5F6E80;
  font:inherit; font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(159,176,194,.4)}
.cta-final .foot-links button:hover{color:var(--txt); text-decoration-color:var(--teal)}

/* ---- 响应式 ---- */
@media (max-width:1080px){
  .pcards{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell.w3{grid-column:span 2}
  .tiers{grid-template-columns:1fr}
  .redlines{grid-template-columns:1fr}
}
@media (max-width:620px){
  .sec{padding-top:46px; padding-bottom:46px}
  .bento{grid-template-columns:1fr; grid-auto-rows:auto}
  .cell.w2,.cell.w3{grid-column:span 1}
  .c-vis{display:none}
  .sec-rail{left:6px}
  .sec-title{font-size:clamp(23px,7vw,30px)}
  .t-price{font-size:24px}
  .beam-converge{height:104px}
  .cta-final .btn{flex:1 1 100%}
}
@media (max-width:380px){
  .sec{padding-left:14px; padding-right:14px}
  .sec-rail{left:5px}
}

/* reduced motion：不做位移揭示，直接终态 */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important; transform:none !important}
  .sec-rail i{transform:scaleY(1) !important}
  .cell:hover{transform:none}
}

/* ===== 「试一下」交互演示（2026-10-07）===== */
.try-wrap {
  background: var(--card, #fff);
  border: 1px solid var(--line, #E3EAF2);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 18px;
  box-shadow: 0 2px 10px rgba(11,18,32,.06);
}
.try-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.try-lbl { font-size: 13px; font-weight: 700; color: var(--green, #0D7A62); letter-spacing: .04em; }
.try-input {
  flex: 1; min-width: 180px;
  font: inherit; font-size: 15px;
  padding: 10px 13px;
  border: 1.5px solid var(--line, #E3EAF2);
  border-radius: 9px;
  background: #FBFDFF;
  color: var(--ink, #0B1220);
}
.try-input:focus { outline: none; border-color: var(--green, #0D7A62); background: #fff; }
.try-btn {
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 10px 22px;
  border: none; border-radius: 9px;
  background: var(--green, #0D7A62); color: #fff;
  cursor: pointer;
  transition: filter .15s;
}
.try-btn:hover { filter: brightness(1.1); }
.try-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.try-chip {
  font: inherit; font-size: 13px;
  font-family: ui-monospace, Consolas, monospace;
  padding: 5px 12px;
  border: 1px solid var(--line, #E3EAF2);
  border-radius: 20px;
  background: #F5F8FB; color: #46566F;
  cursor: pointer;
  transition: all .15s;
}
.try-chip:hover { border-color: var(--green, #0D7A62); color: var(--green, #0D7A62); background: #F0FAF6; }
.try-out {
  margin-top: 14px; padding: 16px 18px;
  background: #F8FAFC; border-radius: 10px;
  border-left: 4px solid var(--green, #0D7A62);
}
.try-row { display: flex; gap: 14px; align-items: baseline; padding: 4px 0; font-size: 14px; }
.try-k { flex: none; width: 66px; color: #7A8AA3; font-size: 12.5px; }
.try-v { font-family: ui-monospace, Consolas, monospace; color: var(--ink, #0B1220); font-weight: 600; }
.try-dim { font-weight: 400; color: #94A3B8; font-size: 12px; }
.try-verdict {
  margin-top: 12px; padding: 9px 14px;
  border-radius: 8px; font-size: 14px; font-weight: 700;
}
.v-ok { background: #E8F7F1; color: #0A6B56; border: 1px solid #C9E9DE; }
.v-low { background: #FFF7E6; color: #8A6100; border: 1px solid #F5E0B0; }
.v-none { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }
.try-foot { margin: 16px 0 0; font-size: 13px; line-height: 1.7; color: #64748B; }
.try-foot strong { color: var(--ink, #0B1220); }
.try-foot code { font-size: 12px; background: #F1F5F9; padding: 1px 5px; border-radius: 4px; }
.try-err { color: #B42318; font-size: 14px; }
@media (max-width: 620px) {
  .try-wrap { padding: 16px; }
  .try-row { flex-direction: column; gap: 2px; }
  .try-k { width: auto; }
}

/* ===== 作品链接区（2026-10-07）===== */
.badge-live { margin-left: 6px; font-size: 11px; background: #0D7A62; color: #fff; padding: 1px 7px; border-radius: 10px; }
.works { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line, #E3EAF2); }
.works-h { font-size: 17px; margin: 0 0 6px; }
.works-lead { font-size: 13.5px; color: #64748B; margin: 0 0 14px; }
.works-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.works-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 13px; background: #F8FAFC; border-radius: 9px; border-left: 3px solid #0D7A62; }
.w-tag { flex: none; width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #0D7A62; color: #fff; font-size: 12px; font-weight: 700; border-radius: 6px; }
.works-list a { color: #0B1220; text-decoration: none; font-size: 14px; font-weight: 600; flex: 1; }
.works-list a:hover { color: #0D7A62; text-decoration: underline; }
.w-n { flex: none; font-size: 12px; color: #94A3B8; font-family: ui-monospace, Consolas, monospace; }
.works-note { font-size: 12.5px; color: #94A3B8; margin: 12px 0 0; }
@media (max-width: 620px) { .works-list li { flex-wrap: wrap; } .w-n { width: 100%; text-align: right; } }