:root {
  --bg: #f7f7f2; --fg: #171717; --accent: #2a7f62; --secondary: #c44536;
  --muted: color-mix(in srgb, var(--fg), transparent 34%);
  --soft: color-mix(in srgb, var(--fg), transparent 93%);
  --line: color-mix(in srgb, var(--fg), transparent 78%);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--fg); background: var(--bg); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px clamp(20px,5vw,72px); border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--bg),transparent 8%); backdrop-filter: blur(16px); }
.brand { font-weight: 900; }
nav { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; }
main { overflow: hidden; }
.hero,.page-hero { min-height: 68vh; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); gap: clamp(28px,5vw,70px); align-items: center; padding: clamp(56px,9vw,108px) clamp(20px,5vw,72px); border-bottom: 1px solid var(--line); }
.page-hero { min-height: 42vh; grid-template-columns: minmax(0,880px); }
.hero h1,.page-hero h1 { max-width: 980px; margin: 12px 0 18px; font-size: clamp(34px,6vw,76px); line-height: 1.08; letter-spacing: 0; }
.hero p,.page-hero p { max-width: 800px; color: var(--muted); font-size: 18px; }
.hero-copy span,.page-hero span,.eyebrow { color: var(--accent); font-size: 13px; font-weight: 850; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions a { border: 1px solid var(--line); padding: 10px 16px; border-radius: 6px; background: var(--soft); }
.hero-posters,.hero-stage { min-height: 360px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-items: stretch; }
.hero-posters span,.hero-stage span,.hero-stage strong { display: grid; place-items: center; min-height: 130px; border: 1px solid var(--line); background: linear-gradient(145deg,var(--accent),var(--secondary)); color: #fff; font-weight: 900; }
.hero-stage strong { grid-column: span 3; min-height: 96px; }
.module { display: grid; grid-template-columns: minmax(210px,.36fr) minmax(0,1fr); gap: clamp(24px,5vw,64px); padding: clamp(46px,7vw,88px) clamp(20px,5vw,72px); border-bottom: 1px solid var(--line); }
.module h2 { margin: 8px 0 0; font-size: clamp(26px,4vw,48px); line-height: 1.18; letter-spacing: 0; }
.module h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: 0; }
.module-copy p,.module p,.module small,.module span { overflow-wrap: anywhere; }
.module-copy p { max-width: 760px; color: var(--muted); }
.section-media { min-height: 180px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--soft); }
.section-media span { font-size: 42px; font-weight: 950; color: var(--accent); }
.section-media i { font-style: normal; color: var(--muted); }
.poster-field,.bento-board,.profile-list,.mixed-list,.statement-points,.contact-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; }
.poster-field article,.bento-board article,.profile-list article,.mixed-list article,.rank-lines li,.time-lane li,.statement-points p,.contact-grid p,.split-feature article,.split-feature>div,.device-copy ul,.qa-stack details { border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 16px; }
.poster-mark { aspect-ratio: 3/4; display: grid; place-items: center; margin-bottom: 12px; background: linear-gradient(160deg,var(--accent),var(--secondary)); color: #fff; font-size: 28px; font-weight: 900; }
.cinema-rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
.cinema-rail article { flex: 0 0 250px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 18px; }
.rank-lines,.time-lane { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.rank-lines li,.time-lane li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; }
.rank-lines b,.time-lane span { color: var(--accent); font-size: 24px; font-weight: 950; }
.bento-board .wide { grid-column: span 2; }
.split-feature { display: grid; grid-template-columns: .95fr 1.05fr; gap: 14px; }
.split-feature p b,.split-feature p span,.device-copy li b,.device-copy li span { display: block; }
.device-copy { display: grid; grid-template-columns: minmax(190px,.42fr) 1fr; gap: 16px; }
.phone-pane { min-height: 340px; border: 1px solid var(--line); border-radius: 28px; padding: 28px; background: linear-gradient(180deg,var(--soft),transparent); }
.phone-pane strong { display: block; margin-bottom: 16px; font-size: 22px; }
.device-copy ul { display: grid; gap: 10px; margin: 0; list-style: none; }
blockquote { margin: 0; font-size: clamp(24px,4vw,48px); line-height: 1.25; color: var(--accent); }
.about-paragraphs p { color: var(--muted); margin-top: 0; }
.module-contact { background: color-mix(in srgb,var(--accent),transparent 88%); }
.site-footer { padding: 34px clamp(20px,5vw,72px); color: var(--muted); }
@media (max-width: 760px) {
  .site-header,.hero,.page-hero,.module,.split-feature,.device-copy { grid-template-columns: 1fr; }
  .site-header { align-items: flex-start; }
  .hero { min-height: auto; }
  .bento-board .wide { grid-column: auto; }
}