/* ============================================================
   Типографика, контейнеры, утилиты, заголовки секций.
   ============================================================ */

.wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--pad)}

.section{padding-block:clamp(64px, 9vw, 120px)}

.section--sunk{background:var(--bg-sunk); border-block:1px solid var(--line)}

.section--tight{padding-block:clamp(44px, 6vw, 76px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:18px;
}

.eyebrow::before{content:""; width:9px; height:9px; background:var(--yellow); border-radius:2px; flex:none}

.h-sec{font-size:clamp(1.75rem, 1.15rem + 2.6vw, 3.1rem)}

.lead{margin-top:18px; max-width:62ch; color:var(--ink-2); font-size:clamp(1rem,.96rem + .3vw,1.15rem)}

.sec-head{max-width:760px; margin-bottom:clamp(36px,5vw,60px)}

.mark{
  background:linear-gradient(transparent 62%, var(--yellow-soft) 62%);
  padding-inline:.06em;
}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}

.reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
}