/* ========================================================
   InfoSecPanda — Dashboards Page Styles
   ======================================================== */

/* Stat row */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:60px; }
.stat-cell { padding:24px; text-align:center; }
.stat-cell .s-num { font-family:var(--font-mono); font-size:clamp(1.4rem,2.5vw,1.8rem); font-weight:600; color:var(--teal); display:block; line-height:1; text-shadow:0 0 16px rgba(45,212,191,.2); }
.stat-cell .s-lbl { font-size:.78rem; color:var(--text-dim); margin-top:6px; display:block; }

/* Framework cards */
.fw-cards { display:flex; flex-direction:column; gap:20px; }
.fw-card-inner { display:grid; grid-template-columns:1fr 1fr; min-height:300px; }
.fw-card-info { padding:36px 32px; display:flex; flex-direction:column; justify-content:center; }
.fw-live { font-family:var(--font-mono); font-size:.75rem; color:var(--teal); background:var(--teal-dim); border:1px solid rgba(45,212,191,.15); padding:4px 12px; border-radius:6px; display:inline-flex; align-self:flex-start; margin-bottom:14px; text-transform:uppercase; letter-spacing:.06em; }
.fw-card-info h3 { font-size:1.15rem; margin-bottom:6px; }
.fw-sub { font-family:var(--font-mono); font-size:.78rem; color:var(--text-dim); margin-bottom:16px; }
.fw-card-info ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.fw-card-info ul li { color:var(--text-secondary); font-size:.88rem; padding-left:20px; position:relative; line-height:1.55; }
.fw-card-info ul li::before { content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-right:1.5px solid var(--teal); border-bottom:1.5px solid var(--teal); transform:rotate(-45deg); }
.fw-stats { padding:36px 32px; display:flex; flex-direction:column; justify-content:center; background:rgba(5,10,18,.4); position:relative; }
.fw-stats::before { content:''; position:absolute; top:0; right:0; width:3px; height:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); }
.fw-stats::after { content:''; position:absolute; top:0; right:0; width:35%; height:3px; background:var(--teal); box-shadow:0 0 10px var(--teal); }
.fw-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fw-stat-item { text-align:center; }
.fw-stat-item .s-num { font-family:var(--font-mono); font-size:1.8rem; font-weight:600; color:var(--teal); display:block; line-height:1; text-shadow:0 0 16px rgba(45,212,191,.2); }
.fw-stat-item .s-lbl { font-size:.78rem; color:var(--text-dim); margin-top:6px; display:block; }

/* CTA section */
.dash-cta { padding:80px 0; }
.cta-wrapper { display:flex; flex-direction:column; gap:12px; }
.cta-main { padding:32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-main h3 { font-size:1.1rem; font-weight:600; margin-bottom:4px; }
.cta-main p { color:var(--text-secondary); font-size:.88rem; line-height:1.6; max-width:500px; }
.cta-items { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cta-item { padding:24px; }
.cta-item h4 { font-size:.92rem; font-weight:600; margin-bottom:6px; }
.cta-item p { color:var(--text-secondary); font-size:.84rem; line-height:1.55; }

/* Roadmap */
.dash-roadmap { padding:80px 0; }
.rm-steps { display:flex; flex-direction:column; gap:8px; }
.rm-step { display:grid; grid-template-columns:60px 1fr auto; gap:20px; align-items:center; padding:18px 24px; }
.rm-num { font-family:var(--font-mono); font-size:1rem; font-weight:500; color:var(--text-dim); text-align:center; }
.rm-text { font-size:.9rem; color:var(--text-secondary); }
.rm-status { font-family:var(--font-mono); font-size:.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }

/* FAQ */
.dash-faq { padding:80px 0; }
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.faq-item { padding:28px; }
.faq-item h4 { font-weight:600; font-size:.95rem; margin-bottom:8px; }
.faq-item p { color:var(--text-secondary); font-size:.88rem; line-height:1.65; }

@media (max-width:900px) {
  .fw-card-inner { grid-template-columns:1fr; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .cta-items { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .stat-cell { padding:18px; }
  .fw-card-info { padding:28px 24px; }
  .fw-stats { padding:28px 24px; }
  .rm-step { grid-template-columns:40px 1fr; gap:14px; }
  .rm-status { grid-column:1 / -1; }
}