:root {
  --bg: #F5F7FF;
  --nav: rgba(12,18,40,.94);
  --title: #131A35;
  --primary: #5B6CFF;
  --deep: #16213E;
  --cyan: #00D4FF;
  --gold: #FFC857;
  --rose: #D94F70;
  --violet: #7A5CFF;
  --text: #1F2740;
  --muted: #66708A;
  --soft: #9AA4BA;
  --card: #FFFFFF;
  --dark-card: #11182F;
  --line: rgba(91,108,255,.18);
  --shadow: 0 20px 46px rgba(25,43,91,.14);
  --gradient: linear-gradient(135deg,#5B6CFF 0%,#7A5CFF 48%,#00D4FF 100%);
  --radius: 24px;
  --container: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  line-height: 1.75;
  overflow-x: hidden;
}
body.drawer-open { overflow: hidden; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--violet); }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 12000; background: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; }
.skip-link:focus { top: 0; }
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: var(--nav);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 26px rgba(25,43,91,.16);
}
.header-inner {
  max-width: 1280px;
  min-height: 72px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.site-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; white-space: nowrap; }
.site-logo:hover { color: #fff; }
.site-logo img { width: 44px; height: 44px; object-fit: contain; }
.site-logo strong { font-size: 20px; letter-spacing: .06em; }
.nav-core { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; }
.nav-core a { color: #EEF2FF; padding: 8px 12px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.nav-core a:hover, .nav-core a.active { color: #fff; background: rgba(0,212,255,.16); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 14px 32px rgba(91,108,255,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.main-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px rgba(91,108,255,.3); }
.menu-toggle { border: 0; background: rgba(255,255,255,.08); width: 44px; height: 44px; border-radius: 50%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.menu-toggle span { width: 18px; height: 2px; background: #fff; border-radius: 999px; }
.mobile-menu-toggle { display: none; }
.drawer-overlay { position: fixed; inset: 0; z-index: 10020; background: rgba(4,7,18,.6); opacity: 0; transition: opacity .25s ease; }
.drawer-overlay.show { opacity: 1; }
.site-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(390px, 92vw); padding: 24px; z-index: 10030; background: #fff; box-shadow: -24px 0 60px rgba(10,16,40,.22); transform: translateX(105%); transition: transform .3s ease; overflow-y: auto; }
.site-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.drawer-brand { display: flex; align-items: center; gap: 10px; color: var(--title); font-weight: 800; font-size: 20px; }
.drawer-brand img { width: 44px; height: 44px; object-fit: contain; }
.drawer-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #EEF1FF; color: var(--title); font-size: 28px; cursor: pointer; }
.drawer-nav { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.drawer-nav a { padding: 12px 14px; border-radius: 14px; color: var(--text); background: #F7F8FF; border: 1px solid transparent; }
.drawer-nav a:hover, .drawer-nav a.active { color: var(--primary); background: #EFF8FF; border-color: var(--line); }
.drawer-note { margin-top: 24px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg,#EFF8FF,#FFF4D6); }
.drawer-note strong { color: var(--title); }
.drawer-note p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
main { min-height: 60vh; }
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.section { padding: 84px 0; }
.section.compact { padding: 56px 0; }
.section-kicker { display: inline-block; color: var(--primary); font-weight: 800; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; }
.section-title, h1, h2, h3 { color: var(--title); line-height: 1.25; }
.section-title { margin: 8px 0 14px; font-size: clamp(30px,4vw,46px); }
.section-intro { max-width: 780px; margin: 0; color: var(--muted); }
.section-head { margin-bottom: 34px; }
.hero { position: relative; overflow: hidden; padding: 80px 0 66px; background: radial-gradient(circle at 15% 20%,rgba(122,92,255,.25),transparent 32%),radial-gradient(circle at 86% 18%,rgba(0,212,255,.24),transparent 30%),linear-gradient(135deg,#F7F2FF 0%,#EAF7FF 54%,#FFF1F7 100%); }
.hero::before,.hero::after { content:""; position:absolute; border-radius:50%; filter: blur(1px); pointer-events:none; }
.hero::before { width:280px;height:280px;right:-80px;bottom:-90px;background:rgba(255,200,87,.2); }
.hero::after { width:170px;height:170px;left:6%;top:35%;background:rgba(91,108,255,.12); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: center; }
.hero-copy h1 { margin: 12px 0 18px; font-size: clamp(48px,7vw,82px); letter-spacing: -.04em; }
.hero-subtitle { margin: 0 0 18px; color: var(--deep); font-size: clamp(22px,3vw,34px); font-weight: 700; }
.hero-copy p { color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 26px; }
.secondary-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; color: var(--title); background: rgba(255,255,255,.74); font-weight: 700; }
.secondary-btn:hover { color: var(--primary); background:#fff; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-points span { padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--deep); font-size: 14px; box-shadow: 0 10px 22px rgba(25,43,91,.08); }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; max-height: 600px; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(25,43,91,.18)); }
.floating-note { position:absolute; padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); color:var(--deep); font-weight:700; backdrop-filter: blur(8px); }
.note-one { left:-10px; top:12%; }.note-two { right:-6px; bottom:12%; }
.highlight-strip { position: relative; margin-top: -22px; z-index: 3; }
.highlight-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.highlight-item { background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:var(--shadow); }
.highlight-item h2 { margin:0 0 8px;font-size:19px; }.highlight-item p { margin:0;color:var(--muted);font-size:14px; }
.pill-nav { display:flex; flex-wrap:wrap; gap:12px; }
.pill-nav a { flex:1 1 180px; min-height:92px; padding:16px 18px; border-radius:18px; background:#fff; border:1px solid var(--line); color:var(--text); }
.pill-nav strong { display:block;color:var(--title);margin-bottom:4px; }.pill-nav span { color:var(--muted);font-size:13px; }
.split-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; align-items:stretch; }
.three-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card,.zone-card,.info-card,.review-card,.faq-item { background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius); }
.media-card { overflow:hidden; }
.media-card img,.zone-card img { width:100%; height:280px; object-fit:contain; background:linear-gradient(135deg,#F2F4FF,#EAF7FF); padding:14px; }
.card-body { padding:26px; }
.card-body h3 { margin:0 0 10px;font-size:24px; }.card-body p { color:var(--muted);margin:0 0 14px; }
.text-link { font-weight:800; color:var(--primary); }
.brand-panel { display:grid; grid-template-columns:.9fr 1.1fr; gap:42px; align-items:center; }
.brand-panel img { width:100%; max-height:500px; object-fit:contain; border-radius:28px; background:linear-gradient(135deg,#EAF7FF,#F7F2FF); padding:18px; box-shadow:var(--shadow); }
.brand-copy p { color:var(--muted); }
.service-points { display:grid; gap:12px; margin:20px 0; }
.service-point { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px; background:#F8F9FF; }
.service-point b { display:flex; align-items:center; justify-content:center; min-width:32px; height:32px; border-radius:50%; background:var(--gradient); color:#fff; }
.service-point p { margin:0;color:var(--muted);font-size:14px; }
.safety-section { background:linear-gradient(135deg,#11182F 0%,#16213E 60%,#1B2A52 100%); color:#EEF2FF; }
.safety-section h2,.safety-section h3 { color:#fff; }.safety-section p { color:#C7D1EA; }
.safety-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.safety-card { padding:28px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13); }
.safety-card img { width:100%; height:260px; object-fit:contain; margin-bottom:18px; }
.review-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
.review-card { padding:24px; }.review-card p { margin:0;color:var(--muted); }.review-card strong { display:block;margin-top:14px;color:var(--title); }
.faq-list { display:grid;gap:14px; }
.faq-item { padding:0;overflow:hidden;box-shadow:0 10px 30px rgba(25,43,91,.08); }
.faq-item details { padding:20px 24px; }.faq-item summary { cursor:pointer;font-weight:800;color:var(--title); }.faq-item p { color:var(--muted);margin:14px 0 0; }
.notice-band { background:linear-gradient(135deg,#FFF4D6,#F7F2FF,#EAF7FF); }
.notice-card { padding:34px;border-radius:26px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9); }
.notice-card h2 { margin-top:0; }.notice-card p { color:var(--muted); }
.inner-hero { padding:72px 0;background:radial-gradient(circle at 80% 18%,rgba(0,212,255,.22),transparent 28%),linear-gradient(135deg,#F3F0FF,#EAF7FF 58%,#FFF4F8); }
.inner-hero-grid { display:grid;grid-template-columns:1fr .8fr;gap:48px;align-items:center; }
.inner-hero h1 { font-size:clamp(40px,6vw,66px);margin:10px 0 18px; }.inner-hero p { color:var(--muted);font-size:17px; }
.inner-hero img { width:100%;max-height:460px;object-fit:contain;filter:drop-shadow(0 25px 40px rgba(25,43,91,.16)); }
.content-layout { display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start; }
.article-card { padding:34px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow); }
.article-card h2 { margin-top:36px;font-size:30px; }.article-card h2:first-child { margin-top:0; }.article-card h3 { margin-top:24px; }.article-card p { color:var(--muted); }.article-card ul { padding-left:20px;color:var(--muted); }.article-card li+li { margin-top:8px; }
.article-image { width:100%;max-height:440px;object-fit:contain;border-radius:22px;background:linear-gradient(135deg,#F4F5FF,#EAF7FF);padding:16px;margin:24px 0; }
.side-panel { position:sticky;top:96px;display:grid;gap:18px; }
.side-card { padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(25,43,91,.1); }
.side-card h2,.side-card h3 { margin-top:0;font-size:20px; }.side-card p { color:var(--muted);font-size:14px; }.side-card a { display:block;padding:7px 0;border-bottom:1px dashed rgba(91,108,255,.16); }.side-card a:last-child { border-bottom:0; }
.feedback-row { display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px; }.feedback-box { padding:20px;border-radius:18px;background:#F7F8FF;border:1px solid var(--line); }.feedback-box p { margin:0;color:var(--muted); }.feedback-box strong { display:block;margin-top:10px;color:var(--title); }
.info-table { width:100%;border-collapse:collapse;margin:22px 0; }.info-table th,.info-table td { padding:14px;border:1px solid var(--line);text-align:left;vertical-align:top; }.info-table th { width:28%;background:#F7F8FF;color:var(--title); }.info-table td { color:var(--muted); }
.site-footer { background:#0B1024;color:#EEF2FF;padding:64px 20px 24px; }
.footer-grid { width:min(100%,var(--container));margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px; }
.footer-logo { margin-bottom:14px; }.footer-brand p { color:#AFB9D2;max-width:420px; }.site-footer h2 { color:#fff;font-size:17px;margin:0 0 14px; }.site-footer a { display:block;color:#C9D1E5;padding:4px 0; }.site-footer a:hover { color:#fff; }
.footer-bottom { width:min(100%,var(--container));margin:42px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8F9AB7;font-size:14px; }
.footer-bottom div { display:flex;gap:18px; }.footer-bottom a { display:inline-block;padding:0; }
.mobile-bottom-nav { display:none; }
@media (max-width: 1080px) {
  .nav-core { gap:2px; }.nav-core a { padding:8px 8px;font-size:14px; }
  .hero-grid,.brand-panel,.inner-hero-grid { gap:32px; }
  .three-grid,.card-grid,.review-grid { grid-template-columns:repeat(2,1fr); }
  .content-layout { grid-template-columns:1fr 270px; }
}
@media (max-width: 860px) {
  .desktop-menu-toggle,.nav-core { display:none; }
  .mobile-menu-toggle { display:inline-flex; }
  .header-inner { min-height:66px;gap:10px; }
  .site-logo strong { display:none; }
  .site-logo { position:absolute;left:50%;transform:translateX(-50%); }
  .site-logo img { width:40px;height:40px; }
  .header-actions { margin-left:auto; }.header-cta { min-height:40px;padding:0 15px;font-size:14px; }
  .hero,.inner-hero { padding:54px 0; }
  .hero-grid,.brand-panel,.inner-hero-grid,.content-layout,.safety-grid { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }.hero-actions,.hero-points { justify-content:center; }
  .hero-visual { max-width:620px;margin:0 auto; }
  .highlight-grid { grid-template-columns:repeat(2,1fr); }
  .split-grid { grid-template-columns:1fr; }
  .side-panel { position:static;grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px) {
  body { padding-bottom:70px; }
  .container { width:min(calc(100% - 28px),var(--container)); }
  .section { padding:58px 0; }.section.compact { padding:42px 0; }
  .hero-copy h1 { font-size:48px; }.hero-subtitle { font-size:24px; }.hero-copy p,.inner-hero p { font-size:15px; }
  .floating-note { font-size:12px;padding:9px 12px; }.note-one { left:0; }.note-two { right:0; }
  .highlight-grid,.three-grid,.card-grid,.review-grid,.feedback-row,.side-panel { grid-template-columns:1fr; }
  .highlight-strip { margin-top:0;padding-top:14px; }
  .media-card img,.zone-card img { height:220px; }
  .article-card { padding:24px 20px; }.article-card h2 { font-size:26px; }
  .drawer-nav { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr;gap:28px 18px; }.footer-brand { grid-column:1/-1; }
  .footer-bottom { flex-direction:column;align-items:flex-start; }
  .mobile-bottom-nav { position:fixed;left:0;right:0;bottom:0;z-index:9000;height:64px;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(11,16,36,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.1);padding-bottom:env(safe-area-inset-bottom); }
  .mobile-bottom-nav a { color:#EEF2FF;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;gap:1px; }.mobile-bottom-nav span { font-size:18px;color:var(--cyan);line-height:1; }
}
@media (max-width: 380px) {
  .header-inner { padding:0 12px; }.header-cta { padding:0 12px;font-size:13px; }
  .drawer-nav { grid-template-columns:1fr; }
}