/* 02 深色曜夜蓝绿 */
:root {
  --bg:#071016; --surface:#102028; --card:#16303a;
  --text:#f4fbfb; --muted:#93b4b8; --line:#24515c;
  --primary:#2dd4bf; --primary2:#0f766e; --accent:#f59e0b; --on:#06201c;
}
* {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(7,16,22,0.92); border-bottom:1px solid var(--line); backdrop-filter:blur(12px)}
.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,.5); 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(45,212,191,.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 {display:flex; flex-direction:column; gap:10px}
details {background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px}
summary {cursor:pointer; font-weight:600; font-size:14px}
details p {margin:10px 0 0; color:var(--muted); font-size:13px}
footer {padding:48px 0; background:var(--surface); border-top:1px solid var(--line); text-align:center}
footer h2 {font-size:22px; margin-bottom:8px}
footer p {color:var(--muted); font-size:14px; margin-bottom:20px}
.stats {display:flex; justify-content:center; gap:20px; color:var(--muted); font-size:13px; margin:24px 0; flex-wrap:wrap}
.stats span {background:var(--card); border:1px solid var(--line); padding:6px 14px; border-radius:20px}
.mesh {display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:20px 0}
.mesh a {color:var(--muted); font-size:13px; transition:color .2s}
.mesh a:hover {color:var(--primary)}
footer small {color:var(--muted); font-size:12px; display:block; margin-top:20px}
@media (max-width:880px) {
  .hero-grid, .grid4, .grid3, .films, .prices, .quotes {grid-template-columns:1fr}
  .films {grid-template-columns:1fr 1fr}
  .nav nav {display:none}
}