/**
 * ============================================================
 *  GEO 深色科技风首页 · V9.0 · 2026-10-16
 * ============================================================
 *  作用：首页（index.php）专属版式。11 屏结构、深色科技风。
 *  依赖：theme-dark.css 已提供深色变量；本文件只负责首页版式。
 *  引入：header.php 中由 $use_home_v9 条件加载（仅首页）。
 *  回退：删除本文件 + index.php 中 $use_home_v9 即恢复。
 *  约束：不承诺排名、不贬低同行、量化数字须可核实。
 * ============================================================
 */

/* ---------- 通用容器 / 排版 ---------- */
.v9-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.v9-band { padding: 88px 0; position: relative; }
.v9-band--alt { background: #0d1322; }
.v9-band--alt2 { background: linear-gradient(180deg, #0a0e1a 0%, #0e1425 100%); }
.v9-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .08em;
    color: #22d3ee; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(34, 211, 238, .08);
    border: 1px solid rgba(34, 211, 238, .22);
    margin-bottom: 18px;
}
.v9-h2 { font-size: 38px; line-height: 1.28; font-weight: 800; color: #f1f5f9; margin: 0 0 16px; letter-spacing: -.01em; }
.v9-lead { font-size: 17px; line-height: 1.8; color: #94a3b8; max-width: 720px; margin: 0 0 40px; }
.v9-center { text-align: center; }
.v9-center .v9-lead { margin-left: auto; margin-right: auto; }
.v9-grad { background: linear-gradient(100deg, #2563eb, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- 按钮 ---------- */
.v9-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; line-height: 1;
    padding: 15px 30px; border-radius: 12px; text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
    cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.v9-btn--hot { background: linear-gradient(100deg, #ff6a00, #ff8a33); color: #fff; box-shadow: 0 8px 26px rgba(255, 106, 0, .32); }
.v9-btn--hot:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255, 106, 0, .45); }
.v9-btn--grad { background: linear-gradient(100deg, #2563eb, #22d3ee); color: #fff; box-shadow: 0 8px 26px rgba(34, 211, 238, .28); }
.v9-btn--grad:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(34, 211, 238, .4); }
.v9-btn--ghost { background: rgba(255, 255, 255, .04); color: #e5eaf3; border-color: rgba(255, 255, 255, .16); }
.v9-btn--ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(34, 211, 238, .5); color: #22d3ee; }

/* ============================================================
   屏2 · Hero
   ============================================================ */
.v9-hero { position: relative; overflow: hidden; padding: 78px 0 84px; }
.v9-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(720px 340px at 12% 6%, rgba(37, 99, 235, .20), transparent 70%),
        radial-gradient(620px 340px at 92% 18%, rgba(34, 211, 238, .16), transparent 72%);
}
.v9-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(56,189,248,.055) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(56,189,248,.055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(760px 460px at 50% 30%, #000 25%, transparent 78%);
            mask-image: radial-gradient(760px 460px at 50% 30%, #000 25%, transparent 78%);
}
.v9-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center; }
.v9-hero-copy h1 { font-size: 52px; line-height: 1.18; font-weight: 900; color: #f1f5f9; margin: 0 0 20px; letter-spacing: -.02em; }
.v9-hero-copy h1 em { font-style: normal; background: linear-gradient(100deg, #2563eb, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.v9-hero-sub { font-size: 18px; line-height: 1.75; color: #94a3b8; margin: 0 0 28px; max-width: 560px; }
.v9-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.v9-hero-note { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 14px; color: #64748b; }
.v9-hero-note b { color: #94a3b8; font-weight: 600; }
.v9-hero-note .dot { width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; }

/* Hero 右侧：AI 问答演示窗 */
.v9-demo {
    border-radius: 18px; padding: 1px;
    background: linear-gradient(140deg, rgba(34,211,238,.45), rgba(37,99,235,.28) 55%, rgba(255,255,255,.06));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.v9-demo-inner { background: #0e1425; border-radius: 17px; padding: 20px 20px 22px; }
.v9-demo-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.v9-demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.v9-demo-bar i:nth-child(1) { background: #ff5f57; }
.v9-demo-bar i:nth-child(2) { background: #febc2e; }
.v9-demo-bar i:nth-child(3) { background: #28c840; }
.v9-demo-bar span { margin-left: auto; font-size: 12px; color: #64748b; }
.v9-ask { font-size: 14px; color: #e5eaf3; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.2); border-radius: 12px 12px 12px 4px; padding: 12px 14px; margin-bottom: 16px; }
.v9-ask b { color: #22d3ee; font-weight: 600; }
.v9-ans { font-size: 13.5px; line-height: 1.85; color: #94a3b8; }
.v9-ans .ai-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #22d3ee; letter-spacing: .06em; margin-bottom: 10px; }
.v9-ans .ai-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee; }
.v9-ans .who { color: #e5eaf3; font-weight: 600; }
.v9-ans .miss { color: #ff8a33; font-weight: 600; border-bottom: 1px dashed rgba(255,138,51,.5); }
.v9-ans .rival { color: #f1f5f9; font-weight: 600; }
.v9-ans p { margin: 0 0 8px; }
.v9-ans p:last-child { margin-bottom: 0; }
.v9-cursor { display: inline-block; width: 8px; height: 15px; background: #22d3ee; vertical-align: -2px; margin-left: 2px; animation: v9-blink 1s steps(1) infinite; }
@keyframes v9-blink { 50% { opacity: 0; } }
.v9-demo-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.1); font-size: 12.5px; color: #ff8a33; display: flex; align-items: center; gap: 8px; }

/* ============================================================
   屏3 · 痛点共鸣
   ============================================================ */
.v9-pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v9-pain {
    background: rgba(255,255,255,.03); border: 1px solid rgba(56,189,248,.15);
    border-radius: 16px; padding: 30px 26px; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.v9-pain:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.45); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.v9-pain-ico { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.22); }
.v9-pain h3 { font-size: 20px; font-weight: 700; color: #f1f5f9; margin: 0 0 10px; }
.v9-pain p { font-size: 15px; line-height: 1.85; color: #94a3b8; margin: 0; }
.v9-pain p b { color: #ff8a33; font-weight: 600; }

/* ============================================================
   屏4 · 一句话讲清 GEO
   ============================================================ */
.v9-answer {
    border-radius: 18px; padding: 40px 44px; position: relative;
    background: rgba(255,255,255,.03); border: 1px solid rgba(56,189,248,.2);
    max-width: 940px; margin: 0 auto;
}
.v9-answer::before { content: "“"; position: absolute; top: 6px; left: 26px; font-size: 90px; line-height: 1; color: rgba(34,211,238,.18); font-family: Georgia, serif; }
.v9-answer-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #22d3ee; margin-bottom: 16px; letter-spacing: .04em; }
.v9-answer p { font-size: 19px; line-height: 1.9; color: #e5eaf3; margin: 0; position: relative; z-index: 1; }
.v9-answer p b { color: #22d3ee; font-weight: 700; }

/* ============================================================
   屏5 · 三档服务
   ============================================================ */
.v9-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.v9-svc {
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.03); border: 1px solid rgba(56,189,248,.15);
    border-radius: 18px; padding: 32px 28px; transition: transform .25s, border-color .25s, box-shadow .25s; position: relative;
}
.v9-svc:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.45); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.v9-svc--feat { border-color: rgba(34,211,238,.5); background: linear-gradient(180deg, rgba(34,211,238,.07), rgba(255,255,255,.02)); }
.v9-svc-badge { position: absolute; top: -12px; left: 28px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(100deg, #ff6a00, #ff8a33); padding: 5px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(255,106,0,.4); }
.v9-svc-name { font-size: 21px; font-weight: 800; color: #f1f5f9; margin: 0 0 6px; }
.v9-svc-sub { font-size: 14px; color: #64748b; margin: 0 0 18px; }
.v9-svc-price { font-size: 34px; font-weight: 900; color: #22d3ee; margin: 0 0 6px; letter-spacing: -.02em; }
.v9-svc-price small { font-size: 15px; font-weight: 600; color: #94a3b8; margin-left: 4px; }
.v9-svc-price .q { font-size: 18px; }
.v9-svc-list { list-style: none; padding: 0; margin: 20px 0 26px; flex: 1; }
.v9-svc-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.75; color: #94a3b8; margin-bottom: 11px; }
.v9-svc-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 9px; border-left: 2px solid #22d3ee; border-bottom: 2px solid #22d3ee; transform: rotate(-45deg); }
.v9-svc .v9-btn { justify-content: center; width: 100%; }

/* ============================================================
   屏6 · 双行业方案
   ============================================================ */
.v9-ind-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.v9-ind {
    display: block; text-decoration: none; position: relative; overflow: hidden;
    background: rgba(255,255,255,.03); border: 1px solid rgba(56,189,248,.15);
    border-radius: 18px; padding: 38px 34px; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.v9-ind:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.5); box-shadow: 0 22px 54px rgba(0,0,0,.45); }
.v9-ind-ico { width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.24); margin-bottom: 20px; }
.v9-ind h3 { font-size: 24px; font-weight: 800; color: #f1f5f9; margin: 0 0 12px; }
.v9-ind p { font-size: 15px; line-height: 1.85; color: #94a3b8; margin: 0 0 18px; }
.v9-ind-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.v9-ind-tags span { font-size: 12.5px; color: #22d3ee; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.2); padding: 4px 11px; border-radius: 999px; }
.v9-ind-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 15px; font-weight: 700; color: #22d3ee; }

/* ============================================================
   屏7 · 方法论权威（GEO 七步法）
   ============================================================ */
.v9-steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.v9-step {
    background: rgba(255,255,255,.03); border: 1px solid rgba(56,189,248,.15);
    border-radius: 14px; padding: 22px 16px; text-align: center; transition: transform .25s, border-color .25s;
}
.v9-step:hover { transform: translateY(-5px); border-color: rgba(34,211,238,.5); }
.v9-step-n { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #0a0e1a; background: linear-gradient(140deg, #22d3ee, #2563eb); }
.v9-step h4 { font-size: 15px; font-weight: 700; color: #f1f5f9; margin: 0 0 7px; }
.v9-step p { font-size: 12.5px; line-height: 1.6; color: #64748b; margin: 0; }

/* ============================================================
   屏8 · 信任背书墙
   ============================================================ */
.v9-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.v9-trust { background: rgba(255,255,255,.03); border: 1px solid rgba(56,189,248,.15); border-radius: 16px; padding: 26px 22px; }
.v9-trust h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #22d3ee; margin: 0 0 16px; letter-spacing: .02em; }
.v9-trust ul { list-style: none; padding: 0; margin: 0; }
.v9-trust li { font-size: 14px; line-height: 1.7; color: #94a3b8; padding: 7px 0 7px 18px; position: relative; border-bottom: 1px solid rgba(255,255,255,.05); }
.v9-trust li:last-child { border-bottom: none; }
.v9-trust li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; }
.v9-trust li b { color: #e5eaf3; font-weight: 600; }
.v9-trust-note { text-align: center; font-size: 12.5px; color: #64748b; margin-top: 26px; line-height: 1.8; }

/* ============================================================
   屏9 · 免费体检强转化区
   ============================================================ */
.v9-check {
    border-radius: 22px; padding: 56px 48px; text-align: center; position: relative; overflow: hidden;
    background: linear-gradient(140deg, rgba(37,99,235,.22), rgba(34,211,238,.14) 55%, rgba(255,106,0,.12));
    border: 1px solid rgba(34,211,238,.3);
}
.v9-check::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(56,189,248,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,.06) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(600px 300px at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(600px 300px at 50% 40%, #000, transparent 75%); }
.v9-check > * { position: relative; z-index: 1; }
.v9-check h2 { font-size: 34px; font-weight: 800; color: #fff; margin: 0 0 14px; }
.v9-check p { font-size: 17px; line-height: 1.8; color: rgba(241,245,249,.8); margin: 0 auto 28px; max-width: 640px; }
.v9-check-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.v9-check-note { margin-top: 20px; font-size: 13.5px; color: rgba(241,245,249,.62); }
.v9-check-stats { display: flex; gap: 44px; justify-content: center; flex-wrap: wrap; margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.12); }
.v9-check-stat b { display: block; font-size: 30px; font-weight: 900; color: #fff; }
.v9-check-stat span { font-size: 13.5px; color: rgba(241,245,249,.7); }

/* ============================================================
   屏10 · FAQ
   ============================================================ */
.v9-faq { max-width: 880px; margin: 0 auto; }
.v9-faq details {
    background: rgba(255,255,255,.03); border: 1px solid rgba(56,189,248,.15);
    border-radius: 14px; margin-bottom: 14px; overflow: hidden; transition: border-color .2s;
}
.v9-faq details[open] { border-color: rgba(34,211,238,.45); }
.v9-faq summary { list-style: none; cursor: pointer; padding: 20px 26px; font-size: 17px; font-weight: 700; color: #f1f5f9; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v9-faq summary::-webkit-details-marker { display: none; }
.v9-faq summary::after { content: "+"; font-size: 24px; font-weight: 400; color: #22d3ee; transition: transform .25s; flex-shrink: 0; }
.v9-faq details[open] summary::after { transform: rotate(45deg); }
.v9-faq .v9-faq-a { padding: 0 26px 22px; font-size: 15.5px; line-height: 1.85; color: #94a3b8; }

/* ============================================================
   入场动画（IntersectionObserver 加 .in 触发）
   ============================================================ */
.v9-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.v9-reveal.in { opacity: 1; transform: none; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
    .v9-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .v9-hero-copy h1 { font-size: 42px; }
    .v9-steps { grid-template-columns: repeat(4, 1fr); }
    .v9-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .v9-band { padding: 60px 0; }
    .v9-h2 { font-size: 28px; }
    .v9-hero { padding: 44px 0 52px; }
    .v9-hero-copy h1 { font-size: 32px; }
    .v9-hero-sub { font-size: 16px; }
    .v9-pain-grid, .v9-svc-grid, .v9-ind-grid { grid-template-columns: 1fr; }
    .v9-steps { grid-template-columns: repeat(2, 1fr); }
    .v9-trust-grid { grid-template-columns: 1fr; }
    .v9-answer { padding: 30px 24px; }
    .v9-answer p { font-size: 16.5px; }
    .v9-check { padding: 40px 24px; }
    .v9-check h2 { font-size: 26px; }
    .v9-check-stats { gap: 26px; }
    .v9-btn { padding: 14px 24px; font-size: 15px; }
}