Верстка адаптивного лендинга SaaS для финтеха по Figma с темной темой, i18n и анимациями

Исходная ситуация: у нас есть готовый дизайн в Figma для публичного лендинга B2B SaaS (финтех - управление лимитами и мониторинг транзакций). Сейчас на проде стоит старый лендинг на Bootstrap, он плохо проходит Lighthouse и не поддерживает темную тему и локализацию. Нужно сверстать новый лендинг по макету и подготовить его к интеграции в Next.js-приложение.

Техническая среда и вводные: дизайн в Figma (desktop 1440, tablet 768, mobile 375) с компонентами и автолэйаутами, шрифты Inter и JetBrains Mono. Сборка - Vite, Node 18+. Стили - SCSS modules или CSS modules (на выбор, но единообразно). В проекте уже настроены ESLint/Prettier, Stylelint, Husky. Нужна верстка без UI-фреймворков (без Bootstrap/Tailwind/MUI), допускается использование PostCSS и Autoprefixer. Иконки - SVG.

Что нужно сделать (этапы):
1) Разобрать макет, составить карту секций и состояний, согласовать список переиспользуемых компонентов (кнопки, карточки, табы, аккордеон, модальные окна, бейджи).
2) Сверстать страницу по макету с высокой точностью: hero с иллюстрацией (SVG), блоки преимуществ, кейсы, pricing с переключателем Billing monthly/annual, отзывы в карусели, FAQ, форма запроса демо, футер.
3) Реализовать темную тему: переключатель темы, корректные цвета/тени/границы, сохранение выбора в localStorage, уважать prefers-color-scheme.
4) Подготовить простую i18n-разметку: RU/EN, переключатель языка, структура словарей JSON, чтобы тексты можно было заменить без переписывания верстки.
5) Добавить микроанимации: плавные появления секций при скролле, hover/focus-состояния, переключения pricing и табов (без тяжёлых библиотек, допускается GSAP только при строгом обосновании).
6) Обеспечить доступность: семантика, корректный порядок табуляции, видимый focus, aria-атрибуты для интерактивных элементов, управление с клавиатуры (включая карусель и модальное окно).
7) Настроить оптимизацию ассетов: SVG спрайт или инлайнинг, responsive images, критические шрифты, чтобы страница была быстрой.

Конкретный результат: репозиторий или архив с готовым проектом Vite, где команда сможет перенести компоненты в Next.js без переписывания разметки. Важно, чтобы верстка была компонентной и читабельной.

Ограничения: нельзя использовать готовые UI-киты и генераторы; нельзя полагаться на скриншотную верстку; не допускаются layout shifts при загрузке шрифтов/изображений; поддержка последних версий Chrome/Firefox/Safari и iOS Safari.

Критерии приемки (измеримые):
- Pixel-perfect по ключевым брейкпоинтам 1440/768/375 с отклонением не более 4px по основным отступам и сетке.
- Lighthouse (mobile) не ниже: Performance 90, Accessibility 95, Best Practices 95, SEO 90 на чистой сборке.
- CLS <= 0.05, LCP <= 2.5s на типовом мобильном профиле Lighthouse.
- Все интерактивные элементы доступны с клавиатуры, focus-стили видимы, модальное окно имеет focus trap.
- Темная тема и язык сохраняются после перезагрузки.
- Код проходит линтеры без ошибок, сборка выполняется без предупреждений.

Материалы: ссылка на Figma и бренд-гайд дадим после старта. Контент (тексты/логотипы/скриншоты) предоставим, но верстка должна выдерживать разумные изменения длины текста (особенно для EN).