* { box-sizing: border-box; }
:root {
  --bg:#151A23; --nav:#151A23; --panel:#1B2130; --panel-2:#202738; --panel-3:#252D40;
  --gold:#F1DCA3; --gold-hover:#E3C98F; --text:#E8ECF5; --muted:#B8C0D3; --soft:#8F98AD;
  --footer:#0E121A; --line:rgba(241,220,163,0.14); --shadow:0 14px 36px rgba(0,0,0,0.28);
}
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,sans-serif; background:#151A23; color:#E8ECF5; line-height:1.78; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
a { color:#F1DCA3; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.site-header { position:sticky; top:0; z-index:9999; background:#151A23; backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(0,0,0,0.22); border-bottom:1px solid rgba(241,220,163,0.10); }
.desktop-header { max-width:1240px; margin:0 auto; min-height:74px; padding:0 22px; display:flex; align-items:center; gap:18px; }
.logo-wrap img { width:142px; max-height:48px; object-fit:contain; }
.desktop-nav { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; }
.desktop-nav a, .nav-group>button { color:#F1DCA3; border:0; background:transparent; cursor:pointer; font:inherit; font-size:15px; padding:22px 12px; border-radius:14px; white-space:nowrap; transition:.2s ease; }
.desktop-nav a:hover, .nav-group>button:hover, .desktop-nav a.active, .nav-group.active-group>button { background:linear-gradient(180deg,rgba(241,220,163,0.10),rgba(241,220,163,0.02)); box-shadow:inset 0 -2px 0 #F1DCA3,0 10px 22px rgba(241,220,163,0.16); }
.nav-group { position:relative; }
.nav-dropdown { position:absolute; top:66px; left:50%; transform:translateX(-50%) translateY(8px); width:168px; padding:10px; background:#1B2130; border:1px solid rgba(241,220,163,0.14); border-radius:16px; box-shadow:0 18px 34px rgba(0,0,0,0.34); opacity:0; pointer-events:none; transition:.2s ease; }
.nav-group:hover .nav-dropdown { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dropdown a { display:block; padding:9px 12px; border-radius:10px; font-size:14px; }
.main-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#F1DCA3; color:#151A23; border-radius:999px; padding:10px 20px; font-weight:700; box-shadow:0 10px 24px rgba(241,220,163,0.18); transition:.2s ease; border:1px solid rgba(241,220,163,0.35); white-space:nowrap; }
.main-btn:hover { background:#E3C98F; color:#151A23; transform:translateY(-1px); }
.header-btn { flex:0 0 auto; }
.mobile-header { display:none; min-height:66px; padding:0 14px; align-items:center; justify-content:space-between; background:#151A23; }
.menu-toggle { width:42px; height:42px; border:1px solid rgba(241,220,163,0.22); border-radius:12px; background:#1B2130; display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; }
.menu-toggle span { width:20px; height:2px; background:#F1DCA3; border-radius:4px; }
.mobile-logo img { width:116px; max-height:42px; object-fit:contain; }
.mobile-reg { padding:8px 13px; font-size:13px; }
.drawer-mask { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.62); }
.mobile-drawer { position:fixed; top:0; left:0; z-index:10000; width:84vw; max-width:320px; height:100vh; background:#1B2130; border-right:1px solid rgba(241,220,163,0.16); transform:translateX(-102%); transition:transform .28s ease; box-shadow:18px 0 44px rgba(0,0,0,0.34); overflow-y:auto; }
.mobile-drawer.open { transform:translateX(0); }
.drawer-head { min-height:74px; padding:16px; display:flex; align-items:center; justify-content:space-between; background:#202738; border-bottom:1px solid rgba(241,220,163,0.12); }
.drawer-logo img { width:126px; max-height:42px; object-fit:contain; }
.drawer-close { width:38px; height:38px; border-radius:50%; border:1px solid rgba(241,220,163,0.25); background:#151A23; color:#F1DCA3; font-size:26px; cursor:pointer; line-height:1; }
.drawer-nav { padding:14px; }
.drawer-nav a { display:block; color:#F1DCA3; padding:12px 14px; margin:6px 0; border-radius:14px; background:rgba(241,220,163,0.04); border:1px solid transparent; }
.drawer-nav a.active, .drawer-nav a:hover { border-color:rgba(241,220,163,0.22); background:linear-gradient(90deg,rgba(241,220,163,0.14),rgba(241,220,163,0.03)); }
.site-main { min-height:70vh; }
.container { width:min(1200px, calc(100% - 32px)); margin:0 auto; }
.hero-section { max-width:1200px; margin:28px auto 36px; border-radius:22px; background:radial-gradient(circle at 16% 18%,rgba(241,220,163,0.12) 0%,rgba(241,220,163,0) 32%),linear-gradient(135deg,#1B2130 0%,#202738 56%,#151A23 100%); box-shadow:0 18px 40px rgba(0,0,0,0.30); overflow:hidden; position:relative; border:1px solid rgba(241,220,163,0.14); }
.hero-inner { display:grid; grid-template-columns:1.02fr .98fr; gap:28px; align-items:center; padding:48px; }
.hero-copy h1, .inner-hero h1 { color:#F1DCA3; font-size:clamp(32px,4.2vw,56px); line-height:1.18; margin:12px 0 18px; }
.eyebrow,.tag { display:inline-flex; align-items:center; color:#F1DCA3; font-weight:700; letter-spacing:.08em; font-size:13px; }
.hero-copy p,.inner-hero p,.section-intro,.card p,.zone-card p,.info-card p,.review-card p,.step-card p,.notice-card p,.footer-brand p,.footer-note p { color:#B8C0D3; margin:0; }
.hero-actions { display:flex; gap:18px; align-items:center; margin-top:28px; flex-wrap:wrap; }
.text-link { color:#F1DCA3; font-weight:700; display:inline-flex; align-items:center; gap:6px; margin-top:12px; }
.text-link::after { content:"›"; font-size:19px; line-height:1; }
.hero-media { background:rgba(14,18,26,.26); border-radius:22px; padding:16px; border:1px solid rgba(241,220,163,.12); }
.content-img,.zone-card img,.app-section img,.hero-section img,.image-panel img,.inner-hero img { max-width:100%; height:auto; object-fit:contain; }
.hero-media img,.image-panel img { width:100%; max-height:360px; margin:0 auto; }
.section { padding:34px 0; }
.section-head { margin-bottom:22px; display:flex; justify-content:space-between; align-items:end; gap:22px; }
.section-title,h1,h2,h3,.nav a { color:#F1DCA3; }
.section-title { font-size:clamp(24px,3vw,36px); margin:0 0 8px; line-height:1.25; }
.section-intro { max-width:860px; }
.welcome-box,.summary-box,.notice-band,.compliance-box { background:linear-gradient(135deg,#1B2130,#202738); border:1px solid rgba(241,220,163,.14); border-radius:20px; padding:26px; box-shadow:0 14px 36px rgba(0,0,0,.22); }
.pill-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pill-card { background:#1B2130; border:1px solid rgba(241,220,163,.14); border-radius:18px; padding:20px; min-height:154px; transition:.2s ease; }
.pill-card:hover,.card:hover,.zone-card:hover,.info-card:hover { transform:translateY(-2px); border-color:rgba(241,220,163,.30); }
.num { display:inline-flex; min-width:36px; height:26px; padding:0 10px; align-items:center; justify-content:center; border-radius:999px; background:rgba(241,220,163,.12); color:#F1DCA3; font-weight:800; margin-bottom:12px; }
.card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card,.zone-card,.info-card,.review-card,.step-card,.notice-card { background:#1B2130; border:1px solid rgba(241,220,163,.14); box-shadow:0 14px 36px rgba(0,0,0,.25); border-radius:20px; padding:22px; }
.card h3,.zone-card h3,.info-card h3,.review-card h3,.step-card h3,.notice-card h3 { margin:0 0 10px; color:#F1DCA3; }
.feature-row { display:grid; grid-template-columns:.92fr 1.08fr; gap:24px; align-items:center; margin-bottom:24px; background:#1B2130; border:1px solid rgba(241,220,163,.14); border-radius:22px; padding:22px; box-shadow:0 14px 36px rgba(0,0,0,.22); }
.feature-row.reverse { grid-template-columns:1.08fr .92fr; }
.feature-text p { color:#B8C0D3; }
.service-points { display:grid; gap:8px; margin:16px 0; padding:0; list-style:none; }
.service-points li { color:#E8ECF5; padding-left:18px; position:relative; }
.service-points li::before { content:""; width:7px; height:7px; border-radius:50%; background:#F1DCA3; position:absolute; left:0; top:.85em; }
.image-panel { background:#202738; border-radius:18px; padding:14px; border:1px solid rgba(241,220,163,.12); }
.wall-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.zone-card { padding:0; overflow:hidden; }
.zone-card .zone-img { background:#202738; padding:14px; border-bottom:1px solid rgba(241,220,163,.10); }
.zone-card img { width:100%; max-height:190px; margin:0 auto; }
.zone-body { padding:20px; }
.app-section { display:grid; grid-template-columns:1fr .86fr; align-items:center; gap:24px; }
.app-section .image-panel img { max-height:300px; }
.notice-grid,.review-grid,.faq-grid,.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review-grid { grid-template-columns:repeat(3,1fr); }
.review-card strong { color:#F1DCA3; display:block; margin-bottom:8px; }
.faq-grid { grid-template-columns:repeat(2,1fr); }
.faq-item { background:#1B2130; border:1px solid rgba(241,220,163,.14); border-radius:18px; padding:20px; }
.faq-item h3 { color:#F1DCA3; margin:0 0 8px; }
.faq-item p { color:#B8C0D3; margin:0; }
.inner-hero { max-width:1200px; margin:28px auto; border-radius:22px; padding:42px; background:radial-gradient(circle at 80% 18%,rgba(241,220,163,.11),transparent 34%),linear-gradient(135deg,#1B2130,#202738 62%,#151A23); border:1px solid rgba(241,220,163,.14); box-shadow:0 18px 40px rgba(0,0,0,.28); display:grid; grid-template-columns:1fr .78fr; align-items:center; gap:28px; }
.inner-hero.no-image { display:block; }
.inner-hero img { max-height:310px; margin:0 auto; }
.content-columns { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }
.rich-text { background:#1B2130; border:1px solid rgba(241,220,163,.14); border-radius:20px; padding:26px; box-shadow:0 14px 36px rgba(0,0,0,.22); }
.rich-text p { color:#B8C0D3; }
.rich-text h2,.rich-text h3 { color:#F1DCA3; }
.check-list { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.check-list li { color:#E8ECF5; background:rgba(241,220,163,.05); border:1px solid rgba(241,220,163,.10); border-radius:14px; padding:12px 14px 12px 34px; position:relative; }
.check-list li::before { content:"•"; color:#F1DCA3; position:absolute; left:16px; top:10px; font-weight:900; }
.compliance-box { margin:34px auto 0; }
.compliance-box h2 { margin-top:0; color:#F1DCA3; }
.site-footer { background:#0E121A; color:#D5DBEA; margin-top:54px; border-top:1px solid rgba(241,220,163,.12); }
.footer-inner { width:min(1200px, calc(100% - 32px)); margin:0 auto; padding:42px 0 30px; display:grid; grid-template-columns:1fr 2.1fr; gap:34px; }
.footer-brand img { width:148px; max-height:48px; object-fit:contain; margin-bottom:16px; }
.footer-brand .main-btn { margin-top:18px; }
.footer-links { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.footer-links h3 { color:#F1DCA3; margin:0 0 12px; }
.footer-links a { display:block; color:#D5DBEA; margin:8px 0; font-size:14px; }
.footer-links a:hover { color:#F1DCA3; }
.footer-note { width:min(1200px, calc(100% - 32px)); margin:0 auto; padding:18px 0 28px; border-top:1px solid rgba(241,220,163,.10); color:#D5DBEA; font-size:14px; }
@media (max-width:1120px) {
  .desktop-nav a,.nav-group>button { padding-left:9px; padding-right:9px; font-size:14px; }
  .logo-wrap img { width:122px; }
  .card-grid,.pill-grid,.wall-grid { grid-template-columns:repeat(2,1fr); }
  .notice-grid,.step-grid,.review-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .desktop-header { display:none; }
  .mobile-header { display:flex; }
  .hero-inner,.inner-hero,.app-section,.feature-row,.feature-row.reverse,.content-columns { grid-template-columns:1fr; }
  .hero-inner,.inner-hero { padding:28px; }
  .feature-row.reverse .feature-text { order:1; }
  .feature-row.reverse .image-panel { order:2; }
  .section-head { display:block; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-links { grid-template-columns:repeat(2,1fr); }
  .faq-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .container { width:min(100% - 24px, 1200px); }
  .hero-section,.inner-hero { margin:18px 12px 24px; border-radius:18px; }
  .hero-inner,.inner-hero { padding:22px; }
  .hero-copy h1,.inner-hero h1 { font-size:30px; }
  .card-grid,.pill-grid,.wall-grid,.notice-grid,.step-grid,.review-grid,.footer-links { grid-template-columns:1fr; }
  .section { padding:24px 0; }
  .feature-row { padding:16px; }
  .main-btn { padding:9px 15px; }
  .mobile-reg { padding:7px 10px; }
}