.iaLayer-solarprocesloop { padding: 80px 24px; background: var(--step-bg, #f8fafc); } .iaLayer-solarprocesloop .spl-inner { max-width: 1200px; margin: 0 auto; } .iaLayer-solarprocesloop .spl-eyebrow { text-align: center; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-color, #f59e0b); margin: 0 0 12px; } .iaLayer-solarprocesloop .spl-heading { text-align: center; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--ial-c-text-1, #1a1a2e); margin: 0 0 16px; } .iaLayer-solarprocesloop .spl-intro { text-align: center; font-size: 1rem; color: var(--ial-c-text-2, #555); max-width: 560px; margin: 0 auto 56px; line-height: 1.6; } .iaLayer-solarprocesloop .spl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .iaLayer-solarprocesloop .spl-steps::before { content: ''; position: absolute; top: 36px; left: calc(12.5% + 24px); right: calc(12.5% + 24px); height: 2px; background: linear-gradient(90deg, var(--accent-color, #f59e0b) 0%, var(--accent-color, #f59e0b) 100%); opacity: 0.25; z-index: 0; } .iaLayer-solarprocesloop .spl-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; position: relative; z-index: 1; } .iaLayer-solarprocesloop .spl-step-icon { width: 72px; height: 72px; border-radius: var(--ial-r-pill, 9999px); background: var(--accent-color, #f59e0b); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.75rem; box-shadow: var(--ial-shadow-sm, 0 2px 12px rgba(0,0,0,.07)); margin-bottom: 0; transition: box-shadow var(--ial-t-base, 0.25s); } .iaLayer-solarprocesloop .spl-step:hover .spl-step-icon { box-shadow: var(--ial-shadow-md, 0 4px 24px rgba(0,0,0,.12)); border-color: var(--accent-color, #f59e0b); } .iaLayer-solarprocesloop .spl-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--number-color, #1a1a2e); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: -10px 0 20px; border: 2px solid var(--step-bg, #f8fafc); position: relative; z-index: 2; } .iaLayer-solarprocesloop .spl-step-title { font-size: 1rem; font-weight: 700; color: var(--ial-c-text-1, #1a1a2e); margin: 0 0 10px; line-height: 1.3; } .iaLayer-solarprocesloop .spl-step-desc { font-size: 0.9rem; color: var(--ial-c-text-2, #555); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .iaLayer-solarprocesloop .spl-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 16px; } .iaLayer-solarprocesloop .spl-steps::before { display: none; } } @media (max-width: 560px) { .iaLayer-solarprocesloop { padding: 56px 20px; } .iaLayer-solarprocesloop .spl-steps { grid-template-columns: 1fr; gap: 36px; } }