/* ============================================================
   Nightwatch 官网 v3 - 章节样式
   hero / 论点滚动场景 / 产品章 / 工具带 / 研报 / 社群 / 定价 / FAQ
   ============================================================ */

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: clip; }
.hero::before { content:""; position:absolute; z-index:0; left:-20%; right:-20%; top:48%; height:88%; pointer-events:none; opacity:.42;
  background-image:linear-gradient(rgba(209,217,244,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(209,217,244,.16) 1px,transparent 1px);
  background-size:92px 92px; transform:perspective(900px) rotateX(58deg) scale(1.25); transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.72) 24%,rgba(0,0,0,.92)); mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.72) 24%,rgba(0,0,0,.92)); }
#hero-art { position: absolute; z-index:1; inset: 0; width: 100%; height: 100%; }
.hero__veil { position: absolute; inset: 0; background: radial-gradient(90% 70% at 28% 50%, rgba(20,20,22,0.88) 0%, rgba(20,20,22,0.45) 45%, transparent 75%); pointer-events: none; }
.hero__copy { position: relative; z-index: 2; padding: 140px 0 110px; }
/* 单行大标题：字号收在左栏内（不压右侧粒子区），任何宽度都不换行；600 = 字标同款 Demibold */
.hero__copy h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4.2vw, 3.9rem); font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; margin-top: 22px; white-space: nowrap; }
.hero__copy h1 em { font-style: normal; background: linear-gradient(100deg, var(--gold-ink), var(--gold) 45%, var(--purple-ink) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { margin-top: 24px; max-width: 40ch; color: var(--ink-soft); font-size: clamp(1.02rem, 1.5vw, 1.2rem); }
.hero__stats { display: flex; gap: clamp(28px, 5vw, 64px); margin-top: 64px; flex-wrap: wrap; }
.stat b { font-family: var(--font-mono); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.stat b span { display: inline; }
.stat b i { font-style: normal; font-size: 0.6em; color: var(--muted); margin-left: 2px; }
.stat .lbl { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--muted); max-width: 20ch; line-height: 1.5; }
.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: 8px; color: var(--faint); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.3em; }
.hero__scroll .bar { width: 1px; height: 34px; background: var(--line); overflow: hidden; position: relative; }
.hero__scroll .bar::after { content:""; position: absolute; inset: 0; background: var(--accent); animation: scrolldot 2.4s ease-in-out infinite; }
@keyframes scrolldot { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }
@media (max-width: 720px) { .hero { align-items: flex-start; } .hero__copy { padding: 134px 0 92px; } .hero__copy h1 { white-space: normal; max-width: 12ch; } .hero__sub { max-width: 34ch; } }

/* ---------- 通用章节 ---------- */
.sec { position: relative; padding: clamp(90px, 12vh, 150px) 0; }
.sec-head { max-width: 52ch; }

/* ---------- 论点滚动场景（sticky scrub）---------- */
.scene { position: relative; }
.scene__sticky { position: sticky; top: 0; height: 100vh; overflow: clip; display: grid; align-items: center; }
.scene__grid { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.scene__steps { position: relative; min-height: 300px; }
.scene__step { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.scene__step.on { opacity: 1; transform: none; pointer-events: auto; }
.scene__step .num { font-family: var(--font-mono); color: var(--accent); font-size: 0.8rem; letter-spacing: 0.3em; }
.scene__step h3 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.35; }
.scene__step p { color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 36ch; }
.scene__viz { position: relative; aspect-ratio: 1.15; }
.scene__viz canvas { width: 100%; height: 100%; }
.scene__rail { position: absolute; left: 0; bottom: -46px; display: flex; gap: 8px; }
.scene__rail .dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--faint); transition: all .4s ease; }
.scene__rail .dot.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--glow); }
@media (max-width: 860px) {
  .scene__grid { grid-template-columns: 1fr; align-content: center; gap: 10px; }
  .scene__viz { order: -1; aspect-ratio: 1.4; max-height: 44vh; }
  .scene__steps { min-height: 240px; }
}

/* ---------- 产品章（Chart / Heatmap）---------- */
.product { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.product--flip { grid-template-columns: 7fr 5fr; }
.product--flip .product__copy { order: 2; }
.product__frame { aspect-ratio: 16 / 10; box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 60px var(--glow); }
.product__terms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:500px; margin-top:26px; }
.product__terms .term { min-height:76px; display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:16px; color:var(--ink-soft); border:1px solid rgba(244,248,251,.12); background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018) 58%,rgba(255,210,0,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 24px rgba(0,0,0,.15); transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.product__terms .term:hover { transform:translateY(-2px); border-color:rgba(255,226,122,.42); background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,210,0,.075)); }
.term__icon { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:11px; border:1px solid rgba(255,226,122,.20); background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.14),transparent 55%),rgba(255,210,0,.08); color:var(--gold-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 18px rgba(255,210,0,.05); }
.term__icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.term__icon--cliff svg { fill:currentColor; stroke:none; }.term__icon--break { color:var(--purple-ink); border-color:rgba(168,155,255,.27); background:rgba(100,80,255,.10); }
.product__terms .term > span:last-child { display:grid; gap:2px; line-height:1.15; }.product__terms .term b { color:var(--gold-ink); font-size:.88rem; font-weight:650; }.product__terms .term small { color:var(--muted); font-size:.72rem; white-space:nowrap; }
.feature-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.feature-list li { display: flex; gap: 12px; color: var(--ink-soft); font-size: 0.98rem; align-items: baseline; }
.feature-list li::before { content:"·"; color: var(--accent); font-weight: 800; font-size: 1.3em; line-height: 1; }
@media (max-width: 900px) { .product, .product--flip { grid-template-columns: 1fr; } .product--flip .product__copy { order: 0; } }

/* ---------- 工具带 ---------- */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 54px; }
.tool-card { border: 1px solid var(--line); border-radius: 18px; background: var(--bg-panel); padding: 30px; display: grid; gap: 12px; transition: border-color .3s ease, transform .3s ease; }
.tool-card:hover { border-color: var(--faint); transform: translateY(-3px); }
.tool-card h3 { font-size: 1.25rem; font-weight: 700; }
.tool-card p { color: var(--ink-soft); font-size: 0.95rem; }
.tool-card .ph-frame { aspect-ratio: 16 / 9; margin-top: 8px; }
.tool-card .doc-link { justify-self: start; font-size: 0.88rem; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.tool-card .doc-link:hover { text-decoration: underline; }
@media (max-width: 820px) { .tools { grid-template-columns: 1fr; } }

/* ---------- 研报章（PDF 文档展示）---------- */
.research-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.pdf-stack { position: relative; height: clamp(380px, 46vw, 540px); }
.pdf-page {
  position: absolute; top: 50%; left: 50%; width: clamp(230px, 24vw, 320px); aspect-ratio: 210 / 297;
  border-radius: 10px; background: #16181d; border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 40px var(--glow);
  padding: 22px 20px; display: grid; gap: 10px; align-content: start;
  transform: translate(-50%,-50%) rotate(var(--rot, 0deg)) translateX(var(--off, 0px));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pdf-page--back  { --rot: -7deg; --off: -56px; opacity: 0.55; filter: brightness(0.7); }
.pdf-page--mid   { --rot: 5deg;  --off: 58px;  opacity: 0.75; filter: brightness(0.85); }
.pdf-page--front { z-index: 2; }
.pdf-stack:hover .pdf-page--front { transform: translate(-50%,-52%) rotate(-1.5deg); }
.pdf-page .pdf-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; }
.pdf-page .pdf-title { font-weight: 700; font-size: 0.95rem; line-height: 1.45; margin-top: 4px; }
.pdf-page .pdf-meta { font-family: var(--font-mono); font-size: 0.62rem; color: var(--faint); letter-spacing: 0.1em; }
.pdf-page .pdf-line { height: 7px; border-radius: 4px; background: var(--line-soft); }
.pdf-page .pdf-line.w9 { width: 92%; } .pdf-page .pdf-line.w7 { width: 74%; } .pdf-page .pdf-line.w5 { width: 55%; }
.pdf-page .pdf-chart { height: 84px; border-radius: 8px; border: 1px dashed var(--faint); background: var(--line-soft); display: grid; place-items: center; font-size: 0.68rem; color: var(--faint); margin: 6px 0; }
.pdf-page .pdf-foot { margin-top: auto; font-size: 0.6rem; color: var(--faint); }
/* 真实研报截图页：去掉内边距，截图从页首铺满、底部裁切 */
.pdf-page--img { padding: 0; overflow: hidden; display: block; }
.pdf-page--img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (max-width: 900px) { .research-grid { grid-template-columns: 1fr; } .pdf-stack { height: 420px; } }

/* ---------- 社群章 + 晒单滚动带（Skylit 式 marquee）----------
   双排反向横滚，卡片由 JS 生成双份、位移 -50% 实现无缝循环；
   全出血 + 两侧渐隐遮罩；悬停或离屏暂停；减动效降级为可横向滑动 */
.wall-marquee {
  margin-top: 54px; display: grid; gap: 18px;
  width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.wall-row { overflow: hidden; }
.wall-track { display: flex; width: max-content; animation: wall-scroll 52s linear infinite; }
.wall-row--rev .wall-track { animation-direction: reverse; animation-duration: 61s; }
.wall-marquee:hover .wall-track,
.wall-marquee.off .wall-track { animation-play-state: paused; }
@keyframes wall-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wall-card {
  flex: 0 0 auto; height: 240px; margin: 0 18px 0 0; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(244,248,251,.12); background: #0d0d10;
  box-shadow: 0 16px 38px rgba(0,0,0,.28);
}
.wall-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; }
  .wall-row { overflow-x: auto; }
}
.wall-note { margin-top: 22px; text-align: center; font-size: 0.78rem; color: var(--faint); line-height: 1.7; }

/* ---------- 定价 ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 54px; max-width: 920px; margin-inline: auto; }
.plan { border: 1px solid var(--line); border-radius: 20px; background: var(--bg-panel); padding: 34px; display: grid; gap: 18px; align-content: start; position: relative; }
.plan--pro { border-color: rgba(0,255,170,0.3); box-shadow: 0 0 50px rgba(0,255,170,0.07); }
.plan__badge { position: absolute; top: -12px; right: 24px; padding: 4px 14px; border-radius: 999px; background: var(--mint); color: #04120c; font-size: 0.76rem; font-weight: 700; }
.plan h3 { font-size: 1.3rem; font-weight: 700; }
.plan .plan__desc { color: var(--muted); font-size: 0.9rem; margin-top: -10px; }
.plan .price { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 500; }
.plan .price i { font-style: normal; font-size: 0.42em; color: var(--muted); }
.plan .price-note { font-size: 0.8rem; color: var(--faint); margin-top: -14px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan ul li { display: flex; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); align-items: baseline; }
.plan ul li::before { content:"✓"; color: var(--mint); font-weight: 700; }
.plan ul li.hl::before { content:"★"; color: var(--gold); }
.pay-note { text-align: center; margin-top: 26px; font-size: 0.82rem; color: var(--faint); }

/* 计费周期切换 toggle（月付 / 季付） */
.billing-toggle { display: inline-flex; gap: 4px; margin: 26px auto 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-panel); }
.bt-btn { appearance: none; border: 0; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: 0.85rem; font-weight: 500; padding: 8px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .2s, background .2s; }
.bt-btn:hover { color: var(--ink); }
.bt-btn.on { background: var(--accent, #00ffaa); color: #04120c; font-weight: 600; }
.bt-badge { font-size: 0.7rem; padding: 2px 7px; border-radius: 999px; background: rgba(255,210,0,0.18); color: var(--gold-ink, #ffd200); font-weight: 600; }
.bt-btn.on .bt-badge { background: rgba(4,18,12,0.22); color: #04120c; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 44px auto 0; display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-panel); padding: 0 22px; transition: border-color .25s ease; }
.faq-list details[open] { border-color: var(--faint); }
.faq-list summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 0.98rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content:"+"; color: var(--muted); font-size: 1.2rem; transition: transform .25s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 18px; color: var(--muted); font-size: 0.9rem; }
.faq-list details p a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 60px 0 40px; margin-top: 40px; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__brand { display: grid; gap: 12px; max-width: 34ch; }
.footer__brand .nav__brand img { width: 26px; height: 26px; }
.footer__brand p { color: var(--muted); font-size: 0.88rem; }
.footer__links { display: flex; gap: clamp(30px, 5vw, 70px); }
.footer__links nav { display: grid; gap: 8px; align-content: start; }
.footer__links b { font-size: 0.8rem; color: var(--faint); font-weight: 600; letter-spacing: 0.1em; margin-bottom: 6px; }
.footer__links a { color: var(--ink-soft); font-size: 0.9rem; transition: color .2s ease; }
.footer__links a:hover { color: var(--ink); }
.footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint); font-size: 0.78rem; }

/* ---------- 数据实力条（foundation）---------- */
.found { position: relative; border: 1px solid var(--line); border-radius: 24px; background: var(--bg-panel); padding: clamp(30px, 5vw, 60px); overflow: hidden; }
.found::before { /* 扫描线：机构感的横向亮波 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 44%, rgba(223,231,242,0.045) 50%, transparent 56%);
  background-size: 300% 100%; animation: found-scan 5.5s ease-in-out infinite;
}
@keyframes found-scan { 0% { background-position: 140% 0; } 100% { background-position: -140% 0; } }
@media (prefers-reduced-motion: reduce) { .found::before { animation: none; } }
.found::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--purple) 70%, transparent); opacity: 0.6; }
.found__head { max-width: 60ch; }
.found__grid { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.found__grid li { border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(255,255,255,0.015); padding: 20px; display: grid; gap: 8px; align-content: start; transition: border-color .3s ease, transform .3s ease; }
.found__grid li:hover { border-color: var(--faint); transform: translateY(-3px); }
.found__ico { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); font-size: 0.95rem; margin-bottom: 4px; }
.found__grid b { font-size: 1rem; font-weight: 700; }
.found__grid li > span:last-child { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 960px) { .found__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .found__grid { grid-template-columns: 1fr; } }

/* ---------- Built for 人群条（audience）---------- */
.sec--thin { padding-block: clamp(60px, 8vh, 100px); }
.aud { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.aud-chip {
  padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 0.95rem; color: var(--ink-soft); background: var(--bg-panel); white-space: nowrap;
  animation: aud-cycle 7.2s ease-in-out infinite; animation-delay: var(--ad, 0s);
  transition: transform .2s ease;
}
.aud-chip:hover { transform: translateY(-2px); }
/* 高亮波：金光依次扫过每个标签 */
@keyframes aud-cycle {
  0%, 12%, 100% { border-color: var(--line); color: var(--ink-soft); box-shadow: none; }
  5% { border-color: var(--gold); color: var(--gold-ink); box-shadow: 0 0 18px rgba(255,210,0,0.18); }
}
@media (prefers-reduced-motion: reduce) { .aud-chip { animation: none; } }
.aud__note { margin-top: 28px; color: var(--muted); font-size: 0.95rem; }

/* ---------- Without / With 对比块（versus）---------- */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 54px; max-width: 980px; margin-inline: auto; align-items: stretch; }
.vs-card { border-radius: 20px; padding: 32px; display: grid; gap: 18px; align-content: start; }
.vs-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.vs-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.vs-card li { display: flex; gap: 12px; align-items: baseline; font-size: 0.97rem; line-height: 1.6; }
.vs-card--without { border: 1px solid var(--line-soft); background: var(--bg-soft); color: var(--muted); }
.vs-card--without li::before { content: "✕"; color: var(--down, #e07c63); opacity: 0.7; font-weight: 700; flex-shrink: 0; }
.vs-card--with { position: relative; background: var(--bg-panel); color: var(--ink-soft); border: 1px solid transparent; background-clip: padding-box; }
.vs-card--with::before { /* 金紫渐变描边 + 呼吸辉光 */
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 21px;
  background: linear-gradient(130deg, var(--gold), rgba(255,210,0,0.15) 35%, rgba(100,80,255,0.2) 65%, var(--purple));
  animation: vs-breathe 3.6s ease-in-out infinite;
}
@keyframes vs-breathe { 0%,100% { filter: brightness(0.85); } 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .vs-card--with::before { animation: none; } }
.vs-card--with { box-shadow: 0 0 44px rgba(100,80,255,0.12), 0 0 26px rgba(255,210,0,0.06); }
.vs-card--with h3 { color: var(--ink); }
.vs-card--with li::before { content: "✓"; color: var(--gold); font-weight: 700; flex-shrink: 0; }
/* 左右滑入 */
.vs-card--without.reveal { transform: translateX(-30px); }
.vs-card--with.reveal { transform: translateX(30px); }
.vs-card.reveal.in { transform: none; }
.versus__hook { text-align: center; margin-top: 34px; font-size: 1.05rem; color: var(--ink-soft); }
@media (max-width: 820px) { .versus { grid-template-columns: 1fr; } .vs-card--without.reveal, .vs-card--with.reveal { transform: translateY(26px); } }

/* ---------- 收尾 CTA 大块（join）---------- */
.sec--cta { padding-block: clamp(110px, 16vh, 190px); }
.cta-big {
  font-family: var(--font-display); font-weight: 800; line-height: 1.25;
  font-size: clamp(2.3rem, 5.6vw, 4.2rem); letter-spacing: 0.01em;
  background: linear-gradient(100deg, #f4f8fb 20%, var(--gold-ink) 40%, #f4f8fb 60%, var(--purple-ink) 80%, #f4f8fb);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cta-shine 6s linear infinite;
}
@keyframes cta-shine { 0% { background-position: 140% 0; } 100% { background-position: -140% 0; } }
@media (prefers-reduced-motion: reduce) { .cta-big { animation: none; } }

/* ---------- Data API / MCP 预告章 ---------- */
.chip--soon { color: var(--gold-ink); border-color: rgba(255,210,0,0.35); background: rgba(255,210,0,0.08); }
.chip--soon::before { background: var(--gold); }
.api-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 22px; margin-top: 54px; align-items: stretch; }
/* 终端窗 */
.term { border: 1px solid var(--line); border-radius: 16px; background: #101013; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 24px 70px rgba(0,0,0,0.45); }
.term__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.term__bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a40; }
.term__bar i:nth-child(1){ background:#e0655a; } .term__bar i:nth-child(2){ background:#e0a83f; } .term__bar i:nth-child(3){ background:#59b26a; }
.term__bar b { margin-left: 10px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--faint); letter-spacing: 0.08em; }
.term__body { margin: 0; padding: 20px 22px; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.75; color: var(--ink-soft); white-space: pre-wrap; word-break: break-all; min-height: 320px; }
.term__body .t-cmd { color: var(--ink); }
.term__body .t-dim { color: var(--muted); }
.term__body .t-gold { color: var(--gold-ink); }
.term__body .t-purple { color: var(--purple-ink); }
.term__cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--ink-soft); vertical-align: text-bottom; animation: term-blink 1.1s steps(1) infinite; margin-left: 2px; }
@keyframes term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .term__cursor { animation: none; } }
/* MCP 对话示意 */
.mcp { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-panel); padding: 20px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; }
.mcp__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--muted); }
.mcp__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(255,210,0,0.5); animation: mcp-breathe 2.4s ease-in-out infinite; }
@keyframes mcp-breathe { 50% { opacity: 0.4; } }
.mcp__chat { display: grid; gap: 12px; align-content: start; }
.mcp__msg { max-width: 92%; padding: 10px 14px; border-radius: 12px; font-size: 0.88rem; line-height: 1.6;
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.mcp__msg.on { opacity: 1; transform: none; }
.mcp__msg--user { justify-self: end; background: var(--bg-elev); color: var(--ink); border-bottom-right-radius: 4px; }
.mcp__msg--tool { justify-self: start; background: transparent; border: 1px dashed var(--faint); color: var(--purple-ink); font-family: var(--font-mono); font-size: 0.76rem; padding: 7px 12px; }
.mcp__msg--ai { justify-self: start; background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.mcp__note { font-size: 0.76rem; color: var(--faint); text-align: center; }
@media (prefers-reduced-motion: reduce){ .mcp__msg { opacity: 1; transform: none; transition: none; } .mcp__dot { animation: none; } }
/* 三通道 */
.api-chans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.api-chan { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-panel); padding: 14px 18px; }
.api-chan b { font-size: 0.92rem; white-space: nowrap; }
.api-chan code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.api-chan .chip--soon { font-size: 0.6rem; padding: 3px 9px; flex-shrink: 0; }
@media (max-width: 900px){ .api-grid { grid-template-columns: 1fr; } .api-chans { grid-template-columns: 1fr; } .term__body { min-height: 260px; } }
/* 终端补充（v1 打字演示） */
.term__body .t-up { color: var(--up-ink); }
@media (max-width: 900px){ .term__body { font-size: 0.72rem; } }
/* API 章：数字雨氛围背景（极淡、斜向下落，内容层压在其上） */
.sec--rain { overflow: clip; }
.api-rain { position: absolute; left: -6%; top: -10%; width: 112%; height: 120%; transform: rotate(-6deg); pointer-events: none; }
.sec--rain .wrap { position: relative; z-index: 1; }

/* ---------- Product examples: purpose-built UI studies instead of empty screenshot boxes ---------- */
.product-mock { position:relative; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; min-height:340px; color:var(--ink-soft); background:linear-gradient(145deg,#1c1c25,#0e0e13 72%); }
.product-mock::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 70% at 85% 12%,rgba(168,155,255,.14),transparent 62%); }
.product-mock__bar { position:relative; z-index:1; display:flex; align-items:center; gap:10px; min-height:47px; padding:0 17px; border-bottom:1px solid rgba(244,248,251,.10); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; }
.product-mock__bar b { color:var(--ink); font-size:.86rem; letter-spacing:.04em; }
.product-mock__bar span:not(.mock-live) { color:var(--muted); }
.product-mock__bar i { width:7px; height:7px; border-radius:50%; background:rgba(244,248,251,.18); margin-left:auto; }
.product-mock__bar i~i { margin-left:0; }
.mock-live { padding:2px 6px; border-radius:999px; color:#07130e; background:var(--up); font-size:.58rem; font-weight:800; letter-spacing:.1em; }
.gex-chart { position:relative; z-index:1; min-height:220px; margin:17px 18px 8px; overflow:hidden; border-radius:12px; border:1px solid rgba(244,248,251,.07); background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(244,248,251,.055) 39px),repeating-linear-gradient(90deg,transparent 0 54px,rgba(244,248,251,.045) 55px),rgba(7,7,11,.36); }
.gex-chart svg { position:absolute; inset:0; width:100%; height:100%; }
.gex-line { fill:none; stroke:#c9c2ff; stroke-width:3; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 8px rgba(168,155,255,.55)); }
.gex-area { fill:url(#none); fill:rgba(100,80,255,.12); }
.gex-level { position:absolute; left:0; right:0; z-index:2; border-top:1px dashed currentColor; padding-left:8px; font:600 .62rem var(--font-mono); letter-spacing:.06em; }
.gex-level--gold { top:51%; color:var(--gold-ink); background:linear-gradient(90deg,rgba(255,210,0,.13),transparent 50%); }
.gex-level--purple { top:27%; color:var(--purple-ink); background:linear-gradient(90deg,rgba(100,80,255,.13),transparent 50%); }
.gex-dot { position:absolute; z-index:3; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; }
.gex-dot--one { left:28%; top:47%; }.gex-dot--two { left:62%; top:36%; background:var(--gold); box-shadow:0 0 12px var(--gold); }.gex-dot--three { left:86%; top:16%; background:var(--purple-ink); box-shadow:0 0 12px var(--purple); }
.mock-stats { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:8px 18px 15px; font-size:.67rem; color:var(--muted); }
.mock-stats span { display:grid; gap:2px; padding-left:8px; border-left:1px solid rgba(244,248,251,.10); }.mock-stats b { color:var(--ink); font:600 .8rem var(--font-mono); }
.product-mock--heatmap::before { background:radial-gradient(64% 72% at 28% 18%,rgba(255,210,0,.13),transparent 62%),radial-gradient(55% 65% at 80% 75%,rgba(100,80,255,.16),transparent 70%); }
.heatmap-scale { position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); padding:16px 18px 5px; font:.62rem var(--font-mono); color:var(--faint); text-align:center; }
.heatmap-plot { position:relative; z-index:1; min-height:205px; margin:0 18px 8px; border-radius:12px; overflow:hidden; border:1px solid rgba(244,248,251,.08); background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(244,248,251,.055) 29px),repeating-linear-gradient(90deg,transparent 0 48px,rgba(244,248,251,.055) 49px),#111117; }
/* 热区色块类名必须圈在 .heatmap-plot 作用域内：裸写 .h2 会撞上全站标题类 .h2，
   给所有 <h2 class="h2"> 刷上一块蓝紫实底 */
.hot { position:absolute; width:18%; height:20%; border-radius:8px; filter:blur(1px); opacity:.84; }.heatmap-plot .h1{left:4%;top:57%;background:#3720b9}.heatmap-plot .h2{left:20%;top:38%;background:#6250ef}.heatmap-plot .h3{left:34%;top:47%;background:#7b67ff}.heatmap-plot .h4{left:50%;top:27%;background:#c79023}.heatmap-plot .h5{left:65%;top:38%;background:#f2bc25}.heatmap-plot .h6{left:78%;top:16%;background:#ffe27a}.heatmap-plot .h7{left:11%;top:14%;background:#322276}.heatmap-plot .h8{left:27%;top:70%;background:#4935c4}.heatmap-plot .h9{left:45%;top:69%;background:#896212}.heatmap-plot .h10{left:62%;top:64%;background:#5d48d2}.heatmap-plot .h11{left:77%;top:54%;background:#ffd200}.heatmap-plot .h12{left:83%;top:74%;background:#322276}
.heatmap-spot { position:absolute; inset:47% 0 auto; padding-left:9px; border-top:1px solid rgba(244,248,251,.85); color:#fff; font:600 .61rem var(--font-mono); letter-spacing:.09em; }
.mini-mock { position:relative; min-height:174px; overflow:hidden; border:1px solid rgba(244,248,251,.10); border-radius:12px; background:linear-gradient(145deg,#111118,#1a1924); }
.mini-mock b { position:absolute; left:13px; bottom:11px; color:var(--faint); font:.62rem var(--font-mono); letter-spacing:.12em; }
.mini-mock--replay { background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(244,248,251,.055) 32px),repeating-linear-gradient(90deg,transparent 0 43px,rgba(244,248,251,.045) 44px),linear-gradient(145deg,#101017,#1a1724); }
.mini-mock__time { position:absolute; top:12px; left:13px; color:var(--gold-ink); font:.65rem var(--font-mono); }.mini-candle { position:absolute; width:10px; border-radius:3px; background:var(--purple-ink); box-shadow:0 0 12px rgba(100,80,255,.4); }.mini-candle::before { content:""; position:absolute; left:4px; top:-17px; width:2px; height:46px; background:currentColor; color:#d7d2ff; }.mini-mock--replay .c1{left:21%;bottom:43px;height:30px}.mini-mock--replay .c2{left:36%;bottom:67px;height:42px}.mini-mock--replay .c3{left:51%;bottom:48px;height:22px;background:var(--gold)}.mini-mock--replay .c4{left:66%;bottom:78px;height:38px}.mini-mock--replay .c5{left:81%;bottom:57px;height:57px;background:var(--gold)}
.mini-mock--iv { background:linear-gradient(145deg,#12111a,#1c1a2c); }.mini-mock--iv svg { position:absolute; inset:26px 13px 18px; width:calc(100% - 26px); height:calc(100% - 44px); }.mini-mock--iv path { fill:none; stroke:#c9c2ff; stroke-width:4; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 9px rgba(168,155,255,.52)); }.iv-axis { position:absolute; left:13px; right:13px; height:1px; background:rgba(244,248,251,.08); }.mini-mock--iv .a1{top:42px}.mini-mock--iv .a2{top:82px}.mini-mock--iv .a3{top:122px}

/* ---------- v4 refinement: quieter depth across the whole landing page ---------- */
.sec { isolation: isolate; }
.sec > .wrap { position:relative; z-index:1; }
.sec::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:radial-gradient(56% 46% at 50% 0%, rgba(244,248,251,.022), transparent 72%); }
.sec:nth-of-type(even)::before { background:radial-gradient(46% 58% at 82% 38%, rgba(100,80,255,.09), transparent 75%); }
#foundation::before { background:radial-gradient(52% 64% at 12% 50%, rgba(255,210,0,.075), transparent 72%),radial-gradient(48% 62% at 92% 40%, rgba(100,80,255,.10), transparent 74%); }
#chart::before { background:radial-gradient(55% 74% at 86% 44%, rgba(100,80,255,.16), transparent 72%); }
#heatmap::before { background:radial-gradient(52% 74% at 14% 48%, rgba(255,210,0,.13), transparent 74%); }
#heatmap::after { content:""; position:absolute; inset:10% -12%; z-index:0; pointer-events:none; opacity:.72; background:
  radial-gradient(ellipse 34% 44% at 18% 48%, rgba(255,210,0,.11), transparent 70%),
  radial-gradient(ellipse 30% 52% at 84% 38%, rgba(100,80,255,.12), transparent 74%),
  conic-gradient(from 245deg at 51% 52%, transparent 0 17%, rgba(255,226,122,.045) 19%, transparent 23% 54%, rgba(168,155,255,.055) 57%, transparent 62%);
  filter:blur(1px); }
#tools::before { background:radial-gradient(55% 60% at 50% 8%, rgba(168,155,255,.08), transparent 76%); }
#api::before { background:radial-gradient(56% 74% at 84% 38%, rgba(100,80,255,.14), transparent 76%),radial-gradient(48% 64% at 12% 70%, rgba(255,210,0,.055), transparent 74%); }
#research::before { background:radial-gradient(56% 72% at 78% 46%, rgba(0,255,170,.075), transparent 78%); }
#community::before { background:radial-gradient(64% 66% at 50% 44%, rgba(100,80,255,.10), transparent 78%); }
#pricing::before { background:radial-gradient(58% 70% at 50% 36%, rgba(168,155,255,.13), transparent 76%),radial-gradient(34% 50% at 11% 62%, rgba(255,210,0,.06), transparent 78%); }
.ph-frame,
.tool-card,
.found,
.plan,
.faq-list details,
.mcp,
.api-chan {
  background-color: rgba(29,29,34,.74);
  background-image: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 42%, rgba(100,80,255,.035));
  border-color: rgba(244,248,251,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 22px 58px rgba(0,0,0,.18);
}
.tool-card:hover,
.found__grid li:hover,
.faq-list details[open] { border-color: rgba(168,155,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 64px rgba(0,0,0,.24), 0 0 0 1px rgba(100,80,255,.08); }
.product__frame { border:1px solid rgba(244,248,251,.12); border-radius:22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 34px 90px rgba(0,0,0,.36), 0 0 80px var(--accent-soft); }
.found::before { opacity:.35; animation:none; }
.found::after { height:1px; opacity:.38; background:linear-gradient(90deg, transparent, rgba(168,155,255,.72), transparent); }
.found__grid li { background:rgba(8,8,12,.16); border-color:rgba(244,248,251,.09); }
.pdf-page { background:linear-gradient(145deg, #202026, #121217 74%); border-color:rgba(244,248,251,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 70px rgba(0,0,0,.44); }
.vs-card--without { background:linear-gradient(145deg, rgba(42,30,32,.62), rgba(24,20,23,.72)); border-color:rgba(255,155,155,.12); }
.vs-card--with { background:linear-gradient(145deg, rgba(39,35,59,.84), rgba(25,24,34,.84)); }
.vs-card--with::before { animation:none; background:linear-gradient(130deg, rgba(244,248,251,.42), rgba(168,155,255,.18) 42%, rgba(100,80,255,.5)); }
.vs-card--with { box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 22px 64px rgba(0,0,0,.25), 0 0 40px rgba(100,80,255,.10); }
.plan--pro { border-color:rgba(168,155,255,.56); background:linear-gradient(145deg, rgba(57,51,83,.82), rgba(28,27,39,.88) 65%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 28px 80px rgba(0,0,0,.28), 0 0 60px rgba(100,80,255,.12); }
.plan__badge { background:#eceaff; color:#242033; box-shadow:0 8px 20px rgba(0,0,0,.22); }
.plan ul li::before { color:var(--purple-ink); }
.plan ul li.hl::before { color:var(--gold-ink); }
.billing-toggle { background:rgba(16,16,21,.68); border-color:rgba(244,248,251,.12); }
.bt-btn.on { background:#efeffa; color:#1a1823; }
.term { border-color:rgba(244,248,251,.13); background:linear-gradient(145deg, #17171e, #0f0f13); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 28px 80px rgba(0,0,0,.34); }
.cta-big { animation:none; background:linear-gradient(105deg, #f4f8fb 12%, #f4f8fb 46%, #c9c2ff 88%); -webkit-background-clip:text; background-clip:text; }

/* ---------- v5 refinement: one continuous atmosphere, no stacked panels ---------- */
/* Keep the chapter accents, but never switch the page's base colour mid-scroll. */
:root[data-chapter] {
  --bg: #18171d;
  --bg-soft: #201e27;
  --bg-panel: #211f29;
}

/* Section-sized colour washes were creating visible horizontal joins. */
.sec::before,
.sec::after,
#foundation::before,
#chart::before,
#heatmap::before,
#heatmap::after,
#tools::before,
#api::before,
#research::before,
#community::before,
#pricing::before {
  display: none;
}

/* Keep the hero grid above the particle canvas and veil, but below the copy.
   It is only a visual plane: the fixed page grid carries the same language
   into the following sections without a hard edge. */
.hero::before { display:block; z-index:2; opacity:.42; }
.hero__veil { background:radial-gradient(90% 74% at 28% 50%, rgba(25,24,31,.76) 0%, rgba(23,22,30,.42) 47%, rgba(25,23,38,.07) 76%); }
.hero__copy, .hero__scroll { z-index:3; }

/* ---------- v6: cinematic chapter pacing ---------- */
/* These are the narrative frames. Their contents are centred in a full
   viewport, then the browser gently settles on the following frame. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .hero,
  #foundation,
  #chart,
  #heatmap,
  #tools,
  #api,
  #research,
  #versus,
  #community,
  #join {
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    align-items: center;
  }

  /* The audience chips are a short interlude, so they settle cleanly before
     the API chapter instead of appearing as a clipped fragment. */
  #audience {
    min-height: 58svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    align-items: center;
  }

  /* Thesis already owns a multi-screen sticky timeline; let it finish its
     three beats before the next chapter becomes an eligible snap target. */
  #thesis { scroll-snap-align: none; scroll-snap-stop: normal; }
}

/* ---------- 产品截图背光光晕：白光从图片背后向四周扩散 ----------
   放在文件末尾以覆盖前文 .product__frame / .ph-frame 的 box-shadow；
   保留原有向下深色投影层，只追加白色光晕层 */
.ph-frame--filled.product__frame {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 34px 90px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(255, 255, 255, 0.24),
    0 0 110px rgba(255, 255, 255, 0.17),
    0 0 210px rgba(255, 255, 255, 0.1);
}
.tool-card .ph-frame--filled {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 22px 58px rgba(0, 0, 0, 0.18),
    0 0 26px rgba(255, 255, 255, 0.2),
    0 0 84px rgba(255, 255, 255, 0.14),
    0 0 150px rgba(255, 255, 255, 0.07);
}