/* ============================================================
   ЖужжимИИ / BuzzAI — landing v3 «editorial»
   Кремовая бумага + гигантская антиква + медовые акценты.
   Вдохновлено quiet-luxury направлением Wispr Flow.
   ============================================================ */

:root {
    --paper: #FFFBEA;        /* тёплая бумага (lumen) */
    --paper-dark: #F1EBD2;   /* затемнённая бумага */
    --ink: #1C1A15;          /* чернила */
    --ink-soft: #55503F;     /* вторичный текст */
    --line: rgba(28, 26, 21, 0.30);
    --line-soft: rgba(28, 26, 21, 0.12);
    --honey: #F7A500;        /* мёд */
    --glow: #FFA946;         /* тёплый оранж (badges) */
    --pollen: #FFE9A8;       /* пыльца */
    --pine: #123B2E;         /* глубокая хвоя (тёмные блоки) */
    --lilac: #B9A0D9;        /* сирень для serif-цитат */
    --serif: 'EB Garamond', 'Georgia', serif;
    --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --r-section: clamp(28px, 5vw, 64px);
    --grain: 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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Атрибут hidden должен побеждать авторские display:flex/inline-flex (иначе
   «скрытые до релиза» кнопки iPhone/Android светятся мёртвыми ссылками). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
.em { font-style: italic; font-weight: 400; }
::selection { background: var(--pollen); color: var(--ink); }

/* 2026-07-24: reveal-on-scroll УБРАН — всё сразу видно (иначе кажется, что ниже
   контента нет). Элементы .rise больше не прячутся до прокрутки. */
html.js .rise, html.js .rise.on { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .rise, .rise { opacity: 1; transform: none; filter: none; transition: none; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- типографика ---------- */
.h2 {
    font-size: clamp(44px, 6.4vw, 82px);
    line-height: 1.02;
    text-align: center;
    font-weight: 500;
}
.section-sub {
    max-width: 620px;
    margin: 26px auto 0;
    text-align: center;
    color: var(--ink-soft);
    font-size: clamp(16px, 1.9vw, 19px);
    font-weight: 500;
}
.section-sub.left { margin-left: 0; text-align: left; }

/* ---------- кнопки (бордюрные пилюли, как у дорогих) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 14px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--ink);
    transition: background .3s, color .3s, box-shadow .3s, border-color .3s;
    will-change: transform;
}
.btn-ico { width: 19px; height: 19px; flex-shrink: 0; }
.btn-lg { padding: 17px 30px; font-size: 16px; }

.btn-solid { background: var(--ink); color: var(--paper); box-shadow: 0 2px 0 rgba(28,26,21,.9); }
.btn-solid:hover { background: #383327; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-cream { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-cream:hover { background: var(--pollen); border-color: var(--pollen); }
.btn-cream-line { background: transparent; color: var(--paper); border-color: rgba(255,251,234,.7); }
.btn-cream-line:hover { background: rgba(255,251,234,.14); border-color: var(--paper); }

/* ---------- чипы ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip svg { width: 17px; height: 17px; }

/* ---------- капсула-волна ---------- */
.capsule-wave { display: inline-flex; align-items: center; gap: 3.5px; height: 26px; }
.capsule-wave i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: currentColor;
    transform: scaleY(.26);
    animation: wbar 1.05s ease-in-out infinite;   /* transform — не дёргает layout */
}
.capsule-wave i:nth-child(odd) { animation-duration: 1.3s; }
.capsule-wave-sm { height: 16px; }
.capsule-wave-sm i { width: 2.5px; }
@keyframes wbar { 0%,100% { transform: scaleY(.26); } 50% { transform: scaleY(1); } }

/* ============ NAV ============ */
.nav {
    position: fixed;
    inset: 14px 0 auto;
    z-index: 100;
    padding: 0 16px;
    display: flex;
    justify-content: center;
}
.nav-card {
    width: 100%;
    max-width: 1160px;
    display: flex;
    align-items: center;
    gap: 26px;
    background: rgba(255, 251, 234, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    padding: 12px 18px;
    transition: box-shadow .3s, background .3s;
}
.nav.scrolled .nav-card { box-shadow: 0 14px 40px rgba(28, 26, 21, .10); background: rgba(255, 251, 234, 0.96); }
.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}
.logo-bee { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    transition: color .2s;
}
.nav-links a:hover { color: var(--ink); }
.nav .btn { padding: 11px 18px; font-size: 14px; }

/* ---------- переключатель языка ---------- */
.lang-switcher { position: relative; }
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1.5px solid var(--line-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.lang-btn:hover { border-color: var(--ink); }
.lang-btn svg { width: 10px; height: 6px; transition: transform .25s; }
.lang-switcher.open .lang-btn svg { transform: rotate(180deg); }
.lang-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 160px;
    background: #FFFEF7;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(28, 26, 21, .14);
    padding: 6px;
    z-index: 110;
}
.lang-switcher.open .lang-menu { display: block; }
.lang-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.lang-menu a:hover { background: var(--pollen); }
.lang-menu a.is-current { color: var(--honey); pointer-events: none; }

/* ============ HERO ============ */
.hero {
    position: relative;
    /* 2026-07-30: сжали вертикаль — из-под фолда выглядывает заголовок apps,
       понятно, что дальше есть контент (просьба юзера «часть второго слайда»). */
    padding: clamp(88px, 10.5vh, 120px) 0 0;
    text-align: center;
    overflow: hidden;
}
.hero-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(58px, 11.5vw, 148px);
    line-height: 0.98;
    letter-spacing: -0.015em;
}
.hero-title .line { display: block; }
.hero-title .em { font-weight: 400; }
/* слова появляются из расфокуса по одному (гейт по html.js) */
html.js .hero-title .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    filter: blur(14px);
}
.hero-title.play .w { animation: wordIn 1.1s cubic-bezier(.16,.8,.26,1) forwards; }
.hero-title.play .w:nth-child(1) { animation-delay: .05s; }
.hero-title.play .line:nth-child(1) .w:nth-child(2) { animation-delay: .17s; }
.hero-title.play .line:nth-child(2) .w:nth-child(1) { animation-delay: .32s; }
.hero-title.play .line:nth-child(2) .w:nth-child(2) { animation-delay: .46s; }
@keyframes wordIn {
    to { opacity: 1; transform: none; filter: blur(0); }
}
.hero-sub {
    max-width: 560px;
    margin: 22px auto 0;
    font-size: clamp(17px, 2vw, 21px);
    color: var(--ink-soft);
    font-weight: 500;
    transition-delay: .5s;
}
.hero-cta {
    margin-top: 26px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    transition-delay: .65s;
}
.hero-note {
    margin-top: 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    transition-delay: .75s;
}
.hero-avail {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ink-soft);
    transition-delay: .8s;
}

/* Названия систем в этой строчке — ссылки на скачивание. Красим их сами: иначе браузер
   выкрасит в свой синий, и строчка, задуманная как тихая подпись, начнёт спорить с кнопкой
   над ней. Подчёркивание оставляем — без него ссылку не отличить от обычного слова. */
.hero-avail a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(28, 26, 21, .35);
    transition: color .2s, text-decoration-color .2s;
}
.hero-avail a:hover {
    color: var(--ink);
    text-decoration-color: currentColor;
}

/* --- лента речи --- */
.ribbon {
    position: relative;
    /* 2026-07-24: убрали пустой низ ленты (контейнер был выше самого рисунка) —
       так apps подтягивается вверх, а сам hero остаётся на месте. */
    height: clamp(132px, 16vw, 195px);
    margin-top: clamp(0px, 1.5vw, 14px);
}
.ribbon-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ribbon-text {
    font-family: var(--sans);
    font-size: 21px;
    font-weight: 600;
    fill: var(--ink);
}
.ribbon-text-raw { fill: rgba(28, 26, 21, .38); }
.ribbon-text-clean { fill: var(--ink); }
.ribbon-capsule {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    background: var(--ink);
    color: var(--pollen);
    border-radius: 999px;
    padding: 15px 26px;
    display: flex;
    align-items: center;
    box-shadow: 0 18px 50px rgba(28, 26, 21, .35), 0 0 0 7px rgba(255, 251, 234, .9), 0 0 0 8px var(--line-soft);
    animation: capsulePulse 2.6s ease-in-out infinite;
}
@keyframes capsulePulse {
    0%,100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.045); }
}
.ribbon-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--glow);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 7px 14px;
    border: 1.5px solid var(--ink);
    box-shadow: 0 6px 18px rgba(28,26,21,.18);
    opacity: 0;
    transform: translateY(12px) rotate(-4deg);
    transition: opacity .6s, transform .6s cubic-bezier(.2,.9,.3,1.4);
}
.ribbon-badge svg { width: 13px; height: 13px; }
.ribbon-badge-1 { left: 60%; top: 12%; rotate: 3deg; transition-delay: 1.2s; }
.ribbon-badge-2 { left: 72%; top: 66%; rotate: -3deg; transition-delay: 1.7s; }
.ribbon.on .ribbon-badge { opacity: 1; transform: translateY(0) rotate(0); }
.ribbon-bee {
    position: absolute;
    width: 46px; height: 46px;
    left: 24%;
    top: 4%;
    filter: drop-shadow(0 8px 14px rgba(28,26,21,.22));
    animation: beeHover 5.5s ease-in-out infinite;
}
@keyframes beeHover {
    0%,100% { transform: translate(0,0) rotate(-7deg); }
    30% { transform: translate(26px,-16px) rotate(6deg); }
    65% { transform: translate(-14px,-26px) rotate(-4deg); }
}

/* ============ APPS ============ */
.apps { padding: clamp(8px, 1.6vw, 24px) 0 0; }
.apps-title {
    font-size: clamp(38px, 5.4vw, 68px);
    line-height: 1.04;
    text-align: center;
    font-weight: 500;
}
.apps-marquee {
    margin-top: 54px;
    display: grid;
    gap: 14px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.apps-row {
    display: flex;
    gap: 14px;
    width: max-content;
}
.apps-row span {
    padding: 13px 24px;
    border: 1.5px solid var(--line-soft);
    background: #FFFEF7;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    box-shadow: 0 2px 0 rgba(28,26,21,.05);
}
.apps-row-a { animation: slideL 42s linear infinite; }
.apps-row-b { animation: slideR 48s linear infinite; }
@keyframes slideL { to { transform: translateX(-50%); } }
@keyframes slideR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.apps-proof {
    max-width: 760px;
    margin: clamp(70px, 9vw, 120px) auto 0;
    text-align: center;
    font-size: clamp(24px, 3.2vw, 38px);
    line-height: 1.25;
    color: var(--ink-soft);
    font-style: italic;
    font-weight: 400;
    padding: 0 24px;
}

/* ============ SPEED ============ */
.speed { padding: clamp(100px, 13vw, 170px) 0 0; }
.vs {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 20px;
    align-items: stretch;
}
.vs-card {
    border-radius: 28px;
    min-height: 480px;
    position: relative;
    overflow: hidden;
}
.vs-keyboard {
    background: #FFFEF7;
    border: 1.5px solid var(--line-soft);
    padding: 40px 36px;
}
.vs-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.vs-wpm {
    font-size: clamp(44px, 5vw, 64px);
    line-height: 1;
    margin-top: 10px;
}
.vs-wpm .count { font-variant-numeric: tabular-nums; }
.vs-typing {
    margin-top: 40px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink-soft);
    min-height: 200px;
}
.vs-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--ink);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* развязка гонки: штамп «Готово» на карточке ЖужжимИИ + подпись у клавиатуры */
.vs-stamp {
    position: absolute;
    top: 26px;
    right: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--glow);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 8px 16px;
    border: 1.5px solid var(--ink);
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    rotate: 3deg;
    opacity: 0;
    transform: scale(1.25);
    transition: opacity .45s, transform .45s cubic-bezier(.2,.9,.3,1.4);
}
.vs-stamp.on { opacity: 1; transform: scale(1); }
.vs-still {
    margin-top: 14px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15.5px;
    color: var(--ink-soft);
    opacity: 0;
    transition: opacity .6s;
}
.vs-still.on { opacity: 1; }

/* кинематографичный «кадр» */
.cine {
    position: relative;
    background:
        radial-gradient(120% 90% at 78% 8%, #A8C4DE 0%, transparent 52%),
        radial-gradient(130% 100% at 12% 18%, #7FA3C4 0%, transparent 55%),
        radial-gradient(120% 120% at 50% 105%, #A96A25 0%, transparent 62%),
        radial-gradient(90% 70% at 82% 78%, #D89A3F 0%, transparent 55%),
        linear-gradient(175deg, #86A7C6 0%, #C1955C 58%, #6E4A22 100%);
}
.cine::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: .14;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.vs-flow { color: var(--paper); }
.vs-flow-inner {
    position: relative;
    height: 100%;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
}
.vs-flow .vs-label { color: rgba(255, 251, 234, .8); }
.vs-flow .vs-wpm { color: var(--paper); text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.vs-stream {
    margin-top: 40px;
    flex: 1;
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 254, 247, .95);
    text-shadow: 0 1px 14px rgba(0,0,0,.3);
    overflow: hidden;
}
.vs-stream .ln {
    display: block;
    opacity: 0;
    transform: translateY(10px);
    filter: blur(5px);
    transition: opacity .5s, transform .5s, filter .5s;
}
.vs-stream .ln.in { opacity: 1; transform: none; filter: none; }
.vs-capsule {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    border: 1.5px solid rgba(255, 251, 234, .85);
    color: var(--paper);
    border-radius: 999px;
    padding: 13px 24px;
    backdrop-filter: blur(4px);
    background: rgba(28, 26, 21, .18);
}

/* ============ WORK (роли) ============ */
.work { padding: clamp(100px, 13vw, 170px) 0 0; }
.work-grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.work-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
}
.work-chips .chip { font-size: 16px; padding: 13px 24px; }
.work-window {
    background: #FFFEF7;
    border: 1.5px solid var(--line-soft);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(28, 26, 21, .12);
    overflow: hidden;
}
.ww-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.ww-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--paper-dark); border: 1px solid var(--line-soft); }
.ww-app { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ww-body { padding: 26px 28px 30px; min-height: 190px; }
.ww-text { font-size: 17.5px; line-height: 1.75; }
.ww-text::after {
    content: '';
    display: inline-block;
    width: 2px; height: 1.1em;
    background: var(--honey);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: caret 1.05s steps(1) infinite;
}
.ww-hud {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 28px 24px;
    background: var(--ink);
    color: var(--pollen);
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 9px 18px;
}
.work-tag {
    margin-top: 22px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-style: italic;
    color: var(--ink-soft);
    text-align: center;
}

/* ============ NATURAL ============ */
.natural { padding: clamp(100px, 13vw, 170px) 0 0; }
.natural-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
}
.natural-copy .h2 { text-align: left; }
.natural-ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

.natural-demo { position: relative; }
.nd-raw {
    border-radius: 26px 26px 0 0;
    padding: 34px 34px 46px;
    color: var(--paper);
    position: relative;
}
.nd-raw-text {
    font-size: 16.5px;
    line-height: 1.85;
    color: rgba(255, 254, 247, .96);
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.nd-raw-text mark {
    background: transparent;
    color: inherit;
    border-radius: 6px;
    padding: 1px 5px;
    transition: background .5s, color .5s, text-decoration-color .5s;
    text-decoration: line-through;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
}
.natural-demo.on .nd-raw-text mark {
    background: rgba(255, 169, 70, .35);
    text-decoration-color: var(--glow);
}
.natural-demo.on .nd-raw-text .m1 { transition-delay: .4s; }
.natural-demo.on .nd-raw-text .m2 { transition-delay: .65s; }
.natural-demo.on .nd-raw-text .m3 { transition-delay: .9s; }
.natural-demo.on .nd-raw-text .m4 { transition-delay: 1.15s; }
.natural-demo.on .nd-raw-text .m5 { transition-delay: 1.4s; }
.nd-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--glow);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 7px 14px;
    border: 1.5px solid var(--ink);
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    opacity: 0;
    transform: translateY(10px) scale(.9);
    transition: opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.35);
    z-index: 2;
}
.nd-badge svg { width: 13px; height: 13px; }
.nd-badge-1 { top: -14px; right: 26px; rotate: 2deg; transition-delay: 1s; }
.nd-badge-2 { bottom: 116px; left: -18px; rotate: -3deg; transition-delay: 1.6s; }
.natural-demo.on .nd-badge { opacity: 1; transform: none; }

.nd-clean {
    position: relative;
    margin: -18px 22px 0;
    background: var(--ink);
    color: var(--paper);
    border-radius: 18px;
    padding: 24px 26px 18px;
    box-shadow: 0 30px 70px rgba(28, 26, 21, .35);
}
.nd-clean-text { font-size: 15.5px; line-height: 1.7; }
.nd-clean-text p + p { margin-top: 8px; }
.nd-clean-text ul { margin: 6px 0 4px 20px; }
.nd-clean-text li { margin-top: 4px; }
.nd-clean-text > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s, transform .55s;
}
.natural-demo.on .nd-clean-text > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 2s; }
.natural-demo.on .nd-clean-text > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 2.3s; }
.natural-demo.on .nd-clean-text > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 2.6s; }
.nd-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 251, 234, .18);
    color: rgba(255, 251, 234, .65);
    font-size: 14px;
}
.nd-send {
    margin-left: auto;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--glow);
    color: var(--ink);
    border-radius: 50%;
    font-weight: 800;
}

/* --- три фичи --- */
.feats {
    margin-top: clamp(80px, 10vw, 130px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.feat {
    background: #FFFEF7;
    border: 1.5px solid var(--line-soft);
    border-radius: 26px;
    padding: 34px 30px 28px;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s;
}
.feat:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(28,26,21,.12); }
.feat h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.1; }
.feat p { margin-top: 12px; color: var(--ink-soft); font-size: 15.5px; }
.feat-visual { margin-top: 26px; min-height: 96px; position: relative; }
.feat-dict, .feat-langs { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.feat-dict span, .feat-langs span {
    padding: 7px 14px;
    border: 1.5px solid var(--line-soft);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--paper);
    opacity: 0;
    transform: translateY(8px) scale(.92);
    transition: opacity .45s, transform .45s cubic-bezier(.2,.9,.3,1.3), border-color .3s, color .3s;
}
.feat.on .feat-visual span { opacity: 1; transform: none; }
.feat-visual span:nth-child(1) { transition-delay: .15s; }
.feat-visual span:nth-child(2) { transition-delay: .27s; }
.feat-visual span:nth-child(3) { transition-delay: .39s; }
.feat-visual span:nth-child(4) { transition-delay: .51s; }
.feat-visual span:nth-child(5) { transition-delay: .63s; }
.feat-visual span:nth-child(6) { transition-delay: .75s; }
.feat-visual span:nth-child(7) { transition-delay: .87s; }
.feat-visual span:nth-child(8) { transition-delay: .99s; }
.feat-dict span:hover, .feat-langs span:hover { border-color: var(--honey); color: var(--ink); }
.feat-plane { color: var(--ink-soft); }
.plane-path { width: 100%; height: 60px; position: absolute; bottom: 6px; left: 0; opacity: .6; }
.plane {
    position: absolute;
    font-size: 26px;
    bottom: 40px;
    left: 0;
    transform: rotate(-12deg);
    animation: planeFly 7s ease-in-out infinite;
}
@keyframes planeFly {
    0% { left: -4%; bottom: 8px; transform: rotate(-16deg); }
    50% { left: 46%; bottom: 46px; transform: rotate(4deg); }
    100% { left: 98%; bottom: 22px; transform: rotate(14deg); }
}

/* ============ PLATFORMS ============ */
.platforms { padding: clamp(110px, 14vw, 180px) 0 0; text-align: center; }
.plat-chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.chip-plat { background: #FFFEF7; }
.platforms .h2 { margin-top: 0; }

/* ============ LOVE (отзывы) ============ */
.love { padding: clamp(110px, 14vw, 180px) 0 0; }
.love-title {
    text-align: center;
    font-size: clamp(52px, 8.5vw, 110px);
    line-height: 1;
    font-weight: 500;
}

/* --- вертикальный бесшовный marquee (колонки плывут навстречу, hover — пауза) --- */
.love-marquee {
    max-width: 1160px;
    margin: 54px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: clamp(520px, 66vh, 680px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.love-col { min-width: 0; }
.love-set { display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px; }
/* Движение только при html.js (JS создаёт .love-track с дублем контента). */
html.js .love-col-a .love-track { animation: loveUp 46s linear infinite; }
html.js .love-col-b .love-track { animation: loveDown 60s linear infinite; }
html.js .love-col-c .love-track { animation: loveUp 53s linear infinite; }
.love-marquee:hover .love-track { animation-play-state: paused; }
@keyframes loveUp   { to { transform: translateY(-50%); } }
@keyframes loveDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.love-card {
    background: #FFFEF7;
    border: 1.5px solid var(--line-soft);
    border-radius: 22px;
    padding: 26px 26px 22px;
    box-shadow: 0 2px 0 rgba(28, 26, 21, .04);
    transition: transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s, border-color .35s;
}
.love-card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: 0 18px 44px rgba(28, 26, 21, .10); }
.love-card blockquote { font-size: 15.5px; line-height: 1.62; font-weight: 500; }
.love-card figcaption {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.35;
}
.love-card b { color: var(--ink); font-size: 13.5px; }
.love-ava {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 17px;
    border: 1.5px solid rgba(28, 26, 21, .10);
}
.love-ava[data-t="1"] { background: var(--pollen); color: #7A5A00; }
.love-ava[data-t="2"] { background: var(--pine); color: #EFE7C8; }
.love-ava[data-t="3"] { background: #EADFF7; color: #6B4E93; }
.love-ava[data-t="4"] { background: var(--glow); color: #4A2B00; }

/* --- полоса цифр: журнальные figures с линейками --- */
.figures {
    margin-top: clamp(64px, 9vw, 110px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1.5px solid var(--line);
    border-bottom: 1.5px solid var(--line);
}
.figure {
    text-decoration: none;
    padding: clamp(28px, 3.5vw, 46px) clamp(18px, 2.4vw, 32px) clamp(26px, 3vw, 40px);
    border-left: 1px solid var(--line-soft);
    position: relative;
    transition: background .35s;
}
.figure:first-child { border-left: none; }
.figure:hover { background: #FFF5D6; }
.figure::after {
    content: '↗';
    position: absolute;
    top: 16px;
    right: 18px;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--honey);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity .3s, transform .3s;
}
.figure:hover::after { opacity: 1; transform: none; }
.figure-num {
    font-size: clamp(46px, 5.4vw, 82px);
    line-height: 1;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}
.figure-num .u { color: var(--honey); }
.fig-count { font-variant-numeric: tabular-nums; }
.figure-cap {
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.figure-quote {
    margin-top: 9px;
    font-style: italic;
    font-weight: 400;
    font-size: 15.5px;
    color: var(--ink-soft);
}

/* ============ DEMO ============ */
.demo { padding: clamp(110px, 14vw, 180px) 0; }
.demo-shell { max-width: 820px; margin: 50px auto 0; }
.demo-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 24px;
}
.demo-window {
    position: relative;
    background: #FFFEF7;
    border: 1.5px solid var(--line);
    border-radius: 28px;
    box-shadow: 0 40px 100px rgba(28, 26, 21, .14);
    padding: 34px 36px 30px;
}
.demo-field { min-height: 230px; font-size: 17.5px; line-height: 1.75; }
.demo-placeholder { color: rgba(28,26,21,.55); font-style: italic; font-family: var(--serif); font-size: 19px; }
.demo-output ol, .demo-output ul { margin: 8px 0 8px 22px; }
.demo-output li { margin-top: 5px; }
.demo-output p + p { margin-top: 10px; }
.demo-output.caret-on::after {
    content: '';
    display: inline-block;
    width: 2px; height: 1.1em;
    background: var(--honey);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: caret 1.05s steps(1) infinite;
}
.demo-dock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid var(--line-soft);
    padding-top: 22px;
    margin-top: 18px;
}
.demo-hint { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.demo-hint a { color: var(--ink); }
.demo-rec {
    position: relative;
    width: 66px; height: 66px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--pollen);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s, background .25s, color .25s;
}
.demo-rec:hover { transform: scale(1.07); }
.demo-rec svg { width: 26px; height: 26px; }
.rec-stop { display: none; }
.rec-ring {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(247, 165, 0, .8);
    opacity: 0;
}
.demo-rec.recording { background: var(--glow); color: var(--ink); border-color: var(--glow); }
.demo-rec.recording .rec-mic { display: none; }
.demo-rec.recording .rec-stop { display: block; }
.demo-rec.recording .rec-ring { opacity: 1; animation: ring 1.3s ease-out infinite; }
@keyframes ring {
    0% { transform: scale(1); opacity: .85; }
    100% { transform: scale(1.6); opacity: 0; }
}
.demo-rec:disabled { opacity: .45; cursor: default; transform: none; }
.demo-pill {
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: var(--pollen);
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 18px 44px rgba(28, 26, 21, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s, transform .35s;
    white-space: nowrap;
}
.demo-pill b { font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }
.demo-pill.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.demo-pill.processing .capsule-wave i { background: #9BE3A9; animation-duration: .7s; }

/* ============ FINAL CTA ============ */
.final {
    position: relative;
    margin: 0 clamp(10px, 2vw, 24px);
    border-radius: var(--r-section);
    overflow: hidden;
    padding: clamp(110px, 15vw, 200px) 0;
    text-align: center;
    color: var(--paper);
}
.final-grain { position: absolute; inset: 0; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
.final-inner { position: relative; }
.final-title {
    font-size: clamp(64px, 11vw, 150px);
    line-height: 1;
    font-weight: 500;
    text-shadow: 0 4px 40px rgba(0,0,0,.3);
}
.final-sub {
    margin: 26px auto 0;
    max-width: 560px;
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255, 251, 234, .92);
    text-shadow: 0 1px 16px rgba(0,0,0,.35);
    font-weight: 500;
}
.final-ctas {
    margin-top: 40px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.final-more {
    margin-top: 22px;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 251, 234, .85);
    font-size: 15px;
    font-weight: 600;
}
.final-more a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255,251,234,.4);
    padding-bottom: 1px;
    transition: color .25s, border-color .25s;
}
.final-more a:hover { color: #fff; border-color: #fff; }
.final-more svg { width: 15px; height: 15px; }
.final-note { margin-top: 26px; font-size: 13.5px; color: rgba(255, 251, 234, .75); }
.final-bee {
    position: absolute;
    width: 54px; height: 54px;
    right: 12%;
    top: 14%;
    animation: beeHover 6s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.3));
}

/* ============ FOOTER ============ */
.footer { padding: clamp(80px, 10vw, 120px) 0 30px; overflow: hidden; }
.footer-top {
    display: flex;
    gap: clamp(40px, 8vw, 120px);
    flex-wrap: wrap;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-h { font-size: 22px; margin-bottom: 6px; color: var(--ink-soft); }
.footer-col a {
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    width: fit-content;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.footer-col a:hover { border-color: var(--ink); }

/* --- сцена: пчела летит по пунктиру и зависает над «ИИ» --- */
.footer-stage { position: relative; margin-top: clamp(44px, 6.5vw, 80px); padding: 0 24px; }
.footer-flight {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 300;
    margin-bottom: clamp(-64px, -5.5vw, -26px); /* пунктир ныряет к вордмарку */
    pointer-events: none;
}
.flight-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 1200px;
    height: 300px;
    transform-origin: 0 0; /* JS: scale(ширина/1200) — пчела не искажается */
    transform: scale(0);   /* до JS слой схлопнут — не раздувает документ на узких экранах */
}
.flight-path {
    stroke: rgba(28, 26, 21, .38);
    stroke-width: 2.5;
    stroke-dasharray: 1 11;
    stroke-linecap: round;
    fill: none;
}
/* Draw-in следа: clip-path inset на самом svg (transform у rect внутри <clipPath>
   в Safari глючит). Слева направо — синхронно с полётом пчелы. */
.flight-trail {
    clip-path: inset(-8% 100% -8% 0);
    -webkit-clip-path: inset(-8% 100% -8% 0);
}
.footer-stage.fly .flight-trail { animation: trailGrow 5.2s cubic-bezier(.55,.06,.35,.96) .15s forwards; }
@keyframes trailGrow { to { clip-path: inset(-8% 0 -8% 0); -webkit-clip-path: inset(-8% 0 -8% 0); } }
.footer-bee {
    position: absolute;
    left: 0;
    top: 0;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px; /* центр пчелы на траектории */
    offset-path: path('M -60 168 C 150 36, 350 224, 580 128 S 920 6, 1122 236');
    offset-rotate: 0deg;
    offset-distance: 0%;
    opacity: 0;
    filter: drop-shadow(0 10px 18px rgba(28, 26, 21, .25));
}
.footer-stage.fly .footer-bee {
    animation:
        beeFly 5.2s cubic-bezier(.55,.06,.35,.96) .15s forwards,
        beeSettle 3.4s ease-in-out 5.55s infinite;
}
@keyframes beeFly {
    0%   { offset-distance: 0%; opacity: 0; }
    5%   { opacity: 1; }
    100% { offset-distance: 100%; opacity: 1; }
}
@keyframes beeSettle {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-9px) rotate(4deg); }
}
/* Браузер без offset-path: пчела сразу в точке приземления, просто покачивается. */
@supports not (offset-path: path('M0 0 L1 1')) {
    .footer-bee { left: 1122px; top: 236px; opacity: 1; animation: beeSettle 3.4s ease-in-out infinite; }
    .footer-stage.fly .footer-bee { animation: beeSettle 3.4s ease-in-out infinite; }
}

/* --- вордмарк: SVG + textLength — всегда ровно от края до края --- */
.footer-mark-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.footer-mark-text {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 196px;          /* близко к натуральной ширине 990 — растяжка едва заметна */
    letter-spacing: -0.03em;
}
html.js .footer-mark-svg {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(10px);
    transition: opacity 1.1s cubic-bezier(.16,.8,.26,1) .25s,
                transform 1.1s cubic-bezier(.16,.8,.26,1) .25s,
                filter 1.1s cubic-bezier(.16,.8,.26,1) .25s;
}
html.js .footer-stage.fly .footer-mark-svg {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition-delay: .25s, .25s, .25s;
}
.footer-stage.fly .footer-mark-svg:hover { transform: translateY(-6px); transition-delay: 0s, 0s, 0s; }

.footer-bottom {
    margin-top: clamp(34px, 5vw, 54px);
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 500;
}
.footer-legal-links { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-legal-links a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 1px;
    transition: color .2s, border-color .2s;
}
.footer-legal-links a:hover { color: var(--ink); border-color: var(--ink); }
.footer-made { font-style: italic; font-family: var(--serif); font-size: 16px; }

/* ============ АДАПТИВ ============ */
@media (max-width: 1020px) {
    .vs { grid-template-columns: 1fr; }
    .vs-card { min-height: 380px; }
    .work-grid { grid-template-columns: 1fr; }
    .natural-grid { grid-template-columns: 1fr; }
    .natural-copy .h2, .section-sub.left { text-align: center; margin-left: auto; }
    .natural-ctas { justify-content: center; }
    .feats { grid-template-columns: 1fr; }
    .love-marquee { grid-template-columns: repeat(2, 1fr); height: clamp(480px, 58vh, 620px); }
    .love-col-c { display: none; }
    .figures { grid-template-columns: repeat(2, 1fr); }
    .figure { border-left: none; }
    .figure:nth-child(even) { border-left: 1px solid var(--line-soft); }
    .figure:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 760px) {
    .nav-links { display: none; }
    .nav .btn { margin-left: auto; }
    .hero-title { font-size: clamp(46px, 13.5vw, 76px); }
    .ribbon-text { font-size: 26px; }
    .ribbon-badge-2 { display: none; }
    .demo-window { padding: 24px 20px 24px; }
    .demo-dock { flex-direction: column-reverse; }
    .love-marquee { grid-template-columns: 1fr; height: 460px; }
    .love-col-b { display: none; }
    .figures { grid-template-columns: 1fr; }
    .figure { border-left: none; }
    .figure:nth-child(even) { border-left: none; }
    .figure:nth-child(n+2) { border-top: 1px solid var(--line-soft); }
    .footer-bottom { justify-content: center; text-align: center; }
    .footer-legal-links { justify-content: center; }
    .nd-clean { margin: -14px 10px 0; }
    .nd-badge-2 { left: 8px; }
}

/* ============ HOW (три шага) ============ */
.how { padding: clamp(100px, 13vw, 170px) 0 0; }
.how-grid {
    margin-top: clamp(48px, 6vw, 72px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1.5px solid var(--line);
}
.how-step {
    padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.6vw, 36px) 8px;
    border-left: 1px solid var(--line-soft);
}
.how-step:first-child { border-left: none; }
.how-step .how-num {
    font-size: clamp(60px, 6.5vw, 96px);
    line-height: 1;
    font-style: italic;
    color: var(--honey);
}
.how-step h3 {
    margin-top: 14px;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 500;
    line-height: 1.2;
}
.how-step p:not(.how-num) { margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; }
.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.12em;
    min-width: 44px;
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid var(--ink);
    border-radius: 10px;
    background: #FFFEF7;
    box-shadow: 0 3px 0 var(--ink);
}
.kbd svg { width: 20px; height: 20px; }

/* ============ FAQ ============ */
.faq { padding: clamp(100px, 13vw, 160px) 0 0; }
.faq-list { max-width: 760px; margin: clamp(40px, 5vw, 60px) auto 0; }
.faq-item { border-top: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 2px;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 500;
    transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #6B541B; }
.faq-x {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    transition: transform .3s cubic-bezier(.2,.8,.3,1.2);
}
.faq-x::before, .faq-x::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--honey);
}
.faq-x::after { transform: rotate(90deg); }
.faq-item[open] .faq-x { transform: rotate(45deg); }
.faq-item > p {
    padding: 0 2px 22px;
    max-width: 640px;
    color: var(--ink-soft);
    font-size: 15.5px;
}

/* ============ FINAL trust ============ */
.final-trust {
    margin: 24px auto 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    color: rgba(255, 251, 234, .88);
    font-size: 14px;
    font-weight: 600;
}
.final-trust li { display: inline-flex; align-items: center; gap: 7px; }
.final-trust svg { width: 15px; height: 15px; color: var(--glow); }

/* ============ DEMO after-success ============ */
.demo-after { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.demo-after .dq-cta { justify-content: flex-start; margin-top: 0; }
.demo-after-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }

/* Кнопки .dq-* общие для обоих блоков — и для «после расшифровки» (.demo-after),
   и для «лимит исчерпан» (.demo-quota). Раньше все правила были заскоплены под
   .demo-quota, поэтому в .demo-after ссылка/кнопка рендерились голыми (синий
   underline + системная кнопка внахлёст). Регрессия видна на скрине 2026-08-03. */
.dq-cta{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px;
}
.dq-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 22px;border-radius:12px;font-weight:600;font-size:15px;
    line-height:1.2;text-align:center;cursor:pointer;
    font-family:inherit;
    text-decoration:none;border:1.5px solid transparent;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease;
}
.dq-btn-primary{
    background:linear-gradient(135deg,#FFC531 0%,#FF8C42 60%,#FF6B9D 120%);
    color:#1C1A15;
    box-shadow:0 8px 22px -10px rgba(255,140,66,.55);
}
.dq-btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(255,140,66,.7);}
.dq-btn-line{
    background:transparent;color:var(--ink);border-color:currentColor;opacity:.7;
}
.dq-btn-line:hover{opacity:1;}
/* На узких экранах кнопки в колонку — иначе «Скачать…» и «Скопировать» не влезают. */
/* Шапка на узких телефонах (2026-08-24).
   В карточке шапки — логотип 143 px, переключатель языка 61 px и кнопка 124 px,
   плюс два зазора по 26 px: 380 px против 322 px доступных на экране 390 px.
   Кнопка уезжала за правый край. Это было и раньше, с «Попробовать в браузере»,
   просто её длину никто не мерил. Ужимаем зазоры и поля, кнопку не прячем:
   на телефоне она — единственный призыв, который виден при прокрутке. */
@media (max-width: 430px) {
    .nav-card { gap: 10px; padding-left: 12px; padding-right: 12px; }
    .nav-card .logo { font-size: 16px; gap: 7px; }
    .nav-card .logo-bee { width: 26px; height: 26px; }
    .nav-card .btn { padding: 12px 16px; font-size: 14px; gap: 7px; }
    .nav-card .lang-btn { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 520px){
    .dq-cta{flex-direction:column;align-items:stretch;}
    .dq-btn{width:100%;}
}

/* Красивая заглушка «лимит демо исчерпан» — 3/3 бесплатные попытки использованы. */
.demo-quota{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:8px 4px 4px;gap:14px;
}
.demo-quota .dq-check{
    width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#FFC531 0%,#FF8C42 100%);
    color:#1C1A15;
    box-shadow:0 8px 24px -8px rgba(255,140,66,.55);
}
.demo-quota .dq-title{
    font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em;
}
.demo-quota .dq-body{
    max-width:440px;margin:0;opacity:.75;font-size:15px;line-height:1.55;
}
.demo-quota .dq-body b{font-weight:700;opacity:1;}
/* Внутри «лимит исчерпан» — те же кнопки, но по центру (база .dq-* выше). */
.demo-quota .dq-cta{ justify-content:center; }

/* PNG-пчёлка вписывается в контейнер (у .logo-bee/.stage-bee/.nat-arrow-bee уже задан
   width/height — картинка масштабируется, не берёт native 500x506). */
.bee-img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;}
img.bee-img{max-width:100%;max-height:100%;}
/* Крупные декоративные — лёгкое покачивание. */
@keyframes bee-float{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-6px) rotate(2deg);}}
@media (prefers-reduced-motion:reduce){.bee-img-stage{animation:none;}}

/* ── 2026-07-24: тема модалки безопасной установки Windows (win-install-helper.js) ── */
:root{
  --wih-card:#FFFBEA;--wih-elevated:#F4EED6;--wih-border:rgba(28,26,21,.14);
  --wih-text:#1C1A15;--wih-muted:#55503F;--wih-dim:#8A8266;
  --wih-accent:#F7A500;--wih-grad:linear-gradient(100deg,#F7A500 0%,#FFA946 100%);
  --wih-ink:#2a1c00;--wih-safe:#1E7A4A;--wih-safe-bg:rgba(30,122,74,.12);
  --wih-scrim:rgba(28,26,21,.55);--wih-glow:rgba(247,165,0,.5);
  --wih-shadow:0 30px 70px -20px rgba(80,60,10,.32);
  --wih-display-font:'EB Garamond','Georgia',serif;
}

/* ── Адаптив новых секций (HOW/FAQ): в конце файла, чтобы каскад побеждал базу ── */
@media (max-width: 1020px) {
    .how-grid { grid-template-columns: 1fr; border-top: none; }
    .how-step { border-left: none; border-top: 1.5px solid var(--line); padding-left: 0; padding-right: 0; }
    .how-step:first-child { border-top: 1.5px solid var(--line); }
}
@media (max-width: 760px) {
    .faq-item summary { padding: 17px 2px; }
    .demo-after .dq-cta { justify-content: center; }
    .demo-after-note { text-align: center; }
}

/* ---------- окно с QR для установки Android с компьютера ---------- */
.qr-veil {
    position: fixed;
    inset: 0;
    background: rgba(28, 26, 21, .62);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    padding: 24px;
}
.qr-veil[hidden] { display: none; }

.qr-box {
    background: var(--paper);
    color: var(--ink);
    border-radius: 22px;
    padding: 30px 34px 26px;
    text-align: center;
    max-width: 340px;
    position: relative;
    box-shadow: 0 18px 50px rgba(28, 26, 21, .32);
}
.qr-close {
    position: absolute;
    top: 10px; right: 14px;
    background: none; border: none;
    font-size: 26px; line-height: 1;
    color: var(--ink); opacity: .45;
    cursor: pointer;
}
.qr-close:hover { opacity: 1; }
.qr-title { font-size: 21px; margin: 0 0 16px; }
/* Белая подложка под кодом обязательна: сканеры плохо читают QR на цветном фоне. */
.qr-img {
    display: block;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
}
.qr-note { font-size: 14px; opacity: .7; margin: 14px 0 4px; }
.qr-link { font-size: 14px; color: inherit; opacity: .55; }
.qr-link:hover { opacity: 1; }