# i-free 2026 UI-Kit · Блоки для импорта

> Готовые copy-paste фрагменты из [ui-kit.html](ui-kit.html). Каждый блок самодостаточен и зависит только от **базовых дизайн-токенов** (блок №1). Все блоки — vanilla HTML+CSS, без React/Tailwind/JS-фреймворков.
>
> **Источник дизайна:** [ifree-site/src/app/globals.css](ifree-site/src/app/globals.css).
>
> **Порядок импорта в новый проект:**
> 1. Копируем блок №1 (токены) в `:root` или Tailwind config.
> 2. Копируем блок №2 (utility classes) — глассморфизм, градиенты, эффекты.
> 3. Копируем нужные блоки по списку ниже (нумерация 3 — 18).
> 4. Опционально: добавляем JS из блока №19 (scroll reveal).

---

## Содержание

| # | Блок | Зависимости | Когда брать |
|---|------|-------------|-------------|
| 1 | [Дизайн-токены](#1-дизайн-токены-base) | — | **ВСЕГДА** первым |
| 2 | [Утилиты-классы](#2-утилиты-glass--gradients--effects) | 1 | **ВСЕГДА** вторым |
| 3 | [Star Field фон](#3-star-field-фон) | 1 | Любая страница с тёмным космическим фоном |
| 4 | [Aurora Glow](#4-aurora-glow) | 1 | Декорация под hero / секцию |
| 5 | [Кнопки](#5-кнопки) | 1 | Везде |
| 6 | [Бэйджи](#6-бэйджи) | 1 | Метки, статусы, теги |
| 7 | [Формы (input/textarea)](#7-формы) | 1 | Контактная, заявка, фидбек |
| 8 | [Glass-карточки](#8-glass-карточки) | 1, 2 | Списки, фичи, проекты |
| 9 | [Фичи-карточки с иконками](#9-фичи-карточки-с-иконками) | 1, 2, 8 | Преимущества, подходы, USP |
| 10 | [Аккордеон / FAQ](#10-аккордеон--faq) | 1 | FAQ, политика, технические разделы |
| 11 | [Top Banner (анонс)](#11-top-banner-анонс) | 1 | Промо мероприятия / релиза |
| 12 | [Full Hero](#12-full-hero-с-градиентом-и-stagger) | 1, 2, 4, 5 | Главная страница |
| 13 | [Page Hero (компактный)](#13-page-hero-компактный) | 1, 5 | Внутренние разделы |
| 14 | [Stats Strip](#14-stats-strip) | 1 | Цифры компании / продукта |
| 15 | [Promo Block (CTA)](#15-promo-block-cta) | 1, 5 | Призыв к действию между секциями |
| 16 | [Site Header (sticky)](#16-site-header-sticky) | 1 | Любой layout |
| 17 | [Site Footer](#17-site-footer) | 1 | Любой layout |
| 18 | [Текст-цитата с акцент-бордером](#18-текст-цитата-с-акцент-бордером) | 1 | Манифест, выдержки, мнения |
| 19 | [JS: scroll reveal](#19-js-scroll-reveal) | — | По желанию |

---

## 1. Дизайн-токены (BASE)

> **Скопировать в `:root` своего глобального CSS.** Это база — все остальные блоки опираются только на эти переменные. Под Tailwind 4 — обернуть в `@theme inline { ... }`.

```css
:root {
  /* Base — глубокая ночь */
  --bg-deep:        #0B1026;
  --bg-night:       #111B3A;
  --bg-twilight:    #1A2550;

  /* Dawn — заря (тёплая ось) */
  --dawn-pink:      #F2A7B3;
  --dawn-peach:     #F5C6AA;
  --dawn-blush:     #E8899A;
  --dawn-coral:     #F07B8A;

  /* Aurora — северное сияние (холодная ось) */
  --aurora-mint:    #A8E6CF;
  --aurora-teal:    #7EC8C8;
  --aurora-ice:     #B4E4F7;
  --aurora-sky:     #89B8D9;

  /* Текст */
  --text-primary:   #FFFFFF;
  --text-secondary: #B8C4D8;
  --text-muted:     #6B7B99;

  /* Glass */
  --glass-bg:       rgba(255, 255, 255, 0.04);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-hover:    rgba(255, 255, 255, 0.08);

  /* Stars */
  --star-bright:    #FFFFFF;
  --star-medium:    rgba(255, 255, 255, 0.6);
  --star-dust:      rgba(255, 255, 255, 0.25);

  /* Семантика (shadcn-совместимая) */
  --primary:            #7EC8C8;
  --primary-foreground: #0B1026;
  --accent:             #F2A7B3;
  --destructive:        #ef4444;
  --border:             rgba(255, 255, 255, 0.08);
  --ring:               #7EC8C8;
  --radius:             1rem;

  /* Типографика — fluid */
  --font-hero:    clamp(2.5rem, 4vw,   3.75rem);
  --font-h1:      clamp(2rem,   3.5vw, 3rem);
  --font-h2:      clamp(1.5rem, 2.5vw, 2rem);
  --font-h3:      clamp(1.1rem, 1.5vw, 1.4rem);
  --font-number:  clamp(2rem,   4vw,   3.5rem);
}

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

/* Кастомный скроллбар + selection */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(126, 200, 200, 0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(126, 200, 200, 0.3); }
::selection { background: rgba(126, 200, 200, 0.3); color: #fff; }
```

**Tailwind v4 эквивалент** (для проектов на Tailwind 4):

```css
@theme inline {
  --color-bg-deep:        #0B1026;
  --color-aurora-teal:    #7EC8C8;
  /* ...остальные так же */
  --radius-lg: 1rem;
}
```

---

## 2. Утилиты: glass + gradients + effects

```css
/* ===== Glass-карточка ===== */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  transition: all 0.3s ease;
}
.glass-card:hover {
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
}

/* Hover-glow по категории */
.glow-aurora:hover { box-shadow: 0 0 40px rgba(168, 230, 207, .12), 0 0 80px rgba(126, 200, 200, .06); }
.glow-dawn:hover   { box-shadow: 0 0 40px rgba(242, 167, 179, .12), 0 0 80px rgba(245, 198, 170, .06); }
.glow-ice:hover    { box-shadow: 0 0 40px rgba(180, 228, 247, .12), 0 0 80px rgba(137, 184, 217, .06); }

/* ===== Background-градиенты ===== */
.bg-gradient-hero {
  background: linear-gradient(180deg,
    var(--bg-deep) 0%, var(--bg-twilight) 30%,
    #1E3060 50%, #2A4070 65%,
    var(--aurora-sky) 80%, var(--dawn-pink) 95%, var(--dawn-peach) 100%);
}
.bg-gradient-section { background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-night) 100%); }
.bg-conversations    { background: linear-gradient(135deg, var(--dawn-coral) 0%, var(--dawn-pink) 50%, var(--dawn-peach) 100%); }
.bg-gradient-stats   { background: linear-gradient(135deg, var(--aurora-teal) 0%, var(--aurora-mint) 100%); }
.bg-gradient-magenta { background: linear-gradient(135deg, var(--dawn-coral) 0%, var(--dawn-blush) 100%); }

/* ===== Text-градиенты ===== */
.text-gradient-aurora,
.text-gradient-dawn,
.text-gradient-brand {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-aurora { background-image: linear-gradient(135deg, var(--aurora-mint) 0%, var(--aurora-teal) 100%); }
.text-gradient-dawn   { background-image: linear-gradient(135deg, var(--dawn-pink)   0%, var(--dawn-coral) 100%); }
.text-gradient-brand  { background-image: linear-gradient(135deg, var(--aurora-mint) 0%, var(--aurora-teal) 50%, var(--dawn-pink) 100%); }

/* ===== Border-акценты ===== */
.border-l-brand  { border-left: 4px solid var(--dawn-coral); padding-left: 1rem; }
.border-l-aurora { border-left: 4px solid var(--aurora-teal); padding-left: 1rem; }

/* ===== A11y: уважаем reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## 3. Star Field фон

> Звёздное поле на чистом CSS через `box-shadow`. **Без изображений, без JS.** Положить как самый нижний слой страницы.

**HTML:**
```html
<div class="star-field" aria-hidden="true"></div>
<div class="star-field-bright" aria-hidden="true"></div>
```

**CSS:**
```css
.star-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.star-field::before, .star-field::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; border-radius: 50%;
}
.star-field::before {
  box-shadow:
    120px 80px var(--star-dust), 340px 160px var(--star-dust), 560px 40px var(--star-dust),
    780px 200px var(--star-dust), 1000px 120px var(--star-dust), 1220px 280px var(--star-dust),
    200px 320px var(--star-dust), 420px 400px var(--star-dust), 640px 360px var(--star-dust),
    860px 440px var(--star-dust), 1080px 500px var(--star-dust), 1300px 380px var(--star-dust),
    /* ... добавьте ещё пар координат для бóльшей плотности */
    1900px 1200px var(--star-dust);
  animation: twinkle 8s ease-in-out infinite;
}
.star-field::after {
  width: 1.5px; height: 1.5px;
  box-shadow:
    200px 150px var(--star-medium), 500px 80px var(--star-medium),
    750px 300px var(--star-medium), 1100px 180px var(--star-medium),
    1750px 750px var(--star-medium);
  animation: twinkle 6s ease-in-out infinite 2s;
}
.star-field-bright { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.star-field-bright::before {
  content: ''; position: absolute;
  width: 2.5px; height: 2.5px; border-radius: 50%;
  box-shadow:
    300px 120px 2px rgba(255, 255, 255, 0.8),
    850px 200px 3px rgba(168, 230, 207, 0.6),
    700px 900px 2px rgba(168, 230, 207, 0.5);
  animation: twinkleGlow 10s ease-in-out infinite;
}
@keyframes twinkle     { 0%,100% { opacity: .3; } 50% { opacity: .7; } }
@keyframes twinkleGlow { 0%,100% { opacity: .5; } 50% { opacity: 1;  } }

@media (max-width: 768px) {
  .star-field-bright { display: none; }  /* экономим GPU на мобиле */
}
```

> **Полный набор координат** — см. [ui-kit.html](ui-kit.html), секция STAR FIELD. В блок выше включено сокращённое подмножество для иллюстрации.

---

## 4. Aurora Glow

> Радужная подсветка под hero / секцией. Кладём `position: absolute` поверх контейнера с `position: relative`.

**HTML:**
```html
<section style="position: relative; overflow: hidden;">
  <div class="aurora-glow"></div>
  <!-- контент здесь, position: relative; z-index: 2 -->
</section>
```

**CSS:**
```css
.aurora-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 20% 30%, rgba(168, 230, 207, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(126, 200, 200, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 90% 30% at 50% 70%, rgba(242, 167, 179, 0.08) 0%, transparent 70%);
  animation: auroraFloat 20s ease-in-out infinite;
}
.aurora-glow-subtle {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 30% at 30% 40%, rgba(168, 230, 207, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 50%, rgba(126, 200, 200, 0.05) 0%, transparent 70%);
}
@keyframes auroraFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(2%, -1%) scale(1.02); }
  66%      { transform: translate(-1%, 1%) scale(0.98); }
}

@media (max-width: 768px) { .aurora-glow { animation: none; } }
```

---

## 5. Кнопки

**HTML:**
```html
<button class="btn btn-default">Default</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-destructive">Destructive</button>

<!-- Размеры -->
<button class="btn btn-default btn-sm">Small</button>
<button class="btn btn-default btn-lg">Large</button>
<button class="btn btn-default btn-xl">XLarge</button>

<!-- Hero outline-варианты (заполняются на hover) -->
<button class="btn btn-outline hero-btn-teal btn-lg">Teal</button>
<button class="btn btn-outline hero-btn-pink btn-lg">Pink</button>
<button class="btn btn-outline hero-btn-ice  btn-lg">Ice</button>
```

**CSS:**
```css
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.25rem;
  font-weight: 600; font-size: .9375rem; line-height: 1;
  border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; user-select: none; text-decoration: none;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.btn-default     { background: var(--primary); color: var(--primary-foreground); }
.btn-default:hover     { background: var(--aurora-mint); transform: translateY(-1px); }
.btn-outline     { background: transparent; color: var(--text-primary); border-color: var(--border); }
.btn-outline:hover     { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); }
.btn-secondary   { background: rgba(255,255,255,.05); color: var(--text-primary); }
.btn-secondary:hover   { background: rgba(255,255,255,.08); }
.btn-ghost       { background: transparent; color: var(--text-primary); }
.btn-ghost:hover       { background: rgba(255,255,255,.05); }
.btn-destructive { background: var(--destructive); color: white; }
.btn-destructive:hover { background: #dc2626; }

.btn-sm { padding: .375rem .875rem;   font-size: .8125rem; border-radius: 8px;  }
.btn-lg { padding: .875rem 1.75rem;   font-size: 1rem;     border-radius: 12px; }
.btn-xl { padding: 1.125rem 2.25rem;  font-size: 1.125rem; border-radius: 14px; }

.hero-btn-teal { background: transparent; color: var(--aurora-teal); border-color: var(--aurora-teal); }
.hero-btn-teal:hover, .hero-btn-teal:focus-visible { background: var(--aurora-teal); color: var(--bg-deep); }
.hero-btn-pink { background: transparent; color: var(--dawn-pink);   border-color: var(--dawn-pink); }
.hero-btn-pink:hover, .hero-btn-pink:focus-visible { background: var(--dawn-pink);   color: var(--bg-deep); }
.hero-btn-ice  { background: transparent; color: var(--aurora-ice);  border-color: var(--aurora-ice); }
.hero-btn-ice:hover,  .hero-btn-ice:focus-visible  { background: var(--aurora-ice);  color: var(--bg-deep); }
```

---

## 6. Бэйджи

**HTML:**
```html
<span class="badge badge-default">Default</span>
<span class="badge badge-outline">Outline</span>
<span class="badge badge-aurora">● Aurora</span>
<span class="badge badge-dawn">● Dawn</span>
<span class="badge badge-destructive">⚠ Destructive</span>
```

**CSS:**
```css
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .625rem;
  font-size: .75rem; font-weight: 500; line-height: 1.2;
  border-radius: 9999px; border: 1px solid transparent;
}
.badge-default     { background: var(--primary); color: var(--primary-foreground); }
.badge-outline     { background: transparent; color: var(--text-primary); border-color: var(--border); }
.badge-aurora      { background: rgba(126, 200, 200, .12); color: var(--aurora-teal); border-color: rgba(126, 200, 200, .3); }
.badge-dawn        { background: rgba(242, 167, 179, .12); color: var(--dawn-pink);   border-color: rgba(242, 167, 179, .3); }
.badge-destructive { background: rgba(239, 68, 68, .12);   color: #fca5a5;            border-color: rgba(239, 68, 68, .3); }
```

---

## 7. Формы

**HTML:**
```html
<div class="glass-card" style="padding: 1.5rem; max-width: 32rem;">
  <div class="field">
    <label class="label" for="ex-name">Имя</label>
    <input class="input" id="ex-name" type="text" placeholder="Иван Иванов">
  </div>
  <div class="field">
    <label class="label" for="ex-email">Email</label>
    <input class="input" id="ex-email" type="email" placeholder="ivan@example.ru">
  </div>
  <div class="field">
    <label class="label" for="ex-msg">Сообщение</label>
    <textarea class="textarea" id="ex-msg" placeholder="Расскажите о проекте..."></textarea>
  </div>
  <div style="display: flex; gap: .75rem;">
    <button class="btn btn-default">Отправить</button>
    <button class="btn btn-ghost">Отмена</button>
  </div>
</div>
```

**CSS:**
```css
.input, .textarea {
  width: 100%; padding: .625rem .875rem;
  background: rgba(255,255,255,.06); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: .9375rem;
  transition: border-color .2s, background .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--ring);
  background: rgba(255,255,255,.08);
}
.textarea { resize: vertical; min-height: 6rem; }
.label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 500; color: var(--text-secondary); }
.field { margin-bottom: 1rem; }
```

---

## 8. Glass-карточки

**HTML:**
```html
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;">
  <div class="glass-card glow-aurora" style="padding: 1.5rem;">
    <h3 style="font-weight: 600;">Aurora</h3>
    <p style="color: var(--text-secondary);">Холодное мятно-бирюзовое сияние при наведении.</p>
  </div>
  <div class="glass-card glow-dawn" style="padding: 1.5rem;">
    <h3 style="font-weight: 600;">Dawn</h3>
    <p style="color: var(--text-secondary);">Тёплое розово-персиковое сияние.</p>
  </div>
  <div class="glass-card glow-ice" style="padding: 1.5rem;">
    <h3 style="font-weight: 600;">Ice</h3>
    <p style="color: var(--text-secondary);">Ледяное голубое сияние.</p>
  </div>
</div>
```

> Стили `.glass-card` и `.glow-*` — в блоке №2.

---

## 9. Фичи-карточки с иконками

**HTML:**
```html
<div class="glass-card feature-card glow-aurora">
  <div class="icon-box">★</div>
  <h3>Северное сияние</h3>
  <p>Aurora glow и звёздное поле создают глубину без тяжёлых иллюстраций.</p>
</div>
```

**CSS:**
```css
.feature-card {
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.feature-card .icon-box {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(126, 200, 200, .15);
  color: var(--aurora-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700;
  margin-bottom: .25rem;
}
.feature-card h3 { font-size: 1.125rem; font-weight: 600; }
.feature-card p  { color: var(--text-secondary); font-size: .9375rem; line-height: 1.6; }
```

> Для тёплых акцентов: `style="background: rgba(242, 167, 179, .15); color: var(--dawn-pink);"` на `.icon-box`.

---

## 10. Аккордеон / FAQ

> CSS-only через `<details>`. Никакого JS.

**HTML:**
```html
<div class="accordion">
  <details open>
    <summary>Заголовок вопроса №1</summary>
    <div class="accordion-body">Развёрнутый ответ. Поддерживается любая разметка внутри.</div>
  </details>
  <details>
    <summary>Заголовок вопроса №2</summary>
    <div class="accordion-body">Текст ответа.</div>
  </details>
</div>
```

**CSS:**
```css
.accordion details {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  margin-bottom: .5rem;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.accordion summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600; font-size: 1rem;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .2s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+';
  font-size: 1.25rem; color: var(--aurora-teal);
  transition: transform .25s ease;
}
.accordion details[open] summary::after { content: '−'; }
.accordion summary:hover { background: rgba(255,255,255,.03); }
.accordion .accordion-body {
  padding: 0 1.25rem 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
```

---

## 11. Top Banner (анонс)

**HTML:**
```html
<div class="top-banner">
  <div class="container">
    <div class="top-banner-text-outline">Битва AI-агентов · 14.05.2026</div>
  </div>
</div>
```

**CSS:**
```css
.top-banner {
  background: var(--bg-deep);
  border-bottom: 1px solid rgba(126, 200, 200, .15);
  padding: 1rem 0;
  text-align: center;
  overflow: hidden;
}
.top-banner-text-outline {
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--aurora-teal);
  paint-order: stroke fill;
  font-size: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 768px) {
  .top-banner-text-outline { -webkit-text-stroke: 2px var(--aurora-teal); }
}
```

---

## 12. Full Hero (с градиентом и stagger)

**HTML:**
```html
<section class="full-hero bg-gradient-section">
  <div class="aurora-glow"></div>
  <div class="container hero-stagger">
    <span class="badge badge-aurora">Релиз 14.05.2026</span>
    <h1>Технологии, которые <span class="text-gradient-brand">меняют утро</span></h1>
    <p class="lead">Pre-seed инвестиции в AI, мобильные сервисы и контент.</p>
    <div class="actions">
      <a href="#" class="btn btn-default btn-lg">Подать заявку</a>
      <a href="#" class="btn btn-outline hero-btn-teal btn-lg">Посмотреть кейсы</a>
    </div>
  </div>
  <div class="scroll-indicator"><span>scroll</span><span>↓</span></div>
</section>
```

**CSS:**
```css
.full-hero {
  position: relative; min-height: 90vh;
  display: flex; align-items: center;
  padding: 6rem 0;
  overflow: hidden;
}
.full-hero .container { position: relative; z-index: 2; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.full-hero h1 { font-size: var(--font-hero); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.full-hero .lead { margin-top: 1.5rem; font-size: 1.25rem; color: var(--text-secondary); max-width: 42rem; line-height: 1.7; }
.full-hero .actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-stagger > * { opacity: 0; transform: translateY(20px); animation: heroFadeIn .8s ease forwards; }
.hero-stagger > *:nth-child(1) { animation-delay: .1s; }
.hero-stagger > *:nth-child(2) { animation-delay: .3s; }
.hero-stagger > *:nth-child(3) { animation-delay: .5s; }
.hero-stagger > *:nth-child(4) { animation-delay: .7s; }
@keyframes heroFadeIn { to { opacity: 1; transform: translateY(0); } }

.scroll-indicator {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  z-index: 2; color: var(--text-secondary); font-size: .875rem;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .6; }
  50%     { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
```

---

## 13. Page Hero (компактный)

**HTML:**
```html
<section class="page-hero">
  <div class="container">
    <h1>О компании</h1>
    <p class="subtitle">Венчурная команда с 25-летней историей</p>
    <p class="description">Помогаем стартапам пройти путь от прототипа до 100k+ пользователей.</p>
    <div class="actions">
      <a href="#" class="btn btn-default">Команда</a>
      <a href="#" class="btn btn-outline">Портфель</a>
    </div>
  </div>
</section>
```

**CSS:**
```css
.page-hero { padding: 4rem 0; }
@media (min-width: 768px) { .page-hero { padding: 6rem 0; } }
.page-hero .container { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.page-hero h1 { font-size: var(--font-h1); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.page-hero .subtitle    { margin-top: 1rem; font-size: clamp(1.125rem, 1.5vw, 1.5rem); color: var(--text-secondary); }
.page-hero .description { margin-top: 1.5rem; font-size: 1.125rem; color: var(--text-secondary); line-height: 1.7; max-width: 42rem; }
.page-hero .actions     { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
```

---

## 14. Stats Strip

**HTML:**
```html
<dl class="stats-strip">
  <div class="stat-item">
    <dt class="text-gradient-aurora">25+</dt>
    <dd>лет на рынке</dd>
  </div>
  <div class="stat-item">
    <dt class="text-gradient-aurora">120+</dt>
    <dd>проектов в портфеле</dd>
  </div>
  <div class="stat-item">
    <dt class="text-gradient-aurora">€500M</dt>
    <dd>оценка экзитов</dd>
  </div>
  <div class="stat-item">
    <dt class="text-gradient-aurora">700+</dt>
    <dd>сотрудников</dd>
  </div>
  <div class="stat-item">
    <dt class="text-gradient-aurora">13</dt>
    <dd>дочерних компаний</dd>
  </div>
</dl>
```

**CSS:**
```css
.stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) { .stats-strip { grid-template-columns: repeat(5, 1fr); } }
.stat-item dt { font-size: var(--font-number); font-weight: 700; line-height: 1; }
.stat-item dd { margin-top: .75rem; font-size: .875rem; color: var(--text-secondary); }
.stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,.08); padding-left: 1rem; }
@media (max-width: 767px) { .stat-item + .stat-item { border-left: none; padding-left: 0; } }
```

---

## 15. Promo Block (CTA)

**HTML:**
```html
<div class="promo-block bg-conversations">
  <h3>Битва AI-агентов · регистрация открыта</h3>
  <p>Закрытое мероприятие для команд, работающих с агентскими системами.</p>
  <div class="actions">
    <a href="#" class="btn btn-on-color">Зарегистрироваться</a>
    <a href="#" class="btn btn-outline btn-on-color-outline">Программа</a>
  </div>
</div>
```

**CSS:**
```css
.promo-block {
  border-radius: 1rem;
  padding: 2rem;
  color: white;
}
@media (min-width: 768px) { .promo-block { padding: 2.5rem; } }
.promo-block h3 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 700; margin-bottom: .75rem; line-height: 1.2; }
.promo-block p  { color: rgba(255,255,255,.8); margin-bottom: 1.5rem; max-width: 42rem; }
.promo-block .actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Кнопки на цветном фоне */
.btn-on-color { background: white; color: black; }
.btn-on-color:hover { background: rgba(255,255,255,.9); }
.btn-on-color-outline { background: transparent; color: white; border-color: white; }
.btn-on-color-outline:hover { background: rgba(255,255,255,.1); }
```

> Заменить `bg-conversations` на любой другой gradient: `bg-gradient-stats` (мятно-бирюзовый) или `bg-gradient-magenta` (розово-коралловый).

---

## 16. Site Header (sticky)

**HTML:**
```html
<header class="site-header">
  <div class="container">
    <div class="logo">
      <span class="text-gradient-brand">Brand</span>
    </div>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Команда</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </div>
</header>
```

**CSS:**
```css
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 16, 38, .85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.site-header .logo { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.site-header nav ul { display: flex; gap: 1.5rem; list-style: none; align-items: center; }
.site-header nav a { color: var(--text-secondary); font-weight: 500; font-size: .9375rem; }
.site-header nav a:hover { color: var(--text-primary); }
@media (max-width: 768px) { .site-header nav ul { display: none; } /* добавить мобильное меню */ }
```

---

## 17. Site Footer

**HTML:**
```html
<footer class="site-footer">
  <div class="container">
    <div class="columns">
      <div>
        <h4>Компания</h4>
        <ul><li><a href="#">О нас</a></li><li><a href="#">Команда</a></li></ul>
      </div>
      <div>
        <h4>Продукты</h4>
        <ul><li><a href="#">Портфель</a></li><li><a href="#">Кейсы</a></li></ul>
      </div>
      <div>
        <h4>Ресурсы</h4>
        <ul><li><a href="#">Блог</a></li><li><a href="#">События</a></li></ul>
      </div>
    </div>
    <div class="bottom">
      <span>© 2026 Brand</span>
      <span><a href="#">Политика конфиденциальности</a></span>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.site-footer {
  background: var(--bg-night);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
  color: var(--text-secondary);
}
.site-footer .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.site-footer h4 { color: var(--text-primary); font-weight: 600; font-size: .9375rem; margin-bottom: .75rem; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .375rem; font-size: .875rem; }
.site-footer .bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: .8125rem; color: var(--text-muted);
}
```

---

## 18. Текст-цитата с акцент-бордером

**HTML:**
```html
<blockquote class="border-l-brand" style="font-style: italic; color: var(--text-secondary); max-width: 42rem;">
  «Если задача того стоит — она того стоит, чтобы вложиться в основу.»
</blockquote>

<blockquote class="border-l-aurora" style="font-style: italic; color: var(--text-secondary); max-width: 42rem;">
  «Мы не строим — мы соединяем то, что уже работает.»
</blockquote>
```

> Стили `.border-l-brand` / `.border-l-aurora` — в блоке №2.

---

## 19. JS: scroll reveal

> Никаких зависимостей. IntersectionObserver. Уважает `prefers-reduced-motion`.

**HTML:**
```html
<div class="reveal">Скроллируй до меня — появлюсь с fade-in</div>
```

**CSS:**
```css
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
```

**JS:**
```js
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add('visible');
        io.unobserve(e.target);
      }
    });
  }, { threshold: 0.15 });
  document.querySelectorAll('.reveal').forEach(el => io.observe(el));
} else {
  document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));
}
```

---

## Приложение A. Checklist для импорта в новый проект

- [ ] Скопирован блок №1 (`:root` токены)
- [ ] Скопирован блок №2 (utility classes)
- [ ] Базовые `body { background: var(--bg-deep); color: var(--text-primary); }` применены
- [ ] Шрифт-стек определён (system-ui по умолчанию, при наличии — `--font-display` / `--font-body`)
- [ ] Скроллбар + selection стилизованы (внутри блока №1)
- [ ] `prefers-reduced-motion` уважается (внутри блока №2)
- [ ] Каждая страница включает хотя бы один из: `.bg-gradient-section` / `.bg-gradient-hero` / star field
- [ ] Hero на главной использует `.hero-stagger` или `.reveal`
- [ ] Все CTA — на класс `.btn` (не `<a>` без классов)
- [ ] Контраст текста проверен (WCAG AA минимум для `.text-secondary`/`.text-muted` на основном фоне)
- [ ] Mobile-проверка: `.aurora-glow` без анимации, `.star-field-bright` скрыт на ≤768px
- [ ] Все блоки прошли визуальную проверку на 320 / 768 / 1280 / 1920px

---

## Приложение B. Адаптация под другие проекты (re-skinning)

Чтобы получить «новую тему», но сохранить структуру:

1. **Изменить только палитру** в блоке №1 (`--bg-deep`, `--aurora-*`, `--dawn-*`).
2. **Не трогать** имена классов (`.glass-card`, `.btn`, `.text-gradient-*`) — они отвязаны от значений.
3. Аккуратно: `.text-gradient-*` зашиты на конкретные пары переменных — переопределить либо переменные, либо сами классы.
4. Если нужен **light theme** — добавить `[data-theme="light"]` селектор и переопределить токены внутри.

Пример light-варианта:
```css
[data-theme="light"] {
  --bg-deep:        #FFFFFF;
  --bg-night:       #F5F7FA;
  --bg-twilight:    #E8EDF5;
  --text-primary:   #0B1026;
  --text-secondary: #4A5568;
  --text-muted:     #8898B5;
  --glass-bg:       rgba(0, 0, 0, 0.03);
  --glass-border:   rgba(0, 0, 0, 0.06);
  --primary-foreground: #FFFFFF;
}
```

---

## Приложение C. Известные ограничения

- `backdrop-filter` не работает в старых браузерах (≤ IE11, древние Android). Падение — обычный полупрозрачный фон без размытия.
- `box-shadow`-звёзды быстры, но фиксированы по координатам — на сверх-широких мониторах (>1920px) могут «уходить» за пределы. Решение: добавить координаты или использовать `repeat-y`.
- `text-gradient` у крупных заголовков на iOS Safari < 16 иногда «обрезается» снизу — при необходимости добавить `padding-bottom: .15em`.
- `<details>`-аккордеон без анимации раскрытия (только `<details>` под `interpolate-size: allow-keywords` это умеет, но поддержка пока ограничена) — если нужна — добавить JS.

---

**Версия:** 1.0 · 2026-05-14
**Источник дизайна:** [ifree-site/src/app/globals.css](ifree-site/src/app/globals.css)
**Витрина:** [ui-kit.html](ui-kit.html) (открыть двойным кликом)