/* Template 26: Split Screen — 分屏对撞 · 明暗交织 */
:root {
  --teal: #14b8a6;
  --teal-glow: rgba(20, 184, 166, 0.35);
  --dark: #0f172a;
  --dark-surface: #1e293b;
  --light: #f8fafc;
  --light-surface: #ffffff;
  --text-dark: #f8fafc;
  --text-light: #0f172a;
  --text-muted-dark: #94a3b8;
  --text-muted-light: #64748b;
  --border-dark: rgba(255, 255, 255, 0.1);
  --border-light: rgba(0, 0, 0, 0.08);
  --radius-pill: 50px;
  --radius-panel: 32px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--light); color:var(--text-light); font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif; line-height:1.65; overflow-x:hidden; }
a { color:inherit; text-decoration:none; transition:all .25s; }
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }

/* Floating Pill Header */
.split-header { position:fixed; top:1.25rem; left:0; right:0; z-index:100; padding:0 1.5rem; }
.split-nav-capsule { max-width:1050px; margin:0 auto; background:rgba(15, 23, 42, 0.9); backdrop-filter:blur(16px); border:1px solid var(--border-dark); border-radius:var(--radius-pill); padding:.6rem 1.8rem; display:flex; align-items:center; justify-content:space-between; box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.split-logo { font-size:1.4rem; font-weight:800; color:#fff; display:flex; align-items:center; gap:.4rem; }
.split-logo span { color:var(--teal); }
.split-nav-links { display:flex; gap:1.8rem; list-style:none; }
.split-nav-links a { color:var(--text-muted-dark); font-size:.9rem; font-weight:500; transition:color .2s; }
.split-nav-links a:hover, .split-nav-links a.active { color:var(--teal); }
.btn-split-teal { background:var(--teal); color:#fff; font-weight:700; padding:.5rem 1.4rem; border-radius:var(--radius-pill); font-size:.88rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 4px 15px var(--teal-glow); }
.btn-split-teal:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--teal-glow); }

/* Split Screen Hero */
.split-hero { min-height:100vh; display:grid; grid-template-columns:1.1fr 0.9fr; align-items:stretch; }
.split-hero-left { background:var(--dark); color:var(--text-dark); padding:9rem 4rem 5rem; display:flex; flex-direction:column; justify-content:center; }
.split-hero-right { background:var(--light); padding:9rem 3rem 5rem; display:flex; flex-direction:column; justify-content:center; align-items:center; border-left:1px solid var(--border-light); }
.split-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(20,184,166,.12); color:var(--teal); padding:.4rem 1.2rem; border-radius:var(--radius-pill); font-size:.82rem; font-weight:600; margin-bottom:1.5rem; width:fit-content; }
.split-hero h1 { font-size:clamp(2.5rem, 5vw, 4.2rem); font-weight:800; line-height:1.15; margin-bottom:1.5rem; letter-spacing:-.02em; }
.split-hero h1 .teal { color:var(--teal); }
.split-hero-desc { color:var(--text-muted-dark); font-size:1.05rem; line-height:1.8; margin-bottom:2.5rem; max-width:540px; }
.split-hero-actions { display:flex; gap:1.2rem; flex-wrap:wrap; }
.btn-split-outline { border:1px solid rgba(255,255,255,0.25); color:#fff; padding:.65rem 1.8rem; border-radius:var(--radius-pill); font-weight:600; font-size:.9rem; }
.btn-split-outline:hover { border-color:var(--teal); color:var(--teal); }

/* Right Panel Cards in Hero */
.split-hero-card { background:var(--light-surface); border:1px solid var(--border-light); border-radius:var(--radius-panel); padding:2rem; width:100%; max-width:440px; box-shadow:0 20px 40px rgba(0,0,0,0.06); }
.split-hero-card h4 { font-size:1.2rem; font-weight:700; margin-bottom:.8rem; display:flex; align-items:center; gap:.6rem; }
.split-hero-card p { color:var(--text-muted-light); font-size:.92rem; line-height:1.7; margin-bottom:1.5rem; }

/* Alternating Split Sections */
.split-section-dark { background:var(--dark); color:var(--text-dark); padding:6.5rem 0; }
.split-section-light { background:var(--light); color:var(--text-light); padding:6.5rem 0; }
.split-sec-head { text-align:center; max-width:650px; margin:0 auto 3.5rem; }
.split-sec-head h2 { font-size:2.2rem; font-weight:800; margin-bottom:.8rem; }
.split-sec-head p { font-size:1rem; opacity:.8; }

/* Grid Cards */
.split-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.split-panel-card { background:var(--dark-surface); border:1px solid var(--border-dark); border-radius:var(--radius-panel); padding:2.2rem; transition:all .3s; }
.split-section-light .split-panel-card { background:var(--light-surface); border:1px solid var(--border-light); box-shadow:0 10px 30px rgba(0,0,0,0.04); }
.split-panel-card:hover { transform:translateY(-4px); border-color:var(--teal); }
.split-panel-icon { width:50px; height:50px; border-radius:var(--radius-pill); background:rgba(20,184,166,.15); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.2rem; }
.split-panel-card h3 { font-size:1.25rem; font-weight:700; margin-bottom:.6rem; }
.split-panel-card p { opacity:.8; font-size:.92rem; line-height:1.7; }

/* Download Pill Grid */
.split-dl-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.split-dl-box { background:var(--dark-surface); border:1px solid var(--border-dark); border-radius:var(--radius-panel); padding:2.5rem 2rem; text-align:center; }
.split-dl-box i { font-size:2.8rem; color:var(--teal); margin-bottom:1.2rem; display:block; }
.split-dl-box h4 { font-size:1.2rem; font-weight:700; margin-bottom:.5rem; }
.split-dl-box p { opacity:.8; font-size:.88rem; margin-bottom:1.8rem; }

/* Club Split List */
.split-club-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.split-club-item { background:var(--light-surface); border:1px solid var(--border-light); border-radius:var(--radius-panel); padding:2rem; box-shadow:0 10px 30px rgba(0,0,0,0.04); }
.split-club-item .badge { display:inline-block; background:rgba(20,184,166,.1); color:var(--teal); padding:.3rem .9rem; border-radius:var(--radius-pill); font-size:.78rem; font-weight:700; margin-bottom:.8rem; }
.split-club-item h4 { font-size:1.15rem; font-weight:700; margin-bottom:.4rem; }
.split-club-item p { color:var(--text-muted-light); font-size:.9rem; }

/* FAQ Pill List */
.split-faq-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem; max-width:920px; margin:0 auto; }
.split-faq-item { background:var(--dark-surface); border:1px solid var(--border-dark); border-radius:var(--radius-panel); padding:1.75rem; }
.split-faq-item h4 { font-size:1.05rem; font-weight:700; color:var(--teal); margin-bottom:.6rem; }
.split-faq-item p { opacity:.8; font-size:.92rem; line-height:1.7; }

/* Split CTA Banner */
.split-cta-banner { background:linear-gradient(135deg, var(--teal), #0d9488); border-radius:var(--radius-panel); padding:4.5rem 3rem; text-align:center; color:#fff; box-shadow:0 20px 50px rgba(20,184,166,.3); max-width:900px; margin:0 auto; }
.split-cta-banner h2 { font-size:2.4rem; font-weight:800; margin-bottom:1rem; }
.split-cta-banner p { font-size:1.05rem; opacity:.9; margin-bottom:2rem; }
.btn-split-white { background:#fff; color:var(--dark); font-weight:800; padding:.8rem 2.5rem; border-radius:var(--radius-pill); font-size:1rem; display:inline-flex; align-items:center; gap:.6rem; }

/* Split Two-Tone Footer */
.split-footer { background:var(--dark); color:var(--text-dark); border-top:1px solid var(--border-dark); padding:4.5rem 0 2rem; }
.split-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.split-footer h4 { font-size:1.05rem; font-weight:700; margin-bottom:1rem; color:#fff; }
.split-footer p { color:var(--text-muted-dark); font-size:.88rem; line-height:1.8; }
.split-footer ul { list-style:none; }
.split-footer li { margin-bottom:.5rem; }
.split-footer a { color:var(--text-muted-dark); font-size:.88rem; }
.split-footer a:hover { color:var(--teal); }
.split-footer-bottom { border-top:1px solid var(--border-dark); padding-top:1.5rem; text-align:center; font-size:.82rem; color:var(--text-muted-dark); }

/* Subpage */
.split-subpage { padding:7.5rem 0 5rem; min-height:80vh; background:var(--light); }
.split-sub-box { background:var(--light-surface); border:1px solid var(--border-light); border-radius:var(--radius-panel); padding:3rem; box-shadow:0 15px 40px rgba(0,0,0,0.05); }
.split-sub-box h1 { font-size:2.2rem; font-weight:800; margin-bottom:1.5rem; color:var(--dark); }
.breadcrumb { font-size:.88rem; color:var(--text-muted-light); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--teal); font-weight:600; }

@media (max-width:900px) {
  .split-hero { grid-template-columns:1fr; }
  .split-hero-left, .split-hero-right { padding:6rem 2rem 3rem; }
  .split-nav-links { display:none; }
  .split-grid-3, .split-dl-grid, .split-club-grid, .split-faq-grid, .split-footer-grid { grid-template-columns:1fr; }
}