/* ==========================================================
   趣览纪官网 V2 · 共享样式（子页用）
   设计体系：光学玻璃浅色主站 + 深色叙事/数据段
   ========================================================== */
:root {
  --ink: #1d1d1f;
  --ink-2: #515154;
  --ink-3: #86868b;
  --paper: #f5f5f7;
  --accent-1: #5b5bf7;
  --accent-3: #ff7a45;
  --grad: linear-gradient(95deg, #5b5bf7, #d459ff 55%, #ff7a45);
  --dark: #0a0e1a;
  --dark-2: #0e1424;
  --radius: 24px;
  --shadow-lg: 0 40px 90px rgba(30, 30, 60, .16);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink); background: var(--paper);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 6vw; }

/* ---------- 导航 ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all .4s var(--ease-out); }
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 4vw;
  height: 76px; display: flex; align-items: center; justify-content: space-between;
  transition: height .4s var(--ease-out);
}
.nav.scrolled {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.nav.scrolled .nav-inner { height: 62px; }
.nav-logo img { height: 44px; transition: height .4s; }
.nav.scrolled .nav-logo img { height: 38px; }
.nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }
.nav-links a, .drop-label {
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  position: relative; transition: color .25s;
}
.nav-links > li > a:hover, .nav-drop:hover .drop-label { color: var(--ink); }
.nav-links > li > a.active { color: var(--accent-1); font-weight: 600; }
.nav-cta {
  font-size: 14px; font-weight: 600; color: #fff;
  background: var(--ink); padding: 10px 24px; border-radius: 999px;
  transition: all .3s;
}
.nav-cta:hover { background: var(--accent-1); transform: translateY(-1px); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

.nav-drop { position: relative; }
.nav-drop .drop-label { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-drop .caret { font-style: normal; font-size: 10px; color: var(--ink-3); transition: transform .25s; }
.nav-drop:hover .caret { transform: rotate(180deg); }
.drop-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 300px; padding: 10px; border-radius: 18px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 24px 70px rgba(30,30,60,.18);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: all .3s var(--ease-out);
}
.nav-drop:hover .drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.drop-menu a { display: flex; flex-direction: column; gap: 2px; padding: 13px 16px; border-radius: 12px; transition: background .2s; }
.drop-menu a:hover { background: rgba(91,91,247,.07); }
.drop-menu b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.drop-menu span { font-size: 12px; color: var(--ink-3); }

.mobile-menu {
  display: none; background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,.06); padding: 10px 6vw 22px;
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 13px 0; font-size: 15px; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid rgba(0,0,0,.05); }
.mobile-menu .mm-group { font-size: 12px; color: var(--ink-3); letter-spacing: .14em; padding: 16px 0 4px; }

/* ---------- 通用组件 ---------- */
.eyebrow {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ink-3); }
.sec-head { max-width: 680px; margin: 0 auto 70px; text-align: center; }
.sec-head .eyebrow { justify-content: center; }
.sec-head .eyebrow::before { display: none; }
.sec-head h2 { font-size: clamp(32px, 4.2vw, 54px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.sec-head p { margin-top: 18px; font-size: 17px; color: var(--ink-2); }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 38px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 600;
  transition: all .35s var(--ease-out);
}
.btn-primary:hover { background: var(--accent-1); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(91,91,247,.35); }
.btn-text { font-size: 15px; font-weight: 600; color: var(--accent-1); }
.btn-text:hover { text-decoration: underline; }
.btn-glow {
  position: relative; display: inline-flex; padding: 17px 46px; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: #fff;
  background: var(--grad); background-size: 200% 100%;
  transition: all .35s;
}
.btn-glow:hover { background-position: 100% 0; transform: translateY(-3px); box-shadow: 0 18px 50px rgba(212,89,255,.4); }

.glass-card {
  border-radius: 28px; overflow: hidden;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.03);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
}
.float { animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 深色段通用 */
.dark-sec { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.dark-sec .eyebrow-l { font-size: 13px; font-weight: 700; color: #8f88ff; letter-spacing: .22em; margin-bottom: 22px; }
.glow { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }

/* 页脚 */
.footer { background: #05070d; color: #6b7694; padding: 46px 0; }
.footer-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 4vw;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
}
.footer img { height: 40px; filter: brightness(0) invert(1); opacity: .8; }
.footer .links { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; }
.footer .links a:hover { color: #fff; }
.footer .icp { width: 100%; text-align: center; font-size: 12px; margin-top: 18px; }
.footer .icp a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.footer .icp a:hover { color: #a49cff; border-color: rgba(164,156,255,.5); }

/* 滚动渐显 */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .hero { padding-top: 110px; }
}