:root { --font-display: "Playfair Display", "Libre Bodoni", ui-serif, serif; --font-body: "Onest", ui-sans-serif, sans-serif; --radius-btn: 2px;
  --color-paper: oklch(0.965 0.012 85); --color-paper-2: oklch(0.935 0.02 82); --color-ink: oklch(0.2 0.015 70); --color-ink-2: oklch(0.34 0.02 70); --color-muted: oklch(0.5 0.02 70); --color-rule: oklch(0.84 0.02 80); --color-accent: oklch(0.58 0.11 70); --color-accent-ink: oklch(0.98 0.01 85); --color-focus: oklch(0.5 0.14 70); }
body { font-size: 1.0625rem; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-btn); color: var(--color-ink); text-decoration: none; font-weight: 500; transition: background var(--dur-short), border-color var(--dur-short); }
.btn:hover { border-color: var(--color-accent); }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--color-accent) 88%, white); }
.btn-sm { min-height: 40px; padding: 0 var(--space-md); background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--color-paper) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-rule); }
.nav-in { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.nav nav { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
.nav nav a:not(.btn) { text-decoration: none; color: var(--color-ink-2); }
.mark { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; text-decoration: none; }
@media (max-width: 40rem) { .nav nav a:not(.btn) { display: none; } }

.hero { padding-block: var(--space-3xl) var(--section-gap-s); }
.hero-in { display: grid; grid-template-columns: 7fr 4fr; gap: var(--space-2xl); align-items: center; }
.eyebrow { color: var(--color-accent); font-weight: 500; margin-bottom: var(--space-md); }
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: 1; }
.lead { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 36em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
@media (max-width: 48rem) { .hero { padding-block: var(--space-xl) var(--space-2xl); } .hero-in { grid-template-columns: 1fr; gap: var(--space-xl); } .photo { max-width: 260px; order: -1; } .actions .btn { flex: 1 1 100%; justify-content: center; } }

.sec { padding-block: var(--section-gap-s); }
.sec h2 { font-size: var(--text-section); line-height: 1.05; margin-bottom: var(--space-xl); }
.svc, .steps { list-style: none; margin: 0; padding: 0; }
.svc p, .steps p { color: var(--color-ink-2); margin-top: var(--space-xs); }
.idx { font-family: var(--font-display); color: var(--color-accent); font-size: var(--text-lg); }
.note { margin-top: var(--space-xl); color: var(--color-muted); }
.cta h2 { max-width: 14em; }
.foot { border-top: 1px solid var(--color-rule); padding-block: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.foot-in { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }

.svc li { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-xl); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.svc li:last-child { border-bottom: 1px solid var(--color-rule); }
.svc .idx { display: none; }
.svc h3 { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.1; grid-column: 1; }
.svc p { grid-column: 1; max-width: 38em; }
.svc .price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-display); font-size: var(--text-xl); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.steps li { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.steps h3 { font-size: var(--text-xl); line-height: 1.15; }
@media (max-width: 48rem) { .svc li { grid-template-columns: 1fr; } .svc .price { grid-column: 1; grid-row: auto; margin-top: var(--space-sm); } .steps { grid-template-columns: 1fr; gap: var(--space-lg); } .svc li { padding-block: var(--space-lg); } }

.eyebrow { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -0.01em; margin-bottom: var(--space-lg); }
.rot { display: inline-grid; vertical-align: bottom; color: var(--color-accent); }
.rw { grid-area: 1 / 1; opacity: 0; transform: translateY(0.35em); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.rw.on { opacity: 1; transform: none; }
.rw.out { opacity: 0; transform: translateY(-0.35em); }
.actions .btn { white-space: nowrap; }
/* значки */
.ico { width: 1.15em; height: 1.15em; flex: none; }
.btn { gap: var(--space-xs); }
.nav-tel { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
@media (max-width: 40rem) { .nav nav a.lnk { display: none; } .nav nav a.nav-tel { display: inline-flex; } .nav-tel span { display: none; } .nav-tel { justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-rule); border-radius: var(--radius-btn); } .nav nav { gap: var(--space-sm); } }
@media (max-width: 64rem) and (min-width: 40.01rem) { .nav nav a.lnk { display: none; } }

/* появление */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* услуги: подсветка строки и «Обсудить» */
.svc-side { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; justify-items: end; gap: var(--space-2xs); }
.svc .svc-side .price { grid-column: auto; grid-row: auto; }
.ask { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; color: var(--color-accent); font-weight: 500; text-decoration: none; }
.ask span { transition: transform var(--dur-short) var(--ease-out); }
.ask:hover span { transform: translateX(4px); }
.svc li { margin-inline: calc(var(--space-md) * -1); padding-inline: var(--space-md); transition: background var(--dur-short) var(--ease-out); }
.svc h3 { transition: color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .svc li:hover { background: color-mix(in oklab, var(--color-accent) 7%, transparent); } .svc li:hover h3 { color: var(--color-accent); } }
@media (max-width: 48rem) { .svc-side { grid-column: 1; grid-row: auto; justify-items: start; margin-top: var(--space-sm); } }

/* шаги: линия заполняется */
.steps li { position: relative; border-top: 2px solid var(--color-rule); }
.steps li::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
.steps li.in::before, html:not(.js) .steps li::before { transform: none; }
@media (prefers-reduced-motion: reduce) { .steps li::before { transform: none; transition: none; } }

/* примеры */
.note-top { margin: calc(var(--space-md) * -1) 0 var(--space-xl); color: var(--color-muted); max-width: 44em; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.tabs button, .seg button { font: inherit; cursor: pointer; border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); border-radius: var(--radius-btn); min-height: 44px; padding: 0 var(--space-md); transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tabs button:hover, .seg button:hover { border-color: var(--color-accent); }
.tabs button[aria-selected="true"], .seg button.on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.panel { display: grid; grid-template-columns: 4fr 7fr; gap: var(--space-2xl); align-items: start; }
.panel.wide { grid-template-columns: 1fr; gap: var(--space-xl); }
.panel.wide .demo-text { max-width: 44em; }
.panel[hidden] { display: none; }
.demo-text h3 { font-size: var(--text-2xl); line-height: 1.1; }
.demo-text p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.demo-text .hint { color: var(--color-accent); font-weight: 500; }
@media (max-width: 60rem) { .panel { grid-template-columns: 1fr; gap: var(--space-lg); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* бот */
.chat { max-width: 420px; width: 100%; border: 1px solid var(--color-rule); border-radius: 14px; background: var(--color-paper-2); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: oklch(0.3 0.04 55); color: #fff; font-weight: 500; line-height: 1.2; }
.chat-head small { display: block; opacity: .7; font-weight: 400; font-size: var(--text-xs); }
.chat-ava { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f4d9b0; color: oklch(0.3 0.04 55); font-family: "Fraunces", var(--font-display); font-weight: 600; }
.chat-log { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); height: 360px; overflow-y: auto; }
.msg { max-width: 84%; padding: var(--space-xs) var(--space-sm); border-radius: 12px; line-height: 1.4; font-size: var(--text-md); animation: pop 280ms var(--ease-out) both; }
.msg.bot { align-self: flex-start; background: var(--color-paper); border: 1px solid var(--color-rule); border-bottom-left-radius: 3px; }
.msg.me { align-self: flex-end; background: var(--color-accent); color: var(--color-accent-ink); border-bottom-right-radius: 3px; }
.msg.typing { color: var(--color-muted); letter-spacing: .15em; }
.msg.mapmsg { padding: 4px; width: 84%; }
.map { display: block; width: 100%; height: auto; border-radius: 9px; }
.map-cap { display: flex; justify-content: space-between; gap: var(--space-xs); padding: var(--space-2xs) var(--space-2xs) 2px; font-size: var(--text-sm); }
.map-cap span { color: var(--color-muted); }
.chat-keys { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0 var(--space-md) var(--space-md); min-height: 64px; }
.chat-keys button { font: inherit; cursor: pointer; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-accent); border-radius: 999px; background: transparent; color: var(--color-ink); transition: background var(--dur-short) var(--ease-out); }
.chat-keys button:hover { background: color-mix(in oklab, var(--color-accent) 14%, transparent); }
.chat-keys .star { color: oklch(0.55 0.13 75); }

/* автоматизация */
.flow-row { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: stretch; }
.card { --c: var(--color-accent); display: flex; flex-direction: column; border: 1px solid var(--color-rule); border-radius: 10px; background: var(--color-paper-2); overflow: hidden; transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.card.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 22%, transparent); }
.card-h { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); border-bottom: 1px solid var(--color-rule); }
.card-h i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.wire { align-self: center; position: relative; height: 2px; background: var(--color-rule); }
.wire i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); opacity: 0; }
.wire.go i { animation: travel 700ms var(--ease-in-out) both; }
@keyframes travel { 0% { left: 0; opacity: 1; } 100% { left: calc(100% - 10px); opacity: 1; } }
@keyframes travel-v { 0% { top: 0; opacity: 1; } 100% { top: calc(100% - 10px); opacity: 1; } }

.mini { flex: 1; display: grid; align-content: start; gap: var(--space-xs); margin: var(--space-md); padding: var(--space-md); border-radius: 8px; background: #fffaf2; color: #3b2417; }
.mini-top { display: flex; justify-content: space-between; font-size: var(--text-xs); color: #8a6d55; }
.mini-top b { font-family: "Fraunces", var(--font-display); font-size: var(--text-md); color: #3b2417; }
.mini h4 { margin: var(--space-2xs) 0; font-family: "Fraunces", var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.15; }
.field { padding: 9px 12px; border: 1px solid #e6d6c1; border-radius: 6px; background: #fff; font-size: var(--text-sm); }
.mini-btn { font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; border: 0; border-radius: 6px; background: #3b2417; color: #fff; transition: background var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.mini-btn:hover:not(:disabled) { background: #55341f; transform: translateY(-1px); }
.mini-btn:disabled { background: #2e8b57; cursor: default; }

.sheet { flex: 1; margin: var(--space-md); border: 1px solid #cfe3d4; border-radius: 6px; background: #fff; color: #1f2a22; overflow: hidden; font-size: var(--text-sm); }
.sheet-bar { padding: 8px 12px; background: #e7f4ea; color: #1e6b36; font-weight: 600; font-size: var(--text-xs); }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e5eee7; white-space: nowrap; }
.sheet th { font-weight: 500; color: #5b6b60; font-size: var(--text-xs); background: #f6faf7; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e7f4ea; color: #1e6b36; font-size: var(--text-xs); font-weight: 500; transition: background 300ms, color 300ms; }
.tag.new { background: #fff3d6; color: #8a5a00; }
.row-new td { animation: land 800ms var(--ease-out) both; }
.row-new { background: #fffbea; }
@keyframes land { 0% { opacity: 0; transform: translate(-60px, -26px) scale(.92); } 60% { opacity: 1; } 100% { transform: none; } }

.tg { flex: 1; display: flex; flex-direction: column; margin: var(--space-md); border-radius: 8px; background: #e9f1f7; color: #17212b; min-height: 200px; overflow: hidden; }
.tg-head { padding: 8px 12px; background: #2aabee; color: #fff; font-size: var(--text-sm); font-weight: 500; }
.tg-log { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: var(--space-sm); }
.tg-msg { align-self: flex-start; max-width: 92%; padding: 8px 10px; border-radius: 10px 10px 10px 3px; background: #fff; font-size: var(--text-sm); line-height: 1.4; animation: pop 320ms var(--ease-out) both; box-shadow: 0 1px 1px #0001; }
.tg-msg b { display: block; margin-bottom: 2px; }
.tg-keys { display: flex; gap: 6px; align-self: stretch; animation: pop 320ms var(--ease-out) both; }
.tg-keys button { flex: 1; font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; min-height: 40px; border: 0; border-radius: 8px; background: #2aabee22; color: #1b7fb4; transition: background var(--dur-short) var(--ease-out); }
.tg-keys button:hover { background: #2aabee38; }
.flow-reset { margin-top: var(--space-md); font: inherit; background: none; border: 0; padding: var(--space-xs) 0; min-height: 44px; color: var(--color-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.flow-reset:hover { color: var(--color-ink); }
@media (max-width: 60rem) { .flow-row { grid-template-columns: 1fr; } .wire { width: 2px; height: 32px; margin-left: 24px; } .wire i { left: -4px; top: 0; } .wire.go i { animation-name: travel-v; } }

/* сайт */
.seg { display: inline-flex; margin-top: var(--space-md); }
.seg button:first-child { border-radius: var(--radius-btn) 0 0 var(--radius-btn); }
.seg button:last-child { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; margin-left: -1px; }
.stage { display: flex; justify-content: center; padding: var(--space-lg); border-radius: 8px; background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.browser { width: 100%; max-width: 680px; border: 1px solid #d9d4cc; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 10px 30px #0000001a; transition: max-width 500ms var(--ease-out); }
.browser[data-view="phone"] { max-width: 300px; }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 10px var(--space-sm); background: #f1eee9; border-bottom: 1px solid #e2ddd5; }
.browser-bar i { width: 12px; height: 12px; border-radius: 50%; }
.browser-bar .r { background: #ff5f57; } .browser-bar .y { background: #febc2e; } .browser-bar .g { background: #28c840; }
.browser-bar span { margin-left: var(--space-xs); flex: 1; padding: 3px 12px; border-radius: 6px; background: #fff; font-size: var(--text-xs); color: #7a6e60; }

.cafe { --brown: #3b2417; --cream: #fbf6ef; --terra: #c4623a; background: var(--cream); color: var(--brown); font-family: var(--font-body); }
.cafe-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.cafe-logo { display: inline-flex; align-items: center; gap: 8px; font-family: "Fraunces", var(--font-display); font-weight: 700; font-size: 1.25rem; }
.cafe-logo svg { width: 28px; height: 28px; }
.cafe-links { display: flex; gap: 18px; font-size: var(--text-sm); color: #7a5a44; }
.cafe-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 12px; padding: 12px 20px 24px; }
.cafe-copy small { color: var(--terra); font-weight: 600; font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
.cafe-copy h4 { margin: 6px 0 10px; font-family: "Fraunces", var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.08; letter-spacing: -0.01em; }
.cafe-copy p { margin: 0 0 16px; color: #6b5444; font-size: var(--text-sm); }
.cafe-btn { display: inline-block; padding: 11px 20px; border-radius: 999px; background: var(--terra); color: #fff; font-weight: 600; font-size: var(--text-sm); }
.cafe-pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50% 50% 46% 54% / 54% 46% 54% 46%; background: radial-gradient(circle at 35% 30%, #f6d9ae, #e5b882 70%); }
.cafe-pic .cup { width: 72%; }
.bean { position: absolute; width: 14px; height: 9px; border-radius: 50%; background: #4a2c1b; transform: rotate(-30deg); }
.bean::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 1px; background: #f3d9b2; opacity: .7; }
.b1 { left: 8%; bottom: 20%; } .b2 { right: 10%; top: 16%; transform: rotate(40deg); } .b3 { right: 16%; bottom: 12%; transform: rotate(10deg); }
.cup .steam { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .7; }
.cafe-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px 20px; }
.cafe-menu div { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px #3b241714; font-size: var(--text-sm); text-align: center; }
.cafe-menu .cup { width: 64px; }
.cafe-menu .cup .steam { stroke: #d8c9b8; }
.cafe-menu b { font-weight: 600; }
.cafe-menu span { color: var(--terra); font-weight: 600; }
.cafe-info { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 20px; background: var(--brown); color: #f4d9b0; font-size: var(--text-xs); }
.cafe-info span { display: inline-flex; align-items: center; gap: 6px; }
.cafe-info svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.browser[data-view="phone"] .cafe-hero { grid-template-columns: 1fr; }
.browser[data-view="phone"] .cafe-pic { max-width: 200px; margin: 0 auto; }
.browser[data-view="phone"] .cafe-links span:not(:first-child) { display: none; }
.browser[data-view="phone"] .cafe-menu { grid-template-columns: 1fr 1fr 1fr; padding-inline: 12px; gap: 6px; }
.browser[data-view="phone"] .cafe-menu .cup { width: 44px; }

/* кнопка «Написать» внизу на телефоне */
.dock { display: none; }
@media (max-width: 40rem) {
  .dock { display: flex; gap: var(--space-xs); position: fixed; inset: auto 0 0 0; z-index: 20; padding: var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--color-paper) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--color-rule); transform: translateY(110%); transition: transform 350ms var(--ease-out); }
  .dock.show { transform: none; }
  .dock .btn { flex: 1; justify-content: center; }
  .dock .dock-tel { flex: 0 0 auto; }
  body { padding-bottom: 0; }
  .foot { padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom)); }
}
.cafe-menu .cup { width: 56px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: #f6e3c8; }
.browser[data-view="phone"] .cafe-menu .cup { width: 34px; padding: 6px; }

/* заголовок: ровно две строки на любой ширине */
.hero h1 .ln { display: block; white-space: nowrap; }
@media (max-width: 48rem) { .hero h1 { font-size: min(clamp(2.4rem, 8vw, 3.2rem), calc((100vw - 2 * var(--gutter)) / 9.6)); } }

/* примеры: на телефоне сначала сам пример */
.flow-hint { margin: 0 0 var(--space-md); color: var(--color-accent); font-weight: 500; }
.flow-tabs { display: none; }
@media (max-width: 60rem) {
  .panel .demo-text { order: 2; }
  .panel .demo-text h3 { font-size: var(--text-xl); }
  .panel .demo-text p { font-size: var(--text-sm); margin-top: var(--space-xs); }
  .panel.wide .demo-text { order: 2; }
  .note-top { display: none; }
  .tabs { margin-bottom: var(--space-md); }
  .tabs button { flex: 1 1 auto; justify-content: center; }
  .chat { max-width: none; }
  .chat-log { height: 300px; }

  /* автоматизация по шагам: одна карточка за раз */
  .flow-tabs { display: flex; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
  .flow-tabs button { flex: 1; font: inherit; font-size: var(--text-sm); cursor: pointer; min-height: 44px; border: 1px solid var(--color-rule); border-radius: var(--radius-btn); background: transparent; color: var(--color-muted); transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
  .flow-tabs button.on { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
  .flow-row .card:not(.cur) { display: none; }
  .flow-row .wire { display: none; }
  .flow-row .card.cur { animation: pop 320ms var(--ease-out) both; }
  .flow-row { min-height: 0; }
  .flow-reset { margin-top: var(--space-xs); }
}

/* сайт: на телефоне только мобильная версия в рамке телефона */
@media (max-width: 48rem) {
  .seg { display: none; }
  .stage { padding: var(--space-md) 0; border-left: 0; border-right: 0; border-radius: 0; margin-inline: calc(var(--gutter) * -1); }
  .browser, .browser[data-view="phone"] { max-width: 300px; }
}

/* кнопки связи на всю ширину */
@media (max-width: 40rem) {
  .cta .actions .btn { flex: 1 1 100%; justify-content: center; }
  .note { font-size: var(--text-sm); }
  .foot-in { flex-direction: column; }
}
@media (max-width: 48rem) {
  .hero .photo { max-width: 200px; }
  .hero { padding-block: var(--space-lg) var(--space-xl); }
  .hero-in { gap: var(--space-lg); }
  .eyebrow { margin-bottom: var(--space-sm); }
  .browser[data-view="phone"] .cafe { max-height: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .sec { padding-block: var(--space-2xl); }
  .sec h2 { margin-bottom: var(--space-lg); }
}

/* ссылка на портфолио в шапке */
.nav nav a.lnk-home { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent); font-weight: 500; white-space: nowrap; }
@media (max-width: 40rem) {
  .nav nav { gap: var(--space-xs); }
  .nav nav .btn-sm { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .nav nav .btn-sm .ico { width: 18px; height: 18px; }
}
@media (max-width: 23rem) { .mark { font-size: 1.0625rem; } }

/* форма в примере автоматизации */
input.field { width: 100%; min-width: 0; font-size: 1rem; color: #3b2417; caret-color: #3b2417; transition: border-color var(--dur-short) var(--ease-out); }
input.field:focus { outline: 0; border-color: #3b2417; }
input.field:disabled { color: #8a6d55; background: #fbf6ef; }
.topics { display: flex; flex-wrap: wrap; gap: 6px; }
.topics label { position: relative; cursor: pointer; }
.topics input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.topics span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #e6d6c1; border-radius: 999px; background: #fff; color: #3b2417; font-size: var(--text-sm); transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.topics input:checked + span { background: #3b2417; border-color: #3b2417; color: #fff; }
.topics input:focus-visible + span { outline: 2px solid #3b2417; outline-offset: 2px; }
.topics input:disabled { cursor: default; }
.sheet td b { display: block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.sheet td small { display: block; max-width: 11em; overflow: hidden; text-overflow: ellipsis; color: var(--sheet-th-ink); font-size: var(--text-xs); }

/* из услуги сразу к примеру */
.see { color: var(--color-accent); font-weight: 500; white-space: nowrap; text-underline-offset: 0.2em; }

/* уведомление о копировании */
.toast { position: fixed; left: 50%; bottom: var(--space-lg); z-index: 40; max-width: calc(100vw - 2 * var(--gutter)); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-btn); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* две темы: начальную выбирает браузер или система, дальше переключатель в шапке */
:root { color-scheme: light; --star: oklch(0.55 0.13 75);
  --sheet-bg: #fff; --sheet-ink: #1f2a22; --sheet-rule: #e5eee7; --sheet-edge: #cfe3d4; --sheet-bar: #e7f4ea; --sheet-bar-ink: #1e6b36; --sheet-th: #f6faf7; --sheet-th-ink: #5b6b60; --sheet-new: #fffbea;
  --tg-bg: #e9f1f7; --tg-ink: #17212b; --tg-msg: #fff; --tg-key: #2aabee22; --tg-key-ink: #1b7fb4; }
:root[data-theme="dark"] { color-scheme: dark; --color-paper: oklch(0.175 0.012 65); --color-paper-2: oklch(0.225 0.014 65); --color-ink: oklch(0.93 0.012 85); --color-ink-2: oklch(0.82 0.014 80); --color-muted: oklch(0.68 0.016 75); --color-rule: oklch(0.33 0.016 70); --color-accent: oklch(0.78 0.11 72); --color-accent-ink: oklch(0.2 0.02 65); --color-focus: oklch(0.82 0.12 72); --star: oklch(0.82 0.13 80);
    --sheet-bg: #1b2520; --sheet-ink: #e4ece6; --sheet-rule: #2c3a32; --sheet-edge: #33453a; --sheet-bar: #23362b; --sheet-bar-ink: #8ed2a3; --sheet-th: #212d27; --sheet-th-ink: #9db0a4; --sheet-new: #33301c;
    --tg-bg: #17212b; --tg-ink: #e8eef3; --tg-msg: #243240; --tg-key: #2aabee2e; --tg-key-ink: #7cc9f2; }
[data-theme="dark"] .tag { background: #23362b; color: #8ed2a3; }
[data-theme="dark"] .tag.new { background: #43381a; color: #f0cd7c; }
[data-theme="dark"] .stage { background: oklch(0.21 0.014 65); }
[data-theme="dark"] .browser { border-color: #00000066; box-shadow: 0 10px 30px #00000066; }
.chat-keys .star { color: var(--star); }
.sheet { border-color: var(--sheet-edge); background: var(--sheet-bg); color: var(--sheet-ink); }
.sheet-bar { background: var(--sheet-bar); color: var(--sheet-bar-ink); }
.sheet th, .sheet td { border-bottom-color: var(--sheet-rule); }
.sheet th { background: var(--sheet-th); color: var(--sheet-th-ink); }
.row-new { background: var(--sheet-new); }
.tg { background: var(--tg-bg); color: var(--tg-ink); }
.tg-msg { background: var(--tg-msg); }
.tg-keys button { background: var(--tg-key); color: var(--tg-key-ink); }

/* переключатель темы */
.theme { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-btn); background: transparent; color: var(--color-ink); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.theme:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme .ico { grid-area: 1 / 1; width: 18px; height: 18px; }
.i-to-light { display: none; }
[data-theme="dark"] .i-to-light { display: block; }
[data-theme="dark"] .i-to-dark { display: none; }
@media (max-width: 24rem) { .nav nav .btn-sm { display: none; } }

/* цены крупнее */
.svc .price { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.1; white-space: nowrap; }

.lead { text-wrap: wrap; }

/* смена слова: место под текущее слово, старое уходит раньше появления нового */
.rot { transition: width 420ms var(--ease-out); }
.rw { justify-self: start; white-space: nowrap; transition: opacity 240ms var(--ease-out), transform 420ms var(--ease-out); }
.rw.on { transition-delay: 160ms; }

/* примеры чужих сайтов всегда светлые: выделение не зависит от темы страницы */
input.field::selection, .mini ::selection, .cafe ::selection { background: #3b241733; color: #3b2417; }

/* оформление: тёплое свечение и живые окна */
html { background: var(--color-paper); }
body { background: transparent; }
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.layer { position: absolute; inset: 0; will-change: transform; }
.glow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); }
.layer > i { position: absolute; border-radius: 50%; display: block; }
.grain { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.nav { background: color-mix(in oklab, var(--color-paper) 72%, transparent); }
.svc li:hover { background: color-mix(in oklab, var(--color-accent) 9%, transparent); }
.chat, .card, .stage { background: color-mix(in oklab, var(--color-paper-2) 86%, transparent); }
.eyebrow { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.005em; color: var(--color-ink-2); }
.hero { position: relative; }
.foot { background: transparent; }

:root { --font-display: "Cormorant", "Playfair Display", ui-serif, serif;
  --color-paper: #f2e7dc; --color-paper-2: #eadccd; --color-ink: #24140d; --color-ink-2: #483026; --color-muted: #6f5a4e; --color-rule: #d9c7b6; --color-accent: #94501f; --color-accent-ink: #fff6ec; --color-focus: #94501f;
  --g1: #f0a86675; --g2: #e47d5f50; --art-bg: #fff8ee; --art-ok: #2f7a52; }
:root[data-theme="dark"] {
  --color-paper: #120a08; --color-paper-2: #1f130e; --color-ink: #f5e9dc; --color-ink-2: #dccbbb; --color-muted: #ab9889; --color-rule: #3a2a20; --color-accent: #eeb06e; --color-accent-ink: #1c0f07; --color-focus: #f4c994;
  --g1: #9c561c66; --g2: #7d2f2455; --art-bg: #271a13; --art-ok: #8ed2a3; }
.glow-a { --c: var(--g1); width: 90vmax; height: 90vmax; left: 50%; margin-left: -45vmax; top: -44vmax; }
.glow-b { --c: var(--g2); width: 70vmax; height: 70vmax; right: -30vmax; top: 90vh; }
.glow-c { --c: var(--g1); width: 70vmax; height: 70vmax; left: -28vmax; top: 200vh; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; }
.sec h2 { font-size: clamp(2.5rem, 4.4vw, 4.5rem); }
.svc h3 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.svc .price { font-weight: 600; }

.hero { padding-block: var(--space-3xl) var(--space-3xl); min-height: min(calc(100vh - 65px), 860px); display: grid; align-items: center; }
.hero-in { display: block; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.hero h1 { font-size: clamp(3rem, 7vw, 7.25rem); line-height: 0.98; }
.hero .lead { margin-inline: auto; max-width: 32em; }
.hero .actions { justify-content: center; }
.rot { text-align: left; }

@media (max-width: 48rem) {
  .hero { min-height: 0; padding-block: var(--space-3xl) var(--space-2xl); }
  .hero h1 { font-size: min(3.2rem, calc((100vw - 2 * var(--gutter)) / 8.4)); }
  .hero-in { text-align: left; }
  .hero .actions { justify-content: flex-start; }
  .hero .lead { margin-inline: 0; }
}

#live { --z: 1; --wbg: var(--art-bg); --wline: var(--color-rule); }

/* окно */
.w { position: absolute; width: 240px; display: flex; flex-direction: column; border: 1px solid var(--wline); border-radius: 14px; background: var(--wbg); color: var(--color-ink-2); font-family: var(--font-body); font-size: 0.75rem; line-height: 1.35; overflow: hidden; box-shadow: 0 16px 40px #00000030; scale: calc(var(--z) * var(--d, 1)); will-change: translate; }
.w-h { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-bottom: 1px solid var(--wline); font-weight: 500; white-space: nowrap; overflow: hidden; }
.w-h i { flex: none; width: 7px; height: 7px; border-radius: 50%; }

.w-log { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; height: 150px; padding: 9px; overflow: hidden; }
.w-msg { max-width: 86%; padding: 5px 9px; border-radius: 10px; animation: wpop 240ms var(--ease-out) both; }
.w-msg.bot { align-self: flex-start; border: 1px solid var(--wline); border-bottom-left-radius: 3px; }
.w-msg.me { align-self: flex-end; background: var(--color-accent); color: var(--color-accent-ink); border-bottom-right-radius: 3px; }
.w-typing { display: inline-flex; gap: 3px; padding-block: 8px; }
.w-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-muted); animation: wdot 900ms infinite; }
.w-typing i:nth-child(2) { animation-delay: 150ms; } .w-typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes wpop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes wdot { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

.w-page { display: grid; gap: 5px; padding: 8px; background: #fffaf2; color: #3b2417; }
.w-page .b { opacity: 0; transform: translateY(7px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.w-page .b.on { opacity: 1; transform: none; }
.w-nav { display: flex; align-items: center; gap: 6px; }
.w-nav b { margin-right: auto; font-weight: 600; }
.w-nav u, .w-text u { display: block; height: 4px; width: 22px; border-radius: 2px; background: #d9c7ad; text-decoration: none; }
.w-pic { height: 44px; border-radius: 6px; background: linear-gradient(120deg, #e9b77a, #c4623a); }
.w-title { font-weight: 600; font-size: 0.8125rem; line-height: 1.15; }
.w-text { display: grid; gap: 3px; } .w-text u { width: 100%; } .w-text u:last-child { width: 62%; }
.w-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .w-cards .b { height: 20px; border-radius: 4px; background: #f0e2cd; }
.w-cta { justify-self: start; padding: 3px 10px; border-radius: 99px; background: #3b2417; color: #fff; font-size: 0.6875rem; }
.w-done { max-height: 0; padding-inline: 11px; color: var(--art-ok); font-weight: 500; overflow: hidden; transition: max-height 300ms var(--ease-out), padding 300ms var(--ease-out); }
.w-done.on { max-height: 30px; padding-block: 6px; }

.w-count { padding: 7px 11px 2px; color: var(--color-muted); } .w-count b { color: var(--color-ink); font-weight: 600; }
.w-rows { padding: 4px 6px 8px; min-height: 104px; }
.w-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; padding: 5px; border-radius: 6px; white-space: nowrap; }
.w-row em { font-style: normal; color: var(--art-ok); font-weight: 500; transition: color 300ms; }
.w-row.new { background: color-mix(in oklab, var(--color-accent) 16%, transparent); } .w-row.new em { color: var(--color-accent); }
.w-row.land { animation: wland 620ms var(--ease-out) both; }
@keyframes wland { from { opacity: 0; transform: translate(-34px, -18px) scale(.94); } }

.w-graph { display: block; width: 100%; height: auto; padding: 4px; }
.w-graph .ln { fill: none; stroke: var(--wline); stroke-width: 1.5; }
.nd rect { fill: transparent; stroke: var(--wline); transition: fill 260ms, stroke 260ms; }
.nd text { fill: currentColor; font-size: 12px; text-anchor: middle; transition: fill 260ms; }
.nd.hot rect { fill: var(--color-accent); stroke: var(--color-accent); } .nd.hot text { fill: var(--color-accent-ink); }
.nd.was:not(.hot) rect { stroke: var(--color-accent); }

.w-state { display: flex; align-items: center; gap: 7px; padding: 8px 11px 2px; font-weight: 500; color: var(--color-ink); }
.w-state i { width: 8px; height: 8px; border-radius: 50%; background: #28c840; animation: wbeat 1.8s infinite; }
@keyframes wbeat { 0%, 100% { box-shadow: 0 0 0 0 #28c84066; } 60% { box-shadow: 0 0 0 7px #28c84000; } }
.w-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; padding: 6px 11px 0; }
.w-bars i { flex: 1; min-height: 3px; border-radius: 2px 2px 0 0; background: color-mix(in oklab, var(--color-accent) 62%, transparent); transition: height 500ms var(--ease-out); }
.w-progress { padding: 7px 11px 10px; } .w-progress u { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--wline); text-decoration: none; overflow: hidden; } .w-progress u i { display: block; width: 0; height: 100%; background: var(--art-ok); transition: width 500ms var(--ease-out); }

.w-notice .w-log { height: 170px; justify-content: flex-start; }
.w-note { padding: 7px 9px; border: 1px solid var(--wline); border-radius: 10px; animation: wpop 240ms var(--ease-out) both; }
.w-note b { display: block; color: var(--color-ink); font-weight: 500; }
.w-note em { display: block; margin-top: 3px; font-style: normal; color: var(--art-ok); font-weight: 500; }
.w-keys { display: flex; gap: 4px; margin-top: 5px; } .w-keys span { flex: 1; padding: 3px; border-radius: 6px; background: #2aabee24; color: #2a93ca; text-align: center; transition: background 160ms, transform 160ms; } .w-keys .press { background: #2aabee66; transform: scale(.95); }
.w-stars i { font-style: normal; color: var(--wline); transition: color 180ms; font-size: 0.9375rem; } .w-stars i.on { color: var(--color-accent); }

@media (max-width: 48rem) { .hero { padding-top: var(--space-xl); padding-bottom: var(--space-2xl); } }

:root { --color-paper: #f6f0e4; --color-paper-2: #efe6d5; --color-ink: #231708; --color-ink-2: #46361f; --color-muted: #6d5c43; --color-rule: #ddd0b9; --color-accent: #8f5c16; --color-accent-ink: #fff8ec; --color-focus: #8f5c16; --g1: #f4c26a66; --g2: #f4c26a00; --art-bg: #fffaf0; --art-ok: #2c7a4f; }
:root[data-theme="dark"] { --g1: #9c561c66; --g2: #7d2f2455; }

/* порядок слоёв: окна, подложки под текстом, свечение. Подложка цвета страницы не видна нигде, кроме окон */
:root { --scrim: color-mix(in srgb, var(--color-paper) 86%, transparent); }
#live { z-index: -3; }
#scrim { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: -2; pointer-events: none; }
#scrim i { position: absolute; display: block; background: var(--scrim); filter: blur(16px); }
.bg-glow { z-index: -1; }
.measuring .rv { transition: none !important; transform: none !important; }

/* разные сайты в окнах */
.w-page.p-auto { background: #13222f; color: #e6eef5; }
.p-auto .w-nav u { background: #3d5468; }
.p-auto .w-text u { background: #3d5468; }
.p-auto .w-pic { height: 100%; min-height: 54px; background: linear-gradient(140deg, #4f8cf0, #16324f); }
.p-auto .w-cta { margin-top: 5px; background: #4f8cf0; }
.w-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.w-split > div:first-child { display: grid; gap: 4px; align-content: start; }
.w-price { display: flex; justify-content: space-between; gap: 6px; padding-top: 4px; border-top: 1px solid #2c4154; }
.w-price b { font-weight: 600; color: #8fbcff; }
.w-page.p-shop { background: #f3f6ea; color: #24361c; }
.p-shop .w-nav u { background: #c6d3ae; }
.w-cart { padding: 1px 7px; border-radius: 99px; background: #4d7a2e; color: #fff; font-size: 0.6875rem; }
.w-goods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.w-goods .b { display: grid; gap: 2px; padding: 4px; border-radius: 6px; background: #fff; font-size: 0.6875rem; line-height: 1.2; }
.w-goods i { display: block; height: 26px; border-radius: 4px; background: linear-gradient(135deg, #e7c382, #b7813c); }
.w-goods b { font-weight: 600; color: #4d7a2e; }

/* расписание */
.w-days, .w-slots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding-inline: 11px; }
.w-days { padding-top: 8px; color: var(--color-muted); text-align: center; font-size: 0.6875rem; }
.w-slots { padding-top: 4px; }
.w-slots i { display: block; height: 15px; border-radius: 3px; background: color-mix(in oklab, var(--color-muted) 16%, transparent); transition: background 260ms var(--ease-out); }
.w-slots i.on { background: var(--color-accent); }
.w-note-line { padding: 7px 11px 9px; color: var(--color-muted); }

/* отчёт */
.w-sum { padding: 8px 11px 0; color: var(--color-muted); } .w-sum b { color: var(--color-ink); font-weight: 600; }
.w-chart { display: flex; align-items: flex-end; gap: 5px; height: 62px; padding: 6px 11px 8px; }
.w-chart i { flex: 1; height: 4%; border-radius: 3px 3px 0 0; background: var(--color-accent); transition: height 420ms var(--ease-out); }

/* списки */
.w-amount { display: flex; justify-content: space-between; gap: 8px; padding: 8px 11px 0; } .w-amount b { color: var(--color-ink); font-weight: 600; }
.w-ticks { display: grid; gap: 5px; padding: 9px 11px; }
.w-ticks div { display: flex; align-items: center; gap: 7px; color: var(--color-muted); transition: color 260ms; }
.w-ticks i { flex: none; width: 12px; height: 12px; border: 1px solid var(--wline); border-radius: 50%; transition: background 260ms, border-color 260ms; }
.w-ticks .on { color: var(--color-ink); } .w-ticks .on i { background: var(--art-ok); border-color: var(--art-ok); }

/* окна: на телефоне их нет, на компьютере две глубины */
@media (max-width: 60rem) { #live, #scrim { display: none; } }

/* аватарка */
.eyebrow { position: relative; z-index: 2; }
.ava-btn { position: relative; flex: none; display: block; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ava { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ava-btn { outline: 2px solid transparent; outline-offset: 1px; transition: outline-color 220ms ease, outline-offset 280ms var(--ease-out); }
.ava-btn:focus-visible { outline-color: var(--color-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ava-btn:hover { outline-color: var(--color-accent); outline-offset: 3px; }
}
.who { display: block; }
.eyebrow.open { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.eyebrow.open .ava-btn { width: clamp(150px, 26vh, 240px); height: clamp(150px, 26vh, 240px); box-shadow: 0 10px 36px #00000040; }
.eyebrow.open .who { font-size: var(--text-sm); color: var(--color-muted); }

/* крупные цифры шагов */
.steps .idx { display: block; margin-bottom: var(--space-xs); font-size: clamp(2.25rem, 3.2vw, 2.875rem); font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }

/* шапка: наведение как на главной */
.mark, .nav nav a:not(.btn) { transition: color var(--dur-short) var(--ease-out); }
.nav .btn-sm { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.nav .btn-sm:active { transform: translateY(0); }
.theme { transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mark:hover { color: var(--color-accent); }
  .nav nav a:not(.btn):hover { color: var(--color-ink); }
  .nav nav a.nav-tel:hover { color: var(--color-accent); }
  .nav .btn-sm:hover { background: color-mix(in oklab, var(--color-accent) 88%, black); border-color: color-mix(in oklab, var(--color-accent) 88%, black); transform: translateY(-1px); }
  :root[data-theme="dark"] .nav .btn-sm:hover { background: color-mix(in oklab, var(--color-accent) 88%, white); border-color: color-mix(in oklab, var(--color-accent) 88%, white); }
  .theme:hover { background: var(--color-paper-2); }
}