:root{
  --purple1:#5f3bff;
  --purple2:#6f56ff;
  --soft:#f5f6fb;
}
body{background:#fff;}
.invoice-hero{
  background: linear-gradient(135deg,var(--purple1),var(--purple2));
  color:#fff;
  border-bottom-left-radius:40px;
  padding:28px 0 48px 0;
}
.brand-title{font-weight:800; letter-spacing:.2px; font-size:44px; line-height:1;}
.brand-nit{font-size:12px; opacity:.9;}
.badge-doc{font-size:34px; font-weight:800;}
.invoice-card{margin-top:-40px; background:#fff; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.08);}
.table-head-gradient{
  height:44px; border-radius:10px; color:#fff; font-weight:700;
  background: linear-gradient(90deg,var(--purple1),var(--purple2));
  display:grid; grid-template-columns:70px 1.2fr 1fr 90px 140px 150px; align-items:center; padding:0 16px; gap:10px;
}
.item-row{
  display:grid; grid-template-columns:70px 1.2fr 1fr 90px 140px 150px; gap:10px;
  align-items:center; padding:12px 8px; border-bottom:1px solid #eee;
}
.item-row .product-name{font-weight:700;}
.item-row .desc-text{font-size:12px; color:#555; text-transform:uppercase; letter-spacing:.2px;}
.item-row .qty{text-align:center; font-weight:700;}
.item-row .price{font-weight:700; text-align:right;}
.total-box{font-weight:900; font-size:38px; text-align:right;}
.contact-box{display:grid; grid-template-columns:1fr; gap:6px;}
.contact-box .dot{width:8px; height:8px; background:var(--purple2); border-radius:50%; display:inline-block; margin-right:6px;}
.img-thumb{height:58px; width:92px; object-fit:contain; background:#fafafa; border-radius:12px; border:1px solid #eee;}
@media (min-width: 768px){
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
}