html, body { margin: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
* { box-sizing: border-box; }
body { background:#000000; color:#F3F3F3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif; line-height:1.75; }
a { color:#ffd8b0; text-decoration:none; }
a:hover { color:#F2C995; }
.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.16); }
.header-inner { max-width:1280px; margin:0 auto; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 24px; }
.brand img { height:44px; width:auto; display:block; }
.desktop-nav { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
.desktop-nav a { color:#ffd8b0; padding:9px 12px; border-radius:999px; font-size:15px; position:relative; }
.desktop-nav a.active, .desktop-nav a:hover { background:#111111; box-shadow: inset 0 -2px 0 rgba(255,216,176,0.55), 0 8px 20px rgba(255,216,176,0.08); }
.main-btn { background:#ffd8b0; color:#000000; border-radius:999px; box-shadow:0 10px 24px rgba(255,216,176,0.22); padding:10px 20px; font-weight:700; white-space:nowrap; transition:.2s ease; }
.main-btn:hover { background:#F2C995; color:#000000; transform:translateY(-1px); }
main { position:relative; z-index:1; }
.container { max-width:1200px; margin:0 auto; padding:72px 24px; }
.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%); border-bottom:1px solid rgba(255,216,176,0.14); }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:42px; align-items:center; }
.eyebrow, .tag { color:#ffd8b0; border:1px solid rgba(255,216,176,0.26); background:rgba(255,216,176,0.08); display:inline-flex; border-radius:999px; padding:5px 12px; font-size:13px; letter-spacing:.08em; }
h1, h2, h3 { color:#ffd8b0; line-height:1.25; margin:0 0 16px; }
h1 { font-size: clamp(34px, 5vw, 62px); }
h2 { font-size: clamp(26px, 3.2vw, 40px); }
h3 { font-size:22px; }
p { color:#C9C9C9; margin:0 0 16px; }
.lead { font-size:18px; color:#F3F3F3; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.text-link { border-bottom:1px solid rgba(255,216,176,.45); }
.hero-visual, .image-card, .card, .zone-card, .info-card, .service-strip, .app-panel, .notice-panel, .faq-item, .page-hero { background:#111111; border:1px solid rgba(255,216,176,0.18); box-shadow:0 14px 36px rgba(0,0,0,0.42); border-radius:28px; }
.hero-visual { padding:22px; background:linear-gradient(145deg,#111111,#1D1D1D); box-shadow:0 0 58px rgba(255,216,176,0.10), 0 14px 36px rgba(0,0,0,0.42); }
.content-img, .zone-card img, .app-section img, .hero-visual img, .image-card img { max-width:100%; height:auto; object-fit:contain; display:block; margin:0 auto; border-radius:20px; }
.hero-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.hero-badges span, .pill { background:#161616; border:1px solid rgba(255,216,176,.18); border-radius:18px; padding:12px; color:#ffd8b0; text-align:center; }
.quick-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cat-card { padding:18px; border-radius:22px; background:#111111; border:1px solid rgba(255,216,176,.18); min-height:140px; }
.cat-card b { display:block; color:#ffd8b0; font-size:22px; margin-bottom:8px; }
.service-strip { padding:26px; margin-top:26px; }
.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 { padding:26px; }
.card ul, .info-card ul, .copy-block ul { margin:12px 0 0; padding-left:20px; color:#C9C9C9; }
.alt-row { display:grid; grid-template-columns: .95fr 1.05fr; gap:30px; align-items:center; margin:28px 0; }
.alt-row.reverse { grid-template-columns: 1.05fr .95fr; }
.image-card { padding:20px; min-height:260px; display:flex; align-items:center; justify-content:center; }
.zone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.zone-card { overflow:hidden; }
.zone-card img { width:100%; padding:18px; max-height:210px; }
.zone-card .zone-copy { padding:0 22px 24px; }
.app-panel { display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; align-items:center; padding:28px; }
.notice-panel { padding:28px; background:#161616; }
.faq-list { display:grid; gap:16px; }
.faq-item { padding:22px; }
.page-hero { margin:42px auto 0; padding:46px; max-width:1200px; }
.page-grid { display:grid; grid-template-columns: 1fr .75fr; gap:30px; align-items:start; }
.copy-block { background:#111111; border:1px solid rgba(255,216,176,.18); border-radius:28px; padding:30px; margin:22px 0; }
.section-title { margin-bottom:24px; }
.site-footer { background:#050505; color:#DADADA; border-top:1px solid rgba(255,216,176,.16); }
.footer-inner { max-width:1200px; margin:0 auto; padding:42px 24px 80px; }
.footer-brand { display:grid; grid-template-columns:160px 1fr; gap:26px; align-items:center; }
.footer-brand img { width:150px; height:auto; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; margin:24px 0; }
.footer-note { color:#9A9A9A; font-size:14px; }
.menu-toggle { display:none; background:transparent; border:0; width:42px; height:42px; padding:8px; }
.menu-toggle span { display:block; height:2px; background:#ffd8b0; margin:6px 0; }
.drawer-mask { position:fixed; inset:0; background:rgba(0,0,0,.62); opacity:0; pointer-events:none; z-index:10000; transition:.2s; }
.mobile-drawer { position:fixed; top:0; left:0; height:100%; width:84%; max-width:320px; background:linear-gradient(180deg,#111111,#000000); border-right:1px solid rgba(255,216,176,.22); z-index:10001; transform:translateX(-105%); transition:.25s ease; padding:18px; overflow-y:auto; }
.drawer-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid rgba(255,216,176,.16); }
.drawer-head img { height:42px; }
.drawer-close { background:#ffd8b0; color:#000; border:0; border-radius:50%; width:34px; height:34px; font-size:24px; }
.drawer-nav { display:grid; gap:8px; padding-top:18px; }
.drawer-nav a { padding:12px 14px; border-radius:14px; color:#ffd8b0; background:#161616; border:1px solid rgba(255,216,176,.12); }
.drawer-nav a.active { background:#242424; border-color:rgba(255,216,176,.42); }
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; }
@media (max-width: 980px) { .desktop-nav { display:none; } .menu-toggle { display:block; } .header-inner { min-height:64px; padding:0 14px; } .brand { position:absolute; left:50%; transform:translateX(-50%); } .brand img { height:38px; } .main-btn { padding:8px 14px; font-size:14px; } .hero-grid, .page-grid, .app-panel, .alt-row, .alt-row.reverse { grid-template-columns:1fr; } .quick-cats, .grid-3, .zone-grid, .grid-2 { grid-template-columns:1fr 1fr; } .container { padding:48px 18px; } .page-hero { margin:26px 18px 0; padding:30px 22px; } .footer-brand { grid-template-columns:1fr; } .bottom-nav { position:fixed; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(4,1fr); background:#050505; border-top:1px solid rgba(255,216,176,.18); z-index:9998; } .bottom-nav a { text-align:center; padding:10px 4px; color:#ffd8b0; font-size:13px; } }
@media (max-width: 620px) { .quick-cats, .grid-3, .zone-grid, .grid-2, .hero-badges { grid-template-columns:1fr; } h1 { font-size:32px; } .hero-actions { align-items:stretch; flex-direction:column; } .hero-actions a { text-align:center; } .image-card { min-height:180px; } }