/**
 * ============================================================
 * iHorse Mobile — ihorsemobile.com 推廣站共用樣式
 * ============================================================
 * 深度: 抽自 8 個 feature 頁(ihorsemobile_feature_*.html)重複的骨架樣式。
 * 目的: 推廣站 9 頁共用一份樣式,日後調整只改此檔。
 * 品牌: 保留深藍漸變 App 落地風格(與主站 ihorse.app 教育風格分開)。
 *
 * 每頁只保留自己特有的 class(如 .score-bar、.pool-grid 等)在頁內 <style>。
 * ============================================================
 */

:root {
    --corporate-blue: #003366;
    --logo-blue: #005B9A;
    --accent-blue: #007BFF;
    --success-green: #28a745;
    --gold: #c9a84c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang HK", "Microsoft JhengHei", sans-serif;
    background: linear-gradient(135deg, var(--corporate-blue) 0%, var(--logo-blue) 100%);
    min-height: 100vh;
    padding: 30px 20px 60px;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container { max-width: 700px; margin: 0 auto; }

/* ---- 返回連結 ---- */
.back-link {
    display: inline-block;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 20px;
}
.back-link:hover { color: #ffffff; }

/* ---- Hero 區 ---- */
.hero { text-align: center; margin-bottom: 32px; }
.hero .icon { font-size: 56px; margin-bottom: 8px; }
.hero h1 {
    font-size: 40px; font-weight: 700; margin-bottom: 6px;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}
.hero .sub { font-size: 15px; opacity: 0.8; }

/* ---- 內容卡片 ---- */
.card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
}
.card h2 { font-size: 20px; margin-bottom: 12px; }
.card p { font-size: 15px; line-height: 1.8; opacity: 0.9; margin-bottom: 10px; }
.card p.en { font-size: 13px; opacity: 0.6; }

/* ---- 重點功能列表 ---- */
.highlight-list { list-style: none; padding: 0; }
.highlight-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 14px;
    line-height: 1.6;
}
.highlight-list li:last-child { border-bottom: none; }
.highlight-list li .en { font-size: 12px; opacity: 0.5; display: block; }

/* ---- 下載卡片 ---- */
.download-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.download-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.download-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.download-card.ios:hover { border-color: #555555; }
.download-card.android:hover { border-color: var(--success-green); }
.download-card .dc-icon { font-size: 32px; flex-shrink: 0; }
.download-card .dc-text { flex: 1; }
.download-card .dc-title { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.download-card .dc-sub { font-size: 11px; color: #888888; }
.download-card .dc-arrow { font-size: 18px; color: #bbbbbb; flex-shrink: 0; }

/* ---- CTA 區 ---- */
.cta-section {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 28px 24px;
    margin: 24px 0;
    text-align: center;
}
.cta-section h3 { font-size: 18px; margin-bottom: 16px; }
.cta-section h3 .en { font-size: 13px; opacity: 0.6; display: block; margin-top: 2px; }

/* ---- 頁尾 ---- */
.footer-note { text-align: center; color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 24px; }

/* ---- 響應式 ---- */
@media (max-width: 600px) {
    .hero h1 { font-size: 30px; }
    .download-cards { grid-template-columns: 1fr; }
}