@charset "utf-8";

/* ===== 囧次元 · 墨松夜 / 琥珀金 · 书签母题 =====
   底 墨松夜 #0C1A16 · 主 琥珀金 #E3A33C · 辅 孔雀青 #2FA8B8 · 点缀 绯珊瑚 #FF6B5B
   渲染语言：对话气泡描边   骨架：Hero 左文右图 → 主栏＋粘性侧栏 → 竖列左对齐清单
   动效：纯 CSS @keyframes trackIn（letter-spacing 收拢） */

:root{
  --bg:#0C1A16; --bg2:#12241E; --card:#17302A; --line:#24443A;
  --ink:#EDF4F0; --ink2:#A9C0B7; --ink3:#7C958B;
  --gold:#E3A33C; --gold-d:#A9741F; --gold-l:#3A2E14;
  --teal:#2FA8B8; --teal-d:#1C7C8A; --teal-l:#103A40;
  --coral:#FF6B5B;
  --r:18px; --w:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.85 "Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3{line-height:1.35; margin:0}
ul,ol{margin:0; padding:0; list-style:none}
p{margin:0}
figure{margin:0}
figcaption{margin-top:9px; color:var(--ink3); font-size:13px}

.container{width:100%; max-width:var(--w); margin:0 auto; padding:0 22px}

/* ── 入场动效：trackIn（与滚动无关，只用纯 CSS）── */
@keyframes trackIn{
  from{opacity:0; letter-spacing:.16em}
  to{opacity:1; letter-spacing:normal}
}
.track{animation:trackIn .62s cubic-bezier(.2,.7,.3,1) both}
.hero h1{animation-delay:.08s}
.sec-h h2{animation-delay:.06s}
.band h2{animation-delay:.06s}
@media (prefers-reduced-motion:reduce){
  .track{animation:none; opacity:1; letter-spacing:normal}
}

/* ── 通用小件 ── */
.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; letter-spacing:.14em; color:var(--teal);
}
.kicker::before{
  content:""; width:9px; height:9px; border-radius:2px;
  background:var(--coral); transform:rotate(45deg);
}
.sec{padding:74px 0; border-top:1px solid var(--line)}
.sec-h{margin-bottom:30px; max-width:760px}
.sec-h h2{font-size:27px; letter-spacing:.01em}
.sec-h .sub{margin-top:10px; color:var(--ink2); font-size:15px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:12px; font-size:15px; font-weight:700;
  border:2px solid transparent; cursor:pointer; letter-spacing:.04em;
}
.btn--gold{background:var(--gold); color:#0C1A16}
.btn--gold:hover{background:#F0B457; color:#0C1A16}
.btn--ghost{border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn--sm{padding:9px 17px; font-size:13.5px; border-radius:10px}
.android-icon{width:20px; height:20px; flex:0 0 auto}

/* ── 顶部导航 ── */
.top{position:sticky; top:0; z-index:30; background:rgba(12,26,22,.93);
  border-bottom:1px solid var(--line); backdrop-filter:blur(9px)}
.top__in{display:flex; align-items:center; gap:20px; min-height:68px; padding:9px 0}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); flex:0 0 auto}
.brand img{width:40px; height:40px; border-radius:12px}
.brand span{font-size:20px; font-weight:800; letter-spacing:.1em}
.nav{display:flex; align-items:center; gap:24px; margin-left:auto}
.nav a{color:var(--ink2); font-size:14.5px}
.nav a:hover{color:var(--gold)}
.nav a[aria-current="page"]{color:var(--gold); font-weight:700}
.top__cta{margin-left:22px}
.burger{
  display:none; margin-left:auto; width:44px; height:40px; border-radius:10px;
  border:2px solid var(--line); background:transparent; cursor:pointer;
  position:relative;
}
.burger i{position:absolute; left:11px; width:20px; height:2px; background:var(--ink)}
.burger i:nth-child(1){top:13px}
.burger i:nth-child(2){top:19px}
.burger i:nth-child(3){top:25px}

/* ── Hero：深底通栏 + 右下琥珀金斜切块 + 左上点阵 ── */
.hero{position:relative; padding:70px 0 78px; background:
  linear-gradient(178deg,#0C1A16 0%,#102420 58%,#0C1A16 100%)}
.hero::before{
  content:""; position:absolute; left:0; top:0; width:46%; height:52%;
  background-image:radial-gradient(rgba(47,168,184,.30) 1.4px,transparent 1.4px);
  background-size:14px 14px; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; right:0; bottom:0; width:42%; height:90%;
  background:linear-gradient(135deg,rgba(227,163,60,0),rgba(227,163,60,.19));
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);
  pointer-events:none;
}
.hero__in{position:relative; display:grid; grid-template-columns:1.18fr .82fr;
  gap:44px; align-items:center}
.hero h1{font-size:42px; letter-spacing:.02em; margin:14px 0 18px}
.hero-lead{color:var(--ink2); font-size:16px; max-width:590px}
.hero__acts{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.cta-note{margin-top:16px; color:var(--ink3); font-size:13.5px}
.cta-note::before{content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--teal); vertical-align:middle}
.hero-perks{margin-top:8px; color:var(--gold); font-size:13.5px; font-weight:700}
.hero__shot{width:100%; max-width:320px; margin:0 auto}
.hero__shot img{width:100%; height:auto; border-radius:22px;
  box-shadow:0 0 0 1px var(--line),0 26px 58px rgba(0,0,0,.55)}

/* ── 卡片：对话气泡描边 ── */
.cards{display:grid; gap:26px; margin-top:26px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:22px}
.bub{position:relative}
.bub::before{
  content:""; position:absolute; left:28px; top:-12px; width:18px; height:18px;
  background:var(--card); border-left:2px solid var(--line); border-top:2px solid var(--line);
  transform:rotate(45deg);
}
.card h3{font-size:17px; margin-bottom:9px; color:var(--gold)}
.card p{color:var(--ink2); font-size:14.5px}
.card__shot{width:100%; max-width:206px; margin:0 auto 16px}
.card__shot img{width:100%; height:auto; border-radius:14px; box-shadow:0 0 0 1px var(--line)}

/* ── 竖列左对齐清单 ── */
.stack{margin-top:20px; border-top:1px solid var(--line)}
.stack li{display:flex; gap:14px; padding:15px 0; border-bottom:1px dashed var(--line)}
.stack b{flex:0 0 132px; color:var(--gold); font-size:14.5px}
.stack span{color:var(--ink2); font-size:14.5px}

/* ── 主栏＋粘性侧栏 ── */
.split{display:grid; grid-template-columns:1.85fr 1fr; gap:36px; align-items:start}
.aside{position:sticky; top:88px}
.aside .card + .card{margin-top:20px}
.facts li{display:flex; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px dashed var(--line); font-size:14px}
.facts li:last-child{border-bottom:0}
.facts span{color:var(--ink3)}
.facts b{color:var(--ink); font-weight:700}
.prose p + p{margin-top:15px}
.prose{color:var(--ink2)}

/* ── 预览画廊 ── */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:26px}
.shot{background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:14px}
.shot img{width:100%; height:auto; border-radius:12px}

/* ── 数据表：窄屏靠容器横滑，说明文字放在表格外 ── */
.tbl-cap{margin-top:26px; color:var(--ink2); font-size:14px}
.tbl-scroll{overflow-x:auto; margin-top:14px; border:2px solid var(--line); border-radius:var(--r)}
.tbl{width:100%; min-width:560px; border-collapse:collapse; font-size:14px}
.tbl th,.tbl td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--bg2); color:var(--gold); font-weight:700; white-space:nowrap}
.tbl td{color:var(--ink2)}
.tbl td:first-child{color:var(--ink); font-weight:700}
.tbl tbody tr:last-child td{border-bottom:0}

/* ── 评价 ── */
.quote{background:var(--card); border:2px solid var(--line); border-radius:var(--r); padding:22px}
.quote p{color:var(--ink2); font-size:14.5px}
.quote footer{margin-top:14px; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  color:var(--ink3); font-size:13.5px}
.review-age{flex-basis:100%; font-size:12px; color:var(--ink3)}
.stars{color:var(--coral); letter-spacing:.16em; font-size:13px}

/* ── FAQ ── */
.faq{margin-top:20px}
.faq details{border:2px solid var(--line); border-radius:var(--r); background:var(--card);
  padding:16px 20px; margin-top:14px}
.faq summary{cursor:pointer; font-weight:700; color:var(--ink); font-size:15.5px}
.faq summary::marker{color:var(--gold)}
.faq details[open] summary{color:var(--gold)}
.faq p{margin-top:11px; color:var(--ink2); font-size:14.5px}

/* ── 入口卡 ── */
.xentry{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:26px}
.xentry a{display:block; background:var(--card); border:2px solid var(--line);
  border-radius:var(--r); padding:20px; color:var(--ink)}
.xentry a:hover{border-color:var(--gold); color:var(--ink)}
.xentry em{display:block; font-style:normal; font-size:12.5px; letter-spacing:.12em;
  color:var(--coral); margin-bottom:8px}
.xentry b{display:block; font-size:16px; margin-bottom:7px}
.xentry p{color:var(--ink2); font-size:13.5px}

/* ── 内页横幅 ── */
.page-hero{position:relative; padding:56px 0 50px; border-bottom:1px solid var(--line);
  background:linear-gradient(172deg,#102420,#0C1A16)}
.page-hero::after{
  content:""; position:absolute; right:0; top:0; width:34%; height:100%;
  background:linear-gradient(135deg,rgba(47,168,184,0),rgba(47,168,184,.16));
  clip-path:polygon(42% 0,100% 0,100% 100%,0 100%); pointer-events:none;
}
.page-hero__in{position:relative}
.page-hero h1{font-size:34px; margin:12px 0 16px}
.page-hero .page-lead{color:var(--ink2); max-width:760px; font-size:15.5px}
.crumb{margin-top:20px; font-size:13.5px; color:var(--ink3)}
.crumb a{color:var(--ink3)}
.crumb a:hover{color:var(--gold)}

/* ── CTA 通栏 ── */
.band{padding:60px 0; border-top:1px solid var(--line); background:
  linear-gradient(120deg,rgba(227,163,60,.13),rgba(47,168,184,.12))}
.band__in{display:flex; flex-wrap:wrap; align-items:center; gap:26px; justify-content:space-between}
.band h2{font-size:25px}
.band .sub{margin-top:9px; color:var(--ink2); font-size:14.5px; max-width:660px}

/* ── 页脚 ── */
.foot{padding:52px 0 30px; background:#0A1714; border-top:1px solid var(--line)}
.foot__in{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px}
.foot h3{font-size:15px; color:var(--gold); margin-bottom:13px}
.foot li{margin-bottom:9px}
.foot li a,.foot p{color:var(--ink3); font-size:13.5px}
.foot li a:hover{color:var(--gold)}
.foot__brand{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.foot__brand img{width:34px; height:34px; border-radius:9px}
.foot__brand span{font-weight:800; letter-spacing:.1em}
.disclaim{margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--ink3); font-size:13px}
.copy{margin-top:12px; color:var(--ink3); font-size:13px}

/* ── 断点 ── */
@media (max-width:980px){
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#102420; border-bottom:1px solid var(--line); padding:10px 22px 18px;
  }
  .nav a{padding:11px 0; width:100%; border-bottom:1px solid var(--line)}
  .burger{display:block}
  .burger[aria-expanded="true"] ~ .nav{display:flex}
  .top__cta{margin-left:0}
  .hero{padding:48px 0 58px}
  .hero__in{grid-template-columns:1fr; gap:36px}
  .hero h1{font-size:33px}
  .hero__shot{max-width:290px}
  .split{grid-template-columns:1fr; gap:28px}
  .aside{position:static}
  .cards--3,.cards--2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr); gap:20px}
  .xentry{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
  .band__in{flex-direction:column; align-items:flex-start}
}
@media (max-width:620px){
  .sec{padding:52px 0}
  .sec-h h2{font-size:22px}
  .hero{padding:38px 0 46px}
  .hero h1{font-size:27px}
  .hero__shot{max-width:252px}
  .gallery{grid-template-columns:1fr}
  .xentry{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
  .page-hero{padding:40px 0 38px}
  .page-hero h1{font-size:25px}
  .card,.quote,.faq details{padding:18px}
  .stack b{flex:0 0 104px; font-size:13.5px}
  .stack span,.card p,.quote p,.faq p{font-size:14px}
  .btn{padding:12px 20px; font-size:14px}
  .btn--sm{padding:8px 13px; font-size:12.5px}
  .band h2{font-size:21px}
}