/* Лендинг ВебШага (тикет 30). Тёмная тема, один акцент, движение в site.js (GSAP, без движения при reduced motion). */
@font-face { font-family: Unbounded; src: url(fonts/unbounded-cyrillic-wght-normal.woff2) format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Unbounded; src: url(fonts/unbounded-latin-wght-normal.woff2) format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+20AC, U+20BD, U+2122, U+2190-2193; }
@font-face { font-family: Onest; src: url(fonts/onest-cyrillic-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; src: url(fonts/onest-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+20AC, U+20BD, U+2122, U+2190-2193; }

:root {
  /* палитра Turkido: тёмно-синий фон, бирюзовые рамки, фиолетовый акцент, синие кнопки-желе (рецепт .tk-glass-coal / .tk-glass-gold из Turkido globals.css) */
  --bg: oklch(0.13 0.026 254); --surface: oklch(0.19 0.04 254); --surface-2: oklch(0.24 0.045 254); --line: oklch(0.66 0.13 228 / 0.45);
  --fg: oklch(0.96 0.01 240); --muted: oklch(0.8 0.03 240); --accent: oklch(0.72 0.2 305); --on-accent: #fff; --cool: oklch(0.78 0.17 228); --warm: oklch(0.75 0.17 50);
  --j-top: oklch(0.58 0.15 236); --j-mid: oklch(0.44 0.18 256); --j-bot: oklch(0.32 0.17 265); --j-glow: oklch(0.46 0.19 254 / 0.55); --j-shade: oklch(0.2 0.12 267 / 0.85); --j-rim: oklch(0.88 0.1 310 / 0.55);
  --r-top: oklch(0.86 0.12 325); --r-mid: oklch(0.62 0.25 300); --r-bot: oklch(0.42 0.22 280); --r-glow: oklch(0.6 0.26 300 / 0.55); --r-edge: oklch(0.32 0.16 285);
  --display: Unbounded, 'Arial Black', sans-serif; --text: Onest, system-ui, sans-serif;
  --r: 18px; --pad: clamp(16px, 4vw, 56px); --max: 1280px;
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100 28.7%, 1.003 39.2%, 0.989 44%, 1.002 61%, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--fg); font: 400 17px/1.6 var(--text); overflow-x: clip; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; max-width: 100%; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 16px; }

.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); }
.grain { position: fixed; inset: -50%; z-index: 70; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* шапка */
.top { position: fixed; z-index: 50; inset: 12px 12px auto; display: flex; align-items: center; gap: 24px; padding: 10px 10px 10px 18px; max-width: var(--max); margin: 0 auto;
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 999px; transition: transform .4s ease; }
.top.hide { transform: translateY(-130%); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px var(--display); letter-spacing: -.02em; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); }
/* 22.10.2026 (тикет 55): вход в кабинет клиента lk.webshag.ru */
.top-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 15px; color: var(--muted); text-decoration: none; }

/* кнопки */
.btn { --bx: 0px; --by: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; cursor: pointer;
  font: 600 16px/1 var(--text); text-decoration: none; white-space: nowrap; touch-action: manipulation;
  transform: translate(var(--bx), var(--by)); transition: transform .5s var(--spring), background .2s, box-shadow .3s; position: relative; isolation: isolate; overflow: hidden; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-big { min-height: 64px; padding: 0 34px; font-size: 18px; }

/* типографика */
.eyebrow { margin: 0 0 18px; font: 600 13px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.h2 { margin: 0 0 22px; font: 500 clamp(26px, 3vw, 42px)/1.1 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 56ch; }
/* 25.10: отступ блоков привязан и к высоте окна, иначе на ноутбуке между блоками полэкрана пустоты (было clamp(80px, 12vw, 160px)) */
section { position: relative; padding: clamp(64px, min(9vw, 14svh), 120px) var(--pad); max-width: var(--max); margin: 0 auto; }

/* первый экран */
.hero { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; max-width: none; overflow: hidden; }
.hero > * { position: relative; max-width: var(--max); width: 100%; margin-left: auto; margin-right: auto; }
.spot { position: absolute !important; inset: 0; max-width: none !important; pointer-events: none; }
.hero-title { margin: 0 auto 28px; font: 800 clamp(38px, 7vw, 104px)/.96 var(--display); letter-spacing: -.05em; }
/* первый экран целиком в окне на любом десктопе: заголовок ужимается ещё и по высоте окна (под ним подзаголовок, кнопки и примечание ~420px) */
.hero-title { font-size: clamp(38px, min(7vw, (100svh - 340px) / 4.2), 104px); }
@media (min-width: 641px) and (max-height: 860px) {
  .hero { padding-top: 96px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero-title { margin-bottom: 16px; }
  .hero-sub { font-size: clamp(16px, 1.5vw, 19px); margin-bottom: 22px !important; }
  .hero-note { margin-top: 12px !important; }
}
.hero-title .line { display: block; text-wrap: balance; }
.accent-line { color: var(--accent); }
.hero-sub { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.5; color: var(--muted); max-width: 46ch !important; margin: 0 0 40px max(0px, (100% - var(--max)) / 2) !important; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-note { margin-top: 22px !important; font-size: 15px; color: var(--muted); }
.hero-note::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.nobr { white-space: nowrap; }
.split .ch { display: inline-block; will-change: transform; }
.split .wd { display: inline-block; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .06em; vertical-align: top; }

/* куча -> сайт */
.pile { max-width: none; padding-top: 40px; padding-bottom: 40px; }
.pile-stage { max-width: var(--max); margin: 0 auto; min-height: 100dvh; display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.pile-canvas { position: relative; aspect-ratio: 7 / 6; }
.browser { position: absolute; inset: 6% 4%; background: #f6f3ec; color: #1c1a17; border-radius: 16px; overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #e6e1d6; font-size: 12px; color: #6b665d; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfc8ba; }
.browser-bar span { margin-left: 12px; background: #f6f3ec; border-radius: 6px; padding: 3px 12px; }
.bits { position: absolute; inset: 0; pointer-events: none; }
.bit { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); color: var(--fg);
  font-size: clamp(12px, 1.2vw, 15px); box-shadow: 0 20px 50px -20px #000; will-change: transform; white-space: nowrap; }


/* шаги */
.how { overflow: visible; }
.how-head { margin: 0 0 40px; }
.how-rail { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin: 0 auto; }
/* стопка: карточки лежат друг на друге, site.js выкладывает их по одной при прокрутке */
.how-rail.stacked { position: relative; display: block; }
.how-rail.stacked .step { position: absolute; inset: 0 0 auto; transform-origin: 50% 0; will-change: transform; box-shadow: 0 -20px 60px -20px #000c; }
.step { min-height: 340px; padding: 34px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.step::after { content: ''; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -110px; border-radius: 50%; }
.step-n { font: 800 68px/1 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--cool); margin-bottom: auto; }
.step h3 { font: 700 22px/1.2 var(--display); letter-spacing: -.03em; margin: 40px 0 12px; }
.step p { margin: 0; color: var(--muted); position: relative; z-index: 1; }

/* темы */
.themes { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.theme-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 12px; }
.theme-tabs button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: 500 15px var(--text); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.demo-note { font-size: 14px; color: var(--muted); }
.demo-wrap { position: relative; border-radius: 18px; overflow: hidden; background: #e6e1d6; box-shadow: 0 50px 120px -40px #000, 0 0 0 1px #ffffff14; }
.demo-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #e6e1d6; font-size: 12px; color: #6b665d; }
.demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfc8ba; }
.demo-bar span { margin-left: 12px; background: #f6f3ec; border-radius: 6px; padding: 3px 12px; }
.demo-view { position: relative; aspect-ratio: 1280 / 860; overflow: hidden; background: #fff; }
.demo { position: absolute; inset: 0; background: #fff; }
.demo-shot { display: block; width: 100%; height: auto; will-change: transform; }

/* правки */
.edits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.chat { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); min-height: 380px; }
.msg { max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.45; }
.msg.me { align-self: flex-end; border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.msg u { color: var(--cool); }
.typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; background: var(--surface-2); border-radius: 20px; opacity: 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* цены */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.price { padding: 30px 26px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color .3s; }
.price:hover { border-color: #ffffff40; }
.price h3 { margin: 0 0 18px; font: 600 15px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sum { margin: 0 0 22px; font: 800 clamp(30px, 3vw, 42px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sum small { display: block; margin-top: 8px; font: 400 15px var(--text); letter-spacing: 0; color: var(--muted); }
.price ul { margin: 0 0 28px; padding: 0; list-style: none; }
.price li { padding: 9px 0 9px 26px; border-top: 1px solid var(--line); position: relative; font-size: 15px; }
.price li::before { content: ''; position: absolute; left: 2px; top: 16px; width: 12px; height: 7px; border: solid var(--cool); border-width: 0 0 2px 2px; rotate: -45deg; }
.price-text { margin: 0; color: var(--muted); font-size: 15px; }
.price-note { margin: -12px 0 0; color: var(--muted); font-size: 14px; }
.price .btn { margin-top: auto; }
.price-soon { border-style: dashed; }
.price-soon .sum, .price-soon .price-text { opacity: .6; }
/* тикет 65: магазин в листе ожидания, кнопка ведёт к форме с выбранным магазином */
.price-shop .price-text { margin-bottom: 24px; }
.price-shop .btn { align-self: flex-start; }
.soon { display: inline-block; margin-left: 8px; padding: 3px 10px; border: 1px solid var(--cool); border-radius: 999px; font: 600 12px/1.2 var(--text); letter-spacing: .04em; text-transform: uppercase; color: var(--cool); vertical-align: middle; }
.price-foot { margin-top: 26px; color: var(--muted); }

/* вопросы */
.faq { max-width: 980px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font: 600 clamp(17px, 1.6vw, 20px)/1.35 var(--display); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: linear-gradient(var(--fg), var(--fg)) center / 14px 2px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 2px 14px no-repeat; transition: rotate .4s var(--spring), background-color .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin: 0 0 26px; color: var(--muted); max-width: 64ch; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s ease, content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* заявка */
.order-title { margin: 0 0 48px; font: 800 clamp(40px, 7.2vw, 108px)/.94 var(--display); letter-spacing: -.06em; }
.order-title span { display: block; }
.order-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.order-side .btn { margin-top: 18px; }
.order-alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; max-width: 46ch; }
.order-alt a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
/* 25.10: форма на своей странице /start/ (решение владельца); на лендинге вместо неё полоса с одной кнопкой */
.order-band { text-align: center; }
.order-band .h2 { margin-left: auto; margin-right: auto; max-width: 20ch; }
.order-band .lead { margin: 0 auto 32px; }
.order-band .order-alt { margin: 30px auto 0; border-top: 0; padding-top: 0; }
.sub-top { max-width: var(--max); margin: 0 auto; padding: 22px var(--pad) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sub-top .back { color: var(--muted); text-decoration: none; font-size: 15px; }
.sub-top .back:hover { color: var(--fg); }
.start .foot { padding-top: 24px; }
/* страница /start/ v4 (25.10, владелец: скромнее и вся страница в один экран): компактная карточка справа, шаги слева, подвал в строку */
.start-order { max-width: none; overflow: hidden; padding-top: clamp(10px, 2.2svh, 32px); padding-bottom: clamp(8px, 1.5svh, 24px); }
.start-order > * { position: relative; max-width: var(--max); width: 100%; margin-left: auto; margin-right: auto; }
.start-title { margin: 0 0 6px; font-size: clamp(26px, min(3.4vw, 5.5svh), 44px); letter-spacing: -.04em; }
.start-head .lead { margin: 0 0 clamp(10px, 2svh, 20px); max-width: none; font-size: clamp(15px, 1.1vw, 17px); }
.start-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.start-grid .form { order: 2; }
.start-side { order: 1; display: grid; gap: 14px; padding-top: 4px; }
.start-h2 { margin: 0; font: 600 18px/1.25 var(--display); letter-spacing: -.02em; }
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.start-steps li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; align-items: start; }
/* линия пути между кружками номеров */
.start-steps li:not(:last-child)::after { content: ''; position: absolute; left: 13.5px; top: 32px; bottom: -10px; width: 1px; background: var(--line); }
.start-steps li > small { grid-column: 2; }
.start-steps li::before { grid-row: span 2; position: relative; z-index: 1; background: var(--bg); counter-increment: s; content: counter(s); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 600 13px var(--display); color: var(--cool); }
.start-steps b { display: block; font-weight: 600; font-size: 15px; }
.start-steps small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.start-side .order-alt { margin-top: 4px; padding-top: 14px; font-size: 14px; }
.start-form { padding: 16px; gap: 10px; }
.start-form .kind label { min-height: 40px; font-size: 14px; }
.start-form .field { gap: 4px; }
.start-form .field label { font-size: 13px; }
.start-form .field input, .start-form .field textarea { min-height: 44px; padding: 10px 14px; font-size: 15px; }
.start-form .field textarea { min-height: 0; }
.start-form .mat-row:not(:has(.field:not([hidden]))) { display: none; }
.start-form .mat-row .mat-note { grid-column: 1 / -1; margin: -2px 0 0; font-size: 13px; } /* тикет 111: в режиме только магазина поля телефона и цен скрыты вместе со строкой */
.start-cols { display: grid; grid-template-columns: 5fr 7fr; gap: 12px; align-items: stretch; }
.start-form.no-mat .start-cols { grid-template-columns: 1fr; }
.start-form.no-mat .row2 .help { font-size: 13px; }
.start-col { display: grid; gap: 8px; align-content: start; }
/* тикет 85: вопросы по желанию под рассказом о деле */
.start-form .qa { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; background: oklch(0.2 0.04 254 / 0.5); }
.start-form .qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; font: 600 14px/1.3 var(--display); color: var(--cool); }
.start-form .qa summary::-webkit-details-marker { display: none; }
.start-form .qa summary::after { content: '+'; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 500 18px/1 var(--text); color: var(--muted); transition: rotate .25s ease; }
.start-form .qa[open] summary::after { rotate: 45deg; }
.start-form .qa > .help { margin: 0 0 10px; font-size: 13px; }
.start-form .qa-list { display: grid; gap: 8px; padding-bottom: 14px; }
.start-form .qa-list .field input { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.drop-field { grid-template-rows: auto 1fr auto; }
.drop-field .drop { align-self: stretch; align-content: center; padding: 14px; gap: 2px; }
.drop b { font-size: 15px; }
.drop .drop-hint { font-size: 13px; }
.drop .drop-note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.start-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.checks { display: grid; gap: 4px; }
.start-form .check { font-size: 13px; gap: 10px; }
.start-form .check input { width: 18px; height: 18px; }
.start-foot .btn-big { min-height: 48px; padding: 0 26px; font-size: 16px; }
.start-form .form-status:empty { display: none; }
.start .foot { padding: 10px var(--pad); }
@media (max-height: 660px) and (min-width: 1024px) { .start-form { padding: 12px; gap: 8px; } .start-col { gap: 6px; } .start-cols { gap: 10px; } .start-form .kind label { min-height: 36px; } .start-form .field input, .start-form .field textarea { min-height: 40px; padding: 8px 12px; } .drop-field .drop { padding: 8px; } .start-foot .btn-big { min-height: 44px; } .start-steps { gap: 8px; } .start-side { gap: 10px; } .start .sub-top { padding-top: 8px; } .start-title { margin-bottom: 2px; } }
.start .foot-row { font-size: 13px; gap: 8px 20px; }
.start .sub-top { padding-top: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row2 .field { align-content: start; }
.field .drop-input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.drop { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 26px 18px; border: 1.5px dashed var(--line); border-radius: 18px; background: var(--bg); cursor: pointer; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--cool); background: oklch(0.44 0.18 256 / 0.12); outline: none; }
.drop b { font-weight: 600; }
.drop .drop-count { font-size: 14px; color: var(--cool); }
.drop .drop-count:empty { display: none; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.files:empty { display: none; }
.files li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.files li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files li small { color: var(--muted); flex: none; }
.files li button { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.files li button:hover { background: var(--bg); color: var(--fg); }
@media (max-width: 1023px) { .start-grid { grid-template-columns: 1fr; } .start-grid .form { order: 1; } .start-side { order: 2; } .start-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .row2 { grid-template-columns: 1fr; } .drop { padding: 16px; } .drop .drop-hint { display: none; } .start-foot .btn { width: 100%; } .start-form #f-text { min-height: 104px; } }
.form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 15px; }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 400 16px/1.4 var(--text); transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; }
.field input[type="file"] { padding: 12px; }
.field input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--surface-2); color: var(--fg); font: 500 14px var(--text); cursor: pointer; }
.field input[aria-invalid="true"] { border-color: var(--warm); }
.help { font-size: 14px; color: var(--muted); }
/* тикет 65: выбор "сайт или магазин" и вопросы о магазине */
.kind { margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.kind-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kind label { position: relative; display: grid; place-items: center; min-height: 48px; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 15px; text-align: center; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s; }
.kind input, .chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.kind label:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 3px solid var(--cool); outline-offset: 2px; }
.shop { margin: 0; padding: 0; border: 0; display: grid; gap: 18px; min-width: 0; }
.shop[hidden], .field.mat[hidden] { display: none; }
.shop-intro { margin: 0; }
.opts { margin: 0; padding: 0; border: 0; min-width: 0; }
.opts legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 15px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.chip:hover { border-color: var(--muted); }
.chip:has(input:checked)::before { content: ''; width: 10px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; rotate: -45deg; }
.shop-site-help { margin-top: -10px; padding-left: 34px; }
.err { font-size: 14px; color: var(--warm); min-height: 0; }
.err:empty { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--muted); cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit { justify-self: start; }
.submit[disabled] { opacity: .5; cursor: progress; }
.form-status { margin: 0; font-weight: 600; min-height: 1.6em; }
.form-status.bad { color: var(--warm); }

/* подвал */
.foot { padding: 40px var(--pad) 32px; border-top: 1px solid var(--line); overflow: hidden; }
.foot-big { font: 900 clamp(64px, 18.5vw, 300px)/.8 var(--display); letter-spacing: -.07em; text-align: center; margin-bottom: 32px; user-select: none; }
.foot-row { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 14px; color: var(--muted); }
.foot-row p { margin: 0; }
.foot-who small { display: block; margin-top: 4px; font-size: 12px; opacity: .8; }

/* адаптив */
@media (max-width: 1023px) {
  .nav { display: none; }
  .top .btn-sm { margin-left: auto; }
  .top .top-login { margin-left: auto; }
  .top .top-login + .btn-sm { margin-left: 0; }
  .pile-stage { grid-template-columns: 1fr; min-height: 0; }
  .pile-canvas { aspect-ratio: 1 / 1; }
  .themes, .edits, .order-grid { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .step h3 { margin-top: 24px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top { inset: 8px 8px auto; padding-left: 14px; }
  .logo span { display: none; }
  .hero-cta .btn { width: 100%; }
  .price-grid { grid-template-columns: 1fr; }
  .price-shop .btn { align-self: stretch; }
  .bit { padding: 8px 10px; }
  .step-n { font-size: 56px; }
  .chat { padding: 18px; }
  .msg { max-width: 90%; }
  .btn-big { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}
.bit { translate: 0 0; animation: float 5s ease-in-out infinite alternate; }
.bit:nth-child(2n) { animation-duration: 6.5s; animation-delay: -2s; }
.bit:nth-child(3n) { animation-duration: 4.2s; animation-delay: -1s; }
@keyframes float { to { translate: 0 -14px; } }
.no-motion .bits { display: none; }

/* ===== Вариант tk (палитра Turkido), с 23.10.2026 единственный: класс tk на <html>, правила ниже поверх общих. ===== */
.tk body { background: radial-gradient(1200px 800px at 80% -10%, oklch(0.24 0.08 250 / 0.6), transparent 60%), var(--bg); }
.tk .eyebrow { color: var(--cool); }
.tk .progress span { background: linear-gradient(90deg, var(--cool), var(--accent)); }
.tk .spot { background: radial-gradient(600px circle at 70% 30%, oklch(0.6 0.16 236 / 0.16), transparent 60%), radial-gradient(900px circle at 10% 110%, oklch(0.55 0.25 300 / 0.2), transparent 60%); }
.tk :focus-visible { outline-color: var(--cool); }

/* кнопки-желе */
.tk .btn, .tk .price-main .btn { color: #fff; background:
    radial-gradient(120% 75% at 50% -12%, oklch(1 0 0 / 0.4) 0%, oklch(1 0 0 / 0.1) 42%, transparent 62%),
    radial-gradient(90% 60% at 50% 115%, oklch(1 0 0 / 0.16) 0%, transparent 60%),
    linear-gradient(180deg, var(--j-top) 0%, var(--j-mid) 55%, var(--j-bot) 100%);
  border: 1px solid var(--j-rim); text-shadow: 0 1px 2px oklch(0.25 0.12 262 / 0.6);
  box-shadow: inset 0 2px 1px -1px oklch(1 0 0 / 0.75), inset 0 -7px 12px -4px var(--j-shade), inset 0 0 0 1px oklch(1 0 0 / 0.08), 0 10px 24px -10px var(--j-glow), 0 2px 4px -1px oklch(0 0 0 / 0.35); }
.tk .btn:hover { color: #fff; filter: brightness(1.08) saturate(1.05); box-shadow: inset 0 2px 1px -1px oklch(1 0 0 / 0.8), inset 0 -7px 12px -4px var(--j-shade), inset 0 0 0 1px oklch(1 0 0 / 0.1), 0 16px 34px -10px var(--j-glow), 0 2px 4px -1px oklch(0 0 0 / 0.35); }
.tk .btn:active { scale: 1.04 0.92; }
/* главные кнопки в стиле букв ВебШаг (вариант A, решение владельца 22.10): тёмно-синяя середина под текстом, звёзды, неоновый голубой край */
.tk .btn-cosmos { color: #fff; border: 1.5px solid oklch(0.9 0.12 210);
  background: radial-gradient(34% 30% at 50% 4%, oklch(1 0 0 / 0.32), transparent 100%),
    radial-gradient(55% 70% at 50% 55%, oklch(0.24 0.14 264 / 0.75), transparent 78%),
    radial-gradient(1px 1px at 12% 30%, #fff 60%, transparent), radial-gradient(1px 1px at 22% 74%, #fffd 60%, transparent),
    radial-gradient(1.4px 1.4px at 31% 22%, #fff 60%, transparent), radial-gradient(1px 1px at 68% 78%, #fffc 60%, transparent),
    radial-gradient(1.4px 1.4px at 80% 26%, #fff 60%, transparent), radial-gradient(1px 1px at 90% 64%, #fffd 60%, transparent),
    radial-gradient(1px 1px at 46% 86%, #fffa 60%, transparent), radial-gradient(1px 1px at 58% 14%, #fffb 60%, transparent),
    radial-gradient(1px 1px at 6% 56%, #fffb 60%, transparent), radial-gradient(1.2px 1.2px at 95% 40%, #fff 60%, transparent),
    radial-gradient(130% 160% at 50% 115%, oklch(0.55 0.21 255), oklch(0.34 0.19 264) 72%);
  text-shadow: 0 1px 2px oklch(0.15 0.1 265 / 0.9), 0 0 10px oklch(0.2 0.14 262 / 0.8);
  box-shadow: inset 0 0 14px oklch(0.78 0.15 220 / 0.65), inset 0 -8px 14px -6px oklch(0.15 0.12 268 / 0.9), 0 0 14px oklch(0.78 0.16 218 / 0.75), 0 0 36px oklch(0.62 0.19 236 / 0.45); }
.tk .btn-cosmos:hover { color: #fff; filter: brightness(1.1) saturate(1.1); box-shadow: inset 0 0 16px oklch(0.8 0.15 220 / 0.75), inset 0 -8px 14px -6px oklch(0.15 0.12 268 / 0.9), 0 0 22px oklch(0.8 0.16 218 / 0.85), 0 0 56px oklch(0.62 0.19 236 / 0.55); }
.tk .btn-ghost { background: oklch(0.2 0.04 254 / 0.6); border: 1px solid var(--line); box-shadow: none; text-shadow: none; }
.tk .btn-ghost:hover { border-color: var(--cool); box-shadow: 0 0 0 1px var(--cool), 0 10px 30px -12px oklch(0.6 0.16 228 / 0.6); }

/* желейные буквы (каждая буква .ch после SplitText): глянец сверху, тень снизу, свечение; без JS просто красные */
.tk .jelly { color: var(--accent); }
.tk .jelly .ch, .tk .jelly-split .ch { display: inline-block; padding-block: .05em; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0;
  background: radial-gradient(70% 36% at 50% 16%, oklch(1 0 0 / 0.8), oklch(1 0 0 / 0.14) 55%, transparent 72%),
              linear-gradient(180deg, var(--r-top) 0%, var(--r-mid) 52%, var(--r-bot) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 var(--r-edge)) drop-shadow(0 10px 18px var(--r-glow)); }
.tk .foot-big { -webkit-text-stroke: 0; color: oklch(0.3 0.08 254); }
.tk .foot-big.jelly-split .ch { background: radial-gradient(70% 36% at 50% 16%, oklch(1 0 0 / 0.6), transparent 72%), linear-gradient(180deg, var(--j-top), var(--j-mid) 52%, var(--j-bot));
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 oklch(0.22 0.12 267)) drop-shadow(0 14px 28px var(--j-glow)); }

/* остальное в палитре */
.tk .step::after { background: radial-gradient(circle, oklch(0.6 0.16 236 / 0.35), transparent 70%); }
.tk .msg.me { background: linear-gradient(180deg, var(--j-top), var(--j-mid) 60%, var(--j-bot)); color: #fff; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.4), 0 8px 20px -10px var(--j-glow); }
.tk .theme-tabs button:hover { border-color: var(--cool); }
.tk .price-main { background: radial-gradient(120% 60% at 50% -10%, oklch(1 0 0 / 0.22), transparent 55%), linear-gradient(180deg, oklch(0.5 0.17 248), oklch(0.34 0.17 262)); color: #fff; border-color: oklch(0.7 0.16 258 / 0.7); box-shadow: 0 30px 70px -30px var(--j-glow); }
.tk .price-main h3, .tk .price-main .sum small { color: oklch(0.88 0.04 240); }
.tk .price-main li { border-color: oklch(1 0 0 / 0.16); }
.tk .price-main .btn { background: linear-gradient(180deg, var(--r-top), var(--r-mid) 55%, var(--r-bot)); border-color: oklch(0.95 0.06 320 / 0.6); box-shadow: inset 0 2px 1px -1px oklch(1 0 0 / 0.75), inset 0 -7px 12px -4px oklch(0.3 0.16 285 / 0.8), 0 10px 24px -10px var(--r-glow); }
.tk .faq details[open] summary::after { background-color: oklch(0.44 0.18 256); border-color: oklch(0.7 0.16 258 / 0.7); }
.tk .field input:focus, .tk .field textarea:focus { border-color: var(--cool); box-shadow: 0 0 0 4px oklch(0.66 0.13 228 / 0.25); }
.tk .check input { accent-color: oklch(0.5 0.19 258); }
.tk .kind label:has(input:checked) { background: oklch(0.44 0.18 256); color: #fff; }
.tk .chip:has(input:checked) { border-color: var(--cool); background: oklch(0.44 0.18 256 / 0.35); }
.tk .form-status.ok { color: var(--cool); }
.tk .browser { box-shadow: 0 50px 120px -30px #000, 0 0 0 1px oklch(0.66 0.13 228 / 0.3); }
.jw { display: inline-block; white-space: nowrap; }
@media (min-width: 1024px) {
  .how { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
  .how-head { margin: 0; }
  .how-rail { width: 100%; margin: 0; }
}
/* космос в варианте Turkido: звёзды и фиолетовая туманность на первом экране */
.tk .hero::before, .tk .hero::after, .tk .start-order::before, .tk .start-order::after { content: ''; position: absolute; inset: 0; max-width: none; margin: 0; pointer-events: none; }
.tk .hero::before, .tk .start-order::before { background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 27% 72%, #fffc 50%, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 63% 64%, #fffb 50%, transparent),
    radial-gradient(1.5px 1.5px at 78% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 88% 78%, #fffc 50%, transparent),
    radial-gradient(1px 1px at 52% 88%, #fff9 50%, transparent), radial-gradient(1px 1px at 6% 52%, #fffa 50%, transparent),
    radial-gradient(1.5px 1.5px at 94% 46%, #fff 50%, transparent), radial-gradient(1px 1px at 35% 38%, #fff8 50%, transparent),
    radial-gradient(1px 1px at 70% 42%, #fff9 50%, transparent), radial-gradient(1px 1px at 18% 90%, #fffb 50%, transparent);
  animation: twinkle 6s ease-in-out infinite alternate; }
.tk .hero::after, .tk .start-order::after { background: radial-gradient(50% 40% at 85% 25%, oklch(0.5 0.24 300 / 0.28), transparent 70%), radial-gradient(40% 35% at 70% 10%, oklch(0.55 0.2 330 / 0.18), transparent 70%); filter: blur(10px); }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
/* надпись ВебШаг из шести букв Glif (landing/glif/letters, общая линия строки): в варианте Turkido вместо текста,
   каждая буква сплющивается отдельно (site.js jellyBind) */
.tk .wm-text { display: none; }
.tk .wm-word { --wh: 1.5em; display: flex; align-items: flex-end; height: var(--wh); margin: -.1em 0 -.08em -.1em; }
.tk .wm-letter { height: 100%; width: auto; margin-inline: calc(var(--wh) * -0.045); transform-origin: 50% 88%; position: relative; }
.tk .foot-big .wm-word { --wh: clamp(70px, 15vw, 220px); justify-content: center; margin: 0 auto; }
@media (max-width: 640px) { .tk .hero .wm-word { --wh: 1.75em; } }
/* логотип в шапке варианта Turkido: то же слово из желейных букв, без квадрата */
.tk .logo svg, .tk .logo .logo-text { display: none; }
.tk .logo .logo-wm { --wh: 34px; margin: -6px 0 -4px -4px; }
@media (max-width: 640px) { .tk .logo span.logo-wm { display: flex; --wh: 30px; } }

/* ===== роли цветов в варианте Turkido (21.10): синий = действия, фиолетовый = космос и бренд, бирюзовый = подписи, рамки, номера ===== */
/* 1. туманность и звёзды под текстом первого экрана */
.tk .hero::before, .tk .hero::after, .tk .hero > .spot, .tk .start-order::before, .tk .start-order::after, .tk .start-order > .spot { z-index: 0; }
.tk .hero > *:not(.spot), .tk .start-order > *:not(.spot) { z-index: 1; }
/* 2. ссылки при наведении бирюзовые, не фиолетовые */
.tk a:hover { color: var(--cool); }
/* 3. "Начать" на синей карточке: белое стекло с синим текстом */
.tk .price-main .btn { color: oklch(0.38 0.17 262); text-shadow: none; border-color: oklch(1 0 0 / 0.7);
  background: radial-gradient(120% 75% at 50% -12%, #fff 0%, oklch(1 0 0 / 0.6) 45%, transparent 65%), linear-gradient(180deg, oklch(0.99 0.01 250), oklch(0.9 0.04 255) 60%, oklch(0.82 0.06 258));
  box-shadow: inset 0 2px 1px -1px #fff, inset 0 -6px 10px -4px oklch(0.6 0.1 258 / 0.5), 0 10px 26px -10px oklch(0.15 0.1 262 / 0.8); }
.tk .price-main .btn:hover { color: oklch(0.32 0.18 262); }
/* 4. финальный заголовок в синем желе, как надпись ВебШаг и кнопки */
.tk .order-title { --r-top: oklch(0.86 0.1 215); --r-mid: oklch(0.6 0.17 240); --r-bot: oklch(0.42 0.19 262); --r-glow: oklch(0.5 0.19 245 / 0.5); --r-edge: oklch(0.25 0.13 265); }
/* свечение и звёзды первого экрана гаснут к низу, без резкой границы со следующей секцией */
.spot, .tk .hero::before, .tk .hero::after, .tk .start-order::before, .tk .start-order::after { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }

/* подсветка за курсором по всему сайту и бирюзовая точка на курсоре (site.js, только мышь и без reduced motion) */
.cursor-glow, .cursor-dot { position: fixed; pointer-events: none; opacity: 0; transition: opacity .4s; }
.cursor-glow { inset: 0; z-index: 0; }
.tk .cursor-glow { background: radial-gradient(560px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.55 0.11 215 / 0.32), oklch(0.45 0.12 250 / 0.12) 45%, transparent 68%); }
.cursor-dot { z-index: 90; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; transition: opacity .3s, scale .3s var(--spring), background-color .3s; }
.tk .cursor-dot { background: oklch(0.82 0.14 205); box-shadow: 0 0 14px 3px oklch(0.75 0.15 210 / 0.75); }
.cursor-dot.big { scale: 2.6; opacity: .45 !important; }
.has-cursor .cursor-glow, .has-cursor .cursor-dot { opacity: 1; }
main, .foot { position: relative; z-index: 1; }
/* варианты оформления миниатюрами под рамкой: картинка первого экрана и понятная подпись, полоска времени до смены */
.theme-hint { margin: 18px 0 10px; font-size: 14px; color: var(--muted); }
.theme-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; }
.theme-tabs button { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 0 0 8px; border-radius: 12px; border: 0; background: transparent; color: var(--muted); font: 500 14px/1.2 var(--text); cursor: pointer; overflow: hidden; }
.theme-tabs button img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); opacity: .6; transition: opacity .3s, box-shadow .3s, transform .3s var(--spring); }
.theme-tabs button:hover img { opacity: .9; transform: translateY(-2px); }
.theme-tabs button[aria-selected="true"] img { opacity: 1; }
.tk .theme-tabs button[aria-selected="true"] { background: transparent; border: 0; color: #fff; }
.tk .theme-tabs button[aria-selected="true"] img { box-shadow: 0 0 0 2px var(--cool), 0 8px 24px -8px oklch(0.6 0.16 228 / 0.7); }
.tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%; }
.tk .tab-bar { background: var(--cool); }
@media (max-width: 640px) { .theme-tabs { gap: 6px; } .theme-tabs button { font-size: 12px; } }

/* куча собирается в настоящий сайт (21.10): сообщения как в Telegram, в рамке снимок первого экрана Точки; где сообщение
   приземлилось, там проявляется настоящий сайт (маска из кругов, радиусы --r0..--r6 двигает site.js) */
.browser { inset: 8% 3% auto; height: auto; background: #e6e1d6; }
.browser-site { position: relative; aspect-ratio: 960 / 675; background: #f6f3ec; }
.browser-site img { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-ghost { filter: grayscale(1) contrast(.6) brightness(1.15); opacity: .22; }
.site-real { --r0: 0px; --r1: 0px; --r2: 0px; --r3: 0px; --r4: 0px; --r5: 0px; --r6: 0px;
  -webkit-mask-image: radial-gradient(circle var(--r0) at 76% 45%, #000 97%, transparent), radial-gradient(circle var(--r1) at 25% 30%, #000 97%, transparent), radial-gradient(circle var(--r2) at 25% 44%, #000 97%, transparent), radial-gradient(circle var(--r3) at 25% 62%, #000 97%, transparent), radial-gradient(circle var(--r4) at 76% 84%, #000 97%, transparent), radial-gradient(circle var(--r5) at 58% 93%, #000 97%, transparent), radial-gradient(circle var(--r6) at 50% 50%, #000 97%, transparent);
  mask-image: radial-gradient(circle var(--r0) at 76% 45%, #000 97%, transparent), radial-gradient(circle var(--r1) at 25% 30%, #000 97%, transparent), radial-gradient(circle var(--r2) at 25% 44%, #000 97%, transparent), radial-gradient(circle var(--r3) at 25% 62%, #000 97%, transparent), radial-gradient(circle var(--r4) at 76% 84%, #000 97%, transparent), radial-gradient(circle var(--r5) at 58% 93%, #000 97%, transparent), radial-gradient(circle var(--r6) at 50% 50%, #000 97%, transparent); }
.no-motion .site-real { -webkit-mask-image: none; mask-image: none; }
.no-motion .bits { display: none; }
/* сообщения в стиле Telegram (тёмная тема) */
.tg { position: absolute; display: flex; align-items: center; gap: 10px; max-width: 46%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #182533; color: #f5f5f5; border: 0;
  font: 400 clamp(12px, 1.15vw, 14px)/1.35 var(--text); box-shadow: 0 18px 40px -16px #000c; white-space: normal; }
.tg-time { position: absolute; right: 8px; bottom: 5px; font-size: 11px; color: #ffffff8c; }
.tg-text { left: 40%; top: -2%; width: 44%; padding-bottom: 20px; rotate: 3deg; }
.tg-photo { flex-direction: column; padding: 3px; left: -3%; top: 2%; width: 30%; rotate: -6deg; }
.tg-photo img { width: 100%; height: auto; border-radius: 11px 11px 11px 2px; }
.tg-photo .tg-time { right: 10px; bottom: 9px; padding: 1px 6px; border-radius: 8px; background: #0007; color: #fff; }
.tg-photo2 { left: 60%; top: 66%; width: 22%; rotate: 5deg; }
.tg-file { left: 2%; top: 58%; rotate: 5deg; }
.tg-file svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #3a8fd9; fill: none; stroke: #fff; stroke-width: 2; }
.tg-file span { display: flex; flex-direction: column; } .tg-file small { color: #ffffff8c; }
.tg-voice { left: 62%; top: 34%; rotate: -3deg; }
.tg-voice svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #3a8fd9; fill: #fff; }
.tg-voice i { width: 90px; height: 22px; background: repeating-linear-gradient(90deg, #7cb7ec 0 3px, transparent 3px 6px); -webkit-mask: radial-gradient(ellipse 100% 60% at center, #000 50%, transparent 72%); mask: radial-gradient(ellipse 100% 60% at center, #000 50%, transparent 72%); }
.tg-voice span { color: #ffffffa6; font-size: 12px; }
.tg-link { left: 16%; top: 84%; flex-direction: column; align-items: flex-start; gap: 2px; border-left: 3px solid #e5402f; border-radius: 6px 14px 14px 6px; rotate: 2deg; }
.tg-link b { color: #ff6b5b; font-weight: 600; } .tg-link span { color: #dfe7ef; }
@media (max-width: 640px) { .tg-voice i { width: 50px; } .tg-text { width: 52%; } }
/* ВебШаг на первом экране лесенкой: правый край надписи по концу самой длинной строки заголовка (site.js alignWordmark) */
.tk .hero .wm-word { margin-left: var(--wm-shift, 0px); }
.tk .hero .wm-word:not(.placed) { visibility: hidden; }

/* плашка cookie (задание 80): Метрика только после "Разрешить статистику", assets/metrika.js */
.cookie { position: fixed; z-index: 80; right: 16px; bottom: 16px; max-width: 500px; padding: 20px 22px; border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: 0 18px 40px -16px oklch(0 0 0 / 0.6); }
.cookie[hidden] { display: none; }
.hold-note { color: var(--fg); }
.hero-note.hold-note { margin-top: 8px !important; }
.hero-note.hold-note::before { background: #f2a33a; box-shadow: none; animation: none; }
.cookie p { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.cookie p a { color: var(--fg); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .cookie { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 12px 14px 12px; border-radius: 16px; } .cookie p { font-size: 13px; line-height: 1.35; margin-bottom: 10px; } .cookie-actions { flex-wrap: nowrap; gap: 8px; } .cookie-actions .btn { flex: 1 1 0; min-height: 40px; padding: 6px 8px; font-size: 13px; white-space: normal; line-height: 1.15; } }