/* ============================================================
   CHART STYLES & ANIMATED SVG
   ============================================================ */

/* Wealth Growth Chart */
.wealth-chart { width: 100%; height: 220px; position: relative; }
.chart-svg { width: 100%; height: 100%; }
.chart-line-path {
  fill: none; stroke: var(--green); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: chartLine 2s ease forwards 0.5s;
}
.chart-area-path { fill: url(#chartGradient); opacity: 0.3; }
.chart-dot { fill: var(--green); animation: scaleIn 0.3s ease forwards; }

/* Donut chart */
.donut-chart { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.donut-svg { transform: rotate(-90deg); }
.donut-segment {
  fill: none; stroke-width: 20;
  stroke-dasharray: 0 283;
  transition: stroke-dasharray 1.2s cubic-bezier(0.4,0,0.2,1);
}
.donut-center { position: absolute; text-align: center; }
.donut-center-val { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.donut-center-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; }

/* Legend */
.chart-legend { display: flex; flex-direction: column; gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.legend-name { color: var(--text-secondary); flex: 1; }
.legend-pct { font-weight: 700; color: var(--text-primary); }

/* ============================================================
   ANIMATED NUMBERS
   ============================================================ */
.count-up { display: inline-block; }

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-section { background: var(--white); padding: 80px 0; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process-steps::before {
  content: ''; position: absolute; top: 32px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--blue-primary), var(--green));
}
.process-step { text-align: center; padding: 0 16px; position: relative; }
.step-num {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: var(--white);
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary));
  box-shadow: 0 8px 24px rgba(11,94,215,0.3); position: relative; z-index: 1;
}
.step-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.step-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ============================================================
   TRUST BADGES
   ============================================================ */
.trust-section { background: var(--blue-primary); padding: 48px 0; }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.trust-badge-item { display: flex; align-items: center; gap: 12px; }
.trust-icon { font-size: 32px; }
.trust-text { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.9); }
.trust-text strong { display: block; font-size: 17px; color: var(--white); }
.trust-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.2); }

/* ============================================================
   NOTIFICATION TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 90px; left: 24px; z-index: 1500;
  background: var(--white); border-radius: var(--radius-md);
  padding: 14px 20px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px;
  transform: translateX(-200%); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  max-width: 300px;
}
.toast.show { transform: translateX(0); }
.toast-icon { font-size: 24px; }
.toast-text { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.toast-sub { font-size: 12px; color: var(--text-secondary); }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: transparent;
}
.scroll-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blue-primary), var(--green));
  transition: width 0.1s linear;
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed; bottom: 28px; left: 24px; z-index: 900;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; transition: var(--transition);
  opacity: 0; pointer-events: none; border: 1px solid var(--gray-mid);
}
.back-to-top.visible { opacity: 1; pointer-events: all; }
.back-to-top:hover { background: var(--blue-primary); color: var(--white); transform: translateY(-3px); }

/* ============================================================
   SIP vs STEP-UP COMPARISON CHART
   ============================================================ */
.comparison-chart { position: relative; height: 200px; margin-top: 20px; }
.comp-bar-group { display: flex; align-items: flex-end; gap: 4px; height: 100%; justify-content: space-around; }
.comp-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.comp-bar {
  width: 100%; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--blue-primary), var(--blue-secondary));
  transition: height 1.2s cubic-bezier(0.4,0,0.2,1);
}
.comp-bar.green { background: linear-gradient(180deg, var(--green), var(--green-dark)); }
.comp-bar-label { font-size: 10px; color: var(--text-secondary); font-weight: 500; }
.comp-bar-val { font-size: 11px; font-weight: 700; color: var(--text-primary); }

/* ============================================================
   FUND DETAIL MODAL
   ============================================================ */
.fund-detail-header { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; margin-bottom: 32px; }
.fund-detail-name { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.fund-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.fund-detail-nav-section { text-align: right; }
.fund-detail-nav-val { font-size: 32px; font-weight: 900; color: var(--text-primary); }
.fund-detail-nav-date { font-size: 12px; color: var(--text-secondary); }
.fund-detail-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--gray-mid); margin-bottom: 24px; }
.fund-detail-tab { padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--transition); }
.fund-detail-tab.active { color: var(--blue-primary); border-bottom-color: var(--blue-primary); }
.fund-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.fund-detail-section-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 16px; }
.fund-stat-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--gray-mid); }
.fund-stat-key { font-size: 14px; color: var(--text-secondary); }
.fund-stat-val { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.nav-history-chart { height: 180px; background: var(--gray-light); border-radius: var(--radius-md); position: relative; overflow: hidden; }
.nav-history-svg { width: 100%; height: 100%; }

/* ============================================================
   SECTOR ALLOCATION
   ============================================================ */
.sector-grid { display: flex; flex-direction: column; gap: 10px; }
.sector-row { }
.sector-row-header { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; }
.sector-name { color: var(--text-secondary); }
.sector-pct { font-weight: 700; color: var(--text-primary); }
.sector-bar-track { height: 8px; background: var(--gray-mid); border-radius: 4px; overflow: hidden; }
.sector-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue-primary), var(--green)); transition: width 1.2s cubic-bezier(0.4,0,0.2,1); width: 0; }
.sector-bar-fill.animated { width: var(--sector-pct); }

@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
  .process-steps::before { display: none; }
  .trust-inner { gap: 24px; }
  .trust-divider { display: none; }
  .fund-detail-header { grid-template-columns: 1fr; }
  .fund-detail-nav-section { text-align: left; }
  .fund-detail-grid { grid-template-columns: 1fr; }
}