/* ============================================================
   BR1 Software — holding page
   Small layer of brand overrides on top of Bootstrap 5.3
   ============================================================ */

:root {
  --br1-blue: #1f5fb0;
  --br1-navy: #16266b;
  --br1-amber: #f5911e;
  --br1-vermilion: #e8471f;
}

/* ---- theme grounds ------------------------------------------------ */
[data-bs-theme="light"] {
  --bs-body-bg: #eef1f8;
  --bs-body-color: #14224c;
  --br1-grid: rgba(20, 34, 76, 0.05);
  --br1-glow-a: rgba(47, 134, 208, 0.22);
  --br1-glow-b: rgba(245, 145, 30, 0.16);
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0a1330;
  --bs-body-color: #eef2fc;
  --br1-grid: rgba(255, 255, 255, 0.045);
  --br1-glow-a: rgba(58, 120, 220, 0.34);
  --br1-glow-b: rgba(245, 145, 30, 0.22);
}

body {
  background-color: var(--bs-body-bg);
}

/* ambient wash — same idea, tuned per theme via the vars above */
.stage {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(42rem 42rem at 12% -10%, var(--br1-glow-a), transparent 60%),
    radial-gradient(38rem 38rem at 110% 115%, var(--br1-glow-b), transparent 60%);
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--br1-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--br1-grid) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 30% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 80% at 30% 0%, #000 30%, transparent 78%);
}

/* ---- logo swap -------------------------------------------------- */
.brand-logo {
  max-width: 360px;
  width: 78%;
  height: auto;
}
.brand-logo--dark { display: none; }
[data-bs-theme="dark"] .brand-logo--light { display: none; }
[data-bs-theme="dark"] .brand-logo--dark { display: inline-block; }

/* ---- status line --------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--bs-secondary-color);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--br1-amber);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .status-dot { animation: br1-pulse 2.4s ease-out infinite; }
}
@keyframes br1-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 145, 30, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(245, 145, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 145, 30, 0); }
}

/* ---- theme toggle ------------------------------------------------ */
.theme-toggle {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.theme-toggle .label-light { display: none; }
[data-bs-theme="dark"] .theme-toggle .label-light { display: inline; }
[data-bs-theme="dark"] .theme-toggle .label-dark { display: none; }

/* ---- capability badges ---------------------------------------- */
.cap-badge {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  color: var(--bs-body-color);
  background: transparent;
  border: 1px solid var(--bs-border-color);
}

/* ---- brand CTA -------------------------------------------------- */
.btn-brand {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  border: 0;
  background-image: linear-gradient(120deg, var(--br1-amber), var(--br1-vermilion));
  box-shadow: 0 18px 40px -18px rgba(232, 71, 31, 0.6);
  transition: transform 140ms ease, filter 140ms ease;
}
.btn-brand:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-brand:active { transform: translateY(0); }

/* ---- contact form ------------------------------------------------ */
.contact-form {
  max-width: 32rem;
  padding: 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
}
.contact-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.65rem 0.75rem;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
}
.contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--br1-blue);
  outline-offset: 1px;
}

.contact-link {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 2px;
}
.contact-link:hover { color: var(--bs-body-color); border-color: currentColor; }

/* ---- footer -------------------------------------------------- */
.footer-meta {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--bs-secondary-color);
}