.about-hero { max-width: 860px; }
.about-hero h1 { font-size: clamp(2rem, 5vw, 3.7rem); }
.about-flow { display: grid; gap: 22px; margin-top: 42px; }
.about-step { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.about-step:nth-child(even) .about-copy { order: 2; }
.step-number { color: var(--accent); font-size: .76rem; font-weight: 800; letter-spacing: .13em; }
.about-copy h2 { margin: 8px 0 0; font-size: 1.35rem; }
.about-copy p { color: var(--muted); line-height: 1.9; font-size: .94rem; }
.diagram { min-height: 245px; display: grid; place-items: center; overflow: hidden; border: 1px solid #354050; border-radius: 10px; background: #10151e; }
.diagram svg { display: block; width: 100%; max-width: 440px; height: auto; }
.diagram-label { fill: #b7c2d3; font: 700 13px system-ui, sans-serif; }
.diagram-muted { fill: #738096; font: 12px system-ui, sans-serif; }
.diagram-accent { fill: #4ed7c4; font: 700 12px system-ui, sans-serif; }
.about-note { margin-top: 36px; padding: 24px; border-left: 3px solid var(--accent); background: #121822; }
.about-note h2 { font-size: 1.1rem; }
.about-note p { color: var(--muted); line-height: 1.9; }
@media (max-width: 760px) { .about-step, .about-step:nth-child(even) { grid-template-columns: 1fr; } .about-step:nth-child(even) .about-copy { order: initial; } }