/* Homepage: why open the mini program — what it does that the website cannot. */
.mini-pitch { padding: 88px 0 24px; }
.mini-pitch-head { max-width: 720px; }
.mini-pitch-head h2 { margin: 14px 0 12px; font: 600 clamp(28px, 3.6vw, 42px)/1.3 var(--serif); color: #f6f3ff; }
.mini-pitch-head h2 em { font-style: normal; background: linear-gradient(110deg, #ffd58a, #ffb2a0 60%, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mini-pitch-head p { margin: 0; color: #b9c6e6; font-size: 16px; line-height: 1.85; }
.mini-pitch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.mini-pitch-grid article { position: relative; padding: 24px 22px 22px; border-radius: 20px; border: 1px solid rgba(214, 222, 255, .14); background: linear-gradient(160deg, rgba(36, 42, 92, .55), rgba(14, 17, 44, .7)); transition: transform .3s, border-color .3s; }
.mini-pitch-grid article:hover { transform: translateY(-3px); border-color: rgba(255, 213, 138, .45); }
.mini-pitch-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 19px; color: #1a1220; background: linear-gradient(140deg, #ffd58a, #ffb455); }
.mini-pitch-grid h3 { margin: 16px 0 8px; font: 600 18px/1.4 var(--serif); color: #f4f2ff; }
.mini-pitch-grid p { margin: 0; color: #aeb9da; font-size: 14px; line-height: 1.75; }
.mini-pitch-only { position: absolute; top: 20px; right: 18px; padding: 2px 9px; border-radius: 999px; font: 11px/1.5 var(--sans); font-style: normal; color: #c9b8ff; border: 1px solid rgba(201, 184, 255, .4); }
.mini-pitch-compare { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 18px; }
.mini-pitch-compare div { display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(214, 222, 255, .12); background: rgba(14, 17, 44, .5); }
.mini-pitch-compare b { flex-shrink: 0; font-size: 14px; color: #c2cdea; }
.mini-pitch-compare span { color: #8d97bf; font-size: 13.5px; line-height: 1.7; }
.mini-pitch-compare .is-mini { border-color: rgba(255, 213, 138, .45); background: linear-gradient(120deg, rgba(255, 213, 138, .12), rgba(14, 17, 44, .6) 70%); }
.mini-pitch-compare .is-mini b { color: #ffd58a; }
.mini-pitch-compare .is-mini span { color: #e4e8ff; }
.mini-pitch-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 26px; }
.mini-pitch-cta p { margin: 0; color: #9aa6cc; font-size: 14px; }
@media (max-width: 860px) {
  .mini-pitch { padding-top: 64px; }
  .mini-pitch-grid { grid-template-columns: 1fr 1fr; }
  .mini-pitch-compare { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mini-pitch-compare div { flex-direction: column; gap: 4px; }
  .mini-pitch-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mini-pitch-grid article { padding: 16px 14px; border-radius: 16px; }
  .mini-pitch-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
  .mini-pitch-only { top: 12px; right: 10px; padding: 1px 6px; font-size: 10px; }
  .mini-pitch-grid h3 { margin: 10px 0 6px; font-size: 15px; }
  .mini-pitch-grid p { font-size: 12.5px; line-height: 1.65; }
}

/* Showcase pages (这句怎么回 / 档案 / 实验室) point to the mini program; custom requests go to the creator's WeChat. */
.mp-guide-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.mp-guide-contact { padding: 0; border: 0; background: none; color: #c9b8ff; font: 14px var(--sans); cursor: pointer; border-bottom: 1px solid rgba(201, 184, 255, .4); }
.mp-guide-contact:hover { color: #ffd58a; border-color: rgba(255, 213, 138, .6); }
.mp-guide-band { display: flex; align-items: center; gap: 16px; max-width: 620px; margin-top: 26px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255, 213, 138, .35); background: linear-gradient(120deg, rgba(255, 213, 138, .1), rgba(14, 17, 44, .6) 70%); }
.mp-guide-band img { flex-shrink: 0; width: 64px; height: 64px; padding: 4px; border-radius: 10px; background: #fff; }
.mp-guide-band strong { display: block; color: #fff3dc; font: 600 15px/1.5 var(--serif); }
.mp-guide-band span { display: block; margin-top: 2px; color: #aeb9da; font-size: 13px; line-height: 1.6; }

/* A phone showing the mini program's 这句怎么回, replacing the orbit drawing. */
.mp-phone-stage { position: relative; z-index: 1; order: 1; display: grid; place-items: center; padding: 20px 0; }
.mp-phone-stage::before { content: ''; position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 150, .2), rgba(150, 120, 255, .1) 45%, transparent 70%); filter: blur(6px); }
.mp-phone { position: relative; width: 268px; padding: 12px; border-radius: 40px; background: linear-gradient(160deg, #2a2f5c, #12152e); box-shadow: 0 0 0 1px rgba(214, 222, 255, .18), 0 40px 80px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .04); transform: rotate(-4deg); animation: mp-float 7s ease-in-out infinite; }
@keyframes mp-float { 50% { transform: rotate(-2deg) translateY(-10px); } }
.mp-phone-screen { position: relative; overflow: hidden; min-height: 470px; padding: 40px 16px 20px; border-radius: 30px; background: radial-gradient(circle at 80% 0%, rgba(255, 213, 138, .12), transparent 45%), linear-gradient(180deg, #0d1130, #070919); }
.mp-phone-screen::before { content: ''; position: absolute; top: 10px; left: 50%; width: 76px; height: 20px; transform: translateX(-50%); border-radius: 999px; background: #04050f; }
.mp-screen-kicker { margin: 0; font: 11px var(--mono); letter-spacing: .2em; color: #ffd58a; }
.mp-screen-title { margin: 6px 0 16px; font: 600 18px/1.4 var(--serif); color: #f4f2ff; }
.mp-them { position: relative; margin: 0 0 6px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; width: fit-content; max-width: 86%; font-size: 13.5px; color: #1f2233; background: #f4f4f8; }
.mp-them-label { margin: 0 0 6px; font-size: 11px; color: #8d97bf; }
.mp-screen-label { margin: 18px 0 10px; font-size: 12px; color: #c7b6ff; }
.mp-reply { margin: 0 0 9px; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.55; color: #e8ecff; border: 1px solid rgba(158, 212, 255, .2); background: rgba(20, 26, 66, .8); opacity: 0; transform: translateY(8px); animation: mp-reply 9s ease infinite; }
.mp-reply b { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #1a1220; background: linear-gradient(120deg, #ffd58a, #ffb455); }
.mp-reply:nth-of-type(2) { animation-delay: .5s; } .mp-reply:nth-of-type(3) { animation-delay: 1s; }
@keyframes mp-reply { 0%, 8% { opacity: 0; transform: translateY(8px); } 16%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.mp-screen-foot { position: absolute; left: 16px; right: 16px; bottom: 18px; padding: 10px 14px; border-radius: 999px; font-size: 12px; color: #8d97bf; border: 1px solid rgba(150, 170, 210, .25); background: #070919; }
@media (max-width: 1040px) { .mp-phone-stage { order: 2; } .mp-phone { width: 240px; } .mp-phone-screen { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) { .mp-phone { animation: none; } .mp-reply { animation: none; opacity: 1; transform: none; } }