/* ----------------------------------------------------
   Hero Section
---------------------------------------------------- */
.hero {
  background: var(--bg-white);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  display: grid;
  gap: var(--space-m);
}

/* ----------------------------------------------------
   Sections
---------------------------------------------------- */
.section {
  padding: var(--space-m) 0;
}

/* ----------------------------------------------------
   Cards
---------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-m);
}

/* ----------------------------------------------------
   Responsive Layout
---------------------------------------------------- */
@media (min-width: 768px) {
  /* Global horizontal rhythm for desktop */
  .container {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
  
  .hero-grid {
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile behavior */
@media (max-width: 700px) {
  /* Global mobile padding for all content */
  .container {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
}

/* ----------------------------------------------------
   Footer
---------------------------------------------------- */

.footer {
  background: #0d0d0d;
  color: #ffffff;
  padding: var(--space-s) 0;
}