:root{
  /* match VDC site */
  --bg:#1a1a1a;        /* page background (charcoal) */
  --panel:#17191d;     /* cards/nav */
  --panel-2:#121417;
  --text:#f5f7fa;
  --muted:#c8cbd2;
  --accent:#de3845;    /* VDC red */
  --accent-2:#fe6a6a;
  --ring:#2a2f36;
  --radius:16px;
}

body{
  margin:0; color:var(--text);
  /* ✅ same dark as site, with subtle red glow retained */
  background:
    radial-gradient(1100px 520px at 90% -10%, rgba(226,59,59,.16), transparent 70%),
    radial-gradient(900px 420px at -10% 22%, rgba(255,255,255,.04), transparent 60%),
    var(--bg);
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
/* body{
  margin:0; color:var(--text); background:
    radial-gradient(1200px 600px at 80% -10%, rgba(226,59,59,.15), transparent 70%),
    radial-gradient(1000px 500px at -10% 20%, rgba(255,255,255,.04), transparent 60%),
    var(--bg);
  font:16px/1.55 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
} */
.nav{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--ring);z-index:10}
.nav__inner{max-width:1200px;margin:0 auto;padding:10px 18px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:28px;height:28px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.brand__name{font-weight:700;letter-spacing:.25px}

.shell{max-width:1200px;margin:0 auto;padding:28px 18px}
.hero{display:grid;place-items:center;margin:28px 0}
.hero__card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  padding:28px;border-radius:calc(var(--radius) + 4px);
  box-shadow:0 6px 30px rgba(0,0,0,.35);max-width:860px;width:100%;
  border:1px solid var(--ring)
}
.pill{display:inline-block;background:#2a0f12;color:#ffd7d7;border:1px solid #4a171a;
  padding:6px 10px;border-radius:999px;font-weight:700;margin-bottom:10px;font-size:.9rem;font-weight: 800;letter-spacing: .3px;}
.hero__title{margin:4px 0 6px;font-size:2.1rem;letter-spacing:.2px}
.hero__desc{margin:0 0 12px;color:var(--muted)}
.eta{display:flex;gap:10px;align-items:baseline;margin:10px 0 4px}
.eta__label{color:var(--muted)}
.eta__value{font-variant-numeric:tabular-nums;color:#ffb3b3;font-weight:700}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{
  display:inline-block;padding:10px 14px;border-radius:10px;
  background:var(--accent);color:#100e10;text-decoration:none;font-weight:700;
  border:1px solid #5c1818;box-shadow:0 2px 0 #5c1818 inset
}
.btn:hover{background:var(--accent-2)}
.btn--secondary{background:#242830;color:var(--text);border:1px solid var(--ring);box-shadow:none}
.btn--secondary:hover{background:#2a2f36}

/* .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:22px}
.card{
  background:var(--panel);border:1px solid var(--ring);border-radius:var(--radius);
  padding:16px;min-height:110px
} */
/* .card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)} */

.footer{margin:20px 0 40px}
.footer__inner{max-width:1200px;margin:0 auto;padding:0 18px;color:var(--muted);display:flex;gap:16px}
.footer__inner a{color:#b5c7ff;text-decoration:none}
.footer__inner a:hover{text-decoration:underline}


/* --- Card grid (unchanged) --- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:22px;
}

/* --- Card panel --- */
.card{
  position:relative;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--ring);
  border-radius:var(--radius);
  padding:16px;
  padding-top:45px;            /* space for tag */
  min-height:110px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.card h3{margin:0 0 6px;text-transform:uppercase;letter-spacing:.3px}
.card p{margin:0;color:var(--muted)}

.card::before{ display:none; }

.card__tag{
  position:absolute;
  left:-12px;
  top:-12px;
  z-index:2;
  display:inline-block;
  padding:10px 14px;
  background:var(--accent);
  color:#fff;
  border-radius:10px;
  border:1px solid #5c1818;
  box-shadow:0 2px 0 #5c1818 inset, 0 8px 18px rgba(0,0,0,.35);
  margin:0;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  line-height:1.1;
}


.card p{ margin:0; color:var(--muted); }

/* Responsive tuning */
@media (max-width:640px){
  .card{ padding-top:48px; }
  .card__tag{ left:-10px; top:-10px; padding:8px 12px; }
}