/* Sections below the hero (except security), in the spirit of Attio / Rillet:
   thin line grid, sentence-case headings, real product UI instead of decoration.
   Colours come from the theme tokens in style.css. */
:root {
  --x-font: "Inter", var(--font);
  --x-mono: var(--x-font);
  --x-dots: radial-gradient(rgb(var(--fg) / .14) 1px, transparent 1.3px) 0 0 / 18px 18px;
  --x-hatch: repeating-linear-gradient(-45deg, rgb(var(--fg) / .07) 0 1px, transparent 1px 9px);
  --x-shadow: 0 1px 0 rgb(var(--fg) / .04), 0 28px 56px -28px rgb(0 0 0 / .55);
  --x-ok: #3ddc84; --x-warn: #ffb547; --x-danger: #ff7b7b; --x-info: #7d9bff;
}
[data-theme="light"] {
  --x-shadow: 0 1px 2px rgb(11 31 79 / .05), 0 24px 48px -28px rgb(11 31 79 / .3);
  --x-ok: #13824a; --x-warn: #a86400; --x-danger: #cc2f36; --x-info: #2a5bff;
}
[data-theme="light"] .on-navy:not(.hs-anim) { --x-ok: #3ddc84; --x-warn: #ffb547; --x-danger: #ff7b7b; --x-info: #7d9bff; }

.x-sec { position: relative; border-top: 1px solid var(--line); font-family: var(--x-font); }
.x-sec h3:not(.x-h2), .foot { font-family: var(--x-font); }
.x-sec button::before { content: none; }
.x-sec button:hover { transform: none; box-shadow: none; }
.nw { white-space: nowrap; }

/* ---------- head ---------- */
.x-head { padding: 128px var(--pad) 64px; }
.x-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.x-h2 { max-width: 900px; font: 500 clamp(32px, 3.9vw, 56px)/1.05 var(--font-head); letter-spacing: 0; color: var(--text); text-wrap: balance; }
.x-h2 > span:not(.nw) { color: var(--subtle); }
.x-head__sub { max-width: 640px; margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.x-li__h { display: flex; align-items: center; gap: 12px; }
.x-cell__t { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.x-step { cursor: pointer; }
.x-step:focus-visible { outline: 2px solid var(--text-accent); outline-offset: -2px; }
.x-head__p { flex: none; max-width: 400px; font-size: 17px; line-height: 1.55; color: var(--text-2); }

/* ---------- buttons, links ---------- */
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border: 1px solid var(--line-3); font: 500 15px var(--x-font); color: var(--text); white-space: nowrap; transition: background .2s, border-color .2s, color .2s, filter .2s; }
.x-btn .i { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.x-btn:hover { border-color: rgb(var(--fg) / .45); }
.x-btn:hover .i { transform: translateX(3px); }
.x-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.x-btn--primary:hover { border-color: var(--accent); filter: brightness(1.08); }
[data-theme="light"] .x-sec:not(.on-navy) .x-btn--primary:hover { filter: brightness(1.35); }
.x-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line-3); font-size: 15px; font-weight: 500; white-space: nowrap; transition: border-color .2s; }
.x-link .i { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.x-link:hover { border-color: var(--text); }
.x-link:hover .i { transform: translateX(3px); }

/* ---------- shared grid pieces ---------- */
.x-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border-top: 1px solid var(--line); }
.x-split > :first-child { border-right: 1px solid var(--line); }
.x-canvas { position: relative; display: flex; align-items: center; justify-content: center; padding: 64px var(--pad) 64px 64px; background: var(--x-dots); }
.x-cells { display: grid; border-top: 1px solid var(--line); }
.x-cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x-cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.x-cell { padding: 40px 40px 44px; border-right: 1px solid var(--line); }
.x-cell:first-child { padding-left: var(--pad); }
.x-cell:last-child { padding-right: var(--pad); border-right: 0; }
.x-cell h3 { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.x-cell p:not(.x-num) { margin-top: 8px; font-size: 15px; color: var(--text-2); }
.x-cell .x-cell__l { margin-top: 14px; }
.x-num { font: 500 clamp(44px, 4.4vw, 64px)/1 var(--x-font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.x-num--acc { color: var(--text-accent); }
.x-cell--link { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; background: var(--accent); color: var(--on-accent); transition: filter .2s; }
.x-cell--link .i { width: 26px; height: 26px; transition: transform .3s var(--ease); }
.x-cell--link:hover { filter: brightness(1.08); }
.x-cell--link:hover .i { transform: translateX(5px); }
.x-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px var(--pad); }
.x-bar p { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.x-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.x-rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.x-rv.in { opacity: 1; transform: none; }

/* ---------- product UI kit ---------- */
.x-win { width: 100%; max-width: 680px; background: var(--raised); border: 1px solid var(--line-2); box-shadow: var(--x-shadow); font-size: 14px; color: var(--text); }
.x-win__bar { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.x-win__path { color: var(--subtle); }
.x-win__meta { margin-left: auto; font: 500 11.5px var(--x-mono); color: var(--subtle); }
.x-win__meta b { color: var(--text); }
.x-rec { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.x-rec b { display: block; font-size: 15px; font-weight: 600; }
.x-rec small { display: block; font-size: 12px; color: var(--subtle); }
.x-rec .x-pill { margin-left: auto; }
.x-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: rgb(var(--fg) / .08); font: 600 12px var(--x-font); color: var(--text); }
.x-pill { display: inline-block; padding: 3px 7px; border: 1px solid var(--line-3); font: 500 10.5px/1.2 var(--x-mono); color: var(--text-2); vertical-align: middle; }
.x-rows { display: flex; flex-direction: column; }
.x-row { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; align-items: center; gap: 14px; min-height: 46px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.x-row:last-child { border-bottom: 0; }
.x-row__t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.x-row__v { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.x-mod { font: 500 10.5px var(--x-mono); color: var(--subtle); }
.x-st { justify-self: end; padding: 3px 8px; background: rgb(var(--fg) / .06); font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--text-2); white-space: nowrap; }
.x-st--ok { background: color-mix(in srgb, var(--x-ok) 14%, transparent); color: var(--x-ok); }
.x-st--warn { background: color-mix(in srgb, var(--x-warn) 15%, transparent); color: var(--x-warn); }
.x-st--danger { background: color-mix(in srgb, var(--x-danger) 14%, transparent); color: var(--x-danger); }
.x-st--info { background: color-mix(in srgb, var(--x-info) 15%, transparent); color: var(--x-info); }
.x-tg { position: relative; width: 34px; height: 20px; flex: none; justify-self: end; border-radius: 999px; background: rgb(var(--fg) / .16); transition: background .35s; }
.x-tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .35s var(--ease); }
.x-tg.is-on { background: var(--accent); }
.x-tg.is-on::after { transform: translateX(14px); }
.x-lbl { padding: 16px 16px 8px; font: 500 10.5px var(--x-mono); color: var(--subtle); }

/* ---------- 01 platform ---------- */
.x-steps { display: flex; flex-direction: column; }
.x-steps::after { content: ""; flex: 1; min-height: 40px; background: var(--x-hatch); }
.x-step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 28px 40px 28px var(--pad); border-bottom: 1px solid var(--line); color: var(--subtle); transition: background .25s, color .25s; }
.x-step:hover { color: var(--text); }
.x-step__n { padding-top: 5px; font: 500 12px var(--x-mono); }
.x-step__t { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.x-step__p { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); transition: max-height .5s var(--ease), opacity .35s, margin .5s var(--ease); }
.x-step.is-on { color: var(--text); }
.x-step.is-on .x-step__n { color: var(--text-accent); }
.x-step.is-on .x-step__p { max-height: 90px; margin-top: 8px; opacity: 1; }
.x-step__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; }
.x-step__bar span { display: block; width: 0; height: 100%; background: var(--text-accent); }
.x-step.is-on .x-step__bar span { animation: xBar var(--dur, 5s) linear forwards; }
@keyframes xBar { to { width: 100%; } }

.x-stage { display: grid; min-height: 540px; }
.x-screen { grid-area: 1 / 1; align-self: center; justify-self: center; width: 100%; opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .45s, transform .6s var(--ease), visibility 0s .6s; }
.x-stage[data-step="1"] [data-s="1"],
.x-stage[data-step="2"] [data-s="2"],
.x-stage[data-step="3"] [data-s="3"] { opacity: 1; transform: none; visibility: visible; transition: opacity .5s .15s, transform .7s var(--ease) .15s, visibility 0s; }
.x-screen .x-row { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.x-stage[data-step="1"] [data-s="1"] .x-row,
.x-stage[data-step="2"] [data-s="2"] .x-row,
.x-stage[data-step="3"] [data-s="3"] .x-row { opacity: 1; transform: none; }
.x-screen .x-row:nth-child(2) { transition-delay: .08s; }
.x-screen .x-row:nth-child(3) { transition-delay: .16s; }
.x-screen .x-row:nth-child(4) { transition-delay: .24s; }
.x-screen .x-row:nth-child(5) { transition-delay: .32s; }
.x-screen .x-row:nth-child(6) { transition-delay: .4s; }
[data-s="3"] .x-row:nth-child(n) { transition-delay: calc(var(--i, 0) * .35s + .3s); }
[data-s="3"] .x-row:nth-child(2) { --i: 1; }
[data-s="3"] .x-row:nth-child(3) { --i: 2; }
[data-s="3"] .x-row:nth-child(4) { --i: 3; }
[data-s="1"] .x-row { grid-template-columns: 84px minmax(0, 1fr) auto 84px; grid-auto-flow: row; }
[data-s="2"] .x-row { grid-template-columns: minmax(0, 1fr) auto 40px; grid-auto-flow: row; }
[data-s="3"] .x-row { grid-template-columns: 62px minmax(0, 1fr) auto; grid-auto-flow: row; }
[data-s="3"] .x-st { justify-self: start; }
.x-ask { padding: 16px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.x-ask::before { content: "› "; color: var(--text-accent); }
.x-row--new { transition: background .4s; }
.x-stage.is-added .x-row--new { background: rgb(var(--fg) / .04); }
.x-stage.is-added .x-row--new .x-tg { background: var(--accent); }
.x-stage.is-added .x-row--new .x-tg::after { transform: translateX(14px); }

/* ---------- 02 problem ---------- */
.x-table { border-top: 1px solid var(--line); }
.x-tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.x-tr > * { padding: 28px 40px; border-right: 1px solid var(--line); }
.x-tr > :first-child { padding-left: var(--pad); }
.x-tr > :last-child { padding-right: var(--pad); border-right: 0; }
.x-tr h3 { font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.x-tr p { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.x-tr .x-was { color: var(--subtle); text-decoration: line-through; text-decoration-color: rgb(var(--fg) / .25); }
.x-tr--h > * { padding-top: 14px; padding-bottom: 14px; font: 500 11.5px var(--x-mono); color: var(--subtle); }
.x-tr--h > :last-child { color: var(--text-accent); }
.x-tr.x-rv { transform: none; }
.x-tr.x-rv .x-was { transition: color .6s .2s; }

/* ---------- 03 modules: glass bento (fintech look: rounded glass cards, one light source per card) ---------- */
.x-modules {
  --x-r: 20px;
  --x-glow: rgb(204 255 0 / .13);
  --x-glow-strong: rgb(204 255 0 / .35);
  --x-surf-bg: rgb(255 255 255 / .05);
  --x-surf-solid: #0e1c3d;
  --x-surf-line: rgb(150 180 255 / .14);
  --x-tile: #12224a;
  padding-bottom: 128px;
}
[data-theme="light"] .x-modules {
  --x-glow: rgb(42 91 255 / .08);
  --x-glow-strong: rgb(42 91 255 / .25);
  --x-surf-bg: #fff;
  --x-surf-solid: #fff;
  --x-surf-line: rgb(11 31 79 / .1);
  --x-tile: #fff;
}
.x-gb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 0 var(--pad); }
.x-gc--4 { grid-column: span 4; }
.x-gc--5 { grid-column: span 5; }
.x-gc--6 { grid-column: span 6; }
.x-gc--7 { grid-column: span 7; }
.x-gc { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 400px; overflow: hidden; border-radius: var(--x-r); border: 1px solid rgb(var(--fg) / .08); background: linear-gradient(180deg, rgb(var(--fg) / .045), rgb(var(--fg) / .012) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); transition: border-color .35s, box-shadow .35s; }
.x-gc.x-rv { transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .35s, box-shadow .35s; }
.x-gc::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(65% 75% at var(--gx, 50%) var(--gy, 0%), var(--x-glow), transparent 70%); opacity: .75; transition: opacity .4s; }
@media (hover: hover) { .x-gc:hover { border-color: rgb(var(--fg) / .16); } }
@media (hover: hover) { .x-gc:hover::before { opacity: 1; } }
[data-theme="light"] .x-gc { border-color: rgb(11 31 79 / .08); background: linear-gradient(180deg, #fff, #f7f9fe); box-shadow: 0 1px 2px rgb(11 31 79 / .04), 0 22px 44px -30px rgb(11 31 79 / .3); }
.x-gc__vis { position: relative; flex: 1; min-height: 250px; display: flex; align-items: center; justify-content: center; padding: 36px 32px 12px; }
.x-gc__txt { padding: 0 76px 30px 32px; }
.x-gc h3 { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.x-gc__txt p { max-width: 400px; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.x-gc__go { position: absolute; right: 24px; bottom: 28px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(var(--fg) / .12); color: var(--subtle); transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease); }
.x-gc__go .i { width: 16px; height: 16px; }
@media (hover: hover) { .x-gc:hover .x-gc__go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: rotate(45deg); } }
.x-modules .x-st { border-radius: 999px; }

/* CRM pipeline: one deal travels to the next stage */
.x-pipe { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.x-pipe__col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgb(var(--fg) / .03); border: 1px solid rgb(var(--fg) / .06); }
.x-pipe__col > p { display: flex; justify-content: space-between; padding: 2px 4px 4px; font-size: 12px; color: var(--text-2); }
.x-pipe__col > p b { font-weight: 500; color: var(--subtle); }
.x-deal { position: relative; min-height: 54px; padding: 10px 12px; border-radius: 10px; background: var(--x-surf-bg); border: 1px solid var(--x-surf-line); font-size: 12.5px; }
.x-deal b { display: block; padding-right: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.x-deal span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.x-deal i { position: absolute; right: 9px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: #2a5bff; color: #fff; font: 600 8.5px/20px var(--x-font); font-style: normal; text-align: center; }
.x-deal--slot { background: transparent; border-style: dashed; }
.x-deal--move { z-index: 2; animation: xDeal 6s var(--ease) infinite; }
@keyframes xDeal {
  0%, 30% { transform: none; }
  45%, 85% { transform: translateX(calc(100% + 34px)); border-color: var(--text-accent); box-shadow: 0 0 0 1px var(--text-accent), 0 12px 30px -8px var(--x-glow-strong); }
  100% { transform: none; }
}

/* Finance: big number, glowing line chart */
.x-gc__vis.x-fin { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-bottom: 0; }
.x-fin__l { font-size: 13px; color: var(--text-2); }
.x-fin__n { margin-top: 10px; font-size: clamp(36px, 3.3vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.x-fin__n small { margin-left: 8px; font-size: 18px; letter-spacing: 0; color: var(--text-2); }
.x-fin__d { margin-top: 10px; font-size: 13px; color: var(--x-ok); }
.x-fin__chart { display: block; width: calc(100% + 64px); height: 120px; margin: auto -32px 0; color: var(--text-accent); overflow: visible; }
.x-fin__line { fill: none; stroke: currentColor; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px currentColor); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .2s; }
.x-fin__area { opacity: 0; transition: opacity 1s .9s; }
.x-gc.in .x-fin__line { stroke-dashoffset: 0; }
.x-gc.in .x-fin__area { opacity: 1; }
.x-fin__tip { position: absolute; left: 90%; bottom: 122px; padding: 4px 9px; border-radius: 8px; background: var(--x-surf-solid); border: 1px solid var(--x-surf-line); font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; transform: translate(-50%, 6px); opacity: 0; transition: opacity .5s 1.8s, transform .5s var(--ease) 1.8s; }
.x-fin__tip::after { content: ""; position: absolute; left: 50%; top: calc(100% + 9px); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--text-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-accent) 25%, transparent), 0 0 14px var(--text-accent); }
.x-gc.in .x-fin__tip { opacity: 1; transform: translate(-50%, 0); }

/* Warehouse: stock meters */
.x-stock { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.x-stock__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; font-size: 13px; --c: var(--x-ok); }
.x-stock__r.is-warn { --c: var(--x-warn); }
.x-stock__r.is-bad { --c: var(--x-danger); }
.x-stock__r b { font-weight: 500; color: var(--c); font-variant-numeric: tabular-nums; }
.x-stock__r i { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 99px; background: rgb(var(--fg) / .08); overflow: hidden; }
.x-stock__r i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--c); box-shadow: 0 0 12px var(--c); transition: width 1.2s var(--ease) .3s; }
.x-gc.in .x-stock__r i::after { width: var(--v); }

/* Documents: signed contract on a stack */
.x-docs { position: relative; width: min(290px, 100%); height: 168px; margin-top: 16px; }
.x-doc { position: absolute; inset: 0; padding: 16px; border-radius: 14px; background: var(--x-surf-solid); border: 1px solid var(--x-surf-line); box-shadow: 0 18px 36px -20px rgb(0 0 0 / .5); }
.x-doc--a { transform: translate(14px, -12px) scale(.95); opacity: .55; }
.x-doc--b { transform: translate(28px, -24px) scale(.9); opacity: .25; }
.x-doc__h { display: flex; align-items: center; gap: 10px; }
.x-doc__h b { display: block; font-size: 13.5px; font-weight: 500; }
.x-doc__h small { display: block; font-size: 11.5px; color: var(--subtle); }
.x-doc__ic { width: 30px; height: 36px; flex: none; border-radius: 6px; background: #e5484d; color: #fff; font: 700 9px/36px var(--x-font); text-align: center; }
.x-doc__ln { display: block; height: 6px; margin-top: 16px; border-radius: 3px; background: rgb(var(--fg) / .08); }
.x-doc__ln--s { width: 60%; margin-top: 8px; }
.x-doc__sign { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 99px; background: color-mix(in srgb, var(--x-ok) 15%, transparent); color: var(--x-ok); font-size: 12px; font-weight: 500; opacity: 0; transform: scale(.7); transform-origin: left center; transition: opacity .4s .7s, transform .5s var(--ease) .7s; }
.x-doc__sign .i { width: 14px; height: 14px; }
.x-gc.in .x-doc__sign { opacity: 1; transform: none; }

/* HR: team avatars + vacation range */
.x-hr { width: 100%; max-width: 340px; }
.x-hr__team { display: flex; align-items: center; }
.x-hr__av { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -8px; border-radius: 50%; border: 2px solid var(--x-surf-solid); background: #2a5bff; color: #fff; font: 600 12px var(--x-font); }
.x-hr__av:first-child { margin-left: 0; }
.x-hr__av:nth-child(2) { background: #5c8a6e; }
.x-hr__av:nth-child(3) { background: #8a63d2; }
.x-hr__av:nth-child(4) { background: #e08a2e; }
.x-hr__more { margin-left: 10px; font-size: 12.5px; color: var(--text-2); }
.x-hr__l { margin: 18px 0 10px; font-size: 13px; color: var(--text-2); }
.x-hr__l b { font-weight: 500; color: var(--text); }
.x-cal { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.x-cal i { height: 30px; display: grid; place-items: center; border-radius: 6px; background: rgb(var(--fg) / .04); font-size: 10.5px; font-style: normal; color: var(--subtle); transition: background .4s, color .4s; }
.x-gc.in .x-cal i.on { background: color-mix(in srgb, #2a5bff 26%, transparent); color: var(--text); }
.x-gc.in .x-cal i:nth-child(2), .x-gc.in .x-cal i:nth-child(13) { background: #2a5bff; color: #fff; }

/* Tender AI: readiness ring */
.x-tring { display: flex; align-items: center; gap: 28px; }
.x-tring__ring { position: relative; width: 136px; height: 136px; flex: none; }
.x-tring__ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.x-tring__bg, .x-tring__arc { fill: none; stroke-width: 10; }
.x-tring__bg { stroke: rgb(var(--fg) / .08); }
.x-tring__arc { stroke: var(--text-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 8px var(--x-glow-strong)); transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.x-gc.in .x-tring__arc { stroke-dashoffset: 13; }
.x-tring__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
.x-tring__c { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.x-tring__id { font: 500 11px var(--x-mono); color: var(--subtle); }
.x-tring__t { margin-bottom: 4px; font-size: 16px; font-weight: 500; }

/* Projects: gantt with a today line */
.x-gnt { --lab: 140px; position: relative; width: 100%; font-size: 12px; }
.x-gnt__head { display: grid; grid-template-columns: var(--lab) repeat(4, minmax(0, 1fr)); padding-bottom: 10px; border-bottom: 1px solid rgb(var(--fg) / .08); font-size: 11px; color: var(--subtle); }
.x-gnt__r { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; height: 40px; border-bottom: 1px dashed rgb(var(--fg) / .07); }
.x-gnt__r > span { color: var(--text-2); }
.x-gnt__tr { position: relative; height: 100%; }
.x-gnt__tr i { position: absolute; top: 50%; left: var(--a); width: var(--b); height: 14px; margin-top: -7px; border-radius: 99px; background: linear-gradient(90deg, #2a5bff, #6f8fff); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .3s; }
.x-gnt__tr i.is-late { background: linear-gradient(90deg, #e08a2e, #ffb547); }
.x-gnt__tr i.is-ms { background: var(--text-accent); box-shadow: 0 0 12px var(--x-glow-strong); }
.x-gc.in .x-gnt__tr i { transform: none; }
.x-gnt__now { position: absolute; top: 0; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * .47); width: 1px; background: var(--text-accent); box-shadow: 0 0 8px var(--text-accent); }
.x-gnt__now em { position: absolute; top: -22px; left: 0; transform: translateX(-50%); font: normal 500 10.5px var(--x-mono); color: var(--text-accent); white-space: nowrap; }

/* Purchasing: best offer picked */
.x-offers { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 10px; }
.x-offer { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: 14px; background: var(--x-surf-bg); border: 1px solid var(--x-surf-line); font-size: 12px; color: var(--text-2); transition: box-shadow .5s, border-color .5s; }
.x-offer b { font-size: 13.5px; font-weight: 500; color: var(--text); }
.x-offer__p { margin-top: 6px; font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.x-offer__risk { color: var(--x-danger); }
.x-offer.is-best { padding-block: 26px; background: var(--x-surf-solid); }
.x-gc.in .x-offer.is-best { border-color: var(--text-accent); box-shadow: 0 0 0 1px var(--text-accent), 0 18px 40px -12px var(--x-glow-strong); transition-delay: .5s; }
.x-offer__tag { position: absolute; top: -11px; left: 14px; padding: 2px 9px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; opacity: 0; transition: opacity .4s .9s; }
.x-gc.in .x-offer__tag { opacity: 1; }

/* Analytics: modules feed one tile */
.x-hub { width: 100%; max-width: 460px; overflow: visible; }
.x-hub__lines path { fill: none; stroke: rgb(var(--fg) / .2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.x-hub__pk { fill: var(--text-accent); filter: drop-shadow(0 0 4px var(--text-accent)); }
.x-hub__node rect { fill: var(--x-surf-solid); stroke: rgb(var(--fg) / .16); }
.x-hub__node text { fill: var(--text-2); font: 500 11px var(--x-font); text-anchor: middle; }
.x-hub__glow { fill: var(--x-glow-strong); filter: blur(24px); }
.x-hub__tbg { fill: var(--x-tile); stroke: color-mix(in srgb, var(--text-accent) 60%, transparent); stroke-width: 1.5; }
.x-hub__ic { stroke: var(--text-accent); }

@media (max-width: 1100px) {
  .x-gb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-gc--4, .x-gc--5, .x-gc--6, .x-gc--7 { grid-column: span 1; }
  .x-gb > .x-gc:first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .x-gb { grid-template-columns: 1fr; gap: 12px; }
  .x-modules { padding-bottom: 72px; }
  .x-gc { min-height: 0; }
  .x-gc__vis { min-height: 220px; padding: 28px 20px 12px; }
  .x-gc__txt { padding: 0 64px 24px 20px; }
  .x-gc__go { right: 16px; bottom: 22px; }
  .x-fin__chart { width: calc(100% + 40px); margin-inline: -20px; }
  .x-pipe { gap: 6px; }
  .x-pipe__col { padding: 6px; gap: 6px; }
  .x-deal { padding: 8px; font-size: 11px; }
  .x-deal i { display: none; }
  .x-deal b { padding-right: 0; }
  @keyframes xDeal { 0%, 30% { transform: none; } 45%, 85% { transform: translateX(calc(100% + 20px)); border-color: var(--text-accent); } 100% { transform: none; } }
  .x-tring { gap: 18px; }
  .x-tring__ring { width: 108px; height: 108px; }
  .x-gnt { --lab: 96px; font-size: 11px; }
  .x-gnt__head span:not(:first-child) { font-size: 0; }
  .x-offers { gap: 6px; }
  .x-offer { padding: 12px 9px; font-size: 11px; }
  .x-offer__p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-deal--move { animation: none; }
  .x-hub__pk { display: none; }
}

/* ---------- 04 AI (navy band) ---------- */
.x-ai { border-top: 0; }
.x-ai .roles { display: flex; flex-direction: column; padding: 0; }
.x-ai .roles::after { content: ""; flex: 1; min-height: 40px; background: var(--x-hatch); border-top: 1px solid var(--line); }
.x-ai .role { gap: 14px; padding: 18px 40px 18px var(--pad); border-bottom: 1px solid var(--line); }
.x-ai .role:last-child { border-bottom: 0; }
.x-ai .role__bar { width: 6px; height: 6px; border-radius: 0; background: rgb(var(--fg) / .2); box-shadow: none; }
.x-ai .role__t { font: 500 12.5px/1.3 var(--x-mono); color: var(--subtle); }
.x-ai .role:hover .role__t { color: var(--text); transform: none; }
.x-ai .role.is-on .role__t { color: var(--text); }
.x-ai .role.is-on .role__bar { background: var(--accent); box-shadow: none; }
.x-ai .role .i { width: 18px; height: 18px; }
.x-ai .chat-area { min-height: 0; overflow: visible; }
.x-ai .chat-win { position: relative; left: auto; top: auto; width: 100%; max-width: 760px; height: 560px; }
.x-ai .chat-win::before, .x-ai .chat-win::after { content: none; }
.x-ai .chat { overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7); }

/* ---------- 05 industries ---------- */
.x-list { border-top: 1px solid var(--line); }
.x-li { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 4fr) minmax(0, 3.4fr) 24px; align-items: center; gap: 32px; padding: 28px var(--pad); border-bottom: 1px solid var(--line); transition: background .25s; }
@media (hover: hover) { .x-li:hover { background: rgb(var(--fg) / .03); } }
.x-li h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
.x-li p { font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.x-li__mods { display: flex; flex-wrap: wrap; gap: 6px; }
.x-li__mods span { padding: 4px 8px; border: 1px solid var(--line-2); font: 500 10.5px var(--x-mono); color: var(--text-2); }
.x-li > .i { width: 20px; height: 20px; justify-self: end; color: var(--subtle); transition: color .25s, transform .3s var(--ease); }
@media (hover: hover) { .x-li:hover > .i { color: var(--text); transform: translate(2px, -2px); } }
.x-li--own h3 { color: var(--text-accent); }
@media (hover: hover) { .x-li--own:hover > .i { transform: rotate(90deg); } }

/* ---------- 06 fit ---------- */
.x-facts { display: flex; flex-direction: column; }
.x-fact { padding: 28px 40px 28px var(--pad); border-bottom: 1px solid var(--line); }
.x-fact b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.x-fact p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.x-facts .x-btn { align-self: flex-start; margin: 40px 40px 48px var(--pad); }
.x-funnel { max-width: 640px; }
.x-stages { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; border-bottom: 1px solid var(--line); }
.x-stages span { padding: 6px 10px; border: 1px solid var(--line-2); font-size: 13px; white-space: nowrap; }
.x-stages .x-stage-new { max-width: 0; padding-inline: 0; border-width: 0; opacity: 0; overflow: hidden; border-color: var(--text-accent); color: var(--text-accent); transition: max-width .7s var(--ease) .9s, padding .7s var(--ease) .9s, opacity .4s 1.2s; }
.x-funnel.in .x-stage-new { max-width: 220px; padding-inline: 10px; border-width: 1px; opacity: 1; }
.x-funnel .x-row--tg { grid-template-columns: minmax(0, 1fr) 40px; grid-auto-flow: row; }

/* ---------- 07 tenders ---------- */
.x-tl { display: flex; flex-direction: column; }
.x-tenders .tsteps { border-top: 0; }
.x-tenders .tsteps li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 0; padding: 26px 40px 26px var(--pad); font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--subtle); transition: color .3s; }
.x-tenders .tsteps__b { width: auto; height: auto; place-items: start; border: 0; background: none; font: 500 12px var(--x-mono); color: inherit; }
.x-tenders .tsteps li.is-on { color: var(--text); }
.x-tenders .tsteps li.is-on .tsteps__b { background: none; border: 0; box-shadow: none; color: var(--text-accent); }
.x-tenders .tsteps li.is-done .tsteps__b { color: var(--subtle); }
.x-tenders .tsteps__t { font-size: inherit; letter-spacing: inherit; }
.x-tenders .tsteps__hint { font-size: 15px; letter-spacing: 0; }
.x-tenders .tsteps li.is-on .tsteps__hint { max-height: 90px; margin-top: 8px; }
.x-tl .x-btn { align-self: flex-start; margin: 40px 40px 48px var(--pad); }
.x-tenders .tcard { width: min(480px, 100%); border-radius: 0; border: 1px solid var(--line-2); box-shadow: var(--x-shadow); }
.x-tenders .trow { border-radius: 0; }

/* ---------- 08 results ---------- */
.x-results .x-cell { padding-top: 48px; padding-bottom: 52px; }

/* ---------- 09 how ---------- */
.x-how__wrap { position: relative; border-top: 1px solid var(--line); }
.x-how__line { position: absolute; left: 0; right: 0; top: -1px; height: 1px; }
.x-how__line span { display: block; width: 0; height: 100%; background: var(--text-accent); }
.x-how__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 var(--pad); }
.x-how__cell { position: relative; padding: 36px 32px 48px; border-right: 1px solid var(--line); }
.x-how__cell:first-child { padding-left: 0; }
.x-how__cell:last-child { padding-right: 0; border-right: 0; }
.x-how__cell::before { content: ""; position: absolute; top: -4px; left: 32px; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--line-3); transition: background .3s, border-color .3s; }
.x-how__cell:first-child::before { left: 0; }
.x-how__cell.is-done::before, .x-how__cell.is-cur::before { background: var(--text-accent); border-color: var(--text-accent); }
.x-how__n { font: 500 12px var(--x-mono); color: var(--subtle); transition: color .3s; }
.x-how__cell.is-done .x-how__n, .x-how__cell.is-cur .x-how__n { color: var(--text-accent); }
.x-how__cell h3 { margin-top: 40px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.x-how__cell p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.x-how .x-bar { border-top: 1px solid var(--line); }

/* ---------- 10 pricing ---------- */
.x-split--price { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 0; }
.x-price__l { padding: 128px 64px 128px var(--pad); }
.x-price__p { max-width: 520px; margin: 24px 0 36px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.x-price__r { display: flex; align-items: center; justify-content: center; padding: 64px var(--pad) 64px 64px; background: var(--x-dots); }
.x-pcard { width: 100%; max-width: 420px; padding: 32px; background: var(--raised); border: 1px solid var(--line-2); box-shadow: var(--x-shadow); }
.x-pcard__from { font: 500 12px var(--x-mono); color: var(--subtle); }
.x-pcard__price { margin-top: 8px; font-size: 76px; font-weight: 500; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.x-pcard__price small { margin-left: 8px; font-size: 24px; letter-spacing: -.01em; color: var(--text-2); }
.x-pcard__per { margin-top: 8px; font-size: 15px; color: var(--text-2); }
.x-pcard__list { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.x-pcard__list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.x-pcard__list li:last-child { border-bottom: 0; color: var(--text-2); }
.x-pcard__list li::before { content: ""; width: 6px; height: 6px; flex: none; margin-top: 7px; background: var(--text-accent); }

/* ---------- 11 testimonials ---------- */
.x-qnav { display: flex; align-items: center; gap: 8px; }
.x-qnav__cnt { margin-right: 8px; font: 500 12px var(--x-mono); color: var(--subtle); }
.x-sq { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-3); transition: border-color .2s, background .2s, color .2s; }
.x-sq .i { width: 20px; height: 20px; }
.x-sq:hover { background: var(--text); border-color: var(--text); color: var(--inverse); }
.x-quote { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.x-quote__main { display: flex; flex-direction: column; min-height: 440px; padding: 56px 64px 56px var(--pad); border-right: 1px solid var(--line); }
.x-quote__co { font: 500 12px var(--x-mono); color: var(--text-accent); }
.x-quote__q { max-width: 820px; margin: 24px 0 48px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: var(--subtle); }
.x-quote__q .w { color: var(--text); }
.x-quote__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.x-quote__who b { display: block; font-size: 15px; font-weight: 600; }
.x-quote__who small { display: block; font-size: 13px; color: var(--subtle); }
.x-quote__main.swap .x-quote__q, .x-quote__main.swap .x-quote__who, .x-quote__main.swap .x-quote__co { animation: xIn .6s var(--ease) both; }
@keyframes xIn { from { opacity: 0; transform: translateY(10px); } }
.x-quote__list { display: flex; flex-direction: column; }
.x-tq { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 28px var(--pad) 28px 40px; border-bottom: 1px solid var(--line); text-align: left; }
.x-tq:last-child { border-bottom: 0; }
.x-tq__co { font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--subtle); transition: color .25s; }
.x-tq__a { font-size: 13px; color: var(--subtle); }
.x-tq:hover .x-tq__co, .x-tq.is-on .x-tq__co { color: var(--text); }
.x-tq__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; }
.x-tq__bar span { display: block; width: 0; height: 100%; background: var(--text-accent); }
.x-tq.is-on .x-tq__bar span { animation: xBar 7s linear forwards; }
.x-trust { padding-bottom: 0; }

/* ---------- demo form + footer: same type as above ---------- */
.demo .h-44 { font-family: var(--font-head); font-size: clamp(32px, 3.9vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: 0; }
.demo .demo__l { min-height: 0; padding: 128px 64px 128px var(--pad); }
.demo .demo__h { position: static; max-width: 560px; }
.demo .demo__h p { font-size: 17px; }
.demo, .demo .field { font-family: var(--x-font); }
.foot .foot__big { font-family: var(--font-head); letter-spacing: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .x-li { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) 24px; }
  .x-li__mods { display: none; }
  .x-how__cell { padding-inline: 24px; }
  .x-how__cell::before { left: 24px; }
}
@media (max-width: 1100px) {
  .x-head { padding-top: 104px; }
  .x-head--row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .x-split, .x-split--price { grid-template-columns: 1fr; }
  .x-split > :first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .x-steps::after, .x-ai .roles::after { display: none; }
  .x-canvas { padding: 48px var(--pad); }
  .x-price__l { padding: 104px var(--pad) 72px; }
  .x-price__r { padding: 56px var(--pad); }
  .x-quote { grid-template-columns: 1fr; }
  .x-quote__main { min-height: 0; padding-right: var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .x-quote__list { flex-direction: row; }
  .x-tq { padding: 24px; border-bottom: 0; border-right: 1px solid var(--line); }
  .x-tq:first-child { padding-left: var(--pad); }
  .x-tq:last-child { border-right: 0; }
  .demo .demo__l { padding: 104px var(--pad) 56px; }
}
@media (max-width: 900px) {
  .x-head { padding: 88px var(--pad) 48px; }
  .x-cells--3, .x-cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-cells .x-cell:nth-child(n) { padding: 32px 24px 36px; border-bottom: 1px solid var(--line); }
  .x-cells .x-cell:nth-child(odd) { padding-left: var(--pad); border-right: 1px solid var(--line); }
  .x-cells .x-cell:nth-child(even) { padding-right: var(--pad); border-right: 0; }
  .x-cells--3 .x-cell:last-child { grid-column: 1 / -1; border-right: 0; padding-right: var(--pad); }
  .x-cells { margin-bottom: -1px; }
  .x-tr { grid-template-columns: 1fr; padding: 24px var(--pad); }
  .x-tr > *, .x-tr > :first-child, .x-tr > :last-child { padding: 0; border: 0; }
  .x-tr .x-was { margin: 8px 0 6px; }
  .x-tr--h { display: none; }
  .x-bar { flex-direction: column; align-items: flex-start; }
  .x-li { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 16px; padding: 22px var(--pad); }
  .x-li p { grid-column: 1; grid-row: 2; }
  .x-li > .i { grid-row: 1 / 3; grid-column: 2; }
  .x-how__line { display: none; }
  .x-how__row { grid-template-columns: 1fr; }
  .x-how__cell, .x-how__cell:first-child, .x-how__cell:last-child { padding: 28px var(--pad) 32px; border-right: 0; border-bottom: 1px solid var(--line); }
  .x-how__cell::before, .x-how__cell:first-child::before { left: 0; }
  .x-how__cell h3 { margin-top: 16px; }
  .x-how .x-bar { border-top: 0; }
  .x-ai .roles { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .x-ai .role, .x-ai .role:last-child { flex: none; width: auto; padding: 18px 20px; border-bottom: 0; border-right: 1px solid var(--line); }
  .x-ai .role:first-child { padding-left: var(--pad); }
  .x-ai .role .i { display: none; }
  .x-ai .chat-area { padding: 32px var(--pad); }
  .x-ai .chat-win { height: 540px; }
}
@media (max-width: 640px) {
  .x-head { padding: 72px var(--pad) 40px; }
  .x-head__p { font-size: 16px; }
  .x-canvas { padding: 32px 16px; }
  .x-stage { min-height: 0; }
  [data-s="1"] .x-row { grid-template-columns: 70px minmax(0, 1fr) auto; }
  [data-s="1"] .x-row__v { display: none; }
  [data-s="3"] .x-row { grid-template-columns: 58px minmax(0, 1fr); }
  [data-s="3"] .x-row__v { display: none; }
  .x-row__t { white-space: normal; }
  .x-cells--3, .x-cells--4 { grid-template-columns: 1fr; }
  .x-cells .x-cell:nth-child(n) { grid-column: auto; padding: 28px var(--pad) 32px; border-right: 0; }
  .x-step { padding: 22px var(--pad); }
  .x-fact, .x-tenders .tsteps li { padding: 22px var(--pad); }
  .x-facts .x-btn, .x-tl .x-btn { margin: 32px var(--pad) 40px; }
  .x-btn { white-space: normal; height: auto; min-height: 46px; padding-block: 10px; text-align: left; }
  .x-quote__main { padding: 40px var(--pad); }
  .x-quote__list { flex-direction: column; }
  .x-tq, .x-tq:first-child { padding: 20px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .x-qnav__cnt { display: none; }
  .x-pcard { padding: 24px; }
  .x-pcard__price { font-size: 60px; }
  .x-ai .chat-win { height: auto; }
  .x-ai .chat { min-height: 580px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-rv { opacity: 1; transform: none; }
  .x-step.is-on .x-step__bar span, .x-tq.is-on .x-tq__bar span { animation: none; }
}

/* key numbers use the heading font, same as the security section title */
.x-num, .x-fin__n, .x-pcard__price, .x-tring__ring b { font-family: var(--font-head); letter-spacing: 0; }

/* responsive fixes */
@media (max-width: 900px) {
  .x-how__row { padding: 0; }
  .demo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) { .x-deal b { white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 640px) { .demo .h-44 { font-size: clamp(26px, 8vw, 32px); } }
@media (max-width: 1400px) and (min-width: 1281px) {
  .foot__contact { grid-template-columns: 1fr 1fr; }
  .foot__contact-title { grid-column: 1 / -1; }
  .foot__contact-social { text-align: left; }
}
@media (max-width: 1100px) { .x-split, .x-split--price { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) {
  .x-h2, .demo .h-44 { font-size: clamp(24px, 8vw, 32px); }
  .foot .foot__big { font-size: clamp(34px, 11vw, 44px); }
}
/* wide screens: the side padding grows, so outer columns get it on top of an equal share of the content width */
@media (min-width: 901px) {
  .x-cells--3, .x-tr { --u: calc((100% - 2 * var(--pad)) / 3); grid-template-columns: calc(var(--pad) + var(--u)) var(--u) calc(var(--pad) + var(--u)); }
  .x-cells--4 { --u: calc((100% - 2 * var(--pad)) / 4); grid-template-columns: calc(var(--pad) + var(--u)) var(--u) var(--u) calc(var(--pad) + var(--u)); }
}
@media (min-width: 1101px) {
  .x-split { --u: calc((100% - 2 * var(--pad)) / 12); grid-template-columns: calc(var(--pad) + var(--u) * 4) minmax(0, 1fr); }
  .x-split--price { grid-template-columns: calc(var(--pad) + var(--u) * 7) minmax(0, 1fr); }
  .x-quote { --u: calc((100% - 2 * var(--pad)) / 12); grid-template-columns: calc(var(--pad) + var(--u) * 8) minmax(0, 1fr); }
}
/* node network from the hero, reused as a quiet background */
.x-net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.x-head, .foot__st, .x-results { position: relative; }
.x-head > :not(.x-net), .x-results > :not(.x-net), .demo__l > :not(.x-net), .foot__st > :not(.x-net) { position: relative; z-index: 1; }

/* =====================================================================
   Glass rollout: every section speaks the language of "Modules".
   Grids become inset rounded glass panels; inside them --pad is the
   inner padding, so all existing rules keep working.
   ===================================================================== */
.x-sec, .demo {
  --x-r: 20px;
  --x-glow: rgb(204 255 0 / .13);
  --x-glow-strong: rgb(204 255 0 / .35);
  --x-surf-bg: rgb(255 255 255 / .05);
  --x-surf-solid: #0e1c3d;
  --x-surf-line: rgb(150 180 255 / .14);
  --x-tile: #12224a;
  --x-blue: #5f7fd0;
  --pad-o: var(--pad);
}
[data-theme="light"] .x-sec:not(.on-navy) {
  --x-glow: rgb(42 91 255 / .08);
  --x-glow-strong: rgb(42 91 255 / .25);
  --x-surf-bg: #fff;
  --x-surf-solid: #fff;
  --x-surf-line: rgb(11 31 79 / .1);
  --x-tile: #fff;
  --x-blue: #4060b0;
}
.x-sec { border-top: 0; padding-bottom: 112px; }
.x-head { padding-top: 96px; }
.x-trust { padding-bottom: 112px; }

/* inset glass panels */
.x-split, .x-cells, .x-table, .x-list, .x-quote, .x-how__wrap {
  --pad: min(32px, var(--pad-o));
  position: relative;
  isolation: isolate;
  margin-inline: var(--pad-o);
  overflow: hidden;
  border: 1px solid rgb(var(--fg) / .08);
  border-radius: var(--x-r);
  background: linear-gradient(180deg, rgb(var(--fg) / .045), rgb(var(--fg) / .012) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
}
[data-theme="light"] .x-sec:not(.on-navy) :is(.x-split, .x-cells, .x-table, .x-list, .x-quote, .x-how__wrap) {
  border-color: rgb(11 31 79 / .08);
  background: linear-gradient(180deg, #fff, #f7f9fe);
  box-shadow: 0 1px 2px rgb(11 31 79 / .04), 0 22px 44px -30px rgb(11 31 79 / .3);
}
.x-split + .x-cells { margin-top: 16px; }
.x-split--price { margin-top: 112px; }
.x-quote { border-bottom: 1px solid rgb(var(--fg) / .08); }
.x-table .x-tr:last-child, .x-list .x-li:last-child { border-bottom: 0; }
.x-how__line { top: 0; }
.x-how__cell::before { top: -1px; width: 9px; height: 9px; border-radius: 50%; }
.x-bar { padding-inline: var(--pad); }
.x-how .x-bar { border-top: 0; }

/* one light source per panel, like the module cards */
.x-split::before, .x-cells::before, .x-quote::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(55% 70% at var(--gx, 100%) var(--gy, 0%), var(--x-glow), transparent 70%);
}
.x-about .x-split { --gx: 85%; --gy: 50%; }
.x-tenders .x-split { --gx: 75%; --gy: 40%; }
.x-fit .x-split { --gx: 80%; --gy: 100%; }
.x-results .x-cells { --gx: 0%; --gy: 0%; }
.x-price .x-split { --gx: 85%; --gy: 50%; }
.x-quote { --gx: 0%; --gy: 0%; }

/* rounded inner surfaces */
.x-win, .x-funnel { border-radius: 14px; overflow: hidden; }
.x-tenders .tcard { border-radius: 16px; }
.x-tenders .trow { border-radius: 10px; }
.x-ai .chat { border-radius: 14px; }
.x-pcard { border-radius: 16px; }
.x-pill, .x-li__mods span { border-radius: 6px; }
.x-st { border-radius: 999px; }
.x-stages span { border-radius: 8px; }
.x-tg { border-radius: 999px; }
.x-sec .x-btn, .x-sec .x-sq, .x-sec .x-cell--link { border-radius: 12px !important; }
.x-ai .x-cell--link { border-radius: 0 !important; }
.x-ai .role { border-radius: 0 !important; }

/* key numbers get the hero light */
.x-results .x-cell { position: relative; }
.x-results .x-num--acc { text-shadow: 0 0 28px var(--x-glow-strong); }

/* calmer palette: lime is the only accent, product UI uses muted brand blue */
.x-st--info { background: color-mix(in srgb, var(--x-blue) 18%, transparent); color: color-mix(in srgb, var(--x-blue) 60%, var(--text)); }
.x-deal i { background: var(--x-blue); }
.x-hr__av, .x-hr__av:nth-child(2), .x-hr__av:nth-child(3), .x-hr__av:nth-child(4) { background: color-mix(in srgb, var(--x-blue) 55%, var(--x-surf-solid)); color: #fff; }
.x-hr__av:first-child { background: var(--accent); color: var(--on-accent); }
.x-gc.in .x-cal i.on { background: color-mix(in srgb, var(--x-blue) 26%, transparent); }
.x-gc.in .x-cal i:nth-child(2), .x-gc.in .x-cal i:nth-child(13) { background: var(--x-blue); color: #fff; }
.x-gnt__tr i { background: linear-gradient(90deg, color-mix(in srgb, var(--x-blue) 80%, #000), var(--x-blue)); }
.x-gnt__tr i.is-late { background: linear-gradient(90deg, #b07a2a, #d9a24a); }
.x-ai .chat { font-family: var(--x-font); }
.x-ai .pact { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.x-ai .pact + .pact { background: transparent; color: var(--p-ink); border-color: var(--p-line); }
.x-ai .chat__send { background: var(--accent); color: var(--on-accent); }
.x-ai .chat__input.is-focus { border-color: var(--accent); }

/* labels: sentence case, no mono */
.x-ai .role__t { font-size: 15px; font-weight: 500; }
.x-tr--h > * { font-size: 13px; }
.x-quote__co, .x-pcard__from, .x-tring__id, .x-how__n, .x-step__n { font-size: 13px; }

/* demo form: same surfaces */
.demo .field { border-radius: 12px; }
.demo .chip { border-radius: 999px !important; }
.demo .btn-lime { border-radius: 12px !important; }
.demo .btn-lime__box { border-radius: 0 12px 12px 0 !important; }
.demo .consent__box { border-radius: 6px; }

/* keyboard focus and pressed feedback */
:is(a, button, [role="button"], input, select, textarea, summary):focus-visible { outline: 2px solid var(--text-accent); outline-offset: 3px; }
.x-sec :is(.x-btn, .x-sq, .x-gc, .x-li, .x-cell--link):active { transform: scale(.985); }
.x-sec :is(.x-btn, .x-sq, .x-li, .x-cell--link) { transition: background .2s, border-color .2s, color .2s, filter .2s, transform .15s; }

@media (max-width: 900px) {
  .x-sec { padding-bottom: 80px; }
  .x-head { padding-top: 72px; }
}
@media (max-width: 640px) {
  .x-split, .x-cells, .x-table, .x-list, .x-quote, .x-how__wrap { --pad: 18px; }
  .x-sec { padding-bottom: 64px; }
  .x-head { padding-top: 56px; }
  .x-split--price { margin-top: 64px; }
}

/* ---------- form: field wrappers, inline errors, honeypot ---------- */
.fw { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fw__err { min-height: 0; font-size: 12.5px; line-height: 1.35; color: #ff9b9b; }
.fw__err:empty { display: none; }
.fw__err--consent { margin-top: -8px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn-lime:disabled { opacity: .7; cursor: progress; animation: none; }

/* ---------- language links with flags ---------- */
.lang-menu a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; color: var(--text-2); border-radius: 9px; }
.lang-menu a:hover, .lang-menu a.is-on { background: rgb(var(--fg) / .08); color: var(--text); }
.lang-menu a span { width: 22px; font-size: 11px; font-weight: 800; color: var(--text-accent); }
.lang-menu .flag { width: 20px; height: 14px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); }

/* ---------- cookie consent ---------- */
.cookie { position: fixed; z-index: 70; left: 20px; bottom: 20px; width: min(420px, calc(100vw - 24px)); padding: 22px; border-radius: 20px; border: 1px solid rgb(150 180 255 / .16); background: rgb(10 21 48 / .92); color: #fff; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .06); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-family: var(--x-font); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .45s var(--ease); }
.cookie.is-open { opacity: 1; transform: none; }
[data-theme="light"] .cookie { background: rgb(255 255 255 / .94); color: #0b1f4f; border-color: rgb(11 31 79 / .1); box-shadow: 0 30px 60px -24px rgb(11 31 79 / .35); }
.cookie__t { font-size: 16px; font-weight: 600; }
.cookie__d { margin-top: 6px; font-size: 13.5px; line-height: 1.5; opacity: .9; }
.cookie__d a { text-decoration: underline; text-underline-offset: 2px; }
.cookie__opts { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid rgb(150 180 255 / .14); }
.cookie__opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(150 180 255 / .14); cursor: pointer; }
.cookie__opt b { display: block; font-size: 14px; font-weight: 500; }
.cookie__opt small { display: block; font-size: 12px; opacity: .8; }
.cookie__opt input { position: absolute; opacity: 0; pointer-events: none; }
.cookie__opt .x-tg.is-on { background: #ccff00; }
[data-theme="light"] .cookie__opt .x-tg.is-on { background: #0b1f4f; }
.cookie__opt input:focus-visible + .x-tg { outline: 2px solid currentColor; outline-offset: 2px; }
.cookie__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body .cookie__btn { height: 40px; padding: 0 16px; border-radius: 10px !important; border: 1px solid rgb(150 180 255 / .22); font-size: 13.5px; font-weight: 500; color: inherit; transition: background .2s, border-color .2s; }
body .cookie__btn:hover { border-color: currentColor; transform: none; box-shadow: none; }
body .cookie__btn::before { content: none; }
.cookie__btn--main { background: #ccff00; border-color: #ccff00 !important; color: #000 !important; }
[data-theme="light"] .cookie__btn--main { background: #0b1f4f; border-color: #0b1f4f !important; color: #fff !important; }
.cookie__btn--text { border-color: transparent !important; text-decoration: underline; text-underline-offset: 3px; }
.foot__cookie { font-size: 13px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.foot__cookie:hover { color: var(--text); }
@media (max-width: 640px) { .cookie { left: 12px; bottom: 12px; padding: 18px; } .cookie__btn { flex: 1 1 auto; } }
.cookie__opts[hidden], .fw__err:empty { display: none; }
@media (min-width: 901px) and (max-width: 1320px) {
  .x-how__cell { padding-inline: 20px; }
  .x-how__cell:first-child { padding-left: 0; }
  .x-how__cell:last-child { padding-right: 0; }
  .x-how__cell::before { left: 20px; }
  .x-how__cell:first-child::before { left: 0; }
  .x-how__cell h3 { font-size: clamp(16px, 1.5vw, 20px); }
}

/* =====================================================================
   Centered column + fine full-width frame.
   Content lives in one 1280px column; side gutters shrink on smaller
   screens. Thin decor (guide lines, hatching, section hairlines with
   "+" marks) runs across the whole page.
   ===================================================================== */
:root { --pad: max(40px, calc((100vw - 1280px) / 2)); }
@media (max-width: 900px) { :root { --pad: 24px; } }
@media (max-width: 640px) { :root { --pad: 16px; } }

.page-guides { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.page-guides::before, .page-guides::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--pad); background: var(--x-hatch); opacity: .55; }
.page-guides::before { left: 0; border-right: 1px solid var(--line); }
.page-guides::after { right: 0; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .page-guides { display: none; } }

/* every section starts with a hairline across the page and "+" marks on the column edges */
.x-sec::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 1px; background: var(--line); pointer-events: none; }
.x-sec::after {
  content: ""; position: absolute; z-index: 2; top: -5px; left: calc(var(--pad) - 5px); right: calc(var(--pad) - 5px); height: 11px; pointer-events: none;
  --m: rgb(var(--fg) / .35);
  background:
    linear-gradient(var(--m), var(--m)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 5px / 11px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) calc(100% - 5px) 0 / 1px 11px no-repeat;
}
.x-ai::before { background: rgb(255 255 255 / .1); }
@media (max-width: 900px) { .x-sec::after { display: none; } }
/* header aligns with the content column */
@media (min-width: 901px) { .hdr:not(#_) { padding-left: var(--pad); padding-right: var(--pad); } }

/* =====================================================================
   Demo form + footer, rebuilt on the centered column.
   ":not(#_)" outranks the older layered rules in style.css.
   ===================================================================== */
.demo:not(#_) { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 112px var(--pad); border-bottom: 0; }
.demo__l:not(#_) { min-height: 0; padding: 8px 64px 0 0; border: 0; overflow: visible; }
.demo__h:not(#_) { position: static; inset: auto; max-width: 520px; }
.demo__h p.t-18 { margin-top: 20px; font-size: 17px; line-height: 1.55; }
.demo__pts { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.demo__pts li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.demo__pts li::before { content: ""; width: 6px; height: 6px; flex: none; margin-top: 8px; background: var(--accent); box-shadow: 0 0 10px rgb(204 255 0 / .6); }
.demo__call { margin-top: 24px; font-size: 15px; color: var(--text-2); }
.demo__call a { color: var(--text); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line-3); }
.demo__call a:hover { border-color: var(--text); }
.demo .form:not(#_) {
  gap: 16px; padding: 36px;
  border: 1px solid rgb(255 255 255 / .12);
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 60px -30px rgb(0 0 0 / .55);
}
.form__label:not(#_) { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }

.foot__st:not(#_) { position: relative; padding: 112px var(--pad) 72px; border-bottom: 1px solid var(--line); }
.totop:not(#_) { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.foot__cols:not(#_) { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); padding: 0 var(--pad); border-bottom: 1px solid var(--line); }
:is(.foot__brand, .foot__col):not(#_) { grid-column: auto; padding: 56px 32px 64px; border: 0; border-right: 1px solid var(--line); }
.foot__brand:not(#_) { padding-left: 0; }
.foot__col:last-child:not(#_) { padding-right: 0; border-right: 0; }
.foot__brand .logo:not(#_) { height: 48px; }
.foot__h:not(#_) { font-size: 13px; letter-spacing: 0; text-transform: none; }
/* Footer navigation: compact outlined links with a transparent fill. */
.foot__col:not(#_) { gap: 4px; }
.foot__col:not(#_) .foot__h { margin-bottom: 10px; }
.foot__col:not(#_) > a:not(#_) {
  display: inline-flex; align-items: center; min-height: 36px; max-width: 100%;
  margin-left: -10px; padding: 0 10px; border: 0; border-radius: 0 !important;
  background: transparent; color: var(--text-2);
  transition: color .2s;
}
.foot__col:not(#_) > a:not(#_):hover,
.foot__col:not(#_) > a:not(#_):focus-visible {
  background: transparent; color: var(--text);
}
.foot__contact:not(#_) { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; padding: 28px var(--pad); border-bottom: 1px solid var(--line); }
.foot__contact-title:not(#_) { font-size: 13px; letter-spacing: 0; text-transform: none; }
.foot__contact-social:not(#_) { margin-left: auto; text-align: right; }
.foot__legal:not(#_) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px var(--pad); }
.foot__links:not(#_) { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }

@media (max-width: 1100px) {
  .demo:not(#_) { grid-template-columns: minmax(0, 1fr); padding: 88px var(--pad); }
  .demo__l:not(#_) { padding: 0 0 40px; }
  .foot__cols:not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand:not(#_) { grid-column: 1 / -1; padding: 48px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .foot__col:not(#_) { padding: 40px 24px 48px; }
  .foot__col:nth-child(2):not(#_) { padding-left: 0; }
}
@media (max-width: 640px) {
  .demo:not(#_) { padding: 64px var(--pad); }
  .demo .form:not(#_) { padding: 20px; }
  .foot__st:not(#_) { padding: 72px var(--pad) 48px; flex-direction: column; align-items: flex-start; }
  .foot__col:not(#_) > a:not(#_) { min-height: 40px; }
  .foot__cols:not(#_) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__col:not(#_), .foot__col:nth-child(2):not(#_) { padding: 28px 0; border-right: 0; }
  .foot__col:last-child:not(#_) { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .foot__contact:not(#_) { flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot__contact-social:not(#_) { margin-left: 0; text-align: left; }
  .foot__legal:not(#_), .foot__links:not(#_) { flex-direction: column; align-items: flex-start; }
}
.demo .h-44:not(#_) { font-size: clamp(30px, 3.1vw, 46px); }
@media (max-width: 400px) { .demo .h-44:not(#_) { font-size: clamp(24px, 8vw, 30px); } }
/* footer language menu opens towards the page, not off the right edge */
.foot .lang--up .lang-menu:not(#_) { left: auto; right: 0; }
@media (max-width: 640px) { .foot .lang--up .lang-menu:not(#_) { left: 0; right: auto; } }

@media (max-width: 1100px) { .x-offer:not(#_) { padding: 12px 10px; } .x-offer b:not(#_) { font-size: 12.5px; overflow-wrap: anywhere; } .x-offer__p:not(#_) { font-size: 15px; } }

/* =====================================================================
   Stretched sections: panels, grids and cards run almost edge to edge
   (small gutter), while text inside them stays on the centered column.
   More air between sections.
   ===================================================================== */
:root { --gut: 24px; }
@media (max-width: 900px) { :root { --gut: 16px; } }
@media (max-width: 640px) { :root { --gut: 10px; } }

.x-split, .x-cells, .x-table, .x-list, .x-quote, .x-how__wrap {
  --pad: max(20px, calc(var(--pad-o) - var(--gut)));
  margin-inline: var(--gut) !important;
}
.x-gb { padding-inline: var(--gut) !important; }
.page-guides::before, .page-guides::after { width: var(--gut); }
.x-sec::after { left: calc(var(--gut) - 5px); right: calc(var(--gut) - 5px); }

.x-sec:not(#_) { padding-bottom: 152px; }
.x-head:not(#_) { padding-top: 136px; padding-bottom: 72px; }
.x-modules:not(#_) { padding-bottom: 152px; }
.x-split--price:not(#_) { margin-top: 152px; }
.demo:not(#_) { padding-top: 152px; padding-bottom: 152px; }
@media (max-width: 900px) {
  .x-sec:not(#_), .x-modules:not(#_) { padding-bottom: 104px; }
  .x-head:not(#_) { padding-top: 96px; padding-bottom: 48px; }
  .x-split--price:not(#_) { margin-top: 104px; }
  .demo:not(#_) { padding-top: 104px; padding-bottom: 104px; }
}
@media (max-width: 640px) {
  .x-sec:not(#_), .x-modules:not(#_) { padding-bottom: 56px; }
  .x-head:not(#_) { padding-top: 52px; padding-bottom: 32px; }
  .x-split--price:not(#_) { margin-top: 56px; }
  .demo:not(#_) { padding-top: 64px; padding-bottom: 64px; }
  .security.sec:not(#_) { padding-top: 108px; }
}
/* platform steps: no numbers */
.x-step:not(#_) { grid-template-columns: minmax(0, 1fr); }

/* tender steps: no numbers */
.x-tenders .tsteps li:not(#_) { grid-template-columns: minmax(0, 1fr); }
.x-tenders .tsteps__hint:not(#_) { grid-column: 1; }

/* "we support you" steps: numbers in small squares sitting on the line where the dots were */
.x-how__wrap:not(#_) { overflow: visible; }
.x-how__cell:not(#_) { --nl: 32px; }
.x-how__cell:first-child:not(#_) { --nl: 0px; }
.x-how__cell:not(#_)::before { display: none; }
.x-how__n:not(#_) {
  position: absolute; z-index: 2; top: -14px; left: var(--nl);
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--x-surf-solid); border: 1px solid rgb(var(--fg) / .22);
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--subtle);
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}
:is(.x-how__cell.is-done, .x-how__cell.is-cur) .x-how__n:not(#_) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 14px -2px rgb(var(--b-glow, 204 255 0) / .55);
}
@media (min-width: 901px) and (max-width: 1320px) { .x-how__cell:not(#_) { --nl: 20px; } .x-how__cell:first-child:not(#_) { --nl: 0px; } }
@media (max-width: 900px) {
  .x-how__n:not(#_) { position: static; margin-bottom: 4px; }
}

/* =====================================================================
   Round 10 fixes
   ===================================================================== */
/* step numbers: plain 1 2 3 in small squares (platform, tenders, "we support you") */
.x-step:not(#_) { grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
.x-tenders .tsteps li:not(#_) { grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
.x-tenders .tsteps__hint:not(#_) { grid-column: 2; }
:is(.x-step__n, .tsteps__b, .x-how__n):not(#_) {
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center; align-self: start;
  border: 1px solid rgb(var(--fg) / .2); border-radius: 2px !important;
  background: var(--x-surf-solid, transparent);
  font: 500 13px/1 var(--x-font); letter-spacing: 0; color: var(--subtle);
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.x-step__n:not(#_), .x-tenders .tsteps__b:not(#_) { margin-top: -2px; }
:is(.x-step.is-on .x-step__n, .x-tenders .tsteps li.is-on .tsteps__b, .x-how__cell.is-done .x-how__n, .x-how__cell.is-cur .x-how__n):not(#_) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 14px -2px rgb(var(--b-glow, 204 255 0) / .55);
}
.x-tenders .tsteps li.is-done .tsteps__b:not(#_) { border-color: rgb(var(--b-glow, 204 255 0) / .5); color: var(--text-accent); background: transparent; box-shadow: none; }

/* 2: AI roles - no square dots, no arrows; the active role gets a lime edge and a soft fill */
.x-ai .role__bar:not(#_), .x-ai .role .i:not(#_) { display: none; }
.x-ai .role:not(#_) { position: relative; transition: background .3s, color .3s; }
.x-ai .role:not(#_)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: scaleY(0); transition: transform .35s var(--ease); }
.x-ai .role:hover:not(#_) { background: rgb(255 255 255 / .03); }
.x-ai .role.is-on:not(#_) { background: linear-gradient(90deg, rgb(204 255 0 / .08), transparent 70%); }
.x-ai .role.is-on:not(#_)::after { transform: none; }
.x-ai .role.is-on .role__t:not(#_) { color: var(--text); }
@media (max-width: 900px) {
  .x-ai .role:not(#_)::after { top: auto; right: 0; width: auto; height: 2px; transform: scaleX(0); }
  .x-ai .role.is-on:not(#_) { background: linear-gradient(0deg, rgb(204 255 0 / .08), transparent 80%); }
  .x-ai .role.is-on:not(#_)::after { transform: none; }
}

/* 3: burger menu close button sits exactly where the open button is (placed by main.js) */
.menu .menu-close:not(#_) { position: fixed; z-index: 5; }

/* 7: tenders - button pinned to the bottom of the column, hints don't move it */
.x-tl .x-btn:not(#_) { margin-top: auto; }
.x-tl .tsteps:not(#_) { margin-bottom: 40px; }
@media (max-width: 1100px) {
  .x-tenders .tsteps__hint:not(#_) { max-height: none; margin-top: 8px; opacity: .45; transition: opacity .3s; }
  .x-tenders .tsteps li.is-on .tsteps__hint:not(#_) { opacity: 1; }
  .x-tl .x-btn:not(#_) { margin-top: 8px; }
}

/* 8: language switcher - live hover like the other glass buttons, clear open state */
:is(.hdr .lang, .foot .lang, .menu__prefs .lang):not(#_) { transition: border-color .3s, box-shadow .3s, background .3s; }
:is(.hdr .lang, .foot .lang, .menu__prefs .lang):not(#_)::before {
  content: ""; position: absolute; z-index: 3; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--b-ang), transparent 0deg, rgb(var(--b-glow) / 0) 40deg, var(--b-hi) 80deg, var(--b-mid) 110deg, rgb(var(--b-glow) / 0) 160deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
:is(.hdr .lang, .foot .lang, .menu__prefs .lang):hover:not(#_) { border-color: rgb(var(--b-glow) / .25); box-shadow: 0 0 22px -8px rgb(var(--b-glow) / .45); }
:is(.hdr .lang, .foot .lang, .menu__prefs .lang):hover:not(#_)::before { opacity: 1; animation: bSpin 2.4s linear infinite; }
:is(.hdr .lang, .foot .lang, .menu__prefs .lang).is-open:not(#_) { border-color: rgb(var(--b-glow) / .55); box-shadow: 0 0 0 1px rgb(var(--b-glow) / .25); }
.lang-toggle:not(#_) { font-weight: 500; letter-spacing: .04em; color: var(--text); }
@media (prefers-reduced-motion: reduce) { :is(.hdr .lang, .foot .lang, .menu__prefs .lang):hover:not(#_)::before { animation: none; } }

/* 9: hero window glow - two hues only: lime and brand blue */
.hero__win::before, .hero__win::after, .chat-win::before, .chat-win::after { background: conic-gradient(from 200deg, #ccff00, #9fcc00 20%, #2a4fb8 45%, #1d3a85 65%, #9fcc00 85%, #ccff00) !important; }
[data-theme="light"] .hero__win::before, [data-theme="light"] .hero__win::after { background: conic-gradient(from 200deg, #8fc400, #6f9a00 20%, #1d3a85 45%, #0b1f4f 65%, #6f9a00 85%, #8fc400) !important; }

/* section jumps: no smooth scrolling while the curtain is down */
html.is-jumping, html.is-jumping body { scroll-behavior: auto !important; }

/* =====================================================================
   "Не підлаштовуйте бізнес": the hero demo playing on a laptop, a tablet and a phone.
   The scene is drawn in em, and 1em = 1% of the stage width (container units),
   so the whole composition scales as one picture at every width.
   ===================================================================== */
.x-split--dev:not(#_) { display: block; --gx: 50%; --gy: 0%; }
.x-split--dev > :first-child:not(#_) { border-right: 0; }
.x-devstage { container-type: inline-size; padding: 72px clamp(16px, 4vw, 72px) 0; background: var(--x-dots); border-bottom: 1px solid var(--line); overflow: hidden; }
.x-devs {
  --s-glow: rgb(204 255 0 / .16);
  --metal: linear-gradient(180deg, #3a4256, #1f2533 60%, #161b26);
  position: relative; height: 41em; max-width: 1180px; margin: 0 auto; font-size: min(1cqw, 11.8px);
}
[data-theme="light"] .x-devs {
  --s-glow: rgb(42 91 255 / .12);
  --metal: linear-gradient(180deg, #d9dde5, #b9bfcb 60%, #a3aab8);
}
/* light behind the laptop and a floor shadow under the group */
.x-devs::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 90%; background: radial-gradient(closest-side, var(--s-glow), transparent); pointer-events: none; }
.x-devs::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -1.5em; height: 4em; background: radial-gradient(closest-side, rgb(0 0 0 / .45), transparent); pointer-events: none; }
[data-theme="light"] .x-devs::after { background: radial-gradient(closest-side, rgb(11 31 79 / .2), transparent); }

/* the devices; --k is the parallax depth against the cursor (front devices move more) */
.dev { position: absolute; z-index: 1; translate: calc((var(--mx, 50%) - 50%) * var(--k, 0)) calc((var(--my, 50%) - 50%) * var(--k, 0) * .5); transition: translate .5s var(--ease), opacity .9s var(--ease), transform .9s var(--ease); }
.x-tilt.is-tilting .dev { transition: translate .2s ease-out, opacity .9s var(--ease), transform .9s var(--ease); }
.dev__bez { position: relative; padding: .55em; background: linear-gradient(180deg, #1c2334, #0b0e16 40%); border: 1px solid rgb(255 255 255 / .2); box-shadow: 0 2.4em 4em -2em rgb(0 0 0 / .6), inset 0 0 0 1px rgb(0 0 0 / .6); }
.scr { position: relative; overflow: hidden; background: #0e1c3d; }
.dev__vid { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; border: 0; pointer-events: none; }
.dev__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
/* glass glare over the picture */
.scr::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgb(255 255 255 / .09), transparent 36%); }

.dev--lap { --k: -.03; left: 19em; bottom: 2.5em; width: 62em; }
.dev--lap .dev__lid { width: 52em; margin: 0 auto; }
.dev--lap .dev__bez { padding: .8em .8em 1.1em; }
.dev--lap .scr { aspect-ratio: 16 / 10; }
.dev__base { position: relative; height: 1.6em; background: var(--metal); box-shadow: 0 1.4em 2em -1em rgb(0 0 0 / .6); }
.dev__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 8em; height: .5em; translate: -50% 0; background: rgb(0 0 0 / .25); }

.dev--tab { --k: -.08; z-index: 2; left: 1em; bottom: 1.5em; width: 31em; }
.dev--tab .dev__bez { padding: 1.1em; }
.dev--tab .scr { aspect-ratio: 16 / 10; }

.dev--ph { --k: -.14; z-index: 3; right: 12em; bottom: .6em; width: 12.6em; }
.dev--ph .dev__bez { padding: .5em; }
.dev--ph .scr { aspect-ratio: 9 / 19.5; }

/* rounded hardware (the site's square rule is for the interface, not for devices) */
.x-devs .dev--lap .scr:not(#_) { border-radius: .25em !important; }
.x-devs .dev--lap .dev__bez:not(#_) { border-radius: 1.1em 1.1em .2em .2em !important; }
.x-devs .dev__base:not(#_) { border-radius: .2em .2em 1.6em 1.6em / .2em .2em 1.2em 1.2em !important; }
.x-devs .dev--tab .dev__bez:not(#_) { border-radius: 1.8em !important; }
.x-devs .dev--tab .scr:not(#_) { border-radius: .7em !important; }
.x-devs .dev--ph .dev__bez:not(#_) { border-radius: 2em !important; }
.x-devs .dev--ph .scr:not(#_) { border-radius: 1.5em !important; }

/* arrival: the laptop rises, the tablet and the phone slide in */
.x-devs.x-rv { opacity: 1; transform: none; }
.x-devs .dev { opacity: 0; }
.x-devs .dev--lap { transform: translateY(3em); }
.x-devs .dev--tab { transform: translateX(-4em); }
.x-devs .dev--ph { transform: translateY(5em); }
.x-devs.in .dev { opacity: 1; transform: none; }
.x-devs.in .dev--tab { transition-delay: .15s; }
.x-devs.in .dev--ph { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .x-devs .dev { opacity: 1; transform: none; transition: none; translate: none; }
}
@media (hover: none) { .dev { translate: none; } }

/* facts in a row under the scene */
.x-facts--row:not(#_) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); }
.x-facts--row .x-fact:not(#_) { padding: 32px 32px 36px; border-bottom: 0; border-right: 1px solid var(--line); }
.x-facts--row .x-fact:first-child:not(#_) { padding-left: var(--pad); }
.x-facts--row .x-fact--cta:not(#_) { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; border-right: 0; padding-right: var(--pad); }
.x-fact--cta p:not(#_) { margin: 0; font-size: 17px; color: var(--text); }
.x-facts--row .x-btn:not(#_) { margin: 0; align-self: flex-start; }
@media (max-width: 1100px) {
  .x-facts--row:not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .x-facts--row .x-fact--cta:not(#_) { grid-column: 1 / -1; flex-direction: row; align-items: center; padding-left: var(--pad); border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .x-devstage { padding: 40px 0 0; }
  /* phones: the group is drawn larger and bleeds past both edges, like a cropped photo */
  .x-devs { width: 100em; max-width: none; margin-left: calc(50% - 50em); font-size: 1.24cqw; }
  .x-facts--row:not(#_) { grid-template-columns: minmax(0, 1fr); }
  .x-facts--row .x-fact:not(#_) { padding: 22px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .x-facts--row .x-fact--cta:not(#_) { flex-direction: column; align-items: flex-start; border-top: 0; border-bottom: 0; padding-bottom: 32px; }
}

/* =====================================================================
   Round 4: header buttons, preloader, no entrance animation, finance marker,
   light hero glow without the swampy olive
   ===================================================================== */
/* header: section buttons; the tagline only where they do not fit */
.hdr__nav { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; gap: 4px; }
.hdr__nav a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  border: 1px solid transparent; font: 500 14.5px var(--font); color: var(--text-2); white-space: nowrap;
  transition: color .2s, border-color .25s, background .25s, border-radius .25s;
}
.hdr__nav a:hover { color: var(--text); border-color: rgb(var(--fg) / .14); background: rgb(var(--fg) / .05); }
.hdr__nav a:hover:not(#_) { border-radius: 10px !important; }
.hdr__nav a[aria-current] { color: var(--text); border-color: rgb(var(--b-glow, 204 255 0) / .35); background: rgb(var(--b-glow, 204 255 0) / .07); }
.hdr__nav a:not(#_) { border-radius: 2px !important; }
@media (min-width: 1181px) { .hdr .hdr__tag { display: none; } }
@media (max-width: 1180px) { .hdr__nav { display: none; } }

/* every full page load: a full-screen background that fades away once everything is loaded
   (moving between pages uses the curtain instead) */
.preload {
  position: fixed; z-index: 400; inset: 0; display: none; place-items: center; pointer-events: none;
  background:
    radial-gradient(42% 38% at 50% 48%, rgb(204 255 0 / .16), transparent 70%),
    radial-gradient(70% 60% at 12% 100%, rgb(42 91 255 / .32), transparent 70%),
    radial-gradient(60% 55% at 92% 0%, rgb(42 91 255 / .22), transparent 70%),
    radial-gradient(rgb(255 255 255 / .1) 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(180deg, #0b1f4f, #050b1a);
  transition: opacity .8s cubic-bezier(.65, 0, .35, 1), visibility 0s .8s;
}
[data-theme="light"] .preload {
  background:
    radial-gradient(42% 38% at 50% 48%, rgb(204 255 0 / .4), transparent 70%),
    radial-gradient(70% 60% at 12% 100%, rgb(42 91 255 / .16), transparent 70%),
    radial-gradient(rgb(11 31 79 / .14) 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(180deg, #f4f6fb, #e4ebfa);
}
html.is-loading .preload { display: grid; }
html.is-loaded .preload { opacity: 0; visibility: hidden; }

/* no fade-in of the first screen text any more: it is simply there */
[data-reveal], [data-reveal].in { opacity: 1; transform: none; transition: none; }

/* finance card: chart and marker share one box, the marker sits on the 9th point (288, 20 of 320 x 110) */
.x-fin__plot { position: relative; width: calc(100% + 64px); height: 120px; margin: auto -32px 0; }
.x-fin__plot .x-fin__chart { width: 100%; height: 100%; margin: 0; }
.x-fin__plot .x-fin__tip { left: 90%; top: 18.18%; bottom: auto; transform: translate(-50%, calc(-100% - 8px)); }
.x-fin__plot .x-fin__tip::after { top: calc(100% + 9.5px); }
.x-gc.in .x-fin__plot .x-fin__tip { transform: translate(-50%, calc(-100% - 14px)); }
@media (max-width: 640px) { .x-fin__plot { width: calc(100% + 40px); margin-inline: -20px; } }

/* light theme hero window: clean blues with a touch of lime, no olive mixing into navy */
[data-theme="light"] .hero__win::before, [data-theme="light"] .hero__win::after { background: conic-gradient(from 200deg, #6f95ff, #2a5bff 22%, #8fb0ff 45%, #c6ff3d 58%, #2a5bff 75%, #6f95ff) !important; }


/* hero window glow follows the scroll (--glow from main.js): it fades in with the window and out as it shrinks */
.hero__win:not(#_)::before, .hero__win:not(#_)::after { visibility: visible; transition: opacity .35s linear; }
.hero__win:not(#_)::before { opacity: var(--glow, 0); }
.hero__win:not(#_)::after { opacity: calc(var(--glow, 0) * .55); }
[data-theme="light"] .hero__win:not(#_)::after { opacity: calc(var(--glow, 0) * .5); }

/* AI section chat: the same window as the hero demo - mac frame, module rail, rounded parts, lime cursor */
.chat { --p-rail: #0a1533; }
[data-theme="light"] .chat { --p-rail: #eef1f5; }
.x-ai .chat:not(#_) { border-radius: 12px !important; overflow: hidden; }
.chat__mac { flex: none; height: 34px; padding: 0 14px; }
.chat__main { flex: 1; min-height: 0; display: flex; }
.chat__col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prail { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 13px; padding-top: 14px; background: var(--p-rail); border-right: 1px solid var(--p-line); }
.prail .tile { width: 30px; height: 30px; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.prail .tile svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.prail .tile.cur { box-shadow: 0 0 0 2px var(--p-rail), 0 0 0 4px #b8e41c; }
[data-theme="light"] .prail .tile.cur { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d3366; }
.pcursor { width: 26px; height: 26px; filter: drop-shadow(0 3px 6px rgb(5 11 26 / .45)) drop-shadow(0 0 8px rgb(204 255 0 / .35)); }
.pripple { position: absolute; z-index: 4; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #b8e41c; pointer-events: none; animation: pRip .6s ease-out forwards; }
@keyframes pRip { to { transform: scale(3.4); opacity: 0; } }
.x-ai :is(.cm__av, .pfile, .chat__input):not(#_) { border-radius: 8px !important; }
.x-ai :is(.pnav__ava):not(#_) { border-radius: 6px !important; }
.x-ai :is(.chat__send, .prail .tile):not(#_) { border-radius: 7px !important; }
.x-ai :is(.pact):not(#_) { border-radius: 4px !important; }
.x-ai :is(.pfile i):not(#_) { border-radius: 3px !important; }
.x-ai :is(.ptyping span, .chat__status span, .mac__dots i, .pripple):not(#_) { border-radius: 50% !important; }
@media (max-width: 640px) { .prail { display: none; } .chat__mac { height: 28px; } }
/* inside the product window the buttons are the product blue, as in the hero demo */
.x-ai .chat__send:not(#_) { background: #2a5cc8; color: #fff; }
.x-ai .pact:not(#_) { background: #2a5cc8; border-color: #2a5cc8; color: #fff; }
.x-ai .pact + .pact:not(#_) { background: transparent; color: var(--p-ink); border-color: var(--p-line); }
.x-ai .chat__input.is-focus:not(#_) { border-color: #2a5cc8; }
/* tender steps can be picked by hand */
.x-tenders .tsteps li:not(#_) { cursor: pointer; transition: color .25s, background .25s; }
.x-tenders .tsteps li:not(.is-on):hover { color: var(--text); background: rgb(var(--fg) / .03); }
.x-tenders .tsteps li:focus-visible { outline: 2px solid var(--text-accent); outline-offset: -2px; }

/* tender progress ring: round ends and a round track */
.tcard .ring-arc:not(#_) { stroke-linecap: round; }
.tcard .ring-bg:not(#_) { stroke-linecap: round; }
.tcard__ring svg, .tcard__ring svg circle { border-radius: 50% !important; }

/* product windows keep their proportions at any width or browser zoom: the mac chrome scales with the window
   (1280px window = 40px bar, as designed), the CRM inside is untouched */
.mac, .chat { container-type: inline-size; }
.mac__bar:not(#_) { height: clamp(22px, 3.1cqw, 40px); padding: 0 clamp(8px, 1.25cqw, 16px); }
.mac__dots:not(#_) { gap: clamp(4px, .62cqw, 8px); }
.mac__dots i:not(#_) { width: clamp(7px, .94cqw, 12px); height: clamp(7px, .94cqw, 12px); }
.chat__mac:not(#_) { height: clamp(22px, 4.4cqw, 34px); }

/* device screens: stills of the hero app, always dark */
.x-devs .dev__img { object-fit: cover; object-position: left top; }
/* facts under the devices: three equal columns, the call to action as its own row */
.x-facts--row:not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: max(0px, calc(var(--pad) - 32px)); }
.x-facts--row .x-fact:not(#_), .x-facts--row .x-fact:first-child:not(#_) { padding: 32px; border-bottom: 0; border-right: 1px solid var(--line); }
.x-facts--row .x-fact:nth-child(3):not(#_) { border-right: 0; }
.x-facts--row .x-fact--cta:not(#_) { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; border-right: 0; border-top: 1px solid var(--line); padding-block: 28px; }
@media (max-width: 760px) {
  .x-facts--row:not(#_) { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .x-facts--row .x-fact:not(#_), .x-facts--row .x-fact:first-child:not(#_) { padding: 22px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .x-facts--row .x-fact--cta:not(#_) { flex-direction: column; align-items: flex-start; border-top: 0; border-bottom: 0; }
}

/* ---------- cookie bar: full width at the bottom, text left, buttons in one row, close cross ---------- */
.cookie:not(#_) {
  left: 0; right: 0; bottom: 0; width: auto; padding: 0; border-radius: 0 !important;
  border-width: 1px 0 0; border-color: rgb(150 180 255 / .18); background: rgb(8 16 38 / .96);
  box-shadow: 0 -24px 60px -30px rgb(0 0 0 / .7); transform: translateY(100%);
}
[data-theme="light"] .cookie:not(#_) { background: rgb(255 255 255 / .97); border-color: rgb(11 31 79 / .1); box-shadow: 0 -20px 50px -30px rgb(11 31 79 / .3); }
.cookie.is-open:not(#_) { transform: none; }
.cookie__in { position: relative; display: flex; align-items: center; gap: 32px; padding: 22px var(--pad); }
.cookie__txt { flex: 1; min-width: 0; }
.cookie__d:not(#_) { max-width: 760px; }
.cookie__btns:not(#_) { flex: none; flex-wrap: nowrap; margin-top: 0; }
.cookie__opts:not(#_) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 4px var(--pad) 20px; border-top: 1px solid rgb(150 180 255 / .14); }
.cookie__opts[hidden]:not(#_) { display: none; }
[data-theme="light"] .cookie__opts:not(#_) { border-top-color: rgb(11 31 79 / .1); }
.cookie__opt:not(#_) { align-items: flex-start; border-bottom: 0; padding: 16px 0 0; }
.cookie__opt .x-tg { flex: none; margin-top: 2px; }
.cookie__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cookie__list code { padding: 2px 7px; border: 1px solid rgb(150 180 255 / .2); font: 500 11.5px/1.5 var(--x-font); opacity: .85; }
[data-theme="light"] .cookie__list code { border-color: rgb(11 31 79 / .15); }
.cookie__list code:not(#_) { border-radius: 2px !important; }
@media (max-width: 1000px) {
  .cookie__in { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px var(--pad); }
  .cookie__btns:not(#_) { flex-wrap: wrap; }
  .cookie__opts:not(#_) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cookie__in { padding-right: var(--pad); }
  .cookie__btns .cookie__btn:not(#_) { flex: 1 1 auto; }
  .cookie__opts:not(#_) { max-height: 45vh; overflow-y: auto; }
}

/* ---------- finance chart: smooth line that ends at the current point, the dot sits on the line end ---------- */
/* the chart opens left to right as a whole (a dash animation breaks on a stretched svg and stopped the line short) */
.x-fin__plot .x-fin__line { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.x-fin__plot .x-fin__chart { clip-path: inset(-20px 100% -20px -20px); transition: clip-path 1.8s var(--ease) .2s; }
.x-gc.in .x-fin__plot .x-fin__chart { clip-path: inset(-20px -20px -20px -20px); }
.x-fin__guide { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .6s 1.9s; }
.x-gc.in .x-fin__guide { opacity: .35; }
.x-fin__dot { position: absolute; left: 92.5%; top: 14.545%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--text-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-accent) 22%, transparent), 0 0 14px var(--text-accent); transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1) 1.9s; }
.x-fin__dot:not(#_) { border-radius: 50% !important; }
.x-gc.in .x-fin__dot { transform: none; }
.x-fin__plot .x-fin__tip:not(#_) { left: 92.5%; top: 14.545%; transform: translate(-80%, calc(-100% - 10px)); transition: opacity .5s 2.1s, transform .5s var(--ease) 2.1s; }
.x-gc.in .x-fin__plot .x-fin__tip:not(#_) { transform: translate(-80%, calc(-100% - 16px)); }
.x-fin__plot .x-fin__tip::after { display: none; }

/* ---------- mobile pass (09.10.2026): footer tap areas ---------- */
@media (max-width: 640px) {
  .foot__col:not(#_) { gap: 0; }
  .foot__col a:not(#_) { padding: 8px 0; }
  .foot__links:not(#_) { gap: 0; }
  .foot__links :is(a, button):not(#_) { padding: 8px 0; }
}
/* burger menu: the page you are on */
.menu__links a[aria-current]:not(#_) { color: var(--text-accent); }

/* sideways tab rows: soft edge where more tabs are hidden (classes from main.js) */
.has-more-r:not(#_) { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.has-more-l:not(#_) { -webkit-mask: linear-gradient(90deg, transparent, #000 56px); mask: linear-gradient(90deg, transparent, #000 56px); }
.has-more-l.has-more-r:not(#_) { -webkit-mask: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
/* text links: a taller invisible tap area on touch screens, the look stays the same */
@media (hover: none), (max-width: 640px) {
  .x-link:not(#_) { position: relative; }
  .x-link:not(#_)::before { content: ""; position: absolute; inset: -10px 0; }
}

/* footer: social networks as buttons like the messengers; cookie settings link underlined only on hover */
.foot__contact-social.foot__soc:not(#_) { padding-top: 0; font-size: inherit; }
@media (min-width: 641px) { .foot__contact-social.foot__soc:not(#_) { justify-content: flex-end; } }
.foot__cookie:not(#_) { text-decoration: none; }
.foot__cookie:not(#_):hover { text-decoration: underline; }
/* tender check: the scanning spinner is a ring (the global square corners reset made it square) */
.trow.is-scan .trow__ic:not(#_)::after { border-radius: 50% !important; }
/* AI roles on tablets and phones: all roles visible in a 2-column grid, no sideways scrolling */
@media (max-width: 900px) {
  .x-ai .roles:not(#_) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; -webkit-mask: none; mask: none; }
  .x-ai .roles:not(#_)::after { display: none; }
  .x-ai .role:not(#_) { position: relative; width: auto; min-height: 52px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .x-ai .role:nth-child(odd):not(#_) { padding-left: var(--pad); }
  .x-ai .role:nth-child(even):not(#_) { border-right: 0; }
  .x-ai .role.is-on:not(#_) { background: linear-gradient(90deg, rgb(var(--b-glow, 204 255 0) / .1), transparent 85%); }
  .x-ai .role:not(#_)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform .35s var(--ease); }
  .x-ai .role.is-on:not(#_)::after { transform: none; }
}
/* devices on phones: the laptop full width on top, the tablet and the phone side by side under it,
   nothing cropped by the screen edges (1em = 2% of the stage, so bezels and corners stay in proportion) */
@media (max-width: 760px) {
  .x-devstage:not(#_) { padding: 36px var(--pad) 40px; }
  .x-devs:not(#_) { display: grid; grid-template-columns: minmax(0, 1fr) 28%; grid-template-areas: "lap lap" "tab ph"; align-items: end; gap: 7cqw 4cqw; width: auto; height: auto; max-width: none; margin: 0; font-size: 2cqw; }
  .x-devs .dev:not(#_) { position: relative; left: auto; right: auto; bottom: auto; width: 100%; translate: none; }
  .x-devs .dev--lap:not(#_) { grid-area: lap; }
  .x-devs .dev--lap .dev__lid:not(#_) { width: 86%; }
  .x-devs .dev--tab:not(#_) { grid-area: tab; }
  .x-devs .dev--ph:not(#_) { grid-area: ph; }
  .x-devs:not(#_)::before { left: 0; right: 0; height: 60%; }
  .x-devs:not(#_)::after { bottom: -1em; }
}

/* ---------- bigger number badges in numbered lists (13.10.2026) ---------- */
:is(.x-step__n, .tsteps__b, .x-how__n):not(#_):not(#_) { width: 40px; height: 40px; font: 600 16px/1 var(--x-font); }
.x-step:not(#_):not(#_), .x-tenders .tsteps li:not(#_):not(#_) { grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; }
.x-how__n:not(#_):not(#_) { top: -20px; }
.x-step__n:not(#_):not(#_), .x-tenders .tsteps__b:not(#_):not(#_) { margin-top: -6px; }
@media (max-width: 640px) {
  :is(.x-step__n, .tsteps__b, .x-how__n):not(#_):not(#_) { width: 36px; height: 36px; font-size: 15px; }
  .x-step:not(#_):not(#_), .x-tenders .tsteps li:not(#_):not(#_) { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
}

/* ---------- header: phone and the messenger menu (13.10.2026) ---------- */
.hdr .hdr-ic { position: relative; width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--text); }
.hdr-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hdr-tel { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px; font: 600 14.5px/1 var(--x-font); color: var(--text); white-space: nowrap; transition: color .2s; }
.hdr-tel svg { width: 17px; height: 17px; fill: none; stroke: var(--text-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hdr-tel:hover { color: var(--text-accent); }
.hdr-call { display: none !important; }
@media (max-width: 1360px) { .hdr-tel { display: none; } .hdr-call { display: grid !important; } }
.hdr-chat { position: relative; flex: none; }
.hdr-chat__dot:not(#_) { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50% !important; background: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--accent); animation: hdrDot 2.4s ease-in-out infinite; }
@keyframes hdrDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(.7); opacity: .7; } }
.hdr-chat__btn[aria-expanded="true"] .hdr-chat__dot { animation: none; opacity: 0; }
.hdr-chat__pop { position: absolute; z-index: 5; top: calc(100% + 12px); right: 0; width: 264px; padding: 8px; border: 1px solid var(--line-2); background: var(--raised, var(--bg)); box-shadow: 0 24px 60px -18px rgb(0 0 0 / .5); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .22s, visibility .22s, transform .3s var(--ease); }
.hdr-chat.is-open .hdr-chat__pop { opacity: 1; visibility: visible; transform: none; }
.hdr-chat__t { padding: 8px 10px 10px; font: 500 12px/1 var(--x-font); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.hdr-chat__i { display: flex; align-items: center; gap: 12px; padding: 9px 10px; color: var(--text); transition: background .2s; }
.hdr-chat__i:hover, .hdr-chat__i:focus-visible { background: rgb(var(--fg) / .07); }
.hdr-chat__i > i { width: 36px; height: 36px; display: grid; place-items: center; flex: none; color: #fff; }
.hdr-chat__i > i svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hdr-chat__i--tg > i { background: #2aabee; }
.hdr-chat__i--vb > i { background: #7360f2; }
.hdr-chat__i--wa > i { background: #25d366; }
.hdr-chat__i--tel { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.hdr-chat__i--tel > i { background: var(--accent); color: var(--on-accent); }
.hdr-chat__i span { display: grid; gap: 3px; min-width: 0; }
.hdr-chat__i b { font: 600 14.5px/1.2 var(--x-font); }
.hdr-chat__i small { font: 400 12.5px/1.2 var(--x-font); color: var(--text-2); }
.hdr-chat__pop:not(#_) { border-radius: 16px !important; overflow: hidden; }
.hdr-chat__i:not(#_) { border-radius: 10px !important; }
.hdr-chat__i > i:not(#_) { border-radius: 9px !important; }
@media (max-width: 1050px) { .hdr .hdr-ic { width: 44px; height: 44px; } }
@media (max-width: 900px) {
  .hdr .hdr-ic { width: 40px; height: 40px; }
  .hdr-chat__pop { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
}

/* ---------- logo: SVG mark (nodes push away from the cursor, main.js) + wordmark image (13.10.2026) ---------- */
.hs-logo { --mk-body: #ccff00; --mk-cube: #0b1f4f; display: inline-flex; align-items: center; gap: .152em; height: 1em; font-size: 38px; line-height: 1; }
[data-theme="light"] .hs-logo:not(.on-navy *) { --mk-body: #0b1f4f; --mk-cube: #ccff00; }
.hs-mk { width: 1em; height: 1em; flex: none; overflow: visible; }
.hs-mk__links line { stroke: var(--mk-body); stroke-width: 24; stroke-linecap: round; }
.hs-mk__sat, .hs-mk__core circle { fill: var(--mk-body); }
.hs-mk__cube { fill: none; stroke: var(--mk-cube); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.hs-word { height: .357em; width: auto; }
.hs-logo--foot { font-size: 48px; }
@media (max-width: 900px) { .hs-logo--hdr { font-size: 32px; } .hs-logo--foot { font-size: 44px; } }

/* =====================================================================
   Hero (13.10.2026): title + four steps that follow the live demo, facts under the window
   ===================================================================== */
.hx { padding-top: 132px; }
.hx__net { opacity: .55; }
.hx__in { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: max(20px, calc(var(--pad) - 56px)); display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: clamp(40px, 4.4vw, 76px); align-items: center; }
.hx__eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1.3 var(--x-font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-accent); }
.hx__eyebrow i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgb(var(--b-glow, 204 255 0) / .16); }
.hx__title { margin-top: 18px; font: 400 clamp(46px, 5vw, 84px)/.98 var(--font-head); color: var(--text); text-wrap: balance; }
.hx__title span { color: var(--text-accent); }
.hx__steps { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hx__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; align-items: start; padding: 14px 16px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: background .5s var(--ease), border-color .5s var(--ease); }
.hx__step:hover { background: rgb(var(--fg) / .025); }
.hx__step.is-on { background: rgb(var(--fg) / .045); border-color: rgb(var(--fg) / .1); }
.hx__ic, .hx__fic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; color: var(--text-accent); background: rgb(var(--b-glow, 204 255 0) / .08); border: 1px solid rgb(var(--b-glow, 204 255 0) / .24); transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.hx__ic svg, .hx__fic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx__step.is-on .hx__ic { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 22px -4px rgb(var(--b-glow, 204 255 0) / .6); }
.hx__txt { display: grid; gap: 4px; padding-top: 1px; }
.hx__txt b { font: 600 18px/1.35 var(--x-font); color: var(--text); }
.hx__txt span { font: 400 15px/1.5 var(--x-font); color: var(--text-2); }
.hx__step:not(.is-on) .hx__txt b { color: var(--text-2); }
.hx__prog { position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left center; opacity: 0; transition: opacity .3s; }
.hx__step.is-on .hx__prog { opacity: 1; }
.hx__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hx__vis { position: relative; }
.hx__vis::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgb(47 111 237 / .32), transparent); }
[data-theme="light"] .hx__vis::before { background: radial-gradient(closest-side, rgb(47 111 237 / .14), transparent); }
.hx__mac { position: relative; }
.hx__frame { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.hx__facts { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hx__fact { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border: 1px solid rgb(var(--fg) / .1); border-radius: 4px; background: linear-gradient(180deg, rgb(var(--fg) / .05), rgb(var(--fg) / .015)); transition: border-color .5s var(--ease), box-shadow .5s var(--ease); }
.hx__fact .hx__fic { grid-row: 1 / 3; width: 40px; height: 40px; }
.hx__fact b { font: 400 24px/1 var(--font-head); color: var(--text); }
.hx__fact > span:last-child { margin-top: 4px; font: 500 12.5px/1.3 var(--x-font); color: var(--text-2); }
.hx__fact.is-on { border-color: rgb(var(--b-glow, 204 255 0) / .5); box-shadow: 0 0 0 1px rgb(var(--b-glow, 204 255 0) / .15), 0 14px 34px -18px rgb(var(--b-glow, 204 255 0) / .55); }
.hx__fact.is-on .hx__fic { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hx .trusted { margin-top: 96px; }
/* entrance: the text rises line by line, the window comes up after it (main.js adds .is-in when the loader is gone) */
.hx [data-hin] { opacity: 0; transform: translateY(26px); }
.hx .hx__vis[data-hin] { transform: translateY(56px) scale(.97); }
.hx.is-in [data-hin] { opacity: 1; transform: none; transition: opacity .8s var(--ease) calc(var(--i, 0) * 110ms), transform 1s var(--ease) calc(var(--i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce) { .hx [data-hin] { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
  .hx { padding-top: 112px; }
  .hx__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hx__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* phones and tablets: one step at a time, it slides up when the demo moves on */
  .hx__copy { display: contents; }
  .hx__eyebrow { order: 1; } .hx__title { order: 2; margin-top: -26px; } .hx__steps { order: 3; } .hx__vis { order: 4; } .hx__btns { order: 5; margin-top: -8px; }
  .hx__steps { margin-top: -10px; gap: 0; overflow: hidden; }
  .hx__step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(100%); transition: transform .6s var(--ease), opacity .5s var(--ease), visibility .6s, background .5s, border-color .5s; }
  .hx__step.is-prev { transform: translateY(-100%); }
  .hx__step.is-on { opacity: 1; visibility: visible; transform: none; }
  .hx__facts { display: none; }
  .hx .trusted { margin-top: 64px; }
}
@media (max-width: 640px) {
  .hx { padding-top: 96px; }
  .hx__in { gap: 32px; }
  .hx__title { font-size: clamp(38px, 11vw, 50px); margin-top: -20px; }
  .hx__btns > * { width: 100%; }
  .hx__txt b { font-size: 16px; } .hx__txt span { font-size: 14px; }
  .hx__step { grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; padding: 12px; }
  .hx__ic { width: 38px; height: 38px; }
}
/* hero: align with the header logo; each title line on one line on wide screens (main.js shrinks it if needed) */
.hx__in:not(#_) { padding-inline: var(--pad); }
.hx__title:not(#_) { font-size: clamp(40px, 3.8vw, 68px); }
@media (min-width: 1101px) { .hx__title:not(#_) { white-space: nowrap; } }
@media (min-width: 1101px) and (max-width: 1360px) {
  .hx__fact:not(#_) { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .hx__fact .hx__fic:not(#_) { display: none; }
}

/* =====================================================================
   Modules (13.10.2026): one module at a time instead of nine busy cards
   list of modules on the left, the module's live card on the right
   ===================================================================== */
.x-mt:not(#_) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.x-mt__list { display: flex; flex-direction: column; border: 1px solid rgb(var(--fg) / .08); background: linear-gradient(180deg, rgb(var(--fg) / .035), rgb(var(--fg) / .01) 70%); }
.x-mt__tab { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 13px 22px; border-bottom: 1px solid var(--line); text-align: left; color: var(--text-2); transition: background .35s; }
.x-mt__tab:last-child { border-bottom: 0; }
.x-mt__tab:hover { background: rgb(var(--fg) / .03); }
.x-mt__tab.is-on { background: linear-gradient(90deg, rgb(var(--b-glow, 204 255 0) / .08), transparent 80%); }
.x-mt__n { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgb(var(--fg) / .2); background: var(--x-surf-solid, transparent); font: 600 15px/1 var(--x-font); color: var(--subtle); transition: background .35s, border-color .35s, color .35s, box-shadow .35s; }
.x-mt__tab.is-on .x-mt__n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 14px -2px rgb(var(--b-glow, 204 255 0) / .55); }
.x-mt__t { display: grid; min-width: 0; }
.x-mt__t b { font: 500 17px/1.3 var(--x-font); color: var(--text-2); transition: color .35s; }
.x-mt__tab.is-on .x-mt__t b { color: var(--text); }
.x-mt__t > span { max-height: 0; overflow: hidden; opacity: 0; font: 400 14px/1.45 var(--x-font); color: var(--text-2); transition: max-height .45s var(--ease), opacity .35s, margin .45s var(--ease); }
.x-mt__tab.is-on .x-mt__t > span { max-height: 4.4em; opacity: 1; margin-top: 4px; }
.x-mt__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left center; opacity: 0; }
.x-mt__tab.is-on .x-mt__prog { opacity: 1; }
:is(.x-mt__n, .x-mt__list, .x-mt__tab):not(#_) { border-radius: 2px !important; }
.x-mt__stage { display: grid; min-width: 0; }
.x-mt .x-mt__card:not(#_) { grid-area: 1 / 1; min-height: 100%; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .55s, border-color .35s, box-shadow .35s; }
.x-mt .x-mt__card.is-on:not(#_) { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .05s, transform .55s var(--ease) .05s, visibility 0s, border-color .35s, box-shadow .35s; }
.x-mt .x-mt__card .x-gc__vis:not(#_) { min-height: 360px; }
@media (max-width: 1100px) {
  .x-mt:not(#_) { grid-template-columns: minmax(0, 1fr); }
  .x-mt__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .x-mt__tab { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-right: 1px solid var(--line); }
  .x-mt__tab:nth-child(3n) { border-right: 0; }
  .x-mt__tab:last-child { border-bottom: 1px solid var(--line); }
  .x-mt__n { width: 32px; height: 32px; font-size: 13px; }
  .x-mt__t b { font-size: 15px; }
  .x-mt__t > span, .x-mt__tab.is-on .x-mt__t > span { display: none; }
}
@media (max-width: 640px) {
  .x-mt__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-mt__tab:nth-child(n) { border-right: 1px solid var(--line); }
  .x-mt__tab:nth-child(2n) { border-right: 0; }
  .x-mt__t b { font-size: 14px; }
  .x-mt .x-mt__card .x-gc__vis:not(#_) { min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .x-mt .x-mt__card:not(#_) { transition: none; } }
.hx[data-hx-beat] .hx__step { cursor: default; }
.hx__after { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 72px auto 0; padding-inline: var(--pad); }
.hx--page { padding-bottom: 96px; }
@media (max-width: 900px) { .hx__after { margin-top: 48px; } .hx--page { padding-bottom: 64px; } }

/* =====================================================================
   Logo intro (13.10.2026): first visit to the homepage only (html.is-intro, main.js)
   ===================================================================== */
.intro { display: none; }
html.is-intro { overflow: hidden; }
html.is-intro .intro { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; background: var(--bg); }
.intro::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--b-glow, 204 255 0) / .16), transparent); opacity: 0; transition: opacity .6s; pointer-events: none; }
.intro.is-hit::before { opacity: 1; }
.intro__lock { --mk-body: #ccff00; --mk-cube: #0b1f4f; position: relative; display: flex; align-items: center; gap: .152em; font-size: clamp(96px, 18vmin, 176px); height: 1em; transform-origin: 0 0; will-change: transform; }
[data-theme="light"] .intro__lock { --mk-body: #0b1f4f; --mk-cube: #ccff00; }
.intro__mk { width: 1em; height: 1em; flex: none; overflow: visible; }
.intro__body .ii-p { fill: var(--mk-body); transform-box: fill-box; transform-origin: center; }
.intro__body line.ii-p { fill: none; stroke: var(--mk-body); stroke-width: 24; stroke-linecap: round; }
.intro__body { transform-box: view-box; transform-origin: 235px 255px; }
.intro__cube { fill: none; stroke: var(--mk-cube); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro__wave { fill: none; stroke: #ccff00; stroke-width: 6; opacity: 0; transform-box: view-box; transform-origin: 235px 255px; }
[data-theme="light"] .intro__wave { stroke: #0b1f4f; }
.intro__word { height: .357em; display: block; clip-path: inset(0 100% 0 0); }
.intro__word img { height: 100%; width: auto; display: block; }
.intro__skip { position: absolute; right: 24px; bottom: 24px; padding: 10px 16px; border: 1px solid var(--line-2); font: 500 13px/1 var(--x-font); color: var(--text-2); opacity: 0; transition: opacity .4s .6s, color .2s, border-color .2s; }
html.is-intro .intro__skip { opacity: 1; }
.intro__skip:hover { color: var(--text); border-color: var(--text); }
/* while the intro plays, the header logo waits for the flying one */
html.is-intro .hdr__brand .hs-logo { opacity: 0; }
.intro:not(#_)::before { border-radius: 50% !important; }
html.is-intro .ii-p { opacity: 0; }
.intro__seal { fill: var(--mk-body); opacity: 0; }
.intro__lock:not(#_) { font-size: min(clamp(96px, 18vmin, 176px), 22vw); }

/* ---------- hero fixes (13.10.2026, evening) ---------- */
/* the small line above the title stays only for search engines (it is the page H1) */
.hx__eyebrow:not(#_), #hsAnim .hs-eyebrow:not(#_) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hx__title:not(#_), #hsAnim .hs-title:not(#_) { margin-top: 0; }
/* the window: the old gradient frame and soft glow instead of the blue spot */
.hx__vis:not(#_)::before { content: none; }
.hx__win { position: relative; isolation: isolate; border-radius: 13px; }
.hx__win::before, .hx__win::after { content: ""; position: absolute; pointer-events: none; border-radius: 13px; background: conic-gradient(from 200deg, #ccff00, #9fcc00 20%, #2a4fb8 45%, #1d3a85 65%, #9fcc00 85%, #ccff00); }
.hx__win::before { inset: -1.5px; z-index: 1; padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hx__win::after { inset: -28px; z-index: -1; border-radius: 40px; filter: blur(56px); opacity: .5; }
[data-theme="light"] .hx__win::before, [data-theme="light"] .hx__win::after { background: conic-gradient(from 200deg, #6f95ff, #2a5bff 22%, #8fb0ff 45%, #c6ff3d 58%, #2a5bff 75%, #6f95ff); }
[data-theme="light"] .hx__win::before { inset: -2.5px; padding: 2.5px; border-radius: 14px; }
[data-theme="light"] .hx__win::after { opacity: .45; }
:is(.hx__win, .hx__win::before):not(#_) { border-radius: 13px !important; }
.hx__win:not(#_)::after { border-radius: 40px !important; }
.hx__win .hx__mac { box-shadow: 0 50px 100px -40px rgb(0 0 0 / .6); }
/* the CTA pulses: a ring runs out from the button over its breathing glow */
:is(.hx, #hsAnim, #hsMain) .btn--primary:not(#_) { outline: 2px solid transparent; animation: bBreath 3.2s ease-in-out infinite, hxPulse 2.2s ease-out infinite; }
@keyframes hxPulse { 0% { outline-color: rgb(var(--b-glow, 204 255 0) / .65); outline-offset: 0; } 75%, 100% { outline-color: rgb(var(--b-glow, 204 255 0) / 0); outline-offset: 14px; } }
@media (prefers-reduced-motion: reduce) { :is(.hx, #hsAnim, #hsMain) .btn--primary:not(#_) { animation: none; } }
@media (max-width: 900px) { .hx__title:not(#_) { margin-top: 0; } .hx__steps:not(#_) { margin-top: -10px; } }

/* 13.10: modules tabs without numbers */
.x-mt__tab:not(#_) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1101px) {
  .hx__in:not(#_) { max-width: none; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: clamp(40px, 4.4vw, 64px); }
  /* the window stays inside the column and never runs below the first screen */
  .hx__vis:not(#_) { width: 100%; max-width: calc((100svh - 72px - 80px - 120px) * 1.6); justify-self: end; }
}
/* 13.10: every hero fills the first screen with its content in the middle of it, as on Tenders */
@media (min-width: 901px) {
  .hx:not(#_) { padding-top: 84px; }
  .hx__in:not(#_) { min-height: calc(100svh - 84px); padding-block: 40px; align-content: center; }
  #hsAnim .hs-stage:not(#_) { min-height: 100svh; padding-top: 112px; padding-bottom: 40px; align-content: center; }
}

/* 13.10: header chat shows the real messenger logos; hero step timers move smoothly between demo updates */
.hdr-chat__i > i svg:not(#_) { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.hx__step.is-on .hx__prog { transition: opacity .3s; } /* main.js draws the bar every frame */

/* 13.10: the devices with the CRM stand still (no cursor parallax), so the screenshots stay sharp */
.x-split--dev .dev:not(#_) { translate: none; }

/* 13.10: a bigger product window in the heroes: narrower side margins, the text column has a fixed width
   and the window takes the rest (still capped by the screen height above) */
@media (min-width: 1101px) {
  .hx__in:not(#_) { max-width: 1760px; padding-inline: clamp(24px, 3vw, 48px); grid-template-columns: min(560px, 44%) minmax(0, 1fr); gap: 48px; }
}

/* 13.10: the sectors grid under the Industries hero kept the growing --pad (320px at 1920) and shrank to 800px */
@media (min-width: 901px) {
  .hx__after:not(#_) { max-width: 1760px; padding-inline: clamp(24px, 3vw, 48px); }
}

/* 14.10: home modules like the other sections - tab text on the heading line, list and card joined */
@media (min-width: 1101px) {
  .x-mt:not(#_) { gap: 0; }
  .x-mt__stage:not(#_) { margin-left: -1px; }
  .x-mt__tab:not(#_) { padding-left: max(22px, calc(var(--pad) - var(--gut))); }
}

/* 14.10: brand icons on the messenger and social buttons (footer, menu, contacts) */
.foot__soc a:not(#_) { display: inline-flex; align-items: center; gap: 8px; }
.foot__soc a svg, .p-dt__btns a svg, .p-dt__soc svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
.menu__soc:not(#_) { padding-top: 14px; }
.menu__soc + .menu__soc:not(#_) { padding-top: 0; }
.menu__soc a:not(#_) { padding: 9px 14px; font-size: 13px; }
.menu__soc--ic a:not(#_) { width: 40px; height: 40px; padding: 0; justify-content: center; }
.menu__soc--ic a svg { width: 18px; height: 18px; }
.p-dt__btns a:not(#_) { gap: 8px; padding: 0 12px; font-size: 14px; }
.p-dt__btns a svg { width: 18px; height: 18px; }
.p-dt__soc { display: inline-flex; align-items: center; gap: 12px; }
.p-dt__soc svg { width: 18px; height: 18px; color: var(--subtle); transition: color .2s; }
.p-dt__links a:hover .p-dt__soc svg { color: var(--text-accent); }
@media (max-width: 900px) {
  .menu__side > .menu__soc:not(#_) { flex-basis: 100%; padding-top: 4px; }
  .menu__side > .menu__soc--ic:not(#_) { padding-top: 0; margin-bottom: 10px; }
}

/* 14.10: form select in the site style (main.js builds .sel__btn and .sel__list over the native select) */
.select.is-custom select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.sel__btn:not(#_) { display: flex; align-items: center; text-align: left; padding-right: 48px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__btn.is-empty { color: var(--muted); }
.select.is-custom .i { transition: transform .3s var(--ease); }
.select.is-open .i { transform: rotate(180deg); }
.select.is-open .sel__btn:not(#_) { border-color: var(--text-accent); background: rgb(var(--fg) / .06); }
.sel__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--x-surf-solid, #0d1730); border: 1px solid rgb(var(--fg) / .14); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.select.is-open .sel__list { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease), visibility 0s; }
.sel__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; font: 500 15px/1.3 var(--x-font); color: var(--text-2); cursor: pointer; transition: background .15s, color .15s; }
.sel__list li.is-hi { background: rgb(var(--fg) / .06); color: var(--text); }
.sel__list li[aria-selected="true"] { color: var(--text-accent); }
.sel__list li[aria-selected="true"]::after { content: ""; width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 10px rgb(var(--b-glow, 204 255 0) / .6); }
:is(.sel__list, .sel__list li):not(#_) { border-radius: 2px !important; }
[data-theme="light"] .sel__list { background: #fff; border-color: rgb(11 31 79 / .14); box-shadow: 0 24px 50px -24px rgb(11 31 79 / .35); }
[data-theme="light"] .on-navy:not(.hs-anim) .sel__list { background: #0e1c3d; border-color: rgb(255 255 255 / .14); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6); }
/* 15.10: footer social buttons 2 x 2 on phones */
@media (max-width: 640px) {
  .foot__contact-social.foot__soc:not(#_) { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .foot__contact-social.foot__soc a:not(#_) { justify-content: center; }
}

/* 15.10: on phones the product window is a phone (the demo inside is the phone app version), not a mac window */
@media (max-width: 600px) {
  .hx__win:not(#_) { width: min(300px, 82vw); margin-inline: auto; }
  :is(.hx__win, .hx__win::before):not(#_) { border-radius: 46px !important; }
  .hx__win .mac:not(#_) { padding: 9px; border-radius: 46px !important; background: linear-gradient(150deg, #262f55, #0a0f24 60%); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14), 0 40px 80px -30px rgb(0 0 0 / .7); }
  .hx__win .mac__bar:not(#_) { display: none; }
  .hx__frame:not(#_) { border-radius: 37px !important; }
}

/* 15.10: cards whose own transition list dropped opacity popped in on scroll instead of fading: keep the reveal in it */
:is(.x-li, .p-tile, .p-post).x-rv:not(#_) { transition: opacity .7s var(--ease), transform .7s var(--ease), translate .45s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .3s, filter .2s; }
/* 15.10 (2): the gradient outline follows the phone (a pseudo element inside :is() was ignored) */
@media (max-width: 600px) {
  .hx__win:not(#_)::before, [data-theme="light"] .hx__win:not(#_)::before { border-radius: 47px !important; }
  .hx__win:not(#_)::after { border-radius: 60px !important; }
}

/* 16.10: phones - the same air in every section: heading 52px from the top, about 56px under the last block */
@media (max-width: 640px) {
  .x-price .x-price__l:not(#_) { padding-top: 51px; }
  .sec.security:not(#_) { padding-top: 52px; padding-bottom: 16px; }
  .x-sec > .x-bar:last-child:not(#_) { padding-bottom: 0; }
  .hx:not(.hx--page):not(#_) { padding-bottom: 8px; }
  .hx .marquee:not(#_) { padding-bottom: 0; }
}
/* 16.10: the plus of "your industry is not in the list" stands out in lime */
.x-li--own > .i.i-plus:not(#_) { width: 40px; height: 40px; padding: 9px; border-radius: 2px; background: #ccff00 !important; color: #0b1f4f; box-shadow: 0 0 18px -4px rgb(204 255 0 / .6); }
/* 16.10: a longer text in the bar must not squeeze the button */
.x-bar > .x-btn:not(#_) { flex: none; }

/* =====================================================================
   16.10: the function mockups are the HubSuite product, not site graphics: an app window with the product header
   (logo + module), the module rail, the product palette, Geist and rounded parts. Inside .pw the site tokens
   are remapped to the product palette, so every existing mockup part takes the product colors by itself.
   ===================================================================== */
.pw {
  --p-bg: #0c1736; --p-ink: #e3e9f6; --p-soft: #b4c0dc; --p-line: #1f2e55; --p-nav: #0a1a40; --p-rail: #0a1533;
  --fg: 227 233 246; --text: #e3e9f6; --text-2: #b4c0dc; --subtle: #8796b7; --muted: #7181a2;
  --line: #1d2a4a; --line-2: #22335c; --line-3: #2a3a63; --raised: #0c1736; --elevated: #111f42;
  --accent: #2a5cc8; --text-accent: #9db4ff; --on-accent: #fff;
  --x-surf-bg: #111f42; --x-surf-solid: #13224a; --x-surf-line: #1f2e55; --x-glow-strong: rgb(42 92 200 / .45);
  --x-ok: #4fd07a; --x-warn: #f0a133; --x-danger: #ff6b6f; --x-info: #7d9bff;
  position: relative; overflow: hidden; background: var(--p-bg); color: var(--p-ink); font-family: Geist, var(--x-font);
  border: 1px solid var(--p-line); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7);
}
[data-theme="light"] .pw {
  --p-bg: #fff; --p-ink: #1d2433; --p-soft: #405172; --p-line: #e3e7ee; --p-nav: #0b2d5b; --p-rail: #eef1f5;
  --fg: 29 36 51; --text: #1d2433; --text-2: #405172; --subtle: #5f6f8f; --muted: #687895;
  --line: #e3e7ee; --line-2: #e3e7ee; --line-3: #d5dbe5; --raised: #fff; --elevated: #f6f7f9;
  --accent: #2a5cc8; --text-accent: #2a5cc8;
  --x-surf-bg: #fff; --x-surf-solid: #fff; --x-surf-line: #e3e7ee; --x-glow-strong: rgb(42 92 200 / .25);
  --x-ok: #1f7a34; --x-warn: #b8650a; --x-danger: #e5484d; --x-info: #2a5cc8;
  box-shadow: 0 40px 80px -40px rgb(11 31 79 / .35);
}
.pw .pnav { position: relative; z-index: 3; flex: none; height: 44px; font-family: Geist, var(--x-font); }
.pw--abs { padding-top: 44px !important; }
.pw--abs > .pw__nav { position: absolute; left: 0; right: 0; top: 0; }
.pw__main { display: flex; min-height: 0; }
.pw__body { flex: 1; min-width: 0; }
.pw .prail { --p-rail: inherit; background: var(--p-rail); border-right: 1px solid var(--p-line); padding-top: 14px; }
.pw__crumb.x-win__bar { height: 52px; padding: 0 18px; border-bottom: 1px solid var(--p-line); font-size: 15px; font-weight: 600; color: var(--p-ink); }
.pw__crumb .x-win__path { font-weight: 400; }
/* rounded like the product */
.pw:not(#_) { border-radius: 12px !important; }
.pw :is(.pnav__ava, .x-av, .x-deal, .x-offer, .x-doc, .x-pipe__col, .x-cal i, .trow, .trow__ic, .x-doc__ic, .x-hr__more, .x-gnt__tr i):not(#_) { border-radius: 8px !important; }
.pw :is(.prail .tile):not(#_) { border-radius: 7px !important; }
.pw :is(.x-st, .x-pill, .trow__tag, .x-offer__tag, .x-doc__sign, .x-stock__r i, .x-gnt__tr, .x-tg, .x-hr__av, .x-deal i):not(#_) { border-radius: 999px !important; }
/* :is() cannot hold a pseudo-element (the whole rule was dropped): the knobs get their own rule */
.pw .x-stock__r i:not(#_)::before, .pw .x-tg:not(#_)::after { border-radius: 999px !important; }
.pw .x-pill { border-color: var(--line-3); font-family: Geist, var(--x-font); }
.pw .x-mod { font-family: Geist, var(--x-font); }
.pw .x-av { background: linear-gradient(135deg, #6d64d8, #3f3aa3); color: #fff; }
.pw .x-tg.is-on, .pw .x-stage.is-added .x-row--new .x-tg { background: #2a5cc8; }
/* about windows */
.x-about .pw.x-win { max-width: 720px; }
/* module cards: the picture is an inset app window */
.x-mt .pw.x-gc__vis:not(#_) { margin: 20px 20px 0; flex: 1; }
.x-mt .pw.x-gc__vis.x-fin:not(#_) { padding-left: 28px; padding-right: 28px; }
/* tenders: the readiness card */
.x-tenders .tcard.pw:not(#_) { padding-top: 64px !important; }
.x-tenders .tcard.pw .trow { background: var(--elevated); }
@media (max-width: 640px) {
  .pw .prail { display: none; }
  .x-mt .pw.x-gc__vis:not(#_) { margin: 12px 12px 0; }
}
/* CRM board like the product: plain columns, cards with the colored stage edge and the green sum */
.pw .x-pipe__col { background: none; border: 0; padding: 0; }
.pw .x-pipe__col > p { padding: 0 2px 6px; border-bottom: 3px solid #21a453; margin-bottom: 4px; font-weight: 600; color: var(--p-ink); }
.pw .x-deal { background: var(--elevated); border: 1px solid var(--p-line); border-left: 3px solid #21a453; }
.pw .x-deal span { color: var(--x-ok); font-weight: 600; }
.pw .x-deal--slot { border-left-width: 1px; border-style: dashed; background: none; }
.pw *:not(#_) { font-family: inherit; }
.pw .x-fin__n:not(#_) { font-weight: 650; letter-spacing: -.02em; }
.x-mt .pw.x-gc__vis:not(#_) { padding-top: 76px !important; }
@media (max-width: 640px) { .x-mt .pw.x-gc__vis:not(#_) { padding-top: 64px !important; } }
.pw .ring-arc:not(#_) { filter: none; }
/* air between the app window and the module title under it */
.x-mt .pw.x-gc__vis:not(#_) { margin-bottom: 28px; }
@media (max-width: 640px) { .x-mt .pw.x-gc__vis:not(#_) { margin-bottom: 20px; } }

/* 17.10: a taller header; on desktop the menu button goes once the nav links are in the header */
.hdr:not(#_) { height: 84px; }
@media (max-width: 900px) { .hdr:not(#_) { height: 66px; } }
@media (min-width: 1181px) { .hdr .menu-btn:not(#_) { display: none; } }

/* =====================================================================
   17.10: the heroes of the inner pages look like the homepage hero: always the dark navy stage with the grid,
   rounded step cards with lime icons, the product window sewn into the background (no mac frame);
   on phones a full size phone that goes into the shadow behind the buttons
   ===================================================================== */
:is(.hx, #hsAnim).on-navy:not(#_) { background: radial-gradient(1100px 700px at 78% 50%, rgb(47 111 237 / .3), transparent 62%), radial-gradient(700px 420px at 95% 95%, rgb(200 240 49 / .08), transparent 60%), #060d2b; color: #fff; }
:is(.hx, #hsAnim).on-navy::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 40% 50%, #000 10%, transparent 70%); }
.hx .hx__in { z-index: 1; }
/* steps: rounded cards, icon squares */
.hx .hx__step:not(#_) { border-radius: 14px !important; }
.hx .hx__step.is-on:not(#_) { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .1); }
.hx .hx__ic:not(#_) { border-radius: 12px !important; background: rgb(200 240 49 / .08); border-color: rgb(200 240 49 / .22); color: #ccff00; }
.hx .hx__step.is-on .hx__ic:not(#_) { background: #ccff00; border-color: #ccff00; color: #060d2b; box-shadow: none; }
.hx .hx__txt span { color: rgb(255 255 255 / .72); }
.hx .hx__step:not(.is-on) .hx__txt b { color: #fff; }
/* the product window sewn into the background, as on the homepage */
@media (min-width: 601px) {
  .hx .hx__win::before, .hx .hx__win::after { content: none !important; }
  .hx .hx__win .mac__bar:not(#_) { display: none; }
  .hx .hx__win .hx__mac:not(#_) { border-radius: 0 !important; box-shadow: none; background: none; }
  .hx .hx__win:not(#_) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 92%, transparent 100%); mask-composite: intersect; }
  .hx .hx__frame:not(#_) { border-radius: 0 !important; }
}
/* phones: a full size phone fading into the shadow behind the buttons */
@media (max-width: 600px) {
  .hx .hx__vis:not(#_) { position: relative; z-index: 1; margin-bottom: -72px; }
  .hx .hx__win:not(#_) { width: auto; margin-inline: 2px; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%); }
  .hx .hx__win .mac:not(#_) { padding: 9px 9px 0; border-radius: 48px 48px 0 0 !important; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14); }
  .hx .hx__frame:not(#_) { border-radius: 39px 39px 0 0 !important; }
  .hx .hx__btns:not(#_) { position: relative; z-index: 3; }
}

/* 17.10: every product mockup looks like the app in the homepage hero: always the dark navy app, 3D module icons */
[data-theme="light"] .pw:not(#_) {
  --p-bg: #0c1736; --p-ink: #e3e9f6; --p-soft: #b4c0dc; --p-line: #1f2e55; --p-nav: #0a1a40; --p-rail: #0a1533;
  --fg: 227 233 246; --text: #e3e9f6; --text-2: #b4c0dc; --subtle: #8796b7; --muted: #7181a2;
  --line: #1d2a4a; --line-2: #22335c; --line-3: #2a3a63; --raised: #0c1736; --elevated: #111f42;
  --accent: #2a5cc8; --text-accent: #9db4ff; --on-accent: #fff;
  --x-surf-bg: #111f42; --x-surf-solid: #13224a; --x-surf-line: #1f2e55; --x-glow-strong: rgb(42 92 200 / .45);
  --x-ok: #4fd07a; --x-warn: #f0a133; --x-danger: #ff6b6f; --x-info: #7d9bff;
  box-shadow: 0 40px 80px -40px rgb(11 31 79 / .45);
}
[data-theme="light"] .chat:not(#_) { --p-bg: #0c1736; --p-ink: #e3e9f6; --p-soft: #b4c0dc; --p-line: #1f2e55; --p-nav: #0a1a40; --p-ai: #0f2747; --p-ai-line: #3aa7c4; --p-chip: #111f42; --p-rail: #0a1533; }
[data-theme="light"] .p-ask.pw .p-ask__a:not(#_) { background: #0f2747; border-left-color: #3aa7c4; }
[data-theme="light"] .prail .tile.cur:not(#_) { box-shadow: 0 0 0 2px var(--p-rail), 0 0 0 4px #b8e41c; }
.prail .tile.i3d:not(#_) { background: none; box-shadow: none; overflow: visible; }
.prail .tile.i3d img { width: 118%; height: 118%; margin: -9%; display: block; object-fit: contain; }
.prail .tile.i3d.cur:not(#_) { box-shadow: 0 0 0 2px var(--p-rail), 0 0 0 4px #b8e41c; border-radius: 8px !important; }
[data-theme="light"] .chat .chat__mac:not(#_) { background: #0c1631; border-bottom-color: rgb(150 180 255 / .14); }

/* =====================================================================
   17.10: every product mockup is the app from the homepage hero (js/hs-app.js, .aw in main-hero.css):
   the same top bar (grid, HubSuite logo, app name, Налаштування / Канали, AI, mail, chats, clock, company, avatar),
   the same rail of 3D app icons with a lime mark on the current app, the same palette and fonts (Inter, Onest, Montserrat).
   ===================================================================== */
.pw:not(#_), .chat:not(#_) {
  --p-bg: #0a1538; --p-ink: #e8eeff; --p-soft: #b4c0dc; --p-line: rgb(255 255 255 / .08); --p-nav: #0b1a47; --p-rail: #08122f;
  --p-ai: #13245a; --p-ai-line: #c8f031; --p-chip: #0f1d4a;
  --fg: 232 238 255; --text: #e8eeff; --text-2: #b4c0dc; --subtle: #8796b7; --muted: #7181a2;
  --line: rgb(255 255 255 / .08); --line-2: rgb(255 255 255 / .1); --line-3: rgb(255 255 255 / .16);
  --raised: #0f1d4a; --elevated: #0f1d4a; --accent: #1d3a8a; --text-accent: #9fbcff; --on-accent: #fff;
  --x-surf-bg: #0f1d4a; --x-surf-solid: #13245a; --x-surf-line: rgb(255 255 255 / .08); --x-glow-strong: rgb(200 240 49 / .3);
  --x-ok: #22c55e; --x-warn: #f5a524; --x-danger: #f05252; --x-info: #4f86ff;
  background: linear-gradient(180deg, #0a1538, #08112e); color: #e8eeff; font-family: Inter, sans-serif;
  border: 1px solid rgb(255 255 255 / .1); border-radius: 14px !important;
}
.pw *:not(#_), .chat *:not(.pcursor):not(#_) { font-family: inherit; }
.chat .chat__mac:not(#_) { display: none; }

/* top bar */
.pnav.awt:not(#_) { container-type: inline-size; display: flex; align-items: center; justify-content: flex-start; gap: 14px; height: 48px; padding: 0 14px 0 14px;
  background: #0b1a47; border-bottom: 1px solid rgb(255 255 255 / .08); color: #fff; font: 700 12px Inter, sans-serif; }
.awt__grid { flex: none; width: 18px; height: 18px; }
.awt__logo { flex: none; display: flex; align-items: center; gap: 7px; }
.awt__ic { width: 26px; height: 26px; display: block; }
.awt__w { height: 15px; width: auto; display: block; }
.awt__mod { flex: none; margin-left: 4px; font: 600 13.5px Inter, sans-serif; color: #fff; white-space: nowrap; }
.awt__nav { display: flex; gap: 16px; font: 500 12px Inter, sans-serif; color: #b4c0dc; white-space: nowrap; }
.awt__r { margin-left: auto; flex: none; display: flex; align-items: center; gap: 14px; font: 700 12px Inter, sans-serif; }
.awt__bi { position: relative; display: block; }
.awt__bi svg { display: block; width: 17px; height: 17px; }
.awt__bi i:not(#_) { position: absolute; top: -7px; left: 10px; padding: 2px 4px; border-radius: 99px !important; background: #16a34a; color: #fff;
  font: 700 9px/1 Inter, sans-serif; font-style: normal; box-shadow: 0 0 0 2px #0b1a47; }
.awt__co { font: 600 11px Inter, sans-serif; color: #cdd7f5; white-space: nowrap; }
.awt__ava:not(#_) { width: 26px; height: 26px; border-radius: 50% !important; background: linear-gradient(135deg, #cbd5e1, #64748b); display: grid; place-items: center; overflow: hidden; }
.awt__ava svg { width: 20px; height: 20px; margin-top: 5px; }
@container (max-width: 820px) { .awt__nav { display: none; } }
@container (max-width: 640px) { .awt__co { display: none; } }
@container (max-width: 520px) { .awt__ai, .awt__bi:first-of-type { display: none; } .pnav.awt:not(#_) { gap: 10px; } }
@container (max-width: 400px) { .awt__w { display: none; } }

/* rail of app icons */
.pw .prail:not(#_), .chat .prail:not(#_) { flex: none; width: 56px; gap: 9px; padding: 12px 0; background: rgb(8 16 44 / .6); border-right: 1px solid rgb(255 255 255 / .08); overflow: hidden; }
.prail .tile.i3d:not(#_) { position: relative; flex: none; width: 32px; height: 32px; border-radius: 9px !important; box-shadow: none; overflow: visible; transition: transform .35s var(--ease); }
.prail .tile.i3d img:not(#_) { width: 100%; height: 100%; margin: 0; border-radius: 9px !important; }
.prail .tile.i3d.cur:not(#_) { transform: scale(1.08); box-shadow: none; }
.prail .tile.i3d.cur::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px !important; background: #c8f031; }
/* windows with absolutely placed content: the rail runs down the left side */
.pw--abs > .pw__rail:not(#_) { position: absolute; left: 0; top: 48px; bottom: 0; z-index: 2; }
.pw--abs:has(> .pw__rail):not(#_) { padding-left: 76px !important; }
.pw--abs:not(#_) { padding-top: 48px; }
.x-mt .pw.x-gc__vis:not(#_) { padding-top: 80px !important; }
.x-tenders .tcard.pw:not(#_) { padding-top: 68px !important; }
.p-ask.pw:not(#_) { padding-top: 68px !important; }
@media (max-width: 640px) {
  .pw--abs > .pw__rail:not(#_) { display: none; }
  .pw--abs:has(> .pw__rail):not(#_) { padding-left: 20px !important; }
  .x-mt .pw.x-gc__vis:not(#_) { padding-top: 68px !important; }
}

/* the screen title like the app screens ("Панель дашбордів", "Аналітика продажів") */
.pw__crumb.x-win__bar:not(#_) { height: auto; padding: 18px 22px 6px; border-bottom: 0; font: 700 20px Onest, Inter, sans-serif; color: #fff; }
.pw__crumb .x-win__path:not(#_) { font: 500 12.5px Inter, sans-serif; color: #b4c0dc; }

/* parts inside: the app panels, lime for the current state */
.pw :is(.x-row, .x-deal, .trow, .x-doc, .x-offer, .p-ask__q):not(#_) { background: #0f1d4a; border-color: rgb(255 255 255 / .08); }
.pw .x-tg.is-on:not(#_), .pw .x-stage.is-added .x-row--new .x-tg:not(#_) { background: #c8f031; }
.pw .x-tg.is-on::after { background: #0a1538 !important; }
.pw .x-pill:not(#_) { color: #c8f031; border-color: #c8f031; background: rgb(200 240 49 / .08); }
.pw .x-pipe__col > p:not(#_) { border-bottom-color: #c8f031; }
.pw .x-deal:not(#_) { border-left-color: #22a6e0; }
.pw .x-deal span:not(#_) { color: #e8eeff; font-weight: 700; }
.pw .x-deal--move:not(#_) { border-color: #c8f031; box-shadow: 0 0 0 1px #c8f031, 0 14px 30px -14px #c8f031; }
/* 17.10: switches inside the app look like app switches: round track and knob, lime when on */
.pw .x-tg:not(#_) { border-radius: 999px !important; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.pw .x-tg:not(#_)::after { border-radius: 50% !important; background: #e8eeff; }
.pw :is(.x-tg.is-on, .x-stage.is-added .x-row--new .x-tg):not(#_) { background: #c8f031; box-shadow: 0 0 12px -2px rgb(200 240 49 / .6); }
.pw :is(.x-tg.is-on, .x-stage.is-added .x-row--new .x-tg):not(#_)::after { background: #0a1538; transform: translateX(16px); }

/* =====================================================================
   18.10.2026: the product windows (AI chat, tender card, AI answers, function mockups) follow the site theme:
   a light app in the light theme, the dark one stays as it was
   ===================================================================== */
[data-theme="light"] :is(.pw, .chat):not(#_):not(#_) {
  --p-bg: #fff; --p-ink: #13213f; --p-soft: #405172; --p-line: #e3e7ee; --p-nav: #fff; --p-rail: #eef2f9;
  --p-ai: #e8f4f7; --p-ai-line: #2a5cc8; --p-chip: #f0f3f9;
  --fg: 19 33 63; --text: #13213f; --text-2: #405172; --subtle: #5f6f8f; --muted: #687895;
  --line: #e3e7ee; --line-2: #e3e7ee; --line-3: #d5dbe5; --raised: #fff; --elevated: #f6f8fc;
  --accent: #2a5cc8; --text-accent: #2a5cc8; --on-accent: #fff;
  --x-surf-bg: #fff; --x-surf-solid: #fff; --x-surf-line: #e3e7ee; --x-glow-strong: rgb(42 92 200 / .25);
  --x-ok: #1f7a34; --x-warn: #b8650a; --x-danger: #e5484d; --x-info: #2a5cc8;
  background: #f6f8fc; color: #13213f; border-color: #e3e7ee;
}
[data-theme="light"] .pnav.awt:not(#_) { background: #fff; border-bottom-color: #e3e7ee; color: #13213f; }
[data-theme="light"] .awt__mod { color: #13213f; }
[data-theme="light"] :is(.awt__nav, .awt__co) { color: #405172; }
[data-theme="light"] .awt__bi i:not(#_) { box-shadow: 0 0 0 2px #fff; }
[data-theme="light"] .pnav.awt svg[fill="#fff"], [data-theme="light"] .pnav.awt svg [fill="#fff"] { fill: #13213f; }
[data-theme="light"] .pnav.awt svg[stroke="#fff"], [data-theme="light"] .pnav.awt svg [stroke="#fff"] { stroke: #13213f; }
[data-theme="light"] .awt__w { filter: brightness(0) invert(13%) sepia(60%) saturate(2400%) hue-rotate(215deg); }
[data-theme="light"] :is(.pw, .chat) .prail:not(#_) { background: #eef2f9; border-right-color: #e3e7ee; }
[data-theme="light"] .prail .tile.i3d.cur::before { background: #2a5cc8; }
[data-theme="light"] .pw__crumb.x-win__bar:not(#_) { color: #13213f; }
[data-theme="light"] .pw__crumb .x-win__path:not(#_) { color: #405172; }
[data-theme="light"] .pw :is(.x-row, .x-deal, .trow, .x-doc, .x-offer, .p-ask__q):not(#_) { background: #fff; border-color: #e3e7ee; }
[data-theme="light"] .pw .x-pill:not(#_) { color: #2a5cc8; border-color: #2a5cc8; background: rgb(42 92 200 / .07); }
[data-theme="light"] .pw .x-pipe__col > p:not(#_) { border-bottom-color: #2a5cc8; }
[data-theme="light"] .pw .x-deal span:not(#_) { color: #13213f; }
[data-theme="light"] .pw .x-deal--move:not(#_) { border-color: #2a5cc8; box-shadow: 0 0 0 1px #2a5cc8, 0 14px 30px -18px #2a5cc8; }
[data-theme="light"] .pw .x-tg:not(#_) { background: rgb(11 31 79 / .12); box-shadow: inset 0 0 0 1px rgb(11 31 79 / .08); }
[data-theme="light"] .pw .x-tg:not(#_)::after { background: #fff; }
[data-theme="light"] .pw :is(.x-tg.is-on, .x-stage.is-added .x-row--new .x-tg):not(#_) { background: #2a5cc8; box-shadow: none; }
[data-theme="light"] .pw :is(.x-tg.is-on, .x-stage.is-added .x-row--new .x-tg):not(#_)::after { background: #fff !important; }
[data-theme="light"] .p-ask.pw .p-ask__a:not(#_):not(#_) { background: #e8f4f7; border-left-color: #3aa7c4; color: #13213f; }

/* Header uses the interactive SVG lockup as its only logo. */
.hdr__brand:not(#_) { position: relative; }
.hdr__brand .hs-logo--hdr { position: relative; height: 44px; font-size: 44px; gap: 0; }
.hdr__brand .hs-logo--hdr .brand-logo { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.hdr__brand .hs-logo--hdr, .hdr__brand > .hsi-hdr { transform: translate3d(var(--hs-logo-x, 0px), var(--hs-logo-y, 0px), 0); }
.hdr__brand .hs-logo--hdr { transition: opacity .2s ease, transform .16s ease; }
.hdr__brand > .hsi-hdr { transition: transform .16s ease; }

html.hsi-lock .hdr__brand .hs-logo, .hdr__brand.has-hsi-hdr:not(.is-logo-settling) .hs-logo { opacity: 0 !important; }
.hdr__brand.has-hsi-hdr.is-logo-settling .hs-logo--hdr { opacity: 1; }
@media (max-width: 900px) { .hdr__brand .hs-logo--hdr:not(#_) { height: 34px; font-size: 34px; } }

/* ===== 21.10.2026 (on top of the 19.10 ChatGPT header): the header logo is the live SVG mark with the name, like the
   footer one (its orbits turn on hover, the nodes drift all the time, js/main.js), and bigger; the footer logo is the
   same size. A smaller footer: no big slogan and no "up" button (the logo goes up), the contacts are the last column of
   the one row, the socials and messengers are one row of round icons instead of seven labelled buttons in two places */
.hdr__brand .hs-logo--hdr:not(#_):not(#_) { height: 54px; font-size: 54px; gap: .152em; }
.hdr__brand .hs-word.logo--dark { filter: brightness(0) invert(1); }
.foot .hs-logo--foot:not(#_) { font-size: 54px; }
@media (max-width: 900px) {
  .hdr__brand .hs-logo--hdr:not(#_):not(#_) { height: 40px; font-size: 40px; }
  .foot .hs-logo--foot:not(#_):not(#_) { font-size: 40px; }
}
.foot__cols:not(#_):not(#_) { grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); padding: 56px var(--pad) 48px; border-bottom: 1px solid var(--line); }
:is(.foot__brand, .foot__col):not(#_):not(#_) { padding: 0; border: 0; gap: 12px; }
.foot__brand:not(#_):not(#_) { gap: 18px; grid-column: auto; }
.foot__brand p:not(#_) { max-width: 300px; margin: 0; }
.foot__logo { display: inline-flex; align-self: flex-start; }
.foot__h:not(#_):not(#_) { margin-bottom: 2px; }
.foot__col--contact .foot__contact-phone:not(#_) { font-size: 17px; }
.foot__col--contact .foot__contact-mails:not(#_) { flex-direction: column; gap: 12px; }
.foot__col--contact .foot__contact-hours:not(#_) { margin: 0; font-size: 14px; color: var(--text-2); }
.foot__soc--ic:not(#_):not(#_) { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.foot__soc--ic a:not(#_):not(#_) { width: 36px; height: 36px; padding: 0; justify-content: center; }
.foot__soc--ic a:not(#_):not(#_), .foot__soc--ic a:not(#_):not(#_)::before { border-radius: 10px !important; }
.foot__soc--ic a svg:not(#_) { width: 16px; height: 16px; }
.foot__legal:not(#_):not(#_) { padding: 22px var(--pad); }
@media (max-width: 1100px) {
  .foot__cols:not(#_):not(#_) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__brand:not(#_):not(#_) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .foot__cols:not(#_):not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 40px var(--pad) 32px; }
  .foot__col:last-child:not(#_):not(#_) { grid-column: auto; border-top: 0; }
  .foot__col:not(#_):not(#_), .foot__col:nth-child(2):not(#_):not(#_) { padding: 0; }
}

/* ===== 22.10.2026: the footer, round two: two link columns instead of three (the five industries all led to the same
   page, now one "Галузі" link; no sitemap link), messengers and social networks in two labelled groups, an "up" button
   at the end of the bottom row. The navigation links (header and footer) light up in lime under the cursor ===== */
.foot__cols:not(#_):not(#_) { grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .foot__cols:not(#_):not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .foot__cols:not(#_):not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__col--contact:not(#_):not(#_) { grid-column: 1 / -1; }
}
.foot__socs { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.foot__socl { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.foot__legal .totop:not(#_) { gap: 10px; font-size: 13px; }
.foot__legal .totop .sq:not(#_) { width: 38px; height: 38px; }
.foot__legal .totop .sq:not(#_), .foot__legal .totop .sq:not(#_)::before { border-radius: 10px !important; }
@media (min-width: 641px) { .foot__legal .foot__links:not(#_) { margin-left: auto; } }

/* lime light on the navigation links */
.hdr__nav a:not(#_):not(#_), .foot__col:not(#_) > a:not(#_):not(#_), .foot__links a:not(#_):not(#_) {
  border: 1px solid transparent; border-radius: 10px !important;
  transition: color .2s, border-color .25s, background-color .25s, box-shadow .25s, text-shadow .25s;
}
.foot__col:not(#_) > a:not(#_):not(#_) { min-height: 34px; }
.foot__links a:not(#_):not(#_) { margin: -6px -10px; padding: 6px 10px; }
:is(.hdr__nav a, .foot__col > a, .foot__links a):is(:hover, :focus-visible):not(#_):not(#_) {
  color: #ccff00; border-color: rgb(204 255 0 / .35); background: rgb(204 255 0 / .08);
  box-shadow: 0 0 18px -6px rgb(204 255 0 / .55); text-shadow: 0 0 12px rgb(204 255 0 / .45);
}
/* the light theme: lime text is unreadable on white, so the link gets a lime glow behind navy text (the footer stays navy) */
[data-theme="light"] .hdr__nav a:is(:hover, :focus-visible):not(#_):not(#_) {
  color: #0b1f4f; border-color: rgb(140 180 0 / .5); background: rgb(204 255 0 / .28);
  box-shadow: 0 0 18px -6px rgb(160 210 0 / .7); text-shadow: none;
}

/* ===== 22.10.2026 (3): the footer: the "up" button under the messengers and socials; more air between the group labels
   and their buttons; the column titles (Продукт, Компанія, Зв'язок) and the group labels are small quiet captions,
   clearly not links ===== */
.foot__brand .totop:not(#_) { align-self: flex-start; margin-top: 6px; gap: 10px; font-size: 13px; }
.foot__brand .totop .sq:not(#_) { width: 36px; height: 36px; }
.foot__brand .totop .sq:not(#_), .foot__brand .totop .sq:not(#_)::before { border-radius: 10px !important; }
.foot__socs:not(#_) { gap: 20px 36px; }
:is(.foot__h, .foot__socl):not(#_):not(#_):not(#_) {
  margin: 0 0 14px; font: 600 11px/1.2 var(--x-font, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle, #8796b7);
}
.foot__col:not(#_):not(#_) > .foot__h { margin-bottom: 10px; }
/* the 3D intro logo fades out over the SVG one: a slower fade-in of the SVG logo under it, no visible swap */
.hdr__brand .hs-logo--hdr:not(#_):not(#_) { transition: opacity .5s ease .1s, transform .16s ease; }
/* the footer on phones: even steps between the links (one tap height each), the contacts in the same rhythm,
   the legal links in a column with room between them, the cookie button in line with them */
@media (max-width: 640px) {
  .foot__col:not(#_):not(#_) { gap: 2px; }
  .foot__col:not(#_) > a:not(#_):not(#_), .foot__col--contact .foot__contact-mails a:not(#_) { min-height: 38px; padding: 0 10px; margin-left: -10px; display: inline-flex; align-items: center; }
  .foot__col--contact .foot__contact-mails:not(#_):not(#_) { gap: 2px; }
  .foot__col--contact .foot__contact-hours:not(#_) { margin-top: 6px; }
  .foot__legal:not(#_):not(#_) { gap: 14px; padding: 24px var(--pad) 32px; }
  .foot__links:not(#_):not(#_) { flex-direction: column; align-items: flex-start; gap: 2px; }
  .foot__links :is(a, button):not(#_):not(#_) { min-height: 36px; margin: 0 0 0 -10px; padding: 0 10px; display: inline-flex; align-items: center; }
}