/* 关于平台页（views/about.ejs），样式来自 关于平台.html */
/* ============ Token（沿用原「企业实体诚信馆」设计稿的视觉体系） ============ */
:root{
  --bg:#05080f; --bg-2:#0a1220; --bg-3:#0e1830;
  --panel:rgba(255,255,255,.032); --panel-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --ink:#e9eff9; --ink-2:#8fa0bc; --ink-3:#5d6f8f;
  --gold:#c9a45c; --gold-2:#e9d18f; --teal:#37c6b8; --green:#2fbf8f; --blue:#4e8df5;
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 20px 60px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.bg-veil{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(201,164,92,.14), transparent 62%),
    radial-gradient(760px 420px at 8% 4%, rgba(55,198,184,.10), transparent 60%),
    radial-gradient(1000px 700px at 50% 118%, rgba(78,141,245,.08), transparent 65%),
    linear-gradient(180deg,#05080f 0%,#070d1a 45%,#05080f 100%);
}
.bg-grid{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font-family:inherit; cursor:pointer}
.wrap{max-width:1200px; margin:0 auto; padding:0 20px}

/* ============ 顶部导航 ============ */
.nav{position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(5,8,15,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);}
.nav-in{max-width:1200px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:.06em; white-space:nowrap}
.brand-seal{width:34px; height:34px; flex:none; filter:drop-shadow(0 0 10px rgba(201,164,92,.35))}
.brand small{display:block; font-family:var(--sans); font-size:10px; letter-spacing:.32em; color:var(--gold); font-weight:500; margin-top:2px}
.nav-links{display:none; margin-left:auto; align-items:center; gap:4px}
.nav-links a{padding:8px 14px; border-radius:8px; font-size:14px; color:var(--ink-2); transition:color .2s, background .2s}
.nav-links a:hover{color:var(--ink); background:var(--panel-2)}
.nav-cta{margin-left:auto; display:none; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--line-2); border-radius:999px; font-size:13px; color:var(--gold-2); background:rgba(201,164,92,.08); white-space:nowrap}
.nav-cta .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============ Hero ============ */
.hero{position:relative; padding:118px 0 56px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(620px 340px at 18% 20%, rgba(55,198,184,.10), transparent 65%),
             radial-gradient(560px 320px at 85% 30%, rgba(201,164,92,.12), transparent 65%);}
.hero-eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.28em; color:var(--gold); border:1px solid rgba(201,164,92,.35); background:rgba(201,164,92,.08); padding:7px 16px; border-radius:999px; margin-bottom:26px}
.hero-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 10px var(--gold)}
.hero-name{font-family:var(--serif); font-weight:900; font-size:clamp(30px,6vw,56px); line-height:1.16; letter-spacing:.02em;
  background:linear-gradient(135deg,#f6e7c2 0%,#c9a45c 45%,#8a6a2f 75%,#ead29a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 30px rgba(201,164,92,.28))}
.hero-slogan{margin-top:20px; font-family:var(--serif); font-weight:700; font-size:clamp(17px,2.7vw,25px); letter-spacing:.2em; text-indent:.2em; color:var(--teal)}
.hero-slogan .th{color:var(--gold-2)}
.hero-tagline{margin-top:12px; font-family:var(--serif); font-weight:700; font-size:clamp(13px,1.7vw,16px); letter-spacing:.4em; text-indent:.4em; color:var(--ink-2)}
.hero-sub{margin-top:18px; max-width:640px; color:var(--ink-2); font-size:15px}
.hero-meta{margin-top:30px; display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px; border:1px solid var(--line-2); background:var(--panel); font-size:13px; color:var(--ink-2)}
.chip b{color:var(--ink); font-weight:500}
.chip .ok-ic{width:13px; height:13px; flex:none; color:var(--green)}
.chip .usr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:var(--ink-2); letter-spacing:.02em}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:44px}
.stat{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 18px; overflow:hidden}
.stat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--gold),var(--teal)); opacity:.8}
.stat .num{font-family:var(--serif); font-weight:900; font-size:clamp(26px,4.4vw,38px); line-height:1.1; color:var(--gold-2)}
.stat .num em{font-style:normal; font-size:.55em; color:var(--ink-3); margin-left:2px}
.stat .lab{margin-top:6px; font-size:12.5px; color:var(--ink-2)}
.stat .tag{display:inline-block; margin-top:8px; font-size:11px; padding:3px 9px; border-radius:6px; border:1px solid rgba(47,191,143,.35); color:var(--green); background:rgba(47,191,143,.08)}

/* ============ 通用区块 ============ */
section{position:relative; padding:64px 0}
.sec-head{margin-bottom:34px}
.sec-kicker{display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.3em; color:var(--gold); margin-bottom:12px}
.sec-kicker::after{content:""; height:1px; flex:0 0 44px; background:linear-gradient(90deg,var(--gold),transparent)}
.sec-title{font-family:var(--serif); font-weight:700; font-size:clamp(22px,3.4vw,32px); line-height:1.3; letter-spacing:.02em}
.sec-desc{margin-top:10px; max-width:720px; color:var(--ink-2); font-size:14px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.card:hover{border-color:var(--line-2); box-shadow:var(--shadow)}

/* ============ 平台介绍区 ============ */
.about-grid{display:grid; grid-template-columns:1fr; gap:16px}
.about-main{padding:28px}
.about-head{border-bottom:1px dashed var(--line); padding-bottom:20px}
.about-head h2{font-family:var(--serif); font-weight:900; font-size:clamp(21px,3vw,27px); letter-spacing:.02em}
.about-head .tagline{margin-top:6px; font-size:13px; color:var(--teal); letter-spacing:.06em}
.about-body{margin-top:8px}
.about-body p{font-size:14px; color:var(--ink-2); margin-top:14px}
.about-body p b{color:var(--ink); font-weight:500}
.about-body .hl{color:var(--gold-2)}
.about-side{display:grid; grid-template-columns:1fr; gap:16px}
.op-card{padding:24px}
.op-card h3{font-family:var(--serif); font-weight:700; font-size:16px; margin-bottom:16px; display:flex; align-items:center; gap:9px}
.op-card h3 svg{width:17px;height:17px;color:var(--gold)}
.op-field{padding:12px 0; border-bottom:1px solid var(--line)}
.op-field:last-child{border-bottom:none}
.op-field .k{font-size:11.5px; letter-spacing:.14em; color:var(--ink-3)}
.op-field .v{font-size:14.5px; color:var(--ink); margin-top:3px; word-break:break-all}
.op-field .v a{color:var(--teal)}
.op-field .src{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); margin-top:6px; flex-wrap:wrap}
.src-pill{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:6px; font-size:11px; border:1px solid rgba(201,164,92,.35); color:var(--gold-2); background:rgba(201,164,92,.07); white-space:nowrap}
.src-pill svg{width:10px; height:10px; flex:none; color:var(--green)}
.op-note{margin-top:14px; font-size:12px; color:var(--ink-3); line-height:1.7; border-top:1px dashed var(--line); padding-top:14px}

/* ============ 核验体系 ============ */
.sys-grid{display:grid; grid-template-columns:1fr; gap:16px}
.sys-card{padding:26px 24px; position:relative; overflow:hidden}
.sys-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold)}
.sys-card[data-tone="teal"]::before{background:var(--teal)}
.sys-card[data-tone="blue"]::before{background:var(--blue)}
.sys-no{font-family:var(--serif); font-weight:900; font-size:15px; color:var(--gold); letter-spacing:.1em}
.sys-card h3{margin:10px 0 10px; font-family:var(--serif); font-weight:700; font-size:18px}
.sys-card p{font-size:13.5px; color:var(--ink-2)}
.sys-card ul{margin-top:12px; padding-left:18px; font-size:12.5px; color:var(--ink-2); display:grid; gap:6px}
.sys-card ul li::marker{color:var(--gold)}

/* ============ 认领承诺与流程 ============ */
.promise{position:relative; overflow:hidden; padding:30px 28px; display:flex; flex-direction:column; gap:6px; border-radius:var(--r-lg); border:1px solid rgba(201,164,92,.4); background:linear-gradient(135deg,rgba(201,164,92,.12),rgba(55,198,184,.06) 60%,rgba(5,8,15,0));}
.promise::after{content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(201,164,92,.18),transparent 70%); pointer-events:none}
.promise .p-kicker{font-size:11.5px; letter-spacing:.3em; color:var(--gold-2)}
.promise h3{font-family:var(--serif); font-weight:900; font-size:clamp(20px,3vw,28px); letter-spacing:.04em}
.promise h3 em{font-style:normal; color:var(--gold-2)}
.promise p{font-size:13.5px; color:var(--ink-2); max-width:680px}
.promise .p-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.p-tag{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--panel); color:var(--ink-2)}
.p-tag svg{width:12px;height:12px;color:var(--green)}
.steps{margin-top:16px; display:grid; grid-template-columns:1fr; gap:14px}
.step{position:relative; padding:20px 20px 20px 56px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md)}
.step-no{position:absolute; left:18px; top:18px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:13px; color:#081018; background:linear-gradient(135deg,#e9d18f,#c9a45c)}
.step b{display:block; font-size:14.5px; font-weight:500}
.step span{display:block; margin-top:4px; font-size:12.5px; color:var(--ink-2)}
.benefit-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px}
.benefit{padding:24px}
.benefit .bf-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;background:rgba(55,198,184,.09);border:1px solid rgba(55,198,184,.3)}
.benefit .bf-ic svg{width:20px;height:20px;color:var(--teal)}
.benefit:nth-child(3n+2) .bf-ic{background:rgba(201,164,92,.09);border-color:rgba(201,164,92,.3)}
.benefit:nth-child(3n+2) .bf-ic svg{color:var(--gold)}
.benefit:nth-child(3n+3) .bf-ic{background:rgba(78,141,245,.09);border-color:rgba(78,141,245,.3)}
.benefit:nth-child(3n+3) .bf-ic svg{color:var(--blue)}
.benefit h3{font-family:var(--serif); font-weight:700; font-size:16.5px; margin-bottom:8px}
.benefit p{font-size:13px; color:var(--ink-2)}

/* ============ 底部跳转 ============ */
.cta-strip{padding:30px 28px; display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.cta-strip h3{font-family:var(--serif); font-weight:900; font-size:clamp(19px,2.6vw,25px); letter-spacing:.04em}
.cta-strip p{font-size:13.5px; color:var(--ink-2); max-width:640px}
.cta-btn{display:inline-flex; align-items:center; gap:10px; padding:12px 26px; border-radius:999px; font-size:14.5px; font-weight:500; letter-spacing:.06em; color:#081018; background:linear-gradient(135deg,#e9d18f,#c9a45c); transition:filter .2s, transform .2s}
.cta-btn:hover{filter:brightness(1.07)}
.cta-btn:active{transform:translateY(1px)}

/* ============ Footer ============ */
footer{border-top:1px solid var(--line); padding:40px 0 46px; background:rgba(4,6,11,.6)}
.foot-nav{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px}
.foot-btn{display:inline-flex; align-items:center; gap:8px; padding:9px 22px; border-radius:999px; border:1px solid var(--line-2); background:var(--panel); font-size:13.5px; color:var(--gold-2); transition:border-color .2s, background .2s}
.foot-btn:hover{border-color:var(--gold); background:rgba(201,164,92,.1)}
.foot-dis{font-size:12px; color:var(--ink-3); line-height:1.9; max-width:980px}
.foot-dis b{color:var(--ink-2); font-weight:500}
.foot-bar{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-3)}
.foot-bar a{color:var(--ink-2)}

/* ============ 交互 ============ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ============ 桌面扩展 ============ */
@media (min-width:768px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .hero{padding:150px 0 72px}
  .stats{grid-template-columns:repeat(3,1fr); gap:16px}
  section{padding:84px 0}
  .about-grid{grid-template-columns:1.55fr 1fr; align-items:start}
  .steps{grid-template-columns:repeat(4,1fr); gap:14px}
  .benefit-grid{grid-template-columns:repeat(2,1fr); gap:18px}
  .sys-grid{grid-template-columns:repeat(3,1fr); gap:18px}
  .cta-strip{flex-direction:row; align-items:center; justify-content:space-between}
}
@media (min-width:1024px){
  .nav-in,.wrap{padding-left:32px; padding-right:32px}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}