/* MasterTeam public site: landing, documents, help center */
:root {
  --ink: #111724;
  --ink-2: #4b5668;
  --ink-3: #8a94a6;
  --bg: #fbfaf7;
  --surface: #ffffff;
  --soft: #f4f2ee;
  --line: #ebe7e0;
  --line-2: #ddd8cf;
  --orange: #fc7b2e;
  --orange-soft: #fff1e3;
  --blue: #0088f7;
  --blue-deep: #0070d6;
  --blue-soft: #e5f3ff;
  --violet: #7b33f1;
  --pink: #f9395d;
  --violet-soft: #f2eaff;
  --green: #16a36a;
  --green-soft: #e3f6ec;
  --red: #e5484d;
  --red-soft: #fdeaea;
  --trio: #111724; /* single flat accent for small marks (kicker line, arrow button) */
  --r: 18px;
  --sh-1: 0 1px 2px rgba(17, 23, 36, .05), 0 2px 6px rgba(17, 23, 36, .04);
  --sh-2: 0 2px 6px rgba(17, 23, 36, .05), 0 14px 36px rgba(17, 23, 36, .08);
  --sh-3: 0 30px 80px rgba(17, 23, 36, .16), 0 6px 18px rgba(17, 23, 36, .06);
  --font: 'Onest', 'Noto Sans Armenian', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, 'Noto Color Emoji', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font: 16px/1.6 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.025em; color: var(--ink); }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.container { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.manager-links .i, .contact-ic .i { fill: currentColor; stroke: none; }
.contact-ic .i { fill: none; stroke: currentColor; }
.contact-card:first-child .contact-ic .i { fill: none; stroke: currentColor; }
:focus-visible { outline: 3px solid rgba(0, 136, 247, .4); outline-offset: 2px; border-radius: 6px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(17, 23, 36, .22); }
.btn-primary:hover { background: #070b14; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(17, 23, 36, .28); }
.btn-brand { background: var(--blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 136, 247, .32); }
.btn-brand:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--soft); }
.btn-outline { border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-1px); }
.btn-glass { color: #fff; border: 1.5px solid rgba(255, 255, 255, .28); }
.btn-glass:hover { background: rgba(255, 255, 255, .1); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 60; background: rgba(251, 250, 247, .8); backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 74px; }
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 2px; }
.nav-links > a { padding: 8px 13px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: 15px; transition: color .15s, background .15s; }
.nav-links > a:hover { color: var(--ink); background: var(--soft); }
.nav-actions { margin-left: auto; display: flex; gap: 8px; }
.nav-actions-mobile { display: none; }
.nav-burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- shared bits ---------- */
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kicker::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--trio); }
.kicker.tone-orange::before { background: var(--orange); }
.kicker.tone-blue::before { background: var(--blue); }
.kicker.tone-violet::before { background: var(--violet); }
.trio { display: inline-flex; gap: 6px; }
.trio i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.trio i:nth-child(2) { background: var(--blue); }
.trio i:nth-child(3) { background: var(--violet); }
.section { padding: 112px 0; }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: clamp(32px, 4.2vw, 54px); font-weight: 800; letter-spacing: -.04em; margin: 16px 0 18px; }
.sec-head p { font-size: 19px; color: var(--ink-2); }
.mark { position: relative; white-space: nowrap; }
.mark::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .2em; border-radius: 4px; z-index: -1; transform: skewX(-12deg); opacity: .9; }
.mark.o::after { background: #ffd2a6; }
.mark.b::after { background: #b8dcff; }
.mark.v::after { background: #dcc6ff; }
.av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; font-style: normal; }
.av.o { background: var(--orange); } .av.b { background: var(--blue); } .av.v { background: var(--violet); } .av.g { background: var(--green); }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.chip.o { background: var(--orange-soft); color: #c55f00; } .chip.b { background: var(--blue-soft); color: #0067c2; } .chip.v { background: var(--violet-soft); color: #6a25d6; }
.chip.r { background: var(--red-soft); color: #c9373c; } .chip.g { background: var(--green-soft); color: #0d7a4d; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 64px 0 40px; }
.hero::before { content: ''; position: absolute; inset: -74px 0 auto; height: 720px; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 340px at 8% 22%, rgba(252, 123, 46, .14), transparent 70%), radial-gradient(560px 380px at 52% 0%, rgba(0, 136, 247, .12), transparent 70%), radial-gradient(520px 380px at 96% 40%, rgba(123, 51, 241, .12), transparent 70%); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: end; }
.hero h1 { font-size: clamp(44px, 7.2vw, 92px); font-weight: 800; letter-spacing: -.055em; line-height: .98; }
.hero h1 .l2 { color: var(--ink-3); }
.hero-side p { font-size: 19px; color: var(--ink-2); margin-bottom: 26px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.hero-facts span { display: inline-flex; align-items: center; gap: 7px; }
.hero-facts span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* live demo board */
.demo { margin-top: 164px; position: relative; }
.demo-hint { position: absolute; top: -46px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: var(--sh-2); white-space: nowrap; z-index: 2; }
.demo-hint::after { content: ''; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); }
.demo-hint .hand { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.demo-frame { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--sh-3); overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.demo-dots { display: flex; gap: 6px; }
.demo-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.demo-dots i:nth-child(2) { background: #febc2e; } .demo-dots i:nth-child(3) { background: #28c840; }
.demo-title { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.demo-title .pi { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
.demo-progress { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.demo-progress .track { width: 160px; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.demo-progress .fill { height: 100%; width: 0; border-radius: 4px; background: var(--green); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.demo-team { display: flex; }
.demo-team .av { width: 28px; height: 28px; border: 2px solid #fff; margin-left: -6px; font-size: 11px; }
.demo-board { user-select: none; -webkit-user-select: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px; background: linear-gradient(180deg, #faf9f6, #f6f4ef); }
.d-col { background: rgba(255, 255, 255, .6); border: 1px dashed transparent; border-radius: 16px; padding: 12px; min-height: 300px; display: flex; flex-direction: column; gap: 10px; transition: background .2s, border-color .2s; }
.d-col.over { background: var(--blue-soft); border-color: var(--blue); }
.d-col-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 2px 4px 4px; }
.d-col-h .dot { width: 9px; height: 9px; border-radius: 50%; }
.d-col-h .n { margin-left: auto; color: var(--ink-3); font-weight: 600; font-size: 13px; }
.d-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; cursor: grab; user-select: none; touch-action: none; transition: box-shadow .2s, transform .2s, opacity .2s; box-shadow: var(--sh-1); }
.d-card:hover { box-shadow: var(--sh-2); }
.d-card.dragging { cursor: grabbing; box-shadow: 0 24px 50px rgba(17, 23, 36, .22); transform: rotate(2deg) scale(1.02); position: fixed; z-index: 100; pointer-events: none; }
.d-card.placeholder { opacity: .35; border-style: dashed; box-shadow: none; }
.d-card .row1 { display: flex; gap: 10px; align-items: flex-start; }
.d-check { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; display: grid; place-items: center; transition: all .2s; margin-top: 1px; line-height: 0; }
.d-check svg { display: block; width: 11px; height: 11px; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: 0; }
.d-card.done .d-check { background: var(--green); border-color: var(--green); }
.d-card.done .d-check svg { opacity: 1; }
.d-card .t { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.d-card.done .t { color: var(--ink-3); text-decoration: line-through; }
.d-card .row2 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.d-card .due { font-weight: 600; }
.d-card .due.red { color: var(--red); } .d-card .due.green { color: var(--green); }
.d-card .row2 .meta { margin-left: auto; }
.pop { animation: pop .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes pop { 40% { transform: scale(1.05); } }
.demo-toast { position: absolute; right: 24px; bottom: 24px; background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: var(--sh-3); opacity: 0; transform: translateY(10px); transition: all .3s; pointer-events: none; }
.demo-toast.show { opacity: 1; transform: none; }
.demo-toast b { color: #7dd3a8; }

/* ---------- chat → tasks ---------- */
.convert { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
.pane { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: var(--sh-2); min-height: 430px; }
.pane-h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 18px; }
.pane-h small { margin-left: auto; color: var(--ink-3); font-weight: 500; font-size: 13px; }
.chat .pane-h .i { color: #2aa6df; }
.bubble { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-end; }
.bubble .msg { background: var(--soft); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 14.5px; max-width: 86%; }
.bubble .msg b { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 2px; font-weight: 600; }
.bubble.lost .msg { opacity: .55; }
.convert-arrow { width: 64px; height: 64px; border-radius: 50%; background: var(--trio); display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px rgba(17, 23, 36, .2); }
.convert-arrow .i { width: 26px; height: 26px; stroke-width: 2.5; }
.task-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 10px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-14px); transition: all .5s cubic-bezier(.2, .7, .2, 1); }
.task-row.in { opacity: 1; transform: none; }
.task-row .d-check { width: 18px; height: 18px; }
.task-row .nm { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row .when { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.convert-note { text-align: center; color: var(--ink-3); margin-top: 22px; font-size: 15px; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: transform .3s, box-shadow .3s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.tile h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.tile > p { color: var(--ink-2); font-size: 15.5px; }
.tile .viz { margin-top: auto; padding-top: 22px; }
.t-4 { grid-column: span 4; } .t-2 { grid-column: span 2; } .t-3 { grid-column: span 3; }
.tile.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.tile.dark h3 { color: #fff; } .tile.dark > p { color: #aeb8c7; }
/* views tile */
.vt-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); margin: 18px 0 0; }
.vt-tabs button { padding: 7px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.vt-tabs button.on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.vt-screen { height: 230px; margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; background: #faf9f6; overflow: hidden; position: relative; }
.vt-pane { position: absolute; inset: 0; padding: 14px; animation: fade .35s ease; }
.vt-pane[hidden] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.mini-list .r { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mini-list .r .nm { flex: 1; font-weight: 500; }
.mini-list .r .d-check { width: 16px; height: 16px; }
.mini-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 100%; }
.mini-board > div { background: #fff; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--line); }
.mini-board h5 { margin: 0 0 2px; font-size: 12px; color: var(--ink-3); }
.mini-board span { display: block; height: 30px; border-radius: 8px; background: var(--soft); }
.mini-board span.o { box-shadow: inset 3px 0 0 var(--orange); } .mini-board span.b { box-shadow: inset 3px 0 0 var(--blue); } .mini-board span.v { box-shadow: inset 3px 0 0 var(--violet); }
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; height: 100%; }
.mini-cal i { border-radius: 8px; background: #fff; border: 1px solid var(--line); position: relative; font-style: normal; font-size: 11px; color: var(--ink-3); padding: 4px 6px; }
.mini-cal i.e::after { content: ''; position: absolute; left: 5px; right: 5px; bottom: 6px; height: 7px; border-radius: 4px; background: var(--blue); }
.mini-cal i.e.o::after { background: var(--orange); } .mini-cal i.e.v::after { background: var(--violet); }
.mini-cal i.today { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.mini-tl { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; position: relative; height: 100%; }
.mini-tl b { display: block; height: 22px; border-radius: 7px; }
.mini-tl::after { content: ''; position: absolute; top: 0; bottom: 0; left: 46%; width: 2px; background: var(--red); opacity: .6; }
/* notifications tile */
.notif-stack { display: flex; flex-direction: column; gap: 8px; }
.notif { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 13.5px; box-shadow: var(--sh-1); }
.notif:nth-child(2) { margin-left: 14px; opacity: .85; } .notif:nth-child(3) { margin-left: 28px; opacity: .65; }
.notif b { font-weight: 700; }
/* files tile */
.drop { border: 2px dashed var(--line-2); border-radius: 16px; padding: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.file { display: flex; align-items: center; gap: 8px; background: var(--soft); border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.file i { width: 26px; height: 30px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 9px; color: #fff; font-weight: 800; }
/* recurring tile */
.cycle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cycle span { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 600; }
.cycle .arrow { padding: 0; border: 0; background: none; color: #6b7a90; }
/* reports tile */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--blue); transform-origin: bottom; transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.bars i:nth-child(3n+1) { background: var(--orange); } .bars i:nth-child(3n+2) { background: var(--blue); } .bars i:nth-child(3n) { background: var(--violet); }
.in .bars i { transform: scaleY(1); }
/* access tile */
.access { display: flex; align-items: center; gap: 14px; }
.lock { width: 52px; height: 52px; border-radius: 16px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; }
.lock .i { width: 26px; height: 26px; }
.access .stack { display: flex; }
.access .stack .av { width: 34px; height: 34px; border: 3px solid #fff; margin-left: -8px; font-size: 12px; }
/* search tile */
.kbd-row { display: flex; align-items: center; gap: 8px; }
kbd { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 3px 0 var(--line-2); font: 700 15px var(--font); color: var(--ink); }
.search-fake { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink-3); font-size: 14px; background: #fff; }
.search-fake .caret { width: 2px; height: 16px; background: var(--blue); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- how (dark) ---------- */
.how { background: var(--ink); color: #fff; border-radius: 36px; margin: 0 16px; padding: 104px 0; position: relative; overflow: hidden; }
.how::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; top: -200px; background: radial-gradient(circle, rgba(123, 51, 241, .35), transparent 65%); }
.how::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; left: -200px; bottom: -260px; background: radial-gradient(circle, rgba(252, 123, 46, .25), transparent 65%); }
.how .sec-head h2 { color: #fff; }
.how .sec-head p { color: #aeb8c7; }
.how .kicker { color: #8d9ab0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 1; counter-reset: s; }
.step { padding: 30px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.step .num { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.step:nth-child(1) .num { color: var(--orange); } .step:nth-child(2) .num { color: var(--blue); } .step:nth-child(3) .num { color: var(--violet); }
.step h3 { color: #fff; font-size: 22px; margin: 20px 0 10px; }
.step p { color: #aeb8c7; }
.step code { background: rgba(255, 255, 255, .1); padding: 2px 6px; border-radius: 6px; font-size: 13px; color: #fff; }

/* ---------- use cases ---------- */
.cases { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; }
.case-tabs { display: flex; flex-direction: column; gap: 8px; }
.case-tab { text-align: left; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); transition: all .2s; }
.case-tab b { display: block; font-size: 17px; margin-bottom: 2px; }
.case-tab span { color: var(--ink-3); font-size: 14px; }
.case-tab:hover { border-color: var(--line-2); }
.case-tab.on { border-color: var(--ink); box-shadow: var(--sh-2); }
.case-view { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: var(--sh-2); }
.case-view[hidden] { display: none; }
.case-view h3 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.case-view h3 .pi { width: 28px; height: 28px; border-radius: 9px; }
.case-view > p { color: var(--ink-2); margin: 8px 0 18px; }
.case-list .r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.case-list .r:last-child { border-bottom: 0; }
.case-list .nm { font-weight: 600; }
.case-list .when { font-size: 13px; color: var(--ink-2); font-weight: 600; }

/* ---------- pricing ---------- */
.period { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--soft); margin: 0 auto 44px; }
.period-wrap { text-align: center; }
.period button { padding: 9px 20px; border-radius: 10px; font-weight: 600; color: var(--ink-2); font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.period button.on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.save { font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 2px 8px; border-radius: 999px; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; max-width: 1120px; margin: 0 auto; }
.price { position: relative; display: flex; flex-direction: column; padding: 34px 30px; border-radius: 26px; border: 1px solid var(--line); background: var(--surface); }
.price.featured { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--sh-3); }
.price-badge { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; margin-bottom: 14px; }
.price h3 { font-size: 24px; color: inherit; }
.price-desc { color: var(--ink-2); font-size: 15px; margin-top: 6px; min-height: 48px; }
.price.featured .price-desc, .price.featured .price-sub, .price.featured li { color: #b9c3d2; }
.price-amount { margin: 22px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.price-amount strong { font-size: 48px; font-weight: 800; letter-spacing: -.04em; }
.price-amount span { color: var(--ink-3); }
.price-sub { font-size: 13px; color: var(--ink-3); min-height: 20px; }
.price .btn { width: 100%; margin: 24px 0; }
.price.featured .btn { background: #fff; color: var(--ink); box-shadow: none; }
.price ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: var(--ink-2); }
.price li { display: flex; gap: 10px; }
.price li .i { color: var(--green); margin-top: 3px; stroke-width: 2.6; }
.price li.no { color: var(--ink-3); }
.price li.no .i { color: var(--line-2); }
.price.featured li .i { color: #6fe0a8; }
.price-foot { text-align: center; color: var(--ink-3); font-size: 14px; margin-top: 30px; }

/* ---------- faq ---------- */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq-list { display: flex; flex-direction: column; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; font-weight: 600; font-size: 19px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 20px; font-weight: 500; transition: transform .25s, background .25s; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--ink); color: #fff; }
.faq-list details p { padding: 0 48px 24px 0; color: var(--ink-2); font-size: 16.5px; }

/* ---------- final ---------- */
.final { padding: 40px 0 112px; }
.final-card { position: relative; overflow: hidden; border-radius: 36px; background: var(--ink); color: #fff; padding: 88px 40px; text-align: center; }
.final-card h2 { color: #fff; font-size: clamp(34px, 5vw, 64px); font-weight: 800; letter-spacing: -.045em; max-width: 840px; margin: 0 auto 18px; position: relative; z-index: 1; }
.final-card p { color: #aeb8c7; font-size: 19px; position: relative; z-index: 1; }
.final-card .hero-cta { justify-content: center; margin-top: 34px; position: relative; z-index: 1; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .9; animation: drift 12s ease-in-out infinite; }
.orb.o { width: 180px; height: 180px; background: radial-gradient(circle at 30% 30%, #ffb15c, var(--orange)); left: -40px; top: 40px; }
.orb.b { width: 120px; height: 120px; background: radial-gradient(circle at 30% 30%, #5cb6ff, var(--blue)); right: 12%; top: -40px; animation-delay: -4s; }
.orb.v { width: 220px; height: 220px; background: radial-gradient(circle at 30% 30%, #b98aff, var(--violet)); right: -60px; bottom: -80px; animation-delay: -8s; }
@keyframes drift { 50% { transform: translate(14px, -18px); } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 28px; }
.foot-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; }
.foot-brand img { margin-bottom: 14px; }
.foot-brand p { color: var(--ink-2); max-width: 300px; }
.foot-contacts { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-weight: 600; }
.foot-contacts a:hover { color: var(--blue); }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 4px; }
.foot-col a { color: var(--ink-2); font-size: 15px; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-req { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; line-height: 1.6; }
.foot-line { display: flex; justify-content: space-between; align-items: center; color: var(--ink-3); font-size: 14px; }

/* ---------- cookie bar ---------- */
.cookie-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; width: calc(100% - 32px); max-width: 760px; display: flex; align-items: center; gap: 18px; padding: 16px 18px 16px 22px; border-radius: 18px; background: var(--ink); color: #dfe5ee; box-shadow: var(--sh-3); font-size: 14.5px; animation: up .4s cubic-bezier(.2, .7, .2, 1); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1; }
.cookie-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar .btn { background: #fff; color: var(--ink); box-shadow: none; min-width: 72px; }
@keyframes up { from { opacity: 0; transform: translate(-50%, 20px); } }

/* ---------- docs & help ---------- */
.doc { padding: 40px 0 100px; }
.doc-inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.doc-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; }
/* the help sidebar as an accordion: sections fold, the articles of the open section form a tree */
.doc-side details.side-cat { border-radius: 12px; }
.doc-side details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 650; color: var(--ink); user-select: none; }
.doc-side details summary::-webkit-details-marker { display: none; }
.doc-side details summary:hover { background: var(--soft); }
.doc-side details summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .55; transition: transform .18s ease; }
.doc-side details[open] > summary::after { transform: rotate(45deg); }
.doc-side .side-items { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 10px 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.doc-side .side-items a { padding: 7px 10px; font-size: 14.5px; font-weight: 500; }
.doc-side a { padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.doc-side a:hover { background: var(--soft); color: var(--ink); }
.doc-side a.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); border: 1px solid var(--line); }
.doc-side .side-home { font-weight: 600; }
.doc-side-help { margin-top: 22px; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.doc-side-help p { color: var(--ink-2); margin: 4px 0 10px; }
.doc-side-help a { padding: 0; color: var(--blue); font-weight: 600; }
.doc-side-help a:hover { background: none; }
.doc-body { min-width: 0; max-width: 820px; }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--ink-3); margin-bottom: 22px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.doc-body h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.04em; margin: 10px 0 12px; }
.doc-meta { color: var(--ink-3); display: flex; align-items: center; gap: 8px; margin-bottom: 30px; font-size: 15px; }
.dot-upd { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.lead-doc { font-size: 18px; color: var(--ink); line-height: 1.65; margin-bottom: 18px; }
.doc-body h2 { font-size: 24px; font-weight: 700; margin: 40px 0 14px; scroll-margin-top: 100px; }
.doc-body p, .doc-body li { color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.doc-body p { margin-bottom: 12px; }
.doc-body ul, .doc-body ol { padding-left: 22px; margin: 0 0 14px; }
.doc-body li { margin-bottom: 6px; }
.doc-body li::marker { color: var(--ink-3); }
.doc-body a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0, 136, 247, .3); text-underline-offset: 3px; }
.doc-body a:hover { text-decoration-color: var(--blue); }
.doc-body a.btn { text-decoration: none; color: #fff; }
.doc-body a.btn-outline, .doc-body a.btn-ghost, .doc-body a.btn-light { color: var(--ink); }
.doc-body b { color: var(--ink); }
.doc-body kbd { min-width: 28px; height: 26px; font-size: 13px; padding: 0 7px; border-radius: 7px; box-shadow: 0 2px 0 var(--line-2); }
.doc-body code { background: var(--soft); padding: 2px 6px; border-radius: 6px; font-size: 14px; }
mark.fill { background: #fff0c9; color: #8a5a00; border-radius: 4px; padding: 0 4px; font-weight: 600; }
.terms { display: grid; grid-template-columns: 200px 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); margin: 0 0 12px; }
.terms dt, .terms dd { margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.terms dt { font-weight: 700; background: var(--soft); }
.terms dd { color: var(--ink-2); }
.terms dt:last-of-type, .terms dd:last-of-type { border-bottom: 0; }
.req { display: grid; grid-template-columns: 220px 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); margin: 6px 0 0; }
.req dt, .req dd { margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.req dt { color: var(--ink-3); font-size: 14px; font-weight: 600; background: var(--soft); }
.req dt:last-of-type, .req dd:last-of-type { border-bottom: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 14px; }
.doc-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 15px; }
.doc-table th { text-align: left; background: var(--soft); padding: 12px 16px; font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.doc-table td { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.callout { margin: 16px 0; padding: 16px 18px; border-radius: 14px; background: var(--blue-soft); color: #0b4d8a; font-size: 15.5px; border-left: 4px solid var(--blue); }
/* help screenshots: framed, captioned, open full size on click (site.js) */
.doc-shot { margin: 18px 0 26px; }
.doc-shot a.zoom { display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 10px 30px -18px rgba(17, 23, 36, .35); cursor: zoom-in; transition: box-shadow .15s, transform .15s; }
.doc-shot a.zoom:hover { box-shadow: 0 16px 40px -18px rgba(17, 23, 36, .45); transform: translateY(-1px); }
.doc-shot img { display: block; width: 100%; height: auto; }
.doc-shot.phone a.zoom { max-width: 300px; border-radius: 24px; }
.doc-shot figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.shot-zoom { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: rgba(10, 14, 22, .86); cursor: zoom-out; animation: shot-in .15s ease-out; }
.shot-zoom img { max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #fff; }
.shot-zoom p { margin: 0; color: #e8ebf0; font-size: 14px; text-align: center; }
.shot-zoom-x { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.shot-zoom-x:hover { background: rgba(255, 255, 255, .26); }
body.zoom-open { overflow: hidden; }
@keyframes shot-in { from { opacity: 0; } }
@media (max-width: 640px) { .shot-zoom { padding: 12px; } .doc-shot.phone a.zoom { max-width: 240px; } }
.muted-doc { color: var(--ink-3) !important; font-size: 14.5px !important; }
/* contacts */
.managers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-bottom: 10px; }
.manager { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--sh-1); }
.manager-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.manager-head h3 { font-size: 20px; }
.manager-head p { color: var(--ink-3) !important; font-size: 14px !important; margin: 0 !important; }
.manager-av { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 800; }
.av-0 { background: var(--orange); } .av-1 { background: var(--blue); } .av-2 { background: var(--violet); }
.manager-links { list-style: none; padding: 0 !important; margin: 0 0 16px !important; display: flex; flex-direction: column; gap: 10px; }
.manager-links li { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 15px; }
.manager-links li span { color: var(--ink-3); font-size: 13px; min-width: 70px; }
.manager-links li .i { color: var(--ink-2); }
.manager-links li.wa .i { color: #25d366; }
.manager-links li.tg .i { color: #2aa6df; }
.manager-links a { color: var(--ink) !important; font-weight: 600; text-decoration: none !important; }
.manager-links a:hover { color: var(--blue) !important; }
.manager-qr { display: flex; gap: 14px; }
.manager-qr figure { margin: 0; text-align: center; }
.manager-qr figcaption { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.qr { width: 112px; height: 112px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.qr img, .qr svg { width: 100%; height: 100%; image-rendering: pixelated; }
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.contact-card h3 { font-size: 15px; color: var(--ink-3); font-weight: 600; margin: 14px 0 4px; }
.contact-card p { font-size: 20px !important; font-weight: 700; color: var(--ink) !important; margin: 0 0 4px !important; }
.contact-card p a { color: var(--ink) !important; text-decoration: none !important; }
.contact-card small { color: var(--ink-3); font-size: 13.5px; }
.contact-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; }
/* help */
.help-hero { padding: 28px; border-radius: 26px; background: var(--ink); color: #fff; margin-bottom: 28px; position: relative; overflow: hidden; }
.help-hero::after { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 136, 247, .45), transparent 65%); }
.help-hero h1 { color: #fff; margin-top: 0 !important; }
.help-hero p { color: #aeb8c7 !important; }
.help-search { position: relative; z-index: 1; margin-top: 20px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 0 16px; color: var(--ink-3); }
.help-search input { flex: 1; border: 0; outline: none; font: 500 16px var(--font); padding: 16px 0; color: var(--ink); background: transparent; }
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.help-cat { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.help-cat h2 { margin: 0 0 4px !important; font-size: 20px !important; display: flex; align-items: center; gap: 10px; }
.help-cat h2::before { content: ''; width: 10px; height: 10px; border-radius: 50%; }
.tone-orange h2::before { background: var(--orange); } .tone-blue h2::before { background: var(--blue); } .tone-violet h2::before { background: var(--violet); }
.help-cat > p { font-size: 14.5px !important; color: var(--ink-3) !important; margin-bottom: 14px !important; }
.help-links { display: flex; flex-direction: column; }
.help-link { display: block; padding: 11px 12px; margin: 0 -12px; border-radius: 12px; text-decoration: none !important; }
.help-link:hover { background: var(--soft); }
.help-link b { display: block; color: var(--ink); font-size: 15.5px; }
.help-link span { color: var(--ink-3); font-size: 14px; }
.help-empty { text-align: center; margin-top: 20px; }
.help-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 44px 0 20px; padding: 22px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; }
.help-cta p { margin: 2px 0 0 !important; font-size: 15px !important; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-decoration: none !important; }
.pager a:hover { border-color: var(--ink); }
.pager a span { font-size: 13px; color: var(--ink-3); }
.pager a b { color: var(--ink); }
.pager .next { text-align: right; }

/* ---------- motion & responsive ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .task-row { opacity: 1; transform: none; }
  .orb, .demo-hint .hand, .search-fake .caret { animation: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1100px) {
  .hero-top { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .convert { grid-template-columns: 1fr; }
  .convert-arrow { margin: 0 auto; transform: rotate(90deg); }
  .t-4, .t-2, .t-3 { grid-column: span 3; }
  .cases { grid-template-columns: 1fr; }
  .case-tabs { flex-direction: row; overflow-x: auto; }
  .case-tab { min-width: 220px; }
  .faq-wrap { grid-template-columns: 1fr; gap: 24px; }
  .doc-inner { grid-template-columns: 1fr; gap: 24px; }
  .doc-side { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .doc-side-help { display: none; }
  .doc-side details.side-cat { flex: 0 0 100%; }
  .doc-side .side-items { flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; margin-left: 0; }
  .doc-side a { border: 1px solid var(--line); background: var(--surface); }
  .foot-inner { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav-links, .nav-actions { display: none; }
  .nav-burger { display: flex; }
  .nav-open .nav-links { display: flex; flex-direction: column; position: absolute; top: 74px; left: 0; right: 0; background: var(--bg); padding: 12px 16px 20px; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(17, 23, 36, .08); }
  .nav-open .nav-links > a { padding: 13px 12px; font-size: 17px; }
  .nav-actions-mobile { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .nav-actions-mobile .btn { height: 50px; }
  .section { padding: 80px 0; }
  .demo-board { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .d-col { scroll-snap-align: start; }
  .demo-progress .track { width: 80px; }
  .demo-team { display: none; }
  .bento { grid-template-columns: 1fr; }
  .t-4, .t-2, .t-3 { grid-column: auto; }
  .steps { grid-template-columns: 1fr; }
  .how { margin: 0 8px; border-radius: 26px; padding: 80px 0; }
  .terms, .req { grid-template-columns: 1fr; }
  .terms dt, .req dt { border-bottom: 0; padding-bottom: 2px; }
  .contact-cards, .help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .hero { padding-top: 36px; }
  .btn-lg { width: 100%; }
  .demo-hint { font-size: 12px; top: -40px; }
  .demo-title span { display: none; }
  .final-card { padding: 64px 22px; border-radius: 26px; }
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: left; bottom: 12px; }
  .pager { grid-template-columns: 1fr; }
  .task-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .task-row .when { display: none; }
  .case-list .r { grid-template-columns: auto minmax(0, 1fr) auto; }
  .case-list .r .chip { display: none; }
}

/* ---------- public client request form (/r/{token}) ---------- */
.rq-page { background: radial-gradient(600px 400px at 0% 0%, rgba(252, 123, 46, .1), transparent 70%), radial-gradient(600px 400px at 100% 0%, rgba(123, 51, 241, .1), transparent 70%), var(--bg); min-height: 100vh; }
.rq-top { max-width: 760px; margin: 0 auto; padding: 24px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rq-brand { display: flex; align-items: center; gap: 12px; }
.rq-brand b { display: block; font-size: 17px; }
.rq-brand span { color: var(--ink-3); font-size: 14px; }
.rq-dot { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; }
.rq-logo { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08); flex-shrink: 0; }
.rq-powered { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.rq-powered img { height: 18px; width: auto; }
.rq { max-width: 760px; margin: 0 auto; padding: 20px 20px 80px; display: flex; flex-direction: column; gap: 18px; }
.rq-card { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 34px; box-shadow: var(--sh-2); }
.rq-card[hidden] { display: none; }
.rq-card h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -.035em; }
.rq-card h2 { font-size: 21px; margin-bottom: 14px; }
.rq-lead { color: var(--ink-2); font-size: 17px; margin: 10px 0 28px; }
.rq-center { text-align: center; }
.rq-center img { margin: 0 auto 16px; }
.rq-center p { color: var(--ink-2); margin: 10px 0 24px; }
.rq-step { display: flex; gap: 16px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px dashed var(--line); }
.rq-step:last-of-type { border-bottom: 0; margin-bottom: 10px; padding-bottom: 0; }
.rq-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; background: var(--orange); }
.rq-step:nth-of-type(2) .rq-num { background: var(--blue); }
.rq-step:nth-of-type(3) .rq-num { background: var(--violet); }
.rq-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rq-label { font-weight: 700; font-size: 15px; margin: 4px 0 8px; display: block; }
.rq-label span { font-weight: 500; color: var(--ink-3); font-size: 13px; margin-left: 6px; }
.rq input:not([type=file]):not(.rq-hp), .rq textarea { width: 100%; font: 500 16px var(--font); color: var(--ink); padding: 13px 15px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; margin-bottom: 14px; }
.rq input:focus, .rq textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.rq textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rq-drop { border: 2px dashed var(--line-2); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: all .15s; }
.rq-drop.over { border-color: var(--blue); background: var(--blue-soft); }
.rq-drop.has-files { border-style: solid; border-color: var(--line); }
.rq-drop-text b { display: block; font-size: 15px; }
.rq-drop-text span { color: var(--ink-3); font-size: 14px; }
.rq-drop-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-drop-actions [hidden] { display: none; }
.rq-files { display: flex; flex-direction: column; gap: 8px; }
.rq-files:empty { display: none; }
.rq-file { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.rq-thumb { width: 72px; height: 54px; border-radius: 9px; overflow: hidden; flex-shrink: 0; position: relative; }
.rq-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rq-thumb:hover::after { content: '✏️'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); }
.rq-doc { width: 72px; height: 54px; border-radius: 9px; background: var(--soft); display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--ink-2); flex-shrink: 0; }
.rq-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rq-file-info b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-file-info span { font-size: 13px; color: var(--ink-3); }
.rq-x { width: 30px; height: 30px; border-radius: 50%; color: var(--ink-3); }
.rq-x:hover { background: var(--soft); color: var(--ink); }
.rq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rq-error { background: var(--red-soft); color: #b42318; border-radius: 12px; padding: 12px 14px; font-weight: 600; margin: 4px 0 14px; }
.rq-error[hidden] { display: none; }
.rq-submit { display: flex; flex-direction: column; gap: 10px; }
.rq-submit .btn { width: 100%; }
.rq-submit p { font-size: 13px; color: var(--ink-3); text-align: center; }
.rq-submit a { color: var(--ink-2); text-decoration: underline; }
.rq-ok { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #fff; background: var(--green); box-shadow: 0 12px 30px rgba(22, 163, 106, .35); }
.rq-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.rq-item:last-child { border-bottom: 0; }
.rq-item b { display: block; font-size: 15px; }
.rq-item span { color: var(--ink-3); font-size: 13px; }
.rq-status { flex-shrink: 0; min-width: 110px; text-align: center; padding: 5px 10px; border-radius: 999px; font-size: 12.5px !important; font-weight: 700; background: var(--blue-soft); color: #0067c2 !important; }
.rq-status.done { background: var(--green-soft); color: #0d7a4d !important; }
@media (max-width: 640px) {
  .rq-card { padding: 22px 18px; border-radius: 20px; }
  .rq-grid { grid-template-columns: 1fr; }
  .rq-step { gap: 12px; }
  .rq-powered span, .rq-powered { font-size: 0; }
  .rq-item { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* "moving from Asana / Trello" pages */
.cmp-lead { font-size: 18px; line-height: 1.6; color: var(--text-2, #555); }
.cmp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.cmp-table-wrap { overflow-x: auto; margin: 10px 0 6px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: 12px 14px; border-bottom: 1px solid rgba(0, 0, 0, .08); text-align: left; vertical-align: top; line-height: 1.5; }
.cmp-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #888; }
.cmp-table tbody th { width: 24%; font-weight: 600; }
.cmp-table .cmp-ours { background: rgba(0, 136, 247, .06); }
.cmp-table thead .cmp-ours { color: #0088f7; }
.cmp-steps { padding-left: 22px; line-height: 1.7; }
.cmp-steps li { margin-bottom: 6px; }
/* client request form: invitation at the bottom */
.rq-foot { text-align: center; padding: 8px 16px 32px; font-size: 13px; }
.rq-foot a { color: var(--ink-3); text-decoration: none; border-bottom: 1px dashed currentColor; }
.rq-foot a:hover { color: var(--blue); }

/* Phones: fields at 16px so iOS doesn't zoom in when one is tapped, and nothing pushes the page sideways. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, [contenteditable="true"] { font-size: 16px !important; }
  html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
}

/* The header: «Войти» — an outlined button, «Регистрация» — the dark main one, like the buttons of the page */
.nav-actions { align-items: center; gap: 10px; }
.btn-nav { height: 42px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.btn-outline.btn-nav { border-color: var(--line-2); background: rgba(255, 255, 255, .7); }
.btn-outline.btn-nav:hover { border-color: var(--ink); background: #fff; }

/* ---------- blog ---------- */
.blog { padding: 32px 0 100px; }
.b-wrap { max-width: 1180px; }
.b-hero { max-width: 760px; margin: 6px 0 34px; }
.b-hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; letter-spacing: -.04em; margin: 0 0 14px; }
.b-hero p { color: var(--ink-2); font-size: 18px; line-height: 1.6; margin: 0 0 18px; }
.b-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.b-hero-tags span, .b-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.b-tag { background: var(--blue-soft); border-color: transparent; color: #0067c2; }

/* the cover: a screenshot in a window frame on the article's gradient */
.b-cover { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px 0; background: linear-gradient(135deg, var(--c1), var(--c2)); aspect-ratio: 16 / 10; display: flex; align-items: flex-end; }
.b-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .7), transparent 45%); pointer-events: none; }
.b-cover-win { position: relative; width: 100%; border-radius: 12px 12px 0 0; overflow: hidden; background: #fff; box-shadow: 0 18px 50px -18px rgba(17, 23, 36, .45); transform: translateY(1px); }
.b-cover-bar { display: flex; gap: 6px; padding: 9px 12px; background: #f6f5f2; border-bottom: 1px solid var(--line); }
.b-cover-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.b-cover-bar i:nth-child(2) { background: #febc2e; }
.b-cover-bar i:nth-child(3) { background: #28c840; }
.b-cover img { display: block; width: 100%; height: auto; }
.b-cover.big { border-radius: 24px; padding: 40px 48px 0; aspect-ratio: auto; margin: 0 0 36px; }
.b-cover.big .b-cover-win { border-radius: 14px 14px 0 0; }

/* the featured article and the cards */
.b-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 18px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); margin-bottom: 30px; transition: box-shadow .2s, transform .2s; }
.b-feature:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.b-feature .b-cover { margin: 0; }
.b-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 18px; }
.b-feature-body h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.b-feature-body p { color: var(--ink-2); font-size: 16.5px; margin: 0; }
.b-meta { font-size: 13.5px; color: var(--ink-3); }
.b-more { font-weight: 700; color: var(--blue); margin-top: 4px; }
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.b-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: box-shadow .2s, transform .2s; }
.b-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.b-card .b-cover { border-radius: 0; padding: 18px 18px 0; }
.b-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 22px; flex: 1; }
.b-card-body h3 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: -.01em; }
.b-card-body p { font-size: 14.5px; color: var(--ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b-card-body .b-meta { margin-top: auto; padding-top: 4px; }

/* «Попробуйте» */
.b-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding: 32px 36px; border-radius: 26px; background: var(--ink); color: #fff; }
.b-cta h2 { color: #fff; font-size: 26px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.02em; }
.b-cta p { color: #c5ccd8; margin: 0; font-size: 16px; }
.b-cta .btn-primary { background: #fff; color: var(--ink); box-shadow: none; flex-shrink: 0; }
.b-cta .btn-primary:hover { background: #f1f1f1; }

/* the article */
.b-article { max-width: 1120px; }
.b-head { max-width: 820px; margin: 0 0 28px; }
.b-head h1 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; margin: 14px 0 16px; }
.b-lead { font-size: 19px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
.b-byline { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.b-byline img { border-radius: 50%; background: var(--surface); border: 1px solid var(--line); }
.b-byline > span { display: flex; flex-direction: column; line-height: 1.35; }
.b-byline > span > span { color: var(--ink-3); }
.b-layout { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: 56px; align-items: start; }
.b-side { position: sticky; top: 96px; }
.b-toc { padding: 18px 18px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.b-toc b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 8px; }
.b-toc ol { margin: 0; padding-left: 18px; }
.b-toc li { margin: 0 0 6px; font-size: 14.5px; line-height: 1.4; color: var(--ink-3); }
.b-toc a { color: var(--ink-2); }
.b-toc a:hover { color: var(--blue); }
.b-text { min-width: 0; }
.b-text h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 44px 0 14px; scroll-margin-top: 96px; }
.b-text h2:first-child { margin-top: 0; }
.b-text h3 { font-size: 20px; font-weight: 700; margin: 28px 0 8px; }
.b-text p, .b-text li { color: var(--ink-2); font-size: 17.5px; line-height: 1.75; }
.b-text p { margin: 0 0 14px; }
.b-text ul, .b-text ol { padding-left: 24px; margin: 0 0 18px; }
.b-text li { margin-bottom: 8px; }
.b-text li::marker { color: var(--ink-3); }
.b-text b { color: var(--ink); }
.b-text a:not(.btn):not(.zoom) { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0, 136, 247, .3); text-underline-offset: 3px; }
.b-text a:not(.btn):not(.zoom):hover { text-decoration-color: var(--blue); }
.b-text blockquote { margin: 16px 0 22px; padding: 18px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--violet); font-size: 17px; line-height: 1.7; color: var(--ink); }
.b-note { margin: 22px 0; padding: 18px 20px; border-radius: 16px; background: var(--blue-soft); color: #0b4d8a; font-size: 16.5px; line-height: 1.65; }
.b-note b { color: #08355f; }
.b-text ul.b-check { list-style: none; padding: 20px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.b-check li { position: relative; padding-left: 34px; }
.b-check li::before { content: ""; position: absolute; left: 0; top: 5px; width: 22px; height: 22px; border-radius: 50%; background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12l5 5 9-10%22/%3E%3C/svg%3E"); background-position: center; background-size: 13px; background-repeat: no-repeat; }
.b-table-wrap { overflow-x: auto; margin: 6px 0 20px; border-radius: 18px; border: 1px solid var(--line); }
.b-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 15px; min-width: 560px; }
.b-table th, .b-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.b-table thead th { border-top: 0; background: var(--soft); font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.b-table tbody th { font-weight: 600; color: var(--ink); width: 26%; }
.b-table td { color: var(--ink-2); }
.b-table .b-ours { background: #f2f8ff; color: var(--ink); font-weight: 500; }
.b-table thead .b-ours { color: #0067c2; background: var(--blue-soft); }
.b-text .doc-shot { margin: 22px 0 30px; }
.b-text .faq-list summary { font-size: 18px; padding: 20px 48px 20px 0; }
.b-text .faq-list details p { font-size: 16.5px; }
.b-cta.inline { margin-top: 48px; }
.b-related { margin-top: 70px; }
.b-related h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 22px; }

@media (max-width: 1020px) {
  .b-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .b-side { position: static; margin-bottom: 26px; }
  .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .b-feature-body { padding: 0 8px 10px; }
}
@media (max-width: 640px) {
  .blog { padding-top: 20px; }
  .b-grid { grid-template-columns: minmax(0, 1fr); }
  .b-cover.big { padding: 18px 18px 0; border-radius: 18px; margin-bottom: 26px; }
  .b-feature { padding: 12px; border-radius: 22px; }
  .b-text p, .b-text li { font-size: 16.5px; }
  .b-text h2 { font-size: 24px; margin-top: 36px; }
  .b-lead { font-size: 17px; }
  .b-cta { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .b-cta .btn { width: 100%; }
}

/* the header never wraps a menu item onto two lines: narrower spacing first, then the menu folds into the burger */
.nav-links > a { white-space: nowrap; }
.nav-actions .btn { white-space: nowrap; }
@media (max-width: 1280px) {
  .nav-inner { gap: 16px; }
  .nav-links > a { padding: 8px 9px; font-size: 14.5px; }
  .btn-nav { padding: 0 15px; }
}
@media (max-width: 1060px) {
  .nav-links, .nav-actions { display: none; }
  .nav-burger { display: flex; margin-left: auto; }
  .nav-open .nav-links { display: flex; flex-direction: column; position: absolute; top: 74px; left: 0; right: 0; background: var(--bg); padding: 12px 16px 20px; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(17, 23, 36, .08); }
  .nav-open .nav-links > a { padding: 13px 12px; font-size: 17px; }
  .nav-actions-mobile { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .nav-actions-mobile .btn { height: 50px; }
}

/* the footer: product, help, moving from other services, documents */
@media (min-width: 1101px) { .foot-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 30px; } }
/* blog topics: a filter */
.b-hero-tags button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 13.5px var(--font); color: var(--ink-2); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.b-hero-tags button b { font-weight: 600; color: var(--ink-3); font-size: 12px; }
.b-hero-tags button:hover { border-color: var(--line-2); color: var(--ink); }
.b-hero-tags button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.b-hero-tags button.on b { color: #c5ccd8; }
.b-card[hidden], .b-feature[hidden] { display: none; }

/* footer: the site's language */
.foot-langs { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.foot-langs .i { width: 16px; height: 16px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.foot-langs a, .foot-langs .lang-cur { padding: 4px 9px; border-radius: 8px; color: var(--ink-3); text-decoration: none; transition: background .15s, color .15s; }
.foot-langs a:hover { background: rgba(127, 127, 127, .12); color: var(--ink); }
.foot-langs .lang-cur { background: rgba(127, 127, 127, .12); color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .foot-line { flex-wrap: wrap; gap: 10px; }
}

/* footer: the mobile app in Google Play */
.foot-apps { margin-top: 18px; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 12px; background: #0b0d12; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .14); transition: transform .15s, box-shadow .15s; }
.store-badge:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(11, 13, 18, .22); color: #fff; }
.store-badge .store-play { width: 24px; height: 26px; flex-shrink: 0; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-badge small { font-size: 10.5px; letter-spacing: .02em; opacity: .85; }
.store-badge b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* longer menu words in English and Armenian: the logo keeps its size, and the menu folds into the burger sooner */
.nav-logo { flex-shrink: 0; }
@media (max-width: 1440px) {
  html[lang="hy"] .nav-links, html[lang="hy"] .nav-actions { display: none; }
  html[lang="hy"] .nav-burger { display: flex; margin-left: auto; }
  html[lang="hy"] .nav-open .nav-links { display: flex; flex-direction: column; position: absolute; top: 74px; left: 0; right: 0; background: var(--bg); padding: 12px 16px 20px; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(17, 23, 36, .08); }
  html[lang="hy"] .nav-open .nav-links > a { padding: 13px 12px; font-size: 17px; }
  html[lang="hy"] .nav-actions-mobile { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
}

/* topics are links now (each topic has its own crawlable page) — the same chips */
.b-hero-tags a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 13.5px var(--font); color: var(--ink-2); text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.b-hero-tags a b { font-weight: 600; color: var(--ink-3); font-size: 12px; }
.b-hero-tags a:hover { border-color: var(--line-2); color: var(--ink); }
.b-hero-tags a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.b-hero-tags a.on b { color: #c5ccd8; }
.b-page-note { margin: 14px 0 0; color: var(--ink-3); font-size: 14px; }

/* ---------- covers: gradient, soft shapes, the topic's icon, the short title, the service leaning in ---------- */
.b-cover.v2 { display: block; padding: 0; isolation: isolate; container-type: inline-size; aspect-ratio: 16 / 10;
  background: radial-gradient(120% 90% at 0% 0%, #fff 0%, transparent 55%), linear-gradient(135deg, var(--c1), var(--c2)); }
.b-cover.v2::before { display: none; }
.b-cv-blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: -1; }
.b-cv-blob.one { width: 55%; aspect-ratio: 1; right: -12%; top: -22%; background: color-mix(in srgb, var(--a) 22%, transparent); }
.b-cv-blob.two { width: 30%; aspect-ratio: 1; left: -8%; bottom: -14%; background: color-mix(in srgb, var(--a) 14%, transparent); }
.b-cv-dots { position: absolute; left: 7%; bottom: 10%; width: 18%; aspect-ratio: 1.6; z-index: -1; opacity: .55;
  background-image: radial-gradient(color-mix(in srgb, var(--a) 55%, transparent) 1.4px, transparent 1.6px); background-size: 12px 12px; }
.b-cv-text { position: absolute; left: 7%; top: 9%; width: 52%; display: flex; flex-direction: column; gap: 3cqw; }
.b-cv-kicker { display: inline-flex; align-items: center; gap: 2cqw; font-weight: 700; font-size: max(10px, 3.2cqw); letter-spacing: .02em; color: color-mix(in srgb, var(--a) 80%, #111724); }
.b-cv-ic { width: max(22px, 7.5cqw); height: max(22px, 7.5cqw); border-radius: 28%; display: grid; place-items: center; background: var(--a); color: #fff; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--a) 70%, transparent); flex-shrink: 0; }
.b-cv-ic svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b-cv-title { font-weight: 800; font-size: max(14px, 5.6cqw); line-height: 1.12; letter-spacing: -.02em; color: #111724; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.b-cover.v2 .b-cover-win { position: absolute; right: -6%; bottom: -10%; width: 56%; border-radius: 10px; transform: rotate(-4deg); box-shadow: 0 24px 50px -18px rgba(17, 23, 36, .45), 0 0 0 1px rgba(17, 23, 36, .06); }
.b-cover.v2 .b-cover-bar { padding: 1.4cqw 1.8cqw; gap: 1cqw; }
.b-cover.v2 .b-cover-bar i { width: max(6px, 1.5cqw); height: max(6px, 1.5cqw); }
.b-card .b-cover.v2 { padding: 0; border-radius: 0; }
.b-card:hover .b-cover.v2 .b-cover-win { transform: rotate(-2.5deg) translateY(-2%); }
.b-cover.v2 .b-cover-win { transition: transform .35s ease; }
/* the big ones (the first article in the list, the article's own page): wider, the title larger */
.b-cover.v2.big { aspect-ratio: 21 / 9; padding: 0; }
.b-cover.v2.big .b-cv-text { width: 46%; top: 14%; gap: 2cqw; }
.b-cover.v2.big .b-cv-title { font-size: max(18px, 4cqw); }
.b-cover.v2.big .b-cv-kicker { font-size: max(11px, 1.7cqw); gap: 1.2cqw; }
.b-cover.v2.big .b-cv-ic { width: max(26px, 4.4cqw); height: max(26px, 4.4cqw); }
.b-cover.v2.big .b-cover-win { width: 50%; right: -3%; bottom: -16%; }
.b-feature .b-cover.v2.big { aspect-ratio: 16 / 10; }
.b-feature .b-cover.v2.big .b-cv-text { width: 54%; top: 10%; }
.b-feature .b-cover.v2.big .b-cv-title { font-size: max(18px, 5.4cqw); }
.b-feature .b-cover.v2.big .b-cv-kicker { font-size: max(11px, 2.8cqw); }
.b-feature .b-cover.v2.big .b-cv-ic { width: max(26px, 6.5cqw); height: max(26px, 6.5cqw); }
.b-feature .b-cover.v2.big .b-cover-win { width: 56%; right: -5%; bottom: -10%; }
@media (max-width: 700px) {
  .b-cover.v2.big { aspect-ratio: 16 / 10; }
  .b-cover.v2.big .b-cv-text { width: 56%; top: 10%; }
  .b-cover.v2.big .b-cv-title { font-size: max(16px, 5.6cqw); }
}

/* ---------- pages of the list ---------- */
.b-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 40px 0 8px; flex-wrap: wrap; }
.b-pg-nums { display: flex; align-items: center; gap: 6px; }
.b-pg-num { min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-weight: 600; font-size: 15px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s, color .15s; }
.b-pg-num:hover { border-color: var(--line-2); color: var(--ink); }
.b-pg-num.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.b-pg-gap { color: var(--ink-3); padding: 0 2px; }
.b-pg-arrow { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); text-decoration: none; border: 1px solid transparent; }
.b-pg-arrow:hover { border-color: var(--line); color: var(--ink); background: var(--surface); }
.b-pg-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.b-pg-arrow.next svg { transform: rotate(180deg); }
.b-pg-arrow.off { opacity: .35; pointer-events: none; }
.b-cover.v2:not(.big) .b-cv-text { width: 47%; }
.b-cover.v2:not(.big) .b-cover-win { width: 50%; right: -7%; }
.b-cover.v2:not(.big) .b-cv-title { -webkit-line-clamp: 3; }

/* ---------- reviews ---------- */
.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars svg { width: 16px; height: 16px; fill: #e3e1dc; }
.rv-stars svg.on { fill: #f5b301; }
.rv-card { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(17, 23, 36, .04); break-inside: avoid; }
.rv-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); flex: 1; }
.rv-card figcaption { display: flex; align-items: center; gap: 12px; }
.rv-face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rv-initials { display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #fff; background: var(--c, #2f6bff); }
.rv-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rv-who b { font-size: 15px; color: var(--ink); }
.rv-who span { font-size: 13.5px; color: var(--ink-2); }
.rv-who small { font-size: 12px; color: var(--ink-3); }
/* the list page */
.rv-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.rv-hero > div:first-child { max-width: 640px; }
.rv-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.rv-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rv-summary b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.rv-summary .rv-stars svg { width: 20px; height: 20px; }
.rv-summary span { font-size: 13.5px; color: var(--ink-3); width: 100%; text-align: right; }
.rv-grid { columns: 3 320px; column-gap: 20px; margin-top: 8px; }
.rv-grid .rv-card { margin-bottom: 20px; }
.rv-empty { padding: 48px 24px; border-radius: 18px; border: 1px dashed var(--line-2); text-align: center; color: var(--ink-2); font-size: 16px; }
.rv-empty p { max-width: 520px; margin: 0 auto; }
/* the home carousel */
.rv-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.rv-arrows { display: flex; gap: 8px; }
.rv-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s; }
.rv-arrow:hover { border-color: var(--ink); transform: translateY(-1px); }
.rv-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rv-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 40px) / 3)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track .rv-card { scroll-snap-align: start; }
.rv-home-foot { display: flex; justify-content: center; gap: 22px; margin-top: 18px; font-weight: 600; font-size: 15px; }
.rv-home-foot a { color: var(--blue); }
@media (max-width: 700px) {
  .rv-track { grid-auto-columns: 86%; }
  .rv-hero-side { align-items: flex-start; }
  .rv-summary { justify-content: flex-start; }
  .rv-summary span { text-align: left; }
}
/* the form */
.rv-form-wrap { max-width: 680px; margin: 0 auto 60px; }
.rv-form-head h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.02em; margin: 8px 0 12px; }
.rv-form-head p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; margin: 0 0 28px; }
.rv-form { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 50px -30px rgba(17, 23, 36, .25); }
.rv-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rv-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.rv-label i { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.rv-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .rv-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font: 15px/1.5 var(--font); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.rv-form input:focus, .rv-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
.rv-form textarea { resize: vertical; min-height: 140px; }
.rv-hint { color: var(--ink-3); font-size: 12.5px; }
.rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .rv-row { grid-template-columns: 1fr; } .rv-form { padding: 20px; } }
/* stars: picked from right to left so that hovering lights up everything before */
.rv-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rv-rate input { position: absolute; opacity: 0; pointer-events: none; }
.rv-rate label { cursor: pointer; }
.rv-rate svg { width: 34px; height: 34px; fill: #e3e1dc; transition: fill .12s, transform .12s; }
.rv-rate label:hover svg, .rv-rate label:hover ~ label svg, .rv-rate input:checked ~ label svg { fill: #f5b301; }
.rv-rate label:hover svg { transform: scale(1.08); }
.rv-rate input:focus-visible + label svg { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.rv-photo { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 10px; border-radius: 14px; border: 1px dashed var(--line-2); transition: border-color .15s; }
.rv-photo:hover { border-color: var(--blue); }
.rv-photo-face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-2, #f4f3f0); color: var(--ink-3); flex-shrink: 0; }
.rv-photo-face svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rv-photo-face img { width: 100%; height: 100%; object-fit: cover; }
.rv-photo-text { display: flex; flex-direction: column; gap: 2px; }
.rv-photo-text b { color: var(--blue); font-size: 14.5px; }
.rv-photo-text small { color: var(--ink-3); font-size: 12.5px; }
.rv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rv-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.rv-consent input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; }
.rv-consent a { color: var(--blue); }
.rv-error { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #b42318; font-size: 14px; }
.rv-form .btn { align-self: flex-start; }
.rv-thanks { text-align: center; padding: 48px 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.rv-thanks-ic { width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center; background: #e7f6ec; color: #16a34a; }
.rv-thanks-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rv-thanks h2 { margin: 16px 0 8px; }
.rv-thanks p { color: var(--ink-2); margin: 0 0 22px; }
.rv-hero-side { min-width: 280px; }
.rv-summary { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: end; column-gap: 12px; row-gap: 2px; }
.rv-summary b { line-height: 1; }
.rv-summary span { grid-column: 1 / -1; }
@media (max-width: 700px) { .rv-summary { justify-content: start; } }

/* ---------- «Покажите, а не пишите»: screenshot, screen video, voice ---------- */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.media-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; }
.media-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(17, 23, 36, .35); }
.media-card h3 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.01em; }
.media-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.mc-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-top: 10px; background: color-mix(in srgb, var(--blue) 10%, var(--surface)); color: var(--blue); }
.mc-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mc-viz { position: relative; height: 200px; border-radius: 16px; overflow: hidden; }
/* «Вместо …»: what the feature saves you from */
.mc-instead { margin-top: auto; display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.mc-instead-k { flex-shrink: 0; padding: 2px 7px; border-radius: 6px; background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.mc-instead s { text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent); text-decoration-thickness: 1.5px; }
/* a little browser window shared by the scenes */
.mc-win { position: absolute; inset: 16px 18px 0; border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 10px 30px -14px rgba(17, 23, 36, .3); overflow: hidden; }
.mc-bar { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border-bottom: 1px solid #eef0f4; }
.mc-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #e3e6ec; }
.mc-url { flex: 1; height: 12px; margin: 0 6px; border-radius: 6px; background: #f1f3f6; }
.mc-cta { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); font-size: 10.5px; font-weight: 700; }
.mc-cta svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.mc-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.mc-body > i { display: block; height: 8px; border-radius: 4px; background: #e8eaef; }
.mc-body .w40 { width: 42%; } .mc-body .w50 { width: 50%; } .mc-body .w60 { width: 60%; } .mc-body .w70 { width: 70%; } .mc-body .w80 { width: 80%; }
.mc-btn { width: 74px; height: 22px; border-radius: 7px; background: var(--blue); margin-top: 6px; }
.mc-cursor { position: absolute; z-index: 6; width: 20px; height: 20px; fill: #111724; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); opacity: 0; pointer-events: none; }

/* 1 — the screenshot: a click, a flash, the marks draw themselves, «added to the task» */
.mc-shot { background: linear-gradient(135deg, #eef3ff, #f5efff); }
.mc-marks { position: absolute; left: 0; top: 26px; width: 100%; height: 150px; fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mc-marks * { vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.mc-note { position: absolute; right: 12px; top: 40px; padding: 5px 9px; border-radius: 8px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 6px 16px -6px rgba(229, 72, 77, .6); transform-origin: 80% 100%; }
.mc-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
.mc-toast { position: absolute; z-index: 4; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 10px; background: #111724; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); transform: translate(-50%, 0); opacity: 0; }
.mc-toast b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--green); font-size: 11px; }

/* 2 — the screen video: the pointer shows the bug, the timer runs, «Готово» — the video is in the task */
.mc-video { background: radial-gradient(120% 90% at 50% 0%, #1b2440, #0b1020); }
.mc-video .mc-win { inset: 14px 18px 0; }
.mc-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; margin: 0 -7px; border-radius: 7px; font-size: 11.5px; color: var(--ink); box-shadow: inset 0 0 0 2px var(--red); background: var(--red-soft); }
.mc-row i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--red); flex-shrink: 0; }
.mc-ripple { position: absolute; left: 34%; top: 66px; width: 34px; height: 34px; margin: -17px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; }
.mc-video .mc-cursor { fill: #fff; stroke: #111724; }
.mc-recbar { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 11px; background: #1d2330; color: #fff; font-size: 13px; white-space: nowrap; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.mc-recbar b { font-variant-numeric: tabular-nums; min-width: 30px; }
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: mc-blink 1.2s ease-in-out infinite; }
.mc-lvl { display: flex; align-items: center; gap: 2px; height: 14px; }
.mc-lvl i { width: 3px; height: 40%; border-radius: 2px; background: #4ade80; }
.mc-lvl i:nth-child(2) { height: 80%; } .mc-lvl i:nth-child(3) { height: 55%; } .mc-lvl i:nth-child(4) { height: 100%; } .mc-lvl i:nth-child(5) { height: 35%; }
.mc-done { padding: 5px 11px; border-radius: 7px; background: var(--red); font-weight: 700; }
.mc-result { position: absolute; z-index: 4; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55); white-space: nowrap; transform: translate(-50%, 0); opacity: 0; }
.mc-thumb { width: 52px; height: 34px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, #2a3350, #111724); color: #fff; }
.mc-thumb svg { width: 14px; height: 14px; fill: currentColor; }
.mc-result-t { display: flex; flex-direction: column; line-height: 1.25; }
.mc-result-t b { font-size: 12.5px; color: var(--ink); }
.mc-result-t small { font-size: 11.5px; color: var(--ink-3); }
@keyframes mc-blink { 50% { opacity: .25; } }

/* 3 — the voice note: recording with live levels, then the player plays it faster */
.mc-voice { background: linear-gradient(135deg, #ecfdf3, #eef6ff); }
.mc-rec, .mc-player { position: absolute; left: 22px; right: 22px; top: 50%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px -16px rgba(17, 23, 36, .35); }
.mc-rec { transform: translateY(-50%); opacity: 0; }
.mc-player { transform: translateY(calc(-50% - 18px)); }
.mc-mic { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; }
.mc-mic svg { position: relative; z-index: 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mc-mic::before, .mc-mic::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--red); opacity: .35; animation: mc-ring 1.6s ease-out infinite; }
.mc-mic::after { animation-delay: .8s; }
@keyframes mc-ring { to { transform: scale(1.9); opacity: 0; } }
.mc-live { flex: 1; height: 30px; display: flex; align-items: center; gap: 3px; }
.mc-live i { flex: 1; height: 45%; border-radius: 2px; background: var(--red); opacity: .8; }
.mc-rec b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.mc-play.small { position: relative; margin: 0; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; }
.mc-play.small svg { position: absolute; width: 18px; height: 18px; fill: currentColor; }
.mc-play.small .pl { margin-left: 3px; }
.mc-play.small .pa { opacity: 0; }
.mc-wave { position: relative; flex: 1; height: 30px; }
.mc-wave-base, .mc-wave-fill { position: absolute; inset: 0; display: flex; align-items: center; gap: 3px; }
.mc-wave i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--ink-3) 35%, transparent); }
.mc-wave-fill i { background: var(--blue); }
.mc-wave-fill { clip-path: inset(0 55% 0 0); }
.mc-len { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mc-speeds { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: inline-flex; padding: 3px; gap: 3px; border-radius: 9px; background: #fff; box-shadow: 0 6px 18px -12px rgba(17, 23, 36, .35); }
.mc-speeds span { padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mc-speeds .s15 { background: var(--blue); color: #fff; }

/* The scenes play only while the card is on screen (landing.js adds .playing); otherwise — the finished frame. */
.mc-anim.playing .mc-viz * { animation-duration: var(--loop, 8s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.mc-anim.playing .mc-dot { animation: mc-blink 1.2s ease-in-out infinite; }
.mc-anim.playing .mc-mic::before, .mc-anim.playing .mc-mic::after { animation-duration: 1.6s; animation-timing-function: ease-out; }
.mc-anim.playing .mc-shot .mc-cursor { animation-name: shot-cursor; }
.mc-anim.playing .mc-cta { animation-name: shot-cta; }
.mc-anim.playing .mc-flash { animation-name: shot-flash; }
.mc-anim.playing .mc-shot .mc-win { animation-name: shot-win; }
.mc-anim.playing .mc-m-box { animation-name: shot-box; }
.mc-anim.playing .mc-m-arrow { animation-name: shot-arrow; }
.mc-anim.playing .mc-m-head { animation-name: shot-head; }
.mc-anim.playing .mc-note { animation-name: shot-note; }
.mc-anim.playing .mc-toast { animation-name: shot-toast; }
@keyframes shot-cursor { 0% { left: 70%; top: 92%; opacity: 0; } 5% { opacity: 1; } 18% { left: calc(100% - 56px); top: 24px; transform: scale(1); } 20% { transform: scale(.8); } 22% { transform: scale(1); opacity: 1; } 30%, 100% { left: calc(100% - 56px); top: 24px; opacity: 0; } }
@keyframes shot-cta { 0%, 19% { transform: none; } 20% { transform: scale(.9); background: #cfe6ff; } 24%, 100% { transform: none; } }
@keyframes shot-flash { 0%, 21% { opacity: 0; } 23% { opacity: .95; } 32%, 100% { opacity: 0; } }
@keyframes shot-win { 0%, 22% { box-shadow: 0 10px 30px -14px rgba(17, 23, 36, .3); } 28%, 92% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent), 0 14px 34px -14px rgba(17, 23, 36, .4); } 100% { box-shadow: 0 10px 30px -14px rgba(17, 23, 36, .3); } }
@keyframes shot-box { 0%, 31% { stroke-dashoffset: 100; opacity: 0; } 32% { stroke-dashoffset: 100; opacity: 1; } 42%, 93% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes shot-arrow { 0%, 43% { stroke-dashoffset: 100; opacity: 0; } 44% { stroke-dashoffset: 100; opacity: 1; } 54%, 93% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes shot-head { 0%, 52% { stroke-dashoffset: 100; opacity: 0; } 53% { stroke-dashoffset: 100; opacity: 1; } 58%, 93% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes shot-note { 0%, 57% { opacity: 0; transform: scale(.6) translateY(6px); } 62% { opacity: 1; transform: scale(1.06); } 65%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes shot-toast { 0%, 68% { opacity: 0; transform: translate(-50%, 140%); } 74%, 92% { opacity: 1; transform: translate(-50%, 0); } 97%, 100% { opacity: 0; transform: translate(-50%, 0); } }

.mc-anim.playing .mc-video .mc-cursor { animation-name: vid-cursor; }
.mc-anim.playing .mc-ripple { animation-name: vid-ripple; }
.mc-anim.playing .mc-row { animation-name: vid-row; }
.mc-anim.playing .mc-recbar { animation-name: vid-recbar; }
.mc-anim.playing .mc-done { animation-name: vid-done; }
.mc-anim.playing .mc-result { animation-name: vid-result; }
.mc-anim.playing .mc-lvl i, .mc-anim.playing .mc-live i { animation: mc-level .5s ease-in-out infinite alternate; }
.mc-anim.playing .mc-lvl i:nth-child(2n), .mc-anim.playing .mc-live i:nth-child(2n) { animation-duration: .37s; }
.mc-anim.playing .mc-lvl i:nth-child(3n), .mc-anim.playing .mc-live i:nth-child(3n) { animation-duration: .62s; animation-delay: -.2s; }
.mc-anim.playing .mc-live i:nth-child(4n) { animation-duration: .44s; animation-delay: -.1s; }
@keyframes mc-level { from { transform: scaleY(.35); } to { transform: scaleY(1.6); } }
@keyframes vid-cursor { 0% { left: 75%; top: 85%; opacity: 0; } 4% { opacity: 1; } 18% { left: 34%; top: 66px; transform: scale(1); } 20% { transform: scale(.8); } 22% { transform: scale(1); } 34% { left: 58%; top: 60px; } 46% { left: 30%; top: 80px; } 66% { left: calc(50% + 58px); top: calc(100% - 32px); transform: scale(1); } 69% { transform: scale(.8); } 71% { transform: scale(1); opacity: 1; } 78%, 100% { left: calc(50% + 58px); top: calc(100% - 32px); opacity: 0; } }
@keyframes vid-ripple { 0%, 19% { opacity: 0; transform: scale(.3); } 21% { opacity: 1; } 30%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes vid-row { 0%, 19% { box-shadow: inset 0 0 0 0 transparent; background: transparent; } 23%, 94% { box-shadow: inset 0 0 0 2px var(--red); background: var(--red-soft); } 100% { box-shadow: inset 0 0 0 0 transparent; background: transparent; } }
@keyframes vid-recbar { 0%, 72% { opacity: 1; transform: translateX(-50%); } 76%, 97% { opacity: 0; transform: translate(-50%, 10px); } 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes vid-done { 0%, 68% { transform: none; filter: none; } 70% { transform: scale(.88); filter: brightness(1.2); } 73%, 100% { transform: none; filter: none; } }
@keyframes vid-result { 0%, 75% { opacity: 0; transform: translate(-50%, 130%); } 81%, 94% { opacity: 1; transform: translate(-50%, 0); } 98%, 100% { opacity: 0; transform: translate(-50%, 0); } }

.mc-anim.playing .mc-rec { animation-name: voice-rec; }
.mc-anim.playing .mc-player { animation-name: voice-player; }
.mc-anim.playing .mc-speeds { animation-name: voice-speeds; }
.mc-anim.playing .mc-play.small .pl { animation-name: voice-pl; }
.mc-anim.playing .mc-play.small .pa { animation-name: voice-pa; }
.mc-anim.playing .mc-wave-fill { animation-name: voice-fill; animation-timing-function: linear; }
.mc-anim.playing .mc-speeds .s1 { animation-name: voice-s1; }
.mc-anim.playing .mc-speeds .s15 { animation-name: voice-s15; }
.mc-anim.playing .mc-speeds .s2 { animation-name: voice-s2; }
@keyframes voice-rec { 0% { opacity: 0; transform: translateY(-40%); } 4%, 44% { opacity: 1; transform: translateY(-50%); } 49%, 100% { opacity: 0; transform: translateY(-60%) scale(.96); } }
@keyframes voice-player { 0%, 46% { opacity: 0; transform: translateY(calc(-50% - 6px)); } 52%, 95% { opacity: 1; transform: translateY(calc(-50% - 18px)); } 100% { opacity: 0; transform: translateY(calc(-50% - 18px)); } }
@keyframes voice-speeds { 0%, 50% { opacity: 0; transform: translate(-50%, 8px); } 56%, 95% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }
@keyframes voice-pl { 0%, 54% { opacity: 1; } 56%, 92% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes voice-pa { 0%, 54% { opacity: 0; } 56%, 92% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes voice-fill { 0%, 55% { clip-path: inset(0 100% 0 0); } 92%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes voice-s1 { 0%, 55% { background: var(--blue); color: #fff; } 57%, 100% { background: transparent; color: var(--ink-2); } }
@keyframes voice-s15 { 0%, 66% { background: transparent; color: var(--ink-2); } 68%, 79% { background: var(--blue); color: #fff; } 81%, 100% { background: transparent; color: var(--ink-2); } }
@keyframes voice-s2 { 0%, 79% { background: transparent; color: var(--ink-2); } 81%, 100% { background: var(--blue); color: #fff; } }
.media-notes { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; color: var(--ink-2); font-size: 14.5px; }
.media-notes li { display: flex; align-items: center; gap: 8px; }
.media-notes li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--green, #16a34a) 14%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (max-width: 900px) { .media-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .mc-dot, .mc-mic::before, .mc-mic::after { animation: none; } }
.mc-mark-box { left: 33px; top: 87px; width: 88px; height: 34px; }

/* tables inside articles: light, readable, scroll sideways on a phone */
.b-text table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0 24px; font-size: 15px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: block; overflow-x: auto; }
.b-text thead th { background: var(--surface-2, #f4f3f0); font-weight: 700; color: var(--ink); text-align: left; }
.b-text th, .b-text td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; min-width: 110px; }
.b-text tbody tr:last-child td { border-bottom: 0; }
.b-text tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2, #f4f3f0) 45%, transparent); }

/* ---------- video overview ---------- */
.video-sec { padding-bottom: 40px; }
.video-frame { position: relative; max-width: 1080px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #060a15;
  box-shadow: 0 30px 70px -30px rgba(17,23,36,.35), 0 0 0 1px var(--line); aspect-ratio: 16 / 9; }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #060a15; }
.video-play { position: absolute; left: 50%; top: 84%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px 14px 16px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 18px;
  box-shadow: 0 16px 40px -10px rgba(0,136,247,.6); transition: transform .2s, background .2s; }
.video-play svg { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.22); fill: #fff; }
.video-play:hover { background: var(--blue-deep); transform: translate(-50%, -50%) scale(1.03); }
.video-frame.playing .video-play { display: none; }
@media (max-width: 640px) {
  .video-frame { border-radius: 12px; }
  .video-play { padding: 10px 18px 10px 10px; font-size: 15px; }
  .video-play svg { width: 32px; height: 32px; padding: 8px; }
}

/* phones: «Войти» stays in the header as a button, next to the menu */
.nav-login-mobile { display: none; }
@media (max-width: 860px) {
  .nav-login-mobile { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
  .nav-login-mobile + .nav-burger { margin-left: 6px; }
  .nav-open .nav-login-mobile { visibility: hidden; }
}
@media (max-width: 370px) {
  .nav-login-mobile { padding: 0 11px; font-size: 13.5px; }
  .nav-logo img { width: 118px; height: auto; }
  .nav-login-mobile + .nav-burger { margin-left: 2px; width: 38px; }
}

/* the price cards while card payments are off: who each plan is for */
.price-who { align-self: flex-start; display: inline-flex; align-items: center; margin: 10px 0 4px; padding: 4px 11px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; background: rgba(0, 136, 247, .1); color: #0068c9; }
.price-who + .price-desc { margin-top: 10px; }
.price.featured .price-who { background: rgba(255, 255, 255, .18); color: #fff; }
/* the invoice note under the prices while card payments are off: easy to notice, still calm */
.price-note { max-width: 860px; margin: 28px auto 0; padding: 14px 20px; border-radius: 4px; border: 1px solid rgba(0, 136, 247, .18); background: rgba(0, 136, 247, .06); color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.price-note a { color: #0068c9; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0, 104, 201, .35); }
.price-note a:hover { border-bottom-color: currentColor; }

/* FAQ: the left column carries a help card and stays in view while the answers scroll */
.faq-wrap > .sec-head { position: sticky; top: 104px; }
.faq-help { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.faq-help-row { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: background .2s; }
.faq-help-row:hover { background: var(--soft); }
.faq-help-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-deep); }
.faq-help-row + .faq-help-row .faq-help-ic { background: var(--violet-soft); color: var(--violet); }
.faq-help-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.faq-help-text b { font-size: 16px; font-weight: 600; }
.faq-help-text span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.faq-help-go { flex: none; color: var(--ink-3); font-size: 18px; transition: transform .2s, color .2s; }
.faq-help-row:hover .faq-help-go { transform: translateX(3px); color: var(--ink); }
.faq-help-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 20px; background: var(--soft); font-size: 13px; color: var(--ink-2); }
.faq-help-facts span { display: inline-flex; align-items: center; gap: 7px; }
.faq-help-facts span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
@media (max-width: 1100px) { .faq-wrap > .sec-head { position: static; } .faq-help { margin-top: 24px; } }

/* ================= AI agents (landing block, /ai-agents, an agent's window) ================= */
/* the app's colour names for the shared films (agents-demo.css) */
.ag-scope { --surface: #fff; --surface-2: #f5f4f1; --border: #ebe7e0; --border-strong: #d6d1c7; --text: #111724; --text-2: #4b5668; --text-3: #8a94a6;
  --accent: #0088f7; --accent-soft: #e5f3ff; }
.ag-grad { background: linear-gradient(92deg, #7cc4ff 0%, #b98aff 45%, #ffb15c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ag-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: ag-drift 16s ease-in-out infinite alternate; }
.ag-aurora i:nth-child(1) { width: 560px; height: 560px; left: -160px; top: -180px; background: #3b5bff; }
.ag-aurora i:nth-child(2) { width: 520px; height: 520px; right: -140px; top: 10%; background: #7b33f1; animation-delay: -6s; }
.ag-aurora i:nth-child(3) { width: 460px; height: 460px; left: 35%; bottom: -260px; background: #fc7b2e; opacity: .35; animation-delay: -11s; }
@keyframes ag-drift { to { transform: translate(60px, 40px) scale(1.12); } }

/* --- the landing's show --- */
.ag-show { position: relative; overflow: hidden; margin: 0 16px; padding: 104px 0 96px; border-radius: 36px; background: #0b1020; color: #fff; isolation: isolate; }
.ag-show::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); }
.ag-show-in { position: relative; }
.ag-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.ag-head .kicker, .ag-hero .kicker { color: #9fb0c9; }
.ag-head .kicker::before, .ag-hero .kicker::before { background: linear-gradient(90deg, #5cb6ff, #b98aff); }
.ag-head h2 { margin: 16px 0 18px; color: #fff; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
.ag-head p { margin: 0 auto; max-width: 680px; color: #b4bfd0; font-size: 18px; line-height: 1.6; }
.ag-stage { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; align-items: stretch; }
.ag-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ag-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.ag-tabs button { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #b4bfd0; font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ag-tabs button:hover { color: #fff; }
.ag-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); }
.ag-list { display: flex; flex-direction: column; gap: 8px; }
.ag-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  background: rgba(255, 255, 255, .03); color: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  transition: background .25s, border-color .25s, transform .25s cubic-bezier(.2, .8, .3, 1); animation: ag-in .5s cubic-bezier(.2, .8, .3, 1) backwards; }
.ag-item:nth-child(2) { animation-delay: .06s; } .ag-item:nth-child(3) { animation-delay: .12s; } .ag-item:nth-child(4) { animation-delay: .18s; }
.ag-item:nth-child(5) { animation-delay: .24s; } .ag-item:nth-child(6) { animation-delay: .3s; } .ag-item:nth-child(7) { animation-delay: .36s; } .ag-item:nth-child(8) { animation-delay: .42s; }
@keyframes ag-in { from { opacity: 0; transform: translateX(-14px); } }
.ag-item:hover { background: rgba(255, 255, 255, .07); transform: translateX(3px); }
.ag-item.on { background: linear-gradient(100deg, rgba(92, 182, 255, .2), rgba(185, 138, 255, .14)); border-color: rgba(140, 170, 255, .45); transform: translateX(6px);
  box-shadow: 0 10px 30px -14px rgba(92, 132, 255, .8); }
.ag-item.on::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(#5cb6ff, #b98aff); }
.ag-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-item-text b { font-size: 15.5px; }
.ag-item-text span { font-size: 13px; color: #9fb0c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.ag-item.on .ag-eq { display: inline-flex; }
.ag-eq i { width: 3px; height: 30%; border-radius: 2px; background: #7cc4ff; animation: demo-wave .5s ease-in-out infinite alternate; }
.ag-eq i:nth-child(2) { animation-delay: -.2s; } .ag-eq i:nth-child(3) { animation-delay: -.35s; }
.ag-screen { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 560px; padding: 28px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .7); }
.ag-floaters { position: absolute; inset: 0; pointer-events: none; }
.ag-float { position: absolute; transform: translate(-50%, -50%) scale(var(--s, 1)); opacity: .9; }
.ag-float .agent-face { animation: ag-bob 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
@keyframes ag-bob { 50% { transform: translateY(-9px) rotate(-4deg); } }
.ag-say { position: relative; z-index: 1; min-height: 92px; }
.ag-say-in { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 0 auto; padding: 14px 20px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .96);
  color: var(--ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); animation: ag-pop .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.ag-say-in > .agent-face { animation: ag-hop .6s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ag-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes ag-hop { 0% { transform: translateY(14px) scale(.6); opacity: 0; } 60% { transform: translateY(-6px) scale(1.06); opacity: 1; } 100% { transform: none; } }
.ag-say-text { min-width: 0; }
.ag-say-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ag-say-who b { font-size: 18px; }
.ag-say-who span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.ag-say-text p { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.ag-demo { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; }
.ag-demo .demo-win { max-width: 520px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
.ag-demo .demo-screen { min-height: 340px; font-size: 13px; }
.ag-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.ag-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; color: #b4bfd0; font-size: 14px; }
.ag-facts li { display: inline-flex; align-items: center; gap: 8px; }
.ag-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .15); }

/* --- /ai-agents --- */
.ag-hero { position: relative; overflow: hidden; margin: 88px 16px 0; padding: 92px 0 72px; border-radius: 36px; background: #0b1020; color: #fff; text-align: center; isolation: isolate; }
.ag-hero-in { position: relative; }
.ag-hero h1 { margin: 18px auto 18px; max-width: 900px; color: #fff; font-size: clamp(38px, 6vw, 72px); line-height: 1.02; letter-spacing: -.04em; }
.ag-lead { margin: 0 auto; max-width: 640px; color: #b4bfd0; font-size: 19px; line-height: 1.6; }
.ag-hero-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.ag-cloud { position: relative; height: 170px; max-width: 980px; margin: 56px auto 8px; }
.ag-cloud-face { position: absolute; transform: translate(-50%, -50%); animation: ag-arrive .8s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 70ms + .2s); }
.ag-cloud-face .agent-face { animation: ag-bob 5s ease-in-out infinite; animation-delay: var(--d); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)); }
@keyframes ag-arrive { from { opacity: 0; transform: translate(-50%, 40%) scale(.3); } }
.ag-stats { list-style: none; display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin: 24px 0 0; padding: 0; }
.ag-stats li { display: flex; flex-direction: column; align-items: center; }
.ag-stats b { font-size: 40px; letter-spacing: -.04em; line-height: 1; background: linear-gradient(180deg, #fff, #9fb0c9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-stats span { margin-top: 6px; color: #9fb0c9; font-size: 14px; }
.ag-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 72px; }
.ag-step { padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ag-step > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #5cb6ff, #7b33f1); }
.ag-step:nth-child(2) > span { background: linear-gradient(135deg, #b98aff, #f9395d); }
.ag-step:nth-child(3) > span { background: linear-gradient(135deg, #ffb15c, #fc7b2e); }
.ag-step h3 { margin: 18px 0 8px; font-size: 20px; }
.ag-step p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.ag-groups { display: flex; flex-direction: column; gap: 72px; margin-top: 88px; margin-bottom: 96px; }
.ag-group { scroll-margin-top: 96px; }
.ag-group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ag-group-head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; }
.ag-group-head p { margin: 0; max-width: 520px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.ag-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ag-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s, border-color .3s; }
.ag-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.ag-card-glow { position: absolute; z-index: -1; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle, rgba(92, 182, 255, .35), rgba(185, 138, 255, .18) 45%, transparent 70%); }
.ag-card:hover .ag-card-glow { opacity: 1; }
.ag-card-top { display: flex; align-items: center; gap: 12px; }
.ag-card-top > div { display: flex; flex-direction: column; min-width: 0; }
.ag-card-top b { font-size: 19px; letter-spacing: -.01em; }
.ag-card-top span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.ag-card .agent-face { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ag-card:hover .agent-face { transform: rotate(-6deg) scale(1.08); }
.ag-card > p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.ag-card-ex { margin-top: auto; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: var(--ink);
  background: linear-gradient(135deg, rgba(123, 51, 241, .07), rgba(0, 136, 247, .07)); border: 1px solid rgba(0, 136, 247, .14); }
.ag-card-ex-in { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ag-card-ex-tag { margin-right: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue-deep); }
.ag-card-go { font-size: 14px; font-weight: 600; color: var(--blue-deep); }
.ag-card:hover .ag-card-go span { display: inline-block; transform: translateX(3px); transition: transform .2s; }

/* --- an agent's window --- */
html.ag-lock { overflow: hidden; }
.ag-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(11, 16, 32, .62); backdrop-filter: blur(6px);
  animation: ag-fade .22s ease both; }
.ag-modal.out { animation: ag-fade .2s ease reverse both; }
@keyframes ag-fade { from { opacity: 0; } }
.ag-modal-box { position: relative; width: min(1040px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; border-radius: 24px;
  background: var(--surface); color: var(--text); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .6); animation: ag-pop .35s cubic-bezier(.2, 1.2, .4, 1) both; }
.ag-modal .agent-tour { flex: 1; min-height: 0; }
.ag-modal .tour-text { overflow-y: auto; }
.ag-modal .tour-who h2 { color: var(--text); }
.ag-check { flex: none; margin-top: 2px; color: #16a34a; display: inline-flex; }
.ag-note { font-size: 12.5px; color: var(--text-3); }
.ag-close { position: absolute; top: 12px; right: 12px; z-index: 4; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(17, 23, 36, .06); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s; }
.ag-close:hover { background: rgba(17, 23, 36, .12); }
.ag-photo { border-radius: 50%; object-fit: cover; }

@media (max-width: 1100px) {
  .ag-stage { grid-template-columns: 1fr; }
  .ag-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
  .ag-list::-webkit-scrollbar { display: none; }
  .ag-item { flex: none; width: 220px; }
  .ag-item.on { transform: none; }
  .ag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-group-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 760px) {
  .ag-show { padding: 72px 0 64px; border-radius: 26px; margin: 0 8px; }
  .ag-head { margin-bottom: 32px; }
  .ag-head p { font-size: 16px; }
  .ag-tabs button { font-size: 12.5px; padding: 0 6px; }
  .ag-screen { padding: 14px; min-height: 0; border-radius: 22px; }
  .ag-floaters { display: none; }
  .ag-say { min-height: 0; }
  .ag-say-in { padding: 12px; gap: 12px; }
  .ag-say-in > .agent-face { width: 48px !important; height: 48px !important; }
  .ag-say-who b { font-size: 16px; }
  .ag-say-text p { font-size: 14px; }
  .ag-demo .demo-screen { min-height: 300px; }
  .ag-foot { flex-direction: column; align-items: stretch; }
  .ag-hero { margin: 76px 8px 0; padding: 64px 0 48px; border-radius: 26px; }
  .ag-lead { font-size: 16.5px; }
  .ag-cloud { height: 120px; margin-top: 36px; }
  .ag-cloud-face .agent-face { width: 36px !important; height: 36px !important; }
  .ag-stats { gap: 28px; }
  .ag-stats b { font-size: 32px; }
  .ag-steps { grid-template-columns: 1fr; margin-top: 48px; }
  .ag-grid { grid-template-columns: 1fr; }
  .ag-groups { gap: 56px; margin-top: 56px; }
  .ag-modal { padding: 0; place-items: end stretch; }
  .ag-modal-box { max-height: 94dvh; border-radius: 22px 22px 0 0; }
  .ag-modal .agent-tour { overflow-y: auto; }
  .ag-modal .tour-text { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-aurora i, .ag-float .agent-face, .ag-cloud-face, .ag-cloud-face .agent-face, .ag-item, .ag-say-in, .ag-say-in > .agent-face, .ag-eq i, .ag-modal, .ag-modal-box { animation: none; }
}

/* «Смотреть видео» under the agents' arc: a glowing round button with rings running out of it */
.ag-play { display: inline-flex; align-items: center; gap: 16px; margin: 10px auto 0; padding: 8px 22px 8px 8px; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: inherit; cursor: pointer; backdrop-filter: blur(8px);
  transition: background .25s, border-color .25s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.ag-play:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .28); transform: translateY(-2px); }
.ag-play-btn { position: relative; width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, #5cb6ff 0%, #b98aff 55%, #ffb15c 100%); box-shadow: 0 10px 30px -6px rgba(140, 120, 255, .8); }
.ag-play-btn svg { position: relative; width: 26px; height: 26px; margin-left: 3px; fill: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); transition: transform .25s; }
.ag-play:hover .ag-play-btn svg { transform: scale(1.12); }
.ag-play-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(185, 138, 255, .7); animation: ag-ring 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.ag-play-ring + .ag-play-ring { animation-delay: 1.2s; border-color: rgba(92, 182, 255, .6); }
@keyframes ag-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.ag-play-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ag-play-text b { font-size: 17px; }
.ag-play-text small { font-size: 13px; color: #b4bfd0; }
.ag-hero .ag-stats { margin-top: 40px; }

/* the player: our colours, the gradient line, the controls that hide while it plays */
.vp-modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px; background: rgba(6, 10, 21, .78); backdrop-filter: blur(10px);
  animation: ag-fade .25s ease both; }
.vp-modal.out { animation: ag-fade .2s ease reverse both; }
.vp-box { position: relative; width: min(1180px, 100%); animation: ag-pop .4s cubic-bezier(.2, 1.2, .4, 1) both; }
.vp-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s; }
.vp-close:hover { background: rgba(255, 255, 255, .22); }
.vp { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px -30px rgba(92, 132, 255, .55), 0 30px 80px -20px rgba(0, 0, 0, .8); }
.vp:fullscreen { border-radius: 0; }
.vp-video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; cursor: pointer; }
.vp-shade { position: absolute; inset: auto 0 0 0; height: 140px; pointer-events: none; background: linear-gradient(transparent, rgba(6, 10, 21, .85));
  transition: opacity .35s; }
.vp-big { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #5cb6ff 0%, #b98aff 55%, #ffb15c 100%); color: #fff; cursor: pointer;
  box-shadow: 0 16px 50px -10px rgba(140, 120, 255, .9), 0 0 0 10px rgba(255, 255, 255, .12); transition: opacity .3s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.vp-big:hover { transform: scale(1.08); }
.vp-big .vp-ic svg { width: 38px; height: 38px; margin-left: 5px; }
.vp.playing .vp-big { opacity: 0; transform: scale(.8); pointer-events: none; }
.vp-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 14px; display: flex; flex-direction: column; gap: 8px; transition: opacity .35s, transform .35s; }
.vp.idle .vp-controls, .vp.idle .vp-shade { opacity: 0; }
.vp.idle .vp-controls { transform: translateY(8px); }
.vp.idle { cursor: none; }
.vp-row { display: flex; align-items: center; gap: 10px; color: #fff; }
.vp-space { flex: 1; }
.vp-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .2s; }
.vp-btn:hover { background: rgba(255, 255, 255, .14); }
.vp-ic { display: inline-flex; }
.vp-ic svg { width: 22px; height: 22px; }
.vp-time { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9); }
.vp-bar { position: relative; height: 18px; cursor: pointer; touch-action: none; outline: none; }
.vp-bar > i { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; transition: height .15s, margin .15s; }
.vp-track { right: 0; background: rgba(255, 255, 255, .22); }
.vp-loaded { background: rgba(255, 255, 255, .35); width: 0; }
.vp-played { width: 0; background: linear-gradient(90deg, #5cb6ff, #b98aff 60%, #ffb15c); box-shadow: 0 0 12px rgba(185, 138, 255, .7); }
.vp-bar:hover > i, .vp.seeking .vp-bar > i { height: 6px; margin-top: -3px; }
.vp-knob { width: 14px !important; height: 14px !important; margin: -7px 0 0 -7px !important; border-radius: 50% !important; background: #fff; left: 0;
  box-shadow: 0 0 0 4px rgba(185, 138, 255, .45); opacity: 0; transition: opacity .15s !important; }
.vp-bar:hover .vp-knob, .vp.seeking .vp-knob, .vp-bar:focus-visible .vp-knob { opacity: 1; }
.vp-tip { position: absolute; bottom: 22px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: rgba(6, 10, 21, .9); color: #fff;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity .15s; }
.vp-bar:hover .vp-tip { opacity: 1; }
.vp-vol { -webkit-appearance: none; appearance: none; width: 90px; height: 4px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(90deg, #b98aff var(--v, 100%), rgba(255, 255, 255, .25) var(--v, 100%)); }
.vp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.vp-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
@media (max-width: 760px) {
  .ag-play { padding: 6px 16px 6px 6px; gap: 12px; }
  .ag-play-btn { width: 52px; height: 52px; }
  .ag-play-text b { font-size: 15.5px; }
  .vp-modal { padding: 12px; }
  .vp { border-radius: 14px; }
  .vp-close { top: -46px; }
  .vp-big { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .vp-big .vp-ic svg { width: 30px; height: 30px; }
  .vp-vol { display: none; }
  .vp-controls { padding: 0 10px 8px; }
}
@media (prefers-reduced-motion: reduce) { .ag-play-ring { animation: none; opacity: 0; } .vp-box, .vp-modal { animation: none; } }

/* the AI assistant on the public site (public/assets/js/public-chat.js) */
.mt-ai { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-family: inherit; color: #111827; }
.mt-ai-toggle { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 999px; background: linear-gradient(180deg, #ffffff, #f4f6fb); color: #111827; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(15, 23, 42, .16); transition: transform .2s ease, box-shadow .2s ease; }
.mt-ai-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(15, 23, 42, .22); }
.mt-ai-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
/* the logo floats gently while the button rests, and turns while the pointer is on it */
.mt-ai-btn-logo { width: 34px; height: 34px; flex: none; animation: mt-ai-float 3.2s ease-in-out infinite; }
.mt-ai-toggle:hover .mt-ai-btn-logo { animation: mt-ai-turn 1.8s linear infinite; }
@keyframes mt-ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes mt-ai-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mt-ai-btn-logo, .mt-ai-toggle:hover .mt-ai-btn-logo { animation: none; } }
/* the hint over the button: what it is and why to ask */
.mt-ai-tip { position: absolute; right: 0; bottom: calc(100% + 14px); width: min(300px, calc(100vw - 40px)); padding: 14px 16px; border-radius: 14px; background: #111827; color: #f3f4f6; font-size: 13.5px; line-height: 1.5; box-shadow: 0 14px 36px rgba(15, 23, 42, .28); opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.mt-ai-tip b { display: block; margin-bottom: 4px; font-size: 14px; }
.mt-ai-tip span { color: #cbd5e1; }
.mt-ai-tip::after { content: ''; position: absolute; right: 34px; bottom: -6px; width: 12px; height: 12px; background: #111827; transform: rotate(45deg); }
.mt-ai-toggle:hover + .mt-ai-tip, .mt-ai-toggle:focus-visible + .mt-ai-tip { opacity: 1; transform: none; }
.mt-ai.is-open .mt-ai-tip { display: none; }
.mt-ai-panel { position: fixed; inset: 24px; display: flex; flex-direction: column; margin: auto; max-width: 820px; max-height: calc(100vh - 48px); border-radius: 20px; background: #fff; box-shadow: 0 24px 80px rgba(15, 23, 42, .28); overflow: hidden; }
.mt-ai-panel[hidden] { display: none; }
.mt-ai-panel.is-full { inset: 0; margin: 0; max-width: none; max-height: none; border-radius: 0; }
.mt-ai-panel.is-left, .mt-ai-panel.is-right { top: 0; bottom: 0; margin: 0; max-width: none; max-height: none; width: min(460px, 100vw); border-radius: 0; }
.mt-ai-panel.is-left { left: 0; right: auto; box-shadow: 8px 0 40px rgba(15, 23, 42, .18); }
.mt-ai-panel.is-right { right: 0; left: auto; box-shadow: -8px 0 40px rgba(15, 23, 42, .18); }
.mt-ai-controls { display: flex; align-items: center; gap: 2px; }
.mt-ai-close[aria-pressed="true"] { background: #eef2ff; color: #1d4ed8; }
.mt-ai-meta { margin-top: 8px; font-size: 12px; color: #9ca3af; }
/* while the answer is being made: the logo breathes, the step shimmers, the seconds run */
.mt-ai-row.thinking { align-items: center; }
/* the logo of the loading screen: three circles gather and the whole mark turns */
.mt-ai-boot { flex: none; width: 34px; height: 34px; }
.mt-b-logo { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 8px rgba(107, 53, 236, .2)); }
.mt-b-spin { transform-box: view-box; transform-origin: 31.6px 35px; animation: mt-b-spin 2.6s cubic-bezier(.5, 0, .2, 1) infinite; }
.mt-b-c { transform-box: fill-box; transform-origin: center; animation: mt-b-gather 2.6s cubic-bezier(.34, 1.45, .55, 1) infinite; }
.mt-b-top { --dx: -.2px; --dy: 16.8px; }
.mt-b-left { --dx: 15.3px; --dy: -8.4px; }
.mt-b-right { --dx: -15.2px; --dy: -8.4px; }
@keyframes mt-b-spin { 0% { transform: rotate(-240deg); } 55%, 100% { transform: rotate(0deg); } }
@keyframes mt-b-gather {
  0% { transform: translate(var(--dx), var(--dy)) scale(.45); }
  55%, 82% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) scale(.45); }
}
@media (prefers-reduced-motion: reduce) { .mt-b-spin, .mt-b-c { animation: none; } }
.mt-ai-status { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: #6b7280; }
.mt-ai-label { background: linear-gradient(90deg, #9ca3af 25%, #111827 50%, #9ca3af 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mt-ai-shine 1.8s linear infinite; }
@keyframes mt-ai-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.mt-ai-sec { font-variant-numeric: tabular-nums; }
.mt-ai-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef0f3; }
.mt-ai-head img { width: 34px; height: 34px; border-radius: 0; }
.mt-ai-title { flex: 1; min-width: 0; }
.mt-ai-title b { display: block; font-size: 16px; }
.mt-ai-title span { font-size: 12px; color: #6b7280; }
.mt-ai-meta-head { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; font-weight: 400; }
.mt-ai-info-btn { margin-left: 8px; width: 22px; height: 22px; border: 1px solid #d1d5db; border-radius: 50%; background: #fff; color: #4b5563; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; vertical-align: middle; }
.mt-ai-info { margin: 0; padding: 12px 18px; font-size: 13.5px; line-height: 1.55; color: #374151; background: #f9fafb; border-bottom: 1px solid #eef0f3; }
.mt-ai-close { border: 0; background: transparent; color: #6b7280; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.mt-ai-close:hover { background: #f3f4f6; }
.mt-ai-body { flex: 1; overflow-y: auto; padding: 24px 18px; scroll-behavior: smooth; }
.mt-ai-thread { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.mt-ai-row { display: flex; gap: 12px; align-items: flex-start; }
.mt-ai-row.me { justify-content: flex-end; }
.mt-ai-row img { width: 28px; height: 28px; border-radius: 0; flex: none; margin-top: 2px; }
.mt-ai-text { font-size: 15px; line-height: 1.6; word-break: break-word; min-width: 0; }
.mt-ai-text p { margin: 0 0 10px; }
.mt-ai-text p:last-child { margin-bottom: 0; }
.mt-ai-text ul, .mt-ai-text ol { margin: 0 0 10px; padding-left: 22px; }
.mt-ai-text code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: #f3f4f6; padding: 1px 5px; border-radius: 5px; }
.mt-ai-row.me .mt-ai-text { background: #eef2ff; border-radius: 18px 18px 4px 18px; padding: 10px 14px; max-width: 80%; white-space: pre-wrap; }
.mt-ai-dots { display: inline-flex; gap: 5px; padding: 8px 0; }
.mt-ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; animation: mt-ai-blink 1.2s infinite ease-in-out; }
.mt-ai-dots i:nth-child(2) { animation-delay: .15s; }
.mt-ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mt-ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.mt-ai-hello { text-align: center; padding: 28px 0 8px; }
.mt-ai-hello img { width: 52px; height: 52px; border-radius: 0; }
.mt-ai-hello h2 { margin: 14px 0 6px; font-size: 22px; color: inherit; }
.mt-ai h2, .mt-ai b, .mt-ai strong { color: inherit; }
.mt-ai-hello p { margin: 0; color: #6b7280; font-size: 15px; }
.mt-ai-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.mt-ai-chip { border: 1px solid #e5e7eb; background: #fff; color: #111827; border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.mt-ai-chip:hover { background: #f9fafb; }
.mt-ai-limit { text-align: center; padding: 16px; border-radius: 14px; background: #f9fafb; border: 1px solid #eef0f3; }
.mt-ai-limit p { margin: 0 0 12px; }
.mt-ai-reg { display: inline-block; text-decoration: none; background: #111827; color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 14px; }
.mt-ai-foot { padding: 12px 18px 16px; border-top: 1px solid #eef0f3; }
.mt-ai-form { max-width: 720px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 18px; padding: 8px 8px 8px 16px; }
.mt-ai-input { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: 15px; line-height: 1.5; padding: 6px 0; max-height: 160px; outline: none; }
.mt-ai-send { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #111827; color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.mt-ai-send:disabled { opacity: .35; cursor: default; }
.mt-ai-note { max-width: 720px; margin: 8px auto 0; text-align: center; font-size: 12px; color: #9ca3af; }
@media (max-width: 640px) {
  .mt-ai-panel { inset: 0; max-width: none; max-height: none; border-radius: 0; }
  .mt-ai-body { padding: 18px 14px; }
  .mt-ai-row.me .mt-ai-text { max-width: 88%; }
}
@media (prefers-color-scheme: dark) {
  .mt-ai { color: #f3f4f6; }
  .mt-ai-toggle { background: #1f2937; color: #f3f4f6; }
  .mt-ai-panel { background: #111827; color: #f3f4f6; }
  .mt-ai-head, .mt-ai-foot { border-color: #1f2937; }
  .mt-ai-title span, .mt-ai-hello p, .mt-ai-note { color: #9ca3af; }
  .mt-ai-close:hover, .mt-ai-chip { background: #1f2937; border-color: #374151; color: #f3f4f6; }
  .mt-ai-close[aria-pressed="true"] { background: #1e3a8a; color: #dbeafe; }
  .mt-ai-status { color: #9ca3af; }
  .mt-ai-meta-head { color: #9ca3af; }
  .mt-ai-info-btn { background: #1f2937; border-color: #4b5563; color: #d1d5db; }
  .mt-ai-info { background: #1a2333; color: #cbd5e1; border-color: #1f2937; }
  .mt-ai-label { background-image: linear-gradient(90deg, #6b7280 25%, #f3f4f6 50%, #6b7280 75%); }
  .mt-ai-text code { background: #1f2937; }
  .mt-ai-row.me .mt-ai-text { background: #1e3a8a; }
  .mt-ai-form { background: #1f2937; border-color: #374151; }
  .mt-ai-input { color: #f3f4f6; }
  .mt-ai-send { background: #f3f4f6; color: #111827; }
  .mt-ai-limit { background: #1f2937; border-color: #374151; }
  .mt-ai-reg { background: #f3f4f6; color: #111827; }
}