:root{
  /* Core Palette */
  --bg: #000000;           /* Main background — black */
  --text: #FFFFFF;         /* Primary text — white */
  --muted: #CCCCCC;        /* Muted/secondary text */
  --accent: #FF7A00;       /* Secondary brand — orange */
  --cta: #138f46;          /* CTA (green) */
  --cta-hover: #32ad66;    /* Light green for hover */
  --max-width: 1000px;
}

/* Basic reset */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; }
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Layout helpers */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }

/* Header */
.site-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; border-bottom:1px solid #222; }
.logo { font-weight:700; font-size:1.2rem; color:var(--accent); text-decoration:none; }
.nav-list { list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; }
.nav-list a { color:var(--text); text-decoration:none; font-weight:600; opacity:0.9; transition:color .2s; }
.nav-list a:hover { color:var(--accent); }

/* Hero */
.hero { min-height: calc(100vh - 140px); display:grid; place-items:center; padding:2rem 0; }
.hero-inner { text-align:center; max-width:60ch; padding:2rem; }
.hero h1 { margin:0 0 0.75rem; font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--text); }
.lead { margin:0 0 1.5rem; color:var(--muted); font-size:1.2rem; }

/* CTA button */
.cta {
  display:inline-block;
  padding:0.9rem 1.4rem;
  background:var(--cta);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  transition: background .2s, transform .2s;
}
.cta:hover {
  background:var(--cta-hover);
  transform: translateY(-2px);
}

/* Footer */
.site-footer { text-align:center; padding:1rem 0; color:var(--muted); font-size:0.95rem; border-top:1px solid #222; }

/* Utility accents */
.highlight { color: var(--accent); font-weight: bold; }
.text-muted { color: var(--muted); }
.bg-accent { background: var(--accent); color: #000; padding: 0.2rem 0.5rem; border-radius:4px; }

/* Responsive tweaks */
@media (max-width:600px) {
  .nav-list { gap:1rem; font-size:0.95rem; }
  .hero-inner { padding:1.25rem; }
}