/* ============================================================
 * home-redesign.css — 首页 UI 改版专用样式（仅 index.html 引用）
 * 所有规则以 .home-v2 前缀锁定首页作用域；不覆盖 common.css/home.css
 * 既有规则的语义，只调整首页自己的视觉层。业务 id 与层级零改动。
 * 全站按钮统一布景橙：.btn-primary（common.css）已是 booth 橙，本文件不覆盖按钮色。
 * ============================================================ */

.home-v2 {
    --hv2-ink: #0c0a08;          /* 暖黑底 */
    --hv2-booth: #e0703c;        /* 录影棚橙：只当灯光，不当按钮 */
    --hv2-booth-dim: rgba(224, 112, 60, 0.32);
    --hv2-cream: #f2ead9;        /* 大标题与主文字 */
    --hv2-panel: #16100b;        /* 卡片底（暖棕黑） */
    --hv2-panel-line: rgba(242, 234, 217, 0.10);
    --hv2-faint: #a89f92;        /* 次级文字，对暖黑 ≥4.5:1 */
    background-color: var(--hv2-ink) !important;
    font-feature-settings: "tnum" 1; /* 数字等宽：价格/时长不跳动 */
}

/* ---------- 字体（Oswald 经 index.html 的 Google Fonts link 引入） ---------- */
.home-v2 .hv2-display {
    font-family: "Oswald", "Inter", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.01em;
}

/* ---------- 首屏标题层 ---------- */
/* 66rem 与控制台列同轨（1056px），规格带得以单行；sub 自带 46rem 行长保护 */
.home-v2 .hv2-hero { max-width: 66rem; margin-inline: auto; text-align: center; }
.home-v2 .hv2-kicker {
    color: var(--hv2-booth);
    font-family: "Oswald", sans-serif;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    text-transform: uppercase;
}
.home-v2 h1.hv2-h1 {
    color: var(--hv2-cream);
    font-family: "Oswald", "Inter", sans-serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 6.5vw, 4.6rem);
    line-height: 1.04;
    text-wrap: balance;
    margin-top: 0.4rem;
}
.home-v2 .hv2-sub {
    color: #d8d2c6;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    max-width: 46rem;
    margin: 0.9rem auto 0;
}
/* 规格带（方案A）：原 chips + facts 两条 meta 合并为一条五段横带，
   宽度锁定与卡片列同轨，文案原文只挪位；换行时点号前缀不孤悬 */
.home-v2 .hv2-specs {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0.35rem 0.7rem;
    max-width: 66rem; margin: 1.1rem auto 0;
    padding: 0.42rem 1.1rem;
    border: 1px solid var(--hv2-panel-line);
    border-radius: 999px;
    background: rgba(22, 16, 11, 0.65);
    color: var(--hv2-faint);
    font-size: 0.75rem; line-height: 1.6;
}
.home-v2 .hv2-specs b { color: var(--hv2-cream); font-weight: 600; }
.home-v2 .hv2-specs span + span::before { content: "·"; color: var(--hv2-booth); margin-right: 0.6em; }

/* 上传决策点旁的 likeness 提示（自文案区迁入） */
.home-v2 .hv2-slotnote { margin: 0.15rem 0 1.1rem; font-size: 0.78rem; line-height: 1.6; color: #8f867a; }

/* ---------- 控制台卡片（id 结构不动，只换皮） ---------- */
.home-v2 .hv2-console {
    background: linear-gradient(180deg, rgba(224, 112, 60, 0.05), transparent 55%), var(--hv2-panel) !important;
    border: 1px solid var(--hv2-panel-line) !important;
    border-radius: 1.1rem;
}
/* 上传槽：虚线待客，橙色应答 */
.home-v2 .hv2-slot { border-color: rgba(242, 234, 217, 0.16) !important; background: rgba(12, 10, 8, 0.5) !important; }
.home-v2 .hv2-slot:hover { border-color: var(--hv2-booth-dim) !important; }
.home-v2 .hv2-slot .home-slot-placeholder { color: var(--hv2-faint); }
.home-v2 .hv2-slot [data-role-label] { color: var(--hv2-cream); }
/* 表单控件换肤：只收编两个下拉触发钮——
   曾经的 [id$="_btn"] 通配把 #home_generate_btn 的 .btn-primary 品牌绿
   用 !important 压成了深灰（CTA 看起来像禁用态），教训：后缀通配 + 强优先级 = 事故 */
.home-v2 .hv2-console textarea,
.home-v2 .hv2-console select,
.home-v2 .hv2-console #home_resolution_btn,
.home-v2 .hv2-console #home_aspect_btn {
    background: rgba(12, 10, 8, 0.6) !important;
    border-color: var(--hv2-panel-line) !important;
    color: #e9e4da !important;
}
/* 加载转圈：最后一个产品紫残留 → 布景橙 */
.home-v2 main .border-t-\[\#5200FF\] { border-top-color: var(--hv2-booth) !important; }
.home-v2 .hv2-console textarea:focus { outline: 2px solid var(--hv2-booth-dim); outline-offset: 1px; border-color: var(--hv2-booth) !important; }
.home-v2 .hv2-console label { color: var(--hv2-faint) !important; }
.home-v2 .hv2-console input[type="range"] { accent-color: var(--hv2-booth); }
.home-v2 .hv2-console [id$="_count"], .home-v2 .hv2-console .hv2-micro { color: #8f867a; }
/* 卡底小字：模型署名 + 隐私一句 */
.home-v2 .hv2-foot {
    margin-top: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
    justify-content: space-between; color: #8f867a; font-size: 0.78rem;
}
/* 结果卡 */
.home-v2 .hv2-stage {
    background: var(--hv2-panel) !important;
    border: 1px solid var(--hv2-panel-line) !important;
    border-radius: 1.1rem;
    box-shadow: 0 0 90px -40px var(--hv2-booth-dim); /* 一盏顶光落在舞台上 */
}
.home-v2 .hv2-stage > div { color: var(--hv2-faint); }

/* ---------- 中部：平台带 ---------- */
.home-v2 .hv2-platform { text-align: center; max-width: 64rem; margin-inline: auto; }
.home-v2 .hv2-platform h2 { color: var(--hv2-cream); }
.home-v2 .hv2-platform p { color: var(--hv2-faint) !important; font-size: 1rem !important; }
.home-v2 .hv2-modelicon { background: var(--hv2-panel) !important; border-color: var(--hv2-panel-line) !important; }

/* ---------- 示例带：居中堆叠 → 左右交替双栏 ---------- */
.home-v2 .hv2-example {
    display: grid; align-items: center; gap: 1.2rem 2.5rem;
    grid-template-columns: 1fr; max-width: 72rem; margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 1024px) { .home-v2 .hv2-example { grid-template-columns: 1fr 1.15fr; } }
.home-v2 .hv2-example .hv2-copy { text-align: left; }
.home-v2 .hv2-example h2 { color: var(--hv2-cream); font-size: 1.6rem; line-height: 1.25; font-weight: 600; }
.home-v2 .hv2-example p.hv2-lead { color: var(--hv2-faint); margin-top: 0.7rem; font-size: 0.98rem; line-height: 1.7; }
.home-v2 .hv2-example .hv2-media { display: flex; align-items: center; gap: 0.8rem; }
.home-v2 .hv2-example .hv2-media > * { flex: 1; min-width: 0; }
.home-v2 .hv2-example .hv2-media img.hv2-arrow { flex: 0 0 auto; width: 2rem; }
.home-v2 .hv2-example:nth-of-type(even) .hv2-copy { order: 2; }
@media (max-width: 1023px) { .home-v2 .hv2-example:nth-of-type(even) .hv2-copy { order: 0; } }

/* ---------- Explore / 步骤 / 数据 / Why：节奏收紧 ---------- */
.home-v2 .hv2-explore h2 { color: var(--hv2-cream); }
.home-v2 .hv2-explore p { color: var(--hv2-faint) !important; }
.home-v2 .hv2-stats { border-block: 1px solid var(--hv2-panel-line); border-radius: 0; padding-block: 2.2rem; }
.home-v2 .hv2-stepcard {
    background: var(--hv2-panel) !important; border-color: var(--hv2-panel-line) !important;
}
/* 只洗卡片自己的底色（上轮 * 误伤图标圈的 bg-primary/10） */
.home-v2 .hv2-stepcard.bg-background { background-color: var(--hv2-panel); }

/* ---------- 四个左右功能行：沿用示例带的呼吸，文案瘦身 ---------- */
/* 根治：功能行的列上还挂着 flex 时代的 lg:w-1/2 / pl-6 / mr-4——
   放进 grid 后 w-1/2 在半宽轨道里再对折（实测 517px 轨道只剩 229px），
   旧列距与 grid gap 双重留白。宽度交还网格，间距只认 gap。 */
.home-v2 .hv2-altrow .hv2-example > div {
    width: auto;       /* grid 项默认拉伸填满轨道 */
    margin: 0;
    padding-left: 0;
}
.home-v2 .hv2-altrow h2 { color: var(--hv2-cream); font-size: 1.55rem; line-height: 1.25; font-weight: 600; }
.home-v2 .hv2-altrow h3 { color: var(--hv2-faint); font-size: 1rem; line-height: 1.7; font-weight: 400; }
.home-v2 .hv2-altrow ul li { color: #cfc8bc; font-size: 0.92rem; }
.home-v2 .hv2-altrow ul li span { color: var(--hv2-cream); }
.home-v2 .hv2-altrow video, .home-v2 .hv2-altrow .rounded-lg { border: 1px solid var(--hv2-panel-line); }

/* ---------- Why-choose：去编号装饰，收紧成小卡 ---------- */
.home-v2 .hv2-why { background: var(--hv2-panel) !important; border-color: var(--hv2-panel-line) !important; padding: 1.5rem; }
.home-v2 .hv2-why h2 { color: var(--hv2-cream); }
.home-v2 .hv2-why h3 { font-size: 1.05rem; }
.home-v2 .hv2-why p { color: var(--hv2-faint); font-size: 0.9rem; line-height: 1.65; }

/* 收尾 CTA 标题也归戏院字色（背景图带外资产，线上有） */
.home-v2 .hv2-finale h2 { color: var(--hv2-cream); font-family: "Oswald", "Inter", sans-serif; font-weight: 500; letter-spacing: 0.01em; }

/* ---------- FAQ / 收尾：只调外壳节奏 ---------- */
.home-v2 #accordion-container { max-width: 52rem; margin-inline: auto; }

/* 全页 h2 统一归暖白（text-white 类同特异性，此处靠层级胜出） */
.home-v2 main h2 { color: var(--hv2-cream); }

/* 声音统一：main 内所有 h2 换 Oswald——之前只有 hero 一种字，
   中段全是 Inter，远看像两个站缝合；正文(h3/p)保持 Inter 不抢戏 */
.home-v2 main h2 {
    font-family: "Oswald", "Inter", ui-sans-serif, sans-serif;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.2;
}

/* 数据带大数字：text-primary 在暖黑上对比度不足，归回 cream（数值未动） */
.home-v2 .hv2-stats .text-primary { color: var(--hv2-cream) !important; }

/* 移动端边距：旧站主容器 px-20(80px×2) 把小屏内容挤到 ~230px；
   ≥768 保持团队原布局不动 */
@media (max-width: 767px) {
    .home-v2 main > div { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ============================================================
 * 配色统一：下半页（功能行/Explore/步骤/数据/Why/FAQ/收尾）
 * 与首屏同一色温。冷灰类 → 暖色 tokens，JS 注入区（videoList/
 * FAQ 手风琴）共用同名类，一并覆盖。仅作用于本页 main。
 * ============================================================ */
/* 正文与标题字色：冷灰/纯白 → 暖灰/奶油 */
.home-v2 main .text-gray-200,
.home-v2 main .text-gray-300 { color: #cfc8bc; }
.home-v2 main .text-gray-400,
.home-v2 main .text-gray-500 { color: var(--hv2-faint); }
.home-v2 main .text-white { color: var(--hv2-cream); }
/* 卡片与控件底：蓝灰盒 → 暖棕板 */
.home-v2 main .bg-gray-800\/50 { background-color: rgba(22, 16, 11, 0.6); }
.home-v2 main .bg-gray-800 { background-color: var(--hv2-panel); }
.home-v2 main .bg-gray-900\/40,
.home-v2 main .bg-gray-900\/60 { background-color: rgba(12, 10, 8, 0.55); }
.home-v2 main .bg-white\/5 { background-color: rgba(242, 234, 217, 0.05); }
.home-v2 main .bg-white\/10 { background-color: rgba(242, 234, 217, 0.09); }
/* 边框线统一 */
.home-v2 main .border-gray-600,
.home-v2 main .border-gray-700 { border-color: var(--hv2-panel-line); }
/* 步骤卡图标：产品紫 → 布景橙 */
.home-v2 .hv2-stepcard [class*="bg-primary\/10"] { background-color: rgba(224, 112, 60, 0.14); }
.home-v2 .hv2-stepcard .text-primary { color: var(--hv2-booth); }

/* ---------- 首屏遮罩：剧场聚光（v2，方向修正） ----------
 * 聚光 = 舞台中央亮、观众席四周黑：径向透明中心 → 边缘 0.55 暗角。
 * （上一版做反了——中心压暗四周透亮，用户指出后按物理直觉反转。）
 * 文字可读性不再靠暗心，改为奶油字 + 极轻 text-shadow（见 .hv2-hero）。 */
body.home-v2 > [class*="-mt-[90vh]"] {
    background-image:
        radial-gradient(ellipse 62% 52% at 50% 40%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 58%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.2) 60%, #0f0909 98%);
}
/* 亮心上的字保可读：只给极轻投影，不加色块 */
.home-v2 .hv2-kicker, .home-v2 .hv2-sub { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }

/* ---------- 主按钮色 ----------
 * 全站 .btn-primary（common.css）已统一为 booth 橙 + 深字 + 橙色光晕，
 * 首页 Generate/Download 不再需要单独覆盖，此处保留注释备查。 */

/* ---------- 可达性与动效预算 ---------- */
.home-v2 :focus-visible { outline: 2px solid var(--hv2-booth); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .home-v2 [class*="animate-spin"] { animation-duration: 3s; }
}