/* ========================================================
   InfoSecPanda — PandaGRC Page Styles
   ======================================================== */

/* Dev badge */
.dev-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  color:var(--violet); background:var(--violet-dim);
  border:1px solid var(--violet-border); padding:8px 16px;
  border-radius:8px; margin-bottom:20px;
}
.dev-badge svg { width:14px; height:14px; stroke:var(--violet); fill:none; stroke-width:2; stroke-linecap:round; }

/* Hero feature dots */
.hero-dots {
  display:flex; gap:24px; justify-content:center; align-items:center;
  margin-bottom:28px; font-size:.82rem; color:var(--text-secondary); flex-wrap:wrap;
}
.hero-dot { display:flex; align-items:center; gap:8px; }
.hero-dot-mark { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hero-cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* --- Why Grid (4-col) --- */
.why-section { padding:0 0 80px; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.why-card { padding:28px 24px; }
.why-card h3 { font-weight:600; font-size:1rem; margin-bottom:12px; }
.why-card p { color:var(--text-secondary); font-size:.88rem; line-height:1.65; margin-bottom:10px; }
.val-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.val-list li {
  font-size:.88rem; color:var(--text-secondary); padding-left:20px;
  position:relative; line-height:1.55;
}
.val-list 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);
}

/* --- V1 Capabilities --- */
.v1-section { padding:80px 0; }
.v1-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.v1-card { padding:28px 24px; }
.v1-accent { display:none; }
.v1-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.v1-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.v1-icon svg { width:18px; height:18px; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.v1-card h4 { font-size:.98rem; font-weight:600; }
.v1-sub { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em; }
.v1-card > p { font-size:.88rem; color:var(--text-secondary); line-height:1.65; margin-bottom:12px; }
.v1-pills { display:flex; flex-wrap:wrap; gap:6px; }
.v1-pill {
  font-family:var(--font-mono); font-size:.75rem; padding:3px 9px;
  background:rgba(10,16,24,.5); border:1px solid var(--border);
  border-radius:6px; color:var(--text-dim);
}
.v1-fullrow { margin-top:12px; }

/* --- Showcase Tabs (PandaGRC preview) --- */
.showcase-section { padding:80px 0; }
.pg-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.pg-tab {
  padding:10px 18px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  cursor:pointer; transition:all .3s; border:1px solid var(--border);
  color:var(--text-dim); background:transparent;
  min-height:44px; display:inline-flex; align-items:center;
}
.pg-tab:hover { color:var(--text-secondary); border-color:var(--border-light); }
.pg-tab.active { background:var(--teal-dim); color:var(--teal); border-color:rgba(45,212,191,.25); }
.pg-panel { display:none; border-radius:var(--radius-md); overflow:hidden; }
.pg-panel.active { display:block; animation:pgFade .4s ease; }
@keyframes pgFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.pg-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border);
}
.pg-panel-header span:first-child { font-size:.92rem; font-weight:600; }
.pg-badge { font-family:var(--font-mono); font-size:.75rem; padding:4px 10px; border-radius:6px; }
.pg-panel-body { padding:18px 20px; }
.pg-panel-footer {
  padding:14px 20px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-mono); font-size:.75rem;
}
.pg-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.pg-kpi { background:rgba(10,16,24,.5); border-radius:8px; padding:12px; border:1px solid var(--border); text-align:center; }
.pg-kpi-val { font-size:1.1rem; font-weight:800; display:block; text-shadow:0 0 10px currentColor; }
.pg-kpi-lbl { font-family:var(--font-mono); font-size:.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; display:block; margin-top:2px; }
.pg-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:rgba(10,16,24,.5);
  border:1px solid var(--border); border-radius:8px; margin-bottom:5px;
}
.pg-sev { font-family:var(--font-mono); font-size:.75rem; padding:3px 10px; border-radius:4px; font-weight:600; flex-shrink:0; }
.pg-row-text { font-size:.82rem; color:var(--text-primary); flex:1; }
.pg-row-id { font-family:var(--font-mono); font-size:.75rem; color:var(--text-dim); }
.pg-ctrl-id { font-family:var(--font-mono); font-size:.75rem; font-weight:600; width:48px; flex-shrink:0; }
.pg-fw-badge { font-family:var(--font-mono); font-size:.72rem; padding:3px 8px; border-radius:4px; flex-shrink:0; }
.pg-te-card {
  background:rgba(10,16,24,.5); border:1px solid var(--border);
  border-radius:8px; padding:14px 16px; margin-bottom:10px;
}
.pg-te-card h5 { font-size:.85rem; font-weight:600; margin-bottom:8px; }
.pg-te-item {
  font-size:.82rem; color:var(--text-secondary); display:flex; gap:8px;
  margin-bottom:5px; padding-left:16px; position:relative;
}
.pg-te-item::before {
  content:''; position:absolute; left:0; top:7px;
  width:5px; height:5px; border-right:1.5px solid var(--violet);
  border-bottom:1.5px solid var(--violet); transform:rotate(-45deg);
}
.pg-step { display:flex; align-items:center; gap:10px; padding:8px 0; }
.pg-step-n {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.75rem; font-weight:600; flex-shrink:0;
}
.pg-step-n.done { background:rgba(34,197,94,.1); color:#22c55e; border:1px solid rgba(34,197,94,.2); }
.pg-step-n.active { background:rgba(239,68,68,.12); color:#ef4444; border:1px solid rgba(239,68,68,.25); }
.pg-step-n.pending { background:rgba(255,255,255,.03); color:var(--text-dim); border:1px solid var(--border); }
.pg-step-l { font-size:.82rem; color:var(--text-secondary); }
.pg-step-status { font-family:var(--font-mono); font-size:.72rem; margin-left:auto; }

/* Panda verdict box */
.panda-verdict {
  background:var(--teal-dim); border:1px solid rgba(45,212,191,.15);
  border-radius:8px; padding:14px 18px;
}
.panda-verdict-label {
  font-family:var(--font-mono); font-size:.72rem; color:var(--teal);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; font-weight:600;
}
.panda-verdict p { font-size:.82rem; color:var(--text-primary); line-height:1.55; margin:0; }

/* --- Verify section --- */
.verify-section { padding:80px 0; }
.verify-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.verify-card { padding:28px 24px; position:relative; overflow:hidden; }
.verify-accent { display:none; }
.verify-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.verify-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.verify-icon svg { width:18px; height:18px; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.verify-card h4 { font-size:.95rem; font-weight:600; }
.verify-card p { font-size:.88rem; color:var(--text-secondary); line-height:1.65; margin-bottom:8px; }
.verify-card p:last-child { margin-bottom:0; }
.verify-card ul { font-size:.88rem; color:var(--text-secondary); line-height:1.7; margin:0; padding-left:18px; list-style:disc; }
.verify-card ul strong { color:var(--text-primary); font-weight:500; }
.verify-cta {
  padding:28px 32px; display:grid; grid-template-columns:1fr auto;
  gap:24px; align-items:center; margin-bottom:16px;
}
.verify-cta h3 { font-size:1.1rem; font-weight:600; margin-bottom:6px; }
.verify-cta p { font-size:.88rem; color:var(--text-secondary); line-height:1.6; margin:0; }
.verify-foot { text-align:center; font-size:.78rem; color:var(--text-dim); font-family:var(--font-mono); }

/* --- Roadmap Timeline --- */
.roadmap-section { padding:80px 0; }
.rm-timeline {
  position:relative; max-width:720px; margin:0 auto;
  padding-left:32px;
}
.rm-line {
  position:absolute; top:0; bottom:0; left:11px;
  width:2px; background:linear-gradient(to bottom, var(--teal), rgba(45,212,191,.15) 30%, var(--border) 30%);
  border-radius:1px;
}
.rm-node {
  position:relative; padding-bottom:20px; padding-left:20px;
}
.rm-node:last-child { padding-bottom:0; }
.rm-dot {
  position:absolute; left:-26px; top:24px;
  width:12px; height:12px; border-radius:50%;
  background:var(--bg-card); border:2px solid var(--border);
  z-index:2;
}
.rm-dot--active {
  background:var(--teal); border-color:var(--teal);
  box-shadow:0 0 12px rgba(45,212,191,.3);
}
.rm-content { padding:20px 24px; }
.rm-phase {
  font-family:var(--font-mono); font-size:.75rem; font-weight:600;
  color:var(--teal); letter-spacing:.04em;
  display:inline-block; margin-bottom:6px;
}
.rm-content h4 { font-size:1rem; font-weight:600; margin-bottom:4px; }
.rm-content p { font-size:.88rem; color:var(--text-secondary); line-height:1.6; margin:0; }

@media (max-width:768px) {
  .rm-timeline { padding-left:24px; }
  .rm-node { padding-left:16px; }
  .rm-dot { left:-20px; width:10px; height:10px; }
  .rm-content { padding:16px 20px; }
}

/* --- Waitlist --- */
.waitlist-section { padding:80px 0; }
.wl-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:840px; margin:0 auto 28px; }
.wl-benefit { padding:20px; }
.wl-benefit-h { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.wl-benefit-h svg { width:16px; height:16px; stroke:var(--teal); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.wl-benefit-h span { font-size:.88rem; font-weight:600; }
.wl-benefit p { font-size:.82rem; color:var(--text-secondary); line-height:1.55; margin:0; }
.waitlist-box { max-width:720px; margin:0 auto; }

/* --- FAQ --- */
.faq-section { padding:80px 0; }
.faq-list { display:flex; flex-direction:column; gap:10px; max-width:720px; margin:0 auto; }
.faq-item { padding:24px 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; }

/* --- CTA --- */
.cta-section { padding:0 0 80px; }
.cta-box {
  padding:40px; text-align:center; max-width:640px; margin:0 auto;
}
.cta-box h3 { font-size:1.15rem; font-weight:600; margin-bottom:8px; }
.cta-box p { color:var(--text-secondary); font-size:.9rem; margin-bottom:20px; }

/* --- RESPONSIVE --- */
@media (max-width:1024px) {
  .why-grid { grid-template-columns:1fr 1fr; }
  .rm-timeline { padding-left:24px; }
}
@media (max-width:900px) {
  .v1-grid { grid-template-columns:1fr; }
  .verify-grid { grid-template-columns:1fr; }
  .verify-cta { grid-template-columns:1fr; text-align:center; }
  .wl-benefits { grid-template-columns:1fr; }

}
@media (max-width:768px) {
  .page-hero { padding:80px 0 40px; }
  .why-grid { grid-template-columns:1fr; }
  .hero-dots { flex-direction:column; gap:10px; }
  .hero-cta-row { flex-direction:column; }
  .hero-cta-row .btn { width:100%; justify-content:center; }
  .pg-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pg-tabs::-webkit-scrollbar { display:none; }
  .pg-tab { flex-shrink:0; }
  .pg-kpi-grid { grid-template-columns:repeat(2,1fr); }

  .v1-card { padding:24px 20px; }
  .verify-card { padding:24px 20px; }
}