font-family: var(--font-pixel);  /* 'Press Start 2P', monospace */
font-size: 16px;
color: var(--accent);            /* #72cc96 */

Используется: заголовки, навигация, кнопки, теги, лейблы форм, boot-экран

font-family: var(--font-mono);  /* 'Share Tech Mono', monospace */
font-size: 20px;
color: var(--text-dim);          /* #8b949e */

Используется: основной текст, описания, инпуты, системная информация

<h1 style="font-family: var(--font-pixel); font-size: 27px;
           color: var(--text); line-height: 1.8;">
  ИНТЕГРАЦИИ.<br>АВТОМАТИЗАЦИЯ.<br>ИИ.
</h1>

<h2 class="section-title">> /USR/BIN/SERVICES</h2>

/* CSS */
font-family: var(--font-pixel);
font-size: 16px;
color: var(--accent);
border-bottom: 2px dashed var(--border);
letter-spacing: 0.5px;

<h3>ИНТЕГРАЦИЯ 1С</h3>

/* CSS */
font-family: var(--font-pixel);
font-size: 13px;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.5px;

<span style="font-family: var(--font-pixel); color: var(--accent);">
  > БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ
</span>

/* Используется в: section-title, .search-label, .sys-info,
   .input-group label, .legal-header, кнопки, FAQ */

Префикс `>` — отсылка к командной строке. Всегда HTML-экранируется как `>`

<span class="tag">[CORE]</span>

/* CSS */
font-family: var(--font-pixel);
font-size: 12px;
color: var(--accent);
display: inline-block;
letter-spacing: 0.5px;

/* FAQ — закрытый */
.faq-item summary::before { content: '[+]'; color: var(--text-dim); }
/* FAQ — открытый */
.faq-item[open] summary::before { content: '[-]'; color: var(--accent); }

/* Модальное окно — кнопка OK */
<button class="modal-ok">[ OK ]</button>

/* 404 — звуковой индикатор */
<div class="sound-hint">[♫ SFX: ON]</div>

/* В скроллтексте (demoscene horizontal scroll) */
БЮРО КОСТРУБИНА // ИНТЕГРАЦИИ // АВТОМАТИЗАЦИЯ // ИИ //

/* Также используется в boot-экране и системных сообщениях */

<h1 class="glitch" data-text="ИНТЕГРАЦИИ. АВТОМАТИЗАЦИЯ. ИИ.">
  ИНТЕГРАЦИИ. АВТОМАТИЗАЦИЯ. ИИ.
</h1>

/* CSS: использует attr(data-text) для дублирования через ::before/::after */
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
/* Цвета: magenta (#ff00ff) и cyan (#00ccff) */
/* clip-path + transform для смещения фрагментов */

Активируется добавлением класса `.active` (обычно по таймеру или событию)

/* Применяется к h1, h2, h3 при прокрутке */
.chromatic-active h1,
.chromatic-active h2,
.chromatic-active h3 {
  text-shadow:
    -0.5px 0 rgba(255, 0, 50, 0.15),   /* красный слева */
    0.5px 0 rgba(0, 200, 255, 0.15);    /* голубой справа */
  transition: text-shadow 0.3s;
}

/* Лого — пульсирующее свечение */
.logo-title {
  text-shadow: 0 0 8px rgba(114, 204, 150, 0.3);
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(114, 204, 150, 0.3); }
  50% { text-shadow: 0 0 16px rgba(114, 204, 150, 0.6),
                     0 0 32px rgba(114, 204, 150, 0.2); }
}

/* Hover на лого — яркое свечение */
.logo-link:hover .logo-title {
  text-shadow: 0 0 16px rgba(114, 204, 150, 0.8),
               0 0 32px rgba(114, 204, 150, 0.4);
}

/* 404 — оранжевое свечение */
.error-code {
  text-shadow: 0 0 40px rgba(255,102,0,0.6),
               0 0 80px rgba(255,102,0,0.3);
}

/* Блок-курсор (typewriter) */
.typing-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.15em;
  background: var(--text);
  vertical-align: text-bottom;
  animation: cursor-blink 0.4s step-end infinite;
}

/* Boot-курсор (underscore) */
.boot-cursor { animation: blink 0.6s step-end infinite; }

/* Start screen — мигание */
.start-text {
  animation: startBlink 1.2s steps(1) infinite;
}
@keyframes startBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

<div class="copper-bar"></div>

/* CSS */
.copper-bar {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    var(--copper-1), var(--copper-2),
    var(--copper-3), var(--copper-4),
    var(--copper-1));
  background-size: 200% 100%;
  animation: copperScroll 3s linear infinite;
  opacity: 0.7;
}

<div class="pixel-divider"></div>

/* CSS */
.pixel-divider {
  width: 100%;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0px, var(--accent) 4px,
    transparent 4px, transparent 8px);
  opacity: 0.3;
}

/* Используется в: section-title, .legal-info, .map-box, hr, .contact-info */
.section-title { border-bottom: 2px dashed var(--border); }
.legal-info { border: 1px dashed var(--border); }
.map-box { border: 1px dashed var(--border); }
hr { border-top: 1px dashed var(--border); }

<div class="scrolltext-wrap">
  <div class="scrolltext">
    БЮРО КОСТРУБИНА // ИНТЕГРАЦИИ // АВТОМАТИЗАЦИЯ // ...
  </div>
</div>

/* CSS */
.scrolltext-wrap {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.scrolltext {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--accent);
  animation: scrollText 25s linear infinite;
  padding-left: 100%;
}

/* 1. Color Cycle — перелив цветов */
.fx-color-cycle { animation: colorCycle 2s linear; }

/* 2. Glitch Scramble — blur + letter-spacing */
.fx-glitch-scramble { animation: glitchScramble 0.4s steps(2); }

/* 3. Blink Flash — быстрое мигание */
.fx-blink { animation: blinkFx 0.3s steps(1) 3; }

/* 4. Retype — стирание слева направо */
.fx-retype { animation: retypeFx 0.8s ease-out; }

/* 5. RGB Split — красный/голубой text-shadow */
.fx-rgb-split { animation: rgbSplit 0.5s ease-out; }

/* Классы добавляются через JS при hover на .nav-menu a */

Нажмите на элементы выше, чтобы увидеть эффект в действии

/* Базовая кнопка */
<a href="#" class="btn">> ОТПРАВИТЬ</a>

/* Контурная кнопка */
<a href="#" class="btn btn-outline">> О БЮРО</a>

/* Hero CTA — свечение + shimmer + анимация блика */
<a href="#" class="btn hero-cta">> БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ</a>

/* Demo кнопка — пульсация */
<a href="#" class="demo-btn">> ДЕМО</a>

<details class="faq-item">
  <summary>Сколько стоит внедрение?</summary>
  <div>Ответ...</div>
</details>

/* Маркеры через CSS pseudo-elements: */
.faq-item summary::before { content: '[+]'; }
.faq-item[open] summary::before { content: '[-]'; }

<span class="project-tag">1С</span>

/* CSS */
.project-tag, .blog-tag {
  background: rgba(114, 204, 150, 0.1);
  border: 1px solid var(--accent-dark);
  padding: 2px 8px;
  font-size: 15px;
  color: var(--accent);
}

→  →  стрелка вправо
↔  ↔  двойная стрелка
₽ ₽  символ рубля
>   >  больше (терминальный префикс)
&lt;   <  меньше (навигация)
&nbsp;    неразрывный пробел
♫         музыкальный символ (404)
✓         галочка (модальное окно)

/* Успех — зелёная полоса */
.modal-success .modal-border {
  background: repeating-linear-gradient(90deg,
    var(--accent) 0px, var(--accent) 4px,
    var(--bg-panel) 4px, var(--bg-panel) 8px);
}

/* Ошибка — оранжевая полоса */
.modal-error .modal-border {
  background: repeating-linear-gradient(90deg,
    var(--amiga-orange) 0px, var(--amiga-orange) 4px,
    var(--bg-panel) 4px, var(--bg-panel) 8px);
}

<div class="boot-screen">
  <div class="boot-line" data-delay="0">AMIGA BOOT ROM v3.1</div>
  <div class="boot-line" data-delay="200">CHECKING MEMORY... 512K OK</div>
  ...
  <div class="boot-progress">
    <div class="boot-progress-bar"></div>
  </div>
  <div class="boot-line">SYSTEM READY.<span class="boot-cursor">_</span></div>
</div>

/* Sidebar background */
background-image: radial-gradient(
  rgba(114, 204, 150, 0.03) 1px,
  transparent 1px
);
background-size: 8px 8px;

/* Все CRT-эффекты — fixed-оверлеи с pointer-events: none */
/* Управляются классом .crt-active на <body> */
/* Переключаются через toggle в floating-widget */

.scanlines { z-index: 9998; }
.crt-rolling-bar { z-index: 9997; }
.crt-flicker { z-index: 9996; }
.crt-noise { z-index: 9995; }
/* Screen glow — ::after на body, z-index: 9994 */