/* Home v5 · 2026-10-25 · calm financial SaaS */
body[data-page="home"] {
  --hp-indigo:#3b4fe0; --hp-ink:#111827; --hp-text:#374151; --hp-mute:#6b7280;
  --hp-faint:#9ca3af; --hp-line:#ebedf5; --hp-card:#fff;
  --hp-orange:#f97316; --hp-amber:#ca8a04; --hp-green:#10b981; --hp-violet:#8b5cf6;
  background:linear-gradient(180deg,#fafbff 0%,#f3f5fa 100%); color:var(--hp-text);
  font:400 15px/1.7 var(--sans);
}
body[data-page="home"] a { text-decoration:none; }
body[data-page="home"] .container { max-width:1248px; }
body[data-page="home"] .main { position:relative; max-width:1248px; padding-top:36px; padding-bottom:88px; }
body[data-page="home"] .main::before { content:""; position:absolute; z-index:-1; width:1100px; height:680px; left:50%; top:-80px; transform:translateX(-50%); background:radial-gradient(ellipse at top,rgba(220,224,255,.88) 0%,rgba(237,239,255,.36) 38%,transparent 70%); pointer-events:none; }
body[data-page="home"] .site-header { height:72px; min-height:0; background:rgba(255,255,255,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-color:var(--hp-line); transition:box-shadow .2s,background .2s; }
body[data-page="home"] .site-header.is-scrolled { background:rgba(255,255,255,.94); box-shadow:0 4px 20px rgba(16,24,40,.05); }
body[data-page="home"] .header-inner { height:100%; gap:28px; padding-top:0; padding-bottom:0; }
body[data-page="home"] .logo { gap:10px; }
body[data-page="home"] .logo-mark, body[data-page="home"] .footer-logo .logo-mark { width:36px; height:36px; border-radius:10px; color:#fff; background:var(--hp-indigo); box-shadow:0 4px 10px rgba(59,79,224,.2); }
.logo-mark svg { display:block; width:100%; height:100%; }
body[data-page="home"] .logo-text { font:700 16px/1.2 var(--sans); letter-spacing:-.02em; color:var(--hp-ink); }
body[data-page="home"] .logo-text em { display:block; margin-top:3px; color:var(--hp-mute); font:500 10px/1 var(--sans); letter-spacing:.18em; }
body[data-page="home"] .main-nav { justify-content:center; gap:2px; flex-wrap:nowrap; }
body[data-page="home"] .main-nav a { position:relative; padding:8px 12px; font-size:13px; color:#4b5563; white-space:nowrap; }
body[data-page="home"] .main-nav a:hover { color:var(--hp-indigo); background:#f2f4ff; }
body[data-page="home"] .main-nav a.active { color:var(--hp-indigo); background:transparent; }
body[data-page="home"] .main-nav a.active::after { content:""; position:absolute; left:50%; bottom:-15px; width:18px; height:2px; border-radius:2px; background:var(--hp-indigo); transform:translateX(-50%); }
body[data-page="home"] .header-user { gap:5px; }
body[data-page="home"] .header-user .btn { border:0; font-size:13px; }
body[data-page="home"] .header-user .btn-ghost { color:var(--hp-text); }
body[data-page="home"] .header-user .btn-primary { padding:8px 15px; border-radius:8px; background:var(--hp-indigo); box-shadow:0 1px 2px rgba(59,79,224,.2),0 4px 12px rgba(59,79,224,.18); }
body[data-page="home"] .header-user .btn-primary:hover { background:#2f3fd1; }
.nav-toggle { display:none; }

.hp5-notice { display:flex; align-items:center; gap:9px; margin:0 0 -8px; padding:9px 14px; border:1px solid #e4e7f2; border-radius:10px; background:rgba(255,255,255,.72); color:var(--hp-mute); font-size:12px; }
.hp5-notice-dot { width:6px; height:6px; border-radius:50%; background:#9ca3af; }
.hp5-hero { display:grid; grid-template-columns:minmax(0,1fr) 480px; align-items:center; gap:80px; min-height:560px; padding:72px 8px 64px; }
.hp5-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border:1px solid #e0e4fc; border-radius:999px; background:#eef0ff; color:#4251bd; font-size:12px; font-weight:500; }
.hp5-eyebrow i { width:1px; height:10px; background:#cdd3f4; margin:0 2px; }
.hp5-status-dot { width:6px; height:6px; border-radius:50%; background:#5969e8; box-shadow:0 0 0 3px rgba(89,105,232,.1); }
.hp5-hero h1 { margin:24px 0 20px; color:var(--hp-ink); font:700 52px/1.18 var(--sans); letter-spacing:-.055em; }
.hp5-hero h1 span { color:var(--hp-indigo); }
.hp5-hero-sub { max-width:545px; color:var(--hp-mute); font-size:15px; line-height:1.85; }
.hp5-actions { display:flex; align-items:center; gap:12px; margin-top:30px; }
.hp5-btn { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:12px 22px; border-radius:10px; font-size:14px; font-weight:600; transition:transform .2s,box-shadow .2s,background .2s,border-color .2s; }
.hp5-btn-primary { color:#fff; background:var(--hp-indigo); box-shadow:0 1px 2px rgba(59,79,224,.2),0 4px 12px rgba(59,79,224,.25); }
.hp5-btn-primary:hover { color:#fff; background:#2f3fd1; transform:translateY(-1px); box-shadow:0 6px 18px rgba(59,79,224,.28); }
.hp5-btn-primary span { font-size:18px; font-weight:400; }
.hp5-btn-secondary { color:var(--hp-text); background:#fff; border:1px solid #dfe3ed; }
.hp5-btn-secondary:hover { color:var(--hp-indigo); border-color:#b9c1ef; background:#fafaff; }
.hp5-proof { display:flex; align-items:center; gap:10px; margin-top:18px; color:var(--hp-faint); font-size:12px; }
.hp5-proof i { width:3px; height:3px; border-radius:50%; background:#c2c7d1; }
.hp5-hero-panel { position:relative; padding:24px; border:1px solid rgba(225,228,240,.9); border-radius:20px; background:rgba(255,255,255,.9); box-shadow:0 2px 4px rgba(16,24,40,.02),0 20px 50px rgba(36,45,85,.08); backdrop-filter:blur(8px); }
.hp5-hero-panel::before { content:""; position:absolute; inset:-9px; z-index:-1; border:1px solid rgba(225,228,240,.5); border-radius:26px; background:rgba(255,255,255,.25); }
.hp5-panel-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.hp5-panel-top>div { display:flex; flex-direction:column; }
.hp5-panel-label,.hp5-kicker { color:#8a91a4; font:600 10px/1.4 var(--sans); letter-spacing:.16em; }
.hp5-panel-top strong { margin-top:4px; color:var(--hp-ink); font-size:17px; font-weight:650; }
.hp5-panel-date { display:flex; flex-direction:column; align-items:flex-end; color:var(--hp-text); font:600 12px/1.4 var(--mono); font-variant-numeric:tabular-nums; }
.hp5-panel-date small { color:var(--hp-faint); font:400 11px/1.6 var(--sans); }
.hp5-panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hp5-panel-stat { position:relative; min-width:0; padding:16px 17px 14px; overflow:hidden; border:1px solid #edf0f5; border-radius:12px; background:#fafbfc; transition:transform .2s,border-color .2s,box-shadow .2s; }
.hp5-panel-stat:hover { transform:translateY(-2px); border-color:#dfe3ef; box-shadow:0 8px 16px rgba(16,24,40,.05); }
.hp5-panel-stat>span { display:flex; align-items:center; gap:7px; color:var(--hp-mute); font-size:12px; }
.hp5-panel-stat>span i { width:6px; height:6px; border-radius:2px; background:currentColor; }
.hp5-panel-stat b { display:block; margin-top:8px; color:var(--hp-ink); font:750 36px/1.1 var(--mono); letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.hp5-panel-stat small { display:block; margin-top:8px; color:var(--hp-faint); font-size:10px; }
.hp5-tone-1 { --tone:#f97316; --tone-bg:#fff3e8; --tone-rgb:249,115,22; }
.hp5-tone-2 { --tone:#e87924; --tone-bg:#fff3e8; --tone-rgb:232,121,36; }
.hp5-tone-3 { --tone:#ca8a04; --tone-bg:#fef9c3; --tone-rgb:202,138,4; }
.hp5-tone-4 { --tone:#10b981; --tone-bg:#d1fae5; --tone-rgb:16,185,129; }
.hp5-panel-stat>span i { color:var(--tone); }
.hp5-panel-foot { display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:15px; border-top:1px solid var(--hp-line); color:var(--hp-faint); font-size:10px; }
.hp5-panel-foot>span:first-child { display:flex; align-items:center; gap:6px; }
.hp5-panel-foot i { width:5px; height:5px; border-radius:50%; background:#10b981; }
.hp5-panel-empty { padding:60px 20px; text-align:center; color:var(--hp-mute); }

.hp5-section { margin-top:56px; }
.hp5-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.hp5-section-head h2 { margin-top:5px; color:var(--hp-ink); font-size:26px; line-height:1.35; font-weight:700; letter-spacing:-.035em; }
.hp5-section-head h2 span { color:var(--hp-mute); font-size:16px; font-weight:500; letter-spacing:-.01em; }
.hp5-section-head>a { display:flex; align-items:center; gap:14px; padding-bottom:3px; color:var(--hp-mute); font-size:13px; }
.hp5-section-head>a:hover { color:var(--hp-indigo); }
.hp5-section-note { color:var(--hp-faint); font-size:12px; }
.hp5-signals { margin-top:8px; }
.hp5-signal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.hp5-signal-card { position:relative; min-width:0; overflow:hidden; padding:20px 20px 16px; border:1px solid rgba(232,235,243,.9); border-radius:16px; background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.035); transition:transform .2s,box-shadow .2s,border-color .2s; }
.hp5-signal-card:hover { transform:translateY(-4px); border-color:rgba(var(--tone-rgb),.22); box-shadow:0 4px 8px rgba(16,24,40,.06),0 16px 32px rgba(16,24,40,.07); }
.hp5-signal-top { display:flex; justify-content:space-between; align-items:center; }
.hp5-signal-tag { display:inline-flex; padding:3px 9px; border-radius:999px; color:var(--tone); background:var(--tone-bg); font-size:11px; font-weight:600; }
.hp5-arrow { color:#c0c5cf; font-size:15px; transition:color .2s,transform .2s; }
.hp5-signal-card:hover .hp5-arrow { color:var(--tone); transform:translate(2px,-2px); }
.hp5-signal-value { display:flex; align-items:baseline; gap:7px; margin-top:15px; }
.hp5-signal-value b { color:var(--hp-ink); font:800 48px/1 var(--mono); letter-spacing:-.065em; font-variant-numeric:tabular-nums; }
.hp5-signal-value small { color:var(--hp-faint); font-size:11px; }
.hp5-signal-meta { display:flex; justify-content:space-between; align-items:center; margin:22px 0 9px; padding-top:12px; border-top:1px solid #f0f1f5; color:var(--hp-faint); font-size:9px; }
.hp5-signal-meta span:last-child { color:var(--tone); font:500 9px var(--mono); letter-spacing:.08em; opacity:.75; }
.hp5-signal-note { color:var(--hp-faint); font-size:10px; }
.hp5-empty { padding:40px; border:1px dashed #dfe3ed; border-radius:16px; text-align:center; color:var(--hp-mute); }

.hp5-resonance { display:flex; align-items:center; gap:20px; margin-top:28px; padding:25px 28px; border:1px solid #e4ddf8; border-radius:16px; background:linear-gradient(135deg,#ede9fe 0%,#f5f3ff 100%); }
.hp5-resonance-icon { display:flex; align-items:center; justify-content:center; flex:none; width:50px; height:50px; border-radius:14px; color:#7c5ce0; background:rgba(255,255,255,.65); }
.hp5-resonance-icon svg { width:30px; height:30px; }
.hp5-resonance-copy { flex:1; }
.hp5-resonance-copy .hp5-kicker { color:#8b75c4; }
.hp5-resonance h2 { margin-top:2px; color:#35285b; font-size:19px; font-weight:700; letter-spacing:-.02em; }
.hp5-resonance p { margin-top:4px; color:#746790; font-size:12px; }
.hp5-resonance-link { display:flex; align-items:center; gap:20px; flex:none; padding:10px 15px; border:1px solid rgba(124,92,224,.16); border-radius:9px; color:#6948c7; background:rgba(255,255,255,.6); font-size:12px; font-weight:600; transition:background .2s,transform .2s; }
.hp5-resonance-link:hover { background:#fff; transform:translateX(2px); }

.hp5-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.hp5-category-card { --cat:#3b4fe0; --cat-bg:#eef0ff; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #e9ecf3; border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.035); transition:transform .2s,box-shadow .2s; }
.hp5-category-card:hover { transform:translateY(-4px); box-shadow:0 4px 8px rgba(16,24,40,.06),0 16px 32px rgba(16,24,40,.07); }
.hp5-cat-guping { --cat:#ec4899; --cat-bg:#fce7f3; }
.hp5-cat-xuangu { --cat:#10b981; --cat-bg:#d1fae5; }
.hp5-cat-guanzhu { --cat:#d69e12; --cat-bg:#fef9c3; }
.hp5-category-main { flex:1; padding:22px 22px 18px; }
.hp5-category-top { display:flex; align-items:center; justify-content:space-between; }
.hp5-category-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; color:var(--cat); background:var(--cat-bg); font-size:13px; }
.hp5-category-count { color:var(--hp-faint); font:500 11px var(--mono); }
.hp5-category-card h3 { margin-top:20px; color:var(--hp-ink); font-size:18px; font-weight:650; }
.hp5-category-card p { margin-top:8px; min-height:67px; color:var(--hp-mute); font-size:12px; line-height:1.85; }
.hp5-category-latest { position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 36px 15px 22px; border-top:1px solid #f0f1f5; background:#fcfcfe; transition:background .2s; }
.hp5-category-latest:hover { background:var(--cat-bg); }
.hp5-category-latest span { color:var(--hp-faint); font-size:10px; }
.hp5-category-latest strong { overflow:hidden; color:var(--hp-text); font-size:11px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
.hp5-category-latest i { position:absolute; right:18px; top:50%; color:var(--cat); font-style:normal; transform:translateY(-50%); }

.hp5-recent-list { overflow:hidden; border:1px solid #e9ecf3; border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.hp5-recent-row { display:flex; align-items:center; gap:18px; min-height:62px; padding:12px 20px; border-bottom:1px solid #f0f1f5; transition:background .15s; }
.hp5-recent-row:last-child { border-bottom:0; }
.hp5-recent-row:hover { background:#f9fafb; }
.hp5-recent-row time { flex:none; padding:3px 9px; border-radius:6px; color:#7a8190; background:#f3f4f6; font:500 11px var(--mono); font-variant-numeric:tabular-nums; }
.hp5-recent-title { flex:1; min-width:0; overflow:hidden; color:var(--hp-ink); font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.hp5-recent-cat { flex:none; min-width:58px; padding:2px 8px; border-radius:999px; text-align:center; color:#3b4fe0; background:#eef0ff; font-size:10px; }
.hp5-badge-guping { color:#db2777; background:#fce7f3; }
.hp5-badge-xuangu { color:#059669; background:#d1fae5; }
.hp5-badge-guanzhu { color:#a16207; background:#fef9c3; }
.hp5-recent-row>i { color:#bdc2cc; font-style:normal; }

.hp5-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:64px; padding:28px 4px 0; border-top:1px solid #e4e7ef; }
.hp5-trust>div { display:grid; grid-template-columns:30px 1fr; column-gap:10px; }
.hp5-trust-icon { grid-row:span 2; color:#a2a9ba; font:500 11px var(--mono); }
.hp5-trust h3 { color:var(--hp-text); font-size:12px; font-weight:650; }
.hp5-trust p { margin-top:4px; color:var(--hp-faint); font-size:11px; line-height:1.8; }

body[data-page="home"] .site-footer { background:#f3f4f6; border-top:1px solid #e5e7eb; }
body[data-page="home"] .footer-logo-text,body[data-page="home"] .footer-col h4 { font-family:var(--sans); }
body[data-page="home"] .footer-bottom { color:#8a919d; }
.hp5-reveal { opacity:0; transform:translateY(12px); transition:opacity .45s ease,transform .45s ease; }
.hp5-reveal.is-visible { opacity:1; transform:none; }

@media(max-width:1120px){
  .hp5-hero { grid-template-columns:minmax(0,1fr) 430px; gap:40px; }
  .hp5-hero h1 { font-size:46px; }
  body[data-page="home"] .main-nav a { padding:8px; font-size:12px; }
  body[data-page="home"] .logo-text em { display:none; }
}
@media(max-width:960px){
  body[data-page="home"] .site-header { height:64px; min-height:0; }
  body[data-page="home"] .header-inner { flex-wrap:nowrap; gap:12px; padding-top:0; padding-bottom:0; }
  body[data-page="home"] .main-nav { display:none; position:absolute; left:16px; right:16px; top:64px; width:auto; flex:none; order:initial; overflow:visible; padding:10px; border:1px solid var(--hp-line); border-radius:12px; background:rgba(255,255,255,.98); box-shadow:0 16px 32px rgba(16,24,40,.12); }
  body[data-page="home"] .main-nav.is-open { display:grid; grid-template-columns:1fr 1fr; }
  body[data-page="home"] .main-nav a { padding:11px 12px; font-size:13px; }
  body[data-page="home"] .main-nav a.active::after { display:none; }
  body[data-page="home"] .header-user { margin-left:auto; }
  body[data-page="home"] .nav-toggle { display:flex; flex-direction:column; justify-content:center; gap:4px; width:36px; height:36px; padding:8px; border:1px solid var(--hp-line); border-radius:8px; background:#fff; }
  .nav-toggle span { width:100%; height:1.5px; border-radius:2px; background:#4b5563; }
  .hp5-hero { grid-template-columns:1fr; gap:42px; padding-top:58px; }
  .hp5-hero-copy { max-width:650px; }
  .hp5-hero-panel { max-width:600px; width:100%; }
  .hp5-signal-grid,.hp5-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp5-category-card p { min-height:44px; }
}
@media(max-width:640px){
  body[data-page="home"] .container { padding-left:18px; padding-right:18px; }
  body[data-page="home"] .main { width:100%; margin-left:auto; margin-right:auto; padding-top:24px; padding-left:18px; padding-right:18px; padding-bottom:56px; }
  body[data-page="home"] .main-nav { top:64px; }
  body[data-page="home"] .header-user { display:none; }
  body[data-page="home"] .nav-toggle { position:absolute; right:18px; top:14px; }
  body[data-page="home"] .header-user .btn-primary { padding:7px 11px; font-size:11px; }
  body[data-page="home"] .logo-text { font-size:14px; }
  body[data-page="home"] .logo-mark { width:32px; height:32px; }
  .hp5-hero { min-height:0; padding:42px 0 52px; gap:34px; }
  .hp5-eyebrow { font-size:10px; }
  .hp5-hero h1 { margin:20px 0 16px; font-size:38px; line-height:1.22; }
  .hp5-hero-sub { font-size:13px; line-height:1.85; }
  .hp5-actions { flex-direction:column; align-items:stretch; margin-top:24px; }
  .hp5-btn { width:100%; min-height:46px; font-size:13px; }
  .hp5-proof { justify-content:center; gap:7px; font-size:10px; }
  .hp5-hero-panel { padding:17px; border-radius:16px; }
  .hp5-panel-stat { padding:14px; }
  .hp5-panel-stat b { font-size:32px; }
  .hp5-panel-foot { font-size:9px; }
  .hp5-section { margin-top:44px; }
  .hp5-section-head { align-items:flex-start; margin-bottom:17px; }
  .hp5-section-head h2 { font-size:22px; }
  .hp5-section-head h2 span { display:block; margin-top:3px; font-size:12px; }
  .hp5-section-head>a { padding-top:22px; font-size:11px; white-space:nowrap; }
  .hp5-section-note { display:none; }
  .hp5-signal-grid { gap:12px; }
  .hp5-signal-card { padding:15px 15px 13px; }
  .hp5-signal-value b { font-size:38px; }
  .hp5-signal-note { font-size:9px; }
  .hp5-signal-meta { margin-top:18px; }
  .hp5-resonance { align-items:flex-start; flex-wrap:wrap; gap:14px; padding:20px; }
  .hp5-resonance-icon { width:40px; height:40px; }
  .hp5-resonance-copy { min-width:calc(100% - 60px); }
  .hp5-resonance h2 { font-size:17px; }
  .hp5-resonance p { font-size:11px; }
  .hp5-resonance-link { width:100%; justify-content:space-between; }
  .hp5-category-grid { grid-template-columns:1fr; gap:12px; }
  .hp5-category-card p { min-height:0; }
  .hp5-category-main { padding:18px; }
  .hp5-category-card h3 { margin-top:14px; }
  .hp5-category-latest { padding-left:18px; }
  .hp5-recent-row { gap:10px; min-height:60px; padding:11px 13px; }
  .hp5-recent-row time { padding:3px 6px; font-size:9px; }
  .hp5-recent-title { font-size:12px; }
  .hp5-recent-cat { min-width:0; font-size:9px; }
  .hp5-recent-row>i { display:none; }
  .hp5-trust { grid-template-columns:1fr; gap:20px; margin-top:44px; }
}
@media(prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .hp5-reveal { opacity:1; transform:none; transition:none; }
  .hp5-signal-card,.hp5-category-card,.hp5-btn,.hp5-panel-stat { transition:none; }
}
