/* 首頁 (產品介紹), 共用樣式見 static/css/site.css */

/* - Hero - */
.home-hero-inner { padding-block: 120px 88px; }
.home-hero-title { font-size: 60px; line-height: 1.1; max-width: 900px; margin-bottom: var(--space-6); }
.home-hero-lead { max-width: 640px; margin-bottom: 40px; font-size: 18px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.home-hero-actions { gap: var(--space-3); }

/* - 三大理念: 各自獨立的圓角玻璃卡片 - */
.home-pillars-section { padding-bottom: 24px; }
.home-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-pillar {
  position: relative; overflow: hidden; padding: 36px 32px;
  background: linear-gradient(160deg, var(--site-panel-strong), var(--site-panel));
  border: 1px solid var(--site-border); border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow);
}
/* 右上角柔光, 讓卡片有由內而外的光澤 */
.home-pillar::after {
  content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px;
  background: radial-gradient(circle, var(--site-glow), transparent 70%); pointer-events: none;
}
.home-pillar-no { margin-bottom: var(--space-4); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 34px; }
.home-pillar-no { background: linear-gradient(120deg, var(--color-accent-200), var(--color-accent-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-pillar h3 { font-size: 22px; }
.home-pillar p { margin: 0; font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* - 系統功能 - */
.home-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-feature {
  display: flex; flex-direction: column; gap: var(--space-2); padding: 28px;
  background: var(--site-panel); border: 1px solid var(--site-border); border-radius: var(--site-radius-md);
  transition: transform 0.3s var(--site-ease), border-color 0.3s ease, box-shadow 0.3s var(--site-ease);
}
.home-feature:hover {
  transform: translateY(-4px); box-shadow: var(--site-shadow);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.home-feature-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.home-feature-title { margin: 0; font-size: 19px; }
.home-feature p { margin: 0; font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* - 風控原則 - */
.home-principles-section {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-surface) 35%, transparent) 30%, color-mix(in srgb, var(--color-surface) 35%, transparent) 70%, transparent);
}
.home-principles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.home-principle {
  display: flex; gap: var(--space-4); padding: 20px;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  border: 1px solid var(--site-border); border-radius: var(--site-radius-md);
}
.home-principle-no {
  flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px;
  background: linear-gradient(135deg, var(--color-accent-300), var(--color-accent-500)); color: var(--color-bg);
  border-radius: 50%; box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.home-principle strong { display: block; margin-bottom: var(--space-1); font-size: 16px; }
.home-principle p { margin: 0; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* - 資金安全 - */
.home-security { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-security-item {
  padding: 28px; background: var(--site-panel); border: 1px solid var(--site-border); border-radius: var(--site-radius-md);
}
.home-security-icon {
  width: 44px; height: 44px; margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; color: var(--color-accent-300);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); border-radius: var(--site-radius-sm);
}
.home-security-item h4 { margin-bottom: var(--space-2); }
.home-security-item p { margin: 0; font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* - CTA: 帶珊瑚色柔光的圓角面板 - */
.home-cta-section { padding-bottom: 96px; }
.home-cta {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: 56px; border-radius: var(--site-radius-lg);
  background:
    radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 70%),
    linear-gradient(135deg, var(--color-surface), var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  box-shadow: var(--site-shadow);
}
.home-cta h2 { margin: 0 0 var(--space-2); max-width: 620px; font-size: 32px; }
.home-cta p { margin: 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.home-cta-actions { gap: var(--space-3); }

/* - Responsive - */
@media (max-width: 1023.98px) {
  .home-hero-inner { padding-block: 88px 64px; }
  .home-hero-title { font-size: 46px; }
  .home-pillars { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-pillar { padding: 28px; }
  .home-feature-grid, .home-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-security { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .home-cta { padding: 40px; }
  .home-cta-section { padding-bottom: 72px; }
}

@media (max-width: 639.98px) {
  .home-hero-inner { padding-block: 56px 40px; }
  .home-hero-title { font-size: 32px; }
  .home-break-wide { display: none; }
  .home-hero-lead { font-size: 15px; margin-bottom: var(--space-6); }
  .home-hero-actions .btn, .home-cta-actions .btn { flex: 1 1 100%; }
  .home-pillar { padding: 22px; border-radius: var(--site-radius-md); }
  .home-pillar-no { font-size: 28px; margin-bottom: var(--space-2); }
  .home-feature-grid, .home-principles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home-feature, .home-security-item { padding: 22px; }
  .home-principle { padding: 16px; }
  .home-cta { padding: 28px 22px; border-radius: var(--site-radius-md); }
  .home-cta h2 { font-size: 24px; }
  .home-cta-actions { width: 100%; }
  .home-cta-section { padding-bottom: 52px; }
}