/* pages-visual.css — inner-page visual upgrade (8 core pages). Loaded after style.css.
   Shared visual language: hero split formula, mock UI components, flows, big-number
   typography, trust checklist, timeline, intent cards. Zero images.
   磨砂玻璃浅色主题 v6：布局/尺寸与旧版一致，只换颜色质感。 */

/* ---------- hero: inner-page formula — 玻璃大卡片 ---------- */
.hero-inner{min-height:70vh;display:flex;align-items:center;padding:150px 0 84px}
.hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;width:100%;
  background:linear-gradient(150deg,rgba(255,255,255,.52),rgba(255,255,255,.28) 55%,rgba(210,225,245,.38));

  border:1px solid rgba(255,255,255,.65);border-radius:30px;padding:56px 52px;position:relative;
  box-shadow:0 24px 60px rgba(90,120,170,.28),inset 0 1px 0 rgba(255,255,255,.9)}
.hero-split::before{content:"";position:absolute;inset:-1px;border-radius:31px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(10,159,224,.5),rgba(255,255,255,.10) 25%,rgba(216,79,158,.45) 50%,rgba(255,255,255,.10) 75%,rgba(10,159,224,.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.hero-split .hero-copy{min-width:0;position:relative}
.hero-split .hero-visual{min-width:0;position:relative}
.hero-cta .link-more{padding:15px 6px}

/* secondary CTA: text link */
.link-more{color:#0b7cb8;font-weight:700;font-size:16px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.link-more:hover{text-decoration:underline;text-underline-offset:4px}
.link-more .arw{transition:transform .2s}
.link-more:hover .arw{transform:translateX(4px)}
[dir="rtl"] .link-more:hover .arw{transform:translateX(-4px)}

/* ---------- mock window (browser / app frame) — 浅色玻璃 ---------- */
.mock{background:linear-gradient(160deg,rgba(255,255,255,.68),rgba(255,255,255,.42) 60%,rgba(215,228,248,.5));

  border:1px solid rgba(255,255,255,.75);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px rgba(90,120,170,.30),inset 0 1px 0 rgba(255,255,255,.95);max-width:100%}
.mock-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;
  border-bottom:1px solid rgba(20,40,80,.08);background:rgba(255,255,255,.45)}
.dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.mock-url{margin-inline-start:10px;flex:1;min-width:0;background:rgba(255,255,255,.55);
  border:1px solid rgba(20,40,80,.10);border-radius:8px;font-size:12.5px;color:#4d5c78;
  padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-body{padding:24px}
.mock-cap{font-size:12.5px;color:#7d8aa3;margin-top:14px;text-align:center;letter-spacing:.4px}

/* ---------- pipeline flow ---------- */
.flow{display:flex;align-items:stretch;gap:0}
.flow-node{flex:1;min-width:0;background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:18px 12px;text-align:center;font-size:14px;line-height:1.55;color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 26px rgba(90,120,170,.18)}
.flow-node .fn-ic{display:block;font-size:24px;margin-bottom:10px;color:#0b7cb8}
.flow-node.done{border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.14)}
.flow-node.done .fn-ic{color:#059669}
.flow-arrow{align-self:center;flex:0 0 auto;padding:0 8px;color:#0b7cb8;font-size:24px;font-weight:800;line-height:1}
[dir="rtl"] .flow-arrow{transform:scaleX(-1)}

/* live status pulse */
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34d399;
  box-shadow:0 0 14px rgba(52,211,153,.9);animation:pv-pulse 2.2s ease-in-out infinite;flex:0 0 auto}
@keyframes pv-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.status-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#7d8aa3;margin-top:14px;justify-content:center}

/* ---------- chat mock ---------- */
.chat{display:flex;flex-direction:column;gap:12px}
.bub{max-width:88%;padding:12px 16px;border-radius:16px;font-size:14.5px;line-height:1.6}
.bub.user{align-self:flex-end;background:linear-gradient(135deg,#4a5cf5 0%,#7a5cf5 100%);color:#fff;border-end-end-radius:5px;
  box-shadow:0 8px 24px rgba(88,101,245,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.bub.bot{align-self:flex-start;background:rgba(255,255,255,.85);color:#1c2942;
  border:1px solid rgba(20,40,80,.10);border-end-start-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(90,120,170,.14)}
.bub .t{display:block;font-size:11.5px;color:#7d8aa3;margin-top:6px}
.bub.user .t{color:rgba(255,255,255,.85)}
.chat-input{margin-top:14px;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.6);
  border:1px solid rgba(20,40,80,.12);border-radius:12px;padding:10px 14px;font-size:13.5px;color:#7d8aa3}
.chat-input .send{margin-inline-start:auto;color:#0b7cb8;font-weight:700}

/* ---------- big-number promise band ---------- */
.bigband{display:grid;gap:30px}
.bignum{font-size:clamp(58px,7.5vw,100px);font-weight:800;letter-spacing:-3px;line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.biglab{color:var(--mut);font-size:15.5px;margin-top:8px;max-width:300px;line-height:1.6}
.bigdiv{height:1px;background:linear-gradient(90deg,rgba(20,40,80,.18),transparent)}

/* ---------- trust checklist card ---------- */
.checkcard{background:var(--card);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:28px;
  box-shadow:var(--glass-shadow)}
.checkcard h3{font-size:17px;font-weight:800;margin-bottom:18px;letter-spacing:-.3px;color:var(--txt)}
.checkcard ul{list-style:none;display:grid;gap:14px}
.checkcard li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--txt);line-height:1.6}
.checkcard li::before{content:"✓";color:#059669;font-weight:800;flex:0 0 auto;font-size:17px;line-height:1.6}

/* ---------- horizontal timeline ---------- */
.tline{display:flex;align-items:flex-start;gap:0}
.tstep{flex:1;min-width:0;text-align:center;position:relative;padding:0 8px}
.tstep .n{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4a5cf5,#7a5cf5);color:#fff;
  font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;box-shadow:0 8px 22px rgba(88,101,245,.45),inset 0 1px 0 rgba(255,255,255,.5);position:relative;z-index:1}
.tstep .s{font-size:14.5px;font-weight:700;line-height:1.5;color:var(--txt)}
.tstep::before{content:"";position:absolute;top:23px;inset-inline-start:-50%;width:100%;
  height:2px;background:linear-gradient(90deg,transparent,rgba(20,40,80,.18),rgba(20,40,80,.18),transparent)}
.tstep:first-child::before{display:none}

/* ---------- intent cards ---------- */
.intent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.intent-card{background:var(--card);
  border:1px solid rgba(255,255,255,.65);border-radius:var(--r);
  padding:28px 24px;display:flex;flex-direction:column;gap:10px;min-width:0;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  box-shadow:var(--glass-shadow)}
.intent-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.9);
  box-shadow:0 30px 70px rgba(90,120,170,.38),inset 0 1px 0 rgba(255,255,255,1)}
.intent-card h3{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--txt)}
.intent-card p{color:var(--mut);font-size:14.5px;line-height:1.65;flex:1}
.intent-card .link-more{font-size:15px;padding:0}

/* ---------- section-end CTA ---------- */
.sec-cta{margin-top:42px}
.sec-cta.center{text-align:center}

/* ---------- mini site preview ---------- */
.ms-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#0b7cb8;margin-bottom:14px}
.minisite{border:1px solid rgba(255,255,255,.7);border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px rgba(90,120,170,.18)}
.ms-nav{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(20,40,80,.08)}
.ms-nav span{height:8px;width:52px;border-radius:4px;background:rgba(20,40,80,.14)}
.ms-nav em{margin-inline-start:auto;height:20px;width:64px;border-radius:10px;background:var(--grad);
  box-shadow:0 4px 14px rgba(88,101,245,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.ms-hero{padding:22px 18px;display:grid;gap:10px;justify-items:start}
.ms-hero b{display:block;height:16px;width:70%;border-radius:6px;background:rgba(20,40,80,.16)}
.ms-hero i{display:block;height:10px;width:88%;border-radius:5px;background:rgba(77,92,120,.35)}
.ms-hero u{display:block;height:30px;width:130px;border-radius:999px;background:var(--grad);text-decoration:none;margin-top:4px;
  box-shadow:0 6px 18px rgba(88,101,245,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.ms-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 20px}
.ms-row span{height:56px;border-radius:10px;background:rgba(255,255,255,.5);border:1px solid rgba(20,40,80,.08)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-inner{padding:130px 0 64px;min-height:0}
  .hero-split{grid-template-columns:1fr;gap:44px;padding:40px 28px;border-radius:24px}
  .hero-split::before{border-radius:25px}
  .hero-visual{max-width:560px}
  .flow{flex-direction:column;align-items:stretch}
  .flow-arrow{transform:rotate(90deg);padding:6px 0;align-self:center}
  [dir="rtl"] .flow-arrow{transform:rotate(90deg)}
  .tline{flex-direction:column;gap:22px}
  .tstep{display:flex;gap:16px;align-items:center;text-align:start;padding:0}
  .tstep .n{margin:0;flex:0 0 auto}
  .tstep::before{display:none}
  .intent-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .intent-grid{grid-template-columns:1fr}
  .mock-body{padding:18px}
  .bignum{letter-spacing:-2px}
}