:root {
  --color-hero-start:#12625C;
  --color-hero-end:#10756D;
  --color-accent:#116962;
  --color-section-dark:#111827;
  --color-section-mid:#112D36;
  --color-text:#FFFFFF;
}

body {
  margin:0;
  font-family:sans-serif;
  background:linear-gradient(135deg,var(--color-hero-start),var(--color-hero-end));
  color:var(--color-text);
}
header {
  background:var(--color-accent);
  padding:1rem 2rem;
}
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.logo { color:#a7ffeb; font-size:1.5rem; text-decoration:none; }
nav a { color:#a7ffeb; margin:0 1rem; text-decoration:none; text-transform:uppercase; display:inline-block; padding:0.75rem 1.25rem; }
nav a:hover { color:#e0f2f1; }
.btn-invite {
  background:#FFA500;
  border-radius:6px;
  padding:0.5em 1em;
  transition:color 0.2s, background 0.2s;
  color:#111827;
}
.btn-invite:hover { background:#FFB84D; }
.hero {
  text-align:center;
  padding:4rem 1rem;
  background:url('../assets/mrace-background_original.jpg') center/cover no-repeat;
}
.hero h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero p { font-size:1.1rem; margin-bottom:1.5rem; }
.cta { background:var(--color-accent); color:var(--color-text); padding:0.8rem 1.5rem; border-radius:6px; text-decoration:none; font-weight:700; }
.cta:hover { background:#138f82; }
.content { max-width:900px; margin:2rem auto; padding:1rem; background:rgba(17,45,54,0.75); border-radius:12px; backdrop-filter:blur(10px); }
.content h2 { margin-bottom:1rem; }
.highlight { padding:1rem; border-radius:8px; margin:1rem 0; }
.highlight.green {
  background:var(--color-accent);
  color:var(--color-text);
}
.highlight.yellow { background:#fff9c4; color:#fbc02d; }
.badge { display:inline-block; padding:0.3em 0.8em; border-radius:9999px; font-weight:700; background:#43a047; }
.fee-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.fee-card { background:rgba(255,255,255,0.1); padding:1rem; border-radius:10px; text-align:center; }
.fee-icon { width:36px; height:36px; margin-bottom:0.5rem; }
.roi { text-align:center; }
.calc .form-group { margin:1rem 0; }
.calc input { width:100%; padding:0.5rem; border:none; border-radius:6px; }
#calcBtn { margin-top:1rem; background:var(--color-accent); border:none; padding:0.7rem 1.5rem; border-radius:6px; cursor:pointer; font-weight:700; color:var(--color-text); }
#calcBtn:hover { background:#138f82; }
#result { margin-top:1rem; background:var(--color-hero-start); padding:1rem; border-radius:8px; color:#a7ffeb; }
canvas { width:100% !important; max-width:100%; }
footer { background:var(--color-accent); text-align:center; padding:1rem; }
#themeToggle { margin-left:1rem; background:none; border:1px solid var(--color-accent); color:var(--color-accent); padding:0.3rem 0.6rem; border-radius:6px; cursor:pointer; }
#themeToggle:hover { background:var(--color-accent); color:var(--color-text); }
#themeToggle:focus { outline:none; }

body.light { background:#e0f2f1; color:#004d40; }
body.light header { background:#16b2a5; }
body.light footer { background:#16b2a5; }
body.light .content { background:rgba(255,255,255,0.8); color:#004d40; }
#community-progress-bar { width:100%; height:20px; }
#community-progress-text { text-align:center; margin-top:0.5rem; }

.invite-box {
  display:flex;
  gap:0.5rem;
  margin-top:1rem;
}
.invite-box input {
  flex:1;
  padding:0.5rem;
  border:none;
  border-radius:6px;
}

/* Hero invite card above the fold */
.invite-card {
  background:linear-gradient(135deg,var(--color-hero-start),var(--color-hero-end));
  border-radius:12px;
  padding:1.5rem;
  color:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,0.3);
  max-width:600px;
  margin:1rem auto;
}
.invite-card h2 {
  font-size:1.25rem;
  font-weight:700;
  margin:0 0 0.5rem 0;
}
.invite-card code {
  display:block;
  font-family:monospace;
  font-size:1.1rem;
  margin:0.5rem 0;
}
.invite-card button {
  background:#FFA500;
  border:none;
  color:#fff;
  padding:0.5rem 1rem;
  border-radius:6px;
  cursor:pointer;
}
.invite-card button:hover {
  background:#FFB84D;
}
.invite-card p {
  font-size:0.9rem;
  font-style:italic;
  margin-top:0.5rem;
}

/* Trust section cards */
.trust-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.trust-card {
  background:rgba(255,255,255,0.1);
  padding:1rem;
  border-radius:8px;
}
.trust-card h3 {
  margin-top:0;
}
.trust-example {
  margin-top:1.5rem;
  background:rgba(255,255,255,0.1);
  padding:1rem;
  border-radius:8px;
}
.trust-note {
  font-size:0.85rem;
  margin-top:0.5rem;
}
/* Budget calculator redesign */
.budget-container {
  background:#0f2f2b;
  padding:24px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
  max-width:900px;
  margin:2rem auto;
}
.budget-container form {
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.input-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.inputs-left label,
.system-values label {
  display:block;
  margin-bottom:0.5rem;
  font-weight:600;
}
.input-icon {
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:6px;
  padding:0.25rem 0.5rem;
}
.input-icon span {
  margin-right:0.25rem;
}
.input-icon input {
  border:none;
  width:100%;
}
.check {
  margin-top:1rem;
}
.inputs-right .preset-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0.5rem;
}
.preset-btn {
  background:#fff;
  color:#0f2f2b;
  border:none;
  padding:0.5rem;
  border-radius:6px;
  cursor:pointer;
}
.preset-btn:hover {
  background:#e0e0e0;
}
.system-values {
  background:#112D36;
  padding:1rem;
  border-radius:8px;
}
.system-values input {
  width:100%;
  padding:0.4rem;
  border:none;
  border-radius:4px;
  margin-bottom:0.5rem;
}
.form-action {
  text-align:center;
}
.form-action button {
  padding:0.7rem 1.5rem;
  background:#116962;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
}
.form-action button:hover {
  background:#138f82;
}
.metrics-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.metric-card {
  background:#fff;
  color:#0f2f2b;
  text-align:center;
  padding:1rem;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.metric-value {
  font-size:1.5rem;
  font-weight:700;
}
.metric-label {
  font-size:0.85rem;
  color:#555;
}
.chart-panel {
  background:#fff;
  padding:1rem;
  border-radius:8px;
  margin-top:1rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.details-card {
  background:#fff;
  padding:1rem;
  border-radius:8px;
  margin-top:1rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.details-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.detail-label {
  font-size:0.85rem;
  color:#555;
}
.detail-value {
  font-weight:600;
  margin-bottom:0.5rem;
}
@media(max-width:640px){
  .input-grid{grid-template-columns:1fr;}
  .metrics-grid{grid-template-columns:repeat(2,1fr);}
}