.epi-section.how-it-works { background: var(--epi-bg); color: var(--epi-text); font-family: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.hero { background-image: var(--hero); background-size: cover; background-position: center; min-height: 420px; display: flex; align-items: center; justify-content: center; position: relative; text-align: center; }
.hero::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.hero .inner { position:relative; z-index:2; color:#fff; }
.hero h1 { font-size: 2.5rem; margin-bottom: .25rem; }
.hero h2 { font-size: 1.25rem; margin-bottom: 1rem; opacity:.9; }
.btn-primary { background: var(--epi-primary); color:#fff; padding:.75rem 1.25rem; border-radius:.5rem; text-decoration:none; display:inline-block; }

.bullets ul { list-style: disc; margin-left: 1.25rem; line-height: 1.6; }
.pair { display:flex; gap:1.25rem; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.pair figure { width: min(420px, 100%); text-align:center; }
.pair img { width:100%; height:auto; border-radius:8px; }
.pair figcaption { font-size:.9rem; opacity:.85; margin-top:.5rem; }

.diagram img { width:100%; height:auto; border-radius:10px; }

.cta-footer { text-align:center; padding: 2.5rem 1rem; background: rgba(255,255,255,0.04); margin-top: 2rem; }
.cta-footer h3 { margin-bottom: 1rem; }