/* Extracted from src/scenarios/software.njk style block 1 */
/* ============ software.njk · page-scoped ============ */

/* §01 系统 × 问法 — 顶部系统标签 + 场景图问答面板 */
.sw-match{ display:flex; flex-direction:column; gap:18px; }

/* 顶部：系统标签横排 */
.sw-match-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.sw-match-tab{
    display:flex; align-items:center; gap:12px;
    text-align:left; cursor:pointer; font-family:inherit;
    padding:14px 15px;
    background:#fff; border:1px solid var(--scn-line); border-radius:14px;
    transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.sw-match-tab:hover{ transform:translateY(-2px); }
.sw-match-tab.is-active{ border-color:var(--tint-ink); box-shadow:0 12px 26px rgba(45,38,28,.1); }
.sw-match-ic{
    width:42px; height:42px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--tint); color:var(--tint-ink); font-size:17px;
    transition:background .25s var(--ease-out), color .25s var(--ease-out);
}
.sw-match-tab.is-active .sw-match-ic{ background:var(--tint-ink); color:#fff; }
.sw-match-tx{ min-width:0; }
.sw-match-tx b{ display:block; font-size:15px; font-weight:850; letter-spacing:-.005em; color:var(--text-primary); }
.sw-match-tx small{ display:block; margin-top:1px; font-size:11.5px; color:var(--text-muted); }

/* 面板：左场景图 + 右问答 */
.sw-match-stage{
    background:#fff; border:1px solid var(--scn-line);
    border-radius:18px; overflow:hidden; box-shadow:var(--scn-shadow-sm);
}
/* 所有面板默认展开堆叠；tab 仅作快捷锚点导航，不靠 display:none 切换。 */
.sw-match-panel{
    display:grid; grid-template-columns:minmax(0,392px) minmax(0,1fr);
    scroll-margin-top:90px;
}
.sw-match-panel + .sw-match-panel{ border-top:1px solid var(--scn-line); }
/* 左：场景图（占位为系统色块；填 --shot:url(...) 后显示实拍图） */
.sw-match-shot{
    position:relative; min-height:360px;
    padding:32px;
    display:flex; flex-direction:column; justify-content:space-between;
    background:
        var(--shot, linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))),
        linear-gradient(158deg, var(--tint-ink) 0%, #241d18 130%);
    background-size:cover; background-position:center;
}
.sw-match-shot::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
        linear-gradient(180deg, rgba(16,13,22,.08) 0%, rgba(16,13,22,.16) 46%, rgba(16,13,22,.74) 100%),
        linear-gradient(125deg, rgba(20,16,12,.36) 0%, transparent 54%);
}
.sw-match-shot::before{
    content:""; position:absolute; inset:18px; z-index:1; pointer-events:none;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.18);
    opacity:.75;
}
.sw-match-shot > *{ position:relative; z-index:2; }
.sw-match-shot-ic{
    width:56px; height:56px; border-radius:15px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.24);
    color:#fff; font-size:24px;
}
.sw-match-sname{
    display:block; margin-bottom:7px;
    font-family:var(--font-mono);
    font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.5);
    opacity:1;
}
.sw-match-shot h3{
    margin:0; color:#fff;
    font-size:21px; font-weight:850; letter-spacing:-.01em; line-height:1.32;
    text-shadow:0 3px 18px rgba(0,0,0,.62);
    opacity:1;
}
/* 右：问答卡片 */
.sw-match-qbox{ padding:24px 26px; }
.sw-match-qlist{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:11px;
}
.sw-match-qa{
    position:relative;
    border:1px solid var(--scn-line);
    border-radius:13px; overflow:hidden; background:#fff;
    transform-origin:center left;
    will-change:transform;
    backface-visibility:hidden;
    contain:paint;
    transition:
        border-color .28s var(--ease-out),
        box-shadow .28s var(--ease-out),
        transform .22s cubic-bezier(.2,.8,.2,1),
        background .28s var(--ease-out);
}
.sw-match-qa::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255,255,255,.68) 50%, transparent 62%, transparent 100%);
    transform:translateX(-120%);
    opacity:0;
}
.sw-match-qa:hover{
    z-index:2;
    transform:translate3d(-3px,0,0) scale(1.014);
    border-color:color-mix(in srgb, var(--tint-ink) 72%, white);
    box-shadow:0 12px 28px rgba(45,38,28,.1);
}
.sw-match-qa:hover::after{
    opacity:1;
    animation:swQaShine .9s var(--ease-out) both;
}
@keyframes swQaShine{
    from{ transform:translateX(-120%); }
    to{ transform:translateX(120%); }
}
.sw-match-qa-q{
    display:flex; align-items:center; gap:11px;
    padding:12px 15px;
    font-size:14.5px; font-weight:700; line-height:1.5; color:var(--text-primary);
    transition:font-weight .22s var(--ease-out), letter-spacing .22s var(--ease-out);
}
.sw-match-qa-q > span:last-child,
.sw-match-qa-a > span:last-child{
    display:inline-block;
    transform-origin:left center;
    will-change:transform;
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.sw-match-qa-ic{
    width:29px; height:29px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--tint); color:var(--tint-ink); font-size:12px;
}
.sw-match-qa:hover .sw-match-qa-ic{
    transform:scale(1.08);
    background:var(--tint-ink);
    color:#fff;
    box-shadow:0 8px 18px color-mix(in srgb, var(--tint-ink) 28%, transparent);
}
.sw-match-qa-a{
    display:flex; align-items:center; gap:11px;
    padding:10px 15px;
    background:var(--tint);
    font-size:12.5px; line-height:1.6; color:var(--text-secondary);
    transition:background .22s var(--ease-out), color .22s var(--ease-out);
}
.sw-match-qa:hover .sw-match-qa-q{
    font-weight:800;
    letter-spacing:-.004em;
}
.sw-match-qa:hover .sw-match-qa-q > span:last-child{
    transform:scale(1.045);
}
.sw-match-qa:hover .sw-match-qa-a > span:last-child{
    transform:scale(1.035);
}
.sw-match-qa-ai{
    width:29px; height:29px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:#fff; color:var(--tint-ink); font-size:10px;
    transition:transform .28s var(--ease-out), background .28s var(--ease-out), color .28s var(--ease-out);
}
.sw-match-qa:hover .sw-match-qa-ai{
    transform:scale(1.08) rotate(-4deg);
    background:var(--tint-ink);
    color:#fff;
}
.sw-match-qa-a b{ color:var(--text-primary); font-weight:700; }

@media (max-width:860px){
    .sw-match-list{ grid-template-columns:repeat(3,1fr); }
    .sw-match-panel{ grid-template-columns:1fr; }
    .sw-match-shot{ min-height:200px; }
}

/* H5：tab 隐藏，5 个 panel 纵向堆叠，核心问答保持直接可读。 */
@media (max-width:768px){
    .sw-match-list{ display:none; }
    .sw-match-stage{ display:flex; flex-direction:column; gap:12px; }
    .sw-match-panel{
        display:grid !important;
        grid-template-columns:1fr !important;
        border-radius:16px;
        border:1px solid var(--scn-line);
        overflow:hidden;
        background:#fff;
    }
    .sw-match-shot{
        min-height:auto;
        padding:18px 22px;
        cursor:pointer;
        position:relative;
        user-select:none;
    }
    .sw-match-shot h3{ font-size:15.5px; line-height:1.4; }
    .sw-match-shot-ic{ width:34px; height:34px; font-size:14px; }
    /* +/− 折叠指示符 */
    .sw-match-shot::after{
        content:"+"; position:absolute; top:50%; right:18px;
        transform:translateY(-50%);
        width:26px; height:26px; line-height:24px; text-align:center;
        border-radius:50%; background:rgba(255,255,255,.85);
        color:var(--tint-ink); font-weight:700; font-size:18px;
        transition:transform .25s var(--ease-out), background .25s var(--ease-out);
        z-index:3;
    }
    .sw-match-panel.is-active .sw-match-shot::after{ content:"•"; background:#fff; }
    .sw-match-panel:not(.is-active){ background:#FCFCFD; }
    .sw-match-panel:not(.is-active) .sw-match-shot::after{ opacity:.55; }
    .sw-match-qbox{ padding:16px 18px 20px; }
    .sw-match-qlist{ gap:9px; }
    .sw-match-qa{ padding:12px 14px; }
    .sw-match-qa-q,
    .sw-match-qa-a{ font-size:13px; line-height:1.55; }
    .sw-match-qa:hover{ transform:translate3d(0,-2px,0) scale(1.008); }
}
@media (max-width:520px){
    .sw-match-list{ grid-template-columns:repeat(2,1fr); }
    .sw-match-tab .sw-match-tx small{ display:none; }
}

.sw-tone-oa{ --tint:#e9f0fa; --tint-ink:#5575b8; }
.sw-tone-crm{ --tint:#efe9fb; --tint-ink:#7a52e0; }
.sw-tone-erp{ --tint:#f7efe0; --tint-ink:#bd863f; }
.sw-tone-pms{ --tint:#e4f1ee; --tint-ink:#479088; }
.sw-tone-own{ --tint:#e9f1e7; --tint-ink:#5f9259; }
.sw-shot-oa{ --shot:url('/assets/images/generated/software-oa-tab.webp'); }
.sw-shot-crm{ --shot:url('/assets/images/generated/software-crm-tab.webp'); }
.sw-shot-erp{ --shot:url('/assets/images/generated/software-erp-tab.webp'); }
.sw-shot-pms{ --shot:url('/assets/images/generated/software-pms-tab.webp'); }
.sw-shot-own{ --shot:url('/assets/images/generated/software-owned-platform-tab.webp'); }

/* §02 接入方式卡片 */
.sw-way-card{ display:flex; flex-direction:column; }
.sw-way-num{
    font-family:var(--font-mono);
    font-size:12px; font-weight:600; letter-spacing:.14em;
    color:var(--text-muted); margin-bottom:14px;
}
.sw-way-card .scn-card-icon{ margin-bottom:16px; }
.sw-way-card h4{ margin-bottom:8px; }
.sw-way-card > p{ margin-bottom:20px; }
.sw-way-meta{ margin:auto 0 0; padding:0; }
.sw-way-meta > div{
    display:flex; gap:11px; align-items:baseline;
    padding:9px 0; border-top:1px solid var(--scn-line-soft);
}
.sw-way-meta dt{
    flex-shrink:0;
    font-size:11.5px; font-weight:700; color:var(--accent);
}
.sw-way-meta dd{ margin:0; font-size:12.5px; line-height:1.5; color:var(--text-secondary); }

/* 演示视频区 */
.sw-video{
    position:relative;
    max-width:968px; margin:0 auto;
    aspect-ratio:16/9;
    border-radius:20px; overflow:hidden;
    border:1px solid var(--scn-line);
    background:
        radial-gradient(circle at 30% 24%, rgba(116,68,253,.09), transparent 58%),
        linear-gradient(155deg,#faf7f1 0%,#efe9df 100%);
    box-shadow:var(--scn-shadow);
    cursor:pointer;
}
.sw-video-poster{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:18px;
}
.sw-video-play{
    width:84px; height:84px;
    border:none; border-radius:50%;
    background:#fff; color:var(--accent);
    font-size:25px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 16px 38px rgba(116,68,253,.24);
    transition:transform .28s var(--ease-out);
}
.sw-video-play i{ margin-left:5px; }
.sw-video:hover .sw-video-play{ transform:scale(1.07); }
.sw-video-cap{
    font-family:var(--font-mono);
    font-size:11.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--text-muted);
}
.sw-video video{ display:block; width:100%; height:100%; object-fit:cover; background:#000; }