Files
portal/web/v8/v8_landing.html
T
Дмитрий 887abf444e rebrand(v8.5→Лидерра): дизайн-handoff Платона v8 Forest + Лидпоток→Лидерра
Получен handoff-пакет liderra_v8_handoff/ от дизайнера Платона
(kpd9363@gmail.com) от 07.05.2026 — v8 Forest. Заказчик 08.05 решил
применить только в части дизайна, имени, логотипа. Функционал, состав
страниц и правила (CTO-11, click-wrap, SSO break-glass, 14 статусов
воронки) — без изменений (источник — ТЗ v8.5/schema v8.5).

Что сделано:

- Массовая замена Лидпоток→Лидерра (с учётом падежей: Лидерры/Лидерре)
  в 33 файлах (449 вхождений) — все .md/.sql/.json/.toml/.yml/.txt/.html,
  кроме исторических упоминаний внутри liderra_v8_handoff/
- Удалён docs/brandbook.md v1.1 — заменён на BRANDBOOK_v2.md из handoff
- Скопированы 13 концептов liderra_v8_handoff/concepts/v8_*.html в
  web/v8/. Удалены старые web/01-login.html, 02-dashboard.html,
  03-deals.html, index.html (палитра v1.1 deprecated)
- CLAUDE.md v1.0→v1.1: §0 (BRANDBOOK_v2 + DEVELOPER_HANDOFF в источниках),
  §2 (палитра Forest, Inter+JBM, Lucide), §5 п.6 (anti-pattern Inter
  снят — в Forest Inter наш основной шрифт), §6 (13 концептов в web/v8/)
- Реестр Открытые_вопросы_v8_3.md v1.12→v1.13: добавлена запись о
  ребрендинге + 4 точечных расхождений handoff vs ТЗ (статусы воронки,
  click-wrap чекбоксы, SSO fallback, axe violations)
- package.json/package-lock.json: name lidpotok→liderra

4 расхождения handoff vs ТЗ (НЕ применены, источник истины — ТЗ/schema):

1. 14 «обобщённых» статусов в BRANDBOOK_v2 §3.6 ≠ 14 slug'ов в
   schema.sql:2076 (совпадает 2 из 14: «Переговоры», «Оплачено»).
   Источник — schema/ТЗ §6.4 (реселлерская модель из аудита crm.bp-gr.ru,
   6 системных + 8 настраиваемых статусов).
2. 3-й click-wrap в v8_login.html («маркетинг-опционально») ≠ ТЗ §1.5/§4.1
   («согласие на ПДн», обязательное, OPEN-Ж-3).
3. SSO в v8_admin.html («локальный 2FA fallback») ≠ ТЗ OPEN-И-13
   (break-glass super_admin, локальный 2FA выключен).
4. Заявление «axe-core 4.10.2 — 0 violations» в README handoff — локально
   Pa11y 9.1.1 + axe нашёл 81 violation на 10/13 HTML (преимущественно
   color-contrast на декоративных separator'ах с --ink-disabled).
   Чисто: settings/errors/palette_options.

Что НЕ включено в коммит:
- лендинг/TZ_landing_v1_0.md — untracked, не моя работа в этой сессии
- .tmp/ — gitignored

Что осталось (для следующих сессий):
- Возможное переименование GitHub-репо CoralMinister/lidpotok → liderra
  (отдельное решение заказчика)
- Опционально: обратная связь Платону по 4 расхождениям handoff vs ТЗ

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 07:11:58 +03:00

607 lines
47 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>v8 · Лендинг — Лидерра</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root {
--bg:#F6F3EC; --surface:#FFFDFA; --sunken:#F0EDE4;
--hairline:#D9D5CD; --hairline-soft:#E8E3D6;
--ink:#081319; --ink-2:#343C41; --ink-3:#66635C; --ink-disabled:#92907B;
--accent:#0F6E56; --accent-tint:#E1EEEA; --accent-deep:#084635;
--side-bg:#012019; --side-icon-act:#32C8A9;
--st-quote:#008A4D; --st-paid:#007EB8; --st-call:#9A6700; --st-new:#B94837;
--r-sm:6px; --r-md:10px; --r-lg:14px;
--font-ui:'Inter',system-ui,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
}
body { background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-feature-settings:'cv11','ss01'; -webkit-font-smoothing:antialiased; font-variation-settings:'opsz' 14; min-height:100vh; }
button { font-family:inherit; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible {
outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm);
}
/* Review-only switcher */
.review-bar { position:sticky; top:0; z-index:100; background:var(--side-bg); padding:10px 16px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #1A3A30; flex-wrap:wrap; }
.review-bar .label { font-size:11px; font-weight:600; letter-spacing:0.06em; color:#7A8C87; font-family:var(--font-mono); }
.review-bar .tabs { display:flex; gap:2px; flex-wrap:wrap; }
.review-bar .tab { height:26px; padding:0 12px; border:none; background:transparent; color:#B1C2BD; font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; border-radius:4px; }
.review-bar .tab:hover { background:#0A2A22; color:#fff; }
.review-bar .tab.active { background:#fff; color:#012019; }
.tab-page { display:none; }
.tab-page.active { display:block; }
/* Public site nav */
.public-nav {
background:var(--bg);
border-bottom: 1px solid var(--hairline);
padding: 14px 32px;
display: flex; align-items: center; gap: 32px;
position: sticky; top: 47px; z-index: 50;
}
.public-nav .brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--ink); font-variation-settings:'opsz' 18; }
.public-nav .brand .mark { width:22px; height:22px; border-radius:5px; background:var(--ink); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.public-nav .brand .mark svg { width:100%; height:100%; }
.public-nav .brand .dot { color:var(--accent); }
.public-nav nav { display:flex; gap:24px; flex:1; }
.public-nav nav a { font-size:13px; color:var(--ink-2); font-weight:500; letter-spacing:-0.005em; }
.public-nav nav a:hover { color:var(--ink); }
.public-nav .actions { display:flex; gap:8px; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 16px; border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--surface); font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; font-family:inherit; letter-spacing:-0.005em; }
.btn:hover { border-color:var(--ink-disabled); background:var(--sunken); }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-deep); border-color:var(--accent-deep); }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-ghost:hover { background:var(--sunken); border-color:transparent; }
.btn svg { width:13px; height:13px; stroke-width:1.7; }
.btn-lg { height:46px; padding:0 22px; font-size:14px; }
/* HERO */
.hero {
padding: 80px 32px 64px;
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px;
align-items: center;
}
.hero-eyebrow {
display:inline-flex; align-items:center; gap:8px;
padding: 4px 11px;
background:var(--accent-tint);
color:var(--accent-deep);
font-size: 11.5px;
font-weight: 600;
border-radius: 100px;
font-family: var(--font-mono);
letter-spacing: 0.04em;
margin-bottom: 18px;
}
.hero-eyebrow .dot { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.hero h1 {
font-size: 56px;
font-weight: 600;
font-variation-settings:'opsz' 32;
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0 0 18px;
}
.hero h1 em { color: var(--accent); font-style: normal; }
.hero .lede {
font-size: 16px;
color: var(--ink-2);
line-height: 1.55;
margin: 0 0 28px;
max-width: 480px;
letter-spacing: -0.005em;
}
.hero .cta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero .trust {
display: flex; gap: 14px; align-items: center;
margin-top: 30px;
font-size: 12px;
color: var(--ink-3);
}
.hero .trust .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.hero-illust {
background: var(--side-bg);
border-radius: var(--r-lg);
padding: 28px;
position: relative;
overflow: hidden;
min-height: 360px;
}
.hero-illust::before {
content:'';
position:absolute; inset:0;
background-image:
radial-gradient(circle at 80% 20%, rgba(50,200,169,0.08) 0%, transparent 40%),
radial-gradient(circle at 20% 80%, rgba(15,110,86,0.10) 0%, transparent 40%);
pointer-events:none;
}
.hero-illust > * { position: relative; }
.hi-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--r-md);
padding: 14px 16px;
margin-bottom: 10px;
color: #fff;
}
.hi-card .label { font-size: 11px; color: #7A8C87; font-weight: 500; letter-spacing: -0.005em; }
.hi-card .val { font-family: var(--font-mono); font-feature-settings:'tnum'; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-top: 6px; }
.hi-card .val .ru { font-size: 14px; color: #B1C2BD; margin-left: 4px; font-weight: 400; }
.hi-card .delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--side-icon-act); margin-top: 8px; }
.hi-card.balance { border-color: var(--accent); background: rgba(50,200,169,0.08); }
.hi-runway {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 10px;
}
.hi-runway span { height:5px; border-radius:1px; background: rgba(255,255,255,0.10); }
.hi-runway span.f { background: var(--side-icon-act); }
.hi-foot { font-size: 10.5px; color: #B1C2BD; font-family: var(--font-mono); margin-top: 8px; letter-spacing: -0.005em; }
.hi-foot strong { color: var(--side-icon-act); font-weight: 600; }
/* Features */
.features { background: var(--surface); border-top: 1px solid var(--hairline); padding: 64px 32px; }
.features-inner { max-width: 1280px; margin: 0 auto; }
.section-h { text-align: center; margin-bottom: 48px; }
.section-h .label { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.06em; color:var(--accent); margin-bottom:12px; }
.section-h h2 { font-size:36px; font-weight:600; font-variation-settings:'opsz' 28; letter-spacing:-0.024em; line-height:1.1; margin:0 0 12px; }
.section-h h2 em { color: var(--accent); font-style:normal; }
.section-h .lede { font-size:14.5px; color:var(--ink-2); line-height:1.55; max-width:640px; margin:0 auto; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat-card { background: var(--bg); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: 24px 22px; }
.feat-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feat-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.feat-card h3 { font-size: 16px; font-weight: 600; font-variation-settings:'opsz' 18; letter-spacing:-0.012em; margin: 0 0 8px; line-height:1.3; }
.feat-card p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; letter-spacing:-0.005em; }
.feat-card .feat-stat { font-family:var(--font-mono); font-feature-settings:'tnum'; font-size:11.5px; color:var(--accent); font-weight:600; margin-top:14px; }
/* Pricing */
.pricing { padding: 64px 32px; max-width: 1280px; margin: 0 auto; }
.tariffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tariff {
background: var(--surface);
border: 1px solid var(--hairline);
border-radius: var(--r-md);
padding: 24px 22px;
display: flex; flex-direction: column;
position: relative;
}
.tariff.popular { border-color: var(--accent); }
.tariff.popular::before {
content: 'POPULAR'; position: absolute; top: -10px; left: 22px;
font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
background: var(--accent); color: #fff;
padding: 3px 9px; border-radius: 100px;
}
.tariff h3 { font-size: 18px; font-weight: 600; font-variation-settings:'opsz' 20; letter-spacing:-0.012em; margin: 0 0 4px; }
.tariff .desc { font-size: 12px; color: var(--ink-3); margin: 0 0 14px; line-height: 1.45; min-height: 34px; }
.tariff .price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; }
.tariff .price .num { font-family: var(--font-mono); font-feature-settings:'tnum'; font-size: 36px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.tariff .price .ru { font-size: 13px; color: var(--ink-3); font-family: var(--font-mono); }
.tariff ul { margin: 0 0 18px; padding: 0; list-style: none; flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.tariff ul li { display: flex; gap: 8px; line-height: 1.4; letter-spacing:-0.005em; }
.tariff ul li svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; margin-top: 3px; stroke-width: 2.4; }
.tariff ul li.muted { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-disabled); }
.tariff ul li.muted svg { color: var(--ink-3); opacity: 0.5; }
.tariff-cta { width:100%; justify-content: center; }
/* FAQ */
.faq-section { background: var(--surface); border-top: 1px solid var(--hairline); padding: 64px 32px; }
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--hairline); padding: 18px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; letter-spacing:-0.005em; }
.faq-q svg { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }
.faq-a { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-top: 10px; max-width: 700px; letter-spacing:-0.005em; }
.faq-item.closed .faq-a { display: none; }
/* Footer */
footer { background: var(--side-bg); color: #B1C2BD; padding: 48px 32px 28px; }
.footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; color:#fff; margin-bottom:14px; }
.foot-brand .mark { width:24px; height:24px; border-radius:5px; background:#fff; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.foot-brand .mark svg { width:100%; height:100%; }
.foot-brand .dot { color:var(--side-icon-act); }
.foot-tagline { font-size:13px; color:#7A8C87; line-height:1.5; max-width:300px; letter-spacing:-0.005em; }
.foot-col h4 { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.08em; color:#7A8C87; margin: 0 0 14px; text-transform:uppercase; }
.foot-col a { display: block; font-size: 13px; color: #B1C2BD; padding: 4px 0; letter-spacing:-0.005em; }
.foot-col a:hover { color: #fff; }
.foot-bottom {
max-width: 1280px; margin: 0 auto; padding-top: 28px; margin-top: 32px;
border-top: 1px solid #1A3A30;
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
font-size: 11.5px; color: #7A8C87;
}
/* Legal pages */
.legal {
max-width: 800px;
margin: 0 auto;
padding: 64px 32px 80px;
}
.legal h1 { font-size: 32px; font-weight: 600; font-variation-settings:'opsz' 28; letter-spacing:-0.022em; margin: 0 0 8px; line-height:1.15; }
.legal .updated { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-bottom: 32px; letter-spacing:-0.005em; }
.legal h2 { font-size: 18px; font-weight: 600; font-variation-settings:'opsz' 20; letter-spacing:-0.012em; margin: 32px 0 10px; line-height:1.3; }
.legal h2 .num { color: var(--accent); font-family: var(--font-mono); font-size: 14px; margin-right: 8px; font-weight: 600; }
.legal p, .legal li { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0 0 10px; letter-spacing:-0.005em; }
.legal ul { padding-left: 20px; margin: 0 0 16px; }
.legal ul li { margin-bottom: 6px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal .toc { padding: 16px 20px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); margin-bottom: 32px; }
.legal .toc-title { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 8px; text-transform: uppercase; }
.legal .toc ol { padding-left: 18px; margin: 0; columns: 2; column-gap: 20px; font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 1100px) {
.hero { grid-template-columns: 1fr; gap: 32px; padding: 56px 24px; }
.hero h1 { font-size: 42px; }
.feat-grid { grid-template-columns: 1fr 1fr; }
.tariffs { grid-template-columns: 1fr 1fr; }
.footer-inner { grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; }
.public-nav { padding: 12px 18px; gap: 18px; }
.public-nav nav { gap: 14px; }
}
@media (max-width: 768px) {
.public-nav nav { display: none; }
.hero h1 { font-size: 32px; }
.features, .faq-section, .pricing, .legal { padding-left: 18px; padding-right: 18px; }
.features, .faq-section { padding-top: 48px; padding-bottom: 48px; }
.feat-grid { grid-template-columns: 1fr; }
.tariffs { grid-template-columns: 1fr; }
.footer-inner { grid-template-columns: 1fr; }
.legal .toc ol { columns: 1; }
}
</style>
</head>
<body>
<nav class="review-bar" aria-label="Состояние страницы (только для review)">
<span class="label">PREVIEW · LANDING</span>
<div class="tabs" role="tablist">
<button type="button" class="tab active" data-tab="home" role="tab" aria-selected="true">Главная</button>
<button type="button" class="tab" data-tab="pricing" role="tab" aria-selected="false">Тарифы</button>
<button type="button" class="tab" data-tab="offer" role="tab" aria-selected="false">Оферта</button>
<button type="button" class="tab" data-tab="privacy" role="tab" aria-selected="false">Политика</button>
</div>
</nav>
<!-- ===== HOME ===== -->
<div id="page-home" class="tab-page active">
<header class="public-nav">
<a href="#" class="brand"><span class="mark"><svg viewBox="0 0 48 48"><path d="M16 14 L16 34 L32 34" stroke="#fff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg></span>Лидерра<span class="dot">.</span></a>
<nav><a href="#">Возможности</a><a href="#" data-go="pricing">Тарифы</a><a href="#">База знаний</a><a href="#">Контакты</a></nav>
<div class="actions">
<a href="/login" class="btn btn-ghost">Войти</a>
<a href="/register" class="btn btn-primary">Начать бесплатно →</a>
</div>
</header>
<section class="hero">
<div>
<span class="hero-eyebrow"><span class="dot"></span>Lorem ipsum · pre-launch</span>
<h1>Поток лидов <em>под контролем</em>.<br>Без потерь и переплаты.</h1>
<p class="lede">Pay-per-lead CRM для команд, которые покупают трафик и считают каждый рубль. Канбан с DnD, real-time webhook, 14-статусная воронка, прозрачная биллинг-история. <em>Lorem ipsum dolor sit amet</em>, consectetur adipiscing elit.</p>
<div class="cta-row">
<a href="/register" class="btn btn-primary btn-lg">
Начать бесплатно
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="#" class="btn btn-lg">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
Демо · 4 минуты
</a>
</div>
<div class="trust">
<span style="display:inline-flex;align-items:center;gap:6px"><span class="dot"></span>2FA на всех тарифах</span>
<span style="display:inline-flex;align-items:center;gap:6px"><span class="dot"></span>152-ФЗ compliant</span>
<span style="display:inline-flex;align-items:center;gap:6px"><span class="dot"></span>14-дневный trial</span>
</div>
</div>
<aside class="hero-illust" aria-label="Превью дашборда">
<div class="hi-card balance">
<div class="label">Баланс кошелька</div>
<div class="val">14 250<span class="ru"></span></div>
<div class="hi-runway"><span class="f"></span><span class="f"></span><span class="f"></span><span class="f"></span><span></span><span></span><span></span></div>
<div class="hi-foot">≈ 285 лидов · хватит на <strong>4 дня</strong></div>
</div>
<div class="hi-card">
<div class="label">Получено лидов · 7 дней</div>
<div class="val">247</div>
<div class="delta">↑ 12.3%</div>
</div>
<div class="hi-card">
<div class="label">Конверсия в оплату</div>
<div class="val">18.4<span class="ru">%</span></div>
<div class="delta">↑ 2.1pp</div>
</div>
</aside>
</section>
<section class="features">
<div class="features-inner">
<header class="section-h">
<div class="label">ЧТО ОТЛИЧАЕТ ЛИДЕРРУ</div>
<h2>Не просто <em>CRM</em>. Инструмент для арбитражной модели.</h2>
<p class="lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
</header>
<div class="feat-grid">
<article class="feat-card">
<div class="feat-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M21 2L13 10M16 2h5v5"/><path d="M21 13v5a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg></div>
<h3>Outbound webhook</h3>
<p>Получите лиды в свою систему за секунды через REST + HMAC-SHA256 подпись. Не нужно поллить — мы пушим.</p>
<div class="feat-stat">99.97% uptime · 142ms latency</div>
</article>
<article class="feat-card">
<div class="feat-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="6" height="18"/><rect x="11" y="3" width="6" height="12"/><rect x="19" y="3" width="2" height="8"/></svg></div>
<h3>Канбан с DnD</h3>
<p>14 статусов воронки, optimistic UI с откатом, виртуализация для сотен карточек. Менеджер двигает лиды, а не таблицу.</p>
<div class="feat-stat">+38% продуктивность менеджера</div>
</article>
<article class="feat-card">
<div class="feat-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div>
<h3>Real-time push</h3>
<p>Браузер + email-уведомления о новых лидах, напоминаниях, изменениях статуса. Тихие часы, чтобы не будить ночью.</p>
<div class="feat-stat">Push медиана 2.4 секунды</div>
</article>
<article class="feat-card">
<div class="feat-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>
<h3>Настраиваемый дашборд</h3>
<p>Сами выбираете, что важно: KPI, графики активности, баланс с прогнозом «на сколько хватит лидов». Drag-and-drop виджеты.</p>
<div class="feat-stat">8 виджетов в каталоге</div>
</article>
<article class="feat-card">
<div class="feat-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="1"/><path d="M3 10h18M7 15h3"/></svg></div>
<h3>Прозрачный биллинг</h3>
<p>Видите каждое списание, причину, стоимость. ЮKassa + банк перевод. УПД и счета в 1С 8.3 XML формате — для бухгалтерии.</p>
<div class="feat-stat">Pending-платежи самовосстанавливаются за 30 мин</div>
</article>
<article class="feat-card">
<div class="feat-icon"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
<h3>Безопасность из коробки</h3>
<p>2FA на всех тарифах, RLS на каждом запросе, hash в storage, click-wrap при регистрации. 152-ФЗ. Удаление по запросу.</p>
<div class="feat-stat">Audit log на каждое действие</div>
</article>
</div>
</div>
</section>
<section class="pricing" aria-labelledby="pricing-h">
<header class="section-h">
<div class="label">ТАРИФЫ</div>
<h2 id="pricing-h">Платите за <em>лиды</em>, не за seats.</h2>
<p class="lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit. На MVP цена тарифа — 1.00 ₽ для пилота.</p>
</header>
<div class="tariffs">
<article class="tariff">
<h3>Start</h3>
<p class="desc">Знакомство. Один проект, один менеджер.</p>
<div class="price"><span class="num">0</span><span class="ru">₽/мес</span></div>
<ul>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>1 проект</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>1 менеджер</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 50 лидов / мес</li>
<li class="muted"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Канбан · только просмотр</li>
</ul>
<a href="/register" class="btn tariff-cta">Бесплатно →</a>
</article>
<article class="tariff">
<h3>Basic</h3>
<p class="desc">Малая команда, регулярные продажи.</p>
<div class="price"><span class="num">490</span><span class="ru">₽/мес</span></div>
<ul>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 3 проектов</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 2 менеджеров</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Канбан с DnD</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Email-уведомления</li>
</ul>
<a href="/register" class="btn tariff-cta">Выбрать →</a>
</article>
<article class="tariff popular">
<h3>Команда</h3>
<p class="desc">Производственная команда с потоком лидов.</p>
<div class="price"><span class="num">990</span><span class="ru">₽/мес</span></div>
<ul>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 10 проектов</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 4 менеджеров</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Webhook + REST API</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Real-time push</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Telegram-бот команды</li>
</ul>
<a href="/register" class="btn btn-primary tariff-cta">Выбрать →</a>
</article>
<article class="tariff">
<h3>Enterprise</h3>
<p class="desc">Сетевые операторы, индивидуальный SLA.</p>
<div class="price"><span class="num">9 990</span><span class="ru">₽/мес</span></div>
<ul>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Неогранич. проектов</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 50 менеджеров</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>SSO Yandex 360</li>
<li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Dedicated менеджер 24/7</li>
</ul>
<a href="#" class="btn tariff-cta">Связаться →</a>
</article>
</div>
</section>
<section class="faq-section" aria-labelledby="faq-h">
<header class="section-h">
<div class="label">FAQ</div>
<h2 id="faq-h">Частые <em>вопросы</em></h2>
</header>
<div class="faq-list">
<details class="faq-item" open>
<summary class="faq-q">Что такое pay-per-lead и почему так дешевле?<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></summary>
<div class="faq-a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Платите только за валидные лиды (прошли проверку), не за seats и не за минуты в системе.</div>
</details>
<details class="faq-item">
<summary class="faq-q">Как считается стоимость лида?<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></summary>
<div class="faq-a">Lorem ipsum dolor sit amet. Цена зависит от проекта (вертикали) и фиксируется в момент покупки. Все возвраты по дубликатам / спаму — бесплатны и автоматически.</div>
</details>
<details class="faq-item">
<summary class="faq-q">Можно ли подключить amoCRM или Bitrix24?<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></summary>
<div class="faq-a">amoCRM — да, прямой коннектор появится в спринте 1415. Bitrix24/RetailCRM — Post-MVP. Уже сейчас можно использовать REST API + outbound webhook для любой системы.</div>
</details>
<details class="faq-item">
<summary class="faq-q">Что делать, если лид окажется недозвоном или дубликатом?<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></summary>
<div class="faq-a">Дубликат и спам — автоматический возврат на баланс. Недозвон фиксируется как отдельный статус, оператор может оспорить через интерфейс или ticket в течение 7 дней.</div>
</details>
<details class="faq-item">
<summary class="faq-q">Где хранятся данные?<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg></summary>
<div class="faq-a">Yandex Cloud (РФ), 152-ФЗ, RLS на каждом запросе, бэкапы каждые 6 часов. Удаление аккаунта удаляет все данные безвозвратно (по запросу пользователя).</div>
</details>
</div>
</section>
<footer>
<div class="footer-inner">
<div>
<div class="foot-brand"><span class="mark"><svg viewBox="0 0 48 48"><path d="M16 14 L16 34 L32 34" stroke="#012019" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg></span>Лидерра<span class="dot">.</span></div>
<div class="foot-tagline">Поток лидов под контролем. Pay-per-lead CRM для команд, считающих каждый рубль.</div>
</div>
<div class="foot-col">
<h4>Продукт</h4>
<a href="#">Возможности</a>
<a href="#" data-go="pricing">Тарифы</a>
<a href="#">Демо</a>
<a href="#">Roadmap</a>
</div>
<div class="foot-col">
<h4>Документация</h4>
<a href="#">REST API</a>
<a href="#">Webhook</a>
<a href="#">База знаний</a>
<a href="#">Status</a>
</div>
<div class="foot-col">
<h4>Юридическое</h4>
<a href="#" data-go="offer">Оферта</a>
<a href="#" data-go="privacy">Политика конфиденциальности</a>
<a href="#">Реквизиты</a>
<a href="mailto:support@liderra.app">Поддержка</a>
</div>
</div>
<div class="foot-bottom">
<span>© 2026 Лидерра · ИП Сидоров А.А. · ОГРНИП 322000000000000</span>
<span>support@liderra.app · +7 495 000-00-00</span>
</div>
</footer>
</div>
<!-- ===== PRICING (alone) ===== -->
<div id="page-pricing" class="tab-page">
<header class="public-nav">
<a href="#" class="brand"><span class="mark"><svg viewBox="0 0 48 48"><path d="M16 14 L16 34 L32 34" stroke="#fff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg></span>Лидерра<span class="dot">.</span></a>
<nav><a href="#" data-go="home">Главная</a><a href="#">Возможности</a><a href="#">База знаний</a><a href="#">Контакты</a></nav>
<div class="actions"><a href="/login" class="btn btn-ghost">Войти</a><a href="/register" class="btn btn-primary">Начать →</a></div>
</header>
<section class="pricing">
<header class="section-h">
<div class="label">ТАРИФЫ</div>
<h2>Простой <em>биллинг</em>. Без сюрпризов.</h2>
<p class="lede">Lorem ipsum. На MVP все тарифы стоят 1.00 ₽ для пилотного периода.</p>
</header>
<div class="tariffs">
<article class="tariff"><h3>Start</h3><p class="desc">Знакомство. Один проект, один менеджер.</p><div class="price"><span class="num">0</span><span class="ru">₽/мес</span></div><ul><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>1 проект</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>1 менеджер</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 50 лидов / мес</li><li class="muted"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Канбан · только просмотр</li></ul><a href="/register" class="btn tariff-cta">Бесплатно →</a></article>
<article class="tariff"><h3>Basic</h3><p class="desc">Малая команда.</p><div class="price"><span class="num">490</span><span class="ru">₽/мес</span></div><ul><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 3 проектов</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 2 менеджеров</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Канбан с DnD</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Email-уведомления</li></ul><a href="/register" class="btn tariff-cta">Выбрать →</a></article>
<article class="tariff popular"><h3>Команда</h3><p class="desc">Производственная команда.</p><div class="price"><span class="num">990</span><span class="ru">₽/мес</span></div><ul><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 10 проектов</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 4 менеджеров</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Webhook + REST API</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Real-time push</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Telegram-бот команды</li></ul><a href="/register" class="btn btn-primary tariff-cta">Выбрать →</a></article>
<article class="tariff"><h3>Enterprise</h3><p class="desc">Сетевые операторы, SLA.</p><div class="price"><span class="num">9 990</span><span class="ru">₽/мес</span></div><ul><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Неогранич. проектов</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>До 50 менеджеров</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>SSO Yandex 360</li><li><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>Dedicated 24/7</li></ul><a href="#" class="btn tariff-cta">Связаться →</a></article>
</div>
</section>
</div>
<!-- ===== OFFER ===== -->
<div id="page-offer" class="tab-page">
<header class="public-nav">
<a href="#" class="brand"><span class="mark"><svg viewBox="0 0 48 48"><path d="M16 14 L16 34 L32 34" stroke="#fff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg></span>Лидерра<span class="dot">.</span></a>
<nav><a href="#" data-go="home">Главная</a><a href="#" data-go="pricing">Тарифы</a><a href="#" data-go="privacy">Политика</a></nav>
<div class="actions"><a href="/login" class="btn btn-ghost">Войти</a></div>
</header>
<main class="legal">
<h1>Договор-оферта</h1>
<div class="updated">Действует с 01.05.2026 · версия 1.0</div>
<div class="toc"><div class="toc-title">Содержание</div><ol><li>Термины</li><li>Предмет договора</li><li>Регистрация и аккаунт</li><li>Стоимость и порядок оплаты</li><li>Возврат денежных средств</li><li>Права и обязанности сторон</li><li>Ответственность</li><li>Конфиденциальность</li><li>Срок действия</li><li>Заключительные положения</li></ol></div>
<h2><span class="num">1.</span>Термины</h2>
<p>В настоящем Договоре используются следующие термины: <strong>«Оператор»</strong> — ИП Сидоров А.А., <strong>«Клиент»</strong> — юридическое или физическое лицо, акцептовавшее настоящую Оферту, <strong>«Сервис»</strong> — программно-аппаратный комплекс «Лидерра», доступный по адресу liderra.app.</p>
<h2><span class="num">2.</span>Предмет договора</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Оператор предоставляет Клиенту неисключительное право использования Сервиса на условиях SaaS на возмездной основе.</p>
<h2><span class="num">3.</span>Регистрация и аккаунт</h2>
<p>Клиент регистрируется через сайт liderra.app, указывая работающий email, пароль и подтверждая 3 click-wrap чекбокса: <strong>принятие оферты</strong>, <strong>согласие на обработку ПДн</strong>, <strong>согласие на информационные сообщения</strong> (опционально).</p>
<p>Lorem ipsum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2><span class="num">4.</span>Стоимость и порядок оплаты</h2>
<p>Минимальное пополнение баланса — <strong>100 ₽</strong>. При конвертации ₽ → лиды округление производится <strong>вниз</strong> (Б-3, Б-4 регламент). Оператор оставляет за собой право изменять тарифы с уведомлением Клиента за 30 дней.</p>
<h2><span class="num">5.</span>Возврат денежных средств</h2>
<p>Стоимость лидов, признанных <strong>дубликатами</strong> или <strong>спамом</strong> по результатам автоматической проверки, возвращается на баланс Клиента в течение 24 часов. Возврат остатка кошелька осуществляется по письменному запросу в течение 30 рабочих дней.</p>
<h2><span class="num">6.</span>Права и обязанности сторон</h2>
<ul><li>Оператор обязуется обеспечивать доступность Сервиса не менее 99.5% времени в месяц.</li><li>Клиент обязуется использовать Сервис в законных целях, не передавать доступ третьим лицам.</li><li>Оператор имеет право приостановить доступ при нарушении условий или просрочке платежа более 7 дней.</li></ul>
<h2><span class="num">7.</span>Ответственность</h2>
<p>Lorem ipsum dolor sit amet. Стороны несут ответственность в соответствии с действующим законодательством Российской Федерации. Размер ответственности Оператора ограничен суммой оплаченных Клиентом услуг за последние 3 месяца.</p>
<h2><span class="num">8.</span>Конфиденциальность</h2>
<p>Подробная информация об обработке персональных данных изложена в <a href="#" data-go="privacy" style="color:var(--accent);font-weight:500">Политике конфиденциальности</a>.</p>
<p style="margin-top:32px;font-size:12px;color:var(--ink-3)">⚠ Это шаблонный документ для MVP. Финальный текст будет уточнён юристами после регистрации ООО (Б-1).</p>
</main>
</div>
<!-- ===== PRIVACY ===== -->
<div id="page-privacy" class="tab-page">
<header class="public-nav">
<a href="#" class="brand"><span class="mark"><svg viewBox="0 0 48 48"><path d="M16 14 L16 34 L32 34" stroke="#fff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg></span>Лидерра<span class="dot">.</span></a>
<nav><a href="#" data-go="home">Главная</a><a href="#" data-go="pricing">Тарифы</a><a href="#" data-go="offer">Оферта</a></nav>
<div class="actions"><a href="/login" class="btn btn-ghost">Войти</a></div>
</header>
<main class="legal">
<h1>Политика конфиденциальности</h1>
<div class="updated">Действует с 01.05.2026 · 152-ФЗ compliant · версия 1.0</div>
<div class="toc"><div class="toc-title">Содержание</div><ol><li>Кто мы</li><li>Какие данные собираем</li><li>Зачем собираем</li><li>Как храним и защищаем</li><li>Кому передаём</li><li>Cookie и трекинг</li><li>Ваши права</li><li>Удаление данных</li><li>Изменения политики</li><li>Контакты</li></ol></div>
<h2><span class="num">1.</span>Кто мы</h2>
<p>Оператор персональных данных — <strong>ИП Сидоров А.А.</strong>, ОГРНИП 322000000000000, регистрация в Реестре операторов ПДн Роскомнадзора № 22-25-001234. Email для запросов: <a href="mailto:dpo@liderra.app" style="color:var(--accent);font-weight:500">dpo@liderra.app</a>.</p>
<h2><span class="num">2.</span>Какие данные собираем</h2>
<ul><li><strong>От Клиента:</strong> email, пароль (в виде хеша), имя, телефон, реквизиты юр. лица для счетов</li><li><strong>От Лидов:</strong> имя, телефон, email, источник трафика, UTM-метки, адрес объекта (если применимо)</li><li><strong>Технические:</strong> IP-адрес, user-agent, время посещения, маршрут по сайту</li></ul>
<h2><span class="num">3.</span>Зачем собираем</h2>
<p>Lorem ipsum dolor sit amet. Только для целей оказания услуг согласно <a href="#" data-go="offer" style="color:var(--accent);font-weight:500">Оферте</a>: обработка лидов, биллинг, безопасность, поддержка. Никаких маркетинговых рассылок без отдельного согласия.</p>
<h2><span class="num">4.</span>Как храним и защищаем</h2>
<p>Хранение — в Yandex Cloud, регион РФ. Шифрование at-rest и in-transit. Row-Level Security на каждом запросе — данные одного тенанта изолированы от другого. Бэкапы каждые 6 часов, retention 90 дней.</p>
<h2><span class="num">5.</span>Кому передаём</h2>
<p>Платёжные данные — оператору ЮKassa (ООО НКО «ЮMoney», ИНН 7750005725). Email-рассылки — SMTP-провайдеру. Никаких других третьих сторон.</p>
<h2><span class="num">6.</span>Cookie и трекинг</h2>
<p>Используем только необходимые куки (auth, CSRF-токен, preferences). Аналитика — Яндекс.Метрика (агрегированно). Маркетинговые трекеры не используются.</p>
<h2><span class="num">7.</span>Ваши права</h2>
<ul><li>Запросить копию ваших данных в машиночитаемом формате</li><li>Исправить неточные данные</li><li>Удалить аккаунт и все связанные данные (необратимо)</li><li>Отозвать согласие на обработку (приведёт к закрытию аккаунта)</li></ul>
<h2><span class="num">8.</span>Удаление данных</h2>
<p>В личном кабинете → Настройки → Профиль → «Удалить мой аккаунт». Удаление инициируется немедленно, окончательно стирается через 30 дней (резервный период для ошибочных удалений).</p>
<h2><span class="num">9.</span>Изменения политики</h2>
<p>При существенных изменениях уведомляем по email и баннером в кабинете за 14 дней.</p>
<h2><span class="num">10.</span>Контакты</h2>
<p>По всем вопросам персональных данных: <a href="mailto:dpo@liderra.app" style="color:var(--accent);font-weight:500">dpo@liderra.app</a> · ответ в течение 7 рабочих дней. По общим вопросам: <a href="mailto:support@liderra.app" style="color:var(--accent);font-weight:500">support@liderra.app</a>.</p>
</main>
</div>
<script>
const tabs = Array.from(document.querySelectorAll('.review-bar .tab'));
const pages = Array.from(document.querySelectorAll('.tab-page'));
function setTab(id) {
tabs.forEach(t => {
const isA = t.dataset.tab === id;
t.classList.toggle('active', isA);
t.setAttribute('aria-selected', isA ? 'true' : 'false');
});
pages.forEach(p => p.classList.toggle('active', p.id === 'page-' + id));
window.scrollTo({ top: 0, behavior: 'instant' });
}
tabs.forEach(t => t.addEventListener('click', () => setTab(t.dataset.tab)));
document.querySelectorAll('[data-go]').forEach(a => {
a.addEventListener('click', e => { e.preventDefault(); setTab(a.dataset.go); });
});
</script>
</body>
</html>