Index.html - master - IrinaVM/key

Index.html
1 167 строк81 KB
IrinaVM
Create: Index.html
07 авг 2026, 10:32
07 авг 2026, 10:32f41c8e5
<!--
================================================================================
  ТЕХНИЧЕСКОЕ ЗАДАНИЕ (ТЗ) — лендинг «НУТРИЦИОЛОГия»
  Версия 1.2 · single-page · фронтенд-прототип (HTML + CSS + vanilla JS)
================================================================================

0. ПРЕДЫСТОРИЯ / КОНТЕКСТ ПРОЕКТА
   Заказчица — практикующий нутрициолог Ирина. Изначально прошла курс
   нутрициологии «для себя», чтобы наладить собственное питание; получив
   результат и системные знания, решила делиться ими с другими.
   Сайт — её персональный бренд-лендинг: тёплый, экспертный, без агрессии
   «диет-индустрии». Основатель бренда — Ирина.

1. ЦЕЛИ САЙТА
   1.1. Представить специалиста и её подход (доверие, личная история).
   1.2. Дать полезный интерактив — калькулятор КБЖУ (лид-магнит).
   1.3. Продать услуги: клиент может ОФОРМИТЬ ЗАКАЗ прямо на странице
        (форма заявки с валидацией и подтверждением).
   1.4. При оформлении заказа — СМС на телефон специалиста
        +7 (926) 905-18-38 (см. п.6.5).

2. ЦЕЛЕВАЯ АУДИТОРИЯ
   Женщины и мужчины 22–45 лет, которые хотят питаться осознанно,
   похудеть/набрать/поддержать вес без жёстких диет; ценят науку,
   эстетику и индивидуальный подход.

3. ТРЕБОВАНИЯ К ШАПКЕ (HEADER / МАСТХЕД)
   3.1. Название бренда «НУТРИЦИОЛОГия» — КРУПНО и красиво:
        • в sticky-навигации — компактный логотип-вордмарк;
        • в hero-мастхеде — гигантский акцидентный логотип.
        Стилизация: «НУТРИЦИОЛОГ» (тяжёлый гротеск) + «ия»
        (курсивный акцент другого цвета/гарнитуры).
   3.2. Навигация-якоря: Обо мне · Услуги · Расчёт КБЖУ · Отзывы · Контакты.
   3.3. CTA в шапке: «Рассчитать КБЖУ» (открывает калькулятор) и «Записаться».
   3.4. Шапка прозрачная поверх hero, при скролле — плотная с тенью.

4. HERO (первый экран)
   4.1. Слева: eyebrow-метка, гигантский вордмарк, заголовок-обещание,
        лид-текст с предысторией, две кнопки (КБЖУ + Оформить заказ),
        строка со статистикой (count-up).
   4.2. Справа: фото специалиста (v1.2) — девушка приятной внешности,
        фигура 90-60-90, лёгкий макияж, СВЕТЛЫЕ волосы, стрижка каре
        до плеч; в светлой кухне.
   4.3. Кликабельный чип «Расчёт КБЖУ» размещён СЛЕВА ВНИЗУ фотографии
        и НЕ перекрывает лицо.
   4.4. «Кликабельное расчёт КБЖУ» — несколько точек входа
        (hero-кнопка, чип на фото, nav, тизер).

5. ФУНКЦИОНАЛ: КАЛЬКУЛЯТОР КБЖУ (модальное окно)
   5.1. Открывается по клику из hero / nav / чипа на фото / тизер-секции.
   5.2. Поля: пол, возраст, рост (см), вес (кг), активность (5 градаций),
        цель (похудение / поддержание / набор).
   5.3. Формула: Миффлина–Сан Жеора.
        Муж:  BMR = 10·вес + 6.25·рост − 5·возраст + 5
        Жен:  BMR = 10·вес + 6.25·рост − 5·возраст − 161
        TDEE  = BMR · коэф. активности (1.2 / 1.375 / 1.55 / 1.725 / 1.9)
        Цель: похудение ·0.80 · поддержание ·1.00 · набор ·1.15
   5.4. Макронутриенты: белок = вес·(2.0/1.7/1.9), жиры = вес·(0.9/1.0/1.0),
        углеводы = остаток калорий; граммы + % от калорийности + шкалы;
        бонусом — норма воды (вес·30 мл).
   5.5. Пересчёт в реальном времени, плавная анимация числа и шкал.
   5.6. Кнопка «Получить план под эти цифры» → закрывает калькулятор,
        проставляет цель в форме заказа и скроллит к ней.

6. ФУНКЦИОНАЛ: ОФОРМЛЕНИЕ ЗАКАЗА (секция #order)
   6.1. Поля: Имя*, Контакт (телефон или Telegram)*, E-mail (опц.),
        Услуга* (select, синхронизирован с карточками услуг), Цель (чипы),
        Комментарий.
   6.2. Карточки услуг кнопкой «Выбрать» проставляют услугу в форме,
        обновляют ценник и подсвечивают секцию заказа.
   6.3. Валидация с inline-ошибками; при успехе — карточка-подтверждение
        с именем, услугой и стоимостью + кнопка «оформить ещё одну заявку».
   6.4. ЦЕНЫ (снижены в 10 раз): 350 / 590 / 1 290 / 3 200 / 1 850 ₽.
   6.5. СМС ПРИ ЗАКАЗЕ: после успешной отправки формы показывается кнопка
        «Отправить СМС с заказом» — открывается штатное приложение
        «Сообщения» клиента с ГОТОВЫМ текстом заказа, адресованным на телефон
        специалиста +7 (926) 905-18-38 (разделитель sms:-URI подбирается по
        платформе iOS/Android). Клиенту остаётся нажать «Отправить».
        Примечание: полностью автоматическая отправка без участия клиента
        требует backend + SMS-шлюза (вне scope статического прототипа).

7. ПРОЧИЕ СЕКЦИИ
   7.1. Бегущая строка преимуществ (marquee).
   7.2. «Обо мне / История» — фото блюда + предыстория + вехи; подпись «— Ирина».
   7.3. Полноширинная band-секция «Философия» с цитатой (фон — фото продуктов,
        размыт под оверлеем).
   7.4. Услуги — асимметричная bento-сетка с ценами.
   7.5. Тизер «Узнай свои цифры» с большой кнопкой калькулятора.
   7.6. Отзывы — автопрокручиваемая лента.
   7.7. Подвал: контакты (+7 (926) 905-18-38, @nutriciology), соцсети,
        дисклеймер, копирайт.

8. ДИЗАЙН-СИСТЕМА
   8.1. Палитра: бумага #f3efe4 · хвойный ink #10231a · лист #2c7a4c ·
        электрик-лайм #c6e84a · маригold #e7a23c · текст #16241c.
   8.2. Типографика (fontsource, Cyrillic): Unbounded (вордмарк),
        Playfair Display italic (акценты), Manrope (UI/текст),
        JetBrains Mono (метки).
   8.3. Движение: scroll-reveal, count-up, hover-lift, блобы, зерно-оверлей,
        прогресс-бар скролла, кнопка «наверх».
   8.4. Адаптивность: mobile-first, брейкпоинты 1024 / 860 / 620; гамбургер.
   8.5. Доступность: focus-visible, aria, prefers-reduced-motion;
        при отключённом JS контент видим.

9. СТЕК И ОГРАНИЧЕНИЯ
   Один файл index.html (embedded CSS/JS), без сборщика и UI-библиотек.
   Изображения — сгенерированы (портрет со светлыми волосами, блюдо,
   flat-lay продуктов).

10. КРИТЕРИИ ПРИЁМКИ
   • Вордмарк крупный в шапке и hero; фото специалиста справа (светлые
     волосы, каре до плеч).
   • Чип «Расчёт КБЖУ» НЕ закрывает лицо (размещён слева внизу фото).
   • Основатель — Ирина.
   • Цены: 350 / 590 / 1 290 / 3 200 / 1 850 ₽.
   • Телефон везде: +7 (926) 905-18-38.
   • Калькулятор считает корректно в реальном времени.
   • Форма валидируется, показывает подтверждение и кнопку отправки СМС
     с готовым текстом заказа на +7 (926) 905-18-38.
   • Адаптивность, без горизонтального скролла, без ошибок в консоли.
================================================================================
-->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="НУТРИЦИОЛОГия — персональный нутрициолог Ирина. Расчёт КБЖУ, индивидуальные планы питания, сопровождение. Без диет и запретов — только наука и вкус.">
<title>НУТРИЦИОЛОГия · персональный нутрициолог Ирина</title>

<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<!-- Manrope (UI / body) -->
<link href="https://cdn.jsdelivr.net/fontsource/css/manrope@latest/cyrillic-400-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/manrope@latest/cyrillic-500-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/manrope@latest/cyrillic-600-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/manrope@latest/cyrillic-700-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/manrope@latest/cyrillic-800-normal.css" rel="stylesheet">
<!-- Unbounded (wordmark / display) -->
<link href="https://cdn.jsdelivr.net/fontsource/css/unbounded@latest/cyrillic-600-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/unbounded@latest/cyrillic-700-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/unbounded@latest/cyrillic-800-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/unbounded@latest/cyrillic-900-normal.css" rel="stylesheet">
<!-- Playfair Display (italic accents / quotes) -->
<link href="https://cdn.jsdelivr.net/fontsource/css/playfair-display@latest/cyrillic-500-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/playfair-display@latest/cyrillic-600-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/playfair-display@latest/cyrillic-500-italic.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/playfair-display@latest/cyrillic-600-italic.css" rel="stylesheet">
<!-- JetBrains Mono (eyebrow labels) -->
<link href="https://cdn.jsdelivr.net/fontsource/css/jetbrains-mono@latest/cyrillic-500-normal.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/fontsource/css/jetbrains-mono@latest/cyrillic-700-normal.css" rel="stylesheet">

<style>
:root{
  --paper:#f3efe4; --paper2:#ece5d4; --paper3:#e3dccb;
  --ink:#10231a; --ink2:#163324; --ink3:#1d3d2c;
  --leaf:#2c7a4c; --leaf-d:#1f5e39; --leaf-l:#3f9463;
  --lime:#c6e84a; --lime-d:#a9cc2e;
  --gold:#e7a23c;
  --txt:#16241c; --muted:#56655a; --faint:#7c8a7f;
  --line:rgba(16,35,26,.12); --line2:rgba(16,35,26,.2);
  --white:#fffdf7;
  --disp:'Unbounded','Manrope',system-ui,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --body:'Manrope',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:18px; --r2:26px; --r3:38px;
  --sh:0 24px 60px -28px rgba(16,35,26,.5);
  --sh2:0 10px 30px -16px rgba(16,35,26,.4);
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--txt);background:var(--paper);
  font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--leaf);outline-offset:3px;border-radius:4px}

/* ambient grain + glows */
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 50% at 88% 8%, rgba(198,232,74,.20), transparent 60%),
    radial-gradient(50% 45% at 6% 30%, rgba(44,122,76,.14), transparent 60%),
    radial-gradient(70% 60% at 50% 108%, rgba(231,162,60,.10), transparent 60%)}
body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:3}
.eyebrow{font:700 11px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--leaf);
  display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--leaf);border-radius:2px}
.eyebrow.lt{color:var(--lime)}.eyebrow.lt::before{background:var(--lime)}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:500}

/* scroll progress */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--leaf),var(--lime));box-shadow:0 0 12px rgba(198,232,74,.6)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .35s ease}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 24px;max-width:var(--maxw);margin:0 auto;transition:padding .35s ease}
header.scrolled{background:rgba(243,239,228,.82);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line);box-shadow:0 8px 30px -22px rgba(16,35,26,.5)}
header.scrolled .bar{padding:11px 24px}
.brand{font:800 22px/1 var(--disp);letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:baseline;white-space:nowrap}
.brand .tail{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--leaf);font-size:.92em;margin-left:1px}
header.scrolled .brand{font-size:20px}
nav.menu{display:flex;align-items:center;gap:4px}
nav.menu a{font:600 14px var(--body);color:var(--ink2);padding:9px 13px;border-radius:10px;transition:all .2s;position:relative}
nav.menu a:hover{color:var(--leaf);background:rgba(44,122,76,.08)}
.head-cta{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 14px var(--body);
  padding:13px 22px;border-radius:999px;transition:transform .2s ease,box-shadow .25s ease,background .2s,color .2s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(16,35,26,.7);background:var(--leaf-d)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(166,204,46,.8)}
.btn-ghost{border:1.5px solid var(--line2);color:var(--ink);background:rgba(255,253,247,.5)}
.btn-ghost:hover{border-color:var(--leaf);color:var(--leaf);transform:translateY(-2px)}
.btn-sm{padding:10px 16px;font-size:13px}
.burger{display:none;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line2);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;background:rgba(255,253,247,.6)}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:138px 0 70px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.masthead{font:900 clamp(2.7rem,7vw,5.6rem)/.92 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:18px 0 4px}
.masthead .tail{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--leaf);letter-spacing:0}
.masthead .dot{color:var(--gold)}
.hero h1{font:800 clamp(1.4rem,2.6vw,2.15rem)/1.18 var(--body);color:var(--ink2);margin:14px 0 0;max-width:14ch;letter-spacing:-.01em}
.hero h1 .serif-i{color:var(--leaf);font-weight:600}
.lead{font-size:1.06rem;color:var(--muted);max-width:46ch;margin:20px 0 0;line-height:1.7}
.lead b{color:var(--ink);font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.stats{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap}
.stat .num{font:800 2rem/1 var(--disp);color:var(--ink);letter-spacing:-.02em}
.stat .num .u{color:var(--leaf);font-size:.7em;margin-left:2px}
.stat .lbl{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:7px}

/* hero photo */
.photo-wrap{position:relative}
.photo-frame{position:relative;border-radius:var(--r3);overflow:hidden;aspect-ratio:4/5;
  box-shadow:var(--sh);border:1px solid rgba(255,253,247,.6);background:var(--paper2)}
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.photo-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(16,35,26,.28));pointer-events:none}
.ring-deco{position:absolute;inset:-26px -30px auto auto;width:170px;height:170px;border-radius:50%;
  border:2px dashed rgba(44,122,76,.4);z-index:-1;animation:spin 26s linear infinite}
.blob-deco{position:absolute;left:-46px;bottom:-30px;width:160px;height:160px;border-radius:46% 54% 60% 40%/50% 44% 56% 50%;
  background:var(--lime);z-index:-1;opacity:.85;filter:blur(2px);animation:morph 12s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes morph{50%{border-radius:60% 40% 44% 56%/42% 58% 42% 58%;transform:translate(8px,-6px) rotate(8deg)}}

.chip{position:absolute;display:flex;align-items:center;gap:10px;background:var(--white);border-radius:16px;
  padding:12px 15px;box-shadow:var(--sh2);border:1px solid var(--line);z-index:4;backdrop-filter:blur(6px)}
/* чип КБЖУ: слева внизу, лицо НЕ перекрыто */
.chip-calc{left:-22px;bottom:112px;top:auto;cursor:pointer;transition:transform .25s ease,box-shadow .25s}
.chip-calc:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 36px -16px rgba(16,35,26,.5)}
.chip-calc .ic{width:38px;height:38px;border-radius:11px;background:var(--lime);display:grid;place-items:center;color:var(--ink);flex:none}
.chip-calc .ic svg{width:20px;height:20px}
.chip-calc .t1{font:800 13.5px var(--body);color:var(--ink);line-height:1.1}
.chip-calc .t2{font:600 10px var(--mono);letter-spacing:.12em;color:var(--leaf);text-transform:uppercase;margin-top:3px}
.chip-rate{right:-14px;bottom:34px}
.chip-rate .stars{color:var(--gold);font-size:13px;letter-spacing:1px}
.chip-rate .rt{font:700 12px var(--body);color:var(--ink);margin-top:2px}
.chip-on{right:18px;top:18px;background:rgba(16,35,26,.78);color:var(--paper);border:0}
.chip-on .pulse{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(198,232,74,.7);animation:pulse 1.8s infinite}
.chip-on span{font:600 11px var(--mono);letter-spacing:.14em}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(198,232,74,0)}100%{box-shadow:0 0 0 0 rgba(198,232,74,0)}}

/* ---------- marquee ---------- */
.marq{background:var(--ink);color:var(--paper);padding:18px 0;overflow:hidden;border-block:1px solid rgba(255,253,247,.08);position:relative;z-index:3}
.marq-track{display:flex;gap:46px;width:max-content;animation:scrollx 32s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-item{display:flex;align-items:center;gap:14px;font:700 15px var(--body);letter-spacing:.01em;white-space:nowrap;color:rgba(243,239,228,.92)}
.marq-item .sep{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- section base ---------- */
section{position:relative;z-index:3}
.sec{padding:104px 0}
.sec-head{max-width:680px;margin-bottom:50px}
.sec-head h2{font:800 clamp(1.9rem,4vw,3rem)/1.04 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:16px 0 0}
.sec-head h2 .serif-i{color:var(--leaf)}
.sec-head p{color:var(--muted);font-size:1.05rem;margin:16px 0 0;max-width:54ch}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.about-photo{position:relative;border-radius:var(--r2);overflow:hidden;aspect-ratio:5/5;box-shadow:var(--sh)}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-tag{position:absolute;left:18px;bottom:18px;background:var(--white);border-radius:14px;padding:12px 16px;box-shadow:var(--sh2)}
.about-tag b{font:800 22px var(--disp);color:var(--leaf)}
.about-tag span{display:block;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.about-text h2{font:800 clamp(1.8rem,3.6vw,2.7rem)/1.06 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:14px 0 0}
.about-text h2 .serif-i{color:var(--leaf)}
.about-text p{color:var(--muted);margin:18px 0 0;font-size:1.04rem;line-height:1.75}
.about-text p .hl{color:var(--ink);font-weight:700}
.milestones{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ms{display:flex;align-items:center;gap:9px;background:var(--paper2);border:1px solid var(--line);border-radius:999px;padding:9px 15px;font:600 13px var(--body);color:var(--ink2)}
.ms .d{width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.sign{margin-top:28px;display:flex;align-items:center;gap:14px}
.sign .nm{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--ink)}
.sign .rl{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- philosophy band ---------- */
.band{position:relative;padding:120px 0;overflow:hidden;color:var(--paper)}
.band-bg{position:absolute;inset:0;z-index:0}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:left center;filter:blur(3px) saturate(1.1);transform:scale(1.08)}
.band-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(16,35,26,.93) 8%,rgba(16,35,26,.78) 45%,rgba(31,94,57,.62) 100%)}
.band .wrap{z-index:2}
.band blockquote{margin:0;max-width:18ch;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.12;letter-spacing:-.01em}
.band blockquote .lime{color:var(--lime)}
.band .by{margin-top:26px;font:600 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(243,239,228,.7)}
.band-pills{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.band-pills span{border:1px solid rgba(243,239,228,.28);border-radius:999px;padding:9px 16px;font:600 13px var(--body);color:rgba(243,239,228,.92)}

/* ---------- services bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.svc{grid-column:span 3;background:var(--white);border:1px solid var(--line);border-radius:var(--r2);padding:30px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.svc::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--leaf);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--line2)}
.svc:hover::before{transform:scaleX(1)}
.svc.wide{grid-column:span 4}
.svc.narrow{grid-column:span 2}
.svc.dark{background:var(--ink);color:var(--paper);border-color:transparent}
.svc.dark::before{background:var(--lime)}
.svc.dark .svc-desc{color:rgba(243,239,228,.7)}
.svc.dark .svc-price{color:var(--paper)}
.svc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.svc-tag{font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--leaf);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.svc.dark .svc-tag{color:var(--lime);border-color:rgba(243,239,228,.22)}
.svc-num{font:800 13px var(--mono);color:var(--faint)}
.svc h3{font:800 1.35rem/1.15 var(--disp);letter-spacing:-.01em;margin:2px 0 0}
.svc-desc{color:var(--muted);font-size:.97rem;line-height:1.6;margin:0;flex:1}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.svc-price{font:800 1.5rem var(--disp);color:var(--ink);letter-spacing:-.02em}
.svc-price small{font:600 11px var(--mono);color:var(--faint);letter-spacing:.1em;font-weight:500}
.pick{font:700 13px var(--body);padding:11px 18px;border-radius:999px;border:1.5px solid var(--line2);color:var(--ink);transition:.2s;display:inline-flex;align-items:center;gap:7px}
.pick:hover{background:var(--lime);border-color:var(--lime);transform:translateY(-2px)}
.svc.dark .pick{border-color:rgba(243,239,228,.3);color:var(--paper)}
.svc.dark .pick:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}

/* ---------- calc teaser ---------- */
.teaser{background:var(--ink);color:var(--paper);border-radius:var(--r3);padding:64px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.teaser::before{content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,232,74,.22),transparent 70%)}
.teaser::after{content:'';position:absolute;left:-60px;bottom:-100px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(44,122,76,.4),transparent 70%)}
.teaser h2{font:800 clamp(1.8rem,3.6vw,2.8rem)/1.05 var(--disp);letter-spacing:-.02em;margin:14px 0 0;position:relative}
.teaser h2 .serif-i{color:var(--lime)}
.teaser p{color:rgba(243,239,228,.72);margin:16px 0 0;max-width:42ch;position:relative}
.teaser .right{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.teaser .big-calc{display:flex;align-items:center;gap:16px;background:rgba(243,239,228,.06);border:1px solid rgba(243,239,228,.16);
  border-radius:20px;padding:20px 24px;width:100%}
.teaser .big-calc .ic{width:54px;height:54px;border-radius:15px;background:var(--lime);display:grid;place-items:center;color:var(--ink);flex:none}
.teaser .big-calc .ic svg{width:28px;height:28px}
.teaser .big-calc .tx b{font:800 16px var(--body);display:block}
.teaser .big-calc .tx span{font:600 12px var(--mono);letter-spacing:.1em;color:rgba(243,239,228,.6)}

/* ---------- testimonials ---------- */
.tmarq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tmarq-track{display:flex;gap:20px;width:max-content;animation:scrollx2 46s linear infinite}
.tmarq:hover .tmarq-track{animation-play-state:paused}
@keyframes scrollx2{to{transform:translateX(-50%)}}
.tcard{width:360px;flex:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r2);padding:26px;display:flex;flex-direction:column;gap:14px}
.tcard .q{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.5;color:var(--ink2)}
.tcard .q::before{content:'“';font-size:2.4rem;color:var(--lime-d);line-height:0;vertical-align:-.4em;margin-right:2px}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tcard .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:800 15px var(--body);color:var(--white);flex:none}
.tcard .who b{font:700 14px var(--body);color:var(--ink);display:block}
.tcard .who span{font:600 11px var(--mono);letter-spacing:.1em;color:var(--faint)}
.tcard .st{color:var(--gold);font-size:13px;letter-spacing:1px}

/* ---------- order ---------- */
.order-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start}
.order-aside h2{font:800 clamp(1.9rem,3.8vw,2.9rem)/1.05 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:14px 0 0}
.order-aside h2 .serif-i{color:var(--leaf)}
.order-aside p{color:var(--muted);margin:16px 0 0;font-size:1.03rem;line-height:1.7}
.guar{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:13px}
.guar li{display:flex;gap:12px;align-items:flex-start;font:500 15px var(--body);color:var(--ink2)}
.guar li .ck{width:24px;height:24px;border-radius:8px;background:var(--lime);display:grid;place-items:center;color:var(--ink);flex:none;margin-top:1px}
.guar li .ck svg{width:14px;height:14px}
.contact-mini{margin-top:30px;display:flex;flex-direction:column;gap:8px}
.contact-mini a{display:flex;align-items:center;gap:10px;font:600 15px var(--body);color:var(--ink);transition:.2s}
.contact-mini a:hover{color:var(--leaf);transform:translateX(3px)}
.contact-mini svg{width:18px;height:18px;color:var(--leaf)}

.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r2);padding:34px;box-shadow:var(--sh);position:relative}
.form-card.flash{animation:flash 1.1s ease}
@keyframes flash{0%,100%{box-shadow:var(--sh)}30%{box-shadow:0 0 0 4px rgba(198,232,74,.6),var(--sh)}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.field label{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{font:500 15px var(--body);color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;transition:border-color .2s,box-shadow .2s,background .2s;width:100%}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--leaf);background:var(--white);box-shadow:0 0 0 4px rgba(44,122,76,.12)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232c7a4c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.field.invalid input,.field.invalid select{border-color:#c0392b;background:#fdf2f0}
.err{font:600 12px var(--body);color:#c0392b;display:none}
.field.invalid .err{display:block}
.goals{display:flex;flex-wrap:wrap;gap:9px}
.goal{font:600 13px var(--body);padding:10px 16px;border-radius:999px;border:1.5px solid var(--line2);color:var(--ink2);transition:.2s}
.goal:hover{border-color:var(--leaf)}
.goal.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.price-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--paper2);
  border:1px dashed var(--line2);border-radius:14px;padding:16px 20px;margin:6px 0 18px}
.price-bar .pl{font:600 13px var(--body);color:var(--muted)}
.price-bar .pl b{color:var(--ink);font-weight:700;display:block;font-size:15px;margin-top:2px}
.price-bar .pv{font:800 1.7rem var(--disp);color:var(--leaf);letter-spacing:-.02em;white-space:nowrap}
.submit-btn{width:100%;padding:16px;font-size:15px}
.form-note{font:500 12px var(--body);color:var(--faint);text-align:center;margin-top:14px;line-height:1.5}

/* success state */
.success{display:none;text-align:center;padding:24px 10px;flex-direction:column;align-items:center;gap:14px}
.success.show{display:flex;animation:pop .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
.success .ok{width:74px;height:74px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:var(--ink)}
.success .ok svg{width:38px;height:38px}
.success h3{font:800 1.7rem var(--disp);color:var(--ink);margin:4px 0 0;letter-spacing:-.01em}
.success p{color:var(--muted);max-width:40ch;margin:0}
.success .sum{background:var(--paper2);border-radius:14px;padding:16px 22px;margin-top:6px;text-align:left;width:100%;max-width:380px}
.success .sum div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font:500 14px var(--body);border-bottom:1px solid var(--line)}
.success .sum div:last-child{border:0}
.success .sum b{color:var(--ink);font-weight:700;text-align:right}
.sms-note{font:500 12px var(--body);color:var(--faint);max-width:42ch;line-height:1.55;margin:2px 0 0}
.sms-note b{color:var(--ink)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:70px 0 30px;position:relative;z-index:3}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-brand .brand{color:var(--paper);font-size:30px}
.foot-brand .brand .tail{color:var(--lime)}
.foot-brand p{color:rgba(243,239,228,.6);margin:18px 0 0;max-width:34ch;font-size:.96rem}
.foot-col h4{font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin:0 0 16px}
.foot-col a,.foot-col p{display:block;color:rgba(243,239,228,.72);font:500 15px var(--body);padding:5px 0;transition:.2s}
.foot-col a:hover{color:var(--lime);transform:translateX(3px)}
.socials{display:flex;gap:10px;margin-top:6px}
.socials a{width:42px;height:42px;border-radius:12px;border:1px solid rgba(243,239,228,.18);display:grid;place-items:center;padding:0;transition:.2s}
.socials a:hover{background:var(--lime);border-color:var(--lime);color:var(--ink);transform:translateY(-3px)}
.socials svg{width:18px;height:18px}
.foot-bot{margin-top:50px;padding-top:24px;border-top:1px solid rgba(243,239,228,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.08em;color:rgba(243,239,228,.5)}
.disclaimer{color:rgba(243,239,228,.4);font-size:11px;max-width:60ch;line-height:1.6;margin-top:14px}

/* ---------- calc modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(8,18,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .3s}
@keyframes fade{from{opacity:0}}
.modal-box{position:relative;background:var(--paper);border-radius:var(--r2);width:min(940px,100%);max-height:92vh;overflow:auto;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:rise .4s cubic-bezier(.2,.9,.3,1);border:1px solid var(--line)}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.98)}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:28px 30px 0}
.modal-head h3{font:800 1.7rem var(--disp);letter-spacing:-.01em;color:var(--ink);margin:8px 0 0}
.modal-head h3 .serif-i{color:var(--leaf)}
.modal-close{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line2);display:grid;place-items:center;color:var(--ink);transition:.2s;flex:none}
.modal-close:hover{background:var(--ink);color:var(--paper);transform:rotate(90deg)}
.calc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:0;padding:24px 30px 30px}
.calc-inputs{padding-right:26px;border-right:1px solid var(--line)}
.calc-result{padding-left:26px}
.seg{display:flex;gap:8px}
.seg button{flex:1;padding:12px;border-radius:12px;border:1.5px solid var(--line2);font:700 14px var(--body);color:var(--ink2);transition:.2s;background:var(--white)}
.seg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cfield{margin-top:16px}
.cfield>label{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);display:block;margin-bottom:8px}
.range-wrap{display:flex;align-items:center;gap:14px}
.range-wrap input[type=number]{width:96px;text-align:center;font:700 16px var(--body);padding:11px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink)}
.range-wrap input[type=number]:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 4px rgba(44,122,76,.12)}
.range-wrap input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;background:var(--paper3)}
.range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--leaf);border:3px solid var(--white);box-shadow:0 2px 8px rgba(44,122,76,.5);cursor:pointer}
.range-wrap input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--leaf);border:3px solid var(--white);cursor:pointer}
.range-wrap .unit{font:600 12px var(--mono);color:var(--faint);width:24px}
.act-list{display:flex;flex-direction:column;gap:7px}
.act-list label{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:.2s;font:500 13.5px var(--body);color:var(--ink2)}
.act-list label:hover{border-color:var(--line2);background:var(--white)}
.act-list input{display:none}
.act-list label.on{border-color:var(--leaf);background:rgba(44,122,76,.07);color:var(--ink)}
.act-list .radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);flex:none;position:relative;transition:.2s}
.act-list label.on .radio{border-color:var(--leaf)}
.act-list label.on .radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--leaf)}

.res-kcal{background:var(--ink);color:var(--paper);border-radius:20px;padding:24px;text-align:center;position:relative;overflow:hidden}
.res-kcal::before{content:'';position:absolute;inset:auto -30px -50px auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(198,232,74,.25),transparent 70%)}
.res-kcal .lab{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.res-kcal .val{font:900 clamp(2.6rem,7vw,3.6rem)/1 var(--disp);color:var(--white);letter-spacing:-.02em;margin:6px 0 2px}
.res-kcal .val small{font-size:.34em;color:rgba(243,239,228,.6);font-weight:600;letter-spacing:.1em;margin-left:6px}
.res-kcal .sub{font:600 12px var(--body);color:rgba(243,239,228,.6)}
.macro-stack{height:12px;border-radius:8px;overflow:hidden;display:flex;margin:18px 0 4px;background:rgba(255,255,255,.1)}
.macro-stack i{height:100%;transition:width .6s cubic-bezier(.3,.9,.3,1)}
.macros{display:flex;flex-direction:column;gap:11px;margin-top:18px}
.macro{display:flex;align-items:center;gap:12px}
.macro .sw{width:11px;height:11px;border-radius:4px;flex:none}
.macro .nm{font:700 13px var(--body);color:var(--ink);width:96px}
.macro .bar{flex:1;height:7px;border-radius:5px;background:var(--paper3);overflow:hidden}
.macro .bar i{display:block;height:100%;border-radius:5px;transition:width .6s cubic-bezier(.3,.9,.3,1)}
.macro .gv{font:800 14px var(--mono);color:var(--ink);width:62px;text-align:right}
.macro .gv small{color:var(--faint);font-weight:500;font-size:10px}
.water{margin-top:18px;display:flex;align-items:center;gap:12px;background:var(--paper2);border-radius:14px;padding:13px 16px}
.water .ic{width:38px;height:38px;border-radius:11px;background:var(--white);display:grid;place-items:center;color:var(--leaf);flex:none}
.water .ic svg{width:20px;height:20px}
.water b{font:800 16px var(--disp);color:var(--ink)}
.water span{font:600 11px var(--mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.calc-cta{margin-top:18px;width:100%}

/* back to top */
#totop{position:fixed;right:22px;bottom:22px;z-index:40;width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;box-shadow:var(--sh2);opacity:0;transform:translateY(14px);pointer-events:none;transition:.3s}
#totop.show{opacity:1;transform:none;pointer-events:auto}
#totop:hover{background:var(--leaf);transform:translateY(-3px)}
#totop svg{width:20px;height:20px}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .photo-wrap{max-width:440px;margin:0 auto;width:100%}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-photo{max-width:480px}
  .teaser{grid-template-columns:1fr;padding:48px}
  .teaser .right{align-items:stretch}
  .order-grid{grid-template-columns:1fr;gap:36px}
  .calc-grid{grid-template-columns:1fr;gap:24px}
  .calc-inputs{padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:24px}
  .calc-result{padding-left:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:860px){
  nav.menu,.head-cta .btn{display:none}
  .burger{display:flex}
  nav.menu.open{display:flex;position:absolute;top:100%;left:12px;right:12px;flex-direction:column;align-items:stretch;
    background:var(--white);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--sh);gap:2px}
  nav.menu.open a{padding:13px 14px}
  nav.menu.open .btn{display:inline-flex;margin-top:6px}
  .bento{grid-template-columns:1fr}
  .svc,.svc.wide,.svc.narrow{grid-column:1/-1}
}
@media(max-width:620px){
  .wrap{padding:0 18px}
  .sec{padding:72px 0}
  .hero{padding:118px 0 50px}
  .form-row{grid-template-columns:1fr}
  .stats{gap:22px}
  .teaser{padding:34px 24px;border-radius:var(--r2)}
  .modal-head,.calc-grid{padding-left:20px;padding-right:20px}
  .chip-calc{left:-8px;bottom:96px}
  .chip-rate{right:-6px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bot{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
</style>
</head>
<body>

<div id="progress"></div>

<!-- ============ HEADER ============ -->
<header id="hdr">
  <div class="bar">
    <a href="#top" class="brand" aria-label="Нутрициология — на главную">НУТРИЦИОЛОГ<span class="tail">ия</span></a>
    <nav class="menu" id="menu">
      <a href="#about">Обо мне</a>
      <a href="#services">Услуги</a>
      <a href="#calc-teaser" data-calc>Расчёт КБЖУ</a>
      <a href="#reviews">Отзывы</a>
      <a href="#order">Контакты</a>
      <button class="btn btn-lime btn-sm" data-calc style="margin-top:0">Рассчитать КБЖУ</button>
    </nav>
    <div class="head-cta">
      <button class="btn btn-ghost btn-sm" data-calc>КБЖУ</button>
      <a href="#order" class="btn btn-primary btn-sm">Записаться</a>
      <button class="burger" id="burger" aria-label="Меню"><span></span><span></span><span></span></button>
    </div>
  </div>
</header>

<!-- ============ HERO ============ -->
<section class="hero" id="top">
  <div class="wrap">
    <div class="hero-grid">
      <div class="hero-left rv">
        <span class="eyebrow">Нутрициолог · персональный подход</span>
        <div class="masthead">НУТРИЦИОЛОГ<span class="tail">ия</span><span class="dot">.</span></div>
        <h1>Еда, которая <span class="serif-i">работает</span> на тебя — без диет и запретов.</h1>
        <p class="lead">Привет! Я прошла курс нутрициологии <b>сначала для себя</b> — чтобы разобраться с собственным самочувствием. Результат так вдохновил, что я решила <b>делиться этим с другими</b>: научно, вкусно и в твоём ритме жизни.</p>
        <div class="hero-cta">
          <button class="btn btn-lime" data-calc>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="3"/><path d="M8 6h8M8 10h2M12 10h4M8 14h2M12 14h4M8 18h2M12 18h4"/></svg>
            Рассчитать КБЖУ
          </button>
          <a href="#order" class="btn btn-ghost">Оформить заказ →</a>
        </div>
        <div class="stats">
          <div class="stat"><div class="num" data-count="4" data-suffix="+">0</div><div class="lbl">года практики</div></div>
          <div class="stat"><div class="num" data-count="600" data-suffix="+">0</div><div class="lbl">клиентов</div></div>
          <div class="stat"><div class="num" data-count="4.9" data-dec="1">0</div><div class="lbl">средний рейтинг</div></div>
        </div>
      </div>

      <div class="photo-wrap rv" style="--d:.12s">
        <div class="ring-deco"></div>
        <div class="blob-deco"></div>
        <div class="photo-frame">
          <img src="https://image.qwenlm.ai/public_source/ba85fb42-4d37-41fc-9007-e3b0b0ba6384/1acfd6abb-850b-4d0a-adc3-7d0646d2c82e.png" alt="Нутрициолог Ирина — девушка со светлыми волосами и стрижкой каре до плеч в светлой кухне" width="800" height="1000">
        </div>
        <!-- чип КБЖУ: слева внизу, лицо не перекрыто -->
        <button class="chip chip-calc" data-calc aria-label="Открыть калькулятор КБЖУ">
          <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></span>
          <span><span class="t1">Расчёт КБЖУ</span><span class="t2">за 30 секунд</span></span>
        </button>
        <div class="chip chip-on"><span class="pulse"></span><span>ОНЛАЙН</span></div>
        <div class="chip chip-rate">
          <span><span class="stars">★★★★★</span><span class="rt">4.9 · 600+ отзывов</span></span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ MARQUEE ============ -->
<div class="marq" aria-hidden="true">
  <div class="marq-track" id="marq1"></div>
</div>

<!-- ============ ABOUT ============ -->
<section class="sec" id="about">
  <div class="wrap">
    <div class="about-grid">
      <div class="about-photo rv">
        <img src="https://image.qwenlm.ai/public_source/ba85fb42-4d37-41fc-9007-e3b0b0ba6384/1b7fa98d0-d621-4b56-ba0e-56cca2a68ab8.png" alt="Сбалансированная тарелка: лосось, киноа, авокадо и овощи" width="900" height="900">
        <div class="about-tag"><b>80/20</b><span>правило гибкого рациона</span></div>
      </div>
      <div class="about-text rv" style="--d:.1s">
        <span class="eyebrow">Обо мне · история</span>
        <h2>Всё началось с <span class="serif-i">собственной</span> тарелки.</h2>
        <p>Несколько лет назад я устала от качелей «диета — срыв — вина» и пошла на курс нутрициологии <span class="hl">исключительно для себя</span>. Хотела просто понять, как еда влияет на энергию, сон и настроение.</p>
        <p>Но когда система сложилась — ушли тяга к сладкому, появились силы, нормализовался вес — знакомые начали просить помочь и им. Так личное хобби стало <span class="hl">профессией и миссией</span>: показывать, что здоровое питание — это не список запретов, а набор инструментов под твою жизнь.</p>
        <div class="milestones">
          <span class="ms"><span class="d"></span>Курс нутрициологии</span>
          <span class="ms"><span class="d"></span>Разбор анализов</span>
          <span class="ms"><span class="d"></span>Психология пищевого поведения</span>
          <span class="ms"><span class="d"></span>600+ клиентов</span>
        </div>
        <div class="sign">
          <span class="nm">— Ирина</span>
          <span class="rl">нутрициолог · основатель «НУТРИЦИОЛОГия»</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ PHILOSOPHY BAND ============ -->
<section class="band">
  <div class="band-bg"><img src="https://image.qwenlm.ai/public_source/ba85fb42-4d37-41fc-9007-e3b0b0ba6384/1fe261854-5ac5-45eb-a1fc-057e92399987.png" alt="" width="1200" height="800"></div>
  <div class="wrap">
    <blockquote class="rv">Питание — это не наказание, а <span class="lime">забота</span>, которая длится всю жизнь.</blockquote>
    <div class="by rv" style="--d:.1s">— философия подхода</div>
    <div class="band-pills rv" style="--d:.18s">
      <span>без жёстких диет</span><span>без исключений «навсегда»</span><span>с учётом анализов</span><span>под твой бюджет</span>
    </div>
  </div>
</section>

<!-- ============ SERVICES ============ -->
<section class="sec" id="services">
  <div class="wrap">
    <div class="sec-head rv">
      <span class="eyebrow">Услуги · тарифы</span>
      <h2>Выбери свой <span class="serif-i">формат</span> работы.</h2>
      <p>От разовой консультации до полного сопровождения. Нажми «Выбрать» — услуга сразу добавится в форму заказа ниже.</p>
    </div>
    <div class="bento">
      <article class="svc narrow rv">
        <div class="svc-top"><span class="svc-tag">1 встреча</span><span class="svc-num">01</span></div>
        <h3>Экспресс-разбор</h3>
        <p class="svc-desc">60 минут: разбираем текущий рацион по полочкам и находим точки роста.</p>
        <div class="svc-foot"><span class="svc-price">350<small> ₽</small></span>
          <button class="pick" data-svc="s1">Выбрать →</button></div>
      </article>
      <article class="svc wide rv" style="--d:.06s">
        <div class="svc-top"><span class="svc-tag">старт</span><span class="svc-num">02</span></div>
        <h3>Расчёт КБЖУ + меню на неделю</h3>
        <p class="svc-desc">Твои индивидуальные цифры, готовый список покупок и 7 дней сбалансированных приёмов пищи, которые реально хочется готовить.</p>
        <div class="svc-foot"><span class="svc-price">590<small> ₽</small></span>
          <button class="pick" data-svc="s2">Выбрать →</button></div>
      </article>
      <article class="svc wide rv" style="--d:.04s">
        <div class="svc-top"><span class="svc-tag">хит</span><span class="svc-num">03</span></div>
        <h3>Персональный план на месяц</h3>
        <p class="svc-desc">Гибкий план под твои цели, привычки и бюджет. Конструктор блюд, замены продуктов и чат-поддержка весь месяц.</p>
        <div class="svc-foot"><span class="svc-price">1 290<small> ₽</small></span>
          <button class="pick" data-svc="s3">Выбрать →</button></div>
      </article>
      <article class="svc narrow rv" style="--d:.1s">
        <div class="svc-top"><span class="svc-tag">семья</span><span class="svc-num">05</span></div>
        <h3>План для семьи</h3>
        <p class="svc-desc">Меню, которое едят все — учитываем вкусы детей и взрослых.</p>
        <div class="svc-foot"><span class="svc-price">1 850<small> ₽</small></span>
          <button class="pick" data-svc="s5">Выбрать →</button></div>
      </article>
      <article class="svc dark rv" style="grid-column:span 6;--d:.08s">
        <div class="svc-top"><span class="svc-tag">результат</span><span class="svc-num">04</span></div>
        <h3>Сопровождение 3 месяца</h3>
        <p class="svc-desc">Полное ведение: корректировки плана, разбор анализов, еженедельные созвоны и поддержка на каждом этапе. Для тех, кто хочет устойчивый результат без откатов.</p>
        <div class="svc-foot"><span class="svc-price">3 200<small> ₽</small></span>
          <button class="pick" data-svc="s4">Выбрать →</button></div>
      </article>
    </div>
  </div>
</section>

<!-- ============ CALC TEASER ============ -->
<section class="sec" id="calc-teaser" style="padding-top:0">
  <div class="wrap">
    <div class="teaser rv">
      <div>
        <span class="eyebrow lt">интерактив</span>
        <h2>Узнай свои <span class="serif-i">цифры</span> за 30 секунд.</h2>
        <p>Калькулятор посчитает норму калорий и баланс белков, жиров и углеводов по формуле Миффлина–Сан Жеора — с учётом твоей активности и цели.</p>
      </div>
      <div class="right">
        <div class="big-calc">
          <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="3"/><path d="M8 6h8M8 10h2M14 10h2M8 14h2M14 14h2M8 18h2M14 18h2"/></svg></span>
          <span class="tx"><b>КБЖУ-калькулятор</b><span>бесплатно · без регистрации</span></span>
        </div>
        <button class="btn btn-lime" data-calc style="width:100%">Открыть калькулятор →</button>
      </div>
    </div>
  </div>
</section>

<!-- ============ TESTIMONIALS ============ -->
<section class="sec" id="reviews" style="padding-top:0">
  <div class="wrap">
    <div class="sec-head rv">
      <span class="eyebrow">отзывы</span>
      <h2>Что говорят <span class="serif-i">клиенты</span>.</h2>
    </div>
  </div>
  <div class="tmarq rv"><div class="tmarq-track" id="tmarq"></div></div>
</section>

<!-- ============ ORDER ============ -->
<section class="sec" id="order">
  <div class="wrap">
    <div class="order-grid">
      <aside class="order-aside rv">
        <span class="eyebrow">оформить заказ</span>
        <h2>Оставь заявку — и начнём с <span class="serif-i">первого шага</span>.</h2>
        <p>Заполни форму, и я свяжусь с тобой в течение дня, чтобы уточнить детали и подобрать формат. Никакого спама — только по делу.</p>
        <ul class="guar">
          <li><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></span>Бесплатная 15-минутная установочная беседа</li>
          <li><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></span>План под твой бюджет и вкусы</li>
          <li><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></span>Конфиденциальность данных</li>
        </ul>
        <div class="contact-mini">
          <a href="tel:+79269051838"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/></svg>+7 (926) 905-18-38</a>
          <a href="https://t.me/" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.8 15.6 9.4 21c.6 0 .8-.2 1.1-.5l2.5-2.4 5.2 3.8c1 .5 1.6.3 1.9-.9l3.4-16c.3-1.4-.5-2-1.5-1.6L1.6 8.9c-1.4.5-1.4 1.3-.2 1.7l5.2 1.6L18.4 4.6c.5-.4 1-.2.6.2"/></svg>@nutriciology</a>
        </div>
      </aside>

      <div class="form-card rv" style="--d:.1s" id="formCard">
        <form id="orderForm" novalidate>
          <div class="form-row">
            <div class="field" id="f-name">
              <label>Имя <span class="req">*</span></label>
              <input type="text" name="name" placeholder="Как к тебе обращаться" autocomplete="name">
              <span class="err">Пожалуйста, укажи имя</span>
            </div>
            <div class="field" id="f-contact">
              <label>Телефон или Telegram <span class="req">*</span></label>
              <input type="text" name="contact" placeholder="+7 … или @username" autocomplete="tel">
              <span class="err">Нужен контакт для связи</span>
            </div>
          </div>
          <div class="field">
            <label>E-mail <span style="color:var(--faint)">(необязательно)</span></label>
            <input type="email" name="email" placeholder="you@mail.com" autocomplete="email">
          </div>
          <div class="field" id="f-svc">
            <label>Услуга <span class="req">*</span></label>
            <select name="service" id="svcSelect">
              <option value="" data-price="0">Выбери тариф…</option>
              <option value="s1" data-price="350">Экспресс-разбор рациона — 350 ₽</option>
              <option value="s2" data-price="590">Расчёт КБЖУ + меню на неделю — 590 ₽</option>
              <option value="s3" data-price="1290">Персональный план на месяц — 1 290 ₽</option>
              <option value="s4" data-price="3200">Сопровождение 3 месяца — 3 200 ₽</option>
              <option value="s5" data-price="1850">План питания для семьи — 1 850 ₽</option>
            </select>
            <span class="err">Выбери услугу</span>
          </div>
          <div class="field">
            <label>Цель</label>
            <div class="goals" id="goals">
              <button type="button" class="goal" data-g="похудение">Похудение</button>
              <button type="button" class="goal on" data-g="поддержание">Поддержание</button>
              <button type="button" class="goal" data-g="набор">Набор массы</button>
              <button type="button" class="goal" data-g="здоровье">Здоровье / энергия</button>
            </div>
          </div>
          <div class="field">
            <label>Комментарий</label>
            <textarea name="comment" placeholder="Расскажи коротко о целях, ограничениях, аллергиях…"></textarea>
          </div>
          <div class="price-bar">
            <span class="pl">Выбрано:<b id="priceName">не выбрано</b></span>
            <span class="pv" id="priceVal">— ₽</span>
          </div>
          <button type="submit" class="btn btn-primary submit-btn">Оформить заказ →</button>
          <p class="form-note">Нажимая кнопку, ты соглашаешься на обработку персональных данных.</p>
        </form>

        <div class="success" id="success">
          <span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></span>
          <h3>Заявка принята!</h3>
          <p id="successText">Спасибо! Я свяжусь с тобой в ближайшее время, чтобы обсудить детали.</p>
          <div class="sum" id="successSum"></div>
          <a class="btn btn-lime" id="smsBtn" href="#">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.8-.9L3 20l1-5.2a8.4 8.4 0 1 1 17-3.3z"/><path d="M8 10h8M8 13h5"/></svg>
            Отправить СМС с заказом
          </a>
          <p class="sms-note">Откроется приложение «Сообщения» с готовым текстом заказа на номер <b>+7 (926) 905-18-38</b> — просто нажми «Отправить».</p>
          <button class="btn btn-ghost" id="resetForm" style="margin-top:6px">Оформить ещё одну заявку</button>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ FOOTER ============ -->
<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="#top" class="brand">НУТРИЦИОЛОГ<span class="tail">ия</span></a>
        <p>Персональный нутрициолог Ирина. Помогаю выстроить питание, которое даёт энергию и радость — без диет и запретов.</p>
        <div class="socials">
          <a href="https://t.me/" target="_blank" rel="noopener" aria-label="Telegram"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.8 15.6 9.4 21c.6 0 .8-.2 1.1-.5l2.5-2.4 5.2 3.8c1 .5 1.6.3 1.9-.9l3.4-16c.3-1.4-.5-2-1.5-1.6L1.6 8.9c-1.4.5-1.4 1.3-.2 1.7l5.2 1.6L18.4 4.6c.5-.4 1-.2.6.2"/></svg></a>
          <a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg></a>
          <a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 12s0-3.2-.4-4.7a2.5 2.5 0 0 0-1.8-1.8C19.3 5 12 5 12 5s-7.3 0-8.8.5A2.5 2.5 0 0 0 1.4 7.3C1 8.8 1 12 1 12s0 3.2.4 4.7a2.5 2.5 0 0 0 1.8 1.8C4.7 19 12 19 12 19s7.3 0 8.8-.5a2.5 2.5 0 0 0 1.8-1.8C23 15.2 23 12 23 12zM10 15V9l5 3z"/></svg></a>
        </div>
      </div>
      <div class="foot-col">
        <h4>Навигация</h4>
        <a href="#about">Обо мне</a>
        <a href="#services">Услуги</a>
        <a href="#calc-teaser" data-calc>Расчёт КБЖУ</a>
        <a href="#reviews">Отзывы</a>
        <a href="#order">Оформить заказ</a>
      </div>
      <div class="foot-col">
        <h4>Контакты</h4>
        <a href="tel:+79269051838">+7 (926) 905-18-38</a>
        <a href="mailto:hi@nutriciology.ru">hi@nutriciology.ru</a>
        <a href="https://t.me/" target="_blank" rel="noopener">@nutriciology</a>
        <p>Онлайн · весь мир</p>
      </div>
    </div>
    <div class="foot-bot">
      <span>© 2026 НУТРИЦИОЛОГия · все права защищены</span>
      <span>сделано с заботой о твоём здоровье</span>
    </div>
    <p class="disclaimer">Информация на сайте носит ознакомительный характер и не является медицинской консультацией, диагнозом или назначением лечения. При наличии заболеваний проконсультируйся с врачом.</p>
  </div>
</footer>

<button id="totop" aria-label="Наверх"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>

<!-- ============ CALC MODAL ============ -->
<div class="modal" id="calcModal" role="dialog" aria-modal="true" aria-label="Калькулятор КБЖУ">
  <div class="modal-bg" data-close></div>
  <div class="modal-box">
    <div class="modal-head">
      <div>
        <span class="eyebrow">калькулятор</span>
        <h3>Расчёт <span class="serif-i">КБЖУ</span></h3>
      </div>
      <button class="modal-close" data-close aria-label="Закрыть"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
    </div>
    <div class="calc-grid">
      <div class="calc-inputs">
        <div class="cfield">
          <label>Пол</label>
          <div class="seg" id="sexSeg">
            <button type="button" data-sex="f" class="on">Женский</button>
            <button type="button" data-sex="m">Мужской</button>
          </div>
        </div>
        <div class="cfield">
          <label>Возраст</label>
          <div class="range-wrap">
            <input type="range" id="ageR" min="14" max="80" value="30">
            <input type="number" id="ageN" min="14" max="80" value="30">
            <span class="unit">лет</span>
          </div>
        </div>
        <div class="cfield">
          <label>Рост</label>
          <div class="range-wrap">
            <input type="range" id="hR" min="140" max="210" value="168">
            <input type="number" id="hN" min="140" max="210" value="168">
            <span class="unit">см</span>
          </div>
        </div>
        <div class="cfield">
          <label>Вес</label>
          <div class="range-wrap">
            <input type="range" id="wR" min="35" max="160" value="62">
            <input type="number" id="wN" min="35" max="160" value="62">
            <span class="unit">кг</span>
          </div>
        </div>
        <div class="cfield">
          <label>Активность</label>
          <div class="act-list" id="actList">
            <label data-act="1.2"><span class="radio"></span>Минимальная — сидячий образ жизни</label>
            <label data-act="1.375"><span class="radio"></span>Лёгкая — тренировки 1–3 раза в неделю</label>
            <label data-act="1.55" class="on"><span class="radio"></span>Средняя — тренировки 3–5 раз в неделю</label>
            <label data-act="1.725"><span class="radio"></span>Высокая — тренировки 6–7 раз в неделю</label>
            <label data-act="1.9"><span class="radio"></span>Экстремальная — физическая работа</label>
          </div>
        </div>
        <div class="cfield">
          <label>Цель</label>
          <div class="seg" id="goalSeg">
            <button type="button" data-goal="loss">Похудение</button>
            <button type="button" data-goal="maintain" class="on">Поддержание</button>
            <button type="button" data-goal="gain">Набор</button>
          </div>
        </div>
      </div>

      <div class="calc-result">
        <div class="res-kcal">
          <div class="lab">Твоя норма</div>
          <div class="val"><span id="kcalVal">0</span><small>ккал / день</small></div>
          <div class="sub" id="kcalSub">поддержание веса</div>
          <div class="macro-stack">
            <i id="stP" style="background:#2c7a4c"></i>
            <i id="stF" style="background:#e7a23c"></i>
            <i id="stC" style="background:#c6e84a"></i>
          </div>
        </div>
        <div class="macros">
          <div class="macro"><span class="sw" style="background:#2c7a4c"></span><span class="nm">Белки</span><span class="bar"><i id="barP" style="background:#2c7a4c"></i></span><span class="gv"><span id="gP">0</span><small> г</small></span></div>
          <div class="macro"><span class="sw" style="background:#e7a23c"></span><span class="nm">Жиры</span><span class="bar"><i id="barF" style="background:#e7a23c"></i></span><span class="gv"><span id="gF">0</span><small> г</small></span></div>
          <div class="macro"><span class="sw" style="background:#c6e84a"></span><span class="nm">Углеводы</span><span class="bar"><i id="barC" style="background:#c6e84a"></i></span><span class="gv"><span id="gC">0</span><small> г</small></span></div>
        </div>
        <div class="water">
          <span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.7s6 6.3 6 10.3a6 6 0 0 1-12 0c0-4 6-10.3 6-10.3z"/></svg></span>
          <span><b id="waterVal">1.9 л</b><span>воды в день</span></span>
        </div>
        <button class="btn btn-lime calc-cta" id="calcToOrder">Получить план под эти цифры →</button>
      </div>
    </div>
  </div>
</div>

<script>
document.documentElement.classList.add('js');
const $=(s,r=document)=>r.querySelector(s);
const $$=(s,r=document)=>[...r.querySelectorAll(s)];

/* телефон специалиста для СМС */
const OWNER_PHONE='+79269051838';

/* ---------- header scroll + progress + totop ---------- */
const hdr=$('#hdr'),prog=$('#progress'),totop=$('#totop');
function onScroll(){
  const y=scrollY;
  hdr.classList.toggle('scrolled',y>30);
  totop.classList.toggle('show',y>700);
  const h=document.documentElement.scrollHeight-innerHeight;
  prog.style.transform='scaleX('+(h>0?y/h:0)+')';
}
addEventListener('scroll',onScroll,{passive:true});onScroll();
totop.addEventListener('click',()=>scrollTo({top:0,behavior:'smooth'}));

/* ---------- burger ---------- */
const burger=$('#burger'),menu=$('#menu');
burger.addEventListener('click',()=>{burger.classList.toggle('open');menu.classList.toggle('open');});
$$('#menu a').forEach(a=>a.addEventListener('click',()=>{burger.classList.remove('open');menu.classList.remove('open');}));

/* ---------- reveal ---------- */
const io=new IntersectionObserver((es)=>{
  es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});
},{threshold:.14,rootMargin:'0px 0px -8% 0px'});
$$('.rv').forEach((el,i)=>{el.style.transitionDelay=(el.style.getPropertyValue('--d')||(i%3*0.06)+'s');io.observe(el);});

/* ---------- count up ---------- */
function countUp(el){
  const to=parseFloat(el.dataset.count),dec=+(el.dataset.dec||0),suf=el.dataset.suffix||'';
  const dur=1400,t0=performance.now();
  function step(t){const k=Math.min(1,(t-t0)/dur),e=1-Math.pow(1-k,3);
    if(suf){el.innerHTML=(to*e).toFixed(dec)+'<span class="u">'+suf+'</span>';}
    else el.textContent=(to*e).toFixed(dec);
    if(k<1)requestAnimationFrame(step);
    else el.innerHTML=(dec?to.toFixed(dec):to)+(suf?'<span class="u">'+suf+'</span>':'');}
  requestAnimationFrame(step);
}
const cio=new IntersectionObserver((es)=>{es.forEach(e=>{if(e.isIntersecting){countUp(e.target);cio.unobserve(e.target);}});},{threshold:.6});
$$('[data-count]').forEach(el=>cio.observe(el));

/* ---------- marquees ---------- */
const marqWords=['Без голодовок','Индивидуальный план','Разбор анализов','Гибкий рацион 80/20','Поддержка в чате','Вкусные рецепты','Устойчивый результат','Наука, а не мифы'];
$('#marq1').innerHTML=[0,1].map(()=>marqWords.map(w=>'<span class="marq-item"><span class="sep"></span>'+w+'</span>').join('')).join('');
const reviews=[
  {n:'Марина К.',r:'−7 кг за 3 месяца',c:'#2c7a4c',t:'Впервые похудела без срывов. Ирина объяснила всё так, что я наконец поняла, зачем мне белок на завтрак.'},
  {n:'Дмитрий В.',r:'набор массы',c:'#e7a23c',t:'Думал, здоровое питание — это скучно. Получил конструктор блюд и набрал 4 кг мышц за полгода.'},
  {n:'Ольга С.',r:'энергия и сон',c:'#3f9463',t:'Ушла постоянная усталость после обеда. Оказалось, дело в балансе, а не в «чистом питании».'},
  {n:'Екатерина Л.',r:'план для семьи',c:'#a9cc2e',t:'Дети едят то же, что и мы, и не капризничают. Это магия какая-то, спасибо!'},
  {n:'Анна М.',r:'поддержание',c:'#2c7a4c',t:'Калькулятор КБЖУ открыл глаза — я годами недоедала. Теперь ем больше и чувствую себя лучше.'},
  {n:'Игорь П.',r:'разбор анализов',c:'#e7a23c',t:'Грамотно разобрала ферритин и витамин D, скорректировали рацион — через 2 месяца показатели в норме.'}
];
const tcardHTML=r=>'<div class="tcard"><div class="st">★★★★★</div><div class="q">'+r.t+'</div><div class="who"><span class="av" style="background:'+r.c+'">'+r.n.charAt(0)+'</span><span><b>'+r.n+'</b><span>'+r.r+'</span></span></div></div>';
$('#tmarq').innerHTML=[0,1].map(()=>reviews.map(tcardHTML).join('')).join('');

/* ---------- calc modal ---------- */
const modal=$('#calcModal');
function openCalc(){modal.classList.add('open');document.body.style.overflow='hidden';compute();}
function closeCalc(){modal.classList.remove('open');document.body.style.overflow='';}
$$('[data-calc]').forEach(b=>b.addEventListener('click',e=>{e.preventDefault();openCalc();}));
$$('[data-close]',modal).forEach(b=>b.addEventListener('click',closeCalc));
addEventListener('keydown',e=>{if(e.key==='Escape'&&modal.classList.contains('open'))closeCalc();});

/* calc state */
const C={sex:'f',age:30,h:168,w:62,act:1.55,goal:'maintain'};
function bindPair(rId,nId,key){
  const r=$('#'+rId),n=$('#'+nId);
  const set=v=>{v=Math.max(+r.min,Math.min(+r.max,+v||0));C[key]=v;r.value=v;n.value=v;compute();};
  r.addEventListener('input',()=>set(r.value));
  n.addEventListener('input',()=>set(n.value));
}
bindPair('ageR','ageN','age');bindPair('hR','hN','h');bindPair('wR','wN','w');
$$('#sexSeg button').forEach(b=>b.addEventListener('click',()=>{$$('#sexSeg button').forEach(x=>x.classList.remove('on'));b.classList.add('on');C.sex=b.dataset.sex;compute();}));
$$('#goalSeg button').forEach(b=>b.addEventListener('click',()=>{$$('#goalSeg button').forEach(x=>x.classList.remove('on'));b.classList.add('on');C.goal=b.dataset.goal;compute();}));
$$('#actList label').forEach(l=>l.addEventListener('click',()=>{$$('#actList label').forEach(x=>x.classList.remove('on'));l.classList.add('on');C.act=+l.dataset.act;compute();}));

/* number tween */
function tween(el,to,dec=0){
  const from=parseFloat(el.dataset.cur||'0');el.dataset.cur=to;
  const dur=550,t0=performance.now();
  function step(t){const k=Math.min(1,(t-t0)/dur),e=1-Math.pow(1-k,3);
    el.textContent=Math.round((from+(to-from)*e)*(10**dec))/(10**dec);
    if(k<1)requestAnimationFrame(step);}
  requestAnimationFrame(step);
}

function compute(){
  let bmr=10*C.w+6.25*C.h-5*C.age+(C.sex==='m'?5:-161);
  const tdee=bmr*C.act;
  const factor=C.goal==='loss'?0.80:C.goal==='gain'?1.15:1.0;
  const kcal=Math.round(tdee*factor/5)*5;
  const pF=C.goal==='loss'?2.0:C.goal==='gain'?1.9:1.7;
  const fF=C.goal==='loss'?0.9:C.goal==='gain'?1.0:1.0;
  let p=Math.round(C.w*pF), f=Math.round(C.w*fF);
  let pK=p*4, fK=f*9, cK=Math.max(0,kcal-pK-fK);
  let c=Math.round(cK/4);
  const tot=pK+fK+c*4||1;
  const pPct=pK/tot*100,fPct=fK/tot*100,cPct=c*4/tot*100;
  tween($('#kcalVal'),kcal);
  $('#kcalSub').textContent=C.goal==='loss'?'дефицит для похудения':C.goal==='gain'?'профицит для набора':'поддержание веса';
  $('#gP').textContent=p;$('#gF').textContent=f;$('#gC').textContent=c;
  $('#barP').style.width=pPct+'%';$('#barF').style.width=fPct+'%';$('#barC').style.width=cPct+'%';
  $('#stP').style.width=pPct+'%';$('#stF').style.width=fPct+'%';$('#stC').style.width=cPct+'%';
  $('#waterVal').textContent=(C.w*30/1000).toFixed(1)+' л';
}
compute();

$('#calcToOrder').addEventListener('click',()=>{
  const map={loss:'похудение',maintain:'поддержание',gain:'набор'};
  const g=map[C.goal];
  $$('#goals .goal').forEach(x=>x.classList.toggle('on',x.dataset.g===g));
  closeCalc();
  const o=$('#order');o.scrollIntoView({behavior:'smooth'});
  setTimeout(()=>{$('#formCard').classList.add('flash');setTimeout(()=>$('#formCard').classList.remove('flash'),1200);},500);
});

/* ---------- services -> order form ---------- */
const svcSelect=$('#svcSelect'),priceName=$('#priceName'),priceVal=$('#priceVal');
function fmt(n){return n.toLocaleString('ru-RU')+' ₽';}
function syncPrice(){
  const opt=svcSelect.options[svcSelect.selectedIndex];
  const pr=+(opt.dataset.price||0);
  priceName.textContent=pr?opt.text.split(' — ')[0]:'не выбрано';
  priceVal.textContent=pr?fmt(pr):'— ₽';
}
svcSelect.addEventListener('change',syncPrice);syncPrice();
$$('.pick').forEach(b=>b.addEventListener('click',()=>{
  svcSelect.value=b.dataset.svc;syncPrice();
  $('#order').scrollIntoView({behavior:'smooth'});
  setTimeout(()=>{$('#formCard').classList.add('flash');setTimeout(()=>$('#formCard').classList.remove('flash'),1200);},500);
}));

/* goals chips */
$$('#goals .goal').forEach(g=>g.addEventListener('click',()=>{$$('#goals .goal').forEach(x=>x.classList.remove('on'));g.classList.add('on');}));

/* ---------- form validation + submit + SMS ---------- */
const form=$('#orderForm');
function setErr(id,bad){$('#'+id).classList.toggle('invalid',bad);}
form.addEventListener('submit',e=>{
  e.preventDefault();
  const name=form.name.value.trim();
  const contact=form.contact.value.trim();
  const svc=svcSelect.value;
  let ok=true;
  setErr('f-name',!name);if(!name)ok=false;
  setErr('f-contact',!contact);if(!contact)ok=false;
  setErr('f-svc',!svc);if(!svc)ok=false;
  if(!ok){const first=$('#orderForm .invalid');if(first)first.scrollIntoView({behavior:'smooth',block:'center'});return;}
  const opt=svcSelect.options[svcSelect.selectedIndex];
  const goal=($('#goals .goal.on')||{}).dataset?.g||'—';
  const comment=form.comment.value.trim();
  $('#successText').textContent='Спасибо, '+name.split(' ')[0]+'! Я свяжусь с тобой по контакту «'+contact+'» в ближайшее время.';
  $('#successSum').innerHTML=
    '<div><span>Услуга</span><b>'+opt.text.split(' — ')[0]+'</b></div>'+
    '<div><span>Цель</span><b>'+goal+'</b></div>'+
    '<div><span>Стоимость</span><b>'+fmt(+(opt.dataset.price||0))+'</b></div>';

  /* СМС с заказом на телефон специалиста +7 (926) 905-18-38 */
  const smsBody=encodeURIComponent(
    'НУТРИЦИОЛОГия — новый заказ.\n'+
    'Имя: '+name+'\n'+
    'Контакт: '+contact+'\n'+
    'Услуга: '+opt.text.split(' — ')[0]+'\n'+
    'Цена: '+fmt(+(opt.dataset.price||0))+'\n'+
    'Цель: '+goal+
    (comment?'\nКомментарий: '+comment:'')
  );
  const sep=/iP(hone|ad|od)/.test(navigator.userAgent)?'&':'?';
  $('#smsBtn').href='sms:'+OWNER_PHONE+sep+'body='+smsBody;

  form.style.display='none';
  $('#success').classList.add('show');
});
['name','contact'].forEach(n=>form[n].addEventListener('input',()=>{
  const id=n==='name'?'f-name':'f-contact';if(form[n].value.trim())setErr(id,false);
}));
svcSelect.addEventListener('change',()=>{if(svcSelect.value)setErr('f-svc',false);});
$('#resetForm').addEventListener('click',()=>{
  form.reset();$$('#goals .goal').forEach(x=>x.classList.toggle('on',x.dataset.g==='поддержание'));
  syncPrice();$$('.field').forEach(f=>f.classList.remove('invalid'));
  $('#success').classList.remove('show');form.style.display='';
});
</script>
</body>
</html>