/* Layout for the public marketing homepage only -- loaded alongside
   styles.css (for the shared color/shadow/radius variables and base
   typography) rather than duplicating them. Nothing here touches
   .topbar/.content, which are the internal app's shell, not this page's. */

body { background: var(--surface); }

.marketing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}
.marketing-nav .brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
}
.marketing-nav .brand:hover { text-decoration: none; }
.marketing-nav .brand img { height: 38px; width: auto; }

@media (max-width: 480px) {
  .marketing-nav { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
}

.marketing-hero {
  background: linear-gradient(180deg, #eef4fb 0%, var(--surface) 100%);
  padding: 4rem 2rem 5rem;
  text-align: center;
}
.marketing-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  max-width: 720px;
  margin: 0 auto 1.1rem;
}
.marketing-hero p {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 2rem;
}

.marketing-section { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }
.marketing-section h2 { text-align: center; margin-bottom: 0.5rem; }
.marketing-section .section-intro {
  text-align: center;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.service-card h3 { font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--navy); }
.service-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }

.marketing-about { background: var(--bg); }
.marketing-about .marketing-section { max-width: 720px; text-align: center; }

.marketing-contact { text-align: center; }
.marketing-contact .button { margin-top: 0.5rem; }

.marketing-footer {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}