:root{--ink:#0d0d0f;--paper:#f6f7fb;--muted:#5b5f6b}
.engines{max-width:1180px;margin:0 auto;padding:56px 20px 72px}
.engines__head{text-align:center;margin-bottom:34px}
.engines__head h1{font-size:clamp(34px,5vw,56px);margin:0;letter-spacing:-0.02em}
.engines__head h2{font-size:clamp(24px,3.4vw,38px);margin:2px 0 10px;letter-spacing:-0.01em}
.engines__head p{margin:0 auto;max-width:620px;font-size:16px;font-weight:700;color:var(--muted)}
.cards{display:flex;gap:18px;height:420px}
.card{position:relative;flex:1 1 0;min-width:0;border-radius:18px;overflow:hidden;cursor:pointer;background:#d9d9d9;transition:flex-grow .65s cubic-bezier(0.22,0.9,0.24,1);will-change:flex-grow}
.card.is-open{flex-grow:2.4}
.card__bg{position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;transform:scale(1.08);transition:transform .9s cubic-bezier(0.22,0.9,0.24,1),filter .6s ease;filter:grayscale(0.5) brightness(0.72)}
.card.is-open .card__bg{transform:scale(1);filter:grayscale(0) brightness(0.85)}
.card__shade{position:absolute;inset:0;background:#000}
.card__inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.card__index{font-size:20px;font-weight:800;opacity:.85}
.card__title{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-0.01em;white-space:nowrap}
.card__reveal{overflow:hidden;max-height:0;opacity:0;transform:translateY(10px);transition:max-height .6s ease,opacity .45s ease,transform .5s ease}
.card.is-open .card__reveal{max-height:200px;opacity:1;transform:translateY(0)}
.card__lead{margin:14px 0 8px;font-size:22px;font-weight:700}
.card__note{margin:0;font-size:15px;opacity:.85}
@media(max-width:760px){.cards{flex-direction:column;height:400px}
.card{height:200px;transition:height .6s cubic-bezier(0.22,0.9,0.24,1)}
.card.is-open{height:340px}
.card__title{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.card,.card__bg,.card__reveal{transition:none}
}