/* ===== 主题变量（深色基因，和“狗子”一脉） ===== */
:root{
  --bg:#0b0f14; --ink:#e6f0ff; --muted:#a5b4c7;
  --panel:#0f1520; --panel-2:#131926; --line:#1b2432;
  --brand:#5aa2ff; --accent:#7dd3fc;
  --good:#16a34a; --warn:#f59e0b;
  --br:14px; --shadow:0 8px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1100px 800px at 20% -10%, #111a27 0%, transparent 60%),
    radial-gradient(800px 700px at 80% 10%, #1a1130 0%, transparent 60%),
    var(--bg);
  font:15px/1.75 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Microsoft YaHei",Arial;
}

/* ===== 顶部导航：双 Logo 样式（抄狗子的对齐策略） ===== */
.navbar{
  position:sticky; top:0; z-index:1000;
  height:60px; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,.75); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* 双 Logo：两张图并排，通过 scale 对齐视觉高度 */
.logo-container{display:inline-flex; align-items:center; gap:0}
.logo-container img{height:40px; display:block; vertical-align:middle}
.logo-container img:first-child{transform:scale(1.2); transform-origin:left center} /* 图标略放大 */
.logo-container img:last-child {transform:scale(1.2); transform-origin:left center} /* 字标更放大 */

.hamburger{
  display:none; appearance:none; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:var(--ink); border-radius:8px; padding:6px 10px; cursor:pointer;
}

.nav-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.nav-links a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:13px;
  padding:6px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  opacity:.9;
}
.nav-links a:hover{opacity:1}
.nav-links a.active{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(90,162,255,.18) inset;
}

/* 移动端：折叠为抽屉 */
@media (max-width: 840px){
  .hamburger{display:block}
  .nav-links{
    position:fixed; right:12px; top:60px; min-width:220px;
    display:none; flex-direction:column; align-items:stretch; gap:10px;
    background:rgba(15,19,27,.96); border:1px solid rgba(255,255,255,.1);
    border-radius:12px; padding:12px; box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
}

/* ===== 区块与文字 ===== */
.section{max-width:1080px; margin:28px auto; padding:0 16px; scroll-margin-top:90px}
.section h2{font-size:28px; font-weight:800; margin:10px 0 8px}
.section h3{font-size:18px; font-weight:700; margin:8px 0 6px}
.section p,.section li{opacity:.94}

.hero{margin-top:14px; padding-top:8px}
.hero-content{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--br); padding:26px 22px; box-shadow:var(--shadow);
}
.hero h1{font-size:36px; letter-spacing:.3px; margin:6px 0 6px}
.subhead{color:var(--muted); font-size:16px; margin:6px 0 0; text-wrap:balance; max-width:70ch}

/* 可选 SVG 锁图 */
.hero-figure{margin:10px 0 0}
.hero-figure svg{width:68px; height:68px; fill:none; stroke:var(--accent); stroke-width:2.5}
.hero-figure svg rect,
.hero-figure svg path,
.hero-figure svg circle{stroke:var(--accent)}

.bullets{margin:10px 0; padding-left:18px}
.bullets li{margin:6px 0}

/* 栅格卡片 */
.grid-2{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg,#101522,#0f141f);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--br); padding:16px 16px 14px; box-shadow:var(--shadow);
}

/* Retention */
.retention{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:820px){.retention{grid-template-columns:1fr}}
.ret-box{
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--br); padding:14px 16px;
  background:linear-gradient(180deg,#0f1623,#0f1520);
  box-shadow:var(--shadow);
}
.ret-box.good{border-color:rgba(22,163,74,.45); box-shadow:0 0 0 3px rgba(22,163,74,.12) inset}
.ret-box.warn{border-color:rgba(245,158,11,.45); box-shadow:0 0 0 3px rgba(245,158,11,.12) inset}

.note{
  margin-top:10px; font-size:13px; color:var(--muted);
  border-left:3px solid rgba(122,91,51,.8); padding-left:10px;
}

/* FAQ */
details{
  background:linear-gradient(180deg,#101522,#0f141f);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--br); padding:10px 12px; margin:10px 0;
}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer; font-weight:700; outline:none}

/* 页脚 */
.footer{
  margin:36px auto 22px; max-width:1080px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; color:var(--muted);
}
.footer a{color:var(--ink); text-decoration:none; font-weight:700}
.footer a:hover{text-decoration:underline}

/* 入场动画 */
.reveal{opacity:0; transform:translateY(12px)}
.reveal.show{opacity:1; transform:none; transition:opacity .45s ease, transform .45s ease}