/**
* AvoAgent v2 · 新版首页（原型 frontend/index.html 的忠实移植）
*
* 所有类前缀 v2h-，规则挂在 body.avo-v2-home 下 —— v1 的全局样式表
* 在本页仍然会被 enqueue，不用高一级的作用域压住会串味。
*/
/* chrome（body 基线 / 导航 / 按钮 / 语言切换器 / 页脚）在 site.css，
作用域 body.avo-v2-page —— 本文件只留首页私有区块（v1.48.0 去重）。 */
/* ── Hero ── */
.avo-v2-home .v2h-hero { padding: 54px 0 70px; }
.avo-v2-home .v2h-hero-copy { text-align: center; max-width: 920px; margin: auto; }
.avo-v2-home .v2h-hero h1 {
font: 600 clamp(46px, 6.2vw, 82px)/0.98 "Space Grotesk", sans-serif;
letter-spacing: -.065em; margin: 24px 0 22px;
}
.avo-v2-home .v2h-mark { position: relative; white-space: nowrap; }
.avo-v2-home .v2h-mark:after {
content: ""; position: absolute; left: -2%; right: -2%; height: .18em; bottom: .03em;
background: #c7f45b; border-radius: 50%; z-index: -1; transform: rotate(-1.5deg);
}
.avo-v2-home .v2h-hero-sub { max-width: 680px; margin: auto; color: #5e6861; font-size: 18px; line-height: 1.65; }
.avo-v2-home .v2h-hero-sub strong { color: #17231d; }
.avo-v2-home .v2h-hero-actions { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }
.avo-v2-home .v2h-hero-actions .v2h-btn { min-height: 50px; }
.avo-v2-home .v2h-hero-proof { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 17px; }
.avo-v2-home .v2h-hero-proof span {
padding: 7px 10px; border: 1px solid #dfe4dc; border-radius: 99px;
background: rgba(255, 255, 255, .58); font-size: 11px; color: #5e6861;
}
/* ── 演示区（静态示意）── */
.avo-v2-home .v2h-studio {
max-width: 1120px; margin: 52px auto 0; background: #17231d; border-radius: 32px;
padding: 12px; box-shadow: 0 24px 70px rgba(25, 42, 31, .12); position: relative;
}
.avo-v2-home .v2h-studio:before {
content: ""; position: absolute; inset: -18px 12% auto; height: 60%;
background: #c7f45b; filter: blur(80px); opacity: .16; z-index: -1;
}
.avo-v2-home .v2h-studio-top { display: flex; align-items: center; justify-content: space-between; color: #fff; padding: 17px 20px 25px; }
.avo-v2-home .v2h-studio-title { display: flex; align-items: center; gap: 12px; }
.avo-v2-home .v2h-live { width: 8px; height: 8px; background: #c7f45b; border-radius: 50%; box-shadow: 0 0 0 6px rgba(199, 244, 91, .12); }
.avo-v2-home .v2h-studio-title strong { font: 600 14px "Space Grotesk", sans-serif; }
.avo-v2-home .v2h-studio-title span { color: #9fac9f; font-size: 12px; }
.avo-v2-home .v2h-studio-meta { display: flex; align-items: center; gap: 10px; font: 500 11px "Space Grotesk", sans-serif; color: #9fac9f; letter-spacing: .08em; }
/* v1.71.12 · 「这是示意图」以前只在 aria-label 里，视觉上没有任何提示，
而示意里印着具体百分比 —— 看起来像真跑出来的结果。补一个看得见的角标。 */
.avo-v2-home .v2h-studio-demo {
padding: 3px 8px; border: 1px solid rgba(199, 244, 91, .45); border-radius: 999px;
color: #c7f45b; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 560px) { .avo-v2-home .v2h-studio-meta { font-size: 10px; gap: 6px; } }
.avo-v2-home .v2h-workspace { background: #eef0ea; border-radius: 23px; overflow: hidden; }
.avo-v2-home .v2h-side {
padding: 22px 26px; display: grid; grid-template-columns: 220px minmax(290px, 1fr) 320px;
gap: 16px; align-items: end; border-bottom: 1px solid #d8ddd5; background: #f8f9f5;
}
.avo-v2-home .v2h-field-label {
display: block; font: 600 10px "Space Grotesk", sans-serif; letter-spacing: .08em;
text-transform: uppercase; color: #5e6861; margin-bottom: 8px;
}
.avo-v2-home .v2h-market {
display: flex; align-items: center; height: 52px; background: #fff;
border: 1px solid #dfe4dc; padding: 0 14px; border-radius: 12px; font-size: 14px;
}
.avo-v2-home .v2h-upload {
height: 52px; border: 1.5px dashed #b7c0b5; border-radius: 12px; padding: 0 13px;
display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px;
background: #fff; transition: .2s;
}
.avo-v2-home .v2h-upload:hover { border-color: #91bd2a; background: #fbfff2; }
.avo-v2-home .v2h-upload-icon { width: 32px; height: 32px; border-radius: 9px; background: #eff8d6; display: grid; place-items: center; }
.avo-v2-home .v2h-upload-icon svg { width: 16px; height: 16px; fill: none; stroke: #17231d; stroke-width: 1.8; stroke-linecap: round; }
.avo-v2-home .v2h-upload-copy strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avo-v2-home .v2h-upload-copy small { color: #5e6861; display: block; margin-top: 2px; font-size: 12px; }
.avo-v2-home .v2h-option-group {
height: 52px; display: grid; grid-template-columns: 1fr 1fr;
border: 1px solid #dfe4dc; border-radius: 12px; background: #fff; overflow: hidden;
}
.avo-v2-home .v2h-switch-row {
min-width: 0; padding: 0 12px; display: flex; align-items: center;
justify-content: space-between; gap: 9px; font-size: 12px; line-height: 1.25;
}
.avo-v2-home .v2h-switch-row + .v2h-switch-row { border-left: 1px solid #dfe4dc; }
.avo-v2-home .v2h-switch {
flex: 0 0 auto; width: 32px; height: 19px; padding: 3px; border-radius: 99px;
background: #17231d; display: flex; justify-content: flex-end;
}
.avo-v2-home .v2h-switch:after { content: ""; width: 13px; height: 13px; border-radius: 50%; background: #c7f45b; }
.avo-v2-home .v2h-canvas { padding: 30px 32px 34px; }
.avo-v2-home .v2h-flow { display: flex; align-items: center; margin-bottom: 26px; gap: 10px; padding: 0 4px; }
.avo-v2-home .v2h-flow-step { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #5e6861; white-space: nowrap; }
.avo-v2-home .v2h-flow-step:after { content: ""; height: 1px; background: #ccd2ca; flex: 1; }
.avo-v2-home .v2h-flow-step:last-child:after { display: none; }
.avo-v2-home .v2h-flow-step b {
width: 26px; height: 26px; border: 1px solid #bdc5bc; border-radius: 50%;
display: grid; place-items: center; font: 600 10px "Space Grotesk", sans-serif;
}
.avo-v2-home .v2h-flow-step.is-active { color: #17231d; }
.avo-v2-home .v2h-flow-step.is-active b { background: #c7f45b; border-color: #c7f45b; }
.avo-v2-home .v2h-job { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); gap: 24px; align-items: stretch; }
.avo-v2-home .v2h-preview { position: relative; border-radius: 18px; overflow: hidden; min-height: 440px; background: #e5e8e1; padding: 18px; }
.avo-v2-home .v2h-compare { height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.avo-v2-home .v2h-compare figure { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.avo-v2-home .v2h-compare img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 13px; background: #fff; }
.avo-v2-home .v2h-compare figcaption { display: flex; justify-content: space-between; align-items: center; padding: 11px 3px 0; color: #5e6861; font-size: 12px; }
.avo-v2-home .v2h-compare figcaption b { color: #17231d; font-weight: 600; }
.avo-v2-home .v2h-preview-tag {
position: absolute; left: 31px; top: 31px; background: rgba(23, 35, 29, .84); color: #fff;
padding: 7px 10px; border-radius: 8px; font-size: 12px; backdrop-filter: blur(8px); z-index: 2;
}
.avo-v2-home .v2h-recipe { background: #fff; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; }
.avo-v2-home .v2h-recipe-head h2 { font: 600 23px "Space Grotesk", sans-serif; letter-spacing: -.03em; margin: 0; }
.avo-v2-home .v2h-recipe-head p { margin: 8px 0 0; color: #5e6861; font-size: 12px; line-height: 1.55; }
.avo-v2-home .v2h-checks { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 24px 0; }
.avo-v2-home .v2h-check {
display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center;
column-gap: 12px; min-height: 60px; padding: 10px 12px; border: 1px solid #dfe4dc; border-radius: 12px;
}
.avo-v2-home .v2h-check-icon {
grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 9px; background: #edf7d6;
display: grid; place-items: center; color: #556f0e;
}
.avo-v2-home .v2h-check-icon svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.avo-v2-home .v2h-check strong { font-size: 12px; }
.avo-v2-home .v2h-check span:not(.v2h-check-icon) { font-size: 12px; color: #5e6861; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avo-v2-home .v2h-check em {
grid-column: 3; grid-row: 1 / 3; font-style: normal;
font: 600 9px "Space Grotesk", sans-serif; color: #51710d; margin-left: 8px; white-space: nowrap;
}
.avo-v2-home .v2h-check.is-warn .v2h-check-icon { background: #fff0eb; color: #c63f21; }
.avo-v2-home .v2h-check.is-warn em { color: #c63f21; }
.avo-v2-home .v2h-run { margin-top: auto; display: flex; gap: 10px; }
.avo-v2-home .v2h-run .v2h-btn { flex: 1; min-height: 50px; justify-content: center; }
.avo-v2-home .v2h-trustline { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 20px; color: #5e6861; font-size: 12px; }
.avo-v2-home .v2h-trustline span { display: flex; align-items: center; gap: 6px; }
.avo-v2-home .v2h-trustline i { width: 5px; height: 5px; background: #91bd2a; border-radius: 50%; }
/* ── 区块通用 ── */
.avo-v2-home .v2h-section, .avo-v2-home .v2h-tool-section { padding: 90px 0; }
.avo-v2-home .v2h-section-top { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 42px; }
.avo-v2-home .v2h-kicker { font: 600 12px "Space Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #5e6861; }
.avo-v2-home .v2h-kicker--light { color: #ffffff; }
.avo-v2-home .v2h-section-top h2 { font: 600 clamp(34px, 4.2vw, 55px)/1.04 "Space Grotesk", sans-serif; letter-spacing: -.055em; margin: 10px 0 0; max-width: 720px; }
.avo-v2-home .v2h-section-top p { max-width: 380px; margin: 0; color: #5e6861; line-height: 1.65; }
/* ── 三路径 ── */
.avo-v2-home .v2h-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.avo-v2-home .v2h-path {
min-height: 420px; border-radius: 24px; padding: 24px; position: relative; overflow: hidden;
border: 1px solid #dfe4dc; background: #fff; transition: .25s;
}
.avo-v2-home .v2h-path:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(20, 35, 26, .09); }
.avo-v2-home .v2h-path:nth-child(2) { background: #dfe6ff; border-color: #c9d1fa; }
.avo-v2-home .v2h-path:nth-child(3) { background: #e7f6c8; border-color: #d4e8a8; }
.avo-v2-home .v2h-path-label { font: 600 11px "Space Grotesk", sans-serif; letter-spacing: .08em; color: #5e6861; }
.avo-v2-home .v2h-path h3 { font: 600 27px/1.05 "Space Grotesk", sans-serif; letter-spacing: -.045em; margin: 17px 0 10px; }
.avo-v2-home .v2h-path p { color: #5e6861; font-size: 14px; line-height: 1.55; }
/* v1.56.0 · 375px 下实测 104×20，补 padding 到 28px 高（WCAG 2.5.8 要 24）。
它是卡片底部的独立行动链接，不是正文里的行内链接，不适用行内豁免。
bottom 从 22 减到 18 抵掉新增的 padding，视觉位置不变。 */
.avo-v2-home .v2h-path-link {
position: absolute; left: 24px; bottom: 18px;
font-weight: 600; font-size: 13px;
display: inline-block; padding: 4px 0;
}
.avo-v2-home .v2h-path-visual { position: absolute; right: -30px; bottom: 65px; width: 78%; height: 155px; transform: rotate(-4deg); }
.avo-v2-home .v2h-sheet { position: absolute; width: 150px; height: 105px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(32, 49, 39, .15); padding: 10px; }
.avo-v2-home .v2h-sheet:nth-child(2) { left: 35px; top: 28px; transform: rotate(8deg); }
.avo-v2-home .v2h-sheet:nth-child(3) { left: 75px; top: 55px; transform: rotate(15deg); }
.avo-v2-home .v2h-sheet-img { height: 62px; border-radius: 7px; background: linear-gradient(135deg, #d6b491, #805c42); }
.avo-v2-home .v2h-sheet-lines { margin-top: 6px; height: 4px; width: 70%; background: #dfe4dd; border-radius: 4px; box-shadow: 0 7px #edf0eb; }
.avo-v2-home .v2h-quality-ring {
position: absolute; right: 35px; bottom: 87px; width: 128px; height: 128px; border-radius: 50%;
/* v1.71.10 · 跟随定价卡一起压深，免得同一个品牌蓝在页面上出现两种深浅 */
background: conic-gradient(#4355d6 0 88%, rgba(255, 255, 255, .45) 88%); display: grid; place-items: center;
}
.avo-v2-home .v2h-quality-ring:after {
content: "88"; width: 96px; height: 96px; border-radius: 50%; background: #fff;
display: grid; place-items: center; font: 700 31px "Space Grotesk", sans-serif;
}
.avo-v2-home .v2h-ref-chips { position: absolute; right: 20px; bottom: 75px; width: 82%; display: flex; gap: 10px; }
.avo-v2-home .v2h-ref-chip {
width: 90px; height: 120px; border: 4px solid #fff; border-radius: 14px;
background-color: #cdd8b7; background-size: cover; background-position: center;
box-shadow: 0 12px 25px rgba(42, 64, 14, .13);
}
.avo-v2-home .v2h-ref-chip:nth-child(1) { transform: rotate(-8deg); }
.avo-v2-home .v2h-ref-chip:nth-child(2) { transform: translateY(-13px); }
.avo-v2-home .v2h-ref-chip:nth-child(3) { transform: rotate(8deg); }
/* ── 工具网格 ── */
.avo-v2-home .v2h-tool-section { background: #e9ece5; }
.avo-v2-home .v2h-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 25px; }
.avo-v2-home .v2h-filter {
border: 1px solid #cfd5cc; background: transparent; border-radius: 99px;
padding: 9px 14px; color: #5e6861; cursor: pointer; font: 500 13px/1 "DM Sans", sans-serif;
}
.avo-v2-home .v2h-filter.is-active { background: #17231d; color: #fff; border-color: #17231d; }
.avo-v2-home .v2h-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.avo-v2-home .v2h-tool {
background: #f8faf6; border: 1px solid #dce1d9; border-radius: 17px; padding: 18px;
min-height: 180px; display: flex; flex-direction: column; transition: .2s;
}
.avo-v2-home .v2h-tool:hover { background: #fff; transform: translateY(-3px); }
.avo-v2-home .v2h-tool small { font: 600 10px "Space Grotesk", sans-serif; color: #5e6861; }
.avo-v2-home .v2h-tool h3 { font: 600 16px "Space Grotesk", sans-serif; margin: 6px 0; }
.avo-v2-home .v2h-tool p { font-size: 12px; color: #5e6861; line-height: 1.45; margin: 0; }
.avo-v2-home .v2h-tool-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.avo-v2-home .v2h-tool-foot b { color: #435047; }
.avo-v2-home .v2h-new { background: #c7f45b; padding: 3px 6px; border-radius: 5px; color: #283318; font-weight: 700; }
/* ── 定价横幅 ── */
.avo-v2-home .v2h-pricing { padding: 0 0 90px; background: #e9ece5; }
/* v1.71.10 · 底色从原型的 #536dfe 压深到 #4355d6。
原型那个蓝太亮：白字压上去只有 4.21，而 AA 小字要 4.5 —— 也就是说
**没有任何文字颜色能救**，白色已经是这个底上的对比度上限，只能动底。
卡里那段 16px 说明（#dae0ff）更糟，只有 3.23。
#4355d6 是让两者同时达标的最浅值：白字 5.98、#dae0ff 4.58。同色系，只是更深。 */
.avo-v2-home .v2h-pricebox {
background: #4355d6; color: #fff; border-radius: 28px; padding: 44px;
display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center;
}
.avo-v2-home .v2h-pricebox h2 { font: 600 clamp(35px, 4vw, 54px)/1.03 "Space Grotesk", sans-serif; letter-spacing: -.055em; margin: 8px 0 18px; }
.avo-v2-home .v2h-pricebox > div > p { color: #dae0ff; line-height: 1.65; max-width: 560px; }
.avo-v2-home .v2h-price-right { background: #fff; color: #17231d; border-radius: 19px; padding: 22px; }
.avo-v2-home .v2h-price-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #dfe4dc; font-size: 13px; }
.avo-v2-home .v2h-price-row:last-of-type { border: 0; }
.avo-v2-home .v2h-price-row span { color: #5e6861; }
.avo-v2-home .v2h-price-row strong { font-family: "Space Grotesk", sans-serif; }
.avo-v2-home .v2h-price-right .v2h-btn { width: 100%; margin-top: 12px; justify-content: center; }
/* ── 响应式（照原型三档；chrome 相关的响应式在 site.css）── */
@media (max-width: 1050px) {
.avo-v2-home .v2h-side { grid-template-columns: 1fr 1.3fr; }
.avo-v2-home .v2h-job { grid-template-columns: 1fr; }
.avo-v2-home .v2h-preview { min-height: 400px; }
}
@media (max-width: 900px) {
.avo-v2-home .v2h-side { grid-template-columns: 1fr 1fr; }
.avo-v2-home .v2h-paths { grid-template-columns: 1fr; }
.avo-v2-home .v2h-path { min-height: 360px; }
.avo-v2-home .v2h-tools { grid-template-columns: repeat(2, 1fr); }
.avo-v2-home .v2h-pricebox { grid-template-columns: 1fr; }
.avo-v2-home .v2h-section-top { display: block; }
.avo-v2-home .v2h-section-top p { margin-top: 18px; }
}
@media (max-width: 600px) {
.avo-v2-home .v2h-hero { padding-top: 36px; }
.avo-v2-home .v2h-hero-sub { font-size: 16px; }
.avo-v2-home .v2h-hero-actions { display: grid; }
.avo-v2-home .v2h-studio { border-radius: 18px; padding: 7px; }
.avo-v2-home .v2h-studio-title span, .avo-v2-home .v2h-studio-meta { display: none; }
.avo-v2-home .v2h-side { grid-template-columns: 1fr; padding: 16px; }
.avo-v2-home .v2h-option-group { grid-template-columns: 1fr; height: auto; }
.avo-v2-home .v2h-switch-row { min-height: 48px; }
.avo-v2-home .v2h-switch-row + .v2h-switch-row { border-left: 0; border-top: 1px solid #dfe4dc; }
.avo-v2-home .v2h-flow { overflow: auto; }
.avo-v2-home .v2h-flow-step { min-width: 110px; }
.avo-v2-home .v2h-canvas { padding: 18px; }
.avo-v2-home .v2h-preview { min-height: 340px; padding: 11px; }
.avo-v2-home .v2h-compare { gap: 8px; }
.avo-v2-home .v2h-recipe { padding: 20px; }
.avo-v2-home .v2h-tools { grid-template-columns: 1fr; }
.avo-v2-home .v2h-pricebox { padding: 25px; }
}
/* v1.69.0 · 420px 以下首屏标题降到 38px。
.v2h-mark 为了让高亮下划线不断行用了 white-space:nowrap，46px 下英文
"break your product" 实测 378px，塞不进 351px 容器 —— 中文短所以只有英文撞。
原型 fixes.css 撞的是同一堵墙，给的答案就是 @media(max-width:420px) 降到 38px。
⚠ 只改 font-size 不用 font 简写，免得把行高一起重置；中文行高仍由 site.css
的 CJK 护栏 (0,2,3) 接管，本条 (0,2,1) 顶不掉它。 */
@media (max-width: 420px) {
.avo-v2-home .v2h-hero h1 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.avo-v2-home * { transition: none !important; }
}