:root {
  --bg:#0B0F19; --panel:#111827; --txt:#ffffff; --muted:#94a3b8;
  --red:#c1121f; --blue:#60a5fa;
  --redLight:#fca5a5; --blueLight:#93c5fd;
  --redChip:#fee2e2; --blueChip:#dbeafe; --chipText:#0b0f19;
  --greenLight:#a7f3d0;      /* light green for materials */
  --tableBorder:#1f2937; --tableHead:#0e1624;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
.container{width:min(1200px,92%);margin:0 auto}
header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,#0b0f19 0%,#0b0f1966 100%);border-bottom:1px solid #1f2937;backdrop-filter:blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.4px}
.brand .logo{width:34px;height:34px;background:radial-gradient(40% 40% at 50% 50%,var(--red),#8a0e17);border-radius:8px;box-shadow:0 0 24px #c1121f55}
.brand span{font-size:1.05rem}
.nav-ctas a{margin-left:10px}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;font-weight:600;border:1px solid transparent}
.btn-red{background:var(--red);color:#fff}
.btn-blue{background:var(--blue);color:#0b0f19}
.btn-outline{border-color:#29415e;color:#b3e1ff}
.btn:hover{transform:translateY(-1px);transition:transform .15s ease}
.hero{position:relative;padding:56px 0 28px;background:
  radial-gradient(50% 120% at 10% -10%, rgba(96,165,250,.15), transparent 60%),
  radial-gradient(50% 120% at 120% 10%, rgba(193,18,31,.25), transparent 60%)}
.hero h1{font-size:clamp(1.8rem,2.4vw + 1.2rem,3rem);line-height:1.15;margin:0 0 10px}
.hero p{color:var(--muted);max-width:900px;margin:0 0 20px}
.hero .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:26px 0 40px}
@media (max-width:1200px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid #1f2937;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card-media{background:#0e1525;display:flex;align-items:center;justify-content:center;min-height:210px;border-bottom:1px solid #1f2937}
.card-media img{display:block;width:100%;height:220px;object-fit:contain;padding:10px;filter:drop-shadow(0 4px 20px rgba(0,0,0,.35))}
.card-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.card-title{margin:0;font-size:1.05rem}
.card-title span{color:#e5e7eb;font-weight:600}
.card-bullets{margin:0;padding-left:18px;color:var(--muted);font-size:.95rem;display:grid;gap:6px}
.card-bullets li{line-height:1.25rem}

/* UNIQUE bullets (light colors, NOT bold) */
.uniq{font-weight:400;padding:2px 8px;border-radius:999px;text-transform:uppercase;font-size:.72rem;letter-spacing:.4px;margin-right:6px;border:1px solid rgba(0,0,0,.06)}
.uniq-red{background:var(--redChip);color:var(--chipText)}
.uniq-blue{background:var(--blueChip);color:var(--chipText)}
.card-bullets li.unique-red{color:var(--redLight);font-weight:400}
.card-bullets li.unique-blue{color:var(--blueLight);font-weight:400}
.card-bullets li.unique-red::marker{color:var(--redLight)}
.card-bullets li.unique-blue::marker{color:var(--blueLight)}

/* MATERIALS bullet (light green) */
.card-bullets li.materials{color:var(--greenLight);font-weight:400}
.card-bullets li.materials::marker{color:var(--greenLight)}
.materials-label{color:var(--greenLight)}

/* Comparison table */
.section{padding:14px 0 60px}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.titlebar .cta-right{display:flex;gap:10px;flex-wrap:wrap}
.table-wrap{overflow:auto;border:1px solid var(--tableBorder);border-radius:12px;background:#0c1321}
table.compare{border-collapse:collapse;width:100%;min-width:980px}
.compare thead th{position:sticky;top:0;background:var(--tableHead);color:#cbd5e1;font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--tableBorder)}
.compare tbody td{padding:10px 12px;border-bottom:1px solid var(--tableBorder);color:#d1d5db;vertical-align:top}
.compare tbody tr:hover{background:rgba(96,165,250,.06)}
.compare td.small{white-space:nowrap}
.compare a{color:var(--blue)}
/* Materials column in table colored light green */
.compare td.col-materials{color:var(--greenLight)}
@media (max-width:640px){.titlebar{flex-direction:column;align-items:flex-start}}
.sticky-cta{position:fixed;bottom:16px;right:16px;display:flex;gap:10px;z-index:60;flex-wrap:wrap}