/* Plugix — redesign concept v2 by e-site.dev. Light like the brand: white, ink #1a1a1a, navy #101938, one accent «pick» #2d3c9a. */
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #1a1a1a; --ink-2: #5d6068; --ink-3: #8b8e96; --line: #e8e8e8; --line-2: #d5d5d5; --bubble: #f1f1f1; --paper: #f7f7f7; --white: #fff;
  --navy: #101938; --navy-2: #1b2550; --night: #070b1d;
  --pick: #2d3c9a; --pick-soft: rgba(45, 60, 154, .08); --peri: #9aa6ff; --peri-2: #c3c9ff;
  --ok: #1a7d43; --live: #3fbf7a; --warn: #8a5a00;
  --on-dark: #eef0fb; --on-dark-2: rgba(222, 227, 255, .68); --on-dark-3: rgba(222, 227, 255, .44);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: max(20px, 5vw);
  --top-h: 64px;
  --shadow: 0 1px 2px rgba(16, 25, 56, .05), 0 24px 70px rgba(16, 25, 56, .1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; background: #fff; }
body { margin: 0; font-family: Manrope, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; color: var(--ink); background: #fff; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: -999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--pick); outline-offset: 3px; border-radius: 8px; }
.pm { width: 1em; height: 1em; flex: none; }
html[data-mode="shop"] .m-svc, html[data-mode="svc"] .m-shop { display: none !important; }
.wrap { width: min(1220px, 100% - var(--gut) * 2); margin: 0 auto; }

/* ---------------------------------------------------------------- header */
.top { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 30px; padding: 0 var(--gut); transition: background .35s, box-shadow .35s; }
.top.is-solid { background: rgba(255, 255, 255, .82); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.brand .pm { width: 27px; height: 27px; }
.nav { display: flex; gap: 26px; font-size: 14.5px; }
.nav a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.nav a:hover { color: var(--ink); }
.tact { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lng { display: flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 1px var(--line); }
.lng button { border: 0; background: none; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lng button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 600; font-size: 15px; text-decoration: none; background: var(--ink); color: #fff; transition: transform .25s var(--ease), box-shadow .25s, background .25s; white-space: nowrap; }
.pill:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(16, 25, 56, .18); }
.pill svg { width: 18px; height: 18px; }
.pill-top { padding: 10px 18px; font-size: 14px; gap: 0; }
.pill-top .hide-m { margin-left: .26em; }
.pill-ghost-l { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.lnk { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--pick); }
.lnk svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.lnk:hover svg { transform: translateX(3px); }
.concept { position: fixed; left: 16px; bottom: 14px; z-index: 45; font-size: 11.5px; font-weight: 600; text-decoration: none; color: var(--ink-2); background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 6px 11px 6px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); display: inline-flex; gap: 7px; align-items: center; }
.concept::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pick); }

/* the orb as a small character (CSS) */
.orb-mini { position: relative; width: 30px; height: 30px; flex: none; display: inline-block; }
.orb-mini i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 5%, #d9ddff 12%, transparent 32%), radial-gradient(circle at 50% 58%, #6170ff 0%, #2d3c9a 40%, #141c4c 78%); box-shadow: inset 0 0 0 1px rgba(190, 198, 255, .35), 0 0 16px rgba(97, 112, 255, .4); }
.orb-mini i::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 210deg, transparent, rgba(190, 170, 255, .8), rgba(160, 215, 255, .6), rgba(240, 236, 255, .85), transparent 70%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 70%); mask: radial-gradient(circle, transparent 60%, #000 70%); animation: spin 6s linear infinite; }
.talk .orb-mini i { animation: talk .7s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes talk { to { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(190, 198, 255, .4), 0 0 26px rgba(97, 112, 255, .75); } }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding: calc(var(--top-h) + 48px) 0 70px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(60% 70% at 78% 40%, rgba(110, 125, 255, .13), transparent 70%), radial-gradient(40% 50% at 20% 0%, rgba(45, 60, 154, .06), transparent 70%), linear-gradient(180deg, #fff 0%, #f8f8fb 100%); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(16, 25, 56, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 25, 56, .035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask: radial-gradient(70% 60% at 70% 45%, #000, transparent 75%); mask: radial-gradient(70% 60% at 70% 45%, #000, transparent 75%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: 'top demo' 'cta demo'; grid-template-rows: auto auto; column-gap: clamp(28px, 4.5vw, 70px); align-content: center; align-items: end; min-height: calc(100vh - var(--top-h) - 118px); }
.hero-top { grid-area: top; } .hero-cta { grid-area: cta; align-self: start; } .hero-demo { grid-area: demo; align-self: center; }
.hello { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--pick); padding: 8px 16px 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 6px 20px rgba(45, 60, 154, .08); }
.hero h1 { margin: 22px 0 18px; font-size: clamp(40px, 4.5vw, 68px); letter-spacing: -0.048em; line-height: 1.0; text-wrap: balance; }
.hero .lead { font-size: clamp(16.5px, 1.3vw, 19px); color: var(--ink-2); max-width: 32em; line-height: 1.55; }
.url-cta { position: relative; margin-top: 30px; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 50px rgba(16, 25, 56, .09); max-width: 600px; flex-wrap: wrap; }
.url-in { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; padding-left: 16px; min-width: 0; }
.url-in svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.url-in input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; padding: 10px 0; }
.url-cta .pill { padding: 14px 20px; }
.scan-out { flex: 1 1 100%; margin: 4px 6px 4px; padding: 12px 14px; border-radius: 18px; background: var(--paper); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.scan-out[hidden] { display: none; }
.scan-out.err { background: #fff4e5; color: var(--warn); }
.scan-out b { color: var(--ink); }
.scan-mail { display: flex; gap: 6px; margin-top: 10px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.scan-mail input { flex: 1; min-width: 0; border: 0; outline: none; padding: 0 12px; background: none; }
.scan-mail input.bad { color: #b42318; }
.scan-mail .pill { padding: 9px 16px; font-size: 14px; }
.scan-out .ok { display: flex; gap: 8px; align-items: flex-start; color: var(--ok); font-weight: 600; }
.scan-out .ok svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
/* with the answer open the form is a card, not a stretched pill; the second way under it (owner, 22.10.2026: «Заявку для команды оставь второй ссылкой») */
.url-cta:has(> .scan-out:not([hidden])) { border-radius: 26px; }
.scan-alt { margin: 12px 0 0; font-size: 14px; color: var(--on-dark-3); }
.scan-alt button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.scan-mail input::placeholder { color: var(--ink-3); }
.lnk-try { margin-top: 18px; }
.facts { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts svg { width: 19px; height: 19px; color: var(--pick); flex: none; }

/* the store page mock */
.hero-demo { position: relative; perspective: 1600px; }
.store { position: relative; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 25, 56, .07), 0 50px 120px rgba(16, 25, 56, .16), 0 12px 30px rgba(16, 25, 56, .06); overflow: hidden; height: 600px; transform: rotateY(-5deg) rotateX(2deg); transform-origin: 30% 50%; transition: transform 1s var(--ease); }
.hero-demo:hover .store { transform: none; }
.st-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f3f4f7; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.st-bar i { width: 10px; height: 10px; border-radius: 50%; background: #dfe1e7; }
.st-bar span { margin-left: 12px; padding: 3px 14px; border-radius: 8px; background: #fff; }
.st-head { display: flex; align-items: center; gap: 18px; padding: 16px 20px; }
.st-logo { font-size: 17px; letter-spacing: -0.02em; }
.st-search { flex: 1; padding: 9px 14px; border-radius: 999px; background: var(--paper); font-size: 13px; color: var(--ink-3); }
.st-cart { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); }
.st-cart svg { width: 20px; height: 20px; }
.st-badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--pick); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.st-badge.on { transform: scale(1); }
.st-cats { display: flex; gap: 6px; padding: 0 20px 14px; overflow: hidden; }
.st-cats span { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.st-cats span.on { background: var(--ink); color: #fff; box-shadow: none; }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px; width: 58%; }
.st-tile { display: flex; flex-direction: column; padding: 8px; border-radius: 14px; background: var(--paper); font-size: 11.5px; line-height: 1.3; }
.st-tile .pimg { width: 100%; aspect-ratio: 1.15; object-fit: contain; margin-bottom: 6px; }
.st-tile b { font-size: 11.5px; }
.st-tile small { color: var(--ink-3); }
.wdg { position: absolute; right: 16px; bottom: 16px; top: 132px; width: min(370px, 52%); display: flex; flex-direction: column; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 25, 56, .08), 0 30px 70px rgba(16, 25, 56, .2); overflow: hidden; }
.wdg-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wdg-h > span:not(.orb-mini) { display: flex; flex-direction: column; line-height: 1.25; }
.wdg-h b { font-size: 14px; }
.wdg-h small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.wdg-h time { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; display: inline-block; }
.wdg-log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 14px 14px; overflow: hidden; font-size: 13.5px; line-height: 1.45; }
.wdg-log [data-t]:not(.on), .m-log [data-t]:not(.on) { display: none; }
.wdg-log .on, .m-log .on { animation: msgIn .45s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.fading .wdg-log, .fading .st-drawer, .fading .st-toast, .fading .st-badge, .fading .m-log, .fading .sl-b.new, .fading .stack2 > *, .stack2.fading > *, .fading .cal-b.new, .fading > .cap, .fading > .booked { opacity: 0 !important; transition: opacity .5s; }
.b { max-width: 100%; }
.b-u { align-self: flex-end; max-width: 86%; }
.b-u > p { padding: 8px 13px; border-radius: 16px 16px 5px 16px; background: var(--bubble); }
.b-u p.caret::after, p.caret::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--pick); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.b-p { align-self: flex-start; max-width: 96%; }
.b-p > p { color: var(--ink); }
.b-dots { display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 14px; background: var(--bubble); align-self: flex-start; }
.b-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: bounce 1s infinite; }
.b-dots i:nth-child(2) { animation-delay: .15s; } .b-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 30% { transform: translateY(-4px); } }
.qr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.qr span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); transition: all .3s; }
.qr span svg { width: 15px; height: 15px; }
.qr span.sel, .qr span.on.sel { background: var(--ink); color: #fff; box-shadow: none; }
.qr .cta { color: var(--pick); box-shadow: inset 0 0 0 1.5px var(--pick); }
.added { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ok); }
.added svg { width: 17px; height: 17px; }
.w3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.w3c { position: relative; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 10.5px; line-height: 1.25; }
.w3c.best { box-shadow: inset 0 0 0 2px var(--pick); }
.w3c .pimg { width: 100%; aspect-ratio: 1; object-fit: contain; }
.w3c b { font-size: 10.5px; }
.w3c small { color: var(--ink-3); }
.w3c em { font-style: normal; font-weight: 700; font-size: 11px; }
.w3c:not(.on) { opacity: 0; transform: translateY(6px); }
.w3c.on { opacity: 1; transform: none; transition: all .4s var(--ease); }
.st-drawer { position: absolute; left: 20px; bottom: 16px; width: calc(48% - 30px); padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 25, 56, .08), 0 24px 60px rgba(16, 25, 56, .16); transform: translateY(20px); opacity: 0; transition: all .5s var(--ease); font-size: 13px; }
.st-drawer.on { transform: none; opacity: 1; }
.st-dh { display: flex; align-items: center; gap: 7px; font-weight: 700; margin-bottom: 10px; }
.st-dh svg { width: 17px; height: 17px; }
.st-di { display: flex; align-items: center; gap: 10px; }
.st-di .pimg { width: 46px; height: 46px; object-fit: contain; background: var(--paper); border-radius: 10px; padding: 3px; }
.st-di span { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.st-di small { color: var(--pick); font-size: 11.5px; }
.st-btn { display: block; margin-top: 12px; padding: 10px; border-radius: 12px; text-align: center; font-weight: 700; background: var(--paper); transition: all .3s; }
.st-btn.sel { background: var(--ink); color: #fff; }
.st-toast { position: absolute; left: 50%; top: 70px; transform: translate(-50%, -14px); display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 13px; line-height: 1.3; box-shadow: 0 20px 50px rgba(16, 25, 56, .35); opacity: 0; transition: all .5s var(--ease); white-space: nowrap; z-index: 3; }
.st-toast.on { opacity: 1; transform: translate(-50%, 0); }
.store .st-toast { left: 20px; top: auto; bottom: 20px; transform: translateY(14px); }
.store .st-toast.on { transform: none; }
.st-toast svg { width: 20px; height: 20px; color: #7ee2a8; flex: none; }
.st-toast span { display: flex; flex-direction: column; }
.st-toast small { color: rgba(255, 255, 255, .66); }
/* salon variant */
.sl-body { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 20px; width: 56%; }
.sl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sl-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); font-size: 12.5px; }
.sl-list small { color: var(--ink-3); white-space: nowrap; }
.sl-cal p { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.sl-g { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 20px repeat(5, 26px); gap: 4px; }
.sl-cn { font-size: 11px; font-weight: 700; color: var(--ink-2); text-align: center; }
.sl-b { border-radius: 8px; background: #eceef5; font-size: 10.5px; padding: 3px 7px; color: var(--ink-3); }
.sl-b.new { background: linear-gradient(140deg, #5b69ff, #2d3c9a); color: #fff; display: flex; flex-direction: column; line-height: 1.2; box-shadow: 0 8px 24px rgba(45, 60, 154, .35); opacity: 0; transform: scale(.9); transition: all .5s var(--ease); }
.sl-b.new.on { opacity: 1; transform: none; }
.sl-b.new small { color: rgba(255, 255, 255, .7); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 7px; }
.slots span { display: flex; flex-direction: column; padding: 7px 8px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-2); line-height: 1.2; transition: all .3s; }
.slots b { font-size: 15px; font-variant-numeric: tabular-nums; }
.slots small { font-size: 11px; color: var(--ink-3); }
.slots .sel { background: var(--ink); color: #fff; box-shadow: none; }
.slots .sel small { color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------- fork */
.fork { padding: 40px 0 90px; }
.fork h2 { font-size: clamp(30px, 3.4vw, 46px); text-align: center; letter-spacing: -0.04em; }
.fork-sub { text-align: center; color: var(--ink-2); margin: 12px auto 30px; max-width: 34em; font-size: 16.5px; }
.fork-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 0 auto; }
.fork-c { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px 24px; border: 0; border-radius: 26px; background: var(--paper); text-align: left; box-shadow: inset 0 0 0 1px var(--line); transition: all .35s var(--ease); }
.fork-c:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px rgba(16, 25, 56, .08); transform: translateY(-2px); }
.fork-c[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--pick), 0 24px 60px rgba(45, 60, 154, .14); }
.fork-imgs { display: flex; gap: 4px; margin-bottom: 10px; }
.fork-imgs img { width: 74px; height: 74px; object-fit: contain; border-radius: 16px; background: #fff; padding: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.fork-c b { font-size: 22px; letter-spacing: -0.025em; line-height: 1.15; }
.fork-c > span:not(.fork-imgs) { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.fork-ok { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; transition: all .3s; }
.fork-ok svg { width: 17px; height: 17px; }
.fork-c[aria-pressed="true"] .fork-ok { background: var(--pick); color: #fff; box-shadow: none; }

/* ---------------------------------------------------------------- sections */
.sec { position: relative; padding: clamp(80px, 9vw, 130px) 0; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pick); margin-bottom: 12px; }
.sec h2, .get h2 { font-size: clamp(32px, 3.8vw, 54px); letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.sec-head { max-width: 760px; margin-bottom: 46px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-lead { margin-top: 16px; font-size: 17.5px; color: var(--ink-2); }
.sec-head.center .sec-lead { margin-left: auto; margin-right: auto; max-width: 36em; }
.note { font-size: 12.5px; color: var(--ink-3); margin-top: 14px; }
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* how */
.how { background: var(--paper); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; position: relative; }
.steps > li { position: relative; padding: 18px 18px 24px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.steps > li:nth-child(2) { transition-delay: .12s; } .steps > li:nth-child(3) { transition-delay: .24s; }
.st-v { height: 170px; border-radius: 18px; background: linear-gradient(160deg, #f4f5fb, #eceef8); margin-bottom: 18px; display: grid; place-items: center; overflow: hidden; position: relative; }
.steps h3 { font-size: 21px; letter-spacing: -0.025em; margin: 0 4px 8px; }
.steps p { font-size: 15px; color: var(--ink-2); margin: 0 4px; line-height: 1.5; }
.how-foot { margin-top: 28px; text-align: center; color: var(--ink-2); font-size: 15.5px; }
.how-foot .lnk { margin-left: 8px; }
.sv1 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 86%; }
.sv-src { padding: 8px 12px; border-radius: 12px; background: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(16, 25, 56, .08); }
.sv-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, #c9cde3 0 5px, transparent 5px 9px); }
.sv-line i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pick); animation: flow 1.6s linear infinite; }
@keyframes flow { to { left: calc(100% - 8px); } }
.sv-dst .orb-mini { width: 40px; height: 40px; }
.sv1 ul { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sv1 li, .sv2 span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 4px 12px rgba(16, 25, 56, .06); }
.sv1 li svg, .sv2 svg { width: 15px; height: 15px; color: var(--ok); }
.sv1 li:first-child svg { color: var(--pick); }
.sv2 { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.sv3 { display: flex; flex-direction: column; gap: 7px; width: 84%; font-size: 12.5px; }
.b3 { padding: 8px 12px; border-radius: 14px; max-width: 88%; line-height: 1.35; }
.b3.u { align-self: flex-end; background: #fff; box-shadow: 0 4px 12px rgba(16, 25, 56, .06); }
.b3.p { align-self: flex-start; display: flex; gap: 6px; background: var(--navy); color: #fff; }
.b3.p .pm { width: 14px; height: 14px; margin-top: 2px; color: var(--peri); }
.b3.ch { align-self: center; font-size: 11px; color: var(--ink-3); padding: 0; }
[data-play] [data-t]:not(.on):not(.b) { opacity: 0; transform: translateY(6px); }
[data-play] [data-t].on:not(.b) { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }

/* outcomes */
.get { padding: clamp(80px, 9vw, 130px) 0 40px; }
.gx-scene { position: relative; height: 290vh; margin: 10px 0 0; }
.gx-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: radial-gradient(90% 80% at 68% 50%, #18225e 0%, #0c1233 45%, var(--night) 80%); color: var(--on-dark); --g: 0; }
.gx-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 11, 29, .92) 0%, rgba(7, 11, 29, .7) 30%, transparent 52%); }
.gx-stage .gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-copy { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; pointer-events: none; }
.gx-col { width: min(460px, 38vw); pointer-events: auto; }
.gx-col .kicker { color: var(--peri); }
.gx-col h3 { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.04em; color: #fff; text-wrap: balance; }
.gx-p { margin-top: 14px; color: var(--on-dark-2); font-size: 16px; }
.gx-q { margin-top: 20px; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .18); font-size: 15px; color: #fff; }
.gx-qa { font-size: 11.5px; font-weight: 700; color: var(--peri-2); text-transform: uppercase; letter-spacing: .05em; }
.gx-count { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.gx-n { font-size: clamp(56px, 5.4vw, 90px); font-weight: 600; letter-spacing: -0.05em; line-height: .95; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #fff, #c3c9ff 70%, #9aa6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-mode="svc"] .gx-n { font-size: clamp(44px, 4.2vw, 68px); }
.gx-l { font-size: 15px; color: var(--on-dark-2); max-width: 16em; line-height: 1.35; }
.gx-steps { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: g; }
.gx-steps li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(170, 180, 255, .12); color: var(--on-dark-3); transition: color .4s; font-size: 14.5px; }
.gx-steps li b { min-width: 74px; font-variant-numeric: tabular-nums; font-size: 15px; }
.gx-steps li.on { color: #fff; }
.gx-steps li.on b { color: var(--peri-2); }
.gx-picks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pick { position: absolute; left: 0; top: 0; width: 212px; height: 296px; padding: 12px 12px 14px; border-radius: 22px; background: rgba(255, 255, 255, .97); color: var(--ink); box-shadow: 0 30px 80px rgba(3, 6, 25, .45); opacity: 0; visibility: hidden; transition: box-shadow .5s; }
.pick img { width: 150px; height: 150px; margin: -2px auto 6px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(20, 25, 60, .22)); }
.pk-n { display: block; font-size: 15px; letter-spacing: -0.01em; }
.pk-sp { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 8px; }
.pk-sp i, .wc-s i { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #f1f1f4; color: var(--ink-2); }
.pk-sp i.miss, .wc-s i.miss { background: #fff; color: var(--warn); box-shadow: inset 0 0 0 1px #ecd9a8; }
.pk-pr { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.pick em { position: absolute; top: 12px; left: 12px; font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--pick); padding: 4px 9px; border-radius: 999px; }
.pick.chosen { box-shadow: 0 30px 90px rgba(80, 95, 255, .45), 0 0 0 2px var(--pick) inset; }
.pick-slot { width: 180px; height: 200px; padding: 16px; }
.pk-slot { display: block; margin: 22px 0 12px; }
.pk-slot b { font-size: 42px; letter-spacing: -0.04em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.pick-verdict { position: absolute; left: 0; top: 0; width: min(560px, 90vw); padding: 14px 18px; border-radius: 18px; background: rgba(12, 17, 42, .78); color: var(--on-dark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .18); font-size: 14.5px; line-height: 1.5; opacity: 0; visibility: hidden; }
.v2 { filter: saturate(.9) brightness(.97) hue-rotate(-8deg); }
.v3 { filter: grayscale(.4) brightness(.62) contrast(1.15); }
.pick img.v3, .w3c .v3, .wc img.v3 { filter: grayscale(.4) brightness(.62) contrast(1.15) drop-shadow(0 10px 14px rgba(20, 25, 60, .2)); }
.gx-fallback { display: none; }
html.no-webgl .gx-fallback { display: grid; position: absolute; right: 4vw; top: 50%; transform: translateY(-50%); width: min(560px, 46vw); grid-template-columns: repeat(8, 1fr); gap: 8px; }
.gx-fallback img, .gx-fallback .fb-slot { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: rgba(255, 255, 255, .06); transition: opacity .6s, transform .6s; }
.gx-fallback .fb-slot { background: rgba(195, 201, 255, .5); aspect-ratio: 2.2; align-self: center; }
.gx-fallback .out { opacity: .08; transform: scale(.7); }

.scenes { display: flex; flex-direction: column; gap: clamp(70px, 9vw, 130px); padding: clamp(80px, 9vw, 120px) 0 60px; }
.scene { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.scene.flip .sc-copy { order: 2; }
.sc-copy h3 { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.04em; text-wrap: balance; }
.sc-copy p:not(.sc-n) { margin-top: 16px; font-size: 17.5px; color: var(--ink-2); max-width: 30em; line-height: 1.55; }
.sc-vis { position: relative; display: flex; justify-content: center; }
.sc-vis::before { content: ''; position: absolute; inset: -6% 4%; z-index: -1; border-radius: 40px; background: radial-gradient(60% 60% at 50% 50%, rgba(110, 125, 255, .12), transparent 70%); }
.mock { width: min(440px, 100%); border-radius: 24px; background: #fff; box-shadow: var(--shadow), 0 0 0 1px rgba(16, 25, 56, .06); overflow: hidden; font-size: 14px; line-height: 1.5; }
.m-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.m-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.m-t b { font-size: 14px; }
.m-t small { font-size: 11.5px; color: var(--ink-3); }
.m-tag { margin-left: auto; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--paper); color: var(--ink-2); white-space: nowrap; }
.m-log { display: flex; flex-direction: column; gap: 9px; padding: 14px 15px 16px; min-height: 120px; }
.b-img { display: flex; flex-direction: column; align-items: flex-end; width: 92%; max-width: 92%; } /* a set width: the photo is as wide before it loads as after */
.b-img > p { padding: 8px 13px; border-radius: 16px 16px 5px 16px; background: var(--bubble); }
.ph { position: relative; margin: 0 0 6px; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: #222; width: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph .scan { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(154, 166, 255, .35) 85%, rgba(220, 225, 255, .9)); }
.ph .scan.on { animation: scan 1.4s var(--ease) infinite; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
.hit { position: absolute; left: 15%; top: 36%; width: 62%; height: 18%; border-radius: 10px; box-shadow: 0 0 0 2px #c3c9ff, 0 0 30px rgba(154, 166, 255, .65); }
.hit b { position: absolute; left: 0; bottom: calc(100% + 6px); font-size: 12px; padding: 3px 9px; border-radius: 8px; background: #fff; color: var(--pick); white-space: nowrap; }
.pc { display: flex; align-items: center; gap: 10px; padding: 7px 11px 7px 7px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); margin-top: 8px; }
.pc .pimg { width: 46px; height: 46px; object-fit: contain; background: var(--paper); border-radius: 10px; padding: 3px; flex: none; }
.pc > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pc > span b { font-size: 13.5px; }
.pc > span small { font-size: 11.5px; color: var(--ink-3); }
.pc-pr { margin-left: auto; font-size: 14px; text-align: right; white-space: nowrap; line-height: 1.2; }
.pc-pr small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 500; }
.stack2 { position: relative; display: flex; flex-direction: column; gap: 12px; width: min(460px, 100%); }
.stack2 > .mock:nth-child(2) { margin-left: 40px; width: calc(100% - 40px); }
.call { padding: 16px 18px; background: var(--navy); color: var(--on-dark); }
.call-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--peri-2); }
.call-h svg { width: 16px; height: 16px; flex: none; }
.wave { display: flex; align-items: center; gap: 3px; height: 22px; margin-left: auto; width: 90px; }
.wave i { flex: 1; height: 30%; border-radius: 3px; background: linear-gradient(180deg, #c3c9ff, #6b78e6); animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: -.3s; } .wave i:nth-child(3n+1) { animation-delay: -.6s; } .wave i:nth-child(4n) { animation-duration: .9s; }
@keyframes wave { 50% { height: 100%; } }
.cap { font-size: 13.5px; color: var(--on-dark-2); margin-top: 9px; line-height: 1.45; }
.cap b { display: inline-block; min-width: 70px; color: var(--peri-2); margin-right: 6px; font-size: 12px; }
.cap.u b { color: #fff; }
.booked { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; color: #8ff0b6; font-size: 13.5px; }
.booked svg { width: 17px; height: 17px; }
.m-cal { padding: 4px 4px 12px; }
.cal-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.cal-h svg { width: 19px; height: 19px; color: var(--pick); }
.cal-h span { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.cal-g { display: grid; grid-template-columns: 44px repeat(3, 1fr); grid-template-rows: 24px repeat(var(--rows), 30px); gap: 3px; padding: 0 12px; }
.cal-cn { font-size: 12px; font-weight: 700; text-align: center; color: var(--ink-2); align-self: center; }
.cal-r { grid-column: 1; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cal-b { border-radius: 9px; padding: 4px 8px; background: #eef0f6; font-size: 11.5px; line-height: 1.2; overflow: hidden; display: flex; flex-direction: column; color: var(--ink-2); }
.cal-b b { font-size: 12px; }
.cal-b.new { background: linear-gradient(140deg, #5b69ff, #2d3c9a); color: #fff; box-shadow: 0 8px 24px rgba(45, 60, 154, .35); }
.cal-b.new small { color: #dfe3ff; font-size: 10.5px; }
.m-tg { background: #dfe6ee; }
.tg-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e4e7ec; }
.tg-back { font-size: 26px; line-height: 1; color: #3b82c4; }
.tg-body { padding: 14px; }
.tg-msg { position: relative; padding: 12px 14px 22px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); font-size: 13.5px; }
.tg-t { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.tg-k { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tg-k span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: #f3f5f8; line-height: 1.3; }
.tg-k b { font-size: 17px; letter-spacing: -0.02em; color: var(--pick); }
.tg-k small { font-size: 11.5px; color: #6b7480; }
.tg-s { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8b95a1; margin: 6px 0 4px; }
.tg-q { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.tg-q li { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #eef1fb; color: #23307f; }
.tg-gap { display: flex; gap: 8px; margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
.tg-gap svg, .gaps svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #b07a10; }
.tg-time { position: absolute; right: 10px; bottom: 6px; font-size: 11px; color: #6dbf74; }
.gaps > span { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; }
/* the channel orbit */
.orbit { position: relative; width: min(520px, 100%); aspect-ratio: 1.1; }
.orbit-gl, .orbit-gl .gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-sats { position: absolute; inset: 0; pointer-events: none; }
.sat { position: absolute; left: 0; top: 0; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgba(16, 25, 56, .1); transition: opacity .3s; }
.sat::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--pick); vertical-align: 1px; }
html.no-webgl .orbit-gl::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 4%, #e7e9ff 14%, transparent 34%), radial-gradient(circle at 50% 56%, #c9cfff 0%, #8a96f5 46%, #4b58c9 80%); box-shadow: 0 0 60px rgba(110, 125, 255, .35); }

/* ---------------------------------------------------------------- try */
.try { background: var(--paper); }
.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(32px, 6vw, 90px); align-items: start; }
.flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 30px 0 10px; }
.flows button { min-width: 0; }
.flows button { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; border: 0; background: #fff; text-align: left; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, transform .25s var(--ease); }
.flows button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 30px rgba(20, 25, 60, .06); }
.flows button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--pick), 0 10px 30px rgba(45, 60, 154, .1); }
.flows img { width: 50px; height: 50px; object-fit: contain; flex: none; border-radius: 12px; background: var(--paper); padding: 3px; }
.flows span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.flows b { font-size: 14.5px; }
.flows small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget { position: sticky; top: 88px; height: min(680px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 120px rgba(25, 32, 80, .14); overflow: hidden; }
.w-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.orb-w { width: 36px; height: 36px; }
.w-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.w-who b { font-size: 15px; }
.w-who small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.w-funnel { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.w-funnel i { font-style: normal; opacity: .5; }
.w-funnel span { padding: 3px 7px; border-radius: 8px; transition: all .4s; }
.w-funnel span.was { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.w-funnel span.on { background: var(--pick); color: #fff; }
.w-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; overscroll-behavior: contain; }
.w-log .b { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.w-log .b.in { opacity: 1; transform: none; }
.w-log .b-p > p { font-size: 14.5px; }
.b-who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pick); margin-bottom: 4px; }
.b-who .pm { width: 14px; height: 14px; }
.cr { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cr span { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--pick-soft); color: var(--pick); }
.wcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.wc { position: relative; display: flex; flex-direction: column; padding: 8px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; line-height: 1.3; }
.wc.best { box-shadow: inset 0 0 0 2px var(--pick); }
.wc em { position: absolute; top: 6px; left: 6px; z-index: 1; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--pick); padding: 2px 7px; border-radius: 999px; }
.wc img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 4px; }
.wc b { font-size: 12.5px; }
.wc-p { font-weight: 700; font-size: 13px; margin: 2px 0 4px; }
.wc-p small { font-weight: 500; color: var(--ink-3); font-size: 10.5px; }
.wc-s { display: flex; flex-wrap: wrap; gap: 3px; }
.wc-s i { font-size: 10.5px; padding: 2px 6px; }
.unk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--warn); margin-top: 8px; }
.unk svg { width: 14px; height: 14px; }
.w-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 10px; min-height: 48px; }
.qr-b { border: 0; padding: 9px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; font-weight: 600; transition: all .2s; animation: pop .4s var(--ease) both; }
.qr-b.hint { box-shadow: inset 0 0 0 1.5px var(--pick); color: var(--pick); }
.qr-b:hover { background: var(--ink); color: #fff; box-shadow: none; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.w-comp { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.w-comp input { flex: 1; min-width: 0; border: 0; padding: 12px 16px; border-radius: 999px; background: var(--paper); outline: none; font-size: 14.5px; }
.w-comp input:focus { box-shadow: inset 0 0 0 1.5px var(--pick); }
.w-comp button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.w-comp button svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- what else */
.top6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cap6 { padding: 24px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.cap6:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px rgba(16, 25, 56, .07); }
.top6 > *:nth-child(3n+2) { transition-delay: .08s; } .top6 > *:nth-child(3n) { transition-delay: .16s; }
.cap6 h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 6px; }
.cap6 p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.all-caps { margin-top: 18px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line); }
.all-caps summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; cursor: pointer; font-weight: 700; font-size: 15.5px; }
.all-caps summary::-webkit-details-marker { display: none; }
.all-caps summary svg { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.all-caps[open] summary svg { transform: rotate(180deg); }
.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 26px; padding: 6px 26px 26px; }
.caps-g h4 { font-size: 15px; letter-spacing: -0.01em; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); margin-bottom: 4px; }
.caps-g h4 small { color: var(--pick); font-weight: 700; margin-left: 4px; }
.caps-g ul { list-style: none; margin: 0; padding: 0; }
.caps-g li { display: flex; flex-direction: column; padding: 9px 0; border-bottom: 1px solid var(--line); line-height: 1.35; }
.caps-g li b { font-size: 13.5px; font-weight: 600; }
.caps-g li span { font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- integrations */
.integ { background: var(--paper); }
.integ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.integ-grid[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.integ-c { padding: 22px 22px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.integ-h { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.integ-c ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.integ-c li { padding: 6px 11px; border-radius: 10px; background: var(--paper); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.integ-note { grid-column: 1 / -1; text-align: center; font-size: 14.5px; color: var(--ink-2); margin-top: 8px; }

/* ---------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; padding: 28px 28px 26px; border-radius: 28px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.plan.cur { background: #fff; box-shadow: inset 0 0 0 2px var(--pick), 0 30px 80px rgba(45, 60, 154, .12); }
.plan-for { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.plan h3 { font-size: 28px; letter-spacing: -0.035em; margin: 4px 0 12px; }
.plan-from { font-size: 16px; color: var(--ink-2); }
.plan-from b { font-size: 42px; letter-spacing: -0.045em; color: var(--ink); font-weight: 600; }
.plan-l { list-style: none; margin: 18px 0 14px; padding: 0; }
.plan-l li { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.plan-l li b { font-variant-numeric: tabular-nums; }
.plan-l li span small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 1px; }
.plan.cur .plan-l li span small { color: var(--on-dark-3); }
.plan-cr { grid-column: 1 / -1; max-width: 760px; margin: 2px auto 0; text-align: center; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.plan-inc { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ok); }
.plan-inc svg { width: 17px; height: 17px; }
.plan-x { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 20px; line-height: 1.5; flex: 1; }
.plan .pill { align-self: flex-start; }
.plan-ent { grid-column: 1 / -1; text-align: center; font-size: 15px; color: var(--ink-2); margin-top: 10px; }
.plan-ent .lnk { margin-left: 6px; }
.calc { max-width: 1120px; margin: 30px auto 0; border-radius: 28px; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.calc > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; cursor: pointer; font-weight: 700; font-size: 15.5px; text-align: center; }
.calc > summary::-webkit-details-marker { display: none; }
.calc > summary svg { width: 20px; height: 20px; flex: none; transition: transform .35s var(--ease); }
.calc[open] > summary svg { transform: rotate(180deg); }
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 48px); align-items: start; padding: 10px clamp(18px, 3vw, 34px) 34px; }
.talk-out { margin-left: auto; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--pick); font-variant-numeric: tabular-nums; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.tiers button, .chips button { border: 0; text-align: left; padding: 12px 14px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 2px; transition: all .25s var(--ease); line-height: 1.25; }
.tiers button b { font-size: 15px; }
.tiers button small, .chips button small { font-size: 12.5px; color: var(--ink-3); }
.tiers button[aria-checked="true"], .chips button[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.tiers button[aria-checked="true"] small, .chips button[aria-checked="true"] small { color: rgba(255, 255, 255, .7); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 10px 15px; font-size: 14px; font-weight: 600; }
.range { position: relative; padding: 6px 0 26px; }
.range input { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--pick) var(--v, 47%), #e7e8ef var(--v, 47%)); outline: none; }
.range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--pick), 0 6px 16px rgba(45, 60, 154, .3); cursor: grab; }
.range input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--pick); cursor: grab; }
.range-marks { position: absolute; left: 13px; right: 13px; top: 24px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.range-marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cfg-r { position: sticky; top: 90px; }
.bill { padding: 26px 24px 22px; border-radius: 26px; background: radial-gradient(120% 100% at 100% 0%, #24307a 0%, #101938 55%, #0a1030 100%); color: var(--on-dark); box-shadow: 0 40px 100px rgba(16, 25, 56, .3); transition: transform .26s var(--ease); }
.bill-k { font-size: 13px; font-weight: 700; color: var(--on-dark-3); letter-spacing: .04em; text-transform: uppercase; }
.bill-sum { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.sum-m { font-size: 56px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.bill-once { font-size: 14px; color: var(--on-dark-2); }
.bill-l { list-style: none; margin: 18px 0 12px; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 9px; }
.bill-l li { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; line-height: 1.3; }
.bill-l li span { display: flex; flex-direction: column; color: var(--on-dark-2); }
.bill-l li small { font-size: 11.5px; color: var(--on-dark-3); }
.bill-l li b { white-space: nowrap; text-align: right; font-weight: 600; }
.bill-n { font-size: 11.5px; color: var(--on-dark-3); line-height: 1.5; }
.bill-go { display: flex; gap: 6px; margin-top: 16px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.bill-go input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: #fff; padding: 0 12px; font-size: 14px; }
.bill-go input::placeholder { color: var(--on-dark-3); }
.bill-go .pill { background: #fff; color: var(--ink); padding: 11px 16px; font-size: 14px; }
.bill-ok { margin-top: 12px; font-size: 13px; color: #c8f3da; line-height: 1.45; }
.bill-ok.err { color: #ffd1a6; }
.bill-ok[hidden] { display: none; }
/* the configurator (js/configurator.js) on the main page's #calc and on /configurator/: questions on the left, «Ваш Plugix» on the right
   (moved here from css/crm.css with it, 23.10.2026); #cfg where css/crm.css's own .tiers and list rules come later on /configurator/ */
/* a question */
.q { padding: 34px 0; border-top: 1px solid var(--line); }
.q:first-child { padding-top: 0; border-top: 0; }
#cfg .q-h { margin: 0 0 18px; font-size: clamp(22px, 2vw, 26px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.q-f + .q-f, .q > .tiers + .q-f, .q-f + .q-more, .q-more + .q-f { margin-top: 26px; }
.q-label { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.q-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.q-note:empty, .q-note:has(> span:empty:only-child) { display: none; }
.q-text { max-width: 40em; font-size: 15.5px; color: var(--ink-2); }
/* cards to pick from: a title, a line, a price */
#cfg .tiers button b { color: inherit; } /* a sheet's <b> is ink: on a picked (dark) card it follows the card */
#cfg .tiers button { padding: 14px 16px; }
#cfg .tiers button small { font-size: 13px; line-height: 1.4; }
#cfg .q-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#cfg .q-dir, #cfg .q-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#cfg .q-cap { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; }
.q-cap button { padding: 10px 12px !important; }
.q-price { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--pick); font-variant-numeric: tabular-nums; }
.tiers button[aria-checked="true"] .q-price { color: var(--peri-2); }
.tiers button:disabled { opacity: .4; cursor: not-allowed; }
.chips button[role="checkbox"][aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
/* steppers */
.stp-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 420px; padding: 6px 0; font-size: 15px; }
.stp { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.stp button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; line-height: 1; }
.stp button:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.stp output { min-width: 3.2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* «Що вже входить» */
.cfg-base { margin-top: 14px; }
.cfg-base summary, .pk summary, .q-more summary { list-style: none; cursor: pointer; }
.cfg-base summary::-webkit-details-marker, .pk summary::-webkit-details-marker, .q-more summary::-webkit-details-marker { display: none; }
.cfg-base summary, .pk summary { width: max-content; font-size: 13.5px; font-weight: 700; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.cfg-base summary:hover, .pk summary:hover { color: var(--ink); }
.cfg-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 32px; margin-top: 14px; }
#cfg .cfg-groups h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; letter-spacing: 0; }
#cfg .cfg-base ul, #cfg .pk ul { margin: 0; padding: 0 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
#cfg .cfg-base li, #cfg .pk li { margin-bottom: 4px; }
/* packages: rows, not cards */
.pk-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pk { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pk-h { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; cursor: pointer; }
.pk-h input { position: absolute; opacity: 0; pointer-events: none; }
.pk .ck { width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; transition: background .2s, box-shadow .2s; }
.pk .ck svg { width: 14px; height: 14px; }
.pk-h:hover .ck { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pk input:checked + .ck { background: var(--pick); box-shadow: none; color: #fff; }
.pk input:disabled + .ck { background: var(--ink-3); }
.pk input:focus-visible + .ck { outline: 2px solid var(--pick); outline-offset: 2px; }
.pk-h:has(input:disabled) { cursor: default; }
.pk-x b { display: block; font-size: 15px; font-weight: 700; }
.pk-x small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.pk-p { font-size: 14.5px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-p small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--warn); }
.pk:has(input:disabled:checked) .pk-p { color: var(--ink-3); }
.pk details { padding: 8px 0 0 34px; }
#cfg .pk details ul { margin-top: 8px; }
.q-more { margin-top: 22px; }
.q-more summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.q-more summary span { padding: 1px 8px; border-radius: 999px; font-size: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.q-more[open] summary { margin-bottom: 14px; }
#cfg .lnk { border: 0; padding: 0; background: none; font-weight: 700; color: var(--pick); text-decoration: underline; text-underline-offset: 3px; }
/* «Ваш Plugix» */
.cfg-r .bill-k { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: #fff; }
.cfg-r .bill-sum { align-items: baseline; margin: 10px 0 2px; }
.cfg-r .bill-sum b { font-size: clamp(34px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
#cfg-unit { font-size: 15px; color: var(--on-dark-2); }
.cfg-r .bill-once:empty, .cfg-r .bill-n:empty { display: none; }
.cfg-r .bill-n + .bill-n { margin-top: 6px; }
.cfg-r .bill-l li b { font-variant-numeric: tabular-nums; }
.bill-lbl { display: block; margin: 16px 0 8px; font-size: 13px; color: var(--on-dark-2); }
/* «Підключити» (CRM_START=on): the bill's first way; the request form under it turns quiet, and is the way alone when #cfg-why says the team connects it */
.cfg-start { display: flex; width: 100%; margin-top: 18px; background: #fff; color: var(--ink); }
.cfg-start[hidden] { display: none; }
.cfg-r .cfg-why { margin-top: 14px; font-size: 13px; color: var(--on-dark-2); }
.bill-start .bill-go .pill { background: none; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.cfg-r .bill-go { margin-top: 0; }
.bill-next { margin: 16px 0 0; padding: 14px 0 0 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; line-height: 1.55; color: var(--on-dark-2); }
.bill-next li + li { margin-top: 4px; }
.cfg-bar { display: none; }
.cfg-bar[hidden] { display: none; }
@media (max-width: 1000px) {
  .cfg-bar { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: rgba(7, 9, 20, .94); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .cfg-bar .pill { padding: 10px 16px; }
  body:has(.cfg-bar) .foot { padding-bottom: 80px; }
  html.cfg-bar-on .pxa-launch { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); } /* the main page's assistant button rides above the bar */
}
.pk-off .pk-h { cursor: default; } .pk-off .ck { visibility: hidden; } .pk-off .pk-p { color: var(--ink-3); } /* not sold here: AI telephony in € */
@media (max-width: 720px) {
  #cfg .q-two, #cfg .q-dir, #cfg .q-three { grid-template-columns: 1fr; }
  #cfg .q-cap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 6vw, 90px); align-items: start; }
.faq-l details { border-top: 1px solid var(--line-2); }
.faq-l details:last-child { border-bottom: 1px solid var(--line-2); }
.faq-l summary { list-style: none; display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 22px 0; cursor: pointer; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.faq-l summary::-webkit-details-marker { display: none; }
.faq-l summary svg { width: 22px; height: 22px; flex: none; transition: transform .35s var(--ease); color: var(--ink-3); }
.faq-l details[open] summary svg { transform: rotate(180deg); color: var(--pick); }
.faq-l details p { padding: 0 0 24px; color: var(--ink-2); max-width: 40em; font-size: 16px; }

/* ---------------------------------------------------------------- final CTA (navy moment #2) */
.start { position: relative; overflow: hidden; padding: clamp(100px, 12vw, 170px) 0; background: radial-gradient(80% 90% at 75% 50%, #1a2462 0%, #0d1335 50%, var(--night) 85%); color: var(--on-dark); }
.start-inner { position: relative; z-index: 2; max-width: 660px; margin-left: max(var(--gut), calc((100% - 1220px) / 2)); }
.start h2 { font-size: clamp(32px, 3.8vw, 54px); letter-spacing: -0.045em; color: #fff; text-wrap: balance; }
.url-cta-dark { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 60px rgba(0, 0, 0, .25); }
.url-cta-dark input { color: #fff; }
.url-cta-dark .scan-mail input { color: var(--ink); }
.url-cta-dark .url-in input::placeholder { color: var(--on-dark-3); }
.url-cta-dark .url-in svg { color: var(--on-dark-3); }
.url-cta-dark .pill { background: #fff; color: var(--ink); }
.url-cta-dark .scan-out { background: rgba(255, 255, 255, .08); color: var(--on-dark-2); }
.url-cta-dark .scan-out b { color: #fff; }
.url-cta-dark .scan-out .ok { color: #8ff0b6; }
.start-sub { margin-top: 18px; color: var(--on-dark-2); font-size: 15.5px; }
.hello .dot { width: 8px; height: 8px; animation: livePulse 2.2s ease-in-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(63, 191, 122, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(63, 191, 122, 0); } }

/* closing preview: «your site + Plugix» (the address bar mirrors what the visitor types) */
.start-prev { position: absolute; z-index: 1; top: 50%; right: max(var(--gut), calc((100% - 1220px) / 2)); width: min(470px, 36vw); transform: translateY(-50%); border-radius: 18px; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.sp-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f3f4f8; border-bottom: 1px solid var(--line); }
.sp-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #d5d8e2; }
.sp-url { display: flex; align-items: center; gap: 7px; margin-left: 10px; flex: 1; min-width: 0; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.sp-url svg { width: 13px; height: 13px; flex: none; }
.sp-host { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-body { position: relative; height: 330px; padding: 18px; background: linear-gradient(#fff, #f7f8fc); }
.sp-sk { display: grid; gap: 12px; opacity: .9; }
.sp-sk span, .sp-sk i { display: block; border-radius: 10px; background: #eceef5; }
.sk-logo { width: 34%; height: 16px; }
.sk-nav { width: 70%; height: 10px; }
.sk-hero { height: 92px; background: linear-gradient(120deg, #e8eaf4, #f1f2f8) !important; }
.sk-row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px; background: none !important; }
.sk-row i { height: 74px; }
.sp-chat { position: absolute; right: 14px; bottom: 14px; width: min(300px, calc(100% - 28px)); padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(16, 25, 56, .18), 0 0 0 1px var(--line); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .6s var(--ease) .35s, transform .6s var(--ease) .35s; }
.start-prev.in .sp-chat { opacity: 1; transform: none; }
.sp-head { display: flex; align-items: center; gap: 10px; }
.sp-head .orb-mini { width: 32px; height: 32px; }
.sp-who { display: flex; flex-direction: column; line-height: 1.2; }
.sp-who b { font-size: 14.5px; }
.sp-who small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.sp-msg { margin-top: 12px; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #f3f4f8; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.sp-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-quick span { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--pick); box-shadow: inset 0 0 0 1px #c9cdf0; }
@media (max-width: 1180px) {
  .start { display: flex; flex-direction: column; }
  .start-prev { order: 2; position: relative; top: auto; right: auto; transform: none; width: auto; max-width: 520px; margin: 44px var(--gut) 0; }
  .start-inner { margin-right: var(--gut); }
}
@media (max-width: 760px) { .sp-body { height: 290px; padding: 14px; } .sk-hero { height: 70px; } .sk-row i { height: 58px; } }

/* footer */
.foot { background: #fff; border-top: 1px solid var(--line); padding: 44px 0 70px; }
.foot-grid { display: grid; gap: 10px; }
.foot .brand { font-size: 20px; }
.foot-claim { font-size: 15px; font-weight: 600; }
.foot-small { font-size: 12.5px; color: var(--ink-3); max-width: 60em; }
.foot-small a { color: var(--ink-2); }
.foot-legal { font-size: 11px; }
.cfg > *, .try-grid > *, .faq-grid > *, .hero-grid > *, .scene > * { min-width: 0; }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1100px) {
  .nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: 'top' 'demo' 'cta'; min-height: 0; row-gap: 26px; }
  .store { transform: none; }
  .try-grid, .cfg, .faq-grid { grid-template-columns: 1fr; }
  .widget { position: relative; top: 0; height: 640px; }
  .cfg-r { position: relative; top: 0; }
  .top6 { grid-template-columns: 1fr 1fr; }
  .integ-grid, .integ-grid[data-n="3"] { grid-template-columns: 1fr 1fr; }
  .caps { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- mobile (390) */
@media (max-width: 760px) {
  :root { --top-h: 56px; --gut: 16px; }
  .top { gap: 10px; }
  .brand { font-size: 17px; } .brand .pm { width: 24px; height: 24px; }
  .pill-top { padding: 8px 13px; font-size: 13px; }
  .lng button { padding: 4px 8px; font-size: 11.5px; }
  .tact { gap: 8px; }
  .hide-m { display: none; }
  .concept { left: 50%; transform: translateX(-50%); bottom: 8px; font-size: 10.5px; padding: 4px 9px 4px 8px; white-space: nowrap; }
  .hero { padding: calc(var(--top-h) + 22px) 0 40px; }
  .hero h1 { font-size: clamp(34px, 9.4vw, 42px); margin: 16px 0 12px; }
  .hero .lead { font-size: 15.5px; }
  .url-cta { border-radius: 22px; flex-direction: column; align-items: stretch; margin-top: 22px; }
  .url-in { padding: 4px 6px 4px 12px; flex: none; }
  .url-cta .pill { white-space: normal; text-align: center; }
  .facts { flex-direction: column; gap: 9px; margin-top: 22px; padding-top: 18px; font-size: 13.5px; }
  .store { height: 430px; border-radius: 18px; }
  .url-cta { margin-top: 0; }
  .hero .lead { font-size: 15px; }
  .st-head { padding: 12px 14px; gap: 10px; } .st-search { font-size: 11.5px; padding: 7px 10px; }
  .st-cats { display: none; }
  .st-grid, .sl-body { display: none; }
  .wdg { left: 10px; right: 10px; top: 112px; bottom: 10px; width: auto; }
  .st-drawer { left: 10px; right: 10px; width: auto; bottom: 10px; z-index: 4; }
  .store .st-toast { left: 12px; right: 12px; top: 58px; bottom: auto; font-size: 12px; white-space: normal; width: auto; transform: translateY(-10px); }
  .st-toast.on, .store .st-toast.on { transform: none; }
  .fork { padding: 20px 0 64px; }
  .fork-cards { grid-template-columns: 1fr; gap: 10px; }
  .fork-c { padding: 18px; }
  .fork-imgs img { width: 56px; height: 56px; }
  .fork-c b { font-size: 19px; }
  .fork-c > span:not(.fork-imgs) { font-size: 14px; }
  .sec { padding: 70px 0; }
  .sec h2, .get h2 { font-size: 32px; }
  .sec-head { margin-bottom: 30px; }
  .sec-lead { font-size: 16px; }
  .steps { grid-template-columns: 1fr; }
  .st-v { height: 150px; }
  .gx-scene { height: 260vh; }
  .gx-stage::before { background: linear-gradient(180deg, rgba(7, 11, 29, .94) 0%, rgba(7, 11, 29, .78) 34%, transparent 55%); }
  .gx-copy { align-items: flex-start; padding-top: calc(var(--top-h) + 12px); }
  .gx-col { width: 100%; }
  .gx-col .kicker { margin-bottom: 6px; }
  .gx-col h3 { font-size: 25px; }
  .gx-p, .gx-steps { display: none; }
  .gx-q { margin-top: 10px; font-size: 13.5px; padding: 7px 12px; }
  .gx-count { margin-top: 10px; gap: 10px; }
  .gx-n { font-size: 50px; }
  html[data-mode="svc"] .gx-n { font-size: 38px; }
  .gx-l { font-size: 13.5px; }
  .pick { width: 112px; height: 152px; padding: 8px; border-radius: 16px; }
  .pick img { width: 84px; height: 84px; }
  .pick .pk-n { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pk-sp { display: none; } .pk-pr { font-size: 13px; }
  .pick em { top: 6px; left: 6px; font-size: 10px; padding: 2px 7px; }
  .pick-slot { width: 104px; height: 128px; padding: 10px; } .pk-slot b { font-size: 26px; } .pk-slot { margin: 18px 0 8px; }
  .pick-verdict { font-size: 13px; padding: 11px 13px; width: calc(100vw - 32px); }
  html.no-webgl .gx-fallback { right: 16px; left: 16px; width: auto; top: auto; bottom: 30px; transform: none; grid-template-columns: repeat(8, 1fr); gap: 5px; }
  .scenes { gap: 70px; padding: 70px 0 40px; }
  .scene { grid-template-columns: 1fr; gap: 26px; }
  .scene.flip .sc-copy { order: 0; }
  .sc-copy h3 { font-size: 28px; }
  .sc-copy p:not(.sc-n) { font-size: 16px; }
  .stack2 > .mock:nth-child(2) { margin-left: 16px; width: calc(100% - 16px); }
  .flows { grid-template-columns: minmax(0, 1fr); }
  .widget { height: 600px; border-radius: 24px; }
  .top6 { grid-template-columns: 1fr; gap: 10px; }
  .cap6 { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; padding: 18px; }
  .cap6 h3 { font-size: 17px; }
  .caps { grid-template-columns: 1fr; padding: 4px 18px 20px; }
  .caps-g + .caps-g { margin-top: 18px; }
  .integ-grid, .integ-grid[data-n="3"] { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 22px; }
  .plan-from b { font-size: 36px; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .sum-m { font-size: 46px; }
  .start { padding: 80px 0 70px; }
  .start h2 { font-size: 30px; }
  .sat { font-size: 11.5px; padding: 5px 10px; }
  .orbit { aspect-ratio: 1; }
}

/* reduced motion: no ambient animation */
html.reduced *, html.reduced *::before, html.reduced *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }

/* ================================================================ v3: signature «train once, sell everywhere» */
.every { background: #fff; }
.ask-bar { max-width: 980px; margin: 0 auto 26px; text-align: center; }
.ask-l { font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.ask-qs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ask-q { border: 0; padding: 11px 18px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 600; color: var(--ink-2); transition: all .25s var(--ease); }
.ask-q:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.ask-q[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.ask-own { display: flex; gap: 6px; max-width: 560px; margin: 14px auto 0; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.ask-own input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 0 14px; font-size: 15px; }
.ask-own .pill { padding: 11px 18px; font-size: 14px; }
.ask-note { max-width: 560px; margin: 10px auto 0; font-size: 13.5px; color: var(--ink-2); }
.ask-note[hidden] { display: none; }
.pane-tabs { display: none; }
.pane-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pane-col { display: grid; gap: 14px; grid-template-rows: auto auto; }
.pane { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(16, 25, 56, .07); overflow: hidden; font-size: 13.5px; line-height: 1.45; }
.hero-pane { box-shadow: 0 0 0 2px var(--pick), 0 30px 80px rgba(45, 60, 154, .16); }
.pn-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.pn-t { display: flex; flex-direction: column; line-height: 1.2; }
.pn-t b { font-size: 13.5px; } .pn-t small { font-size: 11px; color: var(--ink-3); }
.pn-h .orb-mini { width: 26px; height: 26px; }
.pn-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; }
.pn-ic svg { width: 14px; height: 14px; }
.gpt-ico { width: 26px; height: 26px; border-radius: 8px; background: #0d0d0d; position: relative; }
.gpt-ico::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid #fff; }
.pn-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; min-height: 0; }
.pane [data-t]:not(.on) { display: none; }
.pane [data-t].on { animation: msgIn .45s var(--ease) both; }
.pn-h.tg { background: #f4f7fa; }
.pn-h.gpt { background: #fafafa; }
.gpt-u { align-self: flex-end; max-width: 92%; padding: 9px 13px; border-radius: 18px; background: #f0f0f2; color: #0d0d0d; }
.gpt-tag { font-weight: 700; color: var(--pick); }
.gpt-src { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6e6e76; }
.gpt-src svg { width: 14px; height: 14px; }
.gpt-a { color: #0d0d0d; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 14px; box-shadow: inset 0 0 0 1px #e6e6ea; background: #fff; font-size: 11.5px; line-height: 1.25; }
.pcard.best { box-shadow: inset 0 0 0 2px var(--pick); }
.pcard em { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--pick); padding: 2px 7px; border-radius: 999px; }
.pcard .pimg { width: 100%; aspect-ratio: 1.1; object-fit: contain; }
.pcard b { font-size: 12px; }
.pc-sp { display: flex; flex-wrap: wrap; gap: 3px; }
.pc-sp i { font-style: normal; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: #f1f1f4; color: var(--ink-2); }
.pc-sp i.miss { background: #fff; color: var(--warn); box-shadow: inset 0 0 0 1px #ecd9a8; }
.pc-p { font-weight: 700; font-size: 12.5px; }
.pc-p small { font-weight: 500; font-size: 10px; color: var(--ink-3); }
.buy { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px; border-radius: 999px; background: #0d0d0d; color: #fff; font-size: 11.5px; font-weight: 700; }
.buy svg { width: 13px; height: 13px; }
.pcards.mini .pc-sp { display: none; }
.pn-a { color: var(--ink); }
.pn-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--pick); color: var(--pick); font-weight: 700; font-size: 12.5px; }
.pn-cta svg { width: 14px; height: 14px; }
.pn-fine { padding: 0 14px 12px; font-size: 11px; color: var(--ink-3); }
.pane-tg .pn-body { background: #dfe6ee; }
.tgb { max-width: 92%; padding: 8px 11px; border-radius: 14px; font-size: 12.5px; position: relative; }
.tgb.u { align-self: flex-end; background: #e3fcd4; }
.tgb.p { align-self: flex-start; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); padding-bottom: 18px; }
.tgb ol { margin: 6px 0 0; padding-left: 18px; }
.tgb li.best b { color: var(--pick); }
.tgb .tg-time { position: absolute; right: 8px; bottom: 4px; font-size: 10px; color: #8b95a1; }
.tg-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 92%; }
.tg-kb span { text-align: center; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; color: #3b82c4; }
.pane-call { background: var(--navy); color: var(--on-dark); box-shadow: 0 20px 60px rgba(16, 25, 56, .2); }
.pane-call.hero-pane { box-shadow: 0 0 0 2px var(--peri), 0 30px 80px rgba(16, 25, 56, .3); }
.pane-call .pn-h { border-color: rgba(255, 255, 255, .1); }
.pane-call .pn-t small { color: var(--on-dark-3); }
.pane-call .pn-ic { background: #fff; color: var(--navy); }
.pane-call .wave { width: 100%; height: 34px; margin: 0 0 4px; }
.pane-call .cap { margin-top: 2px; }
.pane-call .slots span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.pane-ig .pn-h { background: #fbfbfd; }
.pane .slots { margin-top: 0; }
.owner-beat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; max-width: 1000px; margin: 46px auto 0; padding: 28px 30px; border-radius: 28px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ob-k { font-size: 15px; font-weight: 700; color: var(--pick); margin-bottom: 8px; }
.ob-copy h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.15; }
.ob-card { position: relative; padding: 16px 18px 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgba(16, 25, 56, .08); }
.ob-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ob-h span { display: flex; flex-direction: column; line-height: 1.2; } .ob-h small { font-size: 11.5px; color: var(--ink-3); }
.ob-t { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ob-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-card li { display: flex; gap: 9px; font-size: 14px; line-height: 1.45; }
.ob-card li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: #b07a10; }
.ob-demo { position: absolute; top: 16px; right: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* between hello and done */
.hello2 { background: var(--paper); }
.moment { font-size: 17px; }
.behave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bv-card { padding: 16px 18px 22px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bv-card:nth-child(3n+2) { transition-delay: .08s; } .bv-card:nth-child(3n) { transition-delay: .16s; }
.bv-vis { height: 128px; border-radius: 16px; background: linear-gradient(160deg, #f4f5fb, #eceef8); margin-bottom: 16px; display: grid; place-items: center; overflow: hidden; padding: 10px; }
.bv-card h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; }
.bv-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.bv { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.bv-b { padding: 7px 11px; border-radius: 14px; max-width: 90%; }
.bv-b.time { align-self: center; padding: 2px 8px; font-size: 11px; font-weight: 700; color: var(--ink-3); background: rgba(255, 255, 255, .7); }
.bv-b.u { align-self: flex-end; background: #fff; box-shadow: 0 3px 10px rgba(16, 25, 56, .06); }
.bv-b.p { align-self: flex-start; display: flex; gap: 6px; align-items: center; background: var(--navy); color: #fff; }
.bv-b.p .pm { width: 13px; height: 13px; color: var(--peri); }
.bv2 { flex-direction: row; align-items: center; gap: 8px; }
.bv-q { flex: 1; padding: 8px 10px; border-radius: 12px; background: #fff; font-style: italic; line-height: 1.35; }
.bv-to svg { width: 18px; height: 18px; color: var(--pick); }
.bv-c { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bv-c i { font-style: normal; font-weight: 700; font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: var(--pick); color: #fff; align-self: flex-start; }
.bv3 { flex-direction: row; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #fff; }
.bv3 .pimg { width: 70px; height: 70px; object-fit: contain; }
.bv3 > span:last-child { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bv3 i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f1f1f4; }
.bv3 i.miss { background: #fff; color: var(--warn); box-shadow: inset 0 0 0 1px #ecd9a8; }
.bv-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--paper); color: var(--pick); } .bv-ic svg { width: 26px; height: 26px; }
.bv4 { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bv4 span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 12.5px; box-shadow: 0 3px 10px rgba(16, 25, 56, .06); }
.bv4 svg { width: 15px; height: 15px; color: var(--ok); }
.bv5 { padding: 10px 12px; border-radius: 14px; background: #fff; gap: 8px; }
.bv-h { display: flex; align-items: center; gap: 7px; font-weight: 700; } .bv-h svg { width: 15px; height: 15px; color: var(--pick); }
.bv-l { display: flex; flex-direction: column; gap: 5px; } .bv-l i { height: 7px; border-radius: 4px; background: #eceef4; } .bv-l i.s { width: 60%; }
.bv-tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--ok); }
.bv6 { flex-direction: row; gap: 8px; position: relative; }
.bv6 span { flex: 1; display: flex; flex-direction: column; padding: 10px; border-radius: 12px; background: #fff; }
.bv6 b { font-size: 22px; letter-spacing: -0.03em; color: var(--pick); } .bv6 small { font-size: 11.5px; color: var(--ink-3); }
.bv6 em { position: absolute; right: 0; bottom: -18px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

/* mid CTA band */
.mid { padding: 0 0 20px; }
.mid-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px; align-items: center; padding: 34px 38px; border-radius: 30px; background: linear-gradient(120deg, #f3f4fb, #eef0fb); box-shadow: inset 0 0 0 1px var(--line); }
.mid-copy p { margin-top: 6px; }
.mid-copy h2 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; }
.mid-copy p { color: var(--ink-2); font-size: 15.5px; }
.mid .url-cta { margin: 0; max-width: none; }

/* modules */
.modules { background: #fff; }
.mods5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mod5 { display: flex; flex-direction: column; padding: 14px 14px 20px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.mod5:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px rgba(16, 25, 56, .07); }
.mod5.lead { background: #fff; box-shadow: inset 0 0 0 2px var(--pick), 0 20px 50px rgba(45, 60, 154, .1); }
.mod5:nth-child(2) { transition-delay: .06s; } .mod5:nth-child(3) { transition-delay: .12s; } .mod5:nth-child(4) { transition-delay: .18s; } .mod5:nth-child(5) { transition-delay: .24s; }
.mod5-v { height: 96px; border-radius: 14px; background: linear-gradient(160deg, #f9f9fc, #eef0f8); margin-bottom: 14px; display: grid; place-items: center; overflow: hidden; }
.mod5 h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 6px; }
.mod5 p { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.mv-shop { display: flex; gap: 4px; } .mv-shop .pimg { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; }
.mv-svc { display: flex; gap: 5px; } .mv-svc span { padding: 8px 9px; border-radius: 10px; background: #fff; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .mv-svc .on { background: var(--ink); color: #fff; }
.mv-voice .wave { width: 120px; height: 40px; margin: 0; }
.mv-owner { display: flex; align-items: flex-end; gap: 6px; height: 60px; } .mv-owner i { width: 14px; height: var(--h); border-radius: 4px; background: linear-gradient(180deg, #6b78e6, var(--pick)); }
.mv-feed { display: grid; grid-template-columns: auto auto; gap: 6px 8px; align-items: center; justify-items: start; font-size: 11.5px; font-weight: 700; }
.mv-feed > span:first-child { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--pick); } .mv-feed svg { width: 20px; height: 20px; }
.mv-feed i { display: none; } .mv-feed span:not(:first-child) { padding: 4px 9px; border-radius: 999px; background: #fff; }

/* developers */
.dev { background: var(--paper); }
.dev-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.dev-copy h2 { font-size: clamp(30px, 3.4vw, 46px); }
.dev-l { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dev-l li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.dev-l b { color: var(--ink); }
.dev-code { border-radius: 22px; background: #0b1024; color: #dfe3ff; box-shadow: 0 30px 80px rgba(16, 25, 56, .25); overflow: hidden; }
.dev-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: var(--on-dark-3); }
.dev-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.dev-bar span { margin-left: 10px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.dev-code pre { margin: 0; padding: 20px 22px 24px; font: 13.5px/1.7 ui-monospace, 'SF Mono', Menlo, monospace; white-space: pre-wrap; }
.c-k { color: #9aa6ff; } .c-f { color: #fff; font-weight: 700; } .c-p { color: #c3c9ff; } .c-s { color: #a6e3c3; } .c-n { color: #ffd59a; } .c-c { color: #8b93b8; }

/* integrations catalogue */
.integ { background: #fff; }
.integ-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 28px; }
.integ-head h2 { font-size: clamp(30px, 3.4vw, 48px); max-width: 13em; }
.plug { position: relative; width: 120px; height: 84px; }
.plug-cable { position: absolute; left: 0; top: 4px; width: 74px; height: 74px; color: var(--ink); transform: translateX(-8px) rotate(-8deg); transition: transform .6s var(--ease); }
.plug.in .plug-cable { animation: plugin .7s var(--ease) both; }
@keyframes plugin { 0% { transform: translateX(-14px) rotate(-12deg); } 60% { transform: translateX(14px) rotate(0); } 100% { transform: translateX(10px) rotate(0); } }
.plug-socket { position: absolute; right: 0; bottom: 6px; width: 42px; height: 42px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; align-items: center; justify-content: center; gap: 7px; transition: box-shadow .4s; }
.plug-socket i { width: 6px; height: 13px; border-radius: 3px; background: var(--ink-3); }
.plug.in .plug-socket { animation: socket 1.1s var(--ease) both; }
@keyframes socket { 50% { box-shadow: inset 0 0 0 2px var(--pick), 0 0 26px rgba(45, 60, 154, .35); } }
.integ-count { display: flex; align-items: center; gap: 12px; }
.ic-n { font-size: clamp(56px, 6vw, 84px); font-weight: 600; letter-spacing: -0.05em; line-height: .9; color: var(--pick); font-variant-numeric: tabular-nums; }
.ic-l { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ic-l span { font-weight: 600; color: var(--ok); }
.integ-tools { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.integ-search { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 4px 6px 4px 16px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.integ-search svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.integ-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 11px 0; font-size: 15px; }
.integ-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.integ-chips button { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 9px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: all .25s; }
.integ-chips small { font-size: 11.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.integ-chips button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.integ-chips button[aria-pressed="true"] small { color: rgba(255, 255, 255, .6); }
.ig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 8px; }
.ig { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); animation: igIn .4s var(--ease) both; }
@keyframes igIn { from { opacity: 0; transform: translateY(6px); } }
.ig.live { background: #fff; }
.ig-m { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 800; font-size: 13px; letter-spacing: -0.02em; color: var(--ink); }
.ig.live .ig-m { background: var(--ink); color: #fff; box-shadow: none; }
.ig-m svg { width: 18px; height: 18px; }
.ig-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ig-t b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ig-t small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.ig.live .ig-t small { color: var(--ok); }
.ig-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.ig-more { grid-column: span 2; background: linear-gradient(120deg, #f3f4fb, #eef0fb); flex-wrap: wrap; }
.ig-more .ig-m { background: var(--pick); color: #fff; box-shadow: none; }
.ig-more .ig-t small { color: var(--ink-2); }
.ig-more .pill { margin-left: auto; padding: 9px 14px; font-size: 13px; }
.ig-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 10px 0 0; padding: 13px 18px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: box-shadow .25s, transform .25s var(--ease); }
.ig-open:hover { box-shadow: inset 0 0 0 1px var(--ink-2); transform: translateY(-1px); }
.ig-open svg { width: 16px; height: 16px; }
.ig-grid-end { margin-top: 8px; }
.ig-empty { margin-top: 12px; color: var(--ink-2); font-size: 14.5px; }
.integ-foot { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .pane-row { grid-template-columns: 1fr 1fr; } .pane-row > .pane-gpt, .pane-row > .hero-pane { grid-column: 1 / -1; }
  .behave { grid-template-columns: 1fr 1fr; } .mods5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dev-grid, .mid-inner, .owner-beat { grid-template-columns: 1fr; }
  .integ-head { grid-template-columns: 1fr auto; }
}
@media (max-width: 760px) {
  .ask-q { font-size: 13px; padding: 9px 13px; text-align: left; }
  .ask-own { border-radius: 22px; }
  .pane-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 0 16px; }
  .pane-tabs button { flex: none; border: 0; padding: 8px 14px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; font-size: 13px; }
  .pane-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; }
  .pane-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 18px; scrollbar-width: none; }
  .pane-col { display: contents; }
  .pane { flex: 0 0 86%; scroll-snap-align: center; min-height: 430px; }
  .owner-beat { padding: 20px; margin-top: 30px; }
  .behave { grid-template-columns: 1fr; }
  .mid-inner { padding: 22px 18px; border-radius: 24px; }
  .mods5 { grid-template-columns: 1fr 1fr; } .mods5 .mod5.lead { grid-column: 1 / -1; }
  .integ-head { grid-template-columns: 1fr; gap: 12px; } .integ-count { order: 2; }
  .ic-n { font-size: 54px; }
  .integ-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .integ-chips button { flex: none; }
  .ig-grid { grid-template-columns: 1fr; }
  .ig-more { grid-column: auto; }
  .ig-more .pill { margin: 8px 0 0; width: 100%; }
  .dev-code pre { font-size: 12px; padding: 16px; }
}
.call-t { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; font-weight: 700; color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.call-t svg { width: 14px; height: 14px; color: #8ff0b6; }
.ig-m svg.brand-m { width: 19px; height: 19px; }
@media (max-width: 760px) {
  .mods5 { grid-template-columns: 1fr; gap: 8px; }
  .mod5 { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto 1fr; gap: 2px 14px; padding: 12px; align-items: start; }
  .mod5-v { grid-row: span 2; height: 84px; margin: 0; }
  .mod5 h3 { font-size: 16px; margin: 4px 0 2px; }
  .mv-shop .pimg { width: 32px; height: 32px; } .mv-svc span { padding: 5px; font-size: 11px; } .mv-voice .wave { width: 84px; } .mv-feed { transform: scale(.85); }
}
@media (max-width: 760px) { .mv-svc span:last-child { display: none; } }

/* ================================================================ v4: «the Plugix object» — one premium visual system */
:root { --night: #05070f; --glass-d: rgba(14, 19, 44, .62); --glass-line-d: rgba(170, 180, 255, .16); }
/* header: dark glass everywhere (the page opens on a dark film) */
.top { color: #eef0fb; }
.top.is-solid, .top { background: linear-gradient(180deg, rgba(7, 9, 20, .93), rgba(7, 9, 20, .86)); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 rgba(170, 180, 255, .1); }
.nav a { color: rgba(226, 230, 255, .72); } .nav a:hover { color: #fff; }
.lng { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lng button { color: rgba(226, 230, 255, .7); } .lng button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
.pill-top { background: #fff; color: var(--ink); }
.concept { background: rgba(10, 14, 34, .72); color: rgba(235, 238, 255, .86); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .2); }
.concept::before { background: var(--peri); }

/* the assistant avatar: the plug mark in a dark circle with a live dot */
.ava { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 28%, #26306e, #101938 62%, #070b1d); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .3), 0 4px 12px rgba(16, 25, 56, .25); }
.ava .pm { width: 58%; height: 58%; }
.ava > i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px #fff; }
.ava-w { width: 38px; height: 38px; }
.talk .ava { box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .5), 0 0 0 4px rgba(154, 166, 255, .18), 0 4px 12px rgba(16, 25, 56, .25); }
.wdg-h .ava, .m-head .ava, .pn-h .ava { width: 28px; height: 28px; }
.ob-h .ava { width: 34px; height: 34px; }

/* ---------------------------------------------------------------- hero film */
.hero.film { padding: 0; overflow: visible; height: 340vh; background: var(--night); color: #fff; }
html:not(.film-on) .hero.film, html.reduced .hero.film { height: auto; }
.film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
html:not(.film-on) .film-stage, html.reduced .film-stage { position: relative; }
.film-media { position: absolute; inset: 0; overflow: hidden; }
.film-poster, .film-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-poster img { object-fit: cover; object-position: left center; }
.film-cv { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.film-cv.on { opacity: 1; }
.film-screen { position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden; border-radius: 3px; opacity: 0; visibility: hidden; box-shadow: 0 0 90px rgba(154, 166, 255, .32); will-change: transform, opacity; }
.fs-in { transform-origin: 0 0; }
.fs-in .store { height: 100%; transform: none !important; border-radius: 0; box-shadow: none; }
.film-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(5, 7, 15, .9) 0%, rgba(5, 7, 15, .72) 28%, rgba(5, 7, 15, .2) 46%, rgba(5, 7, 15, 0) 58%), linear-gradient(0deg, rgba(5, 7, 15, .75) 0%, rgba(5, 7, 15, 0) 26%); }
.film-copy { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--top-h) + max(4vh, 22px)); width: min(570px, 40vw); }
.film-copy .hello { background: rgba(255, 255, 255, .06); color: #dfe3ff; box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .22); padding: 6px 14px 6px 11px; font-size: 13.5px; gap: 9px; }
.film-copy .hello .dot { width: 8px; height: 8px; box-shadow: 0 0 0 0 rgba(63, 191, 122, .6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(63, 191, 122, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(63, 191, 122, 0); } }
.film-copy h1 { margin: 20px 0 16px; font-size: clamp(40px, 4.3vw, 66px); line-height: 1.0; letter-spacing: -0.048em; font-weight: 500; color: #fff; text-wrap: balance; }
.film-copy .lead { font-size: clamp(16px, 1.2vw, 18px); color: rgba(226, 230, 255, .74); max-width: 33em; line-height: 1.55; }
.film-copy .url-cta { margin-top: 26px; max-width: 580px; }
.film-copy .lnk-try { margin-top: 16px; color: var(--peri-2); }
.url-cta-dark { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 60px rgba(0, 0, 0, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.film-steps { position: absolute; z-index: 3; left: var(--gut); bottom: 30px; width: min(640px, 46vw); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.film-steps li { display: grid; grid-template-columns: 1fr; gap: 2px 10px; color: rgba(226, 230, 255, .42); transition: color .5s; }
.film-steps li > span { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.film-steps li small { font-size: 11.5px; font-weight: 500; opacity: .8; margin-top: 2px; }
.film-steps li.on, .film-steps li.done { color: #eef0fb; }
.fs-bar { grid-column: 1 / -1; margin-top: 10px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.fs-bar i { display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: linear-gradient(90deg, #6b78e6, var(--peri)); box-shadow: 0 0 10px var(--peri); }
.film-cue { position: absolute; z-index: 3; right: var(--gut); bottom: 34px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(226, 230, 255, .5); transition: opacity .4s; }
.film-stage.lit .film-cue { opacity: 0; }
.mouse { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); position: relative; display: inline-block; }
.mouse i { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--peri); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
html.reduced .film-screen { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- dark / light rhythm */
.fork { background: #fff; padding-top: 70px; }
.how { background: var(--paper); }
.steps > li { padding: 10px 10px 22px; background: #fff; }
.st-v { height: 220px; background: #0a0d1c; border-radius: 18px; }
.st-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-v > div { position: absolute; left: 10px; right: 10px; bottom: 10px; width: auto; padding: 10px; border-radius: 14px; background: rgba(9, 13, 32, .62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .18); color: #eef0fb; }
.st-v .sv1 { grid-template-columns: auto 1fr auto; }
.st-v .sv-src, .st-v .sv1 li, .st-v .sv2 span, .st-v .b3.u { background: rgba(255, 255, 255, .1); color: #eef0fb; box-shadow: none; }
.st-v .sv-line { background: repeating-linear-gradient(90deg, rgba(195, 201, 255, .5) 0 5px, transparent 5px 9px); }
.st-v .sv1 li svg, .st-v .sv2 svg { color: #8ff0b6; }
.st-v .sv2 { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.st-v .b3.p { background: var(--peri); color: var(--navy); }
.st-v .b3.p .pm { color: var(--navy); }
.st-v .b3.ch { color: rgba(226, 230, 255, .6); }
.st-v .sv3 { width: auto; }
.steps h3 { margin-top: 4px; }

/* signature: glass on dark, the plug as the hub */
.every { background: radial-gradient(90% 70% at 50% 0%, #18215a 0%, #0c1235 45%, var(--night) 85%); color: var(--on-dark); }
.every .kicker { color: var(--peri); }
.every h2 { color: #fff; }
.every .sec-lead { color: var(--on-dark-2); }
.every .ask-l { color: var(--on-dark-3); }
.every .ask-q { background: rgba(255, 255, 255, .06); color: #dfe3ff; box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .2); }
.every .ask-q:hover { background: rgba(255, 255, 255, .1); }
.every .ask-q[aria-pressed="true"] { background: #fff; color: var(--ink); }
.every .ask-own { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .22); }
.every .ask-own input { color: #fff; } .every .ask-own input::placeholder { color: var(--on-dark-3); }
.every .ask-own .pill { background: #fff; color: var(--ink); }
.every .ask-note { color: var(--on-dark-2); }
#panes { position: relative; }
.hub { position: relative; height: 96px; display: flex; justify-content: center; }
.hub-ring { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 28%, #2a3478, #101938 62%, #070b1d); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .45), 0 0 0 8px rgba(154, 166, 255, .08), 0 0 40px rgba(154, 166, 255, .45); }
.hub-ring .pm { width: 30px; height: 30px; }
.hub-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; pointer-events: none; overflow: visible; z-index: 1; }
.hub-lines .cb { fill: none; stroke: rgba(154, 166, 255, .28); stroke-width: 1.5; }
.hub-lines .cb-flow { fill: none; stroke: #c3c9ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 240; animation: flowc 2.4s linear infinite; filter: drop-shadow(0 0 4px #9aa6ff); }
.hub-lines circle { fill: #c3c9ff; filter: drop-shadow(0 0 6px #9aa6ff); }
@keyframes flowc { from { stroke-dashoffset: 250; } to { stroke-dashoffset: 0; } }
.every .pane { position: relative; z-index: 2; box-shadow: 0 0 0 1px rgba(170, 180, 255, .2), 0 30px 80px rgba(0, 0, 0, .4); }
.every .hero-pane { box-shadow: 0 0 0 2px var(--peri), 0 0 60px rgba(154, 166, 255, .3), 0 30px 80px rgba(0, 0, 0, .45); }
.every .pane-call { background: linear-gradient(180deg, #121a46, #0b1030); }
.every .pn-fine { color: #6e6e76; }
.every .owner-beat { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.every .ob-k { color: var(--peri); }
.every .ob-copy h3 { color: #fff; }
.every .pane-tabs button { background: rgba(255, 255, 255, .06); color: #dfe3ff; box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .2); }
.every .pane-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }

/* galaxy: no orb, the dark scene stays */
.get { background: #fff; }

/* integrations: the patch panel above a dark searchable catalogue */
.integ { background: var(--night); color: var(--on-dark); padding-top: 0; overflow: hidden; }
.integ .wrap { position: relative; z-index: 2; }
.integ .kicker { color: var(--peri); }
.integ h2 { color: #fff; }
.plug-cable { color: #eef0fb; }
.plug-socket { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .25); }
.plug-socket i { background: rgba(226, 230, 255, .5); }
.ic-n { color: #fff; text-shadow: 0 0 30px rgba(154, 166, 255, .5); }
.ic-l { color: #eef0fb; } .ic-l span { color: #8ff0b6; }
.integ-search { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .2); }
.integ-search input { color: #fff; } .integ-search input::placeholder { color: var(--on-dark-3); }
.integ-search svg { color: var(--on-dark-3); }
.integ-chips button { background: rgba(255, 255, 255, .04); color: #dfe3ff; box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .16); }
.integ-chips small { color: var(--on-dark-3); }
.integ-chips button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.integ-chips button[aria-pressed="true"] small { color: var(--ink-3); }
.ig { background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .1); }
.ig.live { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .22); }
.ig-m { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .18); color: #dfe3ff; }
.ig.live .ig-m { background: #fff; color: var(--ink); box-shadow: 0 0 0 3px rgba(154, 166, 255, .16), 0 0 18px rgba(154, 166, 255, .45); }
.ig-t b { color: #eef0fb; }
.ig-t small { color: var(--on-dark-3); }
.ig.live .ig-t small { color: #8ff0b6; }
.ig-more { background: linear-gradient(120deg, rgba(91, 105, 255, .22), rgba(154, 166, 255, .08)); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .3); }
.ig-more .ig-t small { color: var(--on-dark-2); }
.ig-more .pill { background: #fff; color: var(--ink); }
.integ-foot, .ig-empty { color: var(--on-dark-3); }
.integ .lnk, .integ-more { color: var(--peri-2); }

/* developers: dark too, so dev + integrations read as one «engine room» */
.dev { background: linear-gradient(180deg, #0a0e22, var(--night)); color: var(--on-dark); }
.dev .kicker { color: var(--peri); } .dev h2 { color: #fff; } .dev .sec-lead, .dev-l li { color: var(--on-dark-2); } .dev-l b { color: #fff; } .dev .note { color: var(--on-dark-3); }
.dev-code { box-shadow: 0 0 0 1px rgba(170, 180, 255, .18), 0 30px 80px rgba(0, 0, 0, .5); }

/* final CTA: the last frame of the film — your site sits on that display */
.start { background: var(--night); padding: clamp(90px, 10vw, 150px) 0; }
.start-art { position: absolute; right: 0; top: 50%; width: min(1000px, 68vw); aspect-ratio: 16 / 9; transform: translateY(-50%); }
.start-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.start-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--night) 0%, rgba(5, 7, 15, .6) 28%, rgba(5, 7, 15, 0) 48%), linear-gradient(0deg, var(--night) 0%, rgba(5, 7, 15, 0) 22%), linear-gradient(180deg, var(--night) 0%, rgba(5, 7, 15, 0) 16%); }
.start-art .start-prev { position: absolute; z-index: 1; left: 39.17%; top: 18.7%; width: 52.6%; height: 56.8%; right: auto; transform: none; border-radius: 2px; box-shadow: 0 0 80px rgba(154, 166, 255, .35); display: flex; flex-direction: column; }
.start-art .sp-body { flex: 1; height: auto; }
.start-inner { max-width: 560px; }

@media (max-width: 1100px) {
  .film-copy { width: min(560px, 52vw); }
  .film-steps { width: min(560px, 60vw); }
  .start-art { position: relative; right: auto; top: auto; transform: none; width: 100%; margin: 0 0 30px; }
  .start-art::after { background: linear-gradient(0deg, var(--night) 0%, rgba(5, 7, 15, 0) 25%); }
  .start { padding-top: 40px; }
}
@media (max-width: 760px) {
  .hero.film { height: 300vh; }
  .film-stage { display: flex; flex-direction: column; }
  .film-copy { position: relative; left: auto; top: auto; width: auto; padding: calc(var(--top-h) + 14px) 16px 0; flex: none; }
  .film-copy .hello { font-size: 12px; padding: 5px 11px 5px 9px; }
  .film-copy h1 { font-size: clamp(31px, 8.6vw, 38px); margin: 12px 0 10px; }
  .film-copy .lead { font-size: 14.5px; line-height: 1.45; }
  .film-copy .url-cta { margin-top: 14px; }
  .film-copy .url-cta .pill { padding: 12px 16px; font-size: 14.5px; }
  .film-copy .lnk-try { display: none; }
  .film-media { position: relative; inset: auto; flex: 1 1 auto; min-height: 220px; margin: 14px 16px 16px; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .16); }
  .film-poster img { object-position: center; }
  .film-shade { display: none; }
  .film-steps { left: 28px; right: 28px; bottom: 28px; width: auto; display: block; }
  .film-steps li { display: none; }
  .film-steps li.on { display: grid; color: #fff; }
  .film-steps li small { display: none; }
  .film-steps li > span { text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
  .film-cue { display: none; }
  .st-v { height: 200px; }
  .hub { height: 64px; }
  .hub-lines { display: none; }
    .start-art .sp-chat { transform: scale(.8); transform-origin: right bottom; }
}
.fs-in .store { color: var(--ink); }
@media (min-width: 761px) { .concept { left: auto; right: 16px; } .film-cue { bottom: 64px; } }
@media (max-width: 760px) { .film-copy { order: 0; } .film-media { order: 1; } .film-steps { order: 2; } }
@media (max-width: 760px) { .film-steps { transition: opacity .3s; } .film-stage.demo .film-steps { opacity: 0; } }
.every .pane, .every .ob-card { color: var(--ink); }
.every .pane-call { color: var(--on-dark); }
.st-v > div { left: 12px; right: 12px; bottom: 12px; padding: 8px; }
.start { overflow: hidden; }
@media (max-width: 760px) {
  .start-art { width: 171vw; margin: 0 0 18px -63vw; }
  .start-art .sp-sk { display: none; }
  .start-art .sp-body { padding: 8px; }
  .start-art .sp-chat { width: 300px; transform: scale(.74); transform-origin: right bottom; right: 6px; bottom: 6px; }
  .start-art .start-prev.in .sp-chat { transform: scale(.74); }
  .start-art .sp-bar { padding: 6px 8px; } .start-art .sp-url { font-size: 11px; padding: 3px 9px; }
}
.st-v { height: 250px; }
.st-v > div { transform: scale(.84); transform-origin: left bottom; right: auto; max-width: calc((100% - 24px) / .84); }
.start h2 { font-size: clamp(30px, 3.2vw, 46px); }
.start-inner { max-width: 600px; }
@media (max-width: 760px) { .st-v { height: 210px; } }
/* «?» → «P» caption pair */
.film-qa { position: absolute; left: 0; top: 0; z-index: 3; margin: 0; display: grid; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; pointer-events: none; will-change: transform, opacity; }
.film-qa > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 15px; border-radius: 999px; background: rgba(12, 17, 42, .62); color: #eef0fb; box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .26); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.film-qa .qa-q::before { content: '?'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-weight: 700; }
.film-qa .qa-a { opacity: 0; transform: translateY(6px); color: #fff; box-shadow: inset 0 0 0 1px rgba(154, 166, 255, .6), 0 0 30px rgba(154, 166, 255, .35); }
.film-qa .qa-a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--peri); box-shadow: 0 0 10px var(--peri); }
.film-qa.ans .qa-q { opacity: 0; transform: translateY(-6px); }
.film-qa.ans .qa-a { opacity: 1; transform: none; }
@media (max-width: 760px) { .film-qa { left: 14px; top: 14px; font-size: 13px; } .film-qa > span { padding: 7px 12px; } }
@media (min-width: 761px) { .film-qa > span { justify-self: center; } }

/* «Як це працює»: literal mini-UIs instead of abstract art (your catalogue → Plugix, your rules, 02:14 at night) */
.st-v > div.hw { position: absolute; inset: 0; left: 0; right: 0; bottom: 0; max-width: none; transform: none; padding: 16px 16px 14px; border-radius: 18px; background: radial-gradient(120% 90% at 85% 0%, #1f2856 0%, #0c1024 62%); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .14); color: #eef0fb; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.hw .ava { width: 30px; height: 30px; }
.hw .ava > i { box-shadow: 0 0 0 2px #0c1024; }
.hw-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.hw-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-weight: 600; white-space: nowrap; }
.hw-chip svg { width: 14px; height: 14px; color: var(--peri); }
.hw-flow { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(195, 201, 255, .45) 0 5px, transparent 5px 9px); overflow: hidden; }
.hw-flow > i { position: absolute; top: -1px; left: 0; width: 28%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--peri)); animation: hwFlow 1.6s linear infinite; }
@keyframes hwFlow { from { transform: translateX(-100%); } to { transform: translateX(380%); } }
.hw-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; align-content: center; }
.hw-grid > span { position: relative; aspect-ratio: 1; border-radius: 10px; background: #f3f4f8; display: grid; place-items: center; }
.hw-grid img { width: 78%; height: 78%; object-fit: contain; }
.hw-grid > span > i { position: absolute; right: -4px; top: -4px; width: 15px; height: 15px; border-radius: 50%; background: var(--live); display: grid; place-items: center; box-shadow: 0 0 0 2px #0c1024; }
.hw-grid > span > i svg { width: 9px; height: 9px; color: #fff; }
.hw-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; color: var(--on-dark-2); }
.hw-sum b { font-size: 17px; color: #fff; letter-spacing: -0.02em; }
.hw-sum span { display: inline-flex; align-items: center; gap: 4px; }
.hw-sum svg { width: 13px; height: 13px; color: #8ff0b6; }
.hw-cal { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; align-content: center; }
.hw-cal > b { text-align: center; font-size: 11px; font-weight: 600; color: var(--on-dark-3); }
.hw-cal > span { height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; }
.hw-cal .busy { background: rgba(255, 255, 255, .06); }
.hw-cal .free { background: rgba(154, 166, 255, .16); color: #dfe3ff; box-shadow: inset 0 0 0 1px rgba(154, 166, 255, .45); }
.hw-h { font-weight: 700; font-size: 13px; color: #fff; }
.hw2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hw2 li { display: grid; grid-template-columns: 16px auto 1fr 16px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.hw2 li > svg { width: 15px; height: 15px; color: var(--peri); }
.hw2 li > span { color: var(--on-dark-2); white-space: nowrap; }
.hw2 li > b { font-weight: 600; color: #fff; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw2 li > em { width: 16px; height: 16px; border-radius: 50%; background: var(--live); display: grid; place-items: center; }
.hw2 li > em svg { width: 10px; height: 10px; color: #fff; }
.hw-night { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(170, 180, 255, .14); }
.hw-night > b { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.hw-night > span { display: flex; flex-direction: column; line-height: 1.3; color: var(--on-dark-3); font-weight: 600; }
.hw-night small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #8ff0b6; }
.hw3 .b3 { font-size: 12.5px; }
.hw3 .b3.u { align-self: flex-end; background: rgba(255, 255, 255, .1); color: #eef0fb; box-shadow: none; }
.hw3 .b3.p { align-self: flex-start; background: var(--peri); color: var(--navy); }
.hw3 .b3.p .pm { color: var(--navy); }
.hw-act { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-weight: 600; color: #8ff0b6; background: rgba(63, 191, 122, .12); }
.hw-act svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .st-v > div.hw { padding: 12px; gap: 8px; }
  .hw-grid { gap: 6px; }
  .hw2 li { padding: 6px 9px; }
  .hw-night > b { font-size: 24px; }
}
html.reduced .hw-flow > i { animation: none; }
/* the step number sits in the mini-UI's first row */
.st-v .hw .hw-top, .st-v .hw .hw-h, .st-v .hw .hw-night { margin-left: 42px; min-height: 30px; }
.st-v .hw .hw-h { display: flex; align-items: center; margin-top: 0; margin-bottom: 0; color: #fff; }

/* integrations hub: «P» in the middle, real services on two slow 3D orbits (positions set in JS) */
.integ-hub { position: relative; height: 540px; margin: 0 0 30px; }
.hub-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-orbits ellipse { fill: none; stroke: url(#hubG); stroke-width: 1.2; }
.hub-orbits .o1 { stroke-dasharray: 2 7; }
.hub-sparks circle { fill: #dfe3ff; filter: drop-shadow(0 0 6px rgba(154, 166, 255, .9)); }
.hub-beams line { stroke: #9aa6ff; stroke-width: 1; opacity: 0; }
.hub-core { position: absolute; left: 50%; top: 50%; z-index: 20; transform: translate(-50%, -50%); width: 92px; height: 92px; display: grid; place-items: center; }
.hub-core > i { position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(154, 166, 255, .22); animation: hubRing 3.6s var(--ease) infinite; }
.hub-core > i + i { animation-delay: 1.8s; }
@keyframes hubRing { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.hub-core::before { content: ''; position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 138, 255, .35), rgba(124, 138, 255, 0) 62%); }
.hub-core .ava { position: relative; width: 84px; height: 84px; box-shadow: inset 0 0 0 1px rgba(190, 198, 255, .45), 0 0 0 8px rgba(154, 166, 255, .07), 0 18px 60px rgba(70, 86, 255, .45); }
.hub-core .ava > i { width: 14px; height: 14px; right: 4px; bottom: 4px; box-shadow: 0 0 0 3px #0a0d1c; }
.hub-n { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 15px 0 6px; border-radius: 999px; white-space: nowrap; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(190, 198, 255, .2), 0 14px 40px rgba(0, 0, 0, .45); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); will-change: transform, opacity; }
.hub-n > i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .95); color: #10142b; }
.hub-n > i svg { width: 17px; height: 17px; }
.hub-n > b { font-size: 14px; font-weight: 600; color: #f1f3ff; letter-spacing: -0.01em; }
@media (max-width: 760px) {
  .integ-hub { height: 280px; margin: 6px 0 20px; }
  .hub-core { width: 70px; height: 70px; } .hub-core .ava { width: 64px; height: 64px; }
  .hub-n { height: auto; padding: 5px; } .hub-n > i { width: 38px; height: 38px; } .hub-n > i svg { width: 19px; height: 19px; } .hub-n > b { display: none; }
}
html.reduced .hub-core > i { animation: none; opacity: 0; }
/* the fold button sits on the dark integrations section */
.integ .ig-open { background: rgba(255, 255, 255, .06); color: #eef0fb; box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .22); }
.integ .ig-open:hover { box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .5); }
.concept { transition: opacity .35s var(--ease); }
html.past-hero .concept { opacity: 0; pointer-events: none; }
/* the product cloud must never fight the copy */
@media (min-width: 761px) { .gx-stage::before { background: linear-gradient(90deg, rgba(7, 11, 29, .97) 0%, rgba(7, 11, 29, .9) 34%, rgba(7, 11, 29, .55) 44%, transparent 56%); } }

/* ================================================================ «Голосовий режим» (js/voice.js) */
.voice { background: linear-gradient(180deg, var(--night) 0%, #0b1030 55%, #101740 100%); color: var(--on-dark); }
.voice .kicker { color: var(--peri); }
.voice h2 { color: #fff; }
.voice .sec-lead { color: var(--on-dark-2); }
.vx { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; max-width: 1120px; margin: 0 auto; align-items: stretch; }
.vx-call { position: relative; display: flex; flex-direction: column; padding: 18px 20px 18px; border-radius: 28px; background: linear-gradient(180deg, rgba(27, 37, 80, .72), rgba(12, 17, 42, .82)); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .2), 0 40px 100px rgba(0, 0, 0, .45); overflow: hidden; }
.vx-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--on-dark-3); }
.vx-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #dfe3ff; }
.vx-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5d6c; box-shadow: 0 0 0 0 rgba(255, 93, 108, .5); animation: rec 1.6s infinite; }
@keyframes rec { 0% { box-shadow: 0 0 0 0 rgba(255, 93, 108, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(255, 93, 108, 0); } }
.vx-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.vx-speaker { position: relative; height: 230px; display: grid; place-items: center; margin: 4px 0 2px; }
.vx-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.vx-ava { position: relative; z-index: 1; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 35% 28%, #2b3680, #121a48 60%, #080c22); box-shadow: inset 0 0 0 1px rgba(170, 180, 255, .45), 0 0 50px rgba(154, 166, 255, .35); transition: transform .25s var(--ease), box-shadow .3s; }
.vx-ava .pm { width: 46px; height: 46px; }
.talk-p .vx-ava { transform: scale(1.05); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .7), 0 0 70px rgba(154, 166, 255, .6); }
.vx-who { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; display: flex; flex-direction: column; line-height: 1.25; }
.vx-who b { font-size: 14px; color: #fff; }
.vx-state { font-size: 12px; color: var(--on-dark-3); }
.talk-p .vx-state { color: var(--peri-2); }
.vx-caps { position: relative; flex: 1; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; margin: 6px 0 14px; }
.cap-l { display: none; margin: 0; font-size: 16px; line-height: 1.45; }
.cap-l.on, .cap-l.prev { display: block; }
.cap-l.prev { opacity: .42; font-size: 14px; }
.cap-l b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 2px; }
.cap-l.p b { color: var(--peri); }
.cap-l i { font-style: normal; color: rgba(226, 230, 255, .28); transition: color .18s; }
.cap-l i.lit { color: #fff; }
.cap-l.c i.lit { color: #dfe3ff; }
.vx-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vx-play { background: #fff; color: var(--ink); padding: 12px 18px; }
.vx-play svg { width: 16px; height: 16px; }
.vx-stop { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.vx-stop svg { width: 16px; height: 16px; }
.vx-stop[hidden], .vx-play[hidden], .vx-sound[hidden], .vx-muted[hidden] { display: none; }
.vx-sound { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #8ff0b6; }
.vx-sound svg { width: 18px; height: 18px; }
.vx-muted { font-size: 12.5px; color: var(--on-dark-3); }
.vx-stage { display: flex; flex-direction: column; padding: 18px 20px 16px; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 40px 100px rgba(0, 0, 0, .4), 0 0 0 1px rgba(170, 180, 255, .2); }
.vx-st-h { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.vx-st-h span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.vx-st-h b { font-size: 14.5px; } .vx-st-h small { font-size: 12px; color: var(--ink-3); }
.vx-cards { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 0 12px; align-content: center; min-height: 290px; }
.vx-cards.vx-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; width: 100%; margin: 0 auto; }
.vc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .55s var(--ease), transform .55s var(--ease), box-shadow .4s, filter .4s; }
.vc.in { opacity: 1; transform: none; }
.vc img { width: 100%; aspect-ratio: 1.15; object-fit: contain; margin-bottom: 4px; }
.vc b { font-size: 14px; letter-spacing: -0.01em; }
.vc-sp { display: flex; flex-wrap: wrap; gap: 4px; }
.vc-sp i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #f1f1f4; color: var(--ink-2); }
.vc-pr { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.vc-pick { position: absolute; top: 8px; left: 8px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--pick); padding: 3px 9px; border-radius: 999px; opacity: 0; transform: scale(.8); transition: all .4s var(--ease); }
.vc.best { box-shadow: inset 0 0 0 2px var(--pick), 0 18px 40px rgba(45, 60, 154, .18); transform: translateY(-4px); }
.vc.best .vc-pick { opacity: 1; transform: none; }
.vc.dim { filter: saturate(.5) opacity(.55); }
.vc-slot { align-items: flex-start; padding: 16px; }
.vc-slot .vc-time { font-size: 30px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: 18px 0 4px; }
.vc-slot small { font-size: 12.5px; color: var(--ink-3); }
.vx-badge { display: flex; align-items: center; gap: 9px; align-self: flex-start; padding: 10px 14px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: all .5s var(--ease); }
.vx-badge.in { opacity: 1; transform: none; }
.vx-badge svg { width: 18px; height: 18px; color: #8ff0b6; }
.vx-demo { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
html.reduced .vc, html.reduced .vx-badge { transition: none; }
@media (max-width: 900px) { .vx { grid-template-columns: 1fr; } .vx-cards { min-height: 0; } }
@media (max-width: 760px) {
  .vx-call { padding: 14px 14px; border-radius: 22px; }
  .vx-speaker { height: 170px; } .vx-ava { width: 70px; height: 70px; } .vx-ava .pm { width: 34px; height: 34px; }
  .vx-caps { min-height: 118px; } .cap-l { font-size: 15px; } .cap-l.prev { font-size: 13px; }
  .vx-stage { padding: 14px; border-radius: 22px; }
  .vx-cards { gap: 6px; padding: 12px 0 10px; }
  .vc { padding: 7px 7px 9px; border-radius: 14px; } .vc b { font-size: 12px; } .vc-sp { display: none; } .vc-pr { font-size: 13px; } .vc-pick { font-size: 10px; top: 5px; left: 5px; }
  .vc-slot .vc-time { font-size: 24px; margin-top: 16px; }
}
.vx-speaker { height: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vx-ring { position: relative; width: 100%; height: 200px; display: grid; place-items: center; }
.vx-who { position: static; }
@media (max-width: 760px) {
  .vx-ring { height: 128px; } .vx-ava { width: 62px; height: 62px; } .vx-ava .pm { width: 30px; height: 30px; }
  .vx-caps { min-height: 104px; margin: 4px 0 10px; } .cap-l.prev { display: none; }
  .vx-top { font-size: 11.5px; }
  .vx-st-h { padding-bottom: 10px; } .vx-st-h small { display: none; }
  .vx-cards { padding: 10px 0 6px; } .vc img { aspect-ratio: 1.3; }
  .vx-badge { font-size: 13px; padding: 8px 12px; } .vx-demo { margin-top: 6px; }
  .vx-play { padding: 11px 16px; font-size: 14px; }
}
/* voice stage: never an empty panel — skeleton + hint, then «I hear» chips, then products; height = content */
.vx { align-items: center; }
.vx-cards { min-height: 0; padding: 0; align-content: start; }
.vx-heard { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 12px; min-height: 28px; font-size: 12.5px; }
.vx-heard-l { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink-3); }
.vx-heard-l svg { width: 15px; height: 15px; color: var(--pick); }
.vx-chip { padding: 4px 10px; border-radius: 999px; background: var(--pick-soft); color: var(--pick); font-weight: 700; opacity: 0; transform: translateY(4px) scale(.95); transition: all .35s var(--ease); }
.vx-chip.in { opacity: 1; transform: none; }
.vx-area { display: grid; padding-bottom: 12px; }
.vx-area > * { grid-area: 1 / 1; }
.vx-idle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; transition: opacity .45s var(--ease); }
.vx-idle.vx-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; width: 100%; margin: 0 auto; }
.vx-idle.out { opacity: 0; }
.vx-sk { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); background: linear-gradient(180deg, #fafbfe, #f5f6fb); }
.vx-sk i { display: block; aspect-ratio: 1.15; border-radius: 12px; background: #eef0f6; }
.vx-svc .vx-sk i { aspect-ratio: 2.2; }
.vx-sk b { display: block; height: 10px; width: 70%; border-radius: 5px; background: #eceef5; }
.vx-sk s { display: block; height: 10px; width: 40%; border-radius: 5px; background: #eceef5; }
.vx-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 26px rgba(16, 25, 56, .1), inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.vx-hint::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--peri); box-shadow: 0 0 0 0 rgba(154, 166, 255, .6); animation: hintp 1.6s infinite; vertical-align: 1px; }
@keyframes hintp { 0% { box-shadow: 0 0 0 0 rgba(154, 166, 255, .6); } 80%, 100% { box-shadow: 0 0 0 8px rgba(154, 166, 255, 0); } }
.vx-badge { margin-top: 0; }
.vx-stage .vx-badge:not(.in) { position: absolute; }
.vx-stage { position: relative; }
@media (max-width: 760px) { .vx-sk { padding: 7px; border-radius: 14px; } .vx-hint { font-size: 12px; white-space: normal; text-align: center; width: 86%; border-radius: 16px; } .vx-heard { margin: 8px 0; } }
@media (max-width: 760px) { .vx-heard { min-height: 56px; align-content: flex-start; } }
/* «Вашого сервісу немає?» — a full-width banner under the list: text left, button right */
.ig-grid-end { grid-template-columns: 1fr; margin-top: 12px; }
.ig-grid-end .ig-more { grid-column: auto; flex-wrap: nowrap; gap: 14px; padding: 16px 18px 16px 16px; border-radius: 18px; }
.ig-grid-end .ig-more .ig-m { width: 44px; height: 44px; }
.ig-grid-end .ig-more .ig-t b { font-size: 16px; }
.ig-grid-end .ig-more .ig-t small { font-size: 13.5px; }
.ig-grid-end .ig-more .pill { margin: 0 0 0 auto; padding: 12px 20px; font-size: 14px; flex: none; }
.integ-foot { text-align: center; }
@media (max-width: 760px) {
  .ig-grid-end .ig-more { flex-wrap: wrap; }
  .ig-grid-end .ig-more .pill { margin: 6px 0 0; width: 100%; }
  .integ-foot { text-align: left; }
}
/* real brand logos in the catalogue and the orbit */
.ig-m img.ig-logo { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; }
.hub-n > i img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; }
@media (max-width: 760px) { .hub-n > i img { width: 22px; height: 22px; } }

/* ================================================================ v5 premium pass: rhythm, sheets, grain, editorial heads */
:root { --sheet: 44px; --r-card: 24px; --r-lg: 30px; --hair: rgba(16, 25, 56, .08); --hair-d: rgba(170, 180, 255, .14);
  --sh-1: 0 1px 2px rgba(16, 25, 56, .05), 0 12px 32px rgba(16, 25, 56, .07); --sh-2: 0 2px 4px rgba(16, 25, 56, .05), 0 30px 80px rgba(16, 25, 56, .12); }
h2, h3 { text-wrap: balance; } p { text-wrap: pretty; }
.sec h2, .get h2 { letter-spacing: -0.042em; }
/* bands: a section that starts a new tone slides over the previous one as a rounded sheet — no hard horizontal cuts */
.sheet { position: relative; z-index: 2; margin-top: calc(var(--sheet) * -1); border-radius: var(--sheet) var(--sheet) 0 0; }
.tone-dark { position: relative; }
.tone-dark::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .055; mix-blend-mode: overlay; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:where(.tone-dark) > :where(.wrap, .gx-scene, .marquee, .scenes) { position: relative; z-index: 1; }
.start > .start-art { z-index: 1; }
.scene .mock:not(.call), .scene .mock:not(.call) .m-t b { color: var(--ink); }
.hero.film.tone-dark > .film-stage { position: sticky; }
html:not(.film-on) .hero.film.tone-dark > .film-stage, html.reduced .hero.film.tone-dark > .film-stage { position: relative; }
.get.tone-dark > .gx-scene { z-index: 1; }

/* editorial header: headline left, lead right, hairline rule */
.sec-head.ed { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(30px, 6vw, 90px); align-items: end; padding-top: 22px; border-top: 1px solid var(--hair); margin-bottom: 44px; }
.sec-head.ed .kicker { grid-column: 1 / -1; margin-bottom: 18px; }
.sec-head.ed h2 { grid-column: 1; margin: 0; }
.sec-head.ed .sec-lead { grid-column: 2; margin: 0 0 6px; text-align: left; }
.tone-dark .sec-head.ed { border-top-color: var(--hair-d); }

/* ---------------------------------------------------------------- logo strip (starts the first light sheet) */
/* the brand film under the logo strip: a night panel, the heading and one line, the film at the section's width (index.html #film) */
.bfilm { padding: clamp(64px, 7vw, 108px) 0 clamp(72px, 8vw, 120px); background: radial-gradient(90% 70% at 85% 0%, rgba(97, 112, 255, .28), rgba(97, 112, 255, 0) 60%), #05070f; color: #fff; }
.bfilm h2 { margin: 0; font-size: clamp(34px, 4vw, 58px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.bfilm-p { margin: 16px 0 0; max-width: 44em; font-size: 17.5px; line-height: 1.6; color: rgba(222, 227, 255, .74); }
.bfilm-v { margin: clamp(28px, 3.4vw, 44px) 0 0; }
.bfilm-v video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 22px; background: #05070f; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(214, 220, 255, .12); }
@media (max-width: 760px) { .bfilm-v video { border-radius: 14px; } }
.logos { background: #fff; padding: 40px 0 calc(var(--sheet) + 36px); } /* the film's sheet rises over the bottom by --sheet */
.logos-in { text-align: center; }
.logos-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq 60s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq-run { display: flex; align-items: center; gap: 12px; padding-right: 12px; }
.mq-i { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); white-space: nowrap; transition: box-shadow .3s, transform .3s var(--ease); }
.mq-i img { width: 28px; height: 28px; object-fit: contain; filter: grayscale(1) contrast(.9) opacity(.62); transition: filter .35s; }
.mq-i b { font-size: 14.5px; font-weight: 700; color: var(--ink-3); letter-spacing: -0.01em; transition: color .35s; }
.mq-i:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-1); transform: translateY(-2px); }
.mq-i:hover img { filter: none; } .mq-i:hover b { color: var(--ink); }
html.reduced .mq-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } html.reduced .mq-run[aria-hidden] { display: none; } html.reduced .mq-run { flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- fork: two rich cards */
.fork { background: #fff; padding: 64px 0 96px; }
.fork-cards { gap: 18px; max-width: 1040px; }
.fork-c { padding: 14px 14px 26px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--hair), var(--sh-1); gap: 10px; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.fork-c:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2); }
.fork-c > b, .fork-c > span:not(.fork-vis) { margin: 0 12px; }
.fork-c[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--pick), 0 0 0 6px rgba(45, 60, 154, .07), var(--sh-2); }
.fork-ok { top: 24px; right: 24px; z-index: 3; background: rgba(255, 255, 255, .9); }
.fork-vis { position: relative; display: block; width: 100%; height: 200px; margin-bottom: 8px; border-radius: 20px; overflow: hidden; background: radial-gradient(90% 90% at 50% 100%, #e9ecf8 0%, #f6f7fb 60%, #fbfbfd 100%); }
.fv-shop img { position: absolute; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(16, 25, 56, .18)); transition: transform .6s var(--ease); }
.fv1 { width: 46%; left: 6%; top: 10%; z-index: 1; } .fv2 { width: 34%; left: 44%; top: 22%; z-index: 2; } .fv3 { width: 26%; right: 4%; top: 6%; transform: rotate(-8deg); } .fv4 { width: 20%; left: 34%; bottom: -4%; z-index: 3; }
.fork-c:hover .fv1 { transform: translate(-6px, -4px); } .fork-c:hover .fv2 { transform: translateY(-6px); } .fork-c:hover .fv3 { transform: rotate(-12deg) translate(4px, -6px); } .fork-c:hover .fv4 { transform: translateY(-8px) rotate(6deg); }
.fv-tag { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: 0 10px 24px rgba(16, 25, 56, .25); }
.fv-tag svg { width: 15px; height: 15px; color: #8ff0b6; }
.fv-svc { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 18px 22px; }
.fv-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fv-week i, .fv-slots i { font-style: normal; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.fv-week i { padding: 8px 0; font-size: 12.5px; color: var(--ink-3); }
.fv-week i.on { background: var(--ink); color: #fff; box-shadow: none; }
.fv-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fv-slots i { padding: 12px 0; font-size: 18px; letter-spacing: -0.02em; color: var(--ink-2); transition: all .4s var(--ease); }
.fv-slots i.on { background: var(--pick); color: #fff; box-shadow: 0 10px 24px rgba(45, 60, 154, .3); transform: translateY(-2px); }
.fv-ok { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: 0 10px 24px rgba(16, 25, 56, .25); }
.fv-ok svg { width: 15px; height: 15px; color: #8ff0b6; }

/* ---------------------------------------------------------------- light bands */
.how { background: linear-gradient(180deg, #fff 0, var(--paper) 220px); }
.hello2 { background: var(--paper); }
.try { background: var(--paper); }
.modules { background: linear-gradient(180deg, var(--paper) 0, #fff 260px); }
.price { background: #fff; }
.faq { background: linear-gradient(180deg, #fff 0, var(--paper) 100%); padding-bottom: calc(clamp(80px, 9vw, 130px) + var(--sheet)); }

/* ---------------------------------------------------------------- «what I do best» (galaxy + scenes): one continuous dark band */
.get { background: radial-gradient(90% 60% at 50% 0%, #141c4c 0%, var(--night) 55%); color: var(--on-dark); padding-bottom: 0; }
.get .kicker { color: var(--peri); } .get h2 { color: #fff; }
.gx-stage { background: radial-gradient(90% 80% at 68% 50%, #18225e 0%, #0c1233 45%, var(--night) 80%); }
.scenes { gap: clamp(36px, 5vw, 64px); padding: clamp(60px, 7vw, 96px) 0 clamp(50px, 6vw, 80px); }
.scene { gap: clamp(28px, 5vw, 70px); }
.scene .sc-copy h3 { color: #fff; }
.scene .sc-copy p:not(.sc-n) { color: var(--on-dark-2); }
.sc-vis::before { background: radial-gradient(60% 60% at 50% 50%, rgba(110, 125, 255, .22), transparent 70%); }
.scene .mock { box-shadow: 0 0 0 1px rgba(170, 180, 255, .18), 0 40px 100px rgba(0, 0, 0, .45); }
.scene .mock.call { background: linear-gradient(180deg, #1a2358, #0d1336); }

/* mid CTA: a dark glass capsule — a product moment */
.mid { background: var(--night); padding: 10px 0 calc(90px + var(--sheet)); }
.mid-inner { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding: 26px 26px 26px 30px; border-radius: 999px; background: linear-gradient(120deg, rgba(41, 52, 120, .55), rgba(15, 21, 52, .7)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 90px rgba(0, 0, 0, .45), 0 0 60px rgba(110, 125, 255, .12); }
.mid-inner::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(110deg, rgba(195, 201, 255, .55), rgba(154, 166, 255, .08) 40%, rgba(154, 166, 255, .08) 60%, rgba(195, 201, 255, .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.mid-copy { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.ava-mid { grid-row: span 2; width: 56px; height: 56px; }
.ava-mid > i { width: 12px; height: 12px; box-shadow: 0 0 0 2.5px #141b44; }
.mid-copy h2 { font-size: clamp(20px, 1.9vw, 26px); color: #fff; letter-spacing: -0.03em; }
.mid-copy p { color: var(--on-dark-2); font-size: 14.5px; }
.mid .url-cta { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.mid .url-in input { color: #fff; } .mid .url-in input::placeholder { color: var(--on-dark-3); } .mid .url-in svg { color: var(--on-dark-3); }
.mid .url-cta .pill { background: #fff; color: var(--ink); }
.mid-inner:has(.scan-out:not([hidden])) { border-radius: 30px; }
.mid .scan-out { background: rgba(255, 255, 255, .08); color: var(--on-dark-2); } .mid .scan-out b { color: #fff; }

/* try: a premium chat panel with depth */
.widget { box-shadow: 0 0 0 1px var(--hair), 0 2px 6px rgba(16, 25, 56, .04), 0 50px 120px rgba(25, 32, 80, .18); }
.try-grid { position: relative; }
.try-grid::after { content: ''; position: absolute; right: 4%; top: 8%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(110, 125, 255, .16), transparent 70%); filter: blur(10px); z-index: 0; pointer-events: none; }
.try-grid > * { position: relative; z-index: 1; }
.flows button { box-shadow: inset 0 0 0 1px var(--hair), var(--sh-1); }

/* modules */
.mod5 { border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--hair), var(--sh-1); }
.mod5:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2); }
.mod5.lead { box-shadow: inset 0 0 0 1.5px var(--pick), 0 0 0 6px rgba(45, 60, 154, .06), var(--sh-2); }
.mod5-v { background: linear-gradient(160deg, #f6f7fc, #eceff9); }

/* ---------------------------------------------------------------- pricing */
.plans { gap: 18px; align-items: stretch; }
.plan { position: relative; padding: 30px 30px 28px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--hair), var(--sh-1); }
.plan-top { padding-bottom: 18px; }
.plan-for { font-size: 13px; letter-spacing: .02em; }
.plan h3 { font-size: 26px; margin: 6px 0 16px; }
.plan-from { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.plan-from b { font-size: clamp(46px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; font-weight: 600; }
.plan-from small { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.plan-l li { font-variant-numeric: tabular-nums; }
.plan-ck { list-style: none; margin: 4px 0 24px; padding: 16px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 9px; flex: 1; }
.plan-ck li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.plan-ck li svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--pick-soft); color: var(--pick); margin-top: 1px; }
.plan-ck li:first-child { font-weight: 700; color: var(--ink); }
.plan.cur { background: radial-gradient(120% 90% at 100% 0%, #26307a 0%, #121a46 45%, #0a0e26 100%); color: #eef0fb; box-shadow: 0 40px 100px rgba(16, 25, 56, .35), 0 0 80px rgba(110, 125, 255, .18); }
.plan.cur::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(195, 201, 255, .75), rgba(154, 166, 255, .1) 45%, rgba(154, 166, 255, .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan.cur .plan-for, .plan.cur .plan-from, .plan.cur .plan-from small { color: var(--on-dark-3); }
.plan.cur h3, .plan.cur .plan-from b { color: #fff; }
.plan.cur .plan-l li { border-color: rgba(255, 255, 255, .1); color: var(--on-dark-2); } .plan.cur .plan-l li b { color: #fff; }
.plan.cur .plan-ck { border-color: rgba(255, 255, 255, .12); }
.plan.cur .plan-ck li { color: var(--on-dark-2); } .plan.cur .plan-ck li:first-child { color: #fff; }
.plan.cur .plan-ck li svg { background: rgba(143, 240, 182, .14); color: #8ff0b6; }
.pill-light { background: #fff; color: var(--ink); }
.plan-ent { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 18px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); text-align: left; margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.pe-k { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pe-t { flex: 1; } .pe-t::first-letter { text-transform: uppercase; }
.pe-a { flex: none; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--pick); text-decoration: none; }
.pe-a svg { width: 16px; height: 16px; transition: transform .25s var(--ease); } .pe-a:hover svg { transform: translateX(3px); }
.calc { border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--hair), var(--sh-1); }
.calc > summary { width: max-content; max-width: calc(100% - 24px); margin: 14px auto; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14.5px; transition: transform .25s var(--ease), box-shadow .25s; }
.calc > summary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(16, 25, 56, .18); }
.calc[open] > summary { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------------------------------------------------------------- FAQ: left column with a CTA card, hairline accordion */
.faq-grid { align-items: start; }
.faq .sec-head { position: sticky; top: 96px; }
.faq-cta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin-top: 30px; padding: 18px; border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--hair), var(--sh-1); }
.faq-cta .ava { width: 40px; height: 40px; }
.faq-cta p { display: flex; flex-direction: column; line-height: 1.35; font-size: 14px; color: var(--ink-2); }
.faq-cta p b { font-size: 15.5px; color: var(--ink); }
.faq-cta .pill { grid-column: 1 / -1; justify-self: start; margin-top: 8px; padding: 11px 18px; font-size: 14px; }
.faq-l details { border-top: 1px solid var(--hair); } .faq-l details:last-child { border-bottom: 1px solid var(--hair); }
.faq-l summary { transition: color .25s; } .faq-l summary:hover { color: var(--pick); }
.faq-l details p { overflow: hidden; }

/* ---------------------------------------------------------------- final CTA + footer: one dark ending */
.start { padding-bottom: clamp(70px, 8vw, 110px); }
.foot { background: var(--night); color: var(--on-dark-2); border-top: 0; padding: 30px 0 80px; }
.foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 30px 26px; padding-top: 34px; border-top: 1px solid var(--hair-d); }
.foot .brand { color: #fff; font-size: 21px; }
.foot-claim { margin-top: 12px; color: var(--on-dark-2); font-size: 14.5px; font-weight: 500; max-width: 22em; }
.lng-foot { display: inline-flex; margin-top: 18px; }
.foot-col { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.foot-col p { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 4px; }
.foot-col a { color: var(--on-dark-2); text-decoration: none; transition: color .2s; width: max-content; max-width: 100%; }
.foot-col a:hover { color: #fff; }
.foot-col .hide-m { display: inline; }
.foot-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--hair-d); }
.foot-small { color: var(--on-dark-3); } .foot-small a { color: var(--on-dark-2); }

/* ---------------------------------------------------------------- micro-interactions */
:where(.pane, .steps > li, .mod5, .plan, .bv-card, .fork-c, .vx-stage, .vx-call, .owner-beat, .dev-code, .ig, .scene .mock, .faq-cta) { position: relative; }
:is(.pane, .hw, .steps > li, .mod5, .plan, .bv-card, .fork-c, .vx-stage, .vx-call, .owner-beat, .dev-code, .ig, .scene .mock, .faq-cta, .widget)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .35s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 60, 154, .07), transparent 60%); }
.tone-dark :is(.pane, .hw, .steps > li, .vx-call, .owner-beat, .dev-code, .ig, .scene .mock, .plan.cur)::after, .plan.cur::after, .vx-call::after, .hw::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(195, 201, 255, .12), transparent 60%); }
@media (hover: hover) and (pointer: fine) { :is(.pane, .hw, .steps > li, .mod5, .plan, .bv-card, .fork-c, .vx-stage, .vx-call, .owner-beat, .dev-code, .ig, .scene .mock, .faq-cta, .widget):hover::after { opacity: 1; } }
.pill { transition: transform .25s var(--ease), box-shadow .25s, background .25s, translate .3s var(--ease); }
.pill:active { transform: scale(.97); }
.nav a { position: relative; }
.nav a.on { color: #fff; }
.nav a.on::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--peri); box-shadow: 0 0 8px var(--peri); }
.top-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #6b78e6, var(--peri)); opacity: .9; pointer-events: none; }
.rv { transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.reduced .top-prog { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; }
  .mid-inner { border-radius: 30px; padding: 24px; grid-template-columns: 1fr; gap: 18px; }
  .faq .sec-head { position: static; }
}
@media (max-width: 760px) {
  :root { --sheet: 28px; }
  .sec-head.ed { grid-template-columns: 1fr; padding-top: 16px; margin-bottom: 28px; } .sec-head.ed .sec-lead { grid-column: 1; margin-top: 12px; }
  .logos { padding: 30px 0 calc(var(--sheet) + 28px); } .logos-h { font-size: 11.5px; padding: 0 16px; } .mq-i { height: 46px; padding: 0 14px 0 10px; } .mq-i img { width: 24px; height: 24px; } .mq-i b { font-size: 13.5px; }
  .fork { padding: 48px 0 70px; }
  .fork-vis { height: 170px; } .fv-svc { padding: 14px; gap: 10px; } .fv-slots i { font-size: 16px; padding: 10px 0; } .fv-week i { padding: 6px 0; font-size: 11px; }
  .mid { padding-bottom: calc(60px + var(--sheet)); } .mid-inner { border-radius: 26px; padding: 20px 16px; } .ava-mid { width: 46px; height: 46px; }
  .plan { padding: 24px 20px; } .plan-ent { flex-wrap: wrap; } .pe-t { flex-basis: 100%; order: 3; }
  .calc > summary { font-size: 13.5px; padding: 12px 18px; text-align: center; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } .foot-base { flex-direction: column; } /* minmax(0): a long industry name wraps instead of widening the page */
  /* final CTA on phones: no film frame, a standalone browser preview card with glow, clean spacing */
  .start { padding: calc(64px + var(--sheet)) 0 56px; }
  .start-inner { order: 1; } .start-art { order: 2; }
  .start-art { position: relative; width: auto; margin: 36px 16px 0; aspect-ratio: auto; transform: none; top: auto; right: auto; }
  .start-art > img, .start-art::after { display: none; }
  .start-art .start-prev { position: relative; left: auto; top: auto; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(170, 180, 255, .25), 0 30px 80px rgba(0, 0, 0, .5), 0 0 80px rgba(110, 125, 255, .3); }
  .start-art .sp-body { height: 300px; } .start-art .sp-sk { display: grid; }
  .start-art .sp-chat, .start-art .start-prev.in .sp-chat { transform: none; width: min(290px, calc(100% - 24px)); right: 12px; bottom: 12px; }
  .start h2 { margin-bottom: 22px; }
}
.start-art .start-prev { margin: 0 !important; }
@media (max-width: 760px) {
  .start-art .start-prev { height: auto !important; }
  .start-art .sp-body { height: 300px !important; flex: none; }
}
@media (min-width: 761px) { .start-art .start-prev { max-width: none !important; left: 38.85%; top: 18.89%; width: 52.82%; height: 56.39%; } }
@media (min-width: 1101px) and (max-width: 1500px) { .start-art .sp-chat { scale: .8; transform-origin: right bottom; } .start-art .sp-sk { scale: .9; transform-origin: left top; } }
/* final polish: tight checklist in both plans, the calculator pill stands alone until opened, the fork radio never sits on «Нд» */
.plan-ck { align-content: start; }
.calc:not([open]) { background: none; box-shadow: none; }
.fv-week { margin-right: 40px; }
/* production host (plugix.ai): no concept pill or credit; the showcase keeps them */
.credit-prod { display: none; }
html[data-host="prod"] .concept, html[data-host="prod"] .credit-demo { display: none !important; }
html[data-host="prod"] .credit-prod { display: block; }
.scan-fail { margin-top: 8px; color: #ffb4b4; font-size: 13.5px; }

/* ================================================================ the Plugix assistant (js/assistant.js): dark glass, one lavender accent */
.pxa { --pa: #9aa6ff; --pa-2: #c3c9ff; --pa-3: #d6dbff; --pt: #eef0fb; --pt-2: rgba(222, 227, 255, .66); --pt-3: rgba(222, 227, 255, .44); --pl: rgba(195, 201, 255, .16);
  --pspring: cubic-bezier(.2, 1.15, .32, 1); font-family: Manrope, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; }
.pxa[hidden], .pxa-panel[hidden], .pxa-back[hidden], .pxa-call[hidden], .pxa-vsheet[hidden], .pxa-comp[hidden] { display: none !important; }
.pxa:not(.is-open) .pxa-panel, .pxa:not(.is-open) .pxa-back { pointer-events: none; }
.pxa button { font: inherit; }
html.pxa-on .concept { opacity: 0; pointer-events: none; }
html.pxa-lock, html.pxa-lock body { overflow: hidden; }

/* ---- launcher (as on Techora): a glass capsule, the «P» with a breathing voice ring, «Запитайте Plugix» over a short line;
   leans a few pixels toward the pointer, lifts on hover, and introduces itself in one line on hover / focus */
.pxa-launch { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 46; display: inline-flex; align-items: center; gap: 13px; height: 64px; padding: 0 24px 0 10px; border: 0; border-radius: 999px; color: #fff; text-align: left; cursor: pointer; translate: var(--mx, 0px) var(--my, 0px);
  background: radial-gradient(120% 140% at 0% 0%, rgba(154, 166, 255, .26), transparent 55%), linear-gradient(180deg, rgba(31, 38, 86, .9), rgba(9, 12, 30, .94));
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 50px rgba(4, 6, 18, .5), 0 0 0 1px rgba(4, 6, 16, .5), 0 0 46px rgba(154, 166, 255, .22);
  opacity: 0; visibility: hidden; transform: translateY(26px) scale(.9); transition: opacity .5s var(--ease), transform .7s var(--pspring), translate .5s var(--ease), visibility 0s .5s, box-shadow .3s; }
.pxa-launch::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(150deg, rgba(222, 226, 255, .7), rgba(154, 166, 255, .14) 40%, rgba(154, 166, 255, .05) 65%, rgba(195, 201, 255, .4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html.past-hero .pxa-launch { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .7s var(--pspring), translate .5s var(--ease), visibility 0s, box-shadow .3s; }
html.pxa-on .pxa-launch { opacity: 0; visibility: hidden; transform: scale(.86); transition: opacity .25s, transform .35s var(--ease), visibility 0s .3s; }
.pxa-launch:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 60px rgba(4, 6, 18, .55), 0 0 0 1px rgba(4, 6, 16, .5), 0 0 60px rgba(154, 166, 255, .38); }
.pxa-l-ava { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.pxa-l-ava .ava { width: 44px; height: 44px; box-shadow: inset 0 0 0 1px rgba(190, 198, 255, .45), 0 6px 18px rgba(0, 0, 0, .35); }
.pxa-l-ava .ava > i { width: 11px; height: 11px; right: 0; bottom: 0; box-shadow: 0 0 0 2.5px #0d1131; }
.pxa-l-ring { position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(170, 180, 255, .6); animation: pxaBreath 3.6s ease-in-out infinite; pointer-events: none; }
.pxa-l-ring.r2 { animation-delay: 1.8s; }
@keyframes pxaBreath { 0% { transform: scale(.94); opacity: 0; } 30% { opacity: .9; } 100% { transform: scale(1.42); opacity: 0; } }
.pxa-l-t { display: grid; gap: 2px; line-height: 1.2; white-space: nowrap; }
.pxa-l-t b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.pxa-l-t small { font-size: 12px; font-weight: 500; color: var(--pt-2); }
html:not(.pxa-on) .pxa-launch:hover { transform: translateY(-2px); }
html:not(.pxa-on) .pxa-launch:active { transform: scale(.98); transition-duration: .15s; }
.pxa-tip { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 78px); z-index: 46; max-width: 290px; margin: 0; padding: 11px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--pt);
  background: linear-gradient(180deg, rgba(31, 38, 86, .97), rgba(13, 17, 40, .98)); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(195, 201, 255, .18); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .35s var(--ease); }
.pxa-tip::after { content: ''; position: absolute; right: 38px; bottom: -6px; width: 12px; height: 12px; background: rgb(13, 17, 40); transform: rotate(45deg); box-shadow: inset -1px -1px 0 rgba(195, 201, 255, .18); }
.pxa-tip.on { opacity: 1; transform: none; }
html.pxa-on .pxa-tip { opacity: 0; }

/* ---- the panel: a floating glass sheet with depth, grain and a gradient hairline */
.pxa-back { position: fixed; inset: 0; z-index: 58; background: radial-gradient(80% 80% at 100% 100%, rgba(3, 4, 12, .46), rgba(3, 4, 12, .14) 70%); opacity: 0; transition: opacity .45s var(--ease); }
.pxa.is-open .pxa-back { opacity: 1; }
.pxa-panel { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; width: min(440px, calc(100vw - 32px)); height: min(680px, calc(100vh - 92px)); height: min(680px, calc(100dvh - 92px));
  display: flex; flex-direction: column; border-radius: 30px; color: var(--pt); overflow: hidden; overflow: clip; isolation: isolate; outline: none;
  background: radial-gradient(110% 55% at 100% 0%, rgba(154, 166, 255, .2), transparent 60%), radial-gradient(90% 50% at 0% 105%, rgba(97, 112, 255, .14), transparent 60%), linear-gradient(180deg, rgba(18, 23, 54, .9), rgba(7, 9, 23, .95));
  backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 60px 140px rgba(0, 0, 0, .6), 0 18px 44px rgba(0, 0, 0, .38), 0 0 0 1px rgba(3, 4, 12, .7), 0 0 100px rgba(154, 166, 255, .12);
  /* closed: clipped to the launcher's pill (vars from js morph()), a touch smaller, scaled from the launcher's centre */
  transform-origin: var(--ox, calc(100% - 31px)) var(--oy, calc(100% - 31px)); transform: scale(.965); opacity: 0; clip-path: inset(var(--ct, 62%) var(--cr, 0px) var(--cb, 0px) var(--cl, 42%) round var(--cr0, 30px));
  transition: clip-path .44s cubic-bezier(.6, 0, .25, 1) .05s, transform .44s cubic-bezier(.6, 0, .25, 1) .05s, opacity .16s ease .34s; }
.pxa.is-open .pxa-panel { transform: none; opacity: 1; clip-path: inset(0 0 0 0 round 30px); transition: clip-path .6s cubic-bezier(.16, 1, .3, 1), transform .7s var(--pspring), opacity .12s; }
.pxa-panel::before { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(160deg, rgba(226, 230, 255, .62), rgba(154, 166, 255, .16) 26%, rgba(154, 166, 255, .04) 60%, rgba(195, 201, 255, .3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pxa-panel::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pxa-panel > * { position: relative; z-index: 1; }
.pxa-panel > * { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.pxa.is-open .pxa-panel > * { opacity: 1; transform: none; transition-delay: .12s; }
.pxa.is-open .pxa-panel > .pxa-body { transition-delay: .18s; }
.pxa.is-open .pxa-panel > .pxa-cwrap, .pxa.is-open .pxa-panel > .pxa-foot { transition-delay: .24s; }
.pxa-grip { display: none; }

/* header */
.pxa-h { display: flex; align-items: center; gap: 11px; padding: 16px 14px 14px 16px; border-bottom: 1px solid rgba(195, 201, 255, .08); }
.pxa-h-ava .ava { width: 40px; height: 40px; box-shadow: inset 0 0 0 1px rgba(190, 198, 255, .45), 0 0 22px rgba(154, 166, 255, .3); }
.pxa-h-ava .ava > i { width: 10px; height: 10px; box-shadow: 0 0 0 2.5px #121736; }
.pxa-id { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pxa-id b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.pxa-id small { display: block; font-size: 12.5px; color: var(--pt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxa-id small .dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; animation: livePulse 2.2s ease-in-out infinite; }
.pxa-x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--pt); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .12); transition: background .2s, transform .3s var(--ease); }
.pxa-x:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }
.pxa-x svg { width: 17px; height: 17px; }
.pxa :focus-visible { outline: 2px solid var(--pa-2); outline-offset: 2px; }

/* body: the conversation */
.pxa-body { flex: 1; min-height: 0; display: grid; position: relative; overflow: hidden; overflow: clip; }
/* a slow lavender aura behind the greeting; it settles once the conversation starts */
.pxa-body::before { content: ''; position: absolute; inset: -12% -25% 35% -25%; z-index: 0; pointer-events: none; filter: blur(14px); opacity: 1; transition: opacity .8s var(--ease);
  background: radial-gradient(38% 42% at 28% 46%, rgba(154, 166, 255, .2), transparent 70%), radial-gradient(34% 36% at 76% 28%, rgba(97, 112, 255, .18), transparent 70%), radial-gradient(26% 30% at 58% 70%, rgba(195, 201, 255, .1), transparent 70%);
  animation: pxaAura 16s ease-in-out infinite alternate; }
.pxa.has-chat .pxa-body::before { opacity: .32; }
@keyframes pxaAura { 0% { transform: translate3d(-4%, -2%, 0) rotate(-6deg); } 100% { transform: translate3d(6%, 7%, 0) rotate(10deg) scale(1.12); } }
.pxa-log { position: relative; z-index: 1; }
.pxa-body > * { grid-area: 1 / 1; min-height: 0; }
.pxa-log { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 10px; scrollbar-width: thin; scrollbar-color: rgba(195, 201, 255, .22) transparent;
  -webkit-mask: linear-gradient(transparent, #000 16px, #000 calc(100% - 8px), transparent); mask: linear-gradient(transparent, #000 16px, #000 calc(100% - 8px), transparent); }

/* empty state (as on Techora): a strip of what it knows, the greeting, a quiet line, the chips, «ask by voice» */
.pxa-empty { display: flex; flex-direction: column; gap: 16px; }
.pxa-hello { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pxa-hello h3 { font-size: 25px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: #fff; }
.pxa-hello p { font-size: 14.5px; line-height: 1.5; color: var(--pt-2); max-width: 30em; }
.pxa-hello .pxa-hello-s { font-size: 13px; color: var(--pt-3); }
.pxa-strip { display: flex; margin-bottom: 10px; }
.pxa-strip span { width: 44px; height: 44px; margin-left: -9px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px #12173a, 0 8px 20px rgba(0, 0, 0, .35); animation: pxaPop .65s var(--pspring) both; animation-delay: calc(.2s + var(--k, 0) * 45ms); }
.pxa-strip span:first-child { margin-left: 0; }
.pxa-strip img { width: 24px; height: 24px; object-fit: contain; }
@keyframes pxaPop { from { opacity: 0; transform: translateY(6px) scale(.6); } }
.pxa-qs { display: flex; flex-wrap: wrap; gap: 8px; }
.pxa-q { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .18); color: var(--pt); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; animation: pxaIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + .2s); transition: background .25s, box-shadow .25s, transform .25s var(--ease); }
.pxa-q:hover { background: rgba(154, 166, 255, .16); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .5); transform: translateY(-1px); }
.pxa-q svg { width: 15px; height: 15px; color: var(--pa-2); }
.pxa-q-lead { background: rgba(154, 166, 255, .12); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .34); }
.pxa-vinv { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; padding: 10px 14px 10px 10px; border-radius: 18px; text-align: left; color: var(--pt); cursor: pointer; background: linear-gradient(100deg, rgba(154, 166, 255, .16), rgba(154, 166, 255, .04)); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .2); animation: pxaIn .6s var(--ease) both .52s; transition: box-shadow .25s, transform .25s var(--ease); }
.pxa-vinv:hover { box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .5); transform: translateY(-1px); }
.pxa-vinv-i { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #0b0f26; background: linear-gradient(180deg, var(--pa-3), var(--pa)); }
.pxa-vinv-i svg { width: 19px; height: 19px; }
.pxa-vinv-i i { position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(170, 180, 255, .6); animation: pxaBreath 3.2s ease-in-out infinite; }
.pxa-vinv > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.pxa-vinv b { font-size: 14.5px; } .pxa-vinv small { font-size: 12.5px; color: var(--pt-2); }
.pxa-vinv > svg { width: 18px; height: 18px; margin-left: auto; color: var(--pa-2); }

/* messages */
@keyframes pxaIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pxaInU { from { opacity: 0; transform: translate(14px, 8px) scale(.96); } to { opacity: 1; transform: none; } }
.pxa-m { animation: pxaIn .55s var(--ease) both; }
.pxa-u { align-self: flex-end; max-width: 84%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: linear-gradient(140deg, #dfe3ff, #aab4ff); color: #0b0f26; font-size: 14.5px; font-weight: 550; line-height: 1.45; box-shadow: 0 10px 28px rgba(154, 166, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .7); animation-name: pxaInU; overflow-wrap: anywhere; }
.pxa-u small, .pxa-vtag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; opacity: .66; margin-bottom: 2px; }
.pxa-u small svg, .pxa-vtag svg { width: 12px; height: 12px; }
.pxa-a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.pxa-a > .ava { width: 28px; height: 28px; margin-top: 1px; }
.pxa-a > .ava > i { width: 8px; height: 8px; box-shadow: 0 0 0 2px #10153a; }
.pxa-a-b { min-width: 0; font-size: 14.5px; line-height: 1.58; color: #e6e9ff; overflow-wrap: anywhere; }
.pxa-txt p + p, .pxa-txt p + ul, .pxa-txt ul + p { margin-top: 8px; }
.pxa-txt ul { margin: 6px 0 0; padding-left: 18px; } .pxa-txt li { margin: 2px 0; } .pxa-txt li::marker { color: var(--pa); }
.pxa-txt strong { color: #fff; font-weight: 700; }
.pxa-txt a { color: var(--pa-2); text-underline-offset: 3px; }
.pxa-caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 3px; vertical-align: -.16em; border-radius: 2px; background: var(--pa-2); box-shadow: 0 0 12px rgba(154, 166, 255, .8); animation: pxaBlink 1s steps(2, jump-none) infinite; }
@keyframes pxaBlink { 50% { opacity: .15; } }
/* «thinking»: a shimmer that reads like the facts are being looked through */
.pxa-think { display: flex; flex-direction: column; gap: 7px; padding-top: 3px; }
.pxa-think span { font-size: 13px; font-weight: 600; color: transparent; background: linear-gradient(90deg, rgba(195, 201, 255, .45) 0%, #fff 45%, rgba(195, 201, 255, .45) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: pxaShim 1.6s linear infinite; }
.pxa-think i { display: block; height: 9px; border-radius: 6px; background: linear-gradient(90deg, rgba(195, 201, 255, .07) 0%, rgba(195, 201, 255, .3) 40%, rgba(195, 201, 255, .07) 80%); background-size: 220% 100%; animation: pxaShim 1.6s linear infinite; }
.pxa-think i:nth-of-type(1) { width: 86%; } .pxa-think i:nth-of-type(2) { width: 58%; animation-delay: .15s; }
@keyframes pxaShim { from { background-position: 120% 0; } to { background-position: -100% 0; } }

/* cards */
.pxa-ui:empty { display: none; }
.pxa-ui > * { animation: pxaCard .7s var(--pspring) both; animation-delay: calc(var(--d, 0ms) + 60ms); }
@keyframes pxaCard { from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.pxa-card { margin-top: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .15), 0 14px 34px rgba(0, 0, 0, .28); }
.pxa-note { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--pt-3); }
.pxa-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; border: 0; border-radius: 999px; padding: 11px 17px; font-size: 13.5px; font-weight: 700; color: #0b0f26; cursor: pointer; background: #fff; box-shadow: 0 8px 22px rgba(154, 166, 255, .28); transition: transform .25s var(--ease), box-shadow .25s; }
.pxa-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(154, 166, 255, .45); }
.pxa-cta svg { width: 16px; height: 16px; }
.pxa-cta:disabled { opacity: .55; cursor: default; transform: none; }
/* pricing */
.pxa-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pxa-plan { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 12px; border-radius: 15px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .1); }
.pxa-plan.cur { background: linear-gradient(180deg, rgba(154, 166, 255, .22), rgba(154, 166, 255, .06)); box-shadow: inset 0 0 0 1px rgba(205, 210, 255, .5), 0 0 26px rgba(154, 166, 255, .15); }
.pxa-plan em { align-self: flex-start; margin-bottom: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #0b0f26; background: var(--pa-2); }
.pxa-plan > b { font-size: 14px; color: #fff; letter-spacing: -0.01em; line-height: 1.25; }
.pxa-plan > small { font-size: 11.5px; line-height: 1.3; color: var(--pt-2); }
.pxa-plan-p { margin-top: auto; padding-top: 10px; font-size: 11.5px; color: var(--pt-2); white-space: nowrap; }
.pxa-plan-p b { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.pxa-tiers { list-style: none; margin: 10px 0 0; padding: 0; }
.pxa-tiers li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; font-size: 12.5px; color: var(--pt-2); border-top: 1px solid rgba(195, 201, 255, .08); }
.pxa-tiers b { color: #fff; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pxa-tiers li span small { display: block; font-size: 11.5px; color: var(--pt-3); margin-top: 1px; } .pxa-tiers b small { color: var(--pt-3); font-weight: 500; }
.pxa-price .pxa-cta { width: 100%; }
/* integration chips (real logos) */
.pxa-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pxa-chips li { animation: pxaIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + var(--d, 0ms) + 120ms); }
.pxa-chip { display: inline-flex; align-items: center; gap: 9px; border: 0; padding: 5px 13px 5px 5px; border-radius: 999px; text-align: left; cursor: pointer; color: var(--pt); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .16); transition: background .25s, box-shadow .25s, transform .25s var(--ease); }
.pxa-chip:hover { background: rgba(154, 166, 255, .14); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .45); transform: translateY(-1px); }
.pxa-logo { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #10142b; font-size: 10px; font-weight: 800; box-shadow: 0 0 0 3px rgba(154, 166, 255, .12); }
.pxa-logo img { width: 19px; height: 19px; object-fit: contain; border-radius: 4px; }
.pxa-logo svg { width: 17px; height: 17px; }
.pxa-chip-t { display: flex; flex-direction: column; line-height: 1.2; }
.pxa-chip-t b { font-size: 13px; font-weight: 650; }
.pxa-chip-t small { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #8ff0b6; }
.pxa-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px rgba(63, 191, 122, .8); }
/* «show me on the page» */
.pxa-goto { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; border: 0; padding: 10px 14px 10px 10px; border-radius: 18px; text-align: left; cursor: pointer; color: var(--pt); position: relative; overflow: hidden;
  background: linear-gradient(100deg, rgba(154, 166, 255, .18), rgba(154, 166, 255, .05)); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .3); transition: box-shadow .25s, transform .25s var(--ease); }
.pxa-goto:hover { box-shadow: inset 0 0 0 1px rgba(205, 210, 255, .6); transform: translateY(-1px); }
.pxa-goto-i { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(154, 166, 255, .24); color: #fff; }
.pxa-goto-i svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .35s var(--ease); }
.pxa-goto:hover .pxa-goto-i svg { transform: rotate(90deg) translateX(3px); }
.pxa-goto > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.pxa-goto small { font-size: 11.5px; color: var(--pt-2); } .pxa-goto b { font-size: 14.5px; }
.pxa-goto-k { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%); background-size: 250% 100%; animation: pxaShim 2.6s ease-in-out 1s 2; pointer-events: none; }
/* the inline lead form */
.pxa-lead-h { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.pxa-lead-h b { font-size: 14.5px; color: #fff; } .pxa-lead-h span { font-size: 12.5px; color: var(--pt-2); }
.pxa-field { display: block; margin-top: 10px; }
.pxa-field span { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; color: var(--pt-2); margin-bottom: 5px; }
.pxa-field input { width: 100%; border: 0; outline: none; padding: 11px 13px; border-radius: 13px; font-size: 15px; color: #fff; background: rgba(4, 6, 18, .55); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .18); transition: box-shadow .2s; }
.pxa-field input::placeholder { color: var(--pt-3); }
.pxa-field input:focus { box-shadow: inset 0 0 0 1.5px var(--pa), 0 0 0 4px rgba(154, 166, 255, .16); }
.pxa-field input.bad { box-shadow: inset 0 0 0 1.5px #ff8f9a; }
.pxa-lead .pxa-cta { width: 100%; }
.pxa-lead-msg { margin-top: 8px; font-size: 12.5px; color: var(--pt-2); } .pxa-lead-msg.err { color: #ffb1b9; }
.pxa-lead.sent { background: linear-gradient(180deg, rgba(63, 191, 122, .14), rgba(63, 191, 122, .04)); box-shadow: inset 0 0 0 1px rgba(143, 240, 182, .3); }
.pxa-done { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #d6ffe6; font-weight: 600; }
.pxa-done svg { width: 20px; height: 20px; flex: none; color: #8ff0b6; margin-top: 1px; }
.pxa-retry { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; border: 0; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--pt); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .22); cursor: pointer; }
.pxa-retry svg { width: 15px; height: 15px; }

/* composer + footer */
.pxa-comp { display: flex; align-items: flex-end; gap: 6px; margin: 8px 14px 0; padding: 6px 6px 6px 16px; border-radius: 24px; background: rgba(4, 6, 18, .55); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .17); transition: box-shadow .25s; }
.pxa-comp:focus-within { box-shadow: inset 0 0 0 1px rgba(205, 210, 255, .5), 0 0 0 4px rgba(154, 166, 255, .12), 0 0 30px rgba(154, 166, 255, .12); }
.pxa-comp textarea { flex: 1; min-width: 0; max-height: 120px; resize: none; border: 0; outline: none; background: none; padding: 9px 0; font: inherit; font-size: 15px; line-height: 1.45; color: #fff; }
.pxa-comp textarea::placeholder { color: var(--pt-3); }
.pxa-comp textarea:focus-visible { outline: none; }
.pxa-mic, .pxa-send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--ease), background .25s, opacity .25s; }
.pxa-mic { background: rgba(255, 255, 255, .06); color: var(--pa-2); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .16); }
.pxa-mic[hidden] { display: none; } /* a page without voice (the /crm/ demos, js/crm-assist.js) */
.pxa-mic:hover { background: rgba(154, 166, 255, .18); }
.pxa-send { background: linear-gradient(180deg, var(--pa-3), var(--pa)); color: #0b0f26; box-shadow: 0 6px 18px rgba(154, 166, 255, .35); }
.pxa-send:hover { transform: translateY(-1px); }
.pxa-send:disabled { opacity: .45; cursor: default; transform: none; }
.pxa-mic svg, .pxa-send svg { width: 18px; height: 18px; }
.pxa-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--pt-3); text-align: center; }
.pxa-foot svg { width: 14px; height: 14px; flex: none; color: var(--pa); }

/* ---- voice (as on Techora): the consent in the composer's place, the live call as a bar under the header; its words land in the chat */
.pxa-call { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; background: linear-gradient(100deg, rgba(154, 166, 255, .2), rgba(154, 166, 255, .06)); border-bottom: 1px solid rgba(195, 201, 255, .14); }
.pxa-eq { display: flex; align-items: center; gap: 3px; height: 26px; flex: none; }
.pxa-eq i { width: 4px; height: 26px; border-radius: 2px; background: var(--pa); box-shadow: 0 0 10px rgba(154, 166, 255, .6); transform: scaleY(var(--l, .2)); transition: transform .08s linear; }
.pxa-call.me .pxa-eq i { background: #fff; }
.pxa-call-t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.pxa-call-t b { font-size: 14px; color: #fff; }
.pxa-call-t small { font-size: 11.5px; color: var(--pt-3); font-variant-numeric: tabular-nums; }
.pxa-time { color: var(--pt-2); font-weight: 700; }
.pxa-v-mute { position: relative; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .22); transition: background .25s; }
.pxa-v-mute svg { width: 19px; height: 19px; grid-area: 1 / 1; }
.pxa-v-mute svg:last-child { display: none; }
.pxa-v-mute[aria-pressed="true"] { background: var(--pa-2); color: #0b0f26; }
.pxa-v-mute[aria-pressed="true"] svg:first-child { display: none; } .pxa-v-mute[aria-pressed="true"] svg:last-child { display: block; }
.pxa-v-end { display: inline-flex; align-items: center; gap: 7px; height: 40px; flex: none; border: 0; padding: 0 16px 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; color: #0b0f26; background: #fff; transition: transform .25s var(--ease); }
.pxa-v-end:hover { transform: translateY(-1px); }
.pxa-v-end svg { width: 15px; height: 15px; color: #e5484d; }
.pxa-vsheet { margin: 8px 14px 0; animation: pxaIn .35s var(--ease) both; }
.pxa-v-go { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px; border-radius: 20px; background: linear-gradient(100deg, rgba(154, 166, 255, .16), rgba(154, 166, 255, .05)); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .22); }
.pxa-v-go b { font-size: 15px; color: #fff; }
.pxa-v-go p { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--pt-2); }
.pxa-v-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pxa-v-acts .pxa-cta { flex: 1; margin-top: 0; }
/* a line from the page itself in the log (the call ended, voice is unavailable); the hint when no card fits */
.pxa-lnote { align-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; color: var(--pt-2); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .14); }
.pxa-lnote svg { width: 14px; height: 14px; flex: none; color: var(--pa); }
.pxa-lnote.warn svg { color: var(--pt-3); }
.pxa-hint { margin-top: 8px; font-size: 13px; color: var(--pt-3); }
.pxa-link { border: 0; background: none; padding: 6px; font-size: 13px; font-weight: 600; color: var(--pa-2); text-decoration: underline; text-decoration-color: rgba(195, 201, 255, .35); text-underline-offset: 4px; cursor: pointer; }
.pxa-link:hover { color: #fff; }

/* ---- «show me on the page»: a lavender spotlight over the section */
.pxa-spot { position: absolute; z-index: 35; pointer-events: none; border-radius: 30px; opacity: 0; animation: pxaSpot 2.8s var(--ease) forwards;
  box-shadow: 0 0 0 2px rgba(205, 210, 255, .95), 0 0 0 9px rgba(154, 166, 255, .18), 0 0 90px 12px rgba(154, 166, 255, .4), 0 0 0 200vmax rgba(4, 6, 16, .36); }
@keyframes pxaSpot { 0% { opacity: 0; transform: scale(1.025); } 14% { opacity: 1; transform: none; } 72% { opacity: 1; } 100% { opacity: 0; } }

/* ---- entry points on the page: the hero link and the FAQ card */
.lnk-ask { gap: 9px; margin-left: 22px; font-weight: 600; color: rgba(226, 230, 255, .78); text-decoration: none; }
.lnk-ask .ava { width: 24px; height: 24px; }
.lnk-ask .ava > i { width: 7px; height: 7px; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px #05070f; }
.lnk-ask > span:last-child { border-bottom: 1px solid rgba(195, 201, 255, .35); padding-bottom: 1px; transition: border-color .25s, color .25s; }
.lnk-ask:hover { color: #fff; } .lnk-ask:hover > span:last-child { border-color: var(--peri-2); }
.faq-cta .pill svg:first-child { width: 16px; height: 16px; }

/* ---- phones: a full-height bottom sheet you drag down to close */
@media (max-width: 760px) {
  .pxa-launch { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); height: 58px; padding: 0 20px 0 8px; gap: 11px; }
  .pxa-l-t b { font-size: 14.5px; } .pxa-l-t small { font-size: 11.5px; }
  .pxa-tip { display: none; }
  .pxa-l-ava, .pxa-l-ava .ava { width: 42px; height: 42px; }
  .pxa-back { background: rgba(3, 4, 12, .6); }
  .pxa-panel { left: 0; right: 0; top: max(10px, env(safe-area-inset-top)); bottom: var(--kb, 0px); width: auto; height: auto; border-radius: 26px 26px 0 0; clip-path: none; opacity: 1; transform: translateY(105%); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2, .9, .25, 1); }
  .pxa.is-open .pxa-panel { transform: translateY(var(--drag, 0px)); clip-path: none; }
  .pxa.dragging .pxa-panel { transition: none; }
  .pxa-grip { display: grid; place-items: center; height: 18px; padding-top: 8px; touch-action: none; }
  .pxa-grip i { width: 42px; height: 5px; border-radius: 3px; background: rgba(222, 227, 255, .28); }
  .pxa-h { padding: 8px 12px 12px 14px; touch-action: none; }
  .pxa-log { padding: 14px 14px 8px; }
  .pxa-hello h3 { font-size: 23px; }
  .pxa-comp, .pxa-vsheet { margin: 6px 10px 0; }
  .pxa-call { padding: 9px 12px 9px 14px; gap: 10px; }
  .pxa-comp textarea, .pxa-field input { font-size: 16px; }
  .pxa-foot { padding: 8px 14px max(12px, env(safe-area-inset-bottom)); }
  .film-copy .lnk-ask { display: inline-flex; margin: 12px 0 0; font-size: 14px; }
}
@media (max-width: 380px) { .pxa-plans { grid-template-columns: 1fr; } }

/* ---- reduced motion: no breathing, no morphing, no shimmer travel */
html.reduced .pxa-l-ring, html.reduced .pxa-vinv-i i, html.reduced .pxa-goto-k { animation: none; opacity: 0; }
html.reduced .pxa-launch { translate: none; }
html.reduced .pxa-strip span, html.reduced .pxa-vsheet { animation: none; }
html.reduced .pxa-body::before { animation: none; }
html.reduced .pxa-launch, html.reduced .pxa-panel, html.reduced .pxa-panel > *, html.reduced .pxa-back { transition: none !important; }
html.reduced .pxa-m, html.reduced .pxa-q, html.reduced .pxa-vinv, html.reduced .pxa-ui > *, html.reduced .pxa-chips li { animation: none; }
html.reduced .pxa-think span, html.reduced .pxa-think i, html.reduced .pxa-caret { animation: none; }
html.reduced .pxa-think span { color: var(--pt-2); background: none; }
html.reduced .pxa-spot { animation-duration: 2.4s; animation-timing-function: steps(1, end); }
html.reduced .pxa-panel { clip-path: none; }
html.rec .pxa { display: none; }

/* ------------------------------------------------------------------ «Розгорнути»: the chat as a large centred window, 80% of the screen
   (owner 17.10). Default stays the compact corner panel; the header button toggles. Text keeps a readable column. */
.pxa-wide { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: var(--pt-2); transition: background .2s, color .2s; }
.pxa-wide:hover { background: rgba(255, 255, 255, .06); color: var(--pt); }
.pxa-wide svg { width: 18px; height: 18px; }
.pxa-wide .pxa-wide-off, .pxa.wide .pxa-wide .pxa-wide-on { display: none; }
.pxa.wide .pxa-wide .pxa-wide-off { display: block; }
@media (min-width: 1024px) {
  .pxa-panel { transition: clip-path .44s cubic-bezier(.6, 0, .25, 1) .05s, transform .44s cubic-bezier(.6, 0, .25, 1) .05s, opacity .16s ease .34s, right .55s var(--ease), bottom .55s var(--ease), width .55s var(--ease), height .55s var(--ease); }
  .pxa.is-open .pxa-panel { transition: clip-path .6s cubic-bezier(.16, 1, .3, 1), transform .7s var(--pspring), opacity .12s, right .55s var(--ease), bottom .55s var(--ease), width .55s var(--ease), height .55s var(--ease); }
  .pxa.wide .pxa-panel { right: 10vw; bottom: 10vh; width: 80vw; height: 80vh; transform-origin: 50% 100%; }
  .pxa.wide .pxa-back { background: rgba(3, 4, 12, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .pxa.wide .pxa-log { padding: 24px max(20px, calc((100% - 900px) / 2)) 12px; gap: 16px; }
  .pxa.wide .pxa-comp, .pxa.wide .pxa-vsheet { margin-left: max(14px, calc((100% - 900px) / 2)); margin-right: max(14px, calc((100% - 900px) / 2)); }
  .pxa.wide .pxa-call { padding-left: max(18px, calc((100% - 900px) / 2)); padding-right: max(14px, calc((100% - 900px) / 2)); }
}
@media (max-width: 1023px) { .pxa-wide { display: none; } }
/* the launcher is always on screen, from the first screen down (owner 17.10), and hides only while the chat is open */
html:not(.pxa-on) .pxa-launch { opacity: 1; visibility: visible; transform: none; }