:root { color-scheme: dark; --bg:#05070f; --panel:#0b1424; --line:rgba(138,181,255,.18); --text:#f5f7fb; --muted:#aab4c5; --cyan:#36d9ff; --gold:#d7b56d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:radial-gradient(circle at 70% -10%,#10264d 0,transparent 35rem),var(--bg); color:var(--text); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; padding:14px clamp(18px,4vw,64px); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(2,6,18,.94); }
.brand { display:inline-flex; align-items:center; gap:10px; min-width:230px; font-weight:800; }
.brand-mark { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(54,217,255,.45); border-radius:50%; color:#eaffff; background:radial-gradient(circle at 35% 25%,rgba(54,217,255,.55),rgba(56,103,255,.16) 58%); }
.brand small { display:block; margin-top:2px; color:var(--muted); font-size:11px; font-weight:400; letter-spacing:.08em; }
.main-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.main-nav a { padding:9px 12px; border:1px solid transparent; border-radius:999px; color:#dce8f7; font-size:14px; white-space:nowrap; }
.main-nav a:hover,.main-nav a[aria-current="page"] { border-color:rgba(54,217,255,.48); background:rgba(54,217,255,.08); color:#fff; }
.header-call { border:1px solid rgba(215,181,109,.48); border-radius:999px; padding:9px 14px; color:#f8d989; font-size:14px; white-space:nowrap; }
.hero { position:relative; min-height:270px; overflow:hidden; padding:62px clamp(18px,8vw,130px) 42px; background:linear-gradient(90deg,rgba(2,6,18,.94),rgba(2,6,18,.52)),url("media/juxian-hero-city-night-poster.jpg") center/cover; }
.hero h1 { max-width:760px; margin:0 0 14px; font-size:clamp(34px,4.5vw,56px); line-height:1.08; }
.eyebrow { margin:0 0 14px; color:var(--cyan); font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.lede { max-width:660px; margin:0; color:#dce8f7; font-size:17px; line-height:1.8; }
.main { width:min(1240px,calc(100% - 36px)); margin:0 auto; padding:48px 0 68px; }
.heading { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:34px; }
.heading h2 { margin:0; font-size:clamp(30px,4vw,50px); line-height:1.18; }
.heading p { max-width:620px; margin:14px 0 0; color:var(--muted); line-height:1.75; }
.link { color:var(--cyan); font-weight:800; white-space:nowrap; }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.video-card,.image-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,rgba(16,28,50,.86),rgba(6,12,24,.9)); }
.video-card iframe { display:block; width:100%; aspect-ratio:4/3; border:0; background:#05070f; }
.video-card div { padding:16px 18px 18px; }
.video-card span,.image-card span { color:var(--gold); font-size:12px; font-weight:800; }
.video-card h3,.image-card h3 { margin:8px 0 0; font-size:18px; }
.image-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.image-card { position:relative; min-height:220px; }
.image-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.image-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(2,6,18,.9)); }
.image-card div { position:absolute; right:0; bottom:0; left:0; z-index:1; padding:20px; }
.performance-archive { margin-top:36px; }
.performance-archive-heading { max-width:760px; margin-bottom:20px; }
.performance-archive-heading h2 { margin:0; font-size:28px; }
.performance-archive-heading p { margin:10px 0 0; color:var(--muted); }
.performance-photo-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.performance-photo { display:block; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#0b1422; }
.performance-photo img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .2s ease; }
.performance-photo:hover img { transform:scale(1.04); }
.cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:36px; padding:24px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(135deg,rgba(22,48,86,.74),rgba(8,15,28,.92)); }
.cta h2 { margin:0 0 8px; font-size:28px; }
.cta p { margin:0; color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; border-radius:999px; padding:0 22px; background:linear-gradient(135deg,var(--cyan),#3867ff); color:#03111f; font-weight:900; white-space:nowrap; }
.footer { padding:36px clamp(18px,4vw,64px); border-top:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:13px; line-height:1.8; }
@media (max-width:900px) { .site-header { align-items:flex-start; flex-direction:column; } .main-nav { justify-content:flex-start; } .video-grid,.image-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .performance-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:600px) { .site-header { gap:10px; padding:12px 16px; } .main-nav { flex-wrap:nowrap; width:100%; overflow-x:auto; padding-bottom:2px; } .main-nav a { padding:8px 10px; font-size:13px; } .header-call { display:none; } .hero { min-height:300px; padding:72px 20px 46px; } .main { width:min(100% - 28px,1240px); padding:52px 0 70px; } .heading,.cta { align-items:flex-start; flex-direction:column; } .video-grid,.image-grid { grid-template-columns:1fr; } .performance-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .video-card,.image-card,.cta { border-radius:8px; } }