/*
  The Human Standard

  This stylesheet defines the look and feel of the Human Standard website.
  The goal of the design is to be modern, dark, serious and urgent while
  retaining readability and warmth. A generous amount of white space and
  subtle animations help guide visitors through the content. The primary
  colour palette uses off-black backgrounds with vibrant accent colours for
  calls to action. Typography is set using system fonts for maximum
  compatibility and fast loading.

  Sections are separated with generous padding and gentle background
  gradients. Cards are used for the core pillars to draw the eye and
  accommodate longer text. On narrow screens the layout automatically
  stacks vertically for easy reading.
*/

/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #0e0e10;
  color: #f5f5f7;
  line-height: 1.6;
}

a {
  color: #58a6ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
}

header {
  background: #16161a;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #27272a;
}

header nav a {
  margin-left: 1.5rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

header nav a:hover {
  color: #8ab4f8;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 3rem 2rem 4rem 2rem;
  background-image: radial-gradient(circle at 50% 20%, #1c1c22 0%, #0e0e10 100%);
}

.hero h1 {
  font-size: 2.8rem;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.3rem;
  max-width: 750px;
  margin: 0.5rem auto 2rem auto;
  color: #d6d6d6;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #0077ff;
  color: #f5f5f7;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn:hover {
  background: #005fcc;
}

/* Sections */
section {
  padding: 4rem 0;
  border-top: 1px solid #27272a;
}

section:nth-child(even) {
  background: #141417;
}

section .section-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #f0f0f5;
}

/* Pillars grid */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.pillar-card {
  background: #1e1e24;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
}

.pillar-card:hover {
  transform: translateY(-4px);
}

.pillar-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
  color: #8ab4f8;
}

.pillar-card p {
  font-size: 0.95rem;
  color: #d0d0e0;
}

/* Choose your path */
.paths {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.path-card {
  background: #1e1e24;
  flex: 1 1 300px;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
  text-align: center;
}

.path-card:hover {
  transform: translateY(-4px);
}

.path-card h4 {
  color: #ffd166;
  margin-bottom: 0.5rem;
}

.path-card p {
  font-size: 0.9rem;
  color: #cacada;
}

/* Join section */
.join-container {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.join-container input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #3d3d48;
  border-radius: 4px;
  margin-bottom: 1rem;
  background: #292932;
  color: #f5f5f7;
  font-size: 1rem;
}

.join-container button {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #0077ff;
  border: none;
  border-radius: 4px;
  color: #f5f5f7;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.join-container button:hover {
  background: #005fcc;
}

/* Inequality image at the top of the hero */
.inequality-image {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Manifesto text in the hero */
.manifesto p {
  margin: 0.5rem auto;
  max-width: 800px;
  color: #c0c0c8;
  font-size: 1rem;
  line-height: 1.5;
}

/* No data taken badge */
.data-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  background: #2a2a32;
  color: #8ab4f8;
  border-radius: 4px;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* Stand button styling */
.stand-button {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: #ffa31a;
  border: none;
  border-radius: 4px;
  color: #0e0e10;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.stand-button:hover {
  background: #e58e00;
}

/* Contact form styles */
.contact-form input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #3d3d48;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: #292932;
  color: #f5f5f7;
  font-size: 1rem;
}

.contact-form button {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #0077ff;
  border: none;
  border-radius: 4px;
  color: #f5f5f7;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.contact-form button:hover {
  background: #005fcc;
}

/* Wealth comparison images used in the hero and proof pages */
.wealth-comparison {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

/*
  Limit the width and height of wealth comparison graphs to avoid forcing
  visitors to scroll past them. They should be readable but not dominate
  the hero or proof sections. These values reflect roughly a 20 % increase
  over the previous sizing to improve legibility while staying compact.
*/
.wealth-graph {
  max-width: 49%;
  max-height: 340px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* Support button */
.support-button {
  display: inline-block;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  background: #ffd166;
  border: none;
  border-radius: 4px;
  color: #0e0e10;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.support-button:hover {
  background: #e8b84f;
  text-decoration: none;
}

.support-note {
  font-size: 0.82rem;
  color: #888;
  margin-top: 0.5rem;
}

/* Proof library cards */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.proof-card {
  background: #1e1e24;
  border: 1px solid #2c2c34;
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.proof-card h3 {
  color: #8ab4f8;
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
}

.proof-card p,
.proof-card li {
  color: #d0d0e0;
  font-size: 0.92rem;
}

.proof-card ul {
  margin-left: 1rem;
}

.proof-source {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: #aaa;
}

/* Footnotes */
.footnotes {
  font-size: 0.8rem;
  color: #88889a;
  margin-top: 2rem;
}

.footnotes a {
  color: #6fa8ff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero {
    padding: 2rem 1rem 3rem 1rem;
  }
  .wealth-graph {
    max-width: 49%;
    max-height: 210px;
  }
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 1.1rem;
  }
  header nav a {
    margin-left: 1rem;
  }
}