/* Bronze Castle Software — holding page.
   Palette from the logo: navy #1b3b63, bronze #b0783c, cream #fcf5eb. */

:root {
  --navy: #1b3b63;
  --bronze: #b0783c;
  --cream: #fcf5eb;

  --bg: var(--cream);
  --surface: #ffffff;
  --ink: #33414e;
  --muted: #6a7885;
  --line: #e8dbcc;
  --heading: var(--navy);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1d2c;
    --surface: #16293c;
    --ink: #dbe5ee;
    --muted: #93a6b7;
    --line: #24384c;
    --heading: #f3ece3;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
}

.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 22px; }

main { flex: 1; padding: clamp(40px, 9vw, 88px) 0 56px; }

/**
 * The logo artwork has its own cream background, so on a dark page it lands as
 * a hard-edged block. Giving it padding and a radius in the same cream turns
 * that into a deliberate plate. In light mode the plate matches the page and
 * disappears, so one image serves both themes.
 */
.logo {
  display: block; box-sizing: border-box;
  width: 100%; max-width: 340px; height: auto;
  margin: 0 0 clamp(28px, 6vw, 44px);
  background: var(--cream);
  padding: 14px 20px;
  border-radius: 16px;
}

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 99px;
  padding: 7px 15px; background: var(--surface);
  color: var(--muted); font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.badge .dot {
  width: 8px; height: 8px; border-radius: 99px; background: var(--bronze);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .badge .dot { animation: none; } }

h1 {
  color: var(--heading);
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: 1.12; letter-spacing: -.025em;
  margin: 22px 0 14px;
}

p { margin: 0 0 16px; }
p.lede { font-size: 1.08rem; color: var(--muted); }

.rule { height: 4px; width: 64px; background: var(--bronze); border-radius: 99px; margin: 40px 0 26px; }

h2 { color: var(--heading); font-size: clamp(1.3rem, 4vw, 1.75rem); letter-spacing: -.015em; margin: 0 0 6px; }
.eyebrow { color: var(--bronze); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

ul { margin: 0 0 16px; padding-left: 20px; color: var(--muted); }
li { margin-bottom: 7px; }

.card {
  border: 1px solid var(--line); border-left: 4px solid var(--bronze);
  border-radius: 14px; padding: 20px 22px; background: var(--surface);
}

a { color: var(--navy); font-weight: 600; }
@media (prefers-color-scheme: dark) { a { color: #7fb3e0; } }

footer { border-top: 1px solid var(--line); padding: 22px 0 30px; }
footer p { color: var(--muted); font-size: .85rem; margin: 0 0 5px; }