/* ==========================================================================
   Topxxx 官网样式 · 依据 DESIGN.md 设计规范实现
   品牌主色 #EA7F53 / 中性色体系 / 金融级等宽数字 / WCAG 对比度
   ========================================================================== */
:root{
  /* 色彩令牌（DESIGN.md §2） */
  --brand:        #EA7F53;
  --brand-soft:   #F8E9E3;
  --brand-deep:   #D46F45;
  --brand-active: #C05F37;
  --bg:           #F5F7FA;
  --bg-deep:      #EAE9E7;
  --surface:      #FFFFFF;
  --ink:          #1F2937;
  --muted:        #4B5563;
  --border:       #E5E7EB;
  --ok:           #10B981;
  --warn:         #F59E0B;
  --err:          #EF4444;
  --info:         #3B82F6;
  --brand-ring:   rgba(234,127,83,.2);
  --brand-ghost:  rgba(234,127,83,.5);
  --on-brand:     #FFFFFF;
  --border-deep:  #DCD9D5;

  /* 字体角色（DESIGN.md §3：正文无衬线，金融数据等宽） */
  --font-body: "Noto Sans SC Variable","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono: "Roboto Mono Variable","Roboto Mono",Consolas,"SF Mono",Menlo,monospace;

  /* 尺度（4px 基础单位，§5.2） */
  --container: 1200px;
  --radius: 8px;
  --radius-card: 12px;
  --shadow-card: 0 2px 8px rgba(0,0,0,.08);
  --shadow-pop: 0 12px 40px rgba(31,41,55,.14);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; margin:0; font-weight:600; }
.num,.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
:focus-visible{ outline:2px solid var(--brand-deep); outline-offset:2px; border-radius:4px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:48px; }
@media (max-width:1200px){ .container{ padding-inline:32px; } }
@media (max-width:768px){ .container{ padding-inline:16px; } }

.section{ padding-block:96px; }
@media (max-width:768px){ .section{ padding-block:64px; } }

/* ── 标题层级（DESIGN.md §3.3：大标题32/中24/小18/正文16/辅助14/微型12） ── */
.eyebrow{
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-size:12px; font-weight:500; letter-spacing:.14em; color:var(--muted);
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--brand); flex:none; }
.h1{ font-size:32px; line-height:1.3; letter-spacing:-.01em; }
.h2{ font-size:24px; line-height:1.35; }
.h3{ font-size:18px; font-weight:500; line-height:1.4; }
.lead{ font-size:16px; color:var(--muted); max-width:44em; margin:0; }
.micro{ font-size:12px; color:var(--muted); }
@media (max-width:768px){
  .h1{ font-size:28px; } .h2{ font-size:20px; } .h3{ font-size:16px; }
}
[data-lang="en"] .h1{ font-size:36px; line-height:1.2; }
[data-lang="en"] .h2{ font-size:26px; }
@media (max-width:768px){ [data-lang="en"] .h1{ font-size:29px; } }

/* ── 按钮（DESIGN.md §4.1） ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 24px; border-radius:var(--radius);
  font-size:15px; font-weight:500; border:1px solid transparent;
  transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out,transform .2s ease-out;
  white-space:nowrap; user-select:none;
}
.btn svg{ width:16px; height:16px; }
.btn:hover{ transform:scale(1.02); }
.btn:active{ transform:scale(.98); transition-duration:.1s; }
.btn-primary{ background:var(--brand); color:var(--on-brand); }
.btn-primary:hover{ background:var(--brand-deep); }
.btn-primary:active{ background:var(--brand-active); }
.btn-secondary{ background:transparent; border-color:var(--brand); color:var(--brand-deep); }
.btn-secondary:hover{ border-color:var(--brand-deep); color:var(--brand-deep); background:var(--brand-soft); }
.btn-ghost{ background:transparent; color:var(--brand-deep); padding:0 8px; height:auto; }
.btn-ghost:hover{ text-decoration:underline; transform:none; }
@media (max-width:768px){ .btn{ height:48px; padding:0 28px; } .btn-ghost{ height:auto; padding:8px 0; } }

/* ── 顶部导航 ── */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s ease;
}
.topnav.is-scrolled{ box-shadow:var(--shadow-card); }
.topnav-inner{ display:flex; align-items:center; gap:32px; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand-mark{ width:32px; height:32px; }
.brand-name{ font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.mainnav{ display:flex; gap:28px; margin-inline:auto; }
.mainnav a{
  position:relative; font-size:15px; color:var(--muted); padding:6px 2px;
  transition:color .2s ease;
}
.mainnav a:hover{ color:var(--ink); }
.mainnav a[aria-current]{ color:var(--ink); font-weight:500; }
.mainnav a[aria-current]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--brand);
}
.nav-actions{ display:flex; align-items:center; gap:16px; flex:none; }
.auth-links{ display:flex; align-items:center; gap:4px; font-size:14px; }
.auth-links button{ border:0; background:transparent; color:var(--muted); padding:6px 8px; transition:color .15s ease; }
.auth-links button:hover{ color:var(--ink); }
.auth-links .sep{ color:var(--border); }
.auth-links .btn-register{ color:var(--brand-deep); font-weight:500; }
.menu-toggle{ display:none; border:0; background:transparent; padding:8px; color:var(--ink); }
.menu-toggle svg{ width:22px; height:22px; }
.mobile-menu{ display:none; border-top:1px solid var(--border); background:var(--surface); padding:8px 0 16px; }
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding:12px 0; font-size:16px; color:var(--ink); border-bottom:1px solid var(--border); }
.mobile-menu .row{ display:flex; gap:12px; padding-top:16px; }
@media (max-width:1060px){
  .mainnav,.auth-links{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .topnav-inner{ gap:16px; }
  .nav-actions{ margin-left:auto; }
}

/* ── Hero ── */
.hero{ background:linear-gradient(180deg,var(--bg-deep) 0%,var(--bg) 100%); border-bottom:1px solid var(--border); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.hero-copy .h1{ margin-bottom:20px; }
.hero-copy .lead{ margin-bottom:36px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-badges{ display:flex; gap:20px; margin-top:32px; flex-wrap:wrap; }
.hero-badge{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.hero-badge svg{ width:16px; height:16px; color:var(--brand-deep); flex:none; }
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero-visual{ max-width:560px; }
}

/* ── 板块头 ── */
.sec-head{ max-width:44em; margin-bottom:48px; }
.sec-head .h2{ margin-bottom:12px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow{ justify-content:center; }
.sec-head.center .eyebrow::after{ content:""; width:24px; height:2px; background:var(--brand); }

/* ── 卡片（DESIGN.md §4.2） ── */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:24px;
}
.card-hover{ transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; }
.card-hover:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); border-color:var(--border-deep); }

.feature-icon{
  width:44px; height:44px; border-radius:10px; flex:none;
  background:var(--brand-soft); color:var(--brand-deep);
  display:grid; place-items:center; margin-bottom:20px;
}
.feature-icon svg{ width:22px; height:22px; }
.feature-title{ font-size:18px; font-weight:500; margin:0 0 10px; }
.feature-desc{ font-size:14px; line-height:1.6; color:var(--muted); margin:0; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (max-width:920px){ .grid-3{ grid-template-columns:1fr; } }
@media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } }

/* ── 解决方案预览表（金融级数据表） ── */
.sol-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); }
.sol-table th,.sol-table td{ padding:20px 24px; text-align:left; vertical-align:middle; }
.sol-table thead th{
  font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--muted);
  background:var(--bg); border-bottom:1px solid var(--border);
}
.sol-table tbody tr{ border-bottom:1px solid var(--border); transition:background .15s ease; cursor:pointer; }
.sol-table tbody tr:last-child{ border-bottom:0; }
.sol-table tbody tr:hover{ background:var(--brand-soft); }
.sol-scene{ display:flex; align-items:center; gap:12px; font-weight:500; font-size:15px; }
.sol-scene svg{ width:20px; height:20px; color:var(--brand-deep); flex:none; }
.sol-desc{ color:var(--muted); font-size:14px; }
.sol-arrow{ color:var(--brand-deep); }
.sol-arrow svg{ width:18px; height:18px; }
@media (max-width:720px){
  .sol-table thead{ display:none; }
  .sol-table tbody tr{ display:block; padding:16px 20px; }
  .sol-table td{ display:block; padding:4px 0; border:0; }
  .sol-arrow-cell{ display:none; }
}

/* ── 合规机制 ── */
.compliance-item{ display:flex; gap:20px; align-items:flex-start; }
.compliance-item .feature-icon{ margin-bottom:0; }
.compliance-item h3{ font-size:18px; font-weight:500; margin:0 0 8px; }
.compliance-item p{ font-size:14px; color:var(--muted); line-height:1.6; margin:0; }

/* ── 服务页 ── */
.svc-item{ display:grid; grid-template-columns:88px 1fr; gap:32px; padding:40px 0; border-top:1px solid var(--border); }
.svc-item:first-of-type{ border-top:0; padding-top:8px; }
.svc-num{
  font-family:var(--font-mono); font-size:44px; font-weight:500; line-height:1;
  color:var(--brand); letter-spacing:-.02em;
}
.svc-item h3{ font-size:18px; font-weight:500; margin:0 0 12px; }
.svc-item p{ color:var(--muted); margin:0; max-width:52em; }
.svc-tag{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:12px; color:var(--muted); }
.svc-tag svg{ width:14px; height:14px; color:var(--brand-deep); }
@media (max-width:720px){
  .svc-item{ grid-template-columns:1fr; gap:12px; padding:32px 0; }
  .svc-num{ font-size:32px; }
}

/* ── 解决方案页 ── */
.industry{ display:grid; grid-template-columns:280px 1fr; gap:48px; padding:48px 0; border-top:1px solid var(--border); }
.industry:first-of-type{ border-top:0; padding-top:16px; }
.industry-head{ position:sticky; top:96px; align-self:start; }
.industry-head .feature-icon{ margin-bottom:16px; }
.industry-head h3{ font-size:18px; font-weight:600; margin:0 0 10px; }
.industry-head .lead{ font-size:14px; }
.cap-list{ display:grid; gap:16px; }
.cap{
  display:flex; gap:16px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-card); padding:20px 24px;
  box-shadow:var(--shadow-card);
}
.cap-check{ width:22px; height:22px; flex:none; margin-top:2px; color:var(--ok); }
.cap-check svg{ width:22px; height:22px; }
.cap h4{ font-size:15px; font-weight:500; margin:0 0 6px; }
.cap p{ font-size:14px; color:var(--muted); margin:0; line-height:1.6; }
@media (max-width:920px){
  .industry{ grid-template-columns:1fr; gap:24px; padding:40px 0; }
  .industry-head{ position:static; }
}

/* ── 关于我们 ── */
.about-prose{ max-width:52em; }
.about-prose p{ margin:0 0 20px; color:var(--muted); line-height:1.75; }
.about-prose p:first-of-type{ color:var(--ink); font-size:17px; }
.vm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.vm-card{ border-top:2px solid var(--brand); }
.vm-card h3{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:500; margin:0 0 12px; }
.vm-card h3 svg{ width:20px; height:20px; color:var(--brand-deep); }
.vm-card p{ font-size:14px; color:var(--muted); line-height:1.7; margin:0; }
.principle-band{
  margin-top:48px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:32px;
  display:flex; gap:24px; align-items:center;
}
.principle-band .feature-icon{ margin:0; }
.principle-band p{ margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
.principle-band strong{ color:var(--ink); font-weight:600; }
@media (max-width:720px){ .vm-grid{ grid-template-columns:1fr; } .principle-band{ flex-direction:column; align-items:flex-start; } }

/* ── 法律页面 ── */
.legal-wrap{ max-width:760px; margin-inline:auto; }
.legal-effective{
  display:inline-flex; align-items:center; gap:8px; margin:16px 0 40px; padding:8px 14px;
  background:var(--brand-soft); border-radius:var(--radius);
  font-size:13px; color:var(--brand-deep);
}
.legal-effective svg{ width:15px; height:15px; }
.legal-sec{ margin-bottom:40px; }
.legal-sec h2{ font-size:18px; font-weight:600; margin:0 0 16px; padding-left:14px; border-left:3px solid var(--brand); }
.legal-sec ol{ margin:0; padding-left:0; list-style:none; counter-reset:li; }
.legal-sec ol > li{
  counter-increment:li; position:relative; padding-left:36px; margin-bottom:12px;
  color:var(--muted); font-size:15px; line-height:1.75;
}
.legal-sec ol > li::before{
  content:counter(li) "."; position:absolute; left:8px; top:0;
  font-family:var(--font-mono); font-size:13px; color:var(--brand-deep);
}
.legal-intro{ color:var(--muted); line-height:1.75; margin:0 0 32px; }

/* ── CTA 横带 ── */
.cta-band{
  background:var(--ink); color:var(--on-brand); border-radius:var(--radius-card);
  padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:32px;
  box-shadow:var(--shadow-pop);
}
.cta-band h2{ font-size:24px; font-weight:600; margin:0 0 10px; }
.cta-band p{ margin:0; color:rgba(255,255,255,.72); font-size:14px; }
@media (max-width:820px){
  .cta-band{ flex-direction:column; align-items:flex-start; padding:40px 28px; }
}

/* ── 页脚 ── */
.footer{ background:var(--bg-deep); border-top:1px solid var(--border); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; padding:64px 0 40px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ font-size:13px; color:var(--muted); line-height:1.7; margin:0; }
.footer h4{ font-size:14px; font-weight:600; margin:0 0 16px; color:var(--ink); }
.footer-col a,.footer-col button{
  display:block; border:0; background:transparent; padding:0; margin-bottom:10px;
  font-size:13px; color:var(--muted); text-align:left; transition:color .15s ease;
}
.footer-col a:hover,.footer-col button:hover{ color:var(--brand-deep); }
.social-row{ display:flex; gap:10px; }
.social-row a{
  width:34px; height:34px; border:1px solid var(--border); border-radius:8px;
  display:grid; place-items:center; color:var(--muted); background:var(--surface);
  transition:color .15s ease,border-color .15s ease;
}
.social-row a:hover{ color:var(--brand-deep); border-color:var(--brand); }
.social-row svg{ width:16px; height:16px; }
.footer-legal{
  border-top:1px solid var(--border-deep); padding:24px 0 32px;
  display:flex; flex-direction:column; gap:10px;
}
.footer-legal p{ margin:0; font-size:12px; color:var(--muted); line-height:1.7; }
.footer-legal .copyright{ font-family:var(--font-mono); }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ── 弹窗（登录/注册/联系） ── */
.modal-backdrop{
  position:fixed; inset:0; z-index:100; background:rgba(31,41,55,.45);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--shadow-pop);
  width:100%; max-width:440px; padding:32px; position:relative;
  animation:modalIn .2s ease-out; max-height:90vh; overflow:auto;
}
@keyframes modalIn{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:scale(1); } }
.modal-close{
  position:absolute; top:16px; right:16px; border:0; background:transparent;
  color:var(--muted); padding:6px; border-radius:6px;
}
.modal-close:hover{ color:var(--ink); background:var(--bg); }
.modal-close svg{ width:18px; height:18px; }
.modal h3{ font-size:20px; font-weight:600; margin:0 0 6px; }
.modal .modal-sub{ font-size:13px; color:var(--muted); margin:0 0 24px; }
.modal-tabs{ display:flex; border-bottom:1px solid var(--border); margin-bottom:24px; }
.modal-tabs button{
  border:0; background:transparent; padding:10px 4px; margin-right:24px; font-size:15px;
  color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.modal-tabs button[aria-selected="true"]{ color:var(--ink); font-weight:500; border-bottom-color:var(--brand); }

/* 表单（DESIGN.md §4.3） */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:14px; color:var(--muted); margin-bottom:8px; }
.field input,.field textarea,.field select{
  width:100%; border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 16px; font:inherit; font-size:15px; color:var(--ink); background:var(--surface);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--brand); border-width:1.5px; padding:11.5px 15.5px;
  box-shadow:0 0 0 2px var(--brand-ring);
}
.field textarea{ resize:vertical; min-height:96px; }
.field-error{ display:none; align-items:center; gap:6px; margin-top:8px; font-size:14px; color:var(--err); }
.field-error svg{ width:14px; height:14px; flex:none; }
.field.invalid input,.field.invalid textarea{ border-color:var(--err); }
.field.invalid .field-error{ display:flex; }
.form-success{ text-align:center; padding:24px 0 8px; }
.form-success .ok-icon{
  width:56px; height:56px; border-radius:50%; background:var(--ok); color:var(--on-brand);
  display:grid; place-items:center; margin:0 auto 20px;
}
.form-success .ok-icon svg{ width:26px; height:26px; }
.form-success h4{ font-size:18px; margin:0 0 8px; }
.form-success p{ font-size:14px; color:var(--muted); margin:0 0 8px; }
.form-success .ref{ font-family:var(--font-mono); font-size:13px; color:var(--ink); }

/* ── 动效（克制：仅入场渐显，§6） ── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease-out,transform .5s ease-out; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Hero SVG 网络动画 */
@keyframes dashFlow{ to{ stroke-dashoffset:-28; } }
.hero-net .flow{ stroke-dasharray:4 10; animation:dashFlow 2.4s linear infinite; }
.hero-net .pulse{ animation:nodePulse 2.8s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes nodePulse{ 0%,100%{ opacity:.35; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.35); } }

/* 工具类 */
.section-alt{ background:var(--surface); border-block:1px solid var(--border); }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; } .mt-48{ margin-top:48px; }

/* ── 多页面站点补充 ── */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--brand); color:var(--on-brand); padding:8px 16px; border-radius:0 0 8px 0; font-size:14px; }
.skip:focus{ left:0; }
.mainnav button{ position:relative; border:0; background:transparent; padding:6px 2px; font-size:15px; color:var(--muted); transition:color .2s ease; }
.mainnav button:hover{ color:var(--ink); }
.mobile-menu .mm-link{ display:block; width:100%; text-align:left; padding:12px 0; font-size:16px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--border); }
.modal-pane[hidden],form[hidden]{ display:none; }
.sub-list{ padding-left:8px; }
.industry{ scroll-margin-top:88px; }
.social-row button{ width:34px; height:34px; border:1px solid var(--border); border-radius:8px; display:grid; place-items:center; color:var(--muted); background:var(--surface); transition:color .15s ease,border-color .15s ease; }
.social-row button:hover{ color:var(--brand-deep); border-color:var(--brand); }
.social-row svg{ width:16px; height:16px; }
.footer-col button .micro{ margin-left:4px; }
#toast{ position:fixed; left:50%; bottom:32px; transform:translate(-50%,8px); background:var(--ink); color:var(--on-brand); padding:12px 20px; border-radius:8px; font-size:13px; line-height:1.5; opacity:0; pointer-events:none; transition:opacity .25s ease,transform .25s ease; z-index:120; box-shadow:var(--shadow-pop); max-width:calc(100vw - 32px); }
#toast.show{ opacity:1; transform:translate(-50%,0); }