/* =========================
   Home Matrix (scoped)
   ========================= */
.home-matrix {
    --mx-surface: rgba(255,255,255,.06);
    --mx-border: rgba(255,255,255,.12);
    --mx-text: rgba(255,255,255,.92);
    --mx-muted: rgba(255,255,255,.70);
    --mx-link: #66a7ff;
    /* SVG palette */
    --mx-svg-bg: #000;
    --mx-svg-axis: rgba(255,255,255,.55);
    --mx-svg-label: rgba(255,255,255,.85);
    --mx-card: rgba(255,255,255,.92);
    --mx-card2: rgba(255,255,255,.78);
    --mx-cardText: rgba(0,0,0,.82);
    --mx-cardTitle: rgba(0,0,0,.88);
    /* TRANSFORM knobs (你只改這裡就好) */
    --mx-scale: 1;
    --mx-tx: 0px; /* 往右(+) 往左(-) */
    --mx-ty: 0px; /* 往下(+) 往上(-) */
}

html[data-theme="light"] .home-matrix {
    --mx-surface: #dcd1eb;
    --mx-border: rgba(0,0,0,.10);
    --mx-text: rgba(0,0,0,.88);
    --mx-muted: rgba(0,0,0,.62);
    --mx-link: #1e66ff;
    /* SVG 在 light mode 仍維持黑底示意圖（跟你圖三一致） */
    --mx-svg-bg: #000;
    --mx-svg-axis: rgba(255,255,255,.55);
    --mx-svg-label: rgba(255,255,255,.85);
    --mx-card: rgba(255,255,255,.92);
    --mx-card2: rgba(255,255,255,.78);
    --mx-cardText: rgba(0,0,0,.82);
    --mx-cardTitle: rgba(0,0,0,.88);
}

/* Layout */
.home-matrix .mx-wrap {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 992px) {
    .home-matrix .mx-wrap {
        grid-template-columns: 1fr;
    }
}

/* Left content */
.home-matrix .mx-title {
    color: var(--mx-text);
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 10px;
}

.home-matrix .mx-lead {
    color: var(--mx-muted);
    line-height: 1.7;
    margin: 0 0 14px;
}

.home-matrix .mx-bullets {
    color: var(--mx-muted);
    margin: 0 0 18px;
    padding-left: 18px;
}

.home-matrix .mx-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 640px) {
    .home-matrix .mx-cards {
        grid-template-columns: 1fr;
    }
}

.home-matrix .mx-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: 14px;
    padding: 14px 14px 12px;
}

    .home-matrix .mx-card h4 {
        color: var(--mx-text);
        font-size: 16px;
        margin: 0 0 6px;
        font-weight: 750;
    }

    .home-matrix .mx-card p {
        color: var(--mx-muted);
        margin: 0;
        line-height: 1.55;
    }

/* Right figure */
.home-matrix .mx-figure {
    background: var(--mx-svg-bg);
    border-radius: 18px;
    padding: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.home-matrix .mx-svg {
    width: 100%;
    height: auto;
    display: block;
    /* ✅ transform 版：只動「整張圖」的位置與縮放 */
    transform-origin: 50% 50%;
    transform: translate(var(--mx-tx), var(--mx-ty)) scale(var(--mx-scale));
}

/* SVG classes (顏色全部由 CSS 變數決定) */
.home-matrix .mx-axis {
    stroke: var(--mx-svg-axis);
    stroke-width: 5;
}

.home-matrix .mx-axis2 {
    stroke: var(--mx-svg-axis);
    stroke-width: 6;
}

.home-matrix .mx-label {
    fill: var(--mx-svg-label);
    font-weight: 700;
    letter-spacing: .5px;
}

.home-matrix .mx-label-muted {
    fill: rgba(255,255,255,.70);
}

.home-matrix .mx-rect {
    fill: var(--mx-card);
}

.home-matrix .mx-rect2 {
    fill: var(--mx-card2);
}

.home-matrix .mx-cardTitle {
    fill: var(--mx-cardTitle);
    font-weight: 800;
}

.home-matrix .mx-cardText {
    fill: var(--mx-cardText);
    font-weight: 600;
}