/* Template22: Glass Interface — 极光琉璃 · 紫蓝幻境 */
:root {
  --primary: #8b5cf6;
  --primary-glow: rgba(139,92,246,.4);
  --secondary: #a78bfa;
  --bg: #0a0118;
  --bg-mesh: radial-gradient(ellipse at 20% 50%, rgba(139,92,246,.15) 0%, transparent 50%),
             radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.1) 0%, transparent 50%),
             radial-gradient(ellipse at 50% 80%, rgba(236,72,153,.08) 0%, transparent 50%);
  --surface: rgba(255,255,255,.06);
  --surface-hover: rgba(255,255,255,.1);
  --text: #f0eef5;
  --text-muted: #a8a2b8;
  --border: rgba(255,255,255,.08);
  --border-glow: rgba(139,92,246,.3);
  --glass-blur: blur(20px);
  --radius: 24px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); background-image:var(--bg-mesh); background-attachment:fixed; color:var(--text); font-family:'Inter',-apple-system,'Segoe UI',sans-serif; line-height:1.65; overflow-x:hidden; min-height:100vh; }
a { color:inherit; text-decoration:none; transition:all .25s; }
.container { max-width:1180px; margin:0 auto; padding:0 1.5rem; }

/* Transparent Overlay Header */
.glass-header { position:fixed; top:0; left:0; right:0; z-index:100; padding:1rem 0; }
.glass-header.scrolled { background:rgba(10,1,24,.8); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.glass-nav { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; }
.glass-logo { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.glass-logo span { color:var(--primary); }
.glass-pills { display:flex; gap:.5rem; list-style:none; }
.glass-pills a { padding:.45rem 1rem; border-radius:var(--radius); font-size:.88rem; font-weight:500; color:var(--text-muted); transition:all .2s; }
.glass-pills a:hover,.glass-pills a.active { background:rgba(139,92,246,.15); color:var(--primary); }
.btn-glass { background:var(--surface); backdrop-filter:var(--glass-blur); border:1px solid var(--border-glow); color:var(--text); padding:.55rem 1.3rem; border-radius:var(--radius); font-weight:600; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 0 20px var(--primary-glow); transition:all .25s; }
.btn-glass:hover { background:rgba(139,92,246,.2); transform:translateY(-2px); box-shadow:0 4px 30px var(--primary-glow); }
.btn-glass-solid { background:linear-gradient(135deg,var(--primary),#6d28d9); color:#fff; padding:.6rem 1.5rem; border-radius:var(--radius); font-weight:700; display:inline-flex; align-items:center; gap:.5rem; border:none; box-shadow:0 4px 25px var(--primary-glow); transition:all .25s; }
.btn-glass-solid:hover { transform:translateY(-2px); box-shadow:0 8px 35px var(--primary-glow); }

/* Fullscreen Hero */
.hero-full { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem; position:relative; }
.hero-full::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(139,92,246,.25),transparent 70%); top:20%; left:50%; transform:translateX(-50%); filter:blur(80px); pointer-events:none; }
.hero-full h1 { font-size:clamp(2.5rem,5.5vw,4.5rem); font-weight:800; line-height:1.15; margin-bottom:1.2rem; letter-spacing:-.03em; }
.hero-full h1 .glow { background:linear-gradient(135deg,#fff 30%,var(--primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-badge { display:inline-flex; align-items:center; gap:.6rem; background:var(--surface); backdrop-filter:var(--glass-blur); border:1px solid var(--border-glow); padding:.4rem 1.1rem; border-radius:var(--radius); color:var(--primary); font-size:.82rem; font-weight:600; margin-bottom:1.5rem; }
.hero-sub { font-size:1.1rem; color:var(--text-muted); max-width:620px; margin:0 auto 2.5rem; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* Sections */
.g-section { padding:6.5rem 0; }
.g-sec-head { text-align:center; max-width:650px; margin:0 auto 3.5rem; }
.g-sec-head h2 { font-size:2.2rem; font-weight:700; margin-bottom:.8rem; }
.g-sec-head p { color:var(--text-muted); font-size:1rem; }

/* Bento Grid */
.bento-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(200px,auto); gap:1.25rem; }
.bento-grid .g-card:nth-child(1) { grid-column:span 2; }
.bento-grid .g-card:nth-child(4) { grid-column:span 2; }
.g-card { background:var(--surface); backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; transition:all .3s; display:flex; flex-direction:column; justify-content:center; }
.g-card:hover { border-color:var(--border-glow); background:var(--surface-hover); transform:translateY(-4px); box-shadow:0 12px 40px rgba(139,92,246,.12); }
.g-card .card-icon { width:50px; height:50px; border-radius:16px; background:rgba(139,92,246,.12); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem; }
.g-card h3 { font-size:1.25rem; font-weight:700; margin-bottom:.5rem; }
.g-card p { color:var(--text-muted); font-size:.92rem; }

/* Download Grid */
.dl-glass-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.dl-glass-box { background:var(--surface); backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:var(--radius); padding:2.2rem; text-align:center; transition:all .3s; }
.dl-glass-box:hover { border-color:var(--border-glow); transform:translateY(-4px); }
.dl-glass-box i { font-size:2.5rem; color:var(--primary); margin-bottom:1rem; display:block; }
.dl-glass-box h4 { font-size:1.15rem; font-weight:700; margin-bottom:.4rem; }
.dl-glass-box p { color:var(--text-muted); font-size:.85rem; margin-bottom:1.5rem; }

/* Club Cards */
.club-glass-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.club-g-card { background:var(--surface); backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; display:flex; gap:1rem; align-items:center; }
.club-g-avatar { width:48px; height:48px; border-radius:14px; background:rgba(139,92,246,.15); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:700; flex-shrink:0; }
.club-g-card h4 { font-size:1.05rem; font-weight:700; margin-bottom:.15rem; }
.club-g-card span { font-size:.8rem; color:var(--text-muted); }

/* FAQ Cards */
.faq-card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; max-width:900px; margin:0 auto; }
.faq-card { background:var(--surface); backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; transition:all .3s; }
.faq-card:hover { border-color:var(--border-glow); }
.faq-card h4 { font-size:1rem; font-weight:700; margin-bottom:.6rem; color:var(--primary); }
.faq-card p { color:var(--text-muted); font-size:.9rem; }

/* Glass CTA Panel */
.cta-glass { background:var(--surface); backdrop-filter:var(--glass-blur); border:1px solid var(--border-glow); border-radius:var(--radius); padding:4rem 2rem; text-align:center; margin:0 auto; max-width:800px; position:relative; overflow:hidden; }
.cta-glass::before { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(139,92,246,.15); top:-100px; right:-100px; filter:blur(60px); }
.cta-glass h2 { font-size:2.2rem; font-weight:700; margin-bottom:.8rem; position:relative; }
.cta-glass p { color:var(--text-muted); font-size:1rem; margin-bottom:2rem; position:relative; }

/* Centered Footer */
.footer-centered { text-align:center; padding:3.5rem 1rem 2rem; border-top:1px solid var(--border); }
.footer-centered .ft-logo { font-size:1.3rem; font-weight:800; margin-bottom:1rem; }
.footer-centered .ft-logo span { color:var(--primary); }
.footer-centered .ft-nav { display:flex; justify-content:center; gap:1.5rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.footer-centered .ft-nav a { color:var(--text-muted); font-size:.88rem; }
.footer-centered .ft-nav a:hover { color:var(--primary); }
.footer-centered .ft-copy { color:#6b6180; font-size:.82rem; }

/* Breadcrumb */
.breadcrumb { font-size:.88rem; color:var(--text-muted); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--primary); font-weight:600; }
.subpage-main { padding:7rem 0 4rem; }
.subpage-glass { background:var(--surface); backdrop-filter:var(--glass-blur); border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem; }
.subpage-glass h1 { font-size:2rem; font-weight:700; margin-bottom:1.2rem; }
.subpage-glass p,.subpage-glass li { color:var(--text-muted); line-height:1.8; }

@media (max-width:768px) {
  .glass-pills { display:none; }
  .bento-grid { grid-template-columns:1fr; }
  .bento-grid .g-card:nth-child(1),.bento-grid .g-card:nth-child(4) { grid-column:auto; }
  .dl-glass-grid,.club-glass-list,.faq-card-grid { grid-template-columns:1fr; }
  .hero-full h1 { font-size:2.5rem; }
}