/* =========================================================================
   Layout & typography utilities shared across sections
   ========================================================================= */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section{
  position: relative;
  padding-block: clamp(72px, 10vw, 140px);
}

.section-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--green);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.section-tag.red{ color: var(--red); }
.section-tag.amber{ color: var(--amber); }
.section-tag.center{ display: flex; width: fit-content; margin-inline: auto; margin-bottom: 20px; }

.section-title{
  font-size: var(--fs-h2);
  line-height: 1.12;
  margin-bottom: 20px;
}
.section-title.center{ text-align: center; margin-inline: auto; }

.section-lead{
  color: var(--text-muted);
  font-size: var(--fs-lead);
  max-width: 620px;
}
.section-lead.center{ margin-inline: auto; text-align: center; }

.text-gradient{
  background: linear-gradient(100deg, var(--green) 10%, #7af5c9 45%, var(--green-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient.red{
  background: linear-gradient(100deg, var(--red) 10%, #ffb199 45%, var(--red-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient.amber{
  background: linear-gradient(100deg, var(--amber) 10%, #ffe08a 45%, var(--amber-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}