:root { --marigold: #f1b240; --marigold-light: #f9d07a; --etc-black: #020301; }
html.dark, html:not(.light) {
  --bg-primary: #020301; --bg-secondary: #0d0d0c;
  --text-primary: #f9fafb; --text-secondary: #d1d5db; --text-muted: #6b7280;
  --border: #1f1f1e; --card-bg: #0f0f0e; --nav-bg: rgba(2,3,1,0.97);
}
html.light {
  --bg-primary: #ffffff; --bg-secondary: #f3f5f9;
  --text-primary: #020301; --text-secondary: #374151; --text-muted: #9ca3af;
  --border: #e5e7eb; --card-bg: #ffffff; --nav-bg: rgba(255,255,255,0.97);
}
* { box-sizing: border-box; }
body { font-family: 'Geist', sans-serif; background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; }
h1, h2, h3, h4, .font-display { font-family: 'Geist', sans-serif; }
.section-label { font-family: 'Geist', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--marigold); }
html.dark  .logo-light { display: none; }
html.light .logo-dark  { display: none; }
#main-nav { transition: background 0.3s ease, box-shadow 0.3s ease; }
#main-nav.nav-scrolled { background: var(--nav-bg) !important; box-shadow: 0 1px 0 var(--border); }
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.card-hover { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); border-color: rgba(241,178,64,0.4) !important; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(2,3,1,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-card { transform: translateY(16px); transition: transform 0.25s ease; }
.modal-overlay.open .modal-card { transform: translateY(0); }

/* ── Page sections ── */
.section-hero { background: #020301; }
.section-bg-secondary { background: var(--bg-secondary); }
.section-bg-primary { background: var(--bg-primary); }
.footer-bg { background: #020301; }

/* ── Text color helpers ── */
.text-primary-color { color: var(--text-primary); }
.text-secondary-color { color: var(--text-secondary); }

/* ── Cards ── */
.card-engine { background: var(--card-bg); border-color: var(--border); }
.card-engine-featured { background: var(--card-bg); border-color: var(--border); border-top-color: #f1b240; }

/* ── Beta badge ── */
.beta-badge { border-color: rgba(241,178,64,0.2); background: rgba(241,178,64,0.06); }

/* ── Login section ── */
.login-grid { border-color: rgba(241,178,64,0.15); background: rgba(241,178,64,0.1); }
.panel-dark { background: #0d0d0c; }
.border-subtle { border-color: rgba(255,255,255,0.08); }

/* ── Form inputs ── */
.input-dark { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #f9fafb; }

/* ── Modals ── */
.modal-content { background: #0d0d0c; border-color: rgba(241,178,64,0.25); }
.modal-header { border-color: rgba(255,255,255,0.08); }
.info-box { background: rgba(241,178,64,0.06); border-color: rgba(241,178,64,0.2); }