/* ============================================
   CANCER AI PAGE — Dedicated Styles
   MSR Health AI × BGI Genomics
   ============================================ */

/* ── Cancer Hero Particles ── */
.cancer-particles {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.cancer-particle {
  position: absolute; border-radius: 50%; opacity: 0.15;
  animation: float-particle linear infinite;
}
@keyframes float-particle {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* ── Cancer Bar Chart ── */
.cancer-bar-chart { display: flex; flex-direction: column; gap: 8px; }
.cbar-item { display: flex; align-items: center; gap: 10px; }
.cbar-label { width: 90px; font-size: 0.78rem; font-weight: 600; text-align: right; color: var(--text-secondary); flex-shrink: 0; }
.cbar-track { flex: 1; height: 28px; background: var(--bg-section-alt); border-radius: 6px; overflow: hidden; position: relative; }
.cbar-fill {
  height: 100%; border-radius: 6px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px;
  font-size: 0.72rem; font-weight: 700; color: white; width: 0;
  transition: width 1.5s var(--ease-out);
}
.cbar-fill.teal { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.cbar-fill.gold { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.cbar-fill.visible { width: var(--target-width); }

/* ── Detection Method Cards ── */
.detection-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.detection-card { padding: 28px !important; }
.detect-icon { font-size: 2rem; margin-bottom: 12px; }
.detection-card h4 { font-size: 1.1rem; margin-bottom: 14px; }
.detect-compare { display: flex; flex-direction: column; gap: 12px; }
.detect-old, .detect-new {
  padding: 14px; border-radius: 10px; font-size: 0.82rem; line-height: 1.6;
}
.detect-old { background: #FEF2F2; border: 1px solid #FECACA; }
.detect-new { background: var(--primary-surface); border: 1px solid rgba(15,118,110,0.15); }
.detect-old strong { color: #DC2626; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.detect-new strong { color: var(--primary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.detect-old p, .detect-new p { color: var(--text-secondary); margin-bottom: 6px; }
.detect-limit { color: #DC2626; font-size: 0.75rem; font-weight: 600; }
.detect-adv { color: var(--primary); font-size: 0.75rem; font-weight: 600; }

/* ── AI Tech Grid ── */
.ai-tech-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.ai-tech-card { padding: 28px !important; text-align: center; }
.ai-tech-icon { font-size: 2.4rem; margin-bottom: 14px; }
.ai-tech-card h4 { font-size: 1rem; margin-bottom: 10px; }
.ai-tech-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; }
.ai-perf-bar {
  height: 8px; background: var(--bg-section-alt); border-radius: 4px; overflow: hidden;
  position: relative; margin-top: 8px;
}
.ai-perf-fill {
  height: 100%; border-radius: 4px; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  transition: width 1.8s var(--ease-out);
}
.ai-perf-fill.gold { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.ai-perf-fill.visible { width: var(--target-width); }
.ai-perf-bar span {
  position: absolute; right: 0; top: -20px; font-size: 0.72rem; font-weight: 700; color: var(--primary);
}

/* ── Nano Section ── */
.nano-section {
  background: linear-gradient(180deg, #F5F5F4 0%, #F0FDFA 50%, #FFFBEB 100%);
}
.nano-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.nano-card {
  background: var(--bg-white); padding: 28px; border-radius: var(--radius-xl);
  transition: all 0.35s var(--ease); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.nano-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.nano-icon { font-size: 2rem; margin-bottom: 12px; }
.nano-card h4 { font-size: 1rem; margin-bottom: 10px; font-weight: 700; }
.nano-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; }
.nano-specs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.nano-specs span {
  padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 600;
  background: var(--primary-surface); color: var(--primary); border: 1px solid rgba(15,118,110,0.1);
}

/* ── BGI Product Grid ── */
.bgi-product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.bgi-badge {
  display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.68rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--primary-pale); color: var(--primary); margin-bottom: 12px;
}
.bgi-badge.gold { background: var(--gold-pale); color: var(--gold); }
.bgi-product-grid h4 { font-size: 1rem; margin-bottom: 8px; }
.bgi-product-grid p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.bgi-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bgi-stats div { text-align: center; padding: 8px; background: var(--primary-surface); border-radius: 8px; }
.bgi-stats strong { display: block; font-size: 1rem; color: var(--primary); }
.bgi-stats span { font-size: 0.68rem; color: var(--text-muted); }

/* ── Layer Architecture Flow ── */
.layer-flow {
  display: flex; align-items: stretch; gap: 16px; justify-content: center;
}
.layer-card {
  flex: 1; max-width: 340px; padding: 28px; border-radius: var(--radius-xl);
  background: var(--bg-white); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: all 0.35s var(--ease); position: relative;
}
.layer-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-glow); }
.layer-number {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white;
  margin-bottom: 16px; box-shadow: 0 4px 12px rgba(15,118,110,0.2);
}
.layer-number.gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); box-shadow: 0 4px 12px rgba(184,134,11,0.2); }
.layer-card h4 { font-size: 1.1rem; margin-bottom: 8px; }
.layer-card > p { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.layer-list { list-style: none; padding: 0; margin-bottom: 14px; }
.layer-list li { font-size: 0.82rem; color: var(--text-secondary); padding: 5px 0; border-bottom: 1px solid var(--border); }
.layer-list li:last-child { border-bottom: none; }
.layer-time { font-size: 0.78rem; font-weight: 700; color: var(--primary); padding: 8px 14px; background: var(--primary-surface); border-radius: 8px; text-align: center; }
.layer-arrow {
  display: flex; align-items: center; font-size: 2rem; color: var(--primary); font-weight: 700;
  flex-shrink: 0;
}

/* ── Donut Charts ── */
.perf-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
}
.perf-card {
  text-align: center; padding: 24px 16px; background: var(--bg-white);
  border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}
.perf-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.perf-card h4 { font-size: 0.85rem; margin-top: 12px; margin-bottom: 4px; }
.perf-card p { font-size: 0.72rem; color: var(--text-muted); }
.donut-chart {
  position: relative; width: 100px; height: 100px; margin: 0 auto;
}
.donut-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-bg { fill: none; stroke: var(--bg-section-alt); stroke-width: 8; }
.donut-fill {
  fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 2s var(--ease-out);
}
.donut-chart[data-color="gold"] .donut-fill { stroke: var(--gold); }
.donut-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--primary);
}
.donut-chart[data-color="gold"] .donut-label { color: var(--gold); }

/* ── KPI Grid ── */
.kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.kpi-card {
  text-align: center; padding: 32px 20px; border-radius: var(--radius-xl);
  background: var(--bg-white); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}
.kpi-card:hover { border-color: var(--border-accent); transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-glow); }
.kpi-value {
  font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 800; display: block; margin-bottom: 6px;
}
.kpi-value.teal { color: var(--primary); }
.kpi-value.gold { color: var(--gold); }
.kpi-label { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.kpi-sub { font-size: 0.78rem; color: var(--text-muted); }

/* ── Partner Grid ── */
.partner-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}

/* ── Feasibility Callout ── */
.feasibility-callout {
  display: flex; gap: 14px; padding: 18px 20px; border-radius: 12px;
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border: 1px solid #F59E0B;
  margin-top: 16px;
}
.fc-icon { font-size: 1.5rem; flex-shrink: 0; }
.fc-content strong { display: block; font-size: 0.85rem; color: #92400E; margin-bottom: 4px; }
.fc-content p { font-size: 0.82rem; color: #78350F; line-height: 1.65; margin: 0; }

/* ── Nano Status Badges ── */
.nano-status {
  display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.68rem;
  font-weight: 700; margin-bottom: 10px; letter-spacing: 0.03em;
}
.nano-status.ready { background: #DCFCE7; color: #166534; }
.nano-status.research { background: #FEF3C7; color: #92400E; }
.nano-status.partial { background: #FEF3C7; color: #B45309; }
.nano-company {
  font-size: 0.76rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5;
}
.nano-feasibility {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.nf-tag {
  padding: 3px 8px; border-radius: 5px; font-size: 0.66rem; font-weight: 600;
  background: var(--bg-section-alt); color: var(--text-secondary);
}
.nf-tag.lab { background: #DBEAFE; color: #1E40AF; }
.nf-tag.research-tag { background: #FEF3C7; color: #92400E; }
.nf-tag.partial-tag { background: #FED7AA; color: #9A3412; }

/* ── Readiness Timeline ── */
.readiness-timeline {
  padding: 32px; background: var(--bg-white); border-radius: var(--radius-xl);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.timeline-track {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.timeline-phase {
  padding: 20px; border-radius: 14px; border: 2px solid transparent;
}
.ready-phase { background: #F0FDF4; border-color: #22C55E; }
.future-phase { background: #FFFBEB; border-color: #F59E0B; }
.aspirational-phase { background: #F0F9FF; border-color: #3B82F6; }
.tp-header {
  font-size: 0.85rem; font-weight: 800; margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 2px solid rgba(0,0,0,0.06);
}
.tp-body { display: flex; flex-direction: column; gap: 6px; }
.tp-item {
  font-size: 0.78rem; color: var(--text-secondary); padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04); line-height: 1.5;
}
.tp-item:last-child { border-bottom: none; }

/* ── Limitation Grid ── */
.limitation-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.limit-card { padding: 24px !important; }
.limit-icon { font-size: 2rem; margin-bottom: 10px; }
.limit-card h4 { font-size: 1rem; margin-bottom: 8px; }
.limit-card p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.limit-tag {
  display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.72rem;
  font-weight: 700; background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA;
}

/* ── Hub Flow Steps ── */
.hub-flow-steps { display: flex; flex-direction: column; gap: 12px; }
.hf-step {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px;
  background: var(--bg-section-alt); border-radius: 12px;
}
.hf-num {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: 800;
  background: var(--primary); color: white; flex-shrink: 0;
}
.hf-num.gold { background: var(--gold); }
.hf-step strong { font-size: 0.85rem; display: block; margin-bottom: 2px; }
.hf-step p { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ── Hub Grid (Karnataka Pilot) ── */
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
}
.hub-card {
  padding: 20px !important; font-size: 0.82rem;
}
.hub-loc { font-weight: 700; margin-bottom: 6px; color: var(--primary); }
.hub-info { margin-bottom: 6px; color: var(--text-primary); line-height: 1.5; }
.hub-kiosks { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.hub-equip { font-size: 0.72rem; color: var(--text-muted); padding: 6px 10px; background: var(--primary-surface); border-radius: 6px; margin-top: 6px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .detection-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-tech-grid { grid-template-columns: repeat(2, 1fr); }
  .bgi-product-grid { grid-template-columns: repeat(2, 1fr); }
  .layer-flow { flex-direction: column; align-items: center; }
  .layer-arrow { transform: rotate(90deg); }
  .layer-card { max-width: 100%; }
  .perf-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .limitation-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-track { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .detection-grid { grid-template-columns: 1fr; }
  .ai-tech-grid { grid-template-columns: 1fr; }
  .bgi-product-grid { grid-template-columns: 1fr; }
  .perf-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr; }
  .nano-grid { grid-template-columns: 1fr; }
  .limitation-grid { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: 1fr; }
}


/* RESPONSIVE FIXES */
@media (max-width: 1024px) {
    .detection-grid, .ai-tech-grid, .kpi-grid, .bgi-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .perf-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .layer-flow { flex-direction: column; align-items: center; }
    .layer-card { max-width: 100% !important; }
    .limitation-grid, .partner-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .timeline-track { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .detection-grid, .ai-tech-grid, .kpi-grid, .bgi-product-grid { grid-template-columns: 1fr !important; }
    .perf-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .limitation-grid, .partner-grid, .nano-grid, .hub-grid { grid-template-columns: 1fr !important; }
    .timeline-track { grid-template-columns: 1fr !important; }
}