/* JIGVAS 官网共享样式 · 果冻质感 / 透明顶栏 / 便当盒栅格
   品牌色取自 App 图标：紫 #8B5CF6 · 蓝 #3B82F6 · 青 #14B8A6 */

:root {
  --ink: #17181c;
  --ink-2: #55575f;
  --ink-3: #8a8c94;
  --bg: #f7f7f9;
  --card: #ffffff;
  --hairline: rgba(23, 24, 28, .08);
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --teal: #14b8a6;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 55%, #14b8a6 120%);
  --radius: 20px;
  --shadow: 0 10px 34px rgba(23, 24, 28, .08);
  --shadow-soft: 0 4px 18px rgba(23, 24, 28, .06);
  --wrap: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---------- 顶栏（透明，呼应 App） ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(247, 247, 249, .78);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 28px;
  height: 64px; display: flex; align-items: center; gap: 30px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: .04em; }
.logo img { width: 30px; height: 30px; border-radius: 7px; }
.nav-links { display: flex; gap: 4px; margin-left: 8px; flex: 1; }
.nav-links a {
  padding: 7px 14px; border-radius: 999px; font-size: 14.5px; color: var(--ink-2);
  transition: background .18s, color .18s;
}
.nav-links a:hover { color: var(--ink); background: rgba(23, 24, 28, .05); }
.nav-links a.active { color: var(--ink); background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 .5px var(--hairline), 0 2px 8px rgba(23,24,28,.07); }

/* 语言切换 */
.lang {
  display: flex; align-items: center; border: 1px solid var(--hairline);
  border-radius: 999px; padding: 2px; background: rgba(255,255,255,.7); cursor: pointer; user-select: none;
}
.lang span { padding: 3px 11px; font-size: 12.5px; border-radius: 999px; color: var(--ink-3); font-weight: 600; }
.lang span.on { background: var(--ink); color: #fff; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 26px; border-radius: 999px; font-size: 15.5px; font-weight: 700;
  transition: transform .18s, box-shadow .18s; border: 0; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-jelly { background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(99, 102, 241, .35); }
.btn-jelly:hover { box-shadow: 0 12px 28px rgba(99, 102, 241, .45); }
.btn-ghost { background: rgba(255,255,255,.85); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline), 0 2px 10px rgba(23,24,28,.06); }
.btn-sm { padding: 8px 18px; font-size: 13.5px; }

/* ---------- 首屏 ---------- */
.hero { padding: 84px 0 66px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 130%;
  background:
    radial-gradient(38% 42% at 30% 32%, rgba(139, 92, 246, .13), transparent 70%),
    radial-gradient(36% 40% at 62% 28%, rgba(59, 130, 246, .13), transparent 70%),
    radial-gradient(30% 36% at 46% 60%, rgba(20, 184, 166, .11), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-icon { width: 108px; height: 108px; margin: 0 auto 30px; border-radius: 24px; }
.hero h1 { font-size: 52px; line-height: 1.22; letter-spacing: -.01em; font-weight: 800; }
.hero h1 .g {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { max-width: 640px; margin: 22px auto 0; font-size: 19px; color: var(--ink-2); }
.hero .cta { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .meta { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.hero-shot {
  max-width: 980px; margin: 58px auto 0; border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--hairline); overflow: hidden; background: #fff;
}

/* ---------- 分区通用 ---------- */
section { padding: 76px 0; }
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.sec-head .kicker {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--blue); background: rgba(59, 130, 246, .09); padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.sec-head h2 { font-size: 34px; font-weight: 800; letter-spacing: -.01em; }
.sec-head p { margin-top: 12px; color: var(--ink-2); font-size: 16.5px; }

/* 便当盒功能区 */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bento .cell {
  background: var(--card); border-radius: var(--radius); padding: 30px 28px;
  box-shadow: var(--shadow-soft); border: 1px solid var(--hairline);
  transition: transform .2s, box-shadow .2s;
}
.bento .cell:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bento .cell.wide { grid-column: span 2; }
.bento .cell .ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; color: #fff; }
.bento .cell h3 { font-size: 18.5px; margin-bottom: 8px; }
.bento .cell p { font-size: 14.5px; color: var(--ink-2); }
.ic.purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.ic.blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.ic.teal { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }
.ic.dark { background: linear-gradient(135deg, #334155, #17181c); }

/* 截图展示条 */
.shot-band { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.shot-band figure {
  border-radius: var(--radius); overflow: hidden; background: #fff;
  box-shadow: var(--shadow-soft); border: 1px solid var(--hairline);
}
.shot-band img { width: 100%; height: 100%; object-fit: cover; }
.shot-band figcaption { padding: 14px 20px; font-size: 13.5px; color: var(--ink-2); border-top: 1px solid var(--hairline); }

/* 风格卡（CSS 微缩示意） */
.styles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.style-card { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--hairline); background: #fff; transition: transform .2s, box-shadow .2s; }
.style-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.style-card .thumb { height: 150px; position: relative; overflow: hidden; }
.style-card .name { padding: 13px 16px; font-size: 14px; font-weight: 700; }
.style-card .name small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }

/* 风格缩略示意：swiss */
.t-swiss { background: #f4f2ec; padding: 14px; }
.t-swiss .b1 { height: 12px; width: 78%; background: #d64541; margin-bottom: 9px; }
.t-swiss .row { display: flex; gap: 7px; }
.t-swiss .b2 { width: 34%; height: 62px; background: #2f6e9e; }
.t-swiss .b3 { flex: 1; }
.t-swiss .b3 i { display: block; height: 26px; background: #b23f2c; margin-bottom: 7px; }
.t-swiss .b3 u { display: block; height: 26px; background: #3f7a3f; text-decoration: none; }
/* jp editorial */
.t-jp { background: #f6f4ef; padding: 14px; }
.t-jp .v { width: 3px; height: 88px; background: #8a8a86; float: left; margin-right: 10px; }
.t-jp .h { height: 10px; width: 88%; background: #23231f; margin-bottom: 8px; }
.t-jp .h2 { height: 6px; width: 62%; background: #b9b7ae; margin-bottom: 8px; }
.t-jp .h3 { height: 6px; width: 74%; background: #b9b7ae; }
/* brutal */
.t-brutal { background: #f5f2ea; padding: 14px; }
.t-brutal .blk { height: 46px; background: #111; border: 2px solid #111; margin-bottom: 9px; }
.t-brutal .yel { height: 30px; background: #ffd400; border: 2px solid #111; }
/* bento */
.t-bento { background: #f6f6f8; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; }
.t-bento i { border-radius: 9px; display: block; }
.t-bento i:nth-child(1) { background: #f0a24b; }
.t-bento i:nth-child(2) { background: #8a877e; grid-row: span 1; }
.t-bento i:nth-child(3) { background: #2e5f8a; }
.t-bento i:nth-child(4) { background: #23262b; }
/* nordic */
.t-nordic { background: #eef1f2; padding: 14px; }
.t-nordic .ln { height: 8px; background: #cf5c4f; width: 46%; margin-bottom: 10px; }
.t-nordic .soft { height: 56px; background: #cfd8d6; border-radius: 10px; margin-bottom: 9px; }
.t-nordic .soft2 { height: 14px; width: 70%; background: #b8c4c2; border-radius: 6px; }

/* 隐私区（深色对比段） */
.privacy-band { background: #17181c; color: #f2f2f4; border-radius: 28px; padding: 58px 54px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 46px; align-items: center; }
.privacy-band h2 { font-size: 30px; font-weight: 800; }
.privacy-band p { color: #b9bac2; margin-top: 14px; font-size: 15.5px; }
.privacy-band ul { list-style: none; }
.privacy-band li { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: 14.5px; display: flex; gap: 12px; align-items: baseline; }
.privacy-band li b { color: #fff; }
.privacy-band li span.dot { color: var(--teal); font-weight: 800; }

/* 定价预告 */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: 0 auto; }
.price-card { background: var(--card); border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--shadow-soft); border: 1px solid var(--hairline); }
.price-card.pro { background: linear-gradient(160deg, rgba(139,92,246,.07), rgba(20,184,166,.07)); box-shadow: 0 0 0 1.5px rgba(139,92,246,.35), var(--shadow-soft); }
.price-card .tier { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--ink-3); }
.price-card .num { font-size: 38px; font-weight: 800; margin: 10px 0 2px; }
.price-card .num small { font-size: 15px; color: var(--ink-3); font-weight: 400; }
.price-card ul { list-style: none; margin-top: 16px; }
.price-card li { font-size: 14.5px; color: var(--ink-2); padding: 7px 0; }
.price-card li::before { content: "✓"; color: var(--teal); font-weight: 800; margin-right: 10px; }
.price-card .soon { display: inline-block; margin-top: 18px; font-size: 12.5px; font-weight: 700; color: var(--purple); background: rgba(139,92,246,.1); border-radius: 999px; padding: 4px 13px; }

/* ---------- 内容页（download/guide/privacy/terms） ---------- */
.page { padding: 64px 0 90px; }
.page-head { margin-bottom: 40px; }
.page-head h1 { font-size: 38px; font-weight: 800; }
.page-head p { color: var(--ink-2); margin-top: 10px; font-size: 16.5px; }
.panel { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 32px 34px; margin-bottom: 20px; }
.panel h2 { font-size: 21px; margin-bottom: 14px; }
.panel h3 { font-size: 16.5px; margin: 20px 0 8px; }
.panel p, .panel li { font-size: 15px; color: var(--ink-2); }
.panel ul, .panel ol { padding-left: 22px; }
.panel li { margin: 6px 0; }
.panel .req { display: inline-block; background: rgba(20,184,166,.1); color: var(--teal); font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 4px 13px; margin-right: 8px; }
/* 下载页：DMG 主按钮 + ZIP 次要链接（主次分明，不让用户做选择题） */
.dl-main { padding: 15px 32px; font-size: 16.5px; margin: 14px 0 0; }
.dl-main svg { width: 18px; height: 18px; }
.dl-main-meta { font-size: 13px; color: var(--ink-3); margin-top: 12px; }
.dl-alt { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.dl-alt a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.dl-alt a:hover { color: var(--ink); }
.dl-alt .dot { opacity: .45; }
.changelog { list-style: none; padding: 0; }
.changelog li { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.changelog .ver { font-weight: 800; font-size: 16px; }
.changelog .date { color: var(--ink-3); font-size: 13px; margin-left: 10px; }
.changelog ul { margin-top: 8px; }

/* 教程卡 */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.guide-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s; display: block; }
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.guide-card .no { font-size: 13px; font-weight: 800; color: var(--blue); letter-spacing: .1em; }
.guide-card h3 { font-size: 19px; margin: 8px 0 8px; }
.guide-card p { font-size: 14.5px; color: var(--ink-2); }
.guide-body .panel { margin-bottom: 26px; }
.kbd { display: inline-block; background: #f0f0f3; border: 1px solid var(--hairline); border-bottom-width: 2px; border-radius: 6px; padding: 1px 8px; font-size: 13px; font-family: ui-monospace, "SF Mono", monospace; color: var(--ink); }

/* ---------- 页脚 ---------- */
footer { border-top: 1px solid var(--hairline); background: #fff; padding: 52px 0 40px; margin-top: 30px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.foot-grid .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.foot-grid .brand img { width: 26px; height: 26px; border-radius: 6px; }
.foot-grid p { font-size: 13.5px; color: var(--ink-3); margin-top: 12px; max-width: 300px; }
.foot-grid h4 { font-size: 13px; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 14px; font-weight: 700; }
.foot-grid a { display: block; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
.foot-grid a:hover { color: var(--ink); }
.foot-base { max-width: var(--wrap); margin: 34px auto 0; padding: 22px 28px 0; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; gap: 8px; }

/* 响应式 */
@media (max-width: 900px) {
  .hero h1 { font-size: 38px; }
  .bento, .styles, .pricing, .guide-grid, .privacy-band, .shot-band { grid-template-columns: 1fr; }
  .bento .cell.wide { grid-column: span 1; }
  .nav-links { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ v2 增补：8 模块落地页 ============ */

/* 顶栏 CTA 带图标感 */
.nav-cta { white-space: nowrap; }

/* 首屏视频 */
.hero-video {
  position: relative; max-width: 1040px; margin: 52px auto 0;
  border-radius: 22px; overflow: hidden; background: #0f1013;
  box-shadow: 0 24px 70px rgba(23, 24, 28, .16), 0 0 0 1px rgba(23, 24, 28, .06);
}
.hero-video video, .hero-video img { display: block; width: 100%; height: auto; }
.hero-video .vbadge {
  position: absolute; left: 16px; bottom: 16px; display: flex; gap: 7px; align-items: center;
  background: rgba(15, 16, 19, .62); color: #fff; font-size: 12px; padding: 6px 13px;
  border-radius: 999px; backdrop-filter: blur(10px);
}
.hero-video .vbadge i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; display: block; }

/* 值主张条（4 个数字/事实） */
.value-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: #fff; border: 1px solid var(--hairline); border-radius: 18px;
  box-shadow: var(--shadow-soft); overflow: hidden; margin-top: 34px;
}
.value-strip div { padding: 20px 22px; border-right: 1px solid var(--hairline); }
.value-strip div:last-child { border-right: 0; }
.value-strip b { display: block; font-size: 21px; letter-spacing: -.01em; }
.value-strip small { color: var(--ink-3); font-size: 12.5px; }

/* 三步流程 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step {
  position: relative; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 34px 28px 30px; box-shadow: var(--shadow-soft);
}
.step .n {
  width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff; background: var(--grad); margin-bottom: 16px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); }
.step::after {
  content: "→"; position: absolute; right: -14px; top: 46px; color: var(--ink-3); font-size: 18px;
}
.step:last-child::after { display: none; }

/* 受众卡 */
.audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.audience .who {
  background: #fff; border: 1px solid var(--hairline); border-radius: 18px; padding: 24px 22px;
  transition: transform .2s, box-shadow .2s;
}
.audience .who:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.audience .who .em { font-size: 20px; margin-bottom: 10px; display: block; }
.audience .who h4 { font-size: 15.5px; margin-bottom: 6px; }
.audience .who p { font-size: 13.5px; color: var(--ink-2); }

/* 定价：徽章 */
.price-card { position: relative; }
.price-card .badge {
  position: absolute; top: -11px; left: 30px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  background: var(--grad); color: #fff; padding: 4px 12px; border-radius: 999px;
}
.price-card .badge.muted { background: #6b7280; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 24px;
  margin-bottom: 12px; box-shadow: var(--shadow-soft); transition: box-shadow .2s;
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 16px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 20px; color: var(--ink-3); font-weight: 400; line-height: 1;
  transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.faq details a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* 社区区 */
.community-band {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 26px;
  padding: 48px 46px; box-shadow: var(--shadow-soft); text-align: center;
}
.community-band h2 { font-size: 28px; font-weight: 800; }
.community-band p { color: var(--ink-2); margin-top: 10px; }
.community-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* 社交图标（页脚） */
.socials { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
a.soc {
  display: inline-flex !important; align-items: center; gap: 9px; font-size: 16px !important; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 19px !important; background: #fff;
  transition: color .18s, border-color .18s, transform .18s;
}
a.soc svg { width: 20px; height: 20px; opacity: .85; }
a.soc:hover { color: var(--ink); border-color: rgba(23,24,28,.2); transform: translateY(-1px); }
.soc svg { opacity: .85; }
.maker { margin-top: 6px !important; font-size: 12.5px; color: var(--ink-3); }

/* 博客卡片 */
.post-list { display: grid; gap: 16px; }
.post {
  display: block; background: #fff; border: 1px solid var(--hairline); border-radius: 18px;
  padding: 26px 30px; box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s;
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post .date { font-size: 12.5px; color: var(--ink-3); letter-spacing: .04em; }
.post h3 { font-size: 19px; margin: 6px 0 8px; }
.post p { font-size: 14.5px; color: var(--ink-2); }

@media (max-width: 900px) {
  .value-strip, .steps, .audience { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .value-strip div { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .community-band { padding: 32px 24px; }
}