/* ============================================================
   FASIV 首页专属样式 —— 精密仪器版 v2（Acoustic Precision）
   原则：区块数量做减法，质感图层做加法
   （照片拼贴 / 视差磨砂卡 / 深色光晕数据带 / 渐变服务卡），
   品牌体系：石墨黑 + 红橙信号色；签名元素：调音刻度尺。
   作用域：仅 .home 容器内生效，不影响内页。
   ============================================================ */

.home {
    --ruler: rgba(255, 255, 255, 0.22);
    --ruler-line: rgba(255, 255, 255, 0.14);
    --ruler-ink: rgba(23, 29, 38, 0.24);
    --ruler-line-ink: rgba(23, 29, 38, 0.16);
    --tag-dark: rgba(233, 238, 245, 0.38);
    --tag-light: rgba(23, 29, 38, 0.42);
}

/* ---------------- Hero：完全继承基础影棚舞台，仅压低频谱存在感 ---------------- */
.home .hero-eq { opacity: 0.22; }

/* ---------------- 区块底色：石墨 / 冷石交替 ---------------- */
.home .sec-light,
.home .sec-light:nth-of-type(even) { background: var(--c-light-bg); }
.home .sec-dark { background: var(--c-bg); }

/* ---------------- 签名元素：调音刻度尺区头 ----------------
   发丝基线 + 向上刻度 + 左端红橙基准段 + 右侧等宽微标签 */
.home .sec-head,
.home .sec-head-row {
    position: relative;
    border-top: 0;
    padding-top: 36px;
}
.home .sec-head::before,
.home .sec-head-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    pointer-events: none;
    background:
        linear-gradient(var(--c-accent), var(--c-accent)) left bottom / 72px 2px no-repeat,
        repeating-linear-gradient(90deg, var(--ruler) 0 1px, transparent 1px 28px) left bottom / 100% 7px no-repeat,
        linear-gradient(var(--ruler-line), var(--ruler-line)) left bottom / 100% 1px no-repeat;
}
.home .sec-light .sec-head::before,
.home .sec-light .sec-head-row::before {
    background:
        linear-gradient(var(--c-accent), var(--c-accent)) left bottom / 72px 2px no-repeat,
        repeating-linear-gradient(90deg, var(--ruler-ink) 0 1px, transparent 1px 28px) left bottom / 100% 7px no-repeat,
        linear-gradient(var(--ruler-line-ink), var(--ruler-line-ink)) left bottom / 100% 1px no-repeat;
}
.scale-tag {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-138%);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tag-dark);
    pointer-events: none;
}
.home .sec-light .scale-tag { color: var(--tag-light); }

/* ---------------- 区块标题：整体放大一档，撑住大气场 ---------------- */
.home .sec-title {
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    letter-spacing: -0.01em;
}
.home .sec-sub { font-size: 1.02rem; }

/* ---------------- 场景区：左场景卡列表 + 右现场实拍拼贴 ---------------- */
.sc-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(26px, 3.5vw, 48px);
    align-items: stretch;
}
/* 场景卡：白卡 + 红橙图标瓷砖 + 通道号 */
.sc-list { display: grid; grid-template-columns: 1fr; gap: 16px; align-content: start; }
.sc-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid rgba(10, 13, 18, 0.08);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.sc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 74, 34, 0.4);
    box-shadow: var(--shadow);
}
.sc-ico {
    display: block;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 74, 34, 0.09);
    transition: background 0.28s var(--ease);
}
.sc-ico::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--c-accent);
    -webkit-mask: var(--scene-icon) center / 30px no-repeat;
    mask: var(--scene-icon) center / 30px no-repeat;
    transition: background 0.28s var(--ease);
}
.sc-txt { min-width: 0; }
.sc-txt b {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    color: rgba(91, 102, 117, 0.65);
    transition: color 0.25s;
}
.sc-txt h3 {
    margin-top: 4px;
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--c-dark-text);
    transition: color 0.25s;
}
.sc-go {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(10, 13, 18, 0.12);
    color: var(--c-accent);
    font-size: 0.95rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), background 0.28s, border-color 0.28s;
}
.sc-card:hover .sc-go { opacity: 1; transform: translateX(0); }
.sc-card:hover .sc-ico { background: var(--c-accent); }
.sc-card:hover .sc-ico::before { background: #fff; }
.sc-card:hover .sc-txt h3 { color: var(--c-accent); }
.sc-card:hover .sc-go { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* 实拍拼贴：圆角 + 柔影 + 悬停推近 + 磨砂角标 */
.sc-gallery {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    height: 100%;
    min-height: 480px;
}
.sc-shot {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--c-bg-2);
    box-shadow: var(--shadow-sm);
}
.sc-shot-tall { grid-column: 1; grid-row: 1 / span 2; }
.sc-shot-col { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-rows: repeat(2, 1fr); gap: 16px; }
.sc-shot figure { height: 100%; }
.sc-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
/* 横幅素材文字在左、主体在右：右锚 + 加大裁切窗口，让烧录文字完全出画 */
.sc-shot-col .sc-shot img {
    object-position: 100% 50%;
    transform: scale(1.3);
    transform-origin: 100% 50%;
}
/* 左缘暗渐晕：压掉素材残余小字，同时收拢画面 */
.sc-shot-col .sc-shot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(8, 11, 17, 0.5), transparent 30%);
    pointer-events: none;
}
.sc-shot:hover img { transform: scale(1.36); }
.sc-shot-tall:hover img { transform: scale(1.05); }
.sc-shot::after {
    content: "";
    position: absolute;
    inset: 32% 0 0;
    background: linear-gradient(180deg, transparent, rgba(8, 11, 17, 0.42));
    pointer-events: none;
}
.sc-cap {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--c-dark-text);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(2, 6, 14, 0.22);
}
.sc-cap b { color: var(--c-accent); letter-spacing: 0.08em; }

/* ---------------- 工厂数据：深色光晕横幅 ---------------- */
.home-stats {
    background:
        radial-gradient(58% 130% at 50% -20%, rgba(255, 74, 34, 0.16), transparent 62%),
        var(--c-bg);
    color: var(--c-text);
}
.stats-band {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 26px;
}
.stats-band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    pointer-events: none;
    background:
        linear-gradient(var(--c-accent), var(--c-accent)) left bottom / 72px 2px no-repeat,
        repeating-linear-gradient(90deg, var(--ruler) 0 1px, transparent 1px 28px) left bottom / 100% 7px no-repeat,
        linear-gradient(var(--ruler-line), var(--ruler-line)) left bottom / 100% 1px no-repeat;
}
.stat { padding: 8px 32px; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.stat strong {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.01em;
    color: #fff;
}
.stat strong i {
    font-style: normal;
    font-size: 0.5em;
    margin-left: 3px;
    color: var(--c-accent-2);
}
.stat p { margin-top: 8px; font-size: 0.9rem; color: var(--c-text-2); }

/* ---------------- 产品优点：恢复视差照片底 + 磨砂白卡（4 项 2×2） ---------------- */
.merit-list-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------- 视频 / 服务卡：保持基础渐变卡质感 ---------------- */
.media-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 26px;
    max-width: 880px;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 30px;
}

/* ---------------- 咨询 CTA：光晕面板 + 红橙顶线 ---------------- */
.home-cta-sec {
    background:
        radial-gradient(52% 80% at 50% 0%, rgba(255, 74, 34, 0.1), transparent 62%),
        var(--c-bg);
}
.home-cta {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(56px, 7vw, 84px) clamp(28px, 5vw, 72px);
    text-align: center;
    background:
        radial-gradient(58% 88% at 50% 0%, rgba(255, 74, 34, 0.08), transparent 62%),
        var(--c-bg-2);
    border: 1px solid var(--c-line);
    box-shadow: 0 30px 80px rgba(2, 6, 14, 0.5);
    overflow: hidden;
}
.home-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
}
.home-cta .scale-tag { color: var(--tag-dark); }
.home-cta-kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: var(--c-accent-2);
    margin-bottom: 16px;
}
.home-cta-title {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 16px;
}
.home-cta-sub {
    max-width: 36em;
    margin: 0 auto;
    color: var(--c-text-2);
    font-size: 1rem;
}
.home-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
    .sc-grid { grid-template-columns: 1fr; }
    .sc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-gallery { min-height: 0; }
    .sc-shot-tall { aspect-ratio: 4 / 3; }
    .sc-shot-col .sc-shot { aspect-ratio: 16 / 9; }
    .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
    .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
    .merit-list-4 { grid-template-columns: 1fr; }
    .service-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 640px) {
    .scale-tag { display: none; }
    .home .sec-head, .home .sec-head-row { padding-top: 28px; }
    .home .sec-title { font-size: clamp(1.6rem, 7.4vw, 2rem); }
    .sc-list { grid-template-columns: 1fr; gap: 12px; }
    .sc-card { padding: 16px 18px; }
    .sc-ico { width: 46px; height: 46px; }
    .sc-gallery { grid-template-columns: 1fr; grid-template-rows: none; }
    .sc-shot-tall { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
    .sc-shot-col { grid-column: 1; grid-row: auto; grid-template-rows: none; }
    .sc-shot-col .sc-shot { aspect-ratio: 1 / 1; }
    .sc-cap { left: 14px; bottom: 14px; }
    .stats-band { grid-template-columns: 1fr 1fr; row-gap: 26px; padding-top: 22px; }
    .stat { padding: 0 18px; }
    .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
    .stat strong { font-size: 1.6rem; }
    .stat p { font-size: 0.8rem; }
    .media-row { grid-template-columns: 1fr; gap: 20px; }
    .home-cta { padding: 44px 22px; }
    .home-cta-actions { flex-direction: column; }
    .home-cta-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-card, .sc-go, .sc-ico, .sc-shot img, .service-card { transition: none; }
}