: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:color-mix(in srgb, var(--bg) 92%, transparent); 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; min-height:42px; padding:0 16px; border-radius:6px; font-weight:700}
.btn-primary {background:var(--primary); color:var(--on)}
.btn-outline {border:1px solid var(--line); color:var(--text)}
.hero {padding:54px 0 20px}
.hero-grid {display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.badge {display:inline-block; color:var(--primary); border:1px solid var(--line); border-radius:99px; padding:4px 10px; font-size:13px}
h1 {font-size:48px; line-height:1.15; margin:14px 0}
h2 {font-size:32px; margin:6px 0 8px}
.hero p, .sub {color:var(--muted)}
.hero-actions, .pills {display:flex; gap:12px; flex-wrap:wrap}
.pills {list-style:none; padding:0; color:var(--muted); font-size:14px}
.hero-frame {background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.18)}
.hero-frame img {width:100%; height:320px; object-fit:cover}
.hero-frame figcaption {padding:10px 14px; color:var(--muted); font-size:13px}
.section {padding:54px 0}
.tint {background:var(--surface)}
.kicker {color:var(--accent); letter-spacing:.08em; font-size:13px; margin:0}
.grid4, .grid3, .films, .prices, .quotes {display:grid; gap:16px; margin-top:22px}
.grid4 {grid-template-columns:repeat(4,1fr)}
.grid3, .prices {grid-template-columns:repeat(3,1fr)}
.films {grid-template-columns:repeat(4,1fr)}
.quotes {grid-template-columns:1fr 1fr}
.grid4 article, .grid3 article, .price, .faq, blockquote {background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px}
.film {background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.film img {height:280px; width:100%; object-fit:cover}
.film-body, .film p {padding:0 12px}
.film h3 {font-size:16px; margin:12px}
.meta {display:flex; justify-content:space-between; padding:0 12px 12px; color:var(--primary); font-size:13px}
.price.hot {outline:2px solid var(--primary)}
.price em {color:var(--primary); font-style:normal; font-size:13px}
.yen b {font-size:40px}
.price ul {padding-left:18px; color:var(--muted)}
.faq details {border-top:1px solid var(--line); padding:10px 0}
.faq {padding:8px 18px 18px}
footer {padding:48px 0 28px; text-align:center; border-top:1px solid var(--line)}
.stats, .mesh {display:flex; gap:14px; justify-content:center; flex-wrap:wrap; color:var(--muted); margin:16px 0}
.mesh a {border:1px solid var(--line); border-radius:99px; padding:6px 10px}
small {color:var(--muted)}
@media (max-width:860px) {
  .hero-grid, .grid4, .grid3, .films, .prices, .quotes {grid-template-columns:1fr}
  h1 {font-size:34px}
  .nav nav {display:none}
}