/* layout.css — Containers, sections, grids */

body{
  font-family:var(--font-family);
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.6;
}

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-padding);
}

section{
  padding:var(--section-gap) 0;
}

/* Section header pattern */
.section-eyebrow{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--color-primary-start);
  margin-bottom:12px;
}

.section-title{
  font-size:44px;
  font-weight:700;
  letter-spacing:var(--tracking-tight);
  line-height:1.15;
  margin-bottom:16px;
}

.section-subtitle{
  font-size:17px;
  font-weight:500;
  color:var(--color-text-secondary);
  max-width:600px;
  line-height:1.6;
}

.section-header-center{
  text-align:center;
}

.section-header-center .section-subtitle{
  margin-left:auto;
  margin-right:auto;
}

/* Two-column split */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.split--reverse{
  direction:rtl;
}

.split--reverse > *{
  direction:ltr;
}

/* Fade-up animation target */
.fade-up{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s ease,transform 0.6s ease;
}

.fade-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
  .fade-up{opacity:1;transform:none;transition:none}
}