/* 首页 */
.grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: var(--s-24) 0 var(--s-20);
  background-image: radial-gradient(ellipse 720px 360px at 30% 0, var(--hero-glow-blue), transparent 76%), radial-gradient(ellipse 640px 340px at 72% 0, var(--hero-glow-violet), transparent 76%);
  background-size: 100% 440px; background-repeat: no-repeat; }
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__eyebrow { margin-bottom: var(--s-6); background: color-mix(in srgb, var(--white) 80%, transparent); border: 1px solid var(--brand-100); }
.hero__title { font-size: clamp(30px, 8.6vw, 60px); line-height: 1.18; letter-spacing: -0.02em; white-space: nowrap; max-width: none; }
html[lang^="en"] .hero__title { font-size: clamp(26px, 7.6vw, 60px); }
.hero__sub { margin-top: var(--s-4); max-width: 560px; text-wrap: balance; font-size: var(--fs-18); line-height: var(--lh-18); color: var(--ink-500); }
.hero__cta { margin-top: var(--s-8); display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }

.hero__showcase { margin-top: var(--s-20); display: flex; align-items: center; justify-content: center; gap: var(--s-6); perspective: 1200px; }
.show-card { width: 168px; padding: var(--s-4); background: var(--white); border: 1px solid var(--line-200); border-radius: var(--r-20); box-shadow: var(--sh-lg); transition: transform .4s var(--ease); }
.show-card svg, .show-card canvas { width: 100%; height: auto; border-radius: var(--r-8); }
.show-card__label { margin-top: var(--s-3); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-500); text-align: center; }
.show-card:nth-child(1) { transform: translateY(24px) rotate(-6deg); }
.show-card:nth-child(2) { transform: translateY(8px) rotate(-3deg); }
.show-card:nth-child(3) { width: 200px; transform: translateY(-8px); z-index: 2; }
.show-card:nth-child(4) { transform: translateY(8px) rotate(3deg); }
.show-card:nth-child(5) { transform: translateY(24px) rotate(6deg); }
.show-card:hover { transform: translateY(-12px) rotate(0); }
.show-card--dark { background: #0E1116; border-color: #0E1116; }
[data-theme="dark"] .show-card:not(.show-card--dark) { background: #fff; border-color: #fff; }
[data-theme="dark"] .show-card:not(.show-card--dark) .show-card__label { color: #667085; }
[data-theme="dark"] .show-card--dark { border-color: var(--line-300); }
.show-card--dark .show-card__label { color: #C5CBD3; }

/* Logo 墙 */
.logos { padding: var(--s-10) 0; }
.logos__title { text-align: center; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--ink-500); margin-bottom: var(--s-5); }
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
.logos__row span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-10); background: var(--bg-50); transition: background .2s var(--ease), transform .2s var(--ease); }
.logos__row span:hover { transform: translateY(-2px); background: var(--bg-100); }
.logos__row svg { width: 20px; height: 20px; }

/* ===== Section 规范 =====
   区块上下 80 · 标题区→内容 48 · 主标题→副标题 12
   标题 40/48 600 · 副标题 16/24 400 次要色 · 全部居中            */
.section { padding: var(--s-20) 0; }
.section__head { text-align: center; max-width: 640px; margin: 0 auto var(--s-12); }
.section__title { font-size: var(--fs-40); line-height: var(--lh-40); letter-spacing: -0.02em; }
.section__sub { margin-top: var(--s-3); font-size: var(--fs-16); line-height: var(--lh-16); color: var(--ink-500); }

/* ===== 核心功能：Bento ===== */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.tool { display: flex; flex-direction: column; padding: var(--s-2); border-radius: var(--r-20); transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); }
.tool:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: var(--line-300); }
.tool__visual { position: relative; height: 264px; border-radius: var(--r-16); background: var(--bg-50); overflow: hidden; display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  background-image: radial-gradient(var(--line-200) 1px, transparent 1px); background-size: 16px 16px; }
.tool__visual--beautify .mini { width: 132px; padding: var(--s-2); border-radius: var(--r-12); background: #fff; box-shadow: var(--sh-lg); transition: transform .35s var(--ease); }
.tool__visual--beautify .mini svg, .tool__visual--beautify .mini canvas { width: 100%; height: auto; display: block; }
.tool__visual--beautify .mini:nth-child(1) { transform: translateY(12px) rotate(-6deg); }
.tool__visual--beautify .mini:nth-child(2) { width: 152px; z-index: 1; }
.tool__visual--beautify .mini:nth-child(3) { transform: translateY(12px) rotate(6deg); background: #0E1116; }
.tool:hover .tool__visual--beautify .mini:nth-child(1) { transform: translate(-6px, 8px) rotate(-8deg); }
.tool:hover .tool__visual--beautify .mini:nth-child(3) { transform: translate(6px, 8px) rotate(8deg); }
.tool__body { padding: var(--s-6) var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.tool__head { display: flex; align-items: center; justify-content: space-between; }
.tool__title { font-size: var(--fs-24); line-height: var(--lh-24); }
.tool__go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-100); color: var(--ink-700); transition: all .2s var(--ease); }
.tool__go svg { width: 16px; height: 16px; }
.tool:hover .tool__go { background: var(--brand-500); color: #fff; }
.tool__desc { font-size: var(--fs-16); line-height: var(--lh-16); color: var(--ink-500); }
.tags { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tags li { height: 28px; display: inline-flex; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-full); background: var(--bg-100); font-size: var(--fs-13); color: var(--ink-700); }

.scan { position: relative; width: 168px; padding: var(--s-3); background: #fff; border-radius: var(--r-12); box-shadow: var(--sh-lg); }
.scan__qr svg, .scan__qr canvas { width: 100%; height: auto; display: block; }
.scan__line { position: absolute; left: 8%; right: 8%; height: 2px; top: 12%; background: linear-gradient(90deg, transparent, var(--mint-500), transparent); box-shadow: 0 0 12px var(--mint-500); animation: scan 2.4s var(--ease) infinite alternate; }
@keyframes scan { to { top: 86%; } }
.scan__corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--mint-500); }
.scan__corner.tl { top: -6px; left: -6px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.scan__corner.tr { top: -6px; right: -6px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.scan__corner.bl { bottom: -6px; left: -6px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.scan__corner.br { bottom: -6px; right: -6px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.scan__pill { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-12); background: var(--white); border: 1px solid var(--line-200); box-shadow: var(--sh-sm); }
.scan__pill code { font-family: var(--mono); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--ink-900); }

/* 工具卡的辅助说明：轻量网格，标题和正文对齐，不再叠加第三张大卡。 */
.perks { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-200); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.perk { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.perk > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--brand-500); }
.perk h4 { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; }
.perk p { margin-top: var(--s-1); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-500); }

/* 样式库 */
.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-6); }
.g-item { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-16); background: var(--bg-50); border: 1px solid transparent; transition: all .2s var(--ease); }
.g-item:hover { background: var(--white); border-color: var(--line-200); box-shadow: var(--sh-lg); transform: translateY(-2px); }
.g-item__qr { border-radius: var(--r-10); overflow: hidden; }
.g-item__qr svg, .g-item__qr canvas { width: 100%; height: auto; }
.g-item__meta { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-1); }
.g-item__name { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; color: var(--ink-900); }
.g-item__use { font-size: var(--fs-12); color: var(--brand-500); opacity: 0; transition: opacity .2s var(--ease); }
.g-item:hover .g-item__use { opacity: 1; }

/* 步骤 */
.steps { list-style: none; margin: 0; padding: var(--s-2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; border: 1px solid var(--line-200); border-radius: var(--r-20); background: var(--surface-subtle); }
.step { position: relative; grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: var(--s-6); }
.step:not(:last-child)::after { content: ""; position: absolute; top: var(--s-6); bottom: var(--s-6); right: 0; width: 1px; background: var(--line-200); }
.step__head { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.step__icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand-600); }
.step__icon svg { width: 24px; height: 24px; }
.step__no { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; border: 1px solid var(--brand-100); border-radius: var(--r-full); background: var(--brand-50); color: var(--brand-600); font-family: var(--mono); font-size: var(--fs-12); font-weight: 500; font-variant-numeric: tabular-nums; }
.step__title { margin-top: var(--s-5); font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 600; color: var(--ink-900); }
.step__desc { margin-top: var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--ink-500); }
.step__meta { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-700); }
.step__meta svg { width: 16px; height: 16px; flex-shrink: 0; padding: 2px; border-radius: 50%; color: #08705D; background: var(--mint-50); box-sizing: content-box; }
[data-theme="dark"] .step__meta svg { color: #3DDBB8; }

/* FAQ：居中单列 */
.faq { display: grid; gap: var(--s-3); }
.qa { border: 1px solid var(--line-200); border-radius: var(--r-12); background: var(--white); transition: border-color .2s var(--ease); }
.qa:hover, .qa[open] { border-color: var(--brand-100); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 72px; padding: var(--s-5) var(--s-6); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 500; color: var(--ink-900); }
.qa__question { min-width: 0; overflow-wrap: anywhere; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 20px; height: 20px; flex-shrink: 0; background: var(--ink-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E") center/20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E") center/20px no-repeat; transition: transform .2s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 var(--s-16) var(--s-6) var(--s-6); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--ink-500); white-space: pre-line; overflow-wrap: anywhere; }

/* CTA */
.cta { padding: var(--s-20) 0; }
.cta__box { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-12); border-radius: var(--r-20); border: 1px solid var(--cta-line); background: var(--cta-bg); color: #fff; }
.cta__box > * { position: relative; z-index: 1; }
.cta__box h2 { color: #fff; font-size: var(--fs-32); line-height: var(--lh-32); }
.cta__box .grad-text { background-image: linear-gradient(100deg, #AFC7FF, #D1BCFF); }
.cta__box p { margin-top: var(--s-2); font-size: var(--fs-16); line-height: var(--lh-16); color: #E1E7FF; }
.cta__btn { background: #fff; color: #183BB8; }
.cta__btn:hover { background: #EEF2FF; }

/* 响应式 */
@media (max-width: 1080px) {
  .bento { grid-template-columns: 1fr; }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .hero { padding: var(--s-16) 0 var(--s-12); }
  .hero__sub { font-size: var(--fs-16); line-height: var(--lh-16); }
  .hero__showcase { gap: var(--s-3); margin-top: var(--s-12); }
  .show-card { width: 120px; padding: var(--s-3); }
  .show-card:nth-child(1), .show-card:nth-child(5) { display: none; }
  .show-card:nth-child(3) { width: 140px; }
  .section, .cta { padding: var(--s-16) 0; }
  .section__title { font-size: var(--fs-32); line-height: var(--lh-32); }
  .section__head { margin-bottom: var(--s-10); }
  .steps { grid-template-columns: 1fr; grid-template-rows: none; }
  .step { grid-row: auto; grid-template-rows: auto auto 1fr auto; }
  .step:not(:last-child)::after { top: auto; bottom: 0; left: var(--s-6); right: var(--s-6); width: auto; height: 1px; }
  .tool__visual { height: 220px; }
  .tool__visual--beautify .mini { width: 96px; } .tool__visual--beautify .mini:nth-child(2) { width: 112px; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .qa summary { min-height: 64px; padding: var(--s-4); }
  .qa p { padding: 0 var(--s-4) var(--s-5); }
  .cta__box { flex-direction: column; align-items: flex-start; padding: var(--s-8) var(--s-6); }
  .cta__box h2 { font-size: var(--fs-24); line-height: var(--lh-24); }
}
@media (max-width: 480px) {
  .tool { min-width: 0; }
  .tool__visual { height: 220px; gap: var(--s-2); }
  .tool__visual--beautify .mini { width: 88px; }
  .tool__visual--beautify .mini:nth-child(2) { width: 104px; }
}