/* ===== Проект 02 · Strategy Terminal — „търговски терминал“ ===== */
.st-bar { border-bottom: 1px solid var(--line); background: #0b0b0e; }
.st-bar-in { display: flex; flex-wrap: wrap; gap: 6px 34px; padding-top: 10px; padding-bottom: 10px; font: 500 .7rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.st-bar span { display: inline-flex; align-items: center; gap: 8px; }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(200, 167, 94, .8); }
@media (prefers-reduced-motion: no-preference) { .live { animation: blink 2s ease-in-out infinite; } }
@keyframes blink { 50% { opacity: .35; } }
@media (max-width: 640px) { .hide-s { display: none !important; } }

.st-hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .st-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.st-sub { margin-top: 10px; font: 500 .78rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }

/* прозорец „терминал“ */
.term { overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.term-bar i { width: 8px; height: 8px; border-radius: 50%; background: #2c2c33; }
.term-bar span { margin-left: 10px; font: 500 .7rem/1 var(--mono); color: var(--muted); letter-spacing: .08em; }
.term-body { list-style: none; margin: 0; padding: 18px 18px 22px; display: grid; gap: 12px; font: 400 .84rem/1.5 var(--mono); counter-reset: ln; }
.term-body li { display: grid; grid-template-columns: 28px 82px 1fr; gap: 10px; color: var(--ink-2); counter-increment: ln; }
.term-body li::before { content: counter(ln, decimal-leading-zero); color: #4a4740; }
.term-body .cmd { color: var(--gold); }
@media (max-width: 480px) { .term-body li { grid-template-columns: 22px 1fr; } .term-body .cmd { grid-column: 2; } .term-body li > span:last-child { grid-column: 2; margin-top: -8px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .term-body li { opacity: 0; transform: translateX(-6px); animation: type .5s var(--ease) forwards; }
  .js .term-body li:nth-child(1) { animation-delay: .4s; } .js .term-body li:nth-child(2) { animation-delay: .7s; } .js .term-body li:nth-child(3) { animation-delay: 1s; }
  .js .term-body li:nth-child(4) { animation-delay: 1.3s; } .js .term-body li:nth-child(5) { animation-delay: 1.6s; } .js .term-body li:nth-child(6) { animation-delay: 1.9s; }
  .term-body li:last-child > span:last-child::after { content: "▍"; color: var(--gold); margin-left: 6px; animation: blink 1.1s steps(2) infinite 2.4s; }
}
@keyframes type { to { opacity: 1; transform: none; } }

.ledger-row { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .ledger-row { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
  .ledger-row li { grid-template-columns: 1fr; gap: 10px; padding: 26px 26px 24px; border: 0; border-left: 1px solid var(--line); }
  .ledger-row li:first-child { border-left: 0; padding-left: 0; }
  .ledger-row li:last-child { border-bottom: 0; }
}
.st-prose { display: grid; gap: 18px; font-size: 1.06rem; }
.st-prose p { color: var(--ink-2); }

/* графики */
.chart-card { margin: 0; padding: 26px 24px 22px; display: grid; gap: 18px; align-content: start; }
.chart-card figcaption { display: grid; gap: 8px; }
.chart-card figcaption .muted { font-size: .88rem; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .gl { stroke: rgba(255, 255, 255, .07); }
.chart .ax { font: 500 11px var(--mono); fill: var(--muted); }
.chart .nm { font: 600 12px var(--sans); fill: var(--ink); }
.chart .sub { font: 500 11px var(--mono); fill: var(--muted); }
.chart .bar { fill: url(#cov-grad); }
.chart .bar.hov, .chart .pfb.hov { filter: brightness(1.25); }
.chart .vl { font: 500 12px var(--mono); fill: var(--ink); }
.chart .pfb { fill: #5b5850; }
.chart .pfb.up { fill: var(--gold); }
.chart .one { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.chart .onet { font: 600 11px var(--sans); fill: var(--ink-2); }

/* правила */
.st-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: r; }
@media (min-width: 860px) { .st-rules { grid-template-columns: repeat(2, 1fr); } .st-rules li:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--line); } .st-rules li:nth-child(even) { padding-left: 40px; } }
.st-rules li { display: grid; grid-template-columns: 52px 1fr; gap: 6px 14px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.st-rules span { grid-row: span 2; font: 500 .85rem/1.6 var(--mono); color: var(--gold); }
.st-rules p { color: var(--ink-2); }

/* такси */
.st-fees { display: grid; gap: 22px; }
@media (min-width: 980px) { .st-fees { grid-template-columns: 1.15fr .85fr; } }
.calc { padding: 26px 24px; display: grid; gap: 14px; align-content: start; }
.calc .muted { font-size: .9rem; }
.calc-r { display: grid; gap: 8px; font-size: .9rem; color: var(--ink-2); }
.calc-r { grid-template-columns: 1fr auto; }
.calc-r input { grid-column: 1 / -1; grid-row: 2; width: 100%; accent-color: var(--gold); }
.calc-r output { font: 500 .9rem var(--mono); color: var(--gold-hi); }
.eat { position: relative; height: 16px; border-radius: 8px; background: rgba(200, 167, 94, .16); overflow: hidden; margin-top: 4px; }
.eat-fee { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, #e66767 0 6px, #b84f4f 6px 12px); transition: width .4s var(--ease); }
.calc-out { font-size: .98rem; color: var(--ink); }
.calc-out b { color: var(--gold-hi); font-weight: 600; }

/* цикълът на живо */
.pipe { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .pipe { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.pipe li { position: relative; display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
@media (min-width: 760px) {
  .pipe li { border-radius: 0; border-right: 0; }
  .pipe li:first-child { border-radius: 12px 0 0 12px; }
  .pipe li:last-child { border-radius: 0 12px 12px 0; border-right: 1px solid var(--line); }
  .pipe li + li::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: var(--bg); border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); z-index: 1; }
}
.pipe b { font: 500 1.15rem/1.2 var(--serif); color: var(--gold-hi); }
.pipe span { font-size: .84rem; color: var(--muted); }
.live-grid { display: grid; gap: 40px; }
@media (min-width: 980px) { .live-grid { grid-template-columns: 1.25fr .75fr; gap: 40px 48px; align-items: start; } .live-wide { grid-column: 1 / -1; } }
.phone { justify-items: center; }
.phone-win { width: min(300px, 80vw); border-radius: 34px; padding: 10px; background: #111114; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px #000; }
.phone-win img { border-radius: 26px; width: 100%; height: auto; }
.phone figcaption { text-align: left; }