html, body { margin: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; background: #000000; color: #F3F3F3; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.site-header { position: sticky; top: 0; width: 100%; z-index: 9999; background: #000000; backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,0.38); border-bottom: 1px solid rgba(255,216,176,0.14); }
.header-inner { max-width: 1280px; margin: 0 auto; min-height: 72px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 142px; max-height: 48px; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; }
.desktop-nav a { color: #ffd8b0; padding: 10px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap; transition: .2s ease; }
.desktop-nav a:hover, .desktop-nav a.active { background: #111111; color: #ffd8b0; box-shadow: inset 0 -2px 0 rgba(255,216,176,0.55), 0 10px 22px rgba(255,216,176,0.09); }
.main-btn { background: #ffd8b0; color: #000000; border-radius: 999px; box-shadow: 0 10px 24px rgba(255,216,176,0.22); padding: 11px 20px; font-weight: 700; border: none; display: inline-flex; align-items: center; justify-content: center; transition: .2s ease; white-space: nowrap; }
.main-btn:hover { background: #F2C995; transform: translateY(-1px); }
.menu-toggle { display:none; background: transparent; border: 1px solid rgba(255,216,176,0.34); border-radius: 12px; width: 42px; height: 42px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-toggle span { width: 20px; height: 2px; background: #ffd8b0; display:block; }
main { position: relative; z-index: 1; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.section { padding: 74px 0; }
.section.tight { padding: 44px 0; }
.hero-section { background: radial-gradient(circle at 18% 20%, rgba(255,216,176,0.15) 0%, rgba(255,216,176,0) 30%), linear-gradient(135deg, #000000 0%, #111111 52%, #161616 100%); padding: 70px 0 56px; border-bottom: 1px solid rgba(255,216,176,0.13); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); align-items: center; gap: 34px; }
.kicker { color: #ffd8b0; letter-spacing: .08em; font-size: 14px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.kicker:before { content:""; width: 34px; height: 1px; background: #ffd8b0; display:inline-block; }
h1, h2, h3 { color: #ffd8b0; margin: 0 0 16px; line-height: 1.22; }
h1 { font-size: clamp(32px, 5vw, 58px); }
h2 { font-size: clamp(26px, 3vw, 38px); }
h3 { font-size: 22px; }
p { color: #C9C9C9; line-height: 1.88; margin: 0 0 16px; }
.lead { color: #F3F3F3; font-size: 18px; }
.hero-actions { display:flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.text-link { color: #ffd8b0; border-bottom: 1px solid rgba(255,216,176,0.45); padding-bottom: 3px; }
.hero-visual, .image-card { background: linear-gradient(145deg, #111111, #1D1D1D); border: 1px solid rgba(255,216,176,0.22); border-radius: 28px; padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.52), 0 0 44px rgba(255,216,176,.08); }
.hero-visual img, .content-img, .zone-card img, .app-section img { max-width: 100%; height: auto; object-fit: contain; display:block; margin:auto; }
.hero-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.mini-card, .card, .zone-card, .info-card, .notice-box, .faq-item, .profile-card { background: #111111; border: 1px solid rgba(255,216,176,0.18); box-shadow: 0 14px 36px rgba(0,0,0,0.42); border-radius: 22px; }
.mini-card { padding: 18px; }
.number { color:#ffd8b0; font-weight:800; font-size: 14px; }
.pill-row, .category-row { display:flex; flex-wrap:wrap; gap: 12px; }
.pill, .category-pill { border: 1px solid rgba(255,216,176,.28); color:#ffd8b0; border-radius: 999px; padding: 10px 16px; background: rgba(255,216,176,.04); }
.service-strip { padding: 24px 28px; border-radius: 24px; background: #111111; border: 1px solid rgba(255,216,176,.18); }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.card, .info-card, .profile-card { padding: 26px; }
.card ul, .info-card ul, .profile-card ul { margin: 14px 0 0; padding-left: 18px; color: #C9C9C9; line-height:1.8; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items:center; margin: 36px 0; }
.split.reverse .split-text { order:1; }
.split.reverse .image-card { order:2; }
.split-text { padding: 8px 0; }
.zone-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.zone-card { overflow:hidden; }
.zone-card img { width:100%; max-height: 210px; padding: 16px; }
.zone-card-content { padding: 0 22px 24px; }
.tag { color:#ffd8b0; font-size:13px; font-weight:800; }
.app-section { display:grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items:center; background: linear-gradient(145deg,#111111,#1D1D1D); border:1px solid rgba(255,216,176,.18); border-radius:30px; padding:30px; }
.app-section img { max-height: 330px; }
.check-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.check-item { padding:18px; background:#161616; border:1px solid rgba(255,216,176,.16); border-radius:18px; color:#C9C9C9; }
.faq-list { display:grid; gap:16px; }
.faq-item { padding:22px 24px; }
.notice-box { padding:28px; background: linear-gradient(135deg,#111111,#161616); }
.page-hero { padding: 58px 0 34px; background: radial-gradient(circle at 25% 0%, rgba(255,216,176,.13), transparent 34%), #000000; border-bottom: 1px solid rgba(255,216,176,.12); }
.page-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items:center; }
.page-img { max-height: 360px; }
.article { padding: 54px 0; }
.article-block { margin-bottom: 34px; }
.highlight-list { display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 24px 0; }
.site-footer { background: #050505; color: #DADADA; border-top: 1px solid rgba(255,216,176,.16); }
.footer-inner { max-width:1180px; margin:0 auto; padding:42px 22px 72px; display:grid; gap:24px; }
.footer-brand img { width: 132px; max-height: 44px; object-fit:contain; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px 18px; }
.footer-links a { color:#ffd8b0; }
.footer-note { color:#9A9A9A; font-size: 14px; }
.drawer-mask { position: fixed; inset:0; background:rgba(0,0,0,.58); z-index: 10000; opacity:0; pointer-events:none; transition:.2s ease; }
.mobile-drawer { position: fixed; top:0; left:0; width:84%; max-width:320px; height:100vh; background: linear-gradient(180deg,#111111,#050505); z-index:10001; transform: translateX(-105%); transition:.25s ease; border-right:1px solid rgba(255,216,176,.22); overflow-y:auto; }
.drawer-top { display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid rgba(255,216,176,.14); }
.drawer-top img { width:128px; max-height:42px; object-fit:contain; }
.drawer-close { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,216,176,.35); background:#111111; color:#ffd8b0; font-size:24px; }
.drawer-nav { display:grid; padding:14px; gap:8px; }
.drawer-nav a { padding:13px 14px; border-radius:14px; color:#ffd8b0; background:rgba(255,216,176,.04); }
.drawer-nav a.active { background:rgba(255,216,176,.16); }
body.menu-open { overflow:hidden; }
body.menu-open .drawer-mask { opacity:1; pointer-events:auto; }
body.menu-open .mobile-drawer { transform: translateX(0); }
.bottom-nav { display:none; position:fixed; left:0; right:0; bottom:0; z-index:9998; background:#050505; border-top:1px solid rgba(255,216,176,.18); }
.bottom-nav a { flex:1; text-align:center; padding:12px 4px; color:#C9C9C9; font-size:13px; }
.bottom-nav a.active { color:#ffd8b0; }
@media (max-width: 1080px){ .desktop-nav a { padding:9px 8px; font-size:13px; } .grid-3, .zone-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 820px){ .header-inner { min-height:66px; display:grid; grid-template-columns: 48px 1fr auto; padding:0 14px; } .menu-toggle { display:flex; } .desktop-nav { display:none; } .brand { justify-content:center; } .brand img { width:126px; } .main-btn { padding:10px 14px; font-size:14px; } .hero-grid, .page-grid, .split, .app-section { grid-template-columns:1fr; } .split.reverse .split-text, .split.reverse .image-card { order:initial; } .hero-cards, .grid-3, .grid-2, .zone-grid, .check-grid, .highlight-list { grid-template-columns:1fr; } .section { padding:54px 0; } .hero-section { padding:48px 0 42px; } .bottom-nav { display:flex; } body { padding-bottom:48px; } .page-img { max-height: 300px; } }
@media (max-width: 420px){ .container { padding:0 16px; } .header-inner { gap:8px; } .brand img { width:108px; } .main-btn { padding:9px 11px; } .card, .info-card, .profile-card { padding:22px; } }