/* ═══════════════════════════════════════════════════════════
   点画科技 · 设计系统
   手写、零依赖。改配色只改下面的 token 即可。
   ═══════════════════════════════════════════════════════════ */

/* ── 1. 设计 token ───────────────────────────────────────── */
:root{
  --bg:#ffffff;
  --bg-2:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --border:#e6e8ec;
  --border-2:#d5d9e0;

  --fg:#0b1220;
  --fg-2:#4a5361;
  --fg-3:#7d8695;

  --accent:#1b4dd8;
  --accent-2:#0f3bb5;
  --accent-soft:#eef3ff;
  --accent-line:#c9d9ff;

  --ok:#0f7a4a;
  --ok-soft:#e8f6ee;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:22px;

  --shadow-sm:0 1px 2px rgba(11,18,32,.05), 0 1px 1px rgba(11,18,32,.03);
  --shadow-md:0 4px 14px -4px rgba(11,18,32,.10), 0 2px 6px -2px rgba(11,18,32,.06);
  --shadow-lg:0 24px 60px -22px rgba(11,18,32,.24), 0 8px 24px -12px rgba(11,18,32,.12);

  --wrap:1080px;
  --wrap-narrow:760px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
         'PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#080b11;
    --bg-2:#0c1017;
    --surface:#11151e;
    --surface-2:#151a24;
    --border:#232936;
    --border-2:#303847;

    --fg:#e9ecf1;
    --fg-2:#a3acba;
    --fg-3:#737d8c;

    --accent:#7ea6ff;
    --accent-2:#9dbaff;
    --accent-soft:#111d33;
    --accent-line:#24365c;

    --ok:#4fd39a;
    --ok-soft:#0e2620;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 16px -4px rgba(0,0,0,.5);
    --shadow-lg:0 28px 64px -24px rgba(0,0,0,.7), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}

/* ── 2. 基础 ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  font-feature-settings:'cv11','ss01';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.2; color:var(--fg)}
p{margin:0}
hr{border:0; border-top:1px solid var(--border); margin:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
.narrow{max-width:var(--wrap-narrow); margin:0 auto; padding:0 28px}
@media (max-width:560px){ .wrap,.narrow{padding:0 20px} }

.muted{color:var(--fg-2)}
.faint{color:var(--fg-3)}
.small{font-size:.875rem}
.tiny{font-size:.8rem; line-height:1.55}

/* 双语显隐 */
html[lang="en"] .zh{display:none !important}
html[lang="zh"] .en{display:none !important}

/* ── 3. 顶栏 ─────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.bar{display:flex; align-items:center; gap:28px; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--fg); font-weight:700;
       letter-spacing:-.02em; font-size:1.02rem; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{display:block; flex:none}
nav{margin-left:auto; display:flex; align-items:center; gap:4px}
nav a{
  color:var(--fg-2); font-size:.9rem; font-weight:500;
  padding:7px 13px; border-radius:8px; transition:background .15s, color .15s;
}
nav a:hover{color:var(--fg); background:var(--bg-2); text-decoration:none}
nav a[aria-current]{color:var(--fg)}
#lang{
  cursor:pointer; font:inherit; font-size:.82rem; font-weight:600;
  color:var(--fg-2); background:transparent;
  border:1px solid var(--border); border-radius:999px;
  padding:5px 13px; margin-left:6px; transition:all .15s;
}
#lang:hover{color:var(--fg); border-color:var(--border-2); background:var(--bg-2)}
@media (max-width:640px){
  nav a[data-hide-sm]{display:none}
  .bar{gap:12px}
}

/* ── 4. 板块与排版 ───────────────────────────────────────── */
section{padding:88px 0}
section.tight{padding:56px 0}
section.flush{padding:0}
section.flush-top{padding-top:0}   /* 紧跟页头的内容块，别再叠一次上边距 */
@media (max-width:720px){ section{padding:60px 0} section.tight{padding:40px 0} }

.eyebrow{
  display:inline-block; color:var(--accent); font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:18px;
}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.22rem); color:var(--fg-2); line-height:1.6}
.h-sec{font-size:clamp(1.45rem,1.15rem + 1.1vw,1.95rem); margin-bottom:14px}
.h-page{font-size:clamp(1.85rem,1.4rem + 1.7vw,2.5rem); letter-spacing:-.03em; margin-bottom:16px}
.sub{color:var(--fg-2); max-width:62ch; margin-bottom:44px}

/* ── 5. 首屏 ─────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:104px 0 96px;
  border-bottom:1px solid var(--border);
}
.hero::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:130%;
  background:
    radial-gradient(58% 62% at 22% 8%, var(--accent-soft) 0%, transparent 68%),
    radial-gradient(46% 50% at 88% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(72% 62% at 30% 22%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(72% 62% at 30% 22%, #000 0%, transparent 78%);
  opacity:.5; pointer-events:none;
}
.hero > *{position:relative; z-index:1}
.hero-grid{
  display:grid; gap:56px; align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:940px){ .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:48px} }
.hero h1{
  font-size:clamp(2.15rem,1.35rem + 3.3vw,3.4rem);
  line-height:1.06; letter-spacing:-.035em; margin-bottom:22px;
}
.hero .lead{max-width:56ch; margin-bottom:32px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* 首屏右侧：带着色边框的产品图 */
.hero-visual{position:relative}
.hero-visual img{
  width:100%; max-width:340px; margin-inline:auto; border-radius:var(--radius-xl);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  background:var(--surface);
}
@media (min-width:940px){ .hero-visual{margin-right:-24px} }

/* ── 6. 按钮 ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.94rem; font-weight:600; line-height:1;
  padding:13px 20px; border-radius:10px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .12s, box-shadow .18s, background .18s, border-color .18s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-2); box-shadow:var(--shadow-md); transform:translateY(-1px)}
@media (prefers-color-scheme: dark){ .btn-primary{color:#08111f} }
.btn-primary[aria-disabled="true"]{
  background:var(--surface); color:var(--fg-2);
  border-color:var(--border-2); box-shadow:var(--shadow-sm); cursor:default;
}
.btn-primary[aria-disabled="true"]:hover{transform:none; background:var(--surface)}
.btn-ghost{border-color:var(--border); color:var(--fg); background:var(--surface)}
.btn-ghost:hover{border-color:var(--border-2); background:var(--bg-2); transform:translateY(-1px)}
.btn svg{flex:none}

/* ── 7. 徽标与标签 ───────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:600;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:999px; padding:4px 12px;
}
.badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none;
}
.badge.live{color:var(--ok); background:var(--ok-soft);
  border-color:color-mix(in srgb, var(--ok) 28%, transparent)}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-size:.78rem; font-weight:500; color:var(--fg-2);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:7px; padding:4px 10px;
}

/* ── 8. 卡片与栅格 ───────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px;
  box-shadow:var(--shadow-sm);
}
.cards{display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:700px){ .cards.two{grid-template-columns:1fr 1fr}
                          .cards.three{grid-template-columns:repeat(3,1fr)} }
.card h3{font-size:1.02rem; margin-bottom:9px; letter-spacing:-.015em}
.card p{color:var(--fg-2); font-size:.925rem; line-height:1.62}
.card .ico{
  width:36px; height:36px; border-radius:9px; margin-bottom:16px;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid var(--accent-line);
}

/* ── 9. App 卡片 ─────────────────────────────────────────── */
/* auto-fit：1 个 App 就占满整行，加到 2 个以上自动分栏，不用改代码 */
.app-list{display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(340px,1fr))}
.app-card{
  display:flex; flex-direction:column; gap:18px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.app-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-2)}
.app-head{display:flex; gap:16px; align-items:flex-start}
.app-icon{
  width:56px; height:56px; border-radius:14px; flex:none;
  box-shadow:var(--shadow-sm);
}
.app-head h3{font-size:1.15rem; margin-bottom:5px; letter-spacing:-.02em}
.app-head .tag{color:var(--fg-2); font-size:.9rem; line-height:1.5}
.app-card .blurb{max-width:64ch}
.app-card .chips{margin-top:auto}
.app-card .more{
  font-size:.9rem; font-weight:600; display:inline-flex; align-items:center; gap:6px;
}
.app-card .more::after{content:"→"; transition:transform .18s}
.app-card:hover .more::after{transform:translateX(3px)}

/* App 详情页首屏 */
.app-hero{display:grid; gap:48px; align-items:center; padding:88px 0 72px}
@media (min-width:940px){ .app-hero{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)} }
.app-hero-icon{width:84px; height:84px; border-radius:20px; margin-bottom:24px; box-shadow:var(--shadow-md)}
.app-hero h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.9rem); margin-bottom:16px; letter-spacing:-.03em}
.app-hero .lead{margin-bottom:26px; max-width:54ch}
.app-hero .meta-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:28px}

/* ── 10. App 截图框 ──────────────────────────────────────── */
.shot{
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--shadow-lg);
}
.shot img{width:100%}

/* ── 11. 功能列表 ────────────────────────────────────────── */
.features{display:grid; gap:36px 44px; grid-template-columns:1fr}
@media (min-width:760px){ .features{grid-template-columns:1fr 1fr} }
.feature h3{
  font-size:1.02rem; margin-bottom:9px;
  display:flex; align-items:baseline; gap:10px;
}
.feature h3::before{
  content:""; width:7px; height:7px; border-radius:2px; flex:none;
  background:var(--accent); transform:translateY(-2px);
}
.feature p{color:var(--fg-2); font-size:.93rem; line-height:1.64}

/* ── 12. 长文排版（隐私政策 / 支持） ─────────────────────── */
.prose h2{font-size:1.12rem; margin:44px 0 12px}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:.98rem; margin:26px 0 8px}
.prose p, .prose li{color:var(--fg-2); font-size:.94rem; line-height:1.72}
.prose p + p{margin-top:12px}
.prose ul{margin:12px 0; padding-left:0; list-style:none}
.prose ul li{position:relative; padding-left:20px; margin-bottom:7px}
.prose ul li::before{
  content:""; position:absolute; left:3px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.prose code{
  font-family:var(--mono); font-size:.86em;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:5px; padding:.1em .4em;
}

/* ── 13. 定义列表（公司信息） ────────────────────────────── */
dl.meta{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:12px 28px; margin:0;
}
dl.meta dt{color:var(--fg-3); font-size:.88rem; white-space:nowrap}
dl.meta dd{margin:0; font-size:.92rem; color:var(--fg-2)}
@media (max-width:560px){
  dl.meta{grid-template-columns:1fr; gap:3px 0}
  dl.meta dd{margin-bottom:16px}
}

/* ── 14. 标注条（诚实说明） ──────────────────────────────── */
.note{
  border-left:3px solid var(--accent-line);
  background:var(--surface-2);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;
}
.note h3{font-size:.95rem; margin-bottom:7px}
.note p{color:var(--fg-2); font-size:.91rem; line-height:1.65}

/* ── 15. 页脚 ────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--border);
  background:var(--bg-2);
  padding:52px 0 64px; margin-top:0;
}
.foot-grid{display:grid; gap:32px}
@media (min-width:720px){ .foot-grid{grid-template-columns:1.6fr 1fr 1fr} }
footer .brand{margin-bottom:12px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
footer ul a, footer ul span{color:var(--fg-2); font-size:.88rem}
footer ul a:hover{color:var(--fg)}
footer .col-title{
  font-size:.76rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:14px;
}
.foot-bottom{
  border-top:1px solid var(--border); margin-top:40px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  color:var(--fg-3); font-size:.8rem; line-height:1.6;
}

/* ── 16. 进场动画 ────────────────────────────────────────── */
/* 渐进增强：初始隐藏态只在 html 上有 js-reveal 时生效。
   这样即使 site.js 加载失败，正文也一定可见 —— 内容不能依赖 JS 才显示。 */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .reveal{
    opacity:0; transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  }
  .js-reveal .reveal.in{opacity:1; transform:none}
}
@media print{ header,footer,.hero::before,.hero::after{display:none} }


/* ── 17. 工具类 ──────────────────────────────────────────── */
.band{background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.stack > * + *{margin-top:1.05em}
.mt-24{margin-top:24px} .mt-32{margin-top:32px} .mt-40{margin-top:40px}
.center{text-align:center}


/* ── 18. 首屏要点 ────────────────────────────────────────── */
.hero-points{
  list-style:none; margin:34px 0 0; padding:26px 0 0;
  border-top:1px solid var(--border);
  display:grid; gap:13px; max-width:44ch;
}
.hero-points li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.9rem; color:var(--fg-2); line-height:1.5;
}
.hero-points svg{flex:none; margin-top:2px; color:var(--accent)}


/* ── 19. 窄屏：首屏配图收小 ──────────────────────────────── */
@media (max-width:680px){
  .hero-visual img{max-width:240px}
  .hero{padding:64px 0 56px}
  .hero-points{margin-top:26px; padding-top:20px; gap:11px}
  .hero-points li{font-size:.86rem}
  .app-hero{padding:56px 0 48px}
  .app-hero-icon{width:68px; height:68px; border-radius:16px; margin-bottom:18px}
}