/* ==============================
   GLOBAL DEFAULTS
   ============================== */

html, body {
  margin: 0;
  padding: 0;
  background: #0b0c0f;          /* main dark background */
  color: #e7eaf0;               /* default text color */
  font-family: system-ui, Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
}

/* ==============================
   MAIN CONTENT AREA
   ============================== */

main {
  max-width: 800px;             /* tighter content width */
  margin: 0 auto;
  padding: 40px 20px 80px;      /* top / sides / bottom */
}

/* ==============================
   HEADINGS
   ============================== */

h1, h2, h3 {
  color: #ffffff;
  margin-top: 30px;
  margin-bottom: 15px;
}

/* H2 divider under "Welcome to TradeForth" */
h2 {
  border-bottom: 1px solid #2c323d;
  padding-bottom: 10px;
}
/* ✅ Indent h3 inside main content */
main h3 {
  margin-left: 20px;
}

/* ==============================
   HEADER SECTION
   ============================== */

header {
  background: #12141a;
  padding: 40px 20px 20px;      /* reduced bottom padding to tighten gap to nav */
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 2.5rem;
}

header p {
  margin-top: 8px;
  font-size: 1.2rem;
  color: #a6c8ff;
}

/* ==============================
   NAVIGATION BAR
   ============================== */

nav {
  margin-top: 8px;              /* was 20px — tighter */
  background: #1a1d24;
  padding: 10px 0;              /* was 12px — slightly tighter */
  border-top: 1px solid #0e1015;
  border-bottom: 1px solid #0e1015;
  text-align: center;
}

nav a {
  color: #a6c8ff;
  margin: 0 14px;
  text-decoration: none;
  font-weight: 500;
}

nav a:hover {
  text-decoration: underline;
}

/* ==============================
   PARAGRAPHS & LINKS
   ============================== */

p { margin-bottom: 20px; }

a { color: #66aaff; }
a:hover { color: #99cfff; }

main h3 + p {
  margin-left: 20px;
}


/* ==============================
   FOOTER
   ============================== */

footer {
  padding: 40px 20px;
  text-align: center;
  color: #9aa3b2;
  border-top: 1px solid #0e1015;
  margin-top: 40px;
}

/* ==============================
   OPTIONAL: MOBILE TWEAKS
   ============================== */

@media (max-width: 640px) {
  header { padding: 28px 16px 16px; }
  nav { padding: 8px 0; }
  main { padding: 28px 16px 56px; }
  header h1 { font-size: 2rem; }
}