/* ===================================================
   品牌入口页（根路径 /）：左右分栏品牌选择
   对标 fjordaudio brands 页：左 FASIV（深色演出） / 右 FJORD AUDIO（浅色听音室）
   =================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

.brands-gate-html, body { height: 100%; }

body {
    font-family: 'Montserrat', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    background: #0c0b0a;
    -webkit-font-smoothing: antialiased;
}

.brand-gate {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- 面板 ---------- */
.brand-panel {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
}

.brand-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.001);
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

/* 轻微明暗罩，保证文字可读性 */
.brand-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity .5s ease;
}

.brand-fasiv::after {
    background: linear-gradient(180deg, rgba(10, 8, 6, .24), rgba(10, 8, 6, .36));
}

.brand-fjord::after {
    background: linear-gradient(180deg, rgba(250, 248, 244, .5), rgba(250, 248, 244, .58));
}

.brand-panel:hover .brand-bg,
.brand-panel:focus-visible .brand-bg {
    transform: scale(1.045);
}

.brand-panel:focus-visible {
    outline: 2px solid #e7371d;
    outline-offset: -2px;
}

/* ---------- 面板内容 ---------- */
.brand-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px clamp(20px, 5vw, 64px);
}

.brand-logo {
    display: block;
}

.brand-logo-fasiv {
    width: clamp(210px, 24vw, 320px);
    height: auto;
}

.brand-logo-fjord {
    width: clamp(96px, 10.5vw, 132px);
    height: auto;
}

.brand-title {
    margin-top: clamp(30px, 4.5vh, 52px);
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .06em;
}

.brand-sub {
    margin-top: clamp(14px, 2.4vh, 26px);
    font-size: clamp(14px, 1.35vw, 18px);
    line-height: 2;
    letter-spacing: .14em;
}

.brand-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: clamp(28px, 5vh, 46px);
    padding: 17px 42px;
    border: 1px solid currentColor;
    font-size: 14px;
    letter-spacing: .3em;
    text-indent: .3em; /* 抵消末字符字距，保持视觉居中 */
    transition: background-color .35s ease, color .35s ease;
}

.brand-arrow {
    font-style: normal;
    letter-spacing: 0;
    text-indent: 0;
    font-size: 15px;
    transition: transform .35s ease;
}

.brand-panel:hover .brand-arrow {
    transform: translate(3px, -3px);
}

/* ---------- 双色文案 ---------- */
.brand-fasiv {
    color: #fff;
}

.brand-fasiv .brand-btn:hover {
    background: rgba(255, 255, 255, .92);
    color: #1a1310;
}

.brand-fjord {
    color: #4a3f35;
}

.brand-fjord .brand-title {
    color: #262019;
}

.brand-fjord .brand-btn:hover {
    background: #4a3f35;
    color: #faf8f4;
}

/* ---------- 移动端：上下堆叠 ---------- */
@media (max-width: 820px) {
    .brand-gate {
        flex-direction: column;
    }

    .brand-panel,
    .brand-gate .brand-panel {
        flex: 1 1 50%;
        min-height: 50vh;
        min-height: 50dvh;
    }

    .brand-title {
        letter-spacing: .04em;
    }

    .brand-sub {
        line-height: 1.9;
    }

    .brand-btn {
        padding: 14px 30px;
        letter-spacing: .22em;
        text-indent: .22em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-bg,
    .brand-btn,
    .brand-arrow,
    .brand-panel::after {
        transition: none;
    }

    .brand-panel:hover .brand-bg {
        transform: none;
    }
}