/* РуВайб — дизайн-система «Живой свет» v3 (день/ночь, 3-слойная токен-модель)
Слои: 1) примитивы → 2) семантика → 3) тема. Компоненты ссылаются ТОЛЬКО на семантику.
Насыщенность hero — по эталону Lovable (docs/design/2026-07-15-lovable-visual-reference.md):
полный вертикальный путь по цвету, цвет до краёв, светлый ореол только под H1. */
/* ============================================================
СЛОЙ 1 — ПРИМИТИВЫ (бренд-цвета, тема-независимы) + базовые токены
Тему меняем ТОЛЬКО в слое 3.
============================================================ */
:root{
/* нейтрали-опоры */
--c-white:#FFFFFF;
--c-ink:#12151E; /* чернила: графит с синим подтоном */
--c-ink-strong:#0B0E16; /* максимальный контраст (тёмная кнопка) */
--c-night:#0C0F1A; /* фон ночи — глубокий сине-графитовый, не чёрный */
/* тёплый нейтрал контент-полотна (приём Lovable: покой после цветного hero) */
--c-cream:#FBF8F4;
--c-cream-2:#F4EFE8;
--c-cream-3:#EAE3D9;
/* синий */
--c-blue-500:#4A7BF0; /* день */
--c-blue-600:#2F5AE0; /* deep / ink */
--c-blue-hover:#3A63D8;
--c-blue-300:#8FB0F7; /* ночь: осветлён + десатурирован ~75% */
--c-blue-200:#A9C2F9; /* ночь: акцентный текст (ink) */
--c-sky:#7FA8FF; /* верх флагового сердца */
/* фиолетовый */
--c-purple-500:#7C6BF5;
--c-purple-600:#6C57EE; /* «густой» фиолет — центр цветового пути */
--c-purple-300:#ACA0F7; /* ночь */
/* красный / алый (флажный, НЕ розовый) */
--c-red-500:#F5334D;
--c-red-600:#E11029;
--c-red-700:#6A1327; /* тёмный алый — уход градиента в ночь */
--c-red-300:#F5788A; /* ночь: смягчён, «не жжёт» */
--c-red-hot:#FF4257; /* near-neon низ hero */
/* янтарь — семантика «переделывает» (жёлтый). ЕДИНСТВЕННЫЙ жёлтый в системе */
--c-amber:#F5A524;
--c-amber-light:#FFB74A; /* ночь — чуть светлее, семантика цела */
/* зелёный — успех / готово */
--c-ok:#2FA35A;
--c-ok-light:#46C078;
/* ── ГРАДИЕНТЫ (сквозная составляющая бренда) ───────────────
Тема-независимы: айдентика одинакова днём и ночью. */
/* честный флаг без фиолета (критика: фиолет = generic-AI). Синий → тёплый алый. */
--flag:linear-gradient(120deg,#2F5AE0 0%,#E23B4E 100%);
--grad-brand:var(--flag); /* алиас DS */
--grad-brand-soft:linear-gradient(120deg,#4A7BF0,#E7566A);
--grad-heart:linear-gradient(180deg,#FFFFFF 2%,#7FA8FF 30%,#2F5AE0 55%,#F5334D 80%,#E11029 100%);
--grad-hairline:linear-gradient(120deg,rgba(74,123,240,.55),rgba(226,59,78,.55));
/* финальная CTA-сцена: полный путь до ночи (эталон сочности из Landing.dc.html) */
--grad-cta:linear-gradient(180deg,var(--bg) 0%,#4A7BF0 22%,#E7566A 54%,#F5334D 74%,#6A1327 90%,#0B0E16 100%);
/* геометрия */
--radius-xs:8px;
--radius-sm:12px;
--radius-field:14px;
--radius-btn:16px;
--radius-md:16px;
--radius-card:24px;
--radius-lg:28px; /* композер, крупные панели */
--radius-xl:36px;
--radius-pill:999px;
/* моушен-токены (тема-независимы) */
--ease:cubic-bezier(0.22,1,0.36,1);
--ease-out:cubic-bezier(0.33,1,0.68,1);
--ease-in-out:cubic-bezier(0.65,0,0.35,1);
--t-micro:140ms; /* hover */
--t-base:280ms; /* ривил */
--t-macro:600ms; /* волна */
--t-intro:1800ms; /* интро */
--t-exit:160ms; /* v3: уход окон/поповеров/тостов — быстрее входа */
/* fast slowmo (директива владельца 2026-07-15): резкий старт → длинный мягкий доплыв.
Для КРУПНЫХ входов (панели, пузыри, секции превью): --ease-slowmo + --t-in. Микро остаются на --t-micro/--ease. */
--ease-slowmo:cubic-bezier(0.16,1,0.3,1);
--t-in:420ms; /* вход */
/* v3, ЗАРЕЗЕРВИРОВАНО: только мобильный swipe-to-dismiss bottom-sheet */
--ease-spring:linear(0, 0.34 7.5%, 0.9 18%, 1.06 26%, 1.02 40%, 1);
/* алиасы имён дизайн-системы (Claude Design) → наши тайминги */
--dur-hover:var(--t-micro);
--dur-reveal:var(--t-base);
--dur-enter:var(--t-in);
--dur-wave:var(--t-macro);
--dur-intro:var(--t-intro);
/* типографика */
--font-sans:'Onest','Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-display:var(--font-sans);
--font-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fw-black:900;
--text-display:76px; --text-h1:56px; --text-h2:40px; --text-h3:28px; --text-title:22px;
--text-lead:19px; --text-body:17px; --text-sm:15px; --text-xs:13px; --text-2xs:11px;
--lh-hero:1.05; --lh-tight:1.12; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.62;
--tracking-hero:-0.02em; --tracking-tight:-0.015em; --tracking-snug:-0.008em; --tracking-normal:0; --tracking-wide:0.04em;
/* пространство (сетка 4/8) */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
--space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-11:160px;
--maxw:1240px;
--container:var(--maxw);
--container-narrow:840px;
--gutter:24px;
--section-y:112px; /* вертикальный ритм секций */
}
/* ============================================================
СЛОЙ 2/3 — СЕМАНТИКА (переопределяется темой). ДЕНЬ = дефолт.
Компонентные правила ссылаются только на эти имена.
============================================================ */
:root,[data-theme="light"]{
color-scheme:light;
/* поверхности / текст. Полотно — ТЁПЛЫЙ НЕЙТРАЛ (не стерильно-белое):
энергия живёт в hero, контент — покой, цвет возвращается акцентами. */
--bg:var(--c-cream);
--bg-subtle:#FDFBF9;
--surface:var(--c-cream-2); /* инсеты, тихие блоки */
--surface-2:var(--c-cream-3);
--border:#E7E1D8;
--border-strong:#D8D0C4;
--ink:var(--c-ink);
--muted:#6B7280;
--muted-2:#9AA3B2;
--ink-2:#3A3F4A; /* вторичный «густой» текст (гайды, заметки) */
/* бренд-акценты */
--blue:var(--c-blue-500);
--blue-deep:var(--c-blue-600);
--blue-ink:var(--c-blue-600);
--blue-hover:var(--c-blue-hover);
--purple:var(--c-purple-500);
--pink:var(--c-red-500);
--red:var(--c-red-500);
--wait:var(--c-amber);
--ok:var(--c-ok);
--accent:var(--c-blue-600);
--focus-ring:rgba(74,123,240,.45);
/* статусы (алиасы DS → наши семантические имена) */
--status-working:var(--blue-deep);
--status-working-soft:#E7EEFF;
--status-rework:var(--wait);
--status-rework-soft:#FFF3DE;
--status-rework-ink:#8A5A08;
--status-done:var(--ok);
--status-done-soft:#E4F6EE;
/* элевация тенью (день) */
--shadow-xs:0 1px 2px rgba(18,21,30,.06);
--shadow-sm:0 2px 24px rgba(15,18,34,.06);
--shadow-lg:0 2px 24px rgba(15,18,34,.06), 0 24px 70px -18px rgba(15,18,34,.16);
--shadow-btn:0 8px 20px -6px rgba(15,18,34,.4);
--shadow-card:0 10px 30px -14px rgba(18,21,30,.14), 0 2px 8px -6px rgba(18,21,30,.08);
--shadow-card-hover:0 22px 48px -20px rgba(18,21,30,.20), 0 6px 16px -10px rgba(18,21,30,.10);
--shadow-pop:0 18px 46px -18px rgba(18,21,30,.24), 0 4px 12px -6px rgba(18,21,30,.12);
/* фирменная деталь — АМБИЕНТНЫЕ ЦВЕТНЫЕ тени (синяя флаговая под композером) */
--shadow-ambient:0 30px 60px -22px rgba(47,90,224,.26);
--shadow-ambient-lg:0 44px 90px -30px rgba(47,90,224,.30), 0 18px 40px -24px rgba(245,51,77,.16);
--shadow-ambient-red:0 30px 60px -24px rgba(245,51,77,.20);
/* компонентные семантические токены */
--card-bg:#FFFFFF; /* карточки / окна / поля-подложки — белые НАД кремом */
--field-bg:#FFFFFF;
--menu-bg:rgba(255,255,255,.97);
--nav-bg:rgba(251,248,244,.72);
--nav-shadow:0 1px 0 rgba(15,18,34,.05);
--bar-bg:rgba(251,248,244,.82); /* липкие топбары кабинета */
--btn-bg:var(--c-ink-strong); /* сильная «тёмная» кнопка действия */
--btn-ink:#FFFFFF;
--btn-bg-hover:#1C2033;
--ghost-bg:rgba(15,18,34,.06);
--ghost-bg-hover:rgba(15,18,34,.11);
--icon-hover-bg:#F1ECE5;
--overlay:rgba(11,14,22,.44);
/* ── HERO: ПОЛНЫЙ ВЕРТИКАЛЬНЫЙ ПУТЬ ПО ЦВЕТУ (эталон Lovable) ──
белый под навигацией → насыщенный синий за H1 → фиолет/маджента →
near-neon алый внизу. Цвет доходит ДО КРАЁВ: никакой общей белой вуали. */
/* ЧЕСТНЫЙ ТРИКОЛОР (критика 50мс: фиолет = «generic AI», не флаг/тепло):
синий → тёплый АЙВОРИ (полоса флага + чистый канал чтения под H1) → тёплый алый.
Фиолетовой опоры больше нет. */
--hero-bg:linear-gradient(180deg,
var(--bg) 0%,
#E8EFFF 6%,
#AFC6F7 14%,
#6B93F0 27%,
#93B0F0 37%,
#FBF7F0 47%,
#F3AAB4 61%,
#E7566A 81%,
#E23B4E 100%);
--hero-out:var(--bg); /* во что hero растворяется снизу (мост в контент) */
--mesh-opacity:1;
--mesh-saturate:1.55; /* тёплый триколор: насыщенность −15% (1.78 → 1.55), чтобы читалось «своё», не «стартап» */
--stage-dim:1; /* яркость неон-сцены финального CTA (день = полная) */
/* ореол — ЧИСТАЯ светлая зона под H1: текст читается мгновенно (беглость=доверие, «первые секунды»).
Края hero остаются цветными — баланс: сочный градиент + чистый минимальный текст. */
--hero-halo:radial-gradient(ellipse 54% 38% at 50% 39%,
rgba(255,255,255,.95) 0%, rgba(255,255,255,.80) 36%,
rgba(255,255,255,.38) 64%, rgba(255,255,255,0) 82%);
--mesh-veil:var(--hero-halo); /* историческое имя — не ломаем разметку */
--veil:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(251,248,244,.92), rgba(251,248,244,.55) 55%, transparent 80%);
--compose-bg:rgba(255,255,255,.72);
--compose-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(15,18,34,.05), var(--shadow-ambient);
/* ── ЦВЕТНЫЕ СЕКЦИИ (.grad-section) — заливки для мостов ── */
--grad-section-flag:linear-gradient(180deg,#4A7BF0 0%,#E7566A 55%,#F5334D 100%);
--grad-section-blue:linear-gradient(180deg,#E6EEFF 0%,#D2E1FF 50%,#E6EEFF 100%);
--grad-section-soft:linear-gradient(180deg,rgba(74,123,240,.09) 0%,rgba(226,59,78,.07) 100%);
--grad-section-warm:linear-gradient(180deg,var(--surface) 0%,var(--surface) 100%);
}
/* ============================================================
НОЧЬ — «спроектированное настроение», не инверсия (v3 §7.1):
глубина светлотой (не тенью), десатурация+осветление акцентов,
не чистый чёрный/белый, граница = сигнал элевации.
============================================================ */
[data-theme="dark"]{
color-scheme:dark;
--bg:var(--c-night);
--bg-subtle:#10141F;
--surface:#161B24; /* панели/инсеты — на ступень светлее фона */
--surface-2:#222A39;
--border:#2B3344; /* граница = сигнал элевации */
--border-strong:#313A52;
--ink:#EDEFF5; /* не чистый белый */
--muted:#9AA6BD;
--muted-2:#6E7789;
--ink-2:#C7CEDC;
--blue:var(--c-blue-300);
--blue-deep:var(--c-blue-300);
--blue-ink:var(--c-blue-200);
--blue-hover:#A9C2F9;
--purple:var(--c-purple-300);
--pink:var(--c-red-300);
--red:var(--c-red-300);
--wait:var(--c-amber-light);
--ok:var(--c-ok-light);
--accent:var(--c-blue-300);
--focus-ring:rgba(124,163,255,.5);
--status-working:var(--blue);
--status-working-soft:#141F3D;
--status-rework:var(--wait);
--status-rework-soft:#2E2410;
--status-rework-ink:var(--c-amber);
--status-done:var(--ok);
--status-done-soft:#0F2A20;
/* тени почти гасим — глубину держат светлота и границы */
--shadow-xs:0 1px 2px rgba(0,0,0,.4);
--shadow-sm:0 2px 18px rgba(0,0,0,.30);
--shadow-lg:0 2px 18px rgba(0,0,0,.32), 0 24px 60px -20px rgba(0,0,0,.55);
--shadow-btn:0 8px 20px -8px rgba(0,0,0,.6);
--shadow-card:0 12px 34px -14px rgba(0,0,0,.55), 0 2px 8px -6px rgba(0,0,0,.5);
--shadow-card-hover:0 26px 54px -20px rgba(0,0,0,.62), 0 8px 18px -10px rgba(0,0,0,.5);
--shadow-pop:0 18px 46px -18px rgba(0,0,0,.6), 0 4px 12px -6px rgba(0,0,0,.45);
--shadow-ambient:0 30px 70px -24px rgba(74,123,240,.40);
--shadow-ambient-lg:0 44px 90px -30px rgba(74,123,240,.42), 0 18px 40px -24px rgba(245,51,77,.20);
--shadow-ambient-red:0 30px 60px -24px rgba(245,51,77,.26);
--card-bg:#1A2130; /* карточки — на 1–2 ступени светлее фона */
--field-bg:#12161F;
--menu-bg:rgba(22,27,36,.97);
--nav-bg:rgba(12,15,26,.72);
--nav-shadow:0 1px 0 rgba(255,255,255,.05);
--bar-bg:rgba(12,15,26,.82);
--btn-bg:#EDEFF5; /* инверсия: светлая кнопка на тёмном */
--btn-ink:#10131A;
--btn-bg-hover:#FFFFFF;
--ghost-bg:rgba(255,255,255,.08);
--ghost-bg-hover:rgba(255,255,255,.14);
--icon-hover-bg:rgba(255,255,255,.08);
--overlay:rgba(0,0,0,.6);
/* НОЧЬ — тот же путь по цвету, но «спроектированное настроение»:
глубже, темнее старт, акценты не жгут. Сочность сохранена. */
--hero-bg:linear-gradient(180deg,
var(--bg) 0%,
#0F1526 6%,
#16265C 14%,
#24409E 26%,
#2C3FB4 36%,
#4B3BC4 50%,
#C2264A 80%,
#E22F4C 100%);
--hero-out:var(--bg);
--mesh-opacity:.62; /* блобы в ночи мягче, но не гаснут */
--mesh-saturate:1.5;
--stage-dim:.7; /* неон-сцена в ночи чуть приглушена */
--hero-halo:radial-gradient(ellipse 48% 32% at 50% 40%,
rgba(12,15,26,.92) 0%, rgba(12,15,26,.70) 38%,
rgba(12,15,26,.30) 64%, rgba(12,15,26,0) 80%);
--mesh-veil:var(--hero-halo);
--veil:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(12,15,26,.92), rgba(12,15,26,.5) 55%, transparent 80%);
--compose-bg:rgba(26,33,48,.72);
--compose-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.4), 0 30px 60px -22px rgba(0,0,0,.55);
--grad-section-flag:linear-gradient(180deg,#24409E 0%,#A03050 55%,#C2264A 100%);
--grad-section-blue:linear-gradient(180deg,#131C33 0%,#16203C 55%,#141E36 100%);
--grad-section-soft:linear-gradient(180deg,rgba(74,123,240,.12) 0%,rgba(226,59,78,.10) 100%);
--grad-section-warm:linear-gradient(180deg,var(--surface) 0%,var(--surface) 100%);
}
/* смена темы: гасим каскад transition (§7.4) + дефолтный кроссфейд VT (§7.2) */
.theme-switching *{transition:none !important}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:var(--font-sans);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--blue-hover)}
button{font-family:inherit}
textarea,input{font-family:inherit}
::placeholder{color:var(--muted-2);opacity:1}
::selection{background:rgba(91,141,239,.22)}
button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
img{max-width:100%}
.tnum{font-variant-numeric:tabular-nums}
/* ---------- keyframes (моушен v2.0) ---------- */
@keyframes rv-b1{from{transform:translate(0,0) scale(1)}to{transform:translate(4%,7%) scale(1.14)}}
@keyframes rv-b2{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-6%,5%) scale(.98)}}
@keyframes rv-b3{from{transform:translate(0,0) scale(1)}to{transform:translate(6%,-6%) scale(1.12)}}
@keyframes rvFlagMask{from{-webkit-mask-position:100% 100%;mask-position:100% 100%}}
@keyframes rvDepth{from{opacity:0;transform:scale(.88);filter:blur(8px)}}
@keyframes rvWordIn{from{opacity:0;transform:translateY(12px)}}
@keyframes rvUp24{from{opacity:0;transform:translateY(24px)}}
@keyframes rvDot{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes rvRise{from{opacity:0;transform:translateY(8px)}}
@keyframes rvPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes rvSpinDash{to{stroke-dashoffset:0}}
/* reveal on scroll (JS toggles .is-in) */
[data-reveal]{opacity:0}
[data-reveal].is-in{opacity:1}
[data-reveal].rev-up{transform:translateY(18px);transition:opacity var(--t-in) var(--ease-slowmo),transform var(--t-in) var(--ease-slowmo)}
[data-reveal].rev-up.is-in{transform:none}
[data-reveal].rev-x{transform:translateX(-24px);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
[data-reveal].rev-x.is-in{transform:none}
[data-reveal].rev-scale{transform:scale(.94);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
[data-reveal].rev-scale.is-in{transform:none}
@media (prefers-reduced-motion:reduce){
*{animation:none !important;transition:none !important}
html{scroll-behavior:auto}
[data-reveal]{opacity:1 !important;transform:none !important}
}
/* тихий режим (?static=1 или reduced-motion): без непрерывных анимаций, легче mesh.
Сатурацию НЕ снижаем — сочность hero не зависит от режима (только вес блюра). */
.rv-static *{animation:none !important}
.rv-static .mesh{filter:none !important}
.rv-static .mesh-blobs{filter:blur(46px) saturate(var(--mesh-saturate))}
.rv-static .hero-inner,.rv-static .intro,.rv-static [data-intro]{opacity:1 !important;transform:none !important}
.rv-static [data-reveal]{opacity:1 !important;transform:none !important}
/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.section{padding:clamp(56px,7vw,88px) 24px 0}
.section:last-of-type{padding-bottom:clamp(56px,7vw,88px)}
.h2{margin:0;font-size:clamp(27px,3.5vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-align:center}
/* Классический фирменный штрих: тонкий флаг-градиентный акцент под заголовком секции.
Связывает страницу на нашей частоте, не заливая секции градиентом (дизайн-план §3). */
.h2::after{content:"";display:block;width:46px;height:3px;margin:15px auto 0;border-radius:3px;background:var(--flag)}
.rv-static .h2::after{transition:none}
.lead{margin:16px auto 0;max-width:560px;font-size:16px;line-height:1.6;color:var(--muted);text-align:center}
.eyebrow{font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* ============================================================
ПЛАВНЫЕ ПЕРЕХОДЫ МЕЖДУ СЕКЦИЯМИ (принцип Lovable: НЕТ резких горизонтальных
стыков). Цветная заливка ПРОЯВЛЯЕТСЯ из фона сверху и РАСТВОРЯЕТСЯ снизу —
через маску, поэтому мост работает на любом фоне и в любой теме.
Как пользоваться:
Варианты заливки: --soft (тихий флаговый оттенок) · --blue · --warm (тёплый
нейтрал) · --flag (полная флаговая сцена, текст светлый → добавьте .on-color).
Тонкая настройка на самой секции:
style="--section-fade-in:24%;--section-fade-out:14%;--section-dim:.8"
Отдельный тонкий мост между двумя разными фонами:
============================================================ */
.grad-section{position:relative;isolation:isolate}
.grad-section > *{position:relative;z-index:1}
.grad-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:var(--section-grad,var(--grad-section-soft));
opacity:var(--section-dim,1);
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--section-fade-in,18%),#000 calc(100% - var(--section-fade-out,18%)),transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 var(--section-fade-in,18%),#000 calc(100% - var(--section-fade-out,18%)),transparent 100%)}
.grad-section--soft{--section-grad:var(--grad-section-soft)}
.grad-section--blue{--section-grad:var(--grad-section-blue)}
.grad-section--warm{--section-grad:var(--grad-section-warm)}
.grad-section--flag{--section-grad:var(--grad-section-flag);--section-dim:var(--stage-dim,1)}
/* текст на насыщенной заливке */
.on-color{color:#fff}
.on-color .h2,.on-color .eyebrow{color:#fff}
.on-color .lead,.on-color .muted{color:rgba(255,255,255,.86)}
/* самостоятельный мост-полоска: цвет сверху → прозрачность вниз (или наоборот через --flip) */
.grad-bridge{height:clamp(72px,10vh,140px);pointer-events:none;
background:var(--bridge-grad,linear-gradient(to bottom,var(--surface),transparent))}
.grad-bridge--up{--bridge-grad:linear-gradient(to top,var(--surface),transparent)}
/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--nav-shadow)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,32px);height:72px;display:flex;align-items:center;justify-content:space-between;position:relative}
.brand{display:flex;align-items:center;gap:10px;position:relative}
/* (a) тихий radial-glow за лого-сердцем в цветах флага — подложка, обе темы */
.brand::before{content:"";position:absolute;left:-7px;top:50%;width:42px;height:42px;transform:translateY(-50%);border-radius:50%;pointer-events:none;z-index:0;
background:radial-gradient(circle,rgba(74,123,240,.36),rgba(226,59,78,.16) 55%,rgba(245,51,77,.13) 68%,transparent 74%);
filter:blur(7px)}
[data-theme="dark"] .brand::before{background:radial-gradient(circle,rgba(143,176,247,.50),rgba(172,160,247,.30) 46%,rgba(245,120,138,.20) 68%,transparent 74%)}
.brand svg{position:relative;z-index:1;filter:drop-shadow(0 2px 5px rgba(46,84,164,.30))}
.brand-name{position:relative;z-index:1;font-size:19px;font-weight:800;letter-spacing:-.02em}
/* (b) деликатный градиент-шиммер словомарка — ОДИН проход при загрузке + при hover, без вечного цикла */
@keyframes rvBrandShimmer{from{background-position:135% 0}to{background-position:-35% 0}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.brand-name{background-image:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,var(--c-blue-500) 50%,var(--ink) 60%,var(--ink) 100%);
background-size:250% 100%;background-position:-35% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
animation:rvBrandShimmer 1100ms var(--ease) 350ms 1 both}
[data-theme="dark"] .brand-name{background-image:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,var(--c-blue-200) 50%,var(--ink) 60%,var(--ink) 100%)}
.brand:hover .brand-name{animation:rvBrandShimmer 1000ms var(--ease) 1 both}
}
.rv-static .brand-name{animation:none !important;background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:clamp(20px,3vw,38px)}
.nav-links a{font-size:14.5px;font-weight:500}
.nav-right{display:flex;align-items:center;gap:10px}
.btn-ghost{display:inline-flex;align-items:center;background:var(--ghost-bg);padding:10px 20px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:500;transition:background var(--t-micro);border:none;cursor:pointer;color:var(--ink)}
.btn-ghost:hover{background:var(--ghost-bg-hover);color:var(--ink)}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink)}
.mobile-menu{display:none;position:absolute;top:80px;left:14px;right:14px;background:var(--menu-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-lg);padding:10px;z-index:60}
.mobile-menu.open{display:flex;flex-direction:column}
.mobile-menu a{padding:14px 16px;font-size:17px;font-weight:500;border-radius:var(--radius-sm)}
.mobile-menu a:hover{background:var(--surface);color:var(--ink)}
.mobile-menu .sep{height:1px;background:var(--border);margin:8px 12px}
@media (max-width:820px){
.nav-links{display:none}
.nav-inner > .btn-ghost,.nav-right > .btn-ghost{display:none}
.nav-burger{display:flex}
}
/* ---------- тумблер темы (день/ночь/система) ---------- */
.theme-tog{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border);flex:none}
.theme-tog button{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:var(--radius-pill);color:var(--muted);cursor:pointer;transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease)}
.theme-tog button:hover{color:var(--ink)}
.theme-tog button[aria-pressed="true"]{background:var(--card-bg);color:var(--ink);box-shadow:0 1px 3px rgba(15,18,34,.1)}
[data-theme="dark"] .theme-tog button[aria-pressed="true"]{box-shadow:0 1px 3px rgba(0,0,0,.45)}
.theme-tog svg{width:16px;height:16px}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--btn-bg);color:var(--btn-ink);font-size:15px;font-weight:600;padding:14px 26px;border-radius:var(--radius-btn);border:none;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(15,18,34,.40);color:var(--btn-ink)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-outline{background:var(--card-bg);color:var(--ink);border:1px solid var(--border)}
.btn-outline:hover{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* ---------- HERO + MESH (эталон сочности Lovable) ----------
Три слоя, каждый со своей работой:
1) .hero background = --hero-bg — ПОЛНЫЙ ВЕРТИКАЛЬНЫЙ ПУТЬ по цвету, до самых краёв;
2) .mesh-blobs — органика поверх пути, saturate(--mesh-saturate) = near-neon;
3) .mesh-veil — ТУГОЙ светлый ореол ТОЛЬКО под H1 (эллипс 48%×32%), не белая вуаль на всё;
4) .mesh-fade — короткий мост вниз: цвет растворяется в полотне без резкого стыка. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:140px 24px 80px;background:var(--hero-bg)}
/* маска живёт на БЛОБАХ, а не на всём .mesh: ореол и нижний мост не должны обрезаться.
Маска нигде не уходит в 0 — «цвет до краёв» (раньше диагональ выцветала в прозрачность). */
.mesh{position:absolute;inset:0;pointer-events:none}
.mesh-blobs{position:absolute;inset:-8%;filter:blur(58px) saturate(var(--mesh-saturate,1.62));opacity:var(--mesh-opacity)}
/* маска — только у блобов внутри .mesh (страница входа со своим фоном не задета) */
.mesh > .mesh-blobs{
-webkit-mask-image:linear-gradient(135deg,#000 58%,rgba(0,0,0,.78) 82%,rgba(0,0,0,.58) 100%);
mask-image:linear-gradient(135deg,#000 58%,rgba(0,0,0,.78) 82%,rgba(0,0,0,.58) 100%);
-webkit-mask-size:280% 280%;mask-size:280% 280%;
-webkit-mask-position:0% 0%;mask-position:0% 0%}
/* интро: тот же флаговый sweep, теперь по слою блобов */
.mesh.intro .mesh-blobs{animation:rvFlagMask 800ms var(--ease) 100ms both}
.blob{position:absolute;border-radius:50%}
.mesh-veil{position:absolute;inset:0;background:var(--mesh-veil)}
.mesh-fade{position:absolute;left:0;right:0;bottom:0;height:clamp(90px,14%,190px);
background:linear-gradient(to bottom, transparent, var(--hero-out) 92%)}
.hero-inner{position:relative;z-index:1;width:min(1100px,100%);display:flex;flex-direction:column;align-items:center}
.hero-inner.intro{animation:rvDepth 600ms var(--ease) 600ms both}
.h1{margin:0;font-size:clamp(36px,5.5vw,60px);font-weight:800;letter-spacing:-.022em;line-height:1.05;text-align:center}
/* фирменное интро: H1 по словам (спека v2.0: rvWordIn 500ms, stagger 80ms от 1000ms) */
.hero .w{display:inline-block;animation:rvWordIn 500ms var(--ease) both}
.hero .compose{animation:rvUp24 300ms var(--ease) 1500ms both}
.rv-static .hero .w,.rv-static .hero .compose{animation:none !important}
/* D. glow «своё»: мягкое свечение флага под ключевым словом (без пульсации).
text-shadow рисуется от контуров глифов и виден при color:transparent (background-clip:text). */
.h1 .grad{background:var(--flag);-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 0 24px rgba(74,123,240,.32),0 0 30px rgba(226,59,78,.2),0 0 36px rgba(245,51,77,.22)}
[data-theme="dark"] .h1 .grad{text-shadow:0 0 24px rgba(143,176,247,.50),0 0 30px rgba(172,160,247,.44),0 0 38px rgba(245,120,138,.40)}
.hero-sub{margin:18px auto 0;max-width:600px;font-size:clamp(15.5px,1.5vw,16.5px);line-height:1.55;color:var(--muted);text-align:center}
.hero-note{margin:18px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.hero-guarantees{margin:14px auto 0;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:13.5px;color:var(--muted)}
.hero-guarantees span{display:inline-flex;align-items:center;gap:6px}
.dot-sep{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
/* ---------- ЧИТАЕМОСТЬ НА ЦВЕТЕ (hero стал насыщенным) ----------
Верх (H1 + подзаголовок) лежит в светлом ореоле → тёмные чернила, но «густые».
Всё, что НИЖЕ композера, лежит на фиолете/алом → светлый текст. Обе темы. */
.hero .hero-sub{color:var(--ink-2)}
.hero .hero-note,
.hero .hero-guarantees{color:rgba(255,255,255,.90);text-shadow:0 1px 14px rgba(11,14,22,.30)}
.hero .dot-sep{background:rgba(255,255,255,.55)}
.hero .teaser-row{color:rgba(255,255,255,.72)}
.hero .teaser-row.active{color:#fff}
.hero .teaser-row .ind .done{color:#D9F7E6}
.hero .teaser-row .ind .live{background:#fff}
/* input card */
.compose{width:min(820px,100%);margin:clamp(22px,3.2vh,38px) auto 0}
/* СВЕТЛЫЙ КОМПОЗЕР (критика 50мс: тёмный бокс = «дев-консоль», пугает не-технаря).
Светлое поле говорит «просто напиши обычными словами». Остаётся самым тяжёлым объектом по массе+тени. */
.compose-card{position:relative;background:rgba(255,255,255,.9);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 10px rgba(15,18,34,.06), 0 30px 64px -26px rgba(30,50,120,.34);padding:18px 16px 12px 22px;transition:box-shadow var(--t-base) var(--ease)}
/* магия: флаг-волосок в покое почти невидим, «разгорается» при фокусе */
.compose-card::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;background:var(--grad-brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.16;pointer-events:none;transition:opacity var(--t-base) var(--ease)}
.compose-card:focus-within::before{opacity:.68}
.compose-card:focus-within{box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 10px rgba(15,18,34,.06), 0 30px 64px -26px rgba(30,50,120,.34), 0 0 30px -8px rgba(47,90,224,.28)}
.compose-card textarea{display:block;width:100%;border:none;outline:none;resize:none;background:transparent;font-size:16.5px;line-height:1.5;color:#1A1A2E;min-height:48px;padding:0}
.compose-card textarea::placeholder{color:#8A8FA0;opacity:1}
.compose-row{display:flex;align-items:center;gap:4px;margin-top:6px;position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background var(--t-micro)}
.pill:hover{background:var(--surface-2)}
.dots{display:inline-flex;gap:3px;align-items:center}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--border);display:inline-block}
.dots i.on{background:var(--ink)}
.icon-btn{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:background var(--t-micro)}
.icon-btn:hover{background:var(--icon-hover-bg);color:var(--ink)}
.send-btn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:var(--btn-bg);color:var(--btn-ink);cursor:pointer;margin-left:6px;box-shadow:var(--shadow-btn);transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro)}
.send-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(15,18,34,.45)}
.grow{flex:1}
/* контролы внутри тёмного композера — светло-muted на тёмном (контраст AA) */
/* Lovable-принцип: селектор — тихий текст без рамки/фона/точек */
.compose-card .pill{background:transparent;border:none;padding:8px 10px;color:var(--muted);font-size:13.5px}
.compose-card .pill:hover{background:rgba(15,18,34,.05);color:var(--ink)}
.compose-card .pill .dots{display:none}
.compose-card .icon-btn{color:var(--muted)}
.compose-card .icon-btn:hover{background:rgba(15,18,34,.06);color:var(--ink)}
/* кнопка отправки: в покое приглушена; при вводе вспыхивает флагом (синий→алый, без фиолета) */
.compose-card .send-btn{width:42px;height:42px;background:rgba(15,18,34,.06);color:#6B7280;box-shadow:none;transition:background var(--t-base) var(--ease),color var(--t-base),box-shadow var(--t-base),transform var(--t-micro) var(--ease)}
.compose-card .send-btn:hover{background:rgba(15,18,34,.10)}
.compose-card .send-btn.ready{background:linear-gradient(120deg,#2F5AE0,#E23B4E);color:#fff;box-shadow:0 8px 26px -6px rgba(47,90,224,.45)}
.compose-card .send-btn.ready:hover{box-shadow:0 12px 30px -6px rgba(47,90,224,.55)}
/* пустой запрос → кнопка недоступна (визуально и по клику) */
.compose-card .send-btn:disabled{cursor:not-allowed;opacity:.5;background:rgba(255,255,255,.09);color:#8A94A8;box-shadow:none;transform:none}
.compose-card .send-btn:disabled:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.09)}
@keyframes rvNudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.rv-nudge{animation:rvNudge 320ms var(--ease)}
.rv-static .rv-nudge{animation:none}
/* mode dropdown — v3 §3: origin-aware вылет из пилюли (открывается вверх),
enter --t-base, exit --t-exit; прерывается transition (не keyframes).
Состояние ведёт JS: .entering (from-state) → снятие → рост; .leaving → уход, затем hidden. */
.sel-drop{position:absolute;bottom:52px;right:52px;left:auto;width:min(340px,90vw);background:var(--card-bg);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:6px;z-index:20;
transform-origin:var(--pop-origin,bottom right);
opacity:1;transform:translateY(0) scale(1);
transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.sel-drop.entering{opacity:0;transform:translateY(8px) scale(.97);transition:none} /* старт .97 — НЕ scale(0) */
.sel-drop.leaving{opacity:0;transform:translateY(8px) scale(.97);transition-duration:var(--t-exit)}
.sel-row{display:block;width:100%;text-align:left;border:none;background:transparent;border-radius:12px;padding:11px 12px;cursor:pointer;transition:background var(--t-micro)}
.sel-row:hover{background:var(--surface)}
.sel-row.active{background:var(--surface)}
.sel-row .top{display:flex;align-items:center;gap:10px}
.sel-row .name{font-size:15px;font-weight:600}
.sel-row .price{font-weight:700;font-variant-numeric:tabular-nums}
.sel-row .sub{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.sel-foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--border);margin-top:4px;padding:12px 12px 8px;font-size:13.5px;color:var(--muted)}
/* ============================================================
v3 §3 — ВЫЛЕТАЮЩИЕ ОКНА (flying windows) на нативном