/* ============================================================
   whitepaper.css — AGI DeFi White Paper Page Styles
   ============================================================ */

/* ─── Hero ─── */
.wp-hero {
  padding: var(--sp-16) var(--sp-4) var(--sp-10);
  text-align: center;
  background: linear-gradient(160deg, rgba(255,107,43,.06) 0%, transparent 60%);
  border-bottom: 1px solid var(--c-border);
}
.wp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid rgba(255,107,43,.35);
  background: rgba(255,107,43,.1);
  color: var(--c-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: var(--sp-4);
}
.wp-hero-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--sp-3);
  color: var(--c-text-primary);
}
.wp-hero-sub {
  font-size: var(--text-base);
  color: var(--c-text-muted);
  max-width: 600px;
  margin: 0 auto var(--sp-6);
}
.wp-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-6);
}
.wp-hero-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wp-hero-meta i { color: var(--c-primary); }

.wp-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.wp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  border: none;
  transition: opacity .2s;
}
.wp-btn-primary:hover { opacity: .88; }
.wp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.wp-btn-ghost:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* ─── Stats Bar ─── */
.wp-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin: 24px 0 !important;
}
@media (max-width: 768px) {
  .wp-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
.wp-stat {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  transition: var(--t-fast);
}
.wp-stat:hover {
  border-color: var(--c-primary);
  box-shadow: 0 0 18px rgba(255,107,43,0.15);
}
.wp-stat-val {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.wp-stat-lbl {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

/* ─── TOC Chips ─── */
.wp-toc-wrap {
  position: sticky;
  top: 64px;
  z-index: 80;
  background: var(--c-bg-base);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-4);
}
.wp-toc-chips {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 1100px;
  margin: 0 auto;
}
.wp-toc-chips::-webkit-scrollbar { display: none; }
.wp-toc-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  color: var(--c-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.wp-toc-chip.active,
.wp-toc-chip:hover {
  border-color: var(--c-primary);
  background: rgba(255,107,43,.1);
  color: var(--c-primary);
}

/* ─── Content Layout ─── */
.wp-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-4) var(--sp-16);
}

/* ─── Section ─── */
.wp-section {
  margin-bottom: var(--sp-14);
  scroll-margin-top: 120px;
}
.wp-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.wp-section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(255,107,43,.12);
  color: var(--c-primary);
  font-size: var(--text-base);
  font-weight: 800;
  flex-shrink: 0;
}
.wp-section-title {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 800;
  color: var(--c-text-primary);
}
.wp-section-body {
  font-size: var(--text-base);
  color: var(--c-text-muted);
  line-height: 1.8;
}
.wp-section-body p { margin-bottom: var(--sp-4); }
.wp-section-body strong { color: var(--c-text-primary); }

/* ─── Sub-heading ─── */
.wp-h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--c-text-primary);
  margin: var(--sp-6) 0 var(--sp-3);
}

/* ─── Token Distribution (Pie) ─── */
.wp-token-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 680px) {
  .wp-token-layout { grid-template-columns: 1fr; }
}

.wp-pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.wp-pie {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: conic-gradient(
    #FF6B2B 0%  40%,
    #34D399 40% 65%,
    #6366F1 65% 80%,
    #F59E0B 80% 100%
  );
  position: relative;
}
.wp-pie::after {
  content: 'AGI';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: var(--c-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--c-text-primary);
}
.wp-alloc-list {
  width: 100%;
}
.wp-alloc-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.wp-alloc-row:last-child { border-bottom: none; }
.wp-alloc-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.wp-alloc-label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--c-text-primary);
}
.wp-alloc-pct {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-text-primary);
}
.wp-alloc-bar-wrap {
  width: 80px;
  height: 6px;
  background: var(--c-border);
  border-radius: 3px;
  overflow: hidden;
}
.wp-alloc-bar {
  height: 100%;
  border-radius: 3px;
}

/* ─── Tables ─── */
.wp-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  margin: var(--sp-4) 0;
}
.wp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.wp-table thead tr {
  background: var(--c-bg-surface);
  border-bottom: 1px solid var(--c-border);
}
.wp-table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 700;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.wp-table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-text-primary);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.wp-table tr:last-child td { border-bottom: none; }
.wp-table tbody tr:hover { background: rgba(255,255,255,.03); }
.wp-td-green { color: #34D399; font-weight: 700; }
.wp-td-orange { color: var(--c-primary); font-weight: 700; }
.wp-td-purple { color: #A855F7; font-weight: 700; }
.wp-td-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

/* ─── Info Box ─── */
.wp-info-box {
  border-radius: var(--r-md);
  border: 1px solid rgba(255,107,43,.25);
  background: rgba(255,107,43,.06);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  line-height: 1.7;
}
.wp-info-box strong { color: var(--c-primary); }

/* ─── Highlight Cards (3-col) ─── */
.wp-cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}
@media (max-width: 600px) { .wp-cards-3 { grid-template-columns: 1fr; } }
.wp-card {
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  padding: var(--sp-4);
  text-align: center;
}
.wp-card-icon {
  font-size: 1.6rem;
  margin-bottom: var(--sp-2);
}
.wp-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-text-primary);
  margin-bottom: var(--sp-1);
}
.wp-card-desc {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  line-height: 1.6;
}

/* ─── Disclaimer ─── */
.wp-disclaimer {
  border-radius: var(--r-md);
  border: 1px solid rgba(239,68,68,.3);
  background: rgba(239,68,68,.06);
  padding: var(--sp-5);
  margin-top: var(--sp-6);
}
.wp-disclaimer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 700;
  color: #EF4444;
  margin-bottom: var(--sp-3);
}
.wp-disclaimer-body {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  line-height: 1.8;
}

/* ─── CTA Footer ─── */
.wp-cta {
  margin-top: var(--sp-14);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
}
.wp-cta-title {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--c-text-primary);
  margin-bottom: var(--sp-2);
}
.wp-cta-sub {
  font-size: var(--text-base);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-6);
}
.wp-cta-btns {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ============================================================
   新增元件 — 跨境詞元白皮書專用
   ============================================================ */

/* ─── Preface Box（前言段落框）─── */
.wp-preface {
  border-left: 4px solid var(--c-primary);
  background: rgba(255,107,43,.04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.wp-preface p {
  margin-bottom: var(--sp-3);
  font-size: var(--text-base);
  color: var(--c-text-muted);
  line-height: 1.9;
}
.wp-preface p:last-child { margin-bottom: 0; }

/* ─── Quote Block（客戶引言）─── */
.wp-quote {
  position: relative;
  padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-10);
  margin: var(--sp-6) 0;
  border-radius: var(--r-md);
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
}
.wp-quote-icon {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  font-size: 1.8rem;
  color: var(--c-primary);
  opacity: .4;
}
.wp-quote-text {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--c-text-primary);
  font-style: italic;
  margin-bottom: var(--sp-2);
  line-height: 1.7;
}
.wp-quote-source {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  margin-bottom: 0;
}

/* ─── Cost Compare（成本對比雙欄）─── */
.wp-cost-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: var(--sp-4) 0;
}
@media (max-width: 680px) {
  .wp-cost-compare { grid-template-columns: 1fr; }
}
.wp-cost-item {
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  overflow: hidden;
}
.wp-cost-region {
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,107,43,.08);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.wp-cost-rows { padding: var(--sp-2) 0; }
.wp-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.wp-cost-row:last-child { border-bottom: none; }
.wp-cost-label {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}
.wp-cost-price {
  font-size: var(--text-sm);
  font-weight: 700;
}
.wp-cost-price.danger  { color: #EF4444; }
.wp-cost-price.warning { color: #F59E0B; }
.wp-cost-price.success { color: #10B981; }

/* ─── Timeline（三階段時間軸）─── */
.wp-timeline {
  position: relative;
  padding-left: var(--sp-8);
}
.wp-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-primary), rgba(255,107,43,.15));
}
.wp-timeline-item {
  position: relative;
  margin-bottom: var(--sp-10);
}
.wp-timeline-item:last-child { margin-bottom: 0; }
.wp-timeline-dot {
  position: absolute;
  left: calc(-1 * var(--sp-8) + 8px);
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 12px rgba(255,107,43,.5);
  border: 2px solid var(--c-bg-base);
}
.wp-timeline-content {
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  padding: var(--sp-5);
  transition: border-color .2s;
}
.wp-timeline-content:hover { border-color: var(--c-primary); }

/* ─── Phase Badge（階段標籤）─── */
.wp-phase-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.wp-phase-badge.phase-1 {
  background: rgba(255,107,43,.15);
  color: var(--c-primary);
  border: 1px solid rgba(255,107,43,.3);
}
.wp-phase-badge.phase-2 {
  background: rgba(59,130,246,.15);
  color: #3B82F6;
  border: 1px solid rgba(59,130,246,.3);
}
.wp-phase-badge.phase-3 {
  background: rgba(16,185,129,.15);
  color: #10B981;
  border: 1px solid rgba(16,185,129,.3);
}
.wp-timeline-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--c-text-primary);
  margin-bottom: var(--sp-3);
}
.wp-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
}
.wp-timeline-list li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  line-height: 1.7;
}
.wp-timeline-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--c-primary);
  font-weight: 700;
  font-size: 1rem;
}
.wp-timeline-list li strong { color: var(--c-text-primary); }
.wp-timeline-goal {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: rgba(255,107,43,.06);
  border-left: 3px solid var(--c-primary);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  font-weight: 600;
}

/* ─── Case Cards（成功案例卡）─── */
.wp-case-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
@media (max-width: 860px) {
  .wp-case-cards { grid-template-columns: 1fr; }
}
.wp-case-card {
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color .2s, transform .2s;
}
.wp-case-card:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
}
.wp-case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
}
.wp-case-logo {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--c-text-primary);
}
.wp-case-amount {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--c-primary);
  white-space: nowrap;
}
.wp-case-date {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}
.wp-case-body {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  line-height: 1.7;
  flex: 1;
}
.wp-case-body strong { color: var(--c-text-primary); }
.wp-case-insight {
  font-size: var(--text-xs);
  color: var(--c-secondary);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,184,0,.06);
  border-radius: var(--r-sm);
  line-height: 1.6;
}
.wp-case-insight i { margin-right: 4px; }