<section class="section docs-section" id="steps">
	<h2 class="section-title">Steps</h2>
	<p class="docs-section-description">
		Steps описывает wizard-flow, onboarding и последовательные процессы с текущим, завершенным и недоступным шагом.
	</p>

	<div class="block">
		<ol class="steps">
			<li class="step step-complete">
				<span class="step-marker"><i class="ph ph-check"></i></span>
				<h3 class="step-title">Account</h3>
				<p class="step-text">Basic profile data is ready.</p>
			</li>
			<li class="step step-complete">
				<span class="step-marker"><i class="ph ph-check"></i></span>
				<h3 class="step-title">Plan</h3>
				<p class="step-text">Billing plan is selected.</p>
			</li>
			<li class="step step-current" aria-current="step">
				<span class="step-marker">3</span>
				<h3 class="step-title">Confirm</h3>
				<p class="step-text">Review settings before launch.</p>
			</li>
			<li class="step step-disabled">
				<span class="step-marker">4</span>
				<h3 class="step-title">Launch</h3>
				<p class="step-text">Available after confirmation.</p>
			</li>
		</ol>
	</div>

	<div class="block">
		<ol class="steps steps-vertical">
			<li class="step step-complete">
				<span class="step-marker"><i class="ph ph-check"></i></span>
				<h3 class="step-title">Queued</h3>
				<p class="step-text">Job accepted and waiting for worker slot.</p>
			</li>
			<li class="step step-current" aria-current="step">
				<span class="step-marker">2</span>
				<h3 class="step-title">Running</h3>
				<p class="step-text">Current task is processing input data.</p>
			</li>
			<li class="step">
				<span class="step-marker">3</span>
				<h3 class="step-title">Report</h3>
				<p class="step-text">Final summary appears after completion.</p>
			</li>
		</ol>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Steps HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;ol class="steps"&gt;
  &lt;li class="step step-complete"&gt;
    &lt;span class="step-marker"&gt;&lt;i class="ph ph-check"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Account&lt;/h3&gt;
    &lt;p class="step-text"&gt;Basic profile data is ready.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li class="step step-current" aria-current="step"&gt;
    &lt;span class="step-marker"&gt;2&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Confirm&lt;/h3&gt;
    &lt;p class="step-text"&gt;Review settings before launch.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li class="step step-disabled"&gt;
    &lt;span class="step-marker"&gt;3&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Launch&lt;/h3&gt;
    &lt;p class="step-text"&gt;Available after confirmation.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vertical Steps HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;ol class="steps steps-vertical"&gt;
  &lt;li class="step step-complete"&gt;
    &lt;span class="step-marker"&gt;&lt;i class="ph ph-check"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Queued&lt;/h3&gt;
    &lt;p class="step-text"&gt;Job accepted and waiting for worker slot.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li class="step step-current" aria-current="step"&gt;
    &lt;span class="step-marker"&gt;2&lt;/span&gt;
    &lt;h3 class="step-title"&gt;Running&lt;/h3&gt;
    &lt;p class="step-text"&gt;Current task is processing input data.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;</code></pre>
	</div>
</section>