.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}.step-card{text-align:center;padding:28px 20px;border-radius:var(--radius-lg);background:var(--bg);border:1px solid var(--gray-100);position:relative}.step-num{width:40px;height:40px;border-radius:10px;background:var(--blue-50);color:var(--blue-500);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;margin-bottom:14px}.step-card h3{font-size:.95rem;font-weight:700;color:var(--gray-900);margin-bottom:6px}.step-card p{font-size:.82rem;color:var(--gray-500);line-height:1.6}.step-arrow{position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--gray-200);z-index:2}.step-card:last-child .step-arrow{display:none}.code-section{background:var(--gray-900);color:var(--bg)}.code-section .section-label{color:#60a5fa}.code-section .section-title{color:var(--bg)}.code-section .section-sub{color:var(--gray-400)}.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}.config-card{padding:28px;border-radius:var(--radius-lg);background:var(--bg);border:1px solid var(--gray-100)}.config-card h3{font-size:.95rem;font-weight:700;color:var(--gray-900);margin-bottom:6px;display:flex;align-items:center;gap:8px}.config-card h3 code{font-family:JetBrains Mono,monospace;font-size:.82rem;background:var(--blue-50);color:var(--blue-600);padding:2px 8px;border-radius:5px}.config-card p{font-size:.88rem;color:var(--gray-500);line-height:1.6}.arch-section{background:var(--gray-50);border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100)}.arch-section .section-label,.arch-section .section-title{text-align:center}.arch-flow{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:48px;flex-wrap:wrap}.arch-box{padding:24px 28px;border-radius:var(--radius-lg);text-align:center;min-width:180px}.arch-box.yours{background:var(--bg);border:2px solid var(--gray-200)}.arch-box.stromcom{background:var(--blue-500);color:var(--bg);box-shadow:var(--shadow-lg)}.arch-box.data{background:var(--gray-900);color:var(--bg)}.arch-box h4{color:var(--bg);font-size:.9rem;font-weight:700;margin-bottom:4px}.arch-box p{font-size:.78rem;opacity:.75}.arch-box.yours h4{color:var(--gray-900)}.arch-arrow{color:var(--gray-300);font-size:1.4rem}@media(max-width:768px){.steps-row{grid-template-columns:1fr;gap:16px}.step-arrow{display:none}.config-grid{grid-template-columns:1fr}}