/* =========================
   QUANT UI
========================= */

.quant-container{
  max-width:1100px;
  margin:60px auto;
  padding:0 20px;
}

.quant-title{
  font-family:'Cinzel',serif;
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:40px;
}

.quant-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.quant-panel{
  background:#020617;
  border:1px solid #1e293b;
  padding:28px;
  border-radius:8px;
}

.quant-panel h3{
  margin-bottom:20px;
  font-size:.9rem;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:.7;
}

.quant-input{ margin-bottom:18px; }

.quant-input label{
  display:block;
  font-size:.8rem;
  opacity:.6;
  margin-bottom:6px;
}

.quant-input input{
  width:100%;
  padding:12px;
  background:#0f172a;
  border:1px solid #334155;
  color:#e5e7eb;
}

.quant-btn{
  width:100%;
  padding:14px;
  background:#1e40af;
  border:none;
  font-weight:600;
  cursor:pointer;
  letter-spacing:1px;
}
.quant-btn:hover{ background:#2563eb; }

.quant-metric-main{
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:14px;
  letter-spacing:1px;
}

.quant-metric{
  font-size:.95rem;
  margin-bottom:8px;
  opacity:.85;
}

.quant-divider{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:18px 0;
}

.quant-explainer{
  margin-bottom:30px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:18px 22px;
  position:relative;
  z-index:5;
  margin-bottom:40px;
}

.quant-explainer h4{
  margin-top:16px;
  font-size:.95rem;
  letter-spacing:.5px;
}

.quant-explainer p,
.quant-explainer li{
  font-size:.9rem;
  opacity:.85;
  line-height:1.5;
}

.quant-note{
  margin-top:14px;
  font-size:.85rem;
  opacity:.7;
}