html, body { margin: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; background:#000000; color:#F3F3F3; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display:block; }
main { position: relative; z-index: 1; }
.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,.38); border-bottom:1px solid rgba(255,216,176,.18); }
.header-inner { max-width:1280px; margin:0 auto; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:0 22px; }
.brand-logo img { width:132px; max-height:46px; object-fit:contain; }
.desktop-nav { display:flex; align-items:center; gap:5px; flex:1; justify-content:center; }
.desktop-nav a { color:#ffd8b0; font-size:15px; padding:12px 12px; border-radius:999px; position:relative; white-space:nowrap; }
.desktop-nav a:hover, .desktop-nav a.active { background:#111111; color:#ffd8b0; box-shadow: inset 0 -2px 0 rgba(255,216,176,.8), 0 10px 22px rgba(255,216,176,.08); }
.main-btn { background:#ffd8b0; color:#000000; border-radius:999px; box-shadow:0 10px 24px rgba(255,216,176,.22); padding:12px 22px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:0; transition:.2s; }
.main-btn:hover { background:#F2C995; transform:translateY(-1px); }
.header-btn { white-space:nowrap; }
.menu-toggle { display:none; width:42px; height:42px; border:1px solid rgba(255,216,176,.22); border-radius:12px; background:#111111; padding:9px; }
.menu-toggle span { display:block; height:2px; background:#ffd8b0; margin:5px 0; border-radius:3px; }
.drawer-mask { position:fixed; inset:0; background:rgba(0,0,0,.58); z-index:10000; opacity:0; visibility:hidden; transition:.25s; }
.mobile-drawer { position:fixed; left:0; top:0; height:100vh; width:82%; max-width:320px; background:linear-gradient(180deg,#111111,#050505); border-right:1px solid rgba(255,216,176,.22); z-index:10001; transform:translateX(-105%); transition:.25s; padding:18px; overflow:auto; }
body.menu-open { overflow:hidden; }
body.menu-open .drawer-mask { opacity:1; visibility:visible; }
body.menu-open .mobile-drawer { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,216,176,.14); }
.drawer-head img { width:120px; object-fit:contain; }
.drawer-close { background:#1D1D1D; color:#ffd8b0; border:1px solid rgba(255,216,176,.2); border-radius:10px; width:38px; height:38px; font-size:24px; }
.drawer-links { display:grid; gap:10px; padding-top:18px; }
.drawer-links a { color:#ffd8b0; background:#161616; border:1px solid rgba(255,216,176,.12); border-radius:14px; padding:13px 14px; }
.container { max-width:1180px; margin:0 auto; padding:0 22px; }
.hero-section { background: radial-gradient(circle at 18% 20%, rgba(255,216,176,.15) 0%, rgba(255,216,176,0) 30%), linear-gradient(135deg,#000000 0%,#111111 52%,#161616 100%); padding:74px 0 42px; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:42px; }
.eyebrow, .label { color:#ffd8b0; letter-spacing:.08em; font-size:13px; font-weight:700; }
h1, h2, h3 { color:#ffd8b0; line-height:1.25; margin:0 0 16px; }
h1 { font-size:clamp(34px,5vw,60px); }
h2 { font-size:clamp(26px,3vw,38px); }
h3 { font-size:22px; }
p { color:#C9C9C9; line-height:1.85; margin:0 0 14px; }
.hero-text p { font-size:17px; max-width:650px; }
.hero-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:26px; }
.text-link { color:#ffd8b0; border-bottom:1px solid rgba(255,216,176,.4); padding-bottom:3px; }
.hero-visual, .image-card { background:linear-gradient(145deg,#111111,#050505); border:1px solid rgba(255,216,176,.22); border-radius:28px; padding:20px; box-shadow:0 26px 80px rgba(255,216,176,.10); }
.hero-visual img, .content-img, .zone-card img, .app-section img { max-width:100%; height:auto; object-fit:contain; margin:auto; border-radius:20px; }
.hero-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.card, .zone-card, .info-card { background:#111111; border:1px solid rgba(255,216,176,.18); box-shadow:0 14px 36px rgba(0,0,0,.42); border-radius:24px; padding:24px; }
.quick-nav { padding:28px 0; background:#050505; border-top:1px solid rgba(255,216,176,.12); border-bottom:1px solid rgba(255,216,176,.12); }
.pill-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pill { background:#111111; border:1px solid rgba(255,216,176,.18); border-radius:999px; padding:13px 18px; color:#F3F3F3; display:flex; gap:10px; align-items:center; justify-content:center; text-align:center; }
.pill span { color:#ffd8b0; font-weight:800; }
.section { padding:68px 0; }
.section-dark { background:#050505; }
.section-head { max-width:780px; margin-bottom:28px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.zone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.zone-card img { height:170px; width:100%; object-fit:contain; background:#050505; padding:12px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; margin:34px 0; }
.split.reverse .split-text { order:1; }
.split.reverse .image-card { order:2; }
.points { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; padding:0; list-style:none; }
.points li { border:1px solid rgba(255,216,176,.18); color:#F3F3F3; background:#161616; border-radius:999px; padding:8px 13px; font-size:14px; }
.app-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:34px; align-items:center; background:linear-gradient(135deg,#111111,#1D1D1D); border:1px solid rgba(255,216,176,.18); border-radius:30px; padding:30px; }
.notice { border:1px solid rgba(255,216,176,.22); background:#111111; border-radius:24px; padding:26px; }
.faq-list { display:grid; gap:14px; }
.faq-item { background:#111111; border:1px solid rgba(255,216,176,.14); border-radius:20px; padding:22px; }
.page-hero { padding:64px 0 30px; background:linear-gradient(135deg,#000,#111111 60%,#161616); border-bottom:1px solid rgba(255,216,176,.12); }
.page-body { padding:52px 0 72px; }
.page-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; }
.prose .card { margin-bottom:20px; }
.side-stack { display:grid; gap:20px; position:sticky; top:96px; }
.feature-img { width:100%; background:#050505; border-radius:22px; padding:16px; }
.site-footer { background:#050505; color:#DADADA; border-top:1px solid rgba(255,216,176,.18); padding:46px 0 80px; }
.footer-inner { max-width:1180px; margin:0 auto; padding:0 22px; }
.footer-brand img { width:130px; object-fit:contain; margin-bottom:14px; }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; margin:20px 0; }
.footer-links a { color:#ffd8b0; }
.footer-note { color:#9A9A9A; font-size:14px; }
.bottom-nav { display:none; }
@media (max-width: 980px) {
    .desktop-nav { display:none; }
    .menu-toggle { display:block; }
    .header-inner { min-height:66px; display:grid; grid-template-columns:52px 1fr auto; }
    .brand-logo { justify-self:center; }
    .brand-logo img { width:118px; }
    .header-btn { padding:10px 14px; font-size:14px; }
    .hero-grid, .page-layout, .split, .app-section { grid-template-columns:1fr; }
    .hero-cards, .grid-3, .zone-grid, .pill-grid { grid-template-columns:1fr 1fr; }
    .split.reverse .split-text, .split.reverse .image-card { order:initial; }
    .side-stack { position:static; }
}
@media (max-width: 640px) {
    .container { padding:0 16px; }
    .hero-section { padding:44px 0 26px; }
    .hero-cards, .grid-3, .grid-2, .zone-grid, .pill-grid { grid-template-columns:1fr; }
    .card, .zone-card, .info-card { padding:20px; border-radius:20px; }
    .hero-visual, .image-card { padding:12px; border-radius:22px; }
    .section { padding:46px 0; }
    .bottom-nav { position:fixed; z-index:9998; left:0; right:0; bottom:0; height:58px; background:#050505; border-top:1px solid rgba(255,216,176,.18); display:grid; grid-template-columns:repeat(4,1fr); }
    .bottom-nav a { display:flex; align-items:center; justify-content:center; color:#ffd8b0; font-size:13px; }
}