:root {
  /* 1. Darken the main background and lighten the card surfaces for contrast */
  --bg: #1d4caa;
  /* Deep navy/black */
  --ink: #ffffff;
  /* White text for readability on dark */
  --muted: #a1acc3;
  --line: rgba(255, 255, 255, 0.15);
  /* Lighter lines for dark mode */

  --blue-900: #eaf1ff;
  --blue-700: #4e82ff;
  --blue-600: #3a7cff;
  --blue-500: #2a6bff;

  --blue-100: #1a243a;
  --blue-050: #0f172a;

  /* 2. Elevated Card Styling: Dark background with a distinct border */
  --card: rgba(30, 41, 59, 0.7);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.2);

  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  /* 3. Darker radial gradients to keep the "stage light" feel without the brightness */
  background:
    radial-gradient(900px 420px at 15% 8%, rgba(42, 107, 255, 0.15), transparent 60%),
    radial-gradient(900px 420px at 85% 18%, rgba(31, 92, 255, 0.12), transparent 55%),
    var(--bg);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1200px, 92vw);
  margin: 0 auto;
}

/* ---------- Top nav ---------- */
/* 4. Update Header for Dark Mode */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #9e75ee;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 220px;
}

.mark {
  width: 18px;
  height: 32px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--blue-700), rgba(31, 92, 255, .15));
  box-shadow: 0 10px 20px rgba(31, 92, 255, .18);
}

.brand h1 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 18px;
  margin: 0;
  line-height: 1.05;
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.navlinks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex: 1;
}

.navlinks a {
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 10px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}

.navlinks a:hover {
  background: rgba(42, 107, 255, .08);
  color: var(--blue-900);
}

.navlinks a.active {
  background: rgba(42, 107, 255, .10);
  color: var(--blue-900);
}

.navright {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  justify-content: flex-end;
}

.btn {
  border: 1px solid rgba(11, 18, 32, .10);
  background: rgba(255, 255, 255, .1);
  /* Slightly more transparent/white for dark mode */
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 10px 20px rgba(18, 38, 73, .06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(31, 92, 255, .22);
}

.btn.primary {
  border: 1px solid rgba(31, 92, 255, .30);
  background: linear-gradient(180deg, rgba(31, 92, 255, .98), rgba(31, 92, 255, .88));
  color: #fff;
  box-shadow: 0 16px 36px rgba(31, 92, 255, .22);
}

.btn.primary:hover {
  box-shadow: 0 18px 44px rgba(31, 92, 255, .26);
}

.hamburger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 32, .10);
  background: rgba(255, 255, 255, .7);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.hamburger span {
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, .8);
  display: block;
  position: relative;
}

.hamburger span:before,
.hamburger span:after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, .8);
}

.hamburger span:before {
  top: -6px;
}

.hamburger span:after {
  top: 6px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 26px 0 18px;
}

.heroShell {
  position: relative;
  border-radius: var(--radius-xl);

  box-shadow: var(--shadow);
  overflow: hidden;
  background: #ab7ef1;
}

/* soft “stage light” blobs */
.blob {
  position: absolute;
  filter: blur(40px);
  opacity: .55;
  pointer-events: none;
}

.blob.one {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(31, 92, 255, .35), rgba(31, 92, 255, 0));
  top: -190px;
  left: -160px;
}

.blob.two {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 60% 40%, rgba(42, 107, 255, .22), rgba(42, 107, 255, 0));
  bottom: -260px;
  right: -220px;
}

.heroGrid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  padding: 28px;
  align-items: stretch;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31, 92, 255, .18);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--blue-700);
  box-shadow: 0 8px 18px rgba(31, 92, 255, .25);
}

.headline {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 0.95;
  margin: 0 0 14px;
}

.subhead {
  margin: 0 0 22px;
  font-size: 16px;
  color: rgba(255, 255, 255, .72);
  max-width: 100%;
  line-height: 1.5;
}

.heroActions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.linkish {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--blue-900);
  background: rgba(42, 107, 255, .08);
  border: 1px solid rgba(31, 92, 255, .16);
  font-weight: 650;
  font-size: 13px;
  transition: transform .15s ease;
}

.linkish:hover {
  transform: translateY(-1px);
}

.arrow {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(31, 92, 255, .14);
  border: 1px solid rgba(31, 92, 255, .16);
}

/* ---------- Form card ---------- */
.card {

  border-radius: var(--radius-xl);
  box-shadow: 0 18px 40px rgba(18, 38, 73, .10);

  padding: 18px;
  position: relative;
  background: #1e293b;
}

.card h3 {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

label {
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  letter-spacing: .04em;
  font-weight: 650;
}

input {
  height: 44px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  /* Ensure inputs remain readable */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus {
  border-color: rgba(31, 92, 255, .42);
  box-shadow: 0 0 0 4px rgba(31, 92, 255, .12);
}

.fineprint {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.35;
}

/* ---------- Below hero section ---------- */
.below {
  padding: 18px 0 44px;
}

.twoCol {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}

.panel {
  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-soft);
  overflow: hidden;
  background: #1e293b;
}

.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(11, 18, 32, .06);
}

.panelHeader .kicker {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 650;
}

.panelHeader .meta {
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .45);
  text-transform: uppercase;
}

/* Script panel */
/* Adjust script panel for dark theme */
/* scriptBody styling updated to use background composition for easier customization */
.scriptBody {
  padding: 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  /* Default background color (matches the original dark blue feel) */
  background-color: #ffffff;
  /* Lines pattern sits on top. We removed the tint gradient to allow direct color control, 
     or we can keep it if we want to mix. Let's keep the lines as the image. */
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 28px);
  color: #000000;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.scriptBody .label {
  color: rgba(255, 255, 255, .55);
  font-weight: 750;
  letter-spacing: .06em;
}

.scriptBody .indent {
  padding-left: 18px;
}

.scriptBody .center {
  text-align: center;
  padding-left: 0;
}

/* Focus panel */
.focusBody {
  padding: 18px;
}

.focusTitle {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 40px;
  margin: 0 0 10px;
  line-height: 1;
}

.focusCopy {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .70);
  line-height: 1.55;
}

.miniGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.mini {
  border-radius: 18px;

  padding: 14px;
  box-shadow: 0 12px 26px rgba(18, 38, 73, .08);
}

.mini .tag {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 700;
  margin-bottom: 8px;
}

.mini .name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 6px;
  line-height: 1.15;
}

.mini .desc {
  margin: 0;
  color: rgba(255, 255, 255, .66);
  line-height: 1.45;
  font-size: 13px;
}

.focusFooter {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */
footer {
  padding: 28px 0 40px;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(11, 18, 32, .08);
  padding-top: 18px;
}

.foot a {
  color: rgba(255, 255, 255, .62);
  border-bottom: 1px dotted rgba(31, 92, 255, .35);
}

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
  .heroGrid {
    grid-template-columns: 1fr;
  }

  .twoCol {
    grid-template-columns: 1fr;
  }

  .navlinks {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .brand {
    min-width: auto;
  }

  .navright {
    min-width: auto;
  }
}

/* Mobile menu panel */
.mobileMenu {
  display: none;
  border-top: 1px solid rgba(11, 18, 32, .06);
  padding: 10px 0 14px;
}

.mobileMenu.open {
  display: block;
}

.mobileMenu a {
  display: block;
  padding: 10px 8px;
  border-radius: 12px;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
}

.mobileMenu a:hover {
  background: rgba(42, 107, 255, .08);
  color: var(--blue-900);
}

/* 5. Strengthened Borders on Panels and Cards */
.heroShell,
.card,
.panel,
.mini {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.03);
  /* Subtle glassmorphism */
  backdrop-filter: blur(12px);
}


.hero-logo-watermark {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 220px;
  opacity: 0.08;
  pointer-events: none;
  filter: blur(0.5px);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 180px;
  text-decoration: none;
}

.site-logo-bg {
  display: block;
  width: 150px;
  /* adjust */
  height: 52px;
  /* adjust */
  background-image: url('./logo.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  /* try 'cover' if still tiny */
}

.site-logo {
  display: block;
  height: 75px;
  width: auto;
}

/* Theme Customizer Styles */
#theme-customizer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 16px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  z-index: 9999;
  font-family: var(--sans);
  max-width: 95vw;
  overflow-x: auto;
}

.tc-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  min-width: 70px;
}

.tc-group.wide {
  min-width: 140px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  border-radius: 12px;
  margin-top: -8px;
  /* Offset padding */
}

.tc-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  text-align: center;
  width: 100%;
}

.tc-group.wide .tc-label {
  margin-bottom: 4px;
  text-align: left;
}

.tc-inputs {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Color Pickers */
.tc-input-wrapper {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.3, 3, 0.5, 1);
}

.tc-input-wrapper:hover {
  transform: scale(1.15);
  border-color: white;
  z-index: 10;
}

/* Tooltip on hover */
.tc-input-wrapper:before {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  background: black;
  color: white;
  padding: 4px 6px;
  font-size: 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tc-input-wrapper:hover:before {
  opacity: 1;
}

.tc-input-wrapper input[type="color"] {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
}

/* Opacity Slider */
.tc-slider-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  height: 4px;
  border-radius: 2px;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -3px;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* Close/Hide button */
.tc-toggle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  align-self: center;
}

.tc-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Target specific classes/IDs for overriding */
.topbar,
.heroShell,
#mission.panel,
.scriptBody,
#join {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.updated-font-color,
.updated-font-color * {
  color: inherit !important;
}