:root { --header-h: 86px; --accent: #ffffff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #101114; color: #fff; font-family: Arial, "Microsoft YaHei", sans-serif; }
body { overflow-x: hidden; }
.site-header { height: var(--header-h); display: grid; place-items: center; background: #101114; position: relative; z-index: 2; }
.logo-link { display: inline-flex; align-items: center; justify-content: center; }
.logo { width: 150px; height: 54px; object-fit: contain; }
.hero-carousel { position: relative; width: 100%; height: calc(100vh - var(--header-h)); min-height: 420px; overflow: hidden; background: #20232a; }
.slides, .slide { position: absolute; inset: 0; margin: 0; }
.slide { opacity: 0; transition: opacity .65s ease; }
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 72px; border: 0; border-radius: 8px; color: #fff; background: rgba(0,0,0,.32); font-size: 48px; line-height: 1; cursor: pointer; transition: background .2s; }
.arrow:hover, .arrow:focus-visible { background: rgba(0,0,0,.65); }
.arrow-prev { left: 22px; } .arrow-next { right: 22px; }
.dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; }
.dot.is-active { width: 28px; border-radius: 8px; background: var(--accent); }
.single-image { padding: 28px 5vw 48px; background: #101114; }
.single-image img { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto; object-fit: contain; }
@media (max-width: 600px) { :root { --header-h: 70px; } .logo { width: 120px; height: 44px; } .hero-carousel { min-height: 300px; } .arrow { width: 38px; height: 54px; font-size: 38px; } .arrow-prev { left: 10px; } .arrow-next { right: 10px; } .dots { bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }