:root {

  color-scheme: light;
  --bg: #0b1c2d;          /* deep navy */
  --panel: #112a44;       /* lighter navy */
  --text: #f4e6b3;        /* soft gold */
  --muted: rgba(244, 230, 179, 0.75);
  --border: #c9a227;      /* gold accent */

/*
  color-scheme: light dark;
  --bg: #0b0d10;
  --panel: #141922;
  --text: #e9eef5;
  --muted: rgba(233, 238, 245, 0.75);
  --border: #243041;
*/
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: #9fd3ff; text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 960px; margin: 0 auto; padding: 28px 18px; }

/*
.hero {
  border-bottom: 1px solid var(--border);
  background: radial-gradient(1000px 400px at 20% 0%, rgba(159,211,255,0.14), transparent 60%);
}
*/
.hero {
  border-bottom: 1px solid var(--border);

  /* animated glow strength */
  --glow-alpha: 0.18;

  background: radial-gradient(
    900px 360px at 20% 0%,
    rgba(201, 162, 39, 0.4),
    transparent 70%
  );

  /* Make the gradient feel like a moving light source */
  background-size: 140% 140%;
  animation: heroGlow 5s ease-in-out infinite;
}

@keyframes heroGlow {
  0%   { background-position: 10% 0%; --glow-alpha: 0.16;}
  50%  { background-position: 35% 8%; --glow-alpha: 0.46;}
  100% { background-position: 10% 0%; --glow-alpha: 0.16;}
}



.brand { font-weight: 650; letter-spacing: 0.2px; opacity: 0.9; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 10px 0 8px; }
.lead { color: var(--muted); max-width: 60ch; margin: 0 0 18px; }

.cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.button {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: #1f6feb;
  color: white;
  border: 1px solid rgba(255,255,255,0.12);
}
.button.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin: 14px 0;
}

.grid {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.grid li { padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.02); }
.grid h3 { margin: 0 0 6px; }
.grid p { margin: 0; color: var(--muted); }

.footer { padding: 20px 0 0; color: var(--muted); }
.small { font-size: 0.95rem; opacity: 0.9; }