/* Landing page styles.
   The head, text and links are all static in index.html so the page is fully
   readable without JavaScript (for search engines, AdSense review, and users
   with scripting disabled). This file only adds presentation on top.

   Palette is intentionally monochrome to match the engineering site
   (codeofthegeeks.nl): black, white and greys, no accent colour. */

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f6f7f8;
  color: #16161a;
}

main {
  flex: 1 1 auto;
}

/* --- Hero (light) ----------------------------------------------------- */

.hero {
  text-align: center;
  padding: 4.5rem 1rem 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #16161a;
  margin-bottom: 0.5rem;
}

.hero .lead {
  max-width: 48rem;
  margin: 0 auto;
  font-size: 1.2rem;
  color: #4a4a50;
}

/* --- Shared row bits -------------------------------------------------- */

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.venture-row h2 {
  font-weight: 700;
  margin-bottom: 1rem;
}

.venture-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.venture-logo img {
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* --- Primary venture: engineering (full-width dark band) -------------- */

.engineering-band {
  background-color: #16161a;
  color: #d7d8dc;
  padding: 4.5rem 0;
}

.engineering-band .eyebrow { color: #9a9ba0; }
.engineering-band h2 { color: #ffffff; font-size: 1.9rem; }
.engineering-band p { color: #d7d8dc; }

/* --- Secondary venture: tools (light) --------------------------------- */

.tools-row { padding: 4rem 0; }

.tools-row .eyebrow { color: #6a6a70; }
.tools-row h2 { color: #16161a; font-size: 1.6rem; }
.tools-row p { color: #4a4a50; }

.tool-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  columns: 2;
  column-gap: 1.5rem;
}

.tool-list li {
  break-inside: avoid;
  padding: 0.2rem 0;
}

.tool-list a {
  color: #16161a;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid #c9ccd2;
}

.tool-list a:hover { border-bottom-color: #16161a; }

/* --- Buttons (monochrome) --------------------------------------------- */

.btn-cta {
  display: inline-block;
  padding: 0.7rem 1.75rem;
  border-radius: 0.3rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* On the dark engineering band: light button, dark text. */
.btn-cta.on-dark {
  background-color: #ffffff;
  color: #16161a;
}
.btn-cta.on-dark:hover { background-color: #d0d1d5; }

/* On light background: dark button, light text (Lux style). */
.btn-cta.on-light {
  background-color: #16161a;
  color: #ffffff;
}
.btn-cta.on-light:hover { background-color: #3a3a40; }

/* --- About + footer --------------------------------------------------- */

.about {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  color: #4a4a50;
  padding: 1rem 1rem 4rem;
}

.about h2 {
  font-weight: 700;
  color: #16161a;
  margin-bottom: 0.75rem;
}

.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: #6a6a70;
  border-top: 1px solid #e3e5e9;
}

.site-footer a { color: #6a6a70; }

@media (max-width: 767px) {
  .hero { padding-top: 3rem; }
  .hero h1 { font-size: 2rem; }
  .engineering-band, .tools-row { padding: 2.75rem 0; text-align: center; }
  .venture-logo { margin-bottom: 1.5rem; }
  .tool-list { columns: 1; }
}