/**
 * QuantaPay Global Styles - 全局Header & Footer样式
 * 从style.css中提取，供所有页面使用
 * 创建日期: 2025-10-09
 */

/* ===== CSS变量 ===== */
:root{
  --bg0:#0a0f1c; --bg1:#0b1224;
  --ink:#e9f0ff; --muted:#aab6cc; --line:#223355;
  --c1:#39e9c7; --c2:#53a9ff; --c3:#8b72ff;
  --grad:linear-gradient(135deg,var(--c1),var(--c2));
  --radius:20px; --shadow:0 25px 50px -12px rgba(0,0,0,.5);
  --step:900ms;
}

/* ===== CSS Reset ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;width:100%;height:100%;position:relative}

/* ===== Body基础样式（Pages页面会覆盖） ===== */
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  min-height:100vh;
  position:relative;
  /* 为固定头部留出空间 */
  padding-top:80px;
  overscroll-behavior-y:none;
}

/* 📱 移动端body调整 */
@media (max-width:768px){
  body{padding-top:116px}
}

/* ===== Navigation Header ===== */
body > nav,
.header,
#main-header {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  backdrop-filter:blur(20px);background:rgba(10,15,28,.8);
  border-bottom:1px solid rgba(148,163,184,.2);
  transition:all .4s cubic-bezier(0.4,0,0.2,1)
}

.nav-container{
  max-width:1280px;margin:0 auto;padding:0 24px;width:100%;
  display:flex;align-items:center;justify-content:space-between;height:80px
}

.brand{
  display:flex;align-items:center;gap:16px;text-decoration:none;
  transition:all .4s cubic-bezier(0.4,0,0.2,1)
}
.brand:hover{transform:translateY(-2px)}

.brand-logo{width:40px;height:40px;position:relative}
.brand-logo svg{width:100%;height:100%;filter:drop-shadow(0 8px 16px rgba(6,182,212,.4))}

.brand-text{
  font-size:24px;font-weight:900;letter-spacing:-1px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}

.nav-menu{display:flex;align-items:center;gap:40px}

.nav-link{
  color:#aab6cc;text-decoration:none;font-weight:600;font-size:15px;
  transition:all .4s cubic-bezier(0.4,0,0.2,1);position:relative;padding:8px 0
}
.nav-link:hover{color:var(--ink)}
.nav-link::after{
  content:"";position:absolute;bottom:0;left:0;width:0;height:2px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  transition:all .4s cubic-bezier(0.4,0,0.2,1)
}
.nav-link:hover::after{width:100%}

.nav-cta{
  background:linear-gradient(135deg,var(--c1),var(--c2));
  color:#000;padding:12px 24px;border-radius:12px;text-decoration:none;
  font-weight:700;font-size:15px;transition:all .4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 8px 25px rgba(6,182,212,.3)
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(6,182,212,.4)}

/* ===== Footer ===== */
.site-footer{
  margin-top:56px;padding:64px 0 40px;background:transparent;
  border-top:1px solid rgba(148,163,184,.14)
}

.footer-inner{max-width:1280px;margin:0 auto;padding:0 24px}

.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));
  gap:28px;align-items:start
}

@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}

@media (max-width:580px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
}

.footer-brand{display:flex;flex-direction:column;gap:16px}
.footer-brand .brand-logo svg{width:56px;height:56px}
.footer-brand .desc{color:var(--muted);font-size:14px;line-height:1.7;margin-top:8px}

.footer-col h3{
  font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px;
  text-transform:uppercase;letter-spacing:.5px
}

.footer-links{display:flex;flex-direction:column;gap:10px;list-style:none}
.footer-links a{
  color:var(--muted);text-decoration:none;font-size:14px;
  transition:all .3s cubic-bezier(0.4,0,0.2,1)
}
.footer-links a:hover{color:var(--ink);padding-left:4px}

.footer-bottom{
  margin-top:48px;padding-top:32px;
  border-top:1px solid rgba(148,163,184,.14);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px
}

.footer-copy{color:var(--muted);font-size:14px}

.footer-social{display:flex;gap:16px}
.footer-social a{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:rgba(148,163,184,.1);color:var(--muted);
  text-decoration:none;transition:all .3s cubic-bezier(0.4,0,0.2,1)
}
.footer-social a:hover{
  background:rgba(6,182,212,.2);color:var(--c1);transform:translateY(-2px)
}

@media (max-width:580px){
  .footer-bottom{flex-direction:column;text-align:center}
}