/* 03 深色赤黑玫瑰金 */
:root {
  --bg:#12090c; --surface:#1c0f14; --card:#27151c;
  --text:#fff5f5; --muted:#d4b2be; --line:#3d212b;
  --primary:#e7c27a; --primary2:#c59b48; --accent:#fb7185; --on:#1a1005;
}
* {box-sizing:border-box}
body {margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); line-height:1.65}
a {color:inherit; text-decoration:none}
img {max-width:100%; display:block}
.wrap {width:min(1120px, calc(100% - 32px)); margin:0 auto}
.nav {position:sticky; top:0; z-index:10; background:rgba(11,12,16,0.92); border-bottom:1px solid var(--line); backdrop-filter:blur(12px)}
body:has(:root:not([data-theme="dark"])) .nav {background:rgba(255,255,255,0.92)}
.nav-inner {display:flex; align-items:center; gap:22px; min-height:68px}
.brand {display:flex; align-items:center; gap:10px; font-size:18px}
.brand img {width:36px; height:36px; border-radius:8px}
.nav nav {display:flex; gap:18px; color:var(--muted); margin-left:auto}
.btn {display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:10px; font-weight:600; font-size:14px; transition:transform .15s, opacity .15s}
.btn:hover {transform:translateY(-1px); opacity:.95}
.btn-primary {background:linear-gradient(135deg,var(--primary),var(--primary2)); color:var(--on)}
.btn-outline {border:1px solid var(--line); color:var(--text); background:transparent}
.hero {padding:48px 0 32px}
.hero-grid {display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center}
.badge {display:inline-block; font-size:12px; letter-spacing:.08em; padding:4px 10px; border-radius:20px; background:var(--surface); border:1px solid var(--line); color:var(--primary); margin-bottom:16px}
h1 {font-size:clamp(28px, 4vw, 42px); line-height:1.2; margin:0 0 16px; font-weight:800}
.hero p {color:var(--muted); font-size:15px; margin:0 0 24px}
.hero-actions {display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.pills {display:flex; gap:12px; list-style:none; padding:0; margin:0; font-size:13px; color:var(--muted); flex-wrap:wrap}
.pills li {background:var(--surface); border:1px solid var(--line); padding:6px 12px; border-radius:20px}
.hero-frame {margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#000; box-shadow:0 18px 40px rgba(0,0,0,.15); aspect-ratio:16/9; position:relative}
.hero-frame img {width:100%; height:100%; object-fit:cover}
.hero-frame figcaption {position:absolute; bottom:0; inset-inline:0; padding:10px 14px; background:linear-gradient(transparent, rgba(0,0,0,.85)); font-size:12px; color:#fff}
.section {padding:52px 0}
.section.tint {background:var(--surface); border-block:1px solid var(--line)}
.kicker {color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0 0 6px}
h2 {font-size:clamp(22px, 3vw, 30px); margin:0 0 10px; font-weight:800}
.sub {color:var(--muted); margin:0 0 28px; font-size:14px}
.grid4 {display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grid4 article, .grid3 article {background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px}
.grid4 h3, .grid3 h3 {margin:0 0 8px; font-size:16px}
.grid4 p, .grid3 p {margin:0; color:var(--muted); font-size:13px}
.grid3 {display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.films {display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.film {background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .2s, border-color .2s; display:flex; flex-direction:column}
.film:hover {transform:translateY(-3px); border-color:var(--primary)}
.film a {display:block; aspect-ratio:3/4; overflow:hidden; background:#000}
.film img {width:100%; height:100%; object-fit:cover; transition:transform .3s}
.film:hover img {transform:scale(1.04)}
.film-body {padding:14px; display:flex; flex-direction:column; flex:1}
.film-body h3 {margin:0 0 4px; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.film-body p {margin:0 0 10px; color:var(--muted); font-size:12px}
.meta {display:flex; justify-content:space-between; font-size:11px; margin-top:auto; color:var(--primary); font-weight:700}
.meta span:last-child {background:rgba(245,158,11,.15); padding:2px 6px; border-radius:4px}
.prices {display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.price {background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column; position:relative}
.price.hot {border-color:var(--primary); box-shadow:0 0 0 1px var(--primary)}
.price em {position:absolute; top:-10px; right:16px; background:var(--primary); color:var(--on); font-style:normal; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px}
.price h3 {margin:0 0 4px; font-size:17px}
.price > p {margin:0 0 16px; color:var(--muted); font-size:13px}
.yen {font-size:32px; font-weight:800; color:var(--text); margin-bottom:18px}
.yen span {font-size:13px; font-weight:400; color:var(--muted); margin-left:4px}
.price ul {list-style:none; padding:0; margin:0 0 24px; color:var(--muted); font-size:13px; display:flex; flex-direction:column; gap:8px}
.price .btn {margin-top:auto}
.quotes {display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px}
blockquote {margin:0; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px}
blockquote p {margin:0 0 8px; font-size:14px}
cite {font-style:normal; color:var(--primary); font-size:12px; font-weight:600}
.faq details {border-top:1px solid var(--line); padding:14px 0}
.faq details:first-child {border-top:none}
.faq summary {cursor:pointer; font-weight:600; font-size:15px; outline:none}
.faq p {color:var(--muted); font-size:13px; margin:8px 0 0}
footer {padding:48px 0 28px; text-align:center; border-top:1px solid var(--line)}
footer h2 {font-size:24px; margin:0 0 8px}
footer p {color:var(--muted); margin:0 0 20px; font-size:14px}
.stats {display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin:28px 0 20px; color:var(--muted); font-size:13px}
.mesh {display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.mesh a {color:var(--muted); font-size:13px; border-bottom:1px dashed var(--line)}
.mesh a:hover {color:var(--primary); border-bottom-color:var(--primary)}
small {display:block; color:var(--muted); font-size:12px}

@media(max-width:880px) {
  .hero-grid {grid-template-columns:1fr}
  .grid4, .films {grid-template-columns:repeat(2,1fr)}
  .grid3, .prices {grid-template-columns:1fr}
  .quotes {grid-template-columns:1fr}
  .nav nav {display:none}
}
@media(max-width:480px) {
  .grid4, .films {grid-template-columns:1fr}
  .hero-actions {flex-direction:column}
  .btn {width:100%}
}