/* Varia Robotics — custom theme on top of Bootstrap 5 */

:root {
  --vr-ink:       #0B1320;   /* near-black navy */
  --vr-deep:      #122036;   /* deep navy */
  --vr-steel:     #1E2F4D;   /* mid panel */
  --vr-accent:    #00FF66;   /* fluorescent green */
  --vr-accent-2:  #66FFA3;   /* lighter green */
  --vr-warn:      #F2C94C;   /* amber callout */
  --vr-text:      #E6ECF5;   /* light text on dark */
  --vr-silver:    #D0D5DD;   /* silver brand text */
  --vr-muted:     #95A3BA;   /* secondary text */
  --vr-line:      #233553;   /* hairline borders */
}

html, body {
  background: var(--vr-ink);
  color: var(--vr-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vr-accent-2); }
a:hover { color: var(--vr-accent); }

.navbar-vr {
  background: rgba(11, 19, 32, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vr-line);
}
.navbar-vr .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vr-accent);
}
.navbar-vr .navbar-brand .brand-accent { color: var(--vr-silver); }
.navbar-vr .nav-link {
  color: var(--vr-muted);
  font-weight: 500;
}
.navbar-vr .nav-link.active,
.navbar-vr .nav-link:hover { color: var(--vr-text); }

.btn-vr {
  background: var(--vr-accent);
  color: var(--vr-ink);
  border: none;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border-radius: 6px;
}
.btn-vr:hover { background: var(--vr-accent-2); color: var(--vr-ink); }

.btn-vr-outline {
  background: transparent;
  color: var(--vr-text);
  border: 1px solid var(--vr-line);
  font-weight: 500;
  padding: 0.65rem 1.4rem;
  border-radius: 6px;
}
.btn-vr-outline:hover { border-color: var(--vr-accent); color: var(--vr-accent); }

.hero {
  padding: 7rem 0 5rem;
  background: radial-gradient(ellipse at top, var(--vr-deep) 0%, var(--vr-ink) 70%);
  border-bottom: 1px solid var(--vr-line);
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero .lead {
  color: var(--vr-muted);
  font-size: 1.25rem;
  max-width: 720px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--vr-accent);
  font-weight: 600;
}

.section { padding: 5rem 0; border-bottom: 1px solid var(--vr-line); }
.section h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--vr-deep);
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  padding: 1.75rem;
  height: 100%;
}
.stat-card .stat-num {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--vr-accent-2);
  margin-bottom: 0.25rem;
}
.stat-card .stat-label {
  color: var(--vr-muted);
  font-size: 0.95rem;
}

.feature-card {
  background: var(--vr-deep);
  border: 1px solid var(--vr-line);
  border-radius: 10px;
  padding: 1.75rem;
  height: 100%;
  transition: border-color .2s;
}
.feature-card:hover { border-color: var(--vr-accent); }
.feature-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; }
.feature-card p { color: var(--vr-muted); margin: 0; }

.quote-block {
  border-left: 3px solid var(--vr-accent);
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: var(--vr-text);
  font-style: italic;
  font-size: 1.15rem;
}

.fail-row {
  display: flex; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--vr-line);
}
.fail-row:last-child { border-bottom: none; }
.fail-row .x { color: #E26D5C; font-weight: 700; }

.cta-band {
  background: linear-gradient(135deg, var(--vr-deep), var(--vr-steel));
  padding: 4rem 0;
  text-align: center;
}

.footer {
  background: var(--vr-ink);
  border-top: 1px solid var(--vr-line);
  padding: 2.5rem 0;
  color: var(--vr-muted);
  font-size: 0.9rem;
}

.form-control, .form-select {
  background: var(--vr-deep);
  border: 1px solid var(--vr-line);
  color: var(--vr-text);
}
.form-control:focus, .form-select:focus {
  background: var(--vr-deep);
  border-color: var(--vr-accent);
  color: var(--vr-text);
  box-shadow: 0 0 0 0.2rem rgba(0, 194, 168, 0.18);
}
.form-label { color: var(--vr-muted); font-size: 0.9rem; }

.modal-content {
  background: var(--vr-deep);
  border: 1px solid var(--vr-line);
  color: var(--vr-text);
}
.modal-header { border-bottom: 1px solid var(--vr-line); }
.btn-close { filter: invert(1); }

.alert-vr-success {
  background: rgba(0, 194, 168, 0.12);
  border: 1px solid var(--vr-accent);
  color: var(--vr-accent-2);
}
.alert-vr-error {
  background: rgba(226, 109, 92, 0.12);
  border: 1px solid #E26D5C;
  color: #E26D5C;
}

.coming-soon {
  padding: 6rem 0;
  text-align: center;
}
.coming-soon h1 { font-weight: 700; letter-spacing: -0.02em; }
.coming-soon .tag {
  display: inline-block;
  background: var(--vr-deep);
  border: 1px solid var(--vr-line);
  color: var(--vr-muted);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}