:root{
  --bg:#0a0f1f;
  --bg-2:#0d1328;
  --card:#0e1630aa;
  --card-solid:#121a36;
  --text:#e9eefb;
  --muted:#a9b3d2;
  --primary:#4db3ff;
  --primary-2:#2e96ff;
  --accent:#6e6bff;
  --ok:#2bd27f;
  --danger:#ff5b6a;
  --glass: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.12);
}

/* 基础 */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% 10%, #0c1a44, #060a16 70%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  font: 16px/1.4 "Inter", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Arial;
  overflow-x:hidden;
}

/* 背景动效 */
#bg-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-orb{
  position:fixed; z-index:0; border-radius:50%;
  filter: blur(40px) saturate(120%); opacity:.45;
  animation: float 14s ease-in-out infinite;
}
.orb-1{ width:460px; height:460px; left:-120px; top:-120px; background: radial-gradient(closest-side, #2e96ff, transparent); }
.orb-2{ width:360px; height:360px; right:8vw; top:10vh; background: radial-gradient(closest-side, #6e6bff, transparent); animation-delay:-3s; }
.orb-3{ width:420px; height:420px; left:10vw; bottom:-140px; background: radial-gradient(closest-side, #17d4ff, transparent); animation-delay:-6s; }

@keyframes float{
  0% { transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-20px,0); }
  100%{ transform: translate3d(0,0,0); }
}

/* 导航 */
.nav{
  position:sticky; top:0; z-index:5;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(8,12,30,.75), rgba(8,12,30,.35));
  border-bottom:1px solid var(--stroke);
  padding: 10px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__left{ display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; }
.brand__logo{ font-size:20px; }
.brand__name{ font-size:18px; }
.nav__menu a{ color:var(--muted); text-decoration:none; margin-right:18px; }
.nav__menu a:hover{ color:var(--text); }

.nav__right .btn{ margin-left:10px; }

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 16px; border-radius:12px; border:1px solid var(--stroke);
  color:var(--text); text-decoration:none; cursor:pointer;
  transition: all .22s ease; background:rgba(255,255,255,0.02);
}
.btn--primary{
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  border-color:transparent; color:#02172a; font-weight:700;
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow:0 8px 24px rgba(46,150,255,.4); }
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background: rgba(255,255,255,.06); }
.btn--outline{ background:transparent; border-color:#4db3ff80; color:#bfe2ff; }
.btn--outline:hover{ background:#1b2a4a; }
.btn--xl{ padding:14px 22px; border-radius:14px; font-size:16px; font-weight:700; }
.btn--block{ width:100%; }
.small{ padding:6px 10px; border-radius:9px; font-size:13px; }

.glow{ box-shadow: 0 0 0 rgba(77,179,255,0); }
.glow:hover{ box-shadow: 0 10px 30px rgba(77,179,255,.45), 0 0 60px rgba(77,179,255,.25) inset; }

/* 英雄区布局 */
.hero{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.1fr 0.9fr;
  gap:36px; padding: 60px 28px 40px; max-width: 1180px; margin: 0 auto;
}

/* 标题与副标题 */
.title{
  font-size:46px; line-height:1.05; margin: 18px 0 6px; font-weight:900;
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.title strong{ color:#a8d6ff; position:relative; }
.title strong::after{
  content:""; position:absolute; left:-6px; right:-6px; bottom:2px; height:10px;
  background: linear-gradient(90deg, #00d1ff40, #0080ff30); filter:blur(6px);
  border-radius:20px; z-index:-1;
}
.subtitle{ color: var(--muted); margin: 8px 0 22px; }

/* 左侧功能列表 */
.features{ list-style:none; padding:0; margin: 20px 0 26px; display:grid; gap:12px; max-width:680px; }
.features li{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px; background:var(--glass); border:1px solid var(--stroke); border-radius:14px;
}
.icon.ok{
  width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #19ffb2, #15cd84);
  box-shadow: 0 0 0 2px rgba(25,255,178,.2) inset, 0 4px 12px rgba(25,255,178,.25);
  flex: 0 0 auto; margin-top:2px; position:relative;
}
.icon.ok::after{
  content:""; position:absolute; inset:0;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="white" d="M6.2 11.3 3.2 8.2l-1.2 1.2 4.2 4.2 8-8-1.2-1.2z"/></svg>')
    center/12px 12px no-repeat;
  background:#031b12;
}
.f-text strong{ display:block; font-weight:800; }
.f-text em{ color:var(--muted); font-style:normal; }

/* 删除整排 CTA（根据需求隐藏） */
.cta{ display:none; }

/* 信任标识 */
.trust{ margin-top:8px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.trust .shield{
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #8cffea, #22b5ff);
  box-shadow: 0 2px 10px rgba(34,181,255,.35);
}

/* 右侧示例卡片（替代登录卡片） */
.demo-card{
  align-self:start;
  background: linear-gradient(180deg, rgba(18,26,54,.8), rgba(15,20,42,.6));
  border:1px solid var(--stroke);
  border-radius:20px;
  padding:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.demo-card__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 6px 8px;
  border-bottom:1px solid var(--stroke);
}
.demo-title{ font-weight:800; opacity:.95; }
.demo-figure{ padding:10px 6px 6px; }
.demo-tip{ color:var(--muted); font-size:13px; padding:8px 6px 4px; }

/* 示例家系图 SVG 主题 */
.pedigree{ width:100%; height:auto; display:block; }
.pedigree .legend-bg{ fill:#ffffff; fill-opacity:.06; stroke:var(--stroke); }
.pedigree .t{ fill:#e9eefb; font: 600 13px/1 "Inter", system-ui; }
.pedigree .t-muted{ fill:#a9b3d2; font: 12px/1 "Inter", system-ui; }

.pedigree .node{ fill:#0f1836; stroke:#2d3b63; stroke-width:2; }
.pedigree .edge{ stroke:#2d3b63; stroke-width:2; fill:none; }
.pedigree .spouse{
  stroke:#e74c3c; stroke-width:2; stroke-dasharray:6 4;
  animation: dash 2.8s linear infinite;
}
.pedigree .deceased{ stroke:#ef5350; stroke-width:2; }
.pedigree .proband{ fill:#f39c12; stroke:#fff; stroke-width:1; }
.pedigree .grid{ stroke:rgba(255,255,255,.05); stroke-width:1; }
.pedigree .grid-rect{ mix-blend-mode:overlay; }

@keyframes dash{ to { stroke-dashoffset:-20; } }

/* 场景区 */
.scenes{ max-width:1180px; margin: 40px auto; padding: 0 28px 40px; }
.sc-title{ font-size:20px; font-weight:900; margin-bottom:14px; opacity:.9; }
.sc-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.sc-card{
  padding:16px; border-radius:16px; background:var(--glass); border:1px solid var(--stroke);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  min-height:140px;
}
.sc-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35); background: #101a3a; }
.sc-icon{ font-size:22px; }
.sc-h{ font-weight:800; margin-top:8px; }
.sc-p{ color:var(--muted); margin-top:6px; }

/* 页脚 */
.footer{
  border-top:1px solid var(--stroke); color:var(--muted);
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 28px; max-width:1180px; margin: 0 auto 26px;
}

/* 响应式 */
@media (max-width: 1080px){
  .hero{ grid-template-columns: 1fr; }
  .demo-card{ order: -1; }
  .sc-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .nav{ padding:8px 14px; }
  .hero{ padding: 24px 14px; }
  .title{ font-size:34px; }
  .sc-grid{ grid-template-columns: 1fr; }
}