/*!
 * 珍妮樂齡・機構版 (B2B) — 專屬樣式
 * 建立在 landing.css 設計 token 上，accent 偏 teal（信賴/管理感）
 * Copyright © 2026 宥爵智能科技有限公司
 */

/* === 品牌微調：機構版偏 teal === */
.biz-mark { background: linear-gradient(135deg, var(--teal), #2E8576); box-shadow: 0 6px 16px rgba(63,167,150,0.4); }
.logo-text .biz-tag {
    display: inline-block; margin-left: 8px; font-size: 0.72rem; font-weight: 700; vertical-align: middle;
    color: #2E8576; background: #E5F4F0; border: 1px solid #BFE6DD; padding: 2px 10px; border-radius: 999px;
}
.btn-nav-cta.biz-cta { background: var(--teal); box-shadow: 0 6px 16px rgba(63,167,150,0.35); }
.btn-nav-cta.biz-cta:hover { background: #2E8576; }
.btn-primary-lg.biz-primary { background: var(--teal); box-shadow: 0 8px 20px rgba(63,167,150,0.4); }
.btn-primary-lg.biz-primary:hover { background: #2E8576; }

.highlight-teal {
    background: linear-gradient(120deg, var(--teal), #2E8576);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* === Hero 背景偏冷暖過渡 === */
.biz-hero {
    background: radial-gradient(1200px 500px at 80% -10%, #E5F4F0, transparent),
               linear-gradient(180deg, var(--bg), var(--bg));
}
.hero-badge.biz-badge { color: #2E8576; border-color: #BFE6DD; }

/* === Hero 後台儀表板示意 === */
.dash-mock {
    width: 420px; max-width: 100%; background: #fff; border-radius: var(--radius-lg);
    padding: 26px 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.dash-head { font-size: 1.2rem; font-weight: 900; color: var(--text); margin-bottom: 18px; }
.dash-head i { color: var(--teal); margin-right: 8px; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.dash-stat { background: var(--bg-warm); border-radius: 14px; padding: 14px 10px; text-align: center; }
.dash-stat .num { display: block; font-size: 1.9rem; font-weight: 900; color: var(--text); line-height: 1.1; }
.dash-stat .lbl { font-size: 0.95rem; color: var(--text-muted); }
.dash-stat.ok { background: #EAF7F0; } .dash-stat.ok .num { color: #2E8576; }
.dash-stat.warn { background: #FDEEDD; } .dash-stat.warn .num { color: #C77E1E; }
.dash-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 16px; border-radius: 12px; margin-bottom: 10px; font-size: 1.05rem; font-weight: 500;
}
.dash-row span:first-child { display: flex; align-items: center; gap: 10px; }
.dash-row.ok { background: #EAF7F0; color: #2E8576; }
.dash-row.warn { background: #FDEEDD; color: #C77E1E; }

/* === 痛點 → 解決方案 對照 === */
.painmap {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center;
}
.pain-col, .solve-col { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow); }
.solve-col { border-color: #BFE6DD; background: #FCFFFE; }
.pain-h, .solve-h { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.pain-h { color: var(--coral-dark); } .pain-h i { color: var(--coral); }
.solve-h { color: #2E8576; } .solve-h i { color: var(--teal); }
.pain-col ul, .solve-col ul { display: flex; flex-direction: column; gap: 14px; }
.pain-col li, .solve-col li { font-size: 1.12rem; color: var(--text); padding-left: 26px; position: relative; line-height: 1.7; }
.pain-col li::before { content: '✕'; position: absolute; left: 0; color: var(--coral); font-weight: 900; }
.solve-col li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 900; }
.map-arrow { font-size: 2rem; color: var(--teal); }

/* === ROI band（深色 teal）=== */
.roi-band { max-width: none; padding: 0; }
.roi-inner { background: linear-gradient(135deg, #2E8576, #246b5f); padding: 72px 24px; text-align: center; }
.roi-grid { max-width: 1100px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.roi-item { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-lg); padding: 34px 26px; color: #fff; }
.roi-item i { font-size: 2.4rem; margin-bottom: 16px; color: #BFF0E6; }
.roi-item h4 { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
.roi-item p { font-size: 1.08rem; color: rgba(255,255,255,0.88); line-height: 1.8; }

/* === 場域 + 合規 === */
.venue-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.venue-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; box-shadow: var(--shadow); }
.venue-h { font-size: 1.4rem; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.venue-h i { color: var(--teal); }
.venue-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.venue-tags span { font-size: 1.05rem; font-weight: 500; color: #2E8576; background: #E5F4F0; border: 1px solid #BFE6DD; padding: 9px 18px; border-radius: 999px; }

/* === 洽詢 CTA（teal）=== */
.biz-cta-box { background: linear-gradient(135deg, var(--teal), #246b5f); }
.cta-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-bottom: 28px; }
.cta-meta span { font-size: 1.05rem; color: rgba(255,255,255,0.95); font-weight: 500; }
.cta-meta i { margin-right: 6px; }
.biz-cta-box .btn-primary-lg { background: #fff; color: #2E8576; }
.btn-outline-lg.biz-tel { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.4); }

/* === 市場數據帶（為什麼是現在）=== */
.market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 8px; }
.market-stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow); text-align: center; }
.market-num { display: block; font-size: 2.6rem; font-weight: 900; color: #2E8576; line-height: 1.15; letter-spacing: -0.5px; }
.market-num small { font-size: 1.3rem; font-weight: 700; margin: 0 2px; }
.market-num .market-arrow { font-size: 1.3rem; color: var(--coral); margin: 0 8px; vertical-align: middle; }
.market-lbl { display: block; font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 10px 0 8px; }
.market-stat p { font-size: 1.02rem; color: var(--text-muted); line-height: 1.75; }
.market-takeaway { text-align: center; font-size: 1.22rem; color: var(--text); margin-top: 30px; line-height: 1.8; }
.market-takeaway strong { color: #2E8576; }
.market-src { text-align: center; font-size: 0.92rem; color: var(--text-muted); margin-top: 12px; }

/* === 響應式 === */
@media (max-width: 900px) {
    .dash-mock { width: 100%; }
    .painmap { grid-template-columns: 1fr; }
    .map-arrow { transform: rotate(90deg); justify-self: center; }
    .roi-grid, .venue-wrap, .market-grid { grid-template-columns: 1fr; }
}