/* copy/style.css - About page styles (responsive, frosted-glass) */
:root{
  --bg: linear-gradient(180deg,#071026 0%,#0b0b0b 100%);
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --accent: #6ec1ff;
  --muted: rgba(255,255,255,0.7);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Microsoft YaHei",sans-serif;background:var(--bg);color:#fff}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
/* header */
.site-header{position:sticky;top:0;z-index:40;background:transparent;padding:12px 0}
.site-header .container{display:flex;align-items:center;gap:12px}
.logo{font-size:20px;font-weight:800;color:var(--muted)}
.menu-btn{margin-left:auto;background:transparent;border:0;color:var(--muted);font-size:22px;display:none}
.site-nav{display:flex;gap:12px;margin-left:auto}
.site-nav a{color:var(--muted);padding:8px 12px;border-radius:8px}
.site-nav a:hover{background:rgba(255,255,255,0.04)}

/* hero */
.hero{padding:36px 0}
.glass{background:var(--glass-bg);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);border:1px solid var(--glass-border);border-radius:12px;padding:18px}
.hero .glass{padding:28px;text-align:center}
.lead{color:var(--muted);margin-top:8px}

/* team */
.team-section{padding:28px 0}
.section-title{text-align:center;margin-bottom:16px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.member{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px}
.avatar{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#032; font-weight:800;font-size:26px;margin-bottom:12px;box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.member h3{margin:6px 0 4px;font-size:18px}
.member .role{color:var(--muted);font-size:14px}
.info{margin-top:20px;padding:14px}

/* contact & footer */
.contact-section{padding:28px 0}
.site-footer{padding:20px 0;text-align:center;color:var(--muted)}

/* responsive */
@media (max-width:900px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .menu-btn{display:inline-block}
  .site-nav{display:none}
}
@media (max-width:520px){
  .team-grid{grid-template-columns:1fr}
  .container{padding:0 12px}
}