/* HubSuite homepage, sections 02-13 (18.10.2026).
   Order and content follow the client PDF "HubSuite-struktura-sajtu"; every section is centred like hubsuite.net.
   The site look stays: navy + lime, glass cards with soft corners, light under the cursor, small dots and lines.
   Prefix b-. Product demos inside (AI chat, tender card, security drawings) keep their own styles. */

/* text is Inter (the client found Geist hard to read, 18.10.2026); titles, card titles and big numbers stay Geist */
:root { --font-h: "Geist", "Inter", sans-serif; }
.b-flow { position: relative; }
.b-sec {
  --b-glass: linear-gradient(180deg, rgb(var(--fg) / .045), rgb(var(--fg) / .012) 60%);
  --b-edge: rgb(var(--fg) / .08);
  --b-spot: rgb(204 255 0 / .12);
  --b-lime-bg: linear-gradient(152deg, rgb(204 255 0 / .13), rgb(204 255 0 / .02) 72%);
  --b-lime-edge: rgb(204 255 0 / .32);
  position: relative;
  isolation: isolate;
  padding-top: 210px;
  font-family: var(--x-font);
}
[data-theme="light"] .b-sec {
  --b-glass: linear-gradient(180deg, #fff, #f7f9fe);
  --b-edge: rgb(11 31 79 / .09);
  --b-spot: rgb(42 91 255 / .07);
  --b-lime-bg: linear-gradient(152deg, rgb(204 255 0 / .42), rgb(204 255 0 / .08) 72%);
  --b-lime-edge: rgb(150 190 0 / .55);
}
.b-sec:last-child { padding-bottom: 210px; }
/* a soft light behind every heading */
.b-sec::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 40px;
  width: min(980px, 100%);
  height: 420px;
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--b-spot), transparent);
}
.b-in { position: relative; width: min(100% - 2 * var(--pad), 1200px); margin-inline: auto; }

/* ---------- heading: title and one line under it ---------- */
.b-head { display: flex; flex-direction: column; align-items: center; max-width: 840px; margin: 0 auto 64px; text-align: center; }
.b-h2 { font: 700 clamp(30px, 3.4vw, 48px)/1.12 var(--font-h); letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
.b-sub { max-width: 660px; margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }

/* ---------- cards ---------- */
.b-grid { display: grid; gap: 16px; }
.b-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* the card look picked by the client (18.10.2026): soft corners, a round icon, and on hover a gradient border runs
   around the card while the icon fills with the accent. The border is a background layer under a transparent border,
   so its two colours (--bd1 at the corners, --bd2 along the sides) can fade on hover */
@property --bd1 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --bd2 { syntax: "<color>"; inherits: false; initial-value: transparent; }
.b-card {
  --bd1: var(--b-edge);
  --bd2: var(--b-edge);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    var(--b-glass) padding-box,
    /* a solid base: the gradient border must not show through the card, and the DNA stays behind it */
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--bd1), var(--bd2) 45%, var(--bd2) 60%, var(--bd1)) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
  transition: box-shadow .35s, --bd1 .45s var(--ease), --bd2 .45s var(--ease);
}
.b-card:not(#_), .b-card:not(#_)::before, .b-card:not(#_)::after { border-radius: 22px !important; }
.b-card:not(#_):not(#_) { border-color: transparent; }
/* a press on click */
.b-card { transition: box-shadow .35s, scale .2s var(--ease), --bd1 .45s var(--ease), --bd2 .45s var(--ease); }
@media (hover: hover) { .b-card:active { scale: .985; } }
@media (hover: hover) { .b-card:hover, .b-card.is-tilting { --bd1: var(--b-mid); --bd2: rgb(var(--b-glow) / .1); } }
@media (hover: hover) { [data-theme="light"] .b-card:hover, [data-theme="light"] .b-card.is-tilting { --bd2: rgb(var(--b-glow) / .12); } }
[data-theme="light"] .b-card { box-shadow: 0 1px 2px rgb(11 31 79 / .04), 0 22px 44px -30px rgb(11 31 79 / .3); }
/* one light source per card */
.b-card::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, var(--b-spot), transparent 70%); }
.b-card--lime { --b-glass: var(--b-lime-bg); --bd1: var(--b-lime-edge); --bd2: var(--b-lime-edge); }
.b-card :where(h3) { font: 500 20px/1.25 var(--font-h); letter-spacing: -.01em; color: var(--text); }
.b-card :where(p) { font-size: 15px; line-height: 1.55; color: var(--text-2); }
/* the icon beside the title */
.b-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 2px; }
.b-card__head .b-ic { width: 44px; height: 44px; }
.b-card__head .b-ic svg { width: 22px; height: 22px; }
.b-card__head > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* everything centred under a bigger icon */
.b-card--center { align-items: center; text-align: center; }
.b-card--center .b-ic { width: 56px; height: 56px; margin-bottom: 6px; }
.b-card--center .b-ic svg { width: 27px; height: 27px; }
.b-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid rgb(var(--b-glow) / .35); background: rgb(var(--b-glow) / .08); font: 600 11px/1.2 var(--x-font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-accent); }
.b-tag--red { border-color: rgb(240 82 82 / .45); background: rgb(240 82 82 / .1); color: #ff8f8f; }
[data-theme="light"] .b-tag--red { color: #c9302c; }

/* icon tiles: the same tile as the security drawings */
.b-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid rgb(var(--b-glow) / .35); background: linear-gradient(145deg, var(--tile-a), var(--tile-b)); color: var(--tile-ic); box-shadow: 0 0 18px -6px var(--glow); }
.b-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-ic img { width: 28px; height: 28px; }
/* the icon set (18.10.2026, the client did not like the hand drawn line icons): Phosphor, duotone weight.
   The icons are filled shapes, the light part is the same colour at 20% */
svg.ph:not(#_) { fill: currentColor; stroke: none; }
.b-ic--warn { border-color: rgb(var(--fg) / .16); color: var(--text-2); box-shadow: none; }
.b-ic--lime { border-color: var(--b-lime-edge); }
.b-ic--sm { width: 30px; height: 30px; }
.b-ic--sm svg { width: 16px; height: 16px; }
@media (hover: hover) { .b-card:hover .b-ic--warn { color: var(--text); } }

/* round icons; on hover of the card its main icon fills with the accent */
.b-sec .b-ic:not(#_) { border-radius: 50% !important; transition: background .35s, color .35s, border-color .35s, box-shadow .35s; }
@media (hover: hover) { :is(.b-card:hover, .b-card.is-tilting) > .b-ic:not(#_), :is(.b-card:hover, .b-card.is-tilting) > .b-card__head > .b-ic:not(#_) { background: var(--b-mid); color: var(--b-ink); border-color: var(--b-mid); box-shadow: 0 10px 22px -12px rgb(var(--b-glow) / .8); } }
@media (hover: hover) { :is(.b-card:hover, .b-card.is-tilting) > .b-card__head > .b-ic img { filter: brightness(0) saturate(100%); } }
@media (hover: hover) { [data-theme="light"] :is(.b-card:hover, .b-card.is-tilting) > .b-card__head > .b-ic img { filter: brightness(0) invert(1); } }

.b-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font: 600 15px var(--font-btn, var(--x-font)); color: var(--text-accent); }
.b-more .i { width: 20px; height: 20px; transition: transform .35s var(--ease); }
@media (hover: hover) { a.b-card:hover .b-more .i { transform: translateX(5px); } }

.b-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 48px; text-align: center; }
.b-about .b-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
.b-about .b-actions .x-btn { flex: 0 1 auto; }
@media (max-width: 640px) {
  .b-about .b-actions { flex-wrap: nowrap; gap: 8px; }
  .b-about .b-actions .x-btn { flex: 1 1 0; min-width: 0; min-height: 52px; }
  .b-about .b-actions .x-btn > span:first-child { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 8px 4px 8px 8px; font-size: 12px; }
  .b-about .b-actions .x-btn__ic { width: 30px; height: 30px; margin-right: 4px; }
}
.b-actions__note { max-width: 560px; font-size: 14.5px; color: var(--text-2); }
.b-actions__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* checks: lime circle with a tick */
.b-checks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.b-checks li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.b-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border: 1px solid rgb(var(--b-glow) / .5); background: rgb(var(--b-glow) / .14); }
.b-checks li::after { content: ""; position: absolute; left: 7.5px; top: 5px; width: 5px; height: 9px; border: solid var(--text-accent); border-width: 0 2px 2px 0; rotate: 45deg; }
.b-checks b { font-weight: 600; }
.b-checks--lg li { font-size: 16px; }

/* ---------- 02 problem ---------- */
.b-pain p { margin-bottom: 4px; }
.b-pain--cta h3 { margin-top: 8px; font-size: 22px; }

/* ---------- 03 solution, laid out like the orbit block of hubsuite-preview.html: the orbit on the left,
   on the right the title, the lead, three counters and the button ---------- */
.b-orbitlay { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.b-orbit-holder { display: flex; justify-content: center; }
.b-orbit-holder .b-orbit { width: min(620px, 100%); margin: 0; }
.b-orbit-copy .b-h2 { margin: 0 0 18px; }
.b-orbit-copy .b-sub { max-width: 48ch; margin: 0 0 28px; }
.b-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.5vw, 48px); margin: 0 0 32px; }
.b-stat__v { font: 700 clamp(30px, 3.2vw, 42px)/1 var(--font-h); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.b-stat__l { margin-top: 8px; font-size: 13.5px; color: var(--text-2); }
.b-orbit-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* the four answers to the pains of block 02, each with the pain it closes crossed out */
.b-fixes { margin-top: 72px; }
.b-fix__was { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.b-fix__was s { font: 500 12px/1.2 var(--x-font); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); text-decoration-color: rgb(240 82 82 / .7); text-decoration-thickness: 1.5px; }

.b-orbit { position: relative; width: 100%; aspect-ratio: 1; }
.b-orbit__ring { position: absolute; inset: 0; animation: bOrbit 90s linear infinite; }
.b-orbit:hover .b-orbit__ring, .b-orbit:hover .b-node__in { animation-play-state: paused; }
.b-orbit__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b-orbit__lines .b-ring { fill: none; stroke: rgb(var(--fg) / .12); stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; }
.b-orbit__lines .b-ring--2 { stroke: rgb(var(--fg) / .07); stroke-dasharray: none; }
.b-orbit__lines line { stroke: rgb(var(--fg) / .16); stroke-width: 1.2; transition: stroke .3s; }
.b-orbit__lines line.is-hot { stroke: var(--text-accent); }
.b-node { position: absolute; width: 17%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; scale: .6; transition: opacity .6s var(--ease) var(--d, 0s), scale .6s var(--ease) var(--d, 0s); }
.b-orbit.is-in .b-node { opacity: 1; scale: 1; }
.b-node__in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; border: 1px solid rgb(var(--fg) / .14); background: radial-gradient(circle at 35% 25%, var(--tile-a), var(--tile-b)); color: var(--tile-ic); animation: bOrbit 90s linear infinite reverse; transition: border-color .3s, box-shadow .3s; }
@media (hover: hover) { .b-node:hover .b-node__in { border-color: rgb(var(--b-glow) / .6); box-shadow: 0 0 24px -4px rgb(var(--b-glow) / .5); } }
.b-node__in svg { width: 34%; height: 34%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-node__in b { font: 700 12px/1.1 var(--x-font); color: var(--text); white-space: nowrap; }
.b-orbit__pulses i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0; animation: bPulse 3.2s cubic-bezier(.5, 0, .7, 1) infinite; animation-delay: var(--delay, 0s); }
@keyframes bPulse {
  0% { transform: translate(var(--x), var(--y)); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0; }
}
.b-orbit__core { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border: 1px solid rgb(var(--b-glow) / .55); background: radial-gradient(circle at 40% 30%, var(--tile-a), var(--tile-b)); box-shadow: 0 0 60px -10px rgb(var(--b-glow) / .55), inset 0 0 30px rgb(var(--b-glow) / .12); }
.b-orbit__core::before, .b-orbit__core::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgb(var(--b-glow) / .5); animation: bWave 3.6s ease-out infinite; }
.b-orbit__core::after { animation-delay: 1.8s; }
.b-orbit__core img { width: 62%; height: auto; }
[data-theme="dark"] .b-orbit__core .logo--light, [data-theme="light"] .b-orbit__core .logo--dark { display: none; }
@keyframes bOrbit { to { rotate: 360deg; } }
@keyframes bWave { from { scale: 1; opacity: .9; } to { scale: 1.9; opacity: 0; } }

@media (min-width: 981px) {
  .b-orbitlay { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(28px, 4vw, 56px); }
  .b-node { width: 19%; }
  .b-node__in b { font-size: clamp(12.5px, 1vw, 14.5px); }
}

/* ---------- 04 modules ---------- */
.b-mod { gap: 10px; padding: 24px; }
.b-mod .b-ic { margin-bottom: 8px; }
.b-mod h3 { font-size: 18px; }
.b-mod p { font-size: 14px; }
.b-mod--bridge { grid-column: span 2; flex-direction: row; align-items: center; gap: 20px; }
.b-mod--bridge .b-ic { margin: 0; width: 60px; height: 60px; }
.b-mod--bridge .b-ic svg { width: 28px; height: 28px; }
.b-mod__txt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.b-mod--bridge h3 { font-size: 22px; }
.b-mod--bridge .b-more { margin: 0; padding: 0; white-space: nowrap; }

/* Quiet dotted grid and fine diagonal traces inside the module cards. */
.b-features .b-mod:not(.b-mod--bridge)::before {
  display: block;
  z-index: 0;
  inset: 0 0 auto auto;
  width: 76px;
  height: 76px;
  background:
    radial-gradient(circle, rgb(var(--fg) / .32) 1px, transparent 1.4px) 0 0 / 12px 12px,
    repeating-linear-gradient(135deg, transparent 0 8px, rgb(var(--fg) / .045) 8px 9px),
    radial-gradient(70% 60% at 100% 0%, var(--b-spot), transparent 70%);
  opacity: .65;
}
.b-features .b-mod:not(.b-mod--bridge) > * { position: relative; z-index: 1; }

/* ---------- 04b fit: HubSuite on a laptop, a tablet and a phone (the scene from sections.css .x-devs, 1em = 1% of the stage),
   standing right on the page without a box, three cards under it ---------- */
.b-devstage { container-type: inline-size; margin: -8px auto 56px; }
.b-fit .x-devs { --s-glow: rgb(150 180 255 / .1); }
[data-theme="light"] .b-fit .x-devs { --s-glow: rgb(11 31 79 / .07); }
.b-fit .b-grid--3 { max-width: 1000px; margin-inline: auto; }
/* no glare over the screens: it made them look soapy */
.b-fit .scr::after { display: none; }

/* ---------- 05 about ---------- */
.b-about__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.b-story { gap: 20px; padding: 36px; }
.b-story .b-story__lead { font-size: 20px; line-height: 1.5; color: var(--text); }
.b-todo { padding: 12px 14px; border: 1px dashed rgb(var(--b-glow) / .5); font-size: 14px; color: var(--text-accent); }
.b-approach { display: flex; flex-direction: column; gap: 18px; margin: 8px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--b-edge); }
.b-approach li { display: flex; gap: 16px; align-items: flex-start; }
.b-approach .b-ic { width: 40px; height: 40px; }
.b-approach .b-ic svg { width: 19px; height: 19px; }
.b-approach b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 500; color: var(--text); }
.b-approach p { font-size: 14.5px; }
.b-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.b-fact { justify-content: space-between; min-height: 190px; }
.b-fact__v { font: 700 clamp(40px, 4vw, 58px)/1 var(--font-h); letter-spacing: -.03em; color: var(--text); }
.b-fact__v.b-todo-v { color: var(--subtle); }
.b-fact--ua .b-fact__v { color: var(--text-accent); text-shadow: 0 0 28px rgb(var(--b-glow) / .45); }
.b-card .b-fact__l { font-size: 15px; }

/* ---------- 06 trust ---------- */
.b-trust .b-head { margin-bottom: 48px; }
.b-logos { overflow: hidden; margin-bottom: 48px; padding: 22px 0; border-block: 1px solid var(--b-edge); -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.b-logos__track { display: flex; width: max-content; animation: bMarquee 46s linear infinite; }
.b-logos__track span { position: relative; padding: 0 44px; font: 700 19px/1.2 var(--font-h); letter-spacing: -.01em; color: rgb(var(--fg) / .45); white-space: nowrap; transition: color .3s; }
.b-logos__track span::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: rgb(var(--b-glow) / .5); }
.b-logos__track span:hover { color: var(--text); }
.b-logos:hover .b-logos__track { animation-play-state: paused; }
@keyframes bMarquee { to { transform: translateX(-50%); } }
.b-review { gap: 18px; margin: 0; padding: 30px; }
.b-stars { display: flex; gap: 4px; }
.b-stars i { width: 16px; height: 16px; background: var(--text-accent); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.b-review blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.b-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--b-edge); }
.b-sec .b-av { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50% !important; background: linear-gradient(145deg, var(--tile-a), var(--tile-b)); border: 1px solid rgb(var(--b-glow) / .4); font: 600 13px var(--x-font); color: var(--text-accent); }
.b-review figcaption b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.b-review figcaption small { font-size: 13.5px; color: var(--text-2); }

/* ---------- 07 security: the drawings from the old block in cards ---------- */
.b-sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.b-security .ill { height: auto; margin: -4px -8px 8px; }
.b-security .ill svg:not(#_) { display: block; width: 100%; height: auto; overflow: visible; }
.b-security .ill--matrix svg { aspect-ratio: 548 / 212; }
.b-security .ill--clean svg { aspect-ratio: 432 / 168; }
.b-security .ill--cloud svg { aspect-ratio: 286 / 134; max-height: 212px; }
.b-shield { padding: 28px 32px 32px; }
.b-card--panic { flex-direction: row; align-items: center; gap: 28px; padding: 32px; --b-glass: linear-gradient(152deg, rgb(240 82 82 / .12), rgb(204 255 0 / .03) 70%); border-color: rgb(240 82 82 / .28); }
[data-theme="light"] .b-card--panic { --b-glass: linear-gradient(152deg, rgb(240 82 82 / .1), #fff 70%); }
.b-card--panic > div { display: flex; flex-direction: column; gap: 12px; }
.b-card--panic h3 { font: 700 clamp(26px, 2.3vw, 34px)/1.15 var(--font-h); letter-spacing: -.02em; }
.b-card--panic p { font-size: 16px; }
.b-card--panic .pn-mini:not(#_) { position: relative; right: auto; top: auto; width: 200px; height: 200px; flex: none; margin: -20px -10px -20px -16px; transform: none; }
.b-note { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; font-size: 14.5px; color: var(--text-2); text-align: left; }

/* ---------- 08 AI and tenders: the text is a card, the demo window stands beside it outside any card, sunk into the page ---------- */
.b-aibox, .b-tbox { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.b-tbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 96px; }
.b-aibox__txt, .b-tbox__txt { gap: 14px; padding: 44px 40px; }
.b-aibox__txt h3, .b-tbox__txt h3 { font: 700 clamp(22px, 2vw, 28px)/1.2 var(--font-h); letter-spacing: -.02em; }
.b-aibox__txt > p { font-size: 16px; }
.b-aibox .b-checks { margin-top: 8px; }
/* roles as pills under the list */
.b-aibox .roles:not(#_) { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; border: 0; overflow: visible; }
.b-aibox .roles::after { display: none; }
.b-aibox .role:not(#_) { width: auto; padding: 8px 14px; border: 1px solid rgb(var(--fg) / .14); border-radius: 10px !important; background: rgb(var(--fg) / .04); }
.b-aibox .role:not(#_)::after { display: none; }
.b-aibox .role:not(#_):hover { border-color: rgb(var(--b-glow) / .45); background: rgb(var(--fg) / .07); }
.b-aibox .role.is-on:not(#_) { border-color: transparent; background: var(--b-mid); }
.b-aibox .role .role__t:not(#_) { font: 500 13.5px/1.2 var(--x-font); color: var(--text-2); transform: none; }
.b-aibox .role.is-on .role__t:not(#_) { color: var(--b-ink); }
.b-aibox .chat-area:not(#_) { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; border: 0; background: none; }
.b-aibox .chat-win:not(#_) { position: relative; left: auto; top: auto; width: 100%; max-width: 640px; height: 540px; }

.b-tbox__demo:not(#_) { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; border: 0; background: none; }
.b-tbox .tcard:not(#_) { width: min(460px, 100%); padding: 24px 25px 26px !important; }
.b-plats { display: flex; flex-wrap: wrap; gap: 8px; }
.b-card .b-plats span { padding: 6px 12px; border: 1px solid rgb(var(--fg) / .14); background: rgb(var(--fg) / .04); font: 600 13px/1.2 var(--x-font); color: var(--text); }
.b-tbox .tsteps:not(#_) { margin-top: 6px; border-top: 1px solid var(--b-edge); }
.b-tbox .tsteps li:not(#_) { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 14px 0; font-size: 17px; cursor: pointer; }
.b-tbox .tsteps__b:not(#_) { grid-row: 1; grid-column: 1; margin: 0; }
.b-tbox .tsteps__t:not(#_) { grid-row: 1; grid-column: 2; }
.b-tbox .tsteps__hint:not(#_) { grid-row: 2; grid-column: 2; }
.b-tbox .tsteps__hint:not(#_) { font-size: 14px; }

/* ---------- 09 metrics ---------- */
.b-num { gap: 10px; min-height: 230px; padding: 32px 28px; }
.b-num__v { font: 700 clamp(44px, 4.4vw, 64px)/1 var(--font-h); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-num__v--acc { color: var(--text-accent); text-shadow: 0 0 30px rgb(var(--b-glow) / .45); }
.b-card .b-num__l { font-size: 15.5px; }

/* ---------- 10 how: a rail down the middle, cards left and right ---------- */
.b-road { position: relative; display: flex; flex-direction: column; gap: 28px; max-width: 1000px; margin: 0 auto; padding: 8px 0; }
/* on wide screens the DNA behind the page runs down the middle here as a cord (js/blocks.js) instead of the rail; phones keep the rail */
.b-phase { z-index: 1; }
@media (min-width: 901px) { .b-road__rail { display: none; } }
.b-road__rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgb(var(--fg) / .1); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); }
.b-road__rail span { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--accent); box-shadow: 0 0 12px rgb(var(--b-glow) / .8); }
.b-road__rail span::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50% !important; background: var(--accent); box-shadow: 0 0 0 5px rgb(var(--b-glow) / .2), 0 0 18px rgb(var(--b-glow) / .9); }
.b-phase { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 88px; }
.b-phase__dot { position: absolute; left: 50%; top: 34px; width: 14px; height: 14px; margin-left: -7px; border: 2px solid rgb(var(--fg) / .25); background: var(--bg); transition: border-color .4s, background .4s, box-shadow .4s; }
.b-sec .b-phase__dot { border-radius: 50% !important; }
.b-phase.is-passed .b-phase__dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px rgb(var(--b-glow) / .15), 0 0 16px rgb(var(--b-glow) / .7); }
.b-phase__card { grid-column: 1; opacity: 0; transform: translateX(-32px); transition: opacity .8s var(--ease), transform .8s var(--ease), box-shadow .45s var(--ease), --bd1 .45s var(--ease), --bd2 .45s var(--ease); }
.b-phase.is-passed .b-phase__card { --bd1: var(--accent); --bd2: rgb(var(--b-glow) / .3); box-shadow: 0 0 0 1px rgb(var(--b-glow) / .18), 0 0 30px -12px rgb(var(--b-glow) / .58), 0 22px 44px -30px rgb(0 0 0 / .6); }
.b-phase:nth-child(odd) .b-phase__card { grid-column: 2; transform: translateX(32px); }
.b-phase.is-in .b-phase__card { opacity: 1; transform: none; }
.b-phase__card::after { content: ""; position: absolute; top: 40px; width: 88px; height: 1px; }
.b-phase__n { font: 600 12px/1 var(--x-font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-accent); }
.b-phase--main .b-tag { margin-bottom: 2px; }
/* a short line from the card to the rail */
.b-phase::before { content: ""; position: absolute; top: 40px; height: 1px; width: 44px; left: calc(50% - 44px); background: linear-gradient(90deg, transparent, rgb(var(--fg) / .2)); }
.b-phase:nth-child(odd)::before { left: 50%; background: linear-gradient(90deg, rgb(var(--fg) / .2), transparent); }
.b-phase.is-passed::before { background: linear-gradient(90deg, transparent, rgb(var(--b-glow) / .7)); }
.b-phase.is-passed:nth-child(odd)::before { background: linear-gradient(90deg, rgb(var(--b-glow) / .7), transparent); }

/* ---------- 11 pricing ---------- */
/* the buttons here carry no arrow (client, 18.10.2026): the text sits in the middle with even sides */
.b-pricing .btn-box:not(#_) > span:first-child { flex: 1; justify-content: center; padding-inline: 24px; }
.b-trial { display: flex; align-items: center; gap: 22px; max-width: 820px; margin: 0 auto 40px; padding: 18px 18px 18px 26px; border: 1px solid var(--b-lime-edge); background: var(--b-lime-bg); }
.b-trial__n { font: 700 52px/1 var(--font-h); letter-spacing: -.03em; color: var(--text-accent); text-shadow: 0 0 24px rgb(var(--b-glow) / .5); }
.b-trial > div { flex: 1; min-width: 0; }
.b-trial b { display: block; font-size: 18px; font-weight: 600; color: var(--text); }
.b-trial p { font-size: 14.5px; color: var(--text-2); }
.b-trial--sm { margin: 0; padding: 16px 20px; }
.b-trial--sm .b-trial__n { font-size: 44px; }

.b-period { position: relative; display: flex; width: max-content; margin: 0 auto 40px; padding: 5px; border: 1px solid rgb(var(--fg) / .14); background: rgb(var(--fg) / .04); }
.b-sec .b-period { border-radius: 14px !important; }
.b-sec .b-period__knob { border-radius: 10px !important; }
.b-period button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; font: 600 15px var(--font-btn, var(--x-font)); color: var(--text-2); transition: color .3s; }
.b-period button[data-period="y"] { padding-right: 8px; }
.b-period button[aria-checked="true"] { color: var(--b-ink); }
.b-period em { padding: 3px 8px; border-radius: 999px !important; background: rgb(var(--b-glow) / .16); font: 600 11.5px/1.2 var(--x-font); font-style: normal; color: var(--text-accent); transition: background .3s, color .3s; }
.b-period button[aria-checked="true"] em { background: rgb(0 0 0 / .14); color: var(--b-ink); }
.b-period__knob { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: var(--kx, 5px); width: var(--kw, 120px); background: linear-gradient(180deg, color-mix(in srgb, var(--b-hi) 40%, var(--b-mid)), var(--b-mid) 55%, color-mix(in srgb, var(--b-lo) 30%, var(--b-mid))); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 8px 22px -10px rgb(var(--b-glow) / .8); transition: left .45s var(--ease), width .45s var(--ease); }

.b-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.b-plans[data-period="m"] [data-y], .b-plans[data-period="y"] [data-m] { display: none !important; }
.b-plan { gap: 0; padding: 30px 28px 28px; }
.b-plan__pack { align-self: flex-start; margin-bottom: 18px; padding: 6px 12px; border: 1px solid rgb(var(--b-glow) / .35); font: 600 11.5px/1.2 var(--x-font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-accent); }
.b-card .b-plan__pack { color: var(--text-accent); font-size: 11.5px; }
.b-card .b-plan__name { font: 700 clamp(30px, 2.6vw, 38px)/1.05 var(--font-h); letter-spacing: -.025em; }
.b-card .b-plan__for { margin: 8px 0 20px; font-size: 14.5px; }
.b-plan__price { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding: 20px; border: 1px solid var(--b-edge); background: rgb(var(--fg) / .035); }
.b-card .b-plan__mode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font: 600 12px/1.2 var(--x-font); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.b-plan__mode em { padding: 4px 9px; border-radius: 999px !important; background: var(--b-mid); font: 600 11px/1.2 var(--x-font); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--b-ink); }
.b-plan__mode--2 { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--b-edge); }
.b-card .b-plan__sum { display: flex; align-items: flex-end; gap: 10px; }
.b-plan__sum b { font: 700 clamp(46px, 4vw, 58px)/.95 var(--font-h); letter-spacing: -.035em; color: var(--text-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-plan__sum span { padding-bottom: 4px; font-size: 13.5px; line-height: 1.3; color: var(--text); }
.b-plan__sum--big b { font-size: clamp(44px, 3.9vw, 58px); }
.b-plan__sum--sm b { font-size: 40px; }
.b-card .b-plan__pack-sum { font-size: 13.5px; }
.b-plan__pack-sum b { font-weight: 600; color: var(--text); }
.b-plan__specs { margin: 0 0 20px; }
.b-plan__specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgb(var(--fg) / .12); font-size: 13.5px; }
.b-plan__specs dt { color: var(--text-2); }
.b-plan__specs dd { margin: 0; font-weight: 600; text-align: right; color: var(--text); }
.b-plan__specs .b-acc { color: var(--text-accent); }
.b-plan .b-checks { margin-bottom: 26px; }
.b-plan .b-checks li { font-size: 14px; }
.b-plan__btn:not(#_) { width: 100%; margin-top: auto; }
.btn-box.b-plan__btn > span:first-child { flex: 1; justify-content: center; }
.b-plan--pro { --b-glass: linear-gradient(180deg, rgb(204 255 0 / .07), rgb(var(--fg) / .015) 55%); border-color: var(--b-lime-edge); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 30px 60px -36px rgb(var(--b-glow) / .55); }
[data-theme="light"] .b-plan--pro { --b-glass: linear-gradient(180deg, rgb(204 255 0 / .25), #fff 50%); }
.b-plan__flag { margin: -30px -28px 22px; padding: 10px; background: var(--b-mid); font: 600 12px/1.2 var(--x-font); letter-spacing: .1em; text-align: center; text-transform: uppercase; color: var(--b-ink); }
.b-card .b-plan__flag { color: var(--b-ink); font-size: 12px; }
/* the recommended plan stands a little higher, its flag above the other cards */
@media (min-width: 1181px) { .b-plan--pro { margin-top: -26px; } }
.b-plan-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-2); }
.b-plan-notes li { display: flex; align-items: center; gap: 10px; }
.b-plan-notes b { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border: 1px solid rgb(var(--b-glow) / .4); font: 600 11px var(--x-font); color: var(--text-accent); }
[data-price] { display: inline-block; }
[data-price].is-flip { animation: bFlip .45s var(--ease); }
@keyframes bFlip { 0% { opacity: 1; transform: none; } 45% { opacity: 0; transform: translateY(-10px); } 55% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }

/* ---------- 12 apps ---------- */
.b-apps { overflow-x: clip; overflow-y: visible; }   /* 23.10: only the sides clip (the phone comes in from there), a leaning card is not cut at the top or bottom */
.b-apps .b-head { margin-bottom: 36px; }
.b-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.b-store { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px 0 20px; border: 1px solid rgb(var(--fg) / .16); background: linear-gradient(180deg, rgb(var(--fg) / .08), rgb(var(--fg) / .03)); color: var(--text); transition: border-color .3s, box-shadow .3s, transform .2s; }
.b-sec .b-store { border-radius: 10px !important; }
.b-store:hover { border-color: rgb(var(--b-glow) / .45); box-shadow: 0 0 26px -8px rgb(var(--b-glow) / .5); }
.b-store:active { transform: scale(.98); }
.b-store svg { width: 26px; height: 26px; fill: currentColor; }
.b-store span { display: flex; flex-direction: column; font: 600 17px/1.1 var(--font-btn, var(--x-font)); }
.b-store small { font: 500 11px/1.2 var(--x-font); color: var(--text-2); }
.b-store em { margin-left: 6px; padding: 4px 9px; border-radius: 999px !important; background: rgb(var(--b-glow) / .15); font: 600 11px/1.2 var(--x-font); font-style: normal; color: var(--text-accent); }
.b-apps__note { margin: 18px auto 0; text-align: center; }
.b-phone { position: relative; width: 290px; margin: 56px auto 0; }
.b-phone__glow { position: absolute; left: 50%; top: 40%; width: 640px; height: 640px; translate: -50% -50%; background: radial-gradient(closest-side, rgb(var(--b-glow) / .2), transparent); pointer-events: none; }
.b-phone__body { position: relative; padding: 10px; border: 1px solid rgb(var(--fg) / .2); background: linear-gradient(160deg, #1b2a52, #070f24); box-shadow: 0 50px 90px -40px rgb(0 0 0 / .8), inset 0 0 0 2px rgb(255 255 255 / .04); }
.b-sec .b-phone__body { border-radius: 46px !important; }
.b-sec .b-phone__scr { border-radius: 37px !important; }
.b-phone__scr { overflow: hidden; background: #0c1736; }
.b-phone__scr img { width: 100%; height: auto; }
.b-phone__island { position: absolute; left: 50%; top: 20px; width: 84px; height: 24px; margin-left: -42px; background: #000; }
.b-sec .b-phone__island { border-radius: 999px !important; }
.b-phone__chip { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid rgb(var(--fg) / .14); background: rgb(14 28 61 / .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .6); animation: bFloat 6s ease-in-out infinite; }
[data-theme="light"] .b-phone__chip { background: rgb(255 255 255 / .85); }
.b-phone__chip small { font: 500 12px var(--x-font); color: var(--text-2); }
.b-phone__chip b { font: 700 30px/1 var(--font-h); letter-spacing: -.03em; color: var(--text-accent); }
.b-phone__chip--l { left: -150px; top: 120px; }
.b-phone__chip--r { right: -150px; top: 260px; animation-delay: -3s; }
@keyframes bFloat { 50% { transform: translateY(-10px); } }

/* ---------- 13 contact ---------- */
.b-contact__box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; padding: 0; }
.b-contact__l { display: flex; flex-direction: column; gap: 28px; padding: 44px 40px; border-right: 1px solid var(--b-edge); }
.b-contact__call { margin-top: auto; font-size: 15px; color: var(--text-2); }
.b-contact__call a { color: var(--text); font-weight: 600; white-space: nowrap; }
.b-contact__call a:hover { color: var(--text-accent); }
.b-form.form:not(#_) { gap: 14px; padding: 44px 40px; }
.b-form .form__row { gap: 14px; }
.b-form .field { background: rgb(var(--fg) / .04); }
.b-form .form__note { font-size: 13px; color: var(--subtle); }

/* ---------- DNA behind the sections (js/blocks.js): a canvas inside the sections block, so it scrolls with them;
   two screens tall, moved along by the script; the sections paint over it ---------- */
.dna { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; pointer-events: none; will-change: transform; }

/* ---------- reveal ---------- */
.b-sec .x-rv { transition-delay: var(--rd, 0s); }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .b-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .b-aibox, .b-tbox, .b-contact__box { grid-template-columns: minmax(0, 1fr); }
  .b-tbox__demo:not(#_) { order: 2; }
  .b-contact__l { border-right: 0; border-bottom: 1px solid var(--b-edge); }
  .b-phone__chip--l { left: -120px; }
  .b-phone__chip--r { right: -120px; }
}
@media (max-width: 980px) {
  /* the orbit goes on top, the text under it, centred (as in hubsuite-preview.html) */
  .b-orbitlay { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .b-orbit-copy { text-align: center; }
  .b-orbit-copy .b-sub { margin-inline: auto; }
  .b-stats { justify-content: center; }
  .b-orbit-cta { align-items: center; }
  .b-orbit-holder .b-orbit { width: min(460px, 92%); }
}
@media (max-width: 900px) {
  .b-sec { padding-top: 150px; }
  .b-sec:last-child { padding-bottom: 150px; }
  .b-head { margin-bottom: 44px; }
  .b-grid--3, .b-sec-grid, .b-about__grid { grid-template-columns: minmax(0, 1fr); }
  .b-problem .b-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-road__rail { left: 7px; }
  .b-phase { grid-template-columns: minmax(0, 1fr); padding-left: 40px; }
  .b-phase__dot { left: 7px; }
  .b-phase .b-phase__card, .b-phase:nth-child(odd) .b-phase__card { grid-column: 1; transform: translateY(20px); }
  .b-phase::before, .b-phase:nth-child(odd)::before { left: 16px; width: 24px; background: rgb(var(--fg) / .2); }
  .b-card--panic { flex-direction: column; align-items: flex-start; }
  .b-card--panic .pn-mini:not(#_) { width: 150px; height: 150px; margin: -16px 0 -8px -20px; }
}
@media (max-width: 640px) {
  .b-sec { padding-top: 112px; }
  .b-sec:last-child { padding-bottom: 112px; }
  .b-head { margin-bottom: 36px; }
  .b-h2 { font-size: clamp(26px, 8vw, 34px); }
  .b-sub { font-size: 15.5px; }
  .b-card { padding: 22px; }
  .b-problem .b-grid--3, .b-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .b-mods { gap: 10px; }
  .b-mod { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 18px; }
  .b-mod .b-ic { grid-row: span 2; margin: 0; }
  .b-mod.b-card--center { align-items: start; text-align: left; }
  .b-mod:has(> .b-card__head) { display: flex; }
  .b-mod.b-card--center .b-ic { width: 46px; height: 46px; }
  .b-mod--bridge { grid-column: auto; display: flex; flex-direction: column; align-items: flex-start; }
  .b-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .b-num { min-height: 0; padding: 22px 18px; }
  .b-num__v { font-size: clamp(34px, 10vw, 44px); }
  .b-card .b-num__l { font-size: 13.5px; }
  .b-facts { gap: 10px; }
  .b-fact { min-height: 140px; }
  .b-story { padding: 24px; }
  .b-story .b-story__lead { font-size: 17px; }
  .b-aibox__txt, .b-tbox__txt, .b-contact__l, .b-form.form:not(#_) { padding: 26px 22px; }
  .b-aibox .roles:not(#_) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -22px; padding-inline: 22px; }
  .b-aibox .role:not(#_) { flex: none; }

  .b-aibox .chat-win:not(#_) { height: 520px; }

  .b-trial { flex-wrap: wrap; padding: 18px; }
  .b-trial .btn-box { width: 100%; }
  .b-period button { padding: 0 14px; font-size: 14px; }
  .b-plan { padding: 26px 20px 22px; }
  .b-plan__flag { margin: -26px -20px 20px; }
  .b-plan-notes { flex-direction: column; align-items: flex-start; }
  .b-phone { width: 220px; }
  .b-phone__chip { padding: 10px 12px; }
  .b-phone__chip b { font-size: 24px; }
  .b-phone__chip--l { left: -78px; top: 70px; }
  .b-phone__chip--r { right: -78px; top: 200px; }
  .b-store { height: 54px; }
  .b-logos__track span { padding: 0 28px; font-size: 16px; }
  .b-form .form__row { grid-template-columns: minmax(0, 1fr); }
  .b-note { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .b-orbit__ring, .b-node__in, .b-logos__track, .b-phone__chip, .b-orbit__core::before, .b-orbit__core::after, .b-orbit__pulses i { animation: none; }
  .b-phase__card { opacity: 1; transform: none; }
}

/* ---------- hero: one sentence under the title says what HubSuite is (picked by the client 18.10.2026) ---------- */
#hsMain .hs-lead { max-width: 34em; margin: calc(-1 * clamp(6px, .8vw, 16px)) 0 clamp(18px, 1.6vw, 30px); font: 400 clamp(15px, 1.05vw, 20px)/1.5 var(--x-font); color: rgb(255 255 255 / .74); pointer-events: auto; }
#hsMain .hs-lead b { font-weight: 700; color: #fff; }
#hsMain .hs-lead span { font-weight: 600; color: #ccff00; }
[data-theme="light"] #hsMain .hs-lead { color: #4a5878; }
[data-theme="light"] #hsMain .hs-lead b, [data-theme="light"] #hsMain .hs-lead span { color: #0b1f4f; }
@media (max-width: 900px) { #hsMain .hs-lead { order: 1; margin: 10px 20px 0; font-size: 15px; } }

/* ---------- small parts in the same soft look (18.10.2026): pills for tags, circles for checks and dots,
   rounded boxes inside the cards, form fields with the same 10px corners as the buttons ---------- */
.b-sec :is(.b-tag, .b-plats span):not(#_) { border-radius: 999px !important; }
.b-tag { padding: 5px 11px; }
.b-sec .b-checks li:not(#_)::before { border-radius: 50% !important; }
.b-sec :is(.b-plan__price, .b-todo):not(#_) { border-radius: 14px !important; }
.b-sec .b-trial:not(#_) { border-radius: 18px !important; }
.b-sec .b-phone__chip:not(#_) { border-radius: 16px !important; }
.b-sec :is(.b-node__in, .b-orbit__core, .b-orbit__pulses i):not(#_),
.b-orbit__core:not(#_)::before, .b-orbit__core:not(#_)::after, .b-logos__track span:not(#_)::after { border-radius: 50% !important; }
.field:not(#_) { border-radius: 10px !important; }
.b-sec .b-aibox .role:not(#_) { border-radius: 999px !important; }

/* ---------- demo windows sink into the page like the app in the hero (picked by the client 18.10.2026) ----------
   no frame, no contour, no shadow and no coloured glow: the edges just fade out into the background.
   Homepage: the AI chat and the tender card; inner pages: the app frames (.p-app) and the AI answer window (.p-ask) */
:is(.b-aibox .chat, .b-tbox .tcard, .p-app .p-app__frame, .p-ask.pw):not(#_):not(#_) {
  border-color: transparent; border-radius: 0 !important; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4%, #000 95%, transparent 100%);
  mask-composite: intersect;
}

/* ===== 18.10 (3): the dark theme in the spirit of the light one (the client likes the light theme more):
   flat blocks of one tone, no colour washes, corner lights or glows inside the cards, icons and numbers.
   The gradient border on hover stays, as in the light theme ===== */
html:not([data-theme="light"]) .b-sec {
  --b-glass: linear-gradient(rgb(var(--fg) / .035), rgb(var(--fg) / .035));
  --b-spot: rgb(150 180 255 / .045);
  --b-lime-bg: linear-gradient(rgb(204 255 0 / .06), rgb(204 255 0 / .06));
}
html:not([data-theme="light"]) .b-card { box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 22px 44px -30px rgb(0 0 0 / .6); }
html:not([data-theme="light"]) .b-card::before { display: none; }
html:not([data-theme="light"]) .b-plan--pro { --b-glass: linear-gradient(rgb(204 255 0 / .045), rgb(204 255 0 / .045)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 60px -36px rgb(0 0 0 / .7); }
html:not([data-theme="light"]) .b-card--panic { --b-glass: linear-gradient(rgb(240 82 82 / .07), rgb(240 82 82 / .07)); }
html:not([data-theme="light"]) .b-sec :is(.b-ic, .b-av) { background: rgb(var(--fg) / .05); box-shadow: none; }
html:not([data-theme="light"]) .b-sec :is(.b-node__in, .b-orbit__core) { background: var(--raised); box-shadow: none; }
html:not([data-theme="light"]) .b-store { background: rgb(var(--fg) / .05); }
html:not([data-theme="light"]) .b-phone__glow { background: radial-gradient(closest-side, rgb(150 180 255 / .08), transparent); }
html:not([data-theme="light"]) :is(.b-fact--ua .b-fact__v, .b-num__v--acc, .b-trial__n) { text-shadow: none; }
/* hover in the dark theme: nothing removed, only gathered under the cursor. The lime light is a small spot that follows
   the pointer instead of washing the whole card olive, and the gradient border is lit right where the cursor is
   (--mx / --my come from the tilt in main.js), fading to the plain edge around the card. The icon fills without a glow */
html:not([data-theme="light"]) .x-tilt::after { background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgb(204 255 0 / .09), rgb(204 255 0 / .025) 45%, transparent 72%); }
html:not([data-theme="light"]) .x-tilt.is-tilting { border-color: rgb(255 255 255 / .14); }
html:not([data-theme="light"]) .b-card.is-tilting { background:
    var(--b-glass) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgb(204 255 0 / .75), rgb(204 255 0 / .14) 45%, transparent 72%) border-box,
    linear-gradient(transparent, transparent) border-box; }
html:not([data-theme="light"]) :is(.b-card:hover, .b-card.is-tilting) > .b-ic:not(#_), html:not([data-theme="light"]) :is(.b-card:hover, .b-card.is-tilting) > .b-card__head > .b-ic:not(#_) { box-shadow: none; }

/* dark theme: the blocks have no outline at rest (the outline was always visible on the dark background);
   the card tone is a little lighter instead, and the border shows only under the cursor */
html:not([data-theme="light"]) .b-sec { --b-glass: linear-gradient(rgb(var(--fg) / .045), rgb(var(--fg) / .045)); }
html:not([data-theme="light"]) .b-card:not(:hover):not(.is-tilting) { --bd1: transparent; --bd2: transparent; }
html:not([data-theme="light"]) .b-phase.is-passed .b-phase__card { --bd1: var(--accent); --bd2: rgb(var(--b-glow) / .3); }
html:not([data-theme="light"]) .b-trial { border-color: transparent; background: linear-gradient(rgb(204 255 0 / .06), rgb(204 255 0 / .06)); }

/* ===== 18.10 (7): the tender steps in the site look (the old square numbers and lines from the first design
   were mixed with later rules: the number sat higher than the title and a hidden hint showed through).
   Now: a list of soft rows, round numbers like the card icons, the current step gets the card tone and its hint opens ===== */
.b-tbox .tsteps:not(#_):not(#_):not(#_) { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; border: 0; list-style: none; }
.b-tbox .tsteps li:not(#_):not(#_):not(#_) {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; align-items: center;
  padding: 12px 16px 12px 12px; border: 1px solid transparent; border-radius: 16px !important; background: transparent;
  font: 600 17px/1.3 var(--font-h); letter-spacing: -.01em; color: var(--text-2); cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}
.b-tbox .tsteps li:not(.is-on):hover:not(#_):not(#_) { background: rgb(var(--fg) / .035); color: var(--text); }
.b-tbox .tsteps li.is-on:not(#_):not(#_):not(#_) { background: rgb(var(--fg) / .05); border-color: rgb(var(--fg) / .06); color: var(--text); }
[data-theme="light"] .b-tbox .tsteps li.is-on:not(#_):not(#_):not(#_) { background: #f3f6fc; border-color: rgb(11 31 79 / .07); }
.b-tbox .tsteps__b:not(#_):not(#_):not(#_) {
  grid-row: 1; grid-column: 1; align-self: center; display: grid; place-items: center; width: 42px; height: 42px; margin: 0;
  border: 1px solid rgb(var(--b-glow) / .35); border-radius: 50% !important; background: rgb(var(--fg) / .04); box-shadow: none;
  font: 600 15px/1 var(--font-h); color: var(--text-2);
  transition: background-color .3s, border-color .3s, color .3s;
}
.b-tbox .tsteps li.is-on .tsteps__b:not(#_):not(#_):not(#_) { background: var(--b-mid); border-color: var(--b-mid); color: var(--b-ink); }
.b-tbox .tsteps li.is-done .tsteps__b:not(#_):not(#_):not(#_) { background: transparent; border-color: rgb(var(--b-glow) / .6); color: var(--text-accent); }
.b-tbox .tsteps__t:not(#_):not(#_):not(#_) { grid-row: 1; grid-column: 2; margin: 0; font: inherit; color: inherit; }
.b-tbox .tsteps__hint:not(#_):not(#_):not(#_) {
  grid-row: 2; grid-column: 2; max-height: 0; margin: 0; opacity: 0; overflow: hidden;
  font: 400 15px/1.5 var(--x-font); letter-spacing: 0; color: var(--text-2);
  transition: max-height .45s var(--ease), opacity .35s, margin .45s var(--ease);
}
.b-tbox .tsteps li.is-on .tsteps__hint:not(#_):not(#_):not(#_) { max-height: 90px; margin-top: 4px; opacity: 1; }

/* ===== 18.10 (7): the small print grew: the pricing notes, the security note and the client logos ===== */
.b-plan-notes:not(#_) { gap: 14px 32px; margin-top: 36px; font-size: 16px; color: var(--text-2); }
.b-plan-notes li { gap: 12px; }
.b-sec .b-plan-notes b:not(#_) { display: grid; place-items: center; width: 34px; min-width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50% !important; background: rgb(var(--b-glow) / .14); font: 600 14px/1 var(--font-h); color: var(--text-accent); }
.b-note:not(#_) { gap: 14px; margin-top: 28px; font-size: 16.5px; line-height: 1.5; }
.b-note .b-ic--sm:not(#_) { width: 42px; height: 42px; }
.b-note .b-ic--sm svg { width: 20px; height: 20px; }
.b-logos__track span:not(#_) { padding: 0 52px; font-size: 24px; color: rgb(var(--fg) / .55); }
.b-logos:not(#_) { padding: 28px 0; }
@media (max-width: 640px) {
  .b-plan-notes:not(#_) { font-size: 15px; }
  .b-note:not(#_) { font-size: 15px; }
  .b-logos__track span:not(#_) { padding: 0 32px; font-size: 19px; }
}

/* ===== 12 apps, second version (18.10.2026): the text in a card on the left, two phones on the page background
   on the right (chats in front, the AI check a little behind and turned), two figures floating beside them ===== */
.b-apps__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.b-apps__txt:not(#_) { gap: 16px; padding: 44px 40px; }
.b-apps__txt .b-h2 { margin: 0; }
.b-apps__lead { font-size: 17px; line-height: 1.55; color: var(--text-2); }
.b-apps__txt .b-checks { margin: 6px 0 8px; }
.b-apps__txt .b-stores { justify-content: flex-start; }
.b-apps__note:not(#_) { margin: 0; text-align: left; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.b-apps__stage { position: relative; height: 660px; }
.b-phone2 { position: absolute; left: 50%; }
.b-phone2--front { z-index: 2; top: 10px; width: 290px; translate: -22% 0; }
.b-phone2--back { z-index: 1; top: 90px; width: 246px; translate: -108% 0; rotate: -6deg; }
.b-phone2__body { position: relative; padding: 10px; border: 1px solid rgb(255 255 255 / .16); background: linear-gradient(160deg, #1b2a52, #070f24); box-shadow: 0 50px 90px -40px rgb(0 0 0 / .8), inset 0 0 0 2px rgb(255 255 255 / .04); }
.b-sec .b-phone2__body:not(#_) { border-radius: 46px !important; }
.b-phone2--back .b-phone2__body:not(#_) { border-radius: 40px !important; }
.b-phone2__scr { position: relative; overflow: hidden; aspect-ratio: 990 / 2145; background: #0c1736; }
.b-sec .b-phone2__scr:not(#_) { border-radius: 37px !important; }
.b-phone2--back .b-phone2__scr:not(#_) { border-radius: 31px !important; }
.b-phone2__scr img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.b-phone2__island { position: absolute; z-index: 1; left: 50%; top: 12px; width: 84px; height: 24px; margin-left: -42px; background: #000; }
.b-phone2--back .b-phone2__island { width: 70px; height: 20px; margin-left: -35px; top: 10px; }
.b-sec .b-phone2__island:not(#_) { border-radius: 999px !important; }
[data-theme="light"] .b-phone2__body { box-shadow: 0 40px 80px -40px rgb(11 31 79 / .45), inset 0 0 0 2px rgb(255 255 255 / .04); }
[data-theme="light"] .b-phone2__scr { background: #f6f8fc; }
/* the figures: small cards of the site, floating */
.b-apps__stage .b-phone__chip { z-index: 3; }
.b-apps__stage .b-phone__chip--l:not(#_) { left: 0; top: 66%; }
.b-apps__stage .b-phone__chip--r:not(#_) { right: 0; top: 12%; }
html:not([data-theme="light"]) .b-apps__stage .b-phone__chip { background: rgb(14 22 44 / .85); border-color: rgb(255 255 255 / .08); }
@media (max-width: 980px) {
  .b-apps__grid { grid-template-columns: minmax(0, 1fr); }
  .b-apps__stage { height: 680px; max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .b-apps__txt:not(#_) { padding: 26px 22px; }
  .b-apps__stage { height: 480px; }
  .b-phone2--front { width: 220px; }
  .b-phone2--back { width: 186px; top: 70px; }
  .b-apps__stage .b-phone__chip--l:not(#_) { top: 72%; }
}

/* ===== 18.10 (8): the security cards show small pieces of the product interface instead of the old drawings
   (square tiles and a lime blur): a rights table with switches, a chat that cleans itself, a cloud / own server switch.
   Soft corners, round parts, the site tones, the accent only on what is on. Animated by js/blocks.js ===== */
.sx { --sx-on: var(--b-mid); --sx-ink: var(--b-ink); --sx-panel: rgb(var(--fg) / .04); --sx-line: rgb(var(--fg) / .08); --sx-off: rgb(var(--fg) / .14);
  display: flex; flex-direction: column; justify-content: center; height: 212px; margin-bottom: 18px; }
[data-theme="light"] .sx { --sx-panel: #f5f7fc; --sx-line: rgb(11 31 79 / .08); --sx-off: rgb(11 31 79 / .14); }
.b-sec .sx-panel:not(#_) { border-radius: 16px !important; }
.sx-panel { padding: 8px 14px; border: 1px solid var(--sx-line); background: var(--sx-panel); }
.b-sec .sx-av:not(#_) { border-radius: 50% !important; }
.sx-av { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; background: var(--c); color: #fff; font: 700 10.5px/1 var(--font-h); font-style: normal; }

/* 1. the rights matrix */
.sx-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; padding: 9px 0; transition: background-color .4s; }
.sx-row + .sx-row { border-top: 1px solid var(--sx-line); }
.sx-row > :first-child { justify-self: start; }
.sx-row--h { padding: 4px 0 8px; font: 600 11px/1 var(--x-font); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.sx-who { display: flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--font-h); color: var(--text); }
.sx-tg { position: relative; width: 36px; height: 20px; background: var(--sx-off); transition: background-color .35s; }
.b-sec .sx-tg:not(#_), .b-sec .sx-tg:not(#_)::after { border-radius: 999px !important; }
.sx-tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .35s var(--ease); }
.sx-tg.is-on { background: var(--sx-on); }
.sx-tg.is-on::after { transform: translateX(16px); background: var(--sx-ink); box-shadow: none; }
[data-theme="light"] .sx-tg.is-on::after { background: #fff; }
.sx-tg.is-flip { animation: sxPop .45s var(--ease); }
@keyframes sxPop { 40% { scale: 1.18; } }

/* 2. the chat that cleans itself */
.sx-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; border-bottom: 1px solid var(--sx-line); }
.sx-head b { font: 600 14px/1.2 var(--font-h); color: var(--text); }
.sx-head em { margin-left: auto; padding: 4px 10px; background: rgb(var(--b-glow) / .14); font: 600 11.5px/1.2 var(--x-font); font-style: normal; color: var(--text-accent); }
.b-sec .sx-head em:not(#_) { border-radius: 999px !important; }
.sx-clock { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--text-accent); }
.sx-clock svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; fill: none; stroke-width: 2.5; }
.sx-clock svg.ph { width: 16px; height: 16px; }
.sx-clock__bg { stroke: var(--sx-off); }
.sx-clock__run { stroke: var(--sx-on); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; animation: sxRun 2.6s linear infinite; }
@keyframes sxRun { to { stroke-dashoffset: 0; } }
.sx-msgs { display: flex; flex-direction: column; padding-top: 4px; overflow: hidden; height: 132px; }
.sx-msg { display: flex; align-items: center; gap: 10px; flex: none; height: 44px; font-size: 13.5px; color: var(--text); transition: opacity .5s, height .5s var(--ease), translate .5s var(--ease); }
.sx-msg span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-msg small { flex: none; font-size: 12px; color: var(--subtle); font-variant-numeric: tabular-nums; }
.sx-msg.is-gone { opacity: 0; height: 0; translate: -18px 0; }
.sx-msg.is-new { animation: sxIn .55s var(--ease); }
@keyframes sxIn { from { opacity: 0; translate: 0 14px; } }

/* 3. cloud or own server */
.sx--cloud { align-items: center; gap: 22px; }
.sx-seg { position: relative; display: flex; padding: 4px; border: 1px solid var(--sx-line); background: var(--sx-panel); }
.b-sec .sx-seg:not(#_), .b-sec .sx-seg__knob:not(#_) { border-radius: 999px !important; }
.sx-seg span { position: relative; z-index: 1; padding: 8px 18px; font: 600 13.5px/1 var(--font-h); color: var(--text-2); transition: color .35s; }
.sx-seg span.is-on { color: var(--sx-ink); }
.sx-seg__knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: var(--kw, 80px); translate: var(--kx, 0) 0; background: var(--sx-on); transition: translate .45s var(--ease), width .45s var(--ease); }
.sx-nodes { display: flex; align-items: flex-start; gap: 14px; }
.sx-node { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 140px; text-align: center; font-size: 13px; line-height: 1.35; color: var(--text-2); transition: color .35s; }
.sx-node svg { box-sizing: content-box; width: 26px; height: 26px; padding: 15px; border: 1px solid rgb(var(--b-glow) / .35); background: rgb(var(--fg) / .05); color: var(--tile-ic); transition: background-color .35s, color .35s, border-color .35s; }
.b-sec .sx-node svg:not(#_) { border-radius: 50% !important; }
.sx-node.is-on { color: var(--text); }
.sx-node.is-on svg { background: var(--sx-on); border-color: var(--sx-on); color: var(--sx-ink); }
.sx-link { position: relative; flex: none; width: 90px; height: 2px; margin-top: 28px; background: repeating-linear-gradient(90deg, var(--sx-off) 0 6px, transparent 6px 11px); }
.sx-link i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: var(--sx-on); animation: sxGo 1.6s var(--ease) infinite; }
.b-sec .sx-link i:not(#_) { border-radius: 50% !important; }
.sx--cloud.is-b .sx-link i { animation-name: sxBack; }
@keyframes sxGo { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes sxBack { 0% { left: calc(100% - 8px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@media (max-width: 640px) {
  .sx { height: auto; min-height: 190px; }
  .sx-who { font-size: 13px; gap: 8px; }
  .sx-node { width: 112px; }
  .sx-link { width: 54px; }
}
@media (prefers-reduced-motion: reduce) { .sx-clock__run, .sx-link i { animation: none; } }

/* 18.10 (9): the "+" marks under the prices are a real plus icon (the text "+" was tiny);
   the HubSuite card in "Problem" shows the logo itself, bigger and without a round tile */
.b-sec .b-plan-notes b.is-ic svg { width: 16px; height: 16px; }
.b-logo-mark { display: grid; place-items: center; flex: none; width: 52px; height: 52px; }
.b-logo-mark img { width: 52px; height: 52px; transition: transform .45s var(--ease); }
@media (hover: hover) { :is(.b-card:hover, .b-card.is-tilting) .b-logo-mark img { transform: rotate(-12deg) scale(1.06); } }
html:not([data-theme="light"]) .b-logo-mark .logo--light, [data-theme="light"] .b-logo-mark .logo--dark { display: none; }

/* ===== 18.10 (10) ===== */
/* light theme: the demo windows fade out on the right as softly as on the left (the light window reaches its right edge
   with white panels, so a narrow fade read as a cut; the hero window had no right fade in the light theme at all) */
[data-theme="light"] :is(.b-aibox .chat, .b-tbox .tcard, .p-app .p-app__frame, .p-ask.pw):not(#_):not(#_):not(#_) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4%, #000 95%, transparent 100%);
}
@media (min-width: 901px) {
  [data-theme="light"] #hsMain .hs-wide:not(#_):not(#_) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 2.5%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 2.5%, #000 94%, transparent 100%);
  }
}
/* how it works: the step cards follow the cursor like the other cards (their arrival rule cancelled the tilt) */
.b-phase.is-in .b-phase__card.x-tilt { transform: perspective(var(--persp, 1400px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.b-phase.is-in .b-phase__card.x-tilt.is-tilting { transition: transform .15s ease-out, opacity .8s var(--ease), --bd1 .45s var(--ease), --bd2 .45s var(--ease); }
/* the form block: more air */
.b-contact__l:not(#_) { gap: 32px; padding: 64px 56px; }
.b-form.form:not(#_):not(#_) { gap: 18px; padding: 64px 56px; }
.b-form .form__row:not(#_) { gap: 18px; }
@media (max-width: 640px) { .b-contact__l:not(#_), .b-form.form:not(#_):not(#_) { padding: 30px 22px; } }
/* 23.10.2026, the phone: the request form box had the card padding and the form padding on each side (61px to the fields),
   now the box has none and the halves 18px, the fields get the width */
@media (max-width: 640px) {
  .b-contact__box.b-card:not(#_) { padding: 0; }
  .b-contact__l:not(#_):not(#_), .b-form.form:not(#_):not(#_):not(#_) { padding: 28px 18px; }
}
/* the devices of "Система підлаштовується": the group stands in the middle (the scene was drawn 5.5em to the left) */
.b-fit .x-devs { translate: 5.5em 0; }

/* ===== 18.10 (11): the short notes under the buttons were small grey lines that were easy to miss;
   now each is a soft pill with a tick, in the main text colour ===== */
.b-sec :is(.b-actions__note, .b-apps__note):not(#_):not(#_) {
  position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 4px 0 0; padding: 9px 18px 9px 10px;
  border-radius: 999px !important; background: rgb(var(--fg) / .05); box-shadow: inset 0 0 0 1px rgb(var(--fg) / .06);
  font: 500 15px/1.4 var(--x-font); color: var(--text); text-align: left;
}
[data-theme="light"] .b-sec :is(.b-actions__note, .b-apps__note):not(#_):not(#_) { background: #fff; box-shadow: 0 1px 2px rgb(11 31 79 / .05), inset 0 0 0 1px rgb(11 31 79 / .08); }
.b-sec :is(.b-actions__note, .b-apps__note)::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50% !important; background: var(--b-mid); }
.b-sec :is(.b-actions__note, .b-apps__note)::after { content: ""; position: absolute; left: 19px; top: 50%; width: 5px; height: 9px; margin-top: -6px; border: solid var(--b-ink); border-width: 0 2px 2px 0; rotate: 45deg; }
.b-apps__txt .b-apps__note:not(#_):not(#_) { align-self: flex-start; }

/* ===== 18.10 (11): the integrations orbit, calmer: one thin orbit line, no dashed and outer rings, no running dots
   and no waves around the core; the line to a service shows only while the cursor is on it. The orbit stops only when
   the cursor is on a service (not anywhere over the circle), and a disc of the page colour keeps the DNA out of it ===== */
.b-orbit::before { content: ""; position: absolute; z-index: 0; inset: -4%; border-radius: 50% !important; background: radial-gradient(closest-side, var(--bg) 78%, transparent); pointer-events: none; }
.b-orbit > * { z-index: 1; }
.b-orbit:hover .b-orbit__ring:not(#_), .b-orbit:hover .b-node__in:not(#_) { animation-play-state: running; }
.b-orbit:has(.b-node:hover) .b-orbit__ring:not(#_), .b-orbit:has(.b-node:hover) .b-node__in:not(#_) { animation-play-state: paused; }
.b-orbit__lines .b-ring:not(#_) { stroke: rgb(var(--fg) / .1); stroke-dasharray: none; }
.b-orbit__lines .b-ring--2:not(#_) { display: none; }
.b-orbit__lines line:not(#_) { stroke: transparent; stroke-width: 1.4; }
.b-orbit__lines line.is-hot:not(#_) { stroke: var(--text-accent); }
.b-orbit__pulses:not(#_) { display: none; }
.b-orbit__core:not(#_)::before, .b-orbit__core:not(#_)::after { display: none; }
.b-node { cursor: default; }
.b-node .b-node__in { transition: border-color .3s, box-shadow .3s, background-color .3s, scale .35s var(--ease); }
@media (hover: hover) { .b-node:hover .b-node__in:not(#_) { scale: 1.08; border-color: var(--b-mid); box-shadow: none; } }
@media (hover: hover) { .b-node:hover .b-node__in b { color: var(--text); } }

/* 19.10.2026: the two store buttons stand in one row (the "Незабаром" pills are gone) */
.b-apps__txt .b-stores:not(#_) { flex-wrap: nowrap; gap: 12px; }
.b-apps__txt .b-store:not(#_) { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 18px; }
@media (max-width: 420px) { .b-apps__txt .b-stores:not(#_) { flex-wrap: wrap; } }

/* ===== 19.10.2026: smoother and richer arrival of the blocks on scroll (homepage sections, wide screens).
   The reveal works through translate / scale (no blur: it looked soapy), so it never fights the tilt (which uses transform).
   - cards rise from below, a little smaller, one after another (--rd from js/blocks.js);
   - section titles: the title, then the line under it;
   - side by side blocks come from their own side: the text card from the left, the demo window from the right;
   - the orbit grows in, the copy beside it comes line by line ===== */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* cards */
  .b-sec .x-rv.x-rv:not(.x-devs) {
    transition: opacity .9s var(--ease) var(--rd, 0s), translate 1.1s var(--ease) var(--rd, 0s), scale 1.1s var(--ease) var(--rd, 0s), filter .9s var(--ease) var(--rd, 0s),
      transform .6s var(--ease), box-shadow .35s, --bd1 .45s var(--ease), --bd2 .45s var(--ease);
  }
  .b-sec .x-rv.x-tilt.is-tilting.in { transition: opacity .9s var(--ease), translate 1.1s var(--ease), scale 1.1s var(--ease), filter .9s var(--ease), transform .15s ease-out, box-shadow .35s, --bd1 .45s var(--ease), --bd2 .45s var(--ease); }
  .b-sec .x-rv:not(.in):not(.x-devs) { opacity: 0; transform: none; translate: 0 44px; scale: .96; }

  /* any other piece marked data-reveal */
  .b-sec [data-reveal] { transition: opacity .9s var(--ease) var(--d, 0s), translate 1s var(--ease) var(--d, 0s), scale 1s var(--ease) var(--d, 0s), filter .9s var(--ease) var(--d, 0s); }
  .b-sec [data-reveal]:not(.in) { opacity: 0; translate: 0 32px; }

  /* section titles: the title, then the line under it */
  .b-sec .b-head[data-reveal]:not(.in) { opacity: 1; translate: none; filter: none; }
  .b-sec .b-head[data-reveal] > * { transition: opacity .9s var(--ease), translate 1s var(--ease), filter .9s var(--ease); }
  .b-sec .b-head[data-reveal] > :nth-child(2) { transition-delay: .14s; }
  .b-sec .b-head[data-reveal]:not(.in) > * { opacity: 0; translate: 0 30px; }

  /* the AI and tender rows: the text card and the demo window come from their own sides */
  .b-sec :is(.b-aibox, .b-tbox).x-rv:not(.in) { opacity: 1; translate: none; scale: 1; filter: none; }
  :is(.b-aibox, .b-tbox) > * { transition: opacity 1s var(--ease), translate 1.2s var(--ease), scale 1.2s var(--ease), filter 1s var(--ease); }
  :is(.b-aibox, .b-tbox) > :nth-child(2) { transition-delay: .18s; }
  .b-aibox:not(.in) > .b-aibox__txt, .b-tbox:not(.in) > .b-tbox__demo { opacity: 0; translate: -60px 0; }
  .b-aibox:not(.in) > .chat-area, .b-tbox:not(.in) > .b-tbox__txt { opacity: 0; translate: 60px 0; scale: .97; }

  /* the app section: the card from the left, the phones from the right and a little lower */
  .b-sec .b-apps__txt.x-rv:not(.in) { translate: -60px 0; scale: 1; }
  .b-sec .b-apps__stage.x-rv:not(.in) { translate: 70px 40px; scale: .96; }
  .b-apps__stage.x-rv { --rd: .18s; }

  /* the orbit grows in, the copy beside it line by line */
  .b-sec .b-orbit-holder[data-reveal]:not(.in) { translate: none; scale: .86; }
  .b-orbit-copy > [data-reveal]:nth-child(2) { --d: .1s; }
  .b-orbit-copy > [data-reveal]:nth-child(3) { --d: .2s; }
  .b-orbit-copy > [data-reveal]:nth-child(4) { --d: .3s; }
}
a.b-more:hover .i { transform: translateX(5px); }

/* ===== 19.10.2026: phones ===== */
/* the devices: the shift that centres the desktop scene only on wide screens (phones have their own stacked layout) */
@media (max-width: 760px) { .b-fit .x-devs:not(#_) { translate: none; } }
@media (max-width: 640px) {
  /* the three figures beside the orbit stand in one row */
  .b-stats:not(#_) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin-bottom: 28px; }
  .b-stat__v:not(#_) { font-size: 30px; }
  .b-stat__l:not(#_) { font-size: 12.5px; line-height: 1.35; }
  /* the store buttons stay in one row, their labels on one line */
  .b-apps__txt .b-store:not(#_) { gap: 10px; height: 54px; padding: 0 12px; }
  .b-apps__txt .b-store svg { width: 22px; height: 22px; flex: none; }
  .b-apps__txt .b-store span:not(#_) { font-size: 15px; white-space: nowrap; }
  .b-apps__txt .b-store small:not(#_) { font-size: 10px; white-space: nowrap; }
  /* the two phones fit the screen */
  .b-apps__stage:not(#_) { height: 520px; }
  .b-phone2--front:not(#_) { width: 214px; translate: -30% 0; }
  .b-phone2--back:not(#_) { width: 180px; top: 64px; translate: -96% 0; }
  .b-apps__stage .b-phone__chip--l:not(#_) { left: 0; top: 74%; }
  .b-apps__stage .b-phone__chip--r:not(#_) { right: 0; top: 6%; }
  /* the AI chat window: less empty space while the answer comes */
  .b-aibox .chat-win:not(#_):not(#_) { height: 460px; }
}

/* ===== 19.10.2026 (2): phones ===== */
@media (max-width: 640px) {
  /* 1. the orbit fills the screen width, bigger services and core */
  .b-orbit-holder .b-orbit:not(#_):not(#_) { width: calc(100% + 32px); margin-inline: -16px; }
  .b-node:not(#_) { width: 22%; }
  .b-node__in svg:not(#_) { width: 36%; height: 36%; }
  .b-node__in b:not(#_) { font-size: 12px; }
  .b-orbit__core:not(#_) { width: 31%; }

  /* 2. the three devices in one row (laptop, tablet, phone side by side, standing on one line) */
  .b-fit .x-devs:not(#_):not(#_) { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, .42fr); grid-template-areas: "lap tab ph"; align-items: end; gap: 3cqw; }
  .b-fit .x-devs .dev--lap .dev__lid:not(#_) { width: 86%; }

  /* 4. blocks of a section scroll sideways: one card and a part of the next one on screen, the next one snaps in */
  :is(#problem .b-grid--3, .b-fixes, .b-mods, .b-fit .b-grid--3, #trust .b-grid--3, .b-sec-grid, .b-nums, .b-plans):not(#_):not(#_) {
    display: flex; gap: 12px; margin-inline: calc(-1 * var(--pad, 16px)); padding: 4px var(--pad, 16px) 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad, 16px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: none;
  }
  :is(#problem .b-grid--3, .b-fixes, .b-mods, .b-fit .b-grid--3, #trust .b-grid--3, .b-sec-grid, .b-nums, .b-plans)::-webkit-scrollbar { display: none; }
  :is(#problem .b-grid--3, .b-fixes, .b-mods, .b-fit .b-grid--3, #trust .b-grid--3, .b-sec-grid, .b-plans) > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  .b-nums > * { flex: 0 0 62%; scroll-snap-align: start; }
  .b-mods > * { flex-basis: 74%; }
  :is(#problem .b-grid--3, .b-fixes, .b-mods, .b-fit .b-grid--3, #trust .b-grid--3, .b-sec-grid, .b-nums, .b-plans) > .x-rv { opacity: 1; transform: none; }
  .b-mods > .b-mod--bridge { flex-basis: 84%; }
  .b-plans > .b-plan--pro { margin-top: 0; }
  /* the dots under a row */
  .b-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .b-dots i { width: 8px; height: 8px; border-radius: 99px !important; background: rgb(var(--fg) / .2); transition: width .3s var(--ease), background-color .3s; }
  .b-dots i.is-on { width: 24px; background: var(--b-mid); }
}
@media (min-width: 641px) { .b-dots { display: none; } }

/* 3. the iPhone frames of the app section: bezel, corners and the Dynamic Island in the proportions of a real iPhone
   at any size (container units of the phone itself), the island in line with the status bar of the screen shot */
.b-phone2 { container-type: inline-size; }
.b-sec .b-phone2__body:not(#_):not(#_) { padding: 3.2cqw; border-radius: 15.5cqw !important; }
.b-sec .b-phone2__scr:not(#_):not(#_) { border-radius: 12.4cqw !important; container-type: inline-size; }
.b-sec .b-phone2__island:not(#_):not(#_) { top: 3.4cqw; left: 50%; width: 30cqw; height: 8.8cqw; margin: 0; translate: -50% 0; border-radius: 99px !important; }
@media (max-width: 640px) {
  /* the module cards in the sideways row: the text right under the title, not spread over the card height */
  .b-mods > .b-mod:not(#_) { align-content: start; }
  /* the AI chat window: its full height again (460px let the chat overlap the tender card under it) */
  .b-aibox .chat-win:not(#_):not(#_):not(#_) { height: 520px; }
}
@media (max-width: 640px) {
  /* each module card keeps its own height (the tall AI card stretched all of them) */
  .b-mods:not(#_):not(#_):not(#_) { align-items: flex-start; }
}

/* ===== 19.10.2026 (3): phones ===== */
@media (max-width: 760px) {
  /* "Система підлаштовується": the same scene as on the desktop (laptop, tablet, phone side by side), just smaller */
  .b-fit .b-devstage:not(#_) { margin-bottom: 40px; }
  .b-fit .x-devs:not(#_):not(#_):not(#_) { display: block; position: relative; width: auto; height: 41em; max-width: none; margin: 0; font-size: 1.08cqw; translate: 5.5em 0; gap: 0; grid-template-columns: none; grid-template-areas: none; }
  .b-fit .x-devs .dev:not(#_):not(#_):not(#_) { position: absolute; translate: none; }
  .b-fit .x-devs .dev--lap:not(#_):not(#_):not(#_) { left: 19em; right: auto; bottom: 2.5em; width: 62em; }
  .b-fit .x-devs .dev--lap .dev__lid:not(#_):not(#_):not(#_) { width: 52em; }
  .b-fit .x-devs .dev--tab:not(#_):not(#_):not(#_) { left: 1em; right: auto; bottom: 1.5em; width: 31em; }
  .b-fit .x-devs .dev--ph:not(#_):not(#_):not(#_) { left: auto; right: 12em; bottom: .6em; width: 12.6em; }
}
@media (max-width: 640px) {
  /* modules: every card the same size (the AI card is as compact as the others), the dots close under them */
  .b-mods:not(#_):not(#_):not(#_) { align-items: stretch; }
  .b-mods > *:not(#_):not(#_) { flex: 0 0 78%; }
  .b-mods > .b-mod--bridge:not(#_):not(#_) { flex-basis: 78%; gap: 8px; padding: 18px; }
  .b-mods > .b-mod--bridge .b-ic:not(#_) { width: 46px; height: 46px; }
  .b-mods > .b-mod--bridge .b-tag { display: none; }
  .b-mods > .b-mod--bridge h3:not(#_) { font-size: 18px; }
  .b-mods + .b-dots { margin-top: 10px; }
  /* "HubSuite наводить лад" and the figures: no sideways scroll, the cards stand one under another / two in a row */
  .b-fixes:not(#_):not(#_):not(#_) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .b-nums:not(#_):not(#_):not(#_) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
}
@media (max-width: 640px) {
  /* the AI card in the module row: icon, title and link only, so the row is not taller than an ordinary module */
  .b-mods > .b-mod--bridge .b-mod__txt > p { display: none; }
}

/* ===== 21.10.2026: dark theme, leaving a card: the plain gradient border came back for a moment in full lime and
   faded out (the hover set it to lime under the cursor light), so the whole outline flashed. In the dark theme the
   plain border stays clear on hover too; only the light under the cursor draws the edge ===== */
html:not([data-theme="light"]) .b-card:is(:hover, .is-tilting):not(#_) { --bd1: transparent; --bd2: transparent; }

/* ===== 21.10.2026: the orbit. The core is the live logo mark (its nodes drift and pop on hover, js/main.js);
   a hovered service is joined to it by a DNA strand in the accent colour (js/blocks.js) instead of a straight line ===== */
.b-orbit__core { --mk-body: #ccff00; --mk-cube: #0b1f4f; }
[data-theme="light"] .b-orbit__core { --mk-body: #0b1f4f; --mk-cube: #ccff00; }
.b-orbit__core .hs-mk:not(#_) { width: 62%; height: 62%; overflow: visible; }
.b-orbit__lines line.is-hot:not(#_):not(#_) { stroke: transparent; }
/* 22.10.2026: the link is a small piece of the DNA network behind the sections (its colours, a little brighter),
   the strokes running to the service are in the accent colour */
.b-dna { pointer-events: none; opacity: 0; --dl: rgb(150 180 255 / .38); --dn: rgb(200 215 255 / .85); --db: rgb(150 180 255 / .08); --dbs: rgb(170 195 255 / .6); }
[data-theme="light"] .b-dna { --dl: rgb(11 31 79 / .28); --dn: rgb(11 31 79 / .62); --db: rgb(11 31 79 / .04); --dbs: rgb(11 31 79 / .4); }
.b-dna__l { fill: none; stroke: var(--dl); stroke-width: 1.8; stroke-linecap: round; }
.b-dna__k { fill: none; stroke: var(--dl); stroke-width: 1.8; stroke-linecap: round; }
.b-dna__n { fill: var(--dn); }
.b-dna__b { fill: var(--db); stroke: var(--dbs); stroke-width: 1.6; }
.b-dna__run { fill: none; stroke: var(--text-accent); stroke-width: 2.6; stroke-linecap: round; }

/* ===== 22.10.2026: the labels of the services on the orbit could end up upside down: the ring and every service
   circle had their own animation turning the opposite way, and once they went out of step the labels turned with the
   ring. Now one animation turns an angle (--orb) on the ring, the ring takes it and the circles take the opposite,
   so they can never go out of step (pausing the ring pauses both) ===== */
@property --orb { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes bOrbitAngle { to { --orb: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  .b-orbit__ring:not(#_):not(#_) { animation-name: bOrbitAngle; animation-duration: 90s; animation-timing-function: linear; animation-iteration-count: infinite; rotate: var(--orb); }
  .b-node__in:not(#_):not(#_) { animation-name: none; rotate: calc(-1 * var(--orb)); }
}

/* ===== 22.10.2026: the devices of "Система підлаштовується" run the app live (js/blocks.js): the app is laid out at its
   own width and scaled to the screen, it fades in over the still shot once it runs; the glass glare stays on top ===== */
.dev__app { position: absolute; left: 0; top: 0; z-index: 0; display: block; border: 0; transform-origin: 0 0; transform: scale(var(--s, .3)); pointer-events: none; opacity: 0; transition: opacity .8s ease; background: transparent; }
.scr.is-live .dev__app { opacity: 1; }
.scr.is-live .dev__img { opacity: 0; transition: opacity .8s ease .2s; }

/* ===== 22.10.2026: the device frames get their hardware (sizes in em of the device scene, so they scale with it):
   the phone a Dynamic Island in line with the status bar of the app and side buttons, the laptop a notch with the camera
   in the top of the screen, the tablet a camera in its bezel. They sit over the live app and the still shot ===== */
.x-devs .dev--ph .dev__bez::after {
  content: ""; position: absolute; z-index: 3; left: 50%; top: .82em; width: 3.5em; height: 1.02em; translate: -50% 0;
  background: #000; box-shadow: inset .36em 0 0 -.2em rgb(40 50 80 / .9);
}
.x-devs .dev--ph .dev__bez::before {
  content: ""; position: absolute; z-index: -1; right: -.22em; top: 4.2em; width: .3em; height: 1.9em;
  background: linear-gradient(90deg, #2a3348, #10141f); box-shadow: -12.74em -1.7em 0 0 #1c2334, -12.74em .9em 0 0 #1c2334;
}
.x-devs .dev--ph .dev__bez:not(#_)::after, .x-devs .dev--ph .dev__bez:not(#_)::before { border-radius: 99px !important; }
.x-devs .dev--lap .dev__bez::after {
  content: ""; position: absolute; z-index: 3; left: 50%; top: .8em; width: 4.6em; height: .95em; translate: -50% 0;
  background: radial-gradient(circle at 50% 42%, #1d2a44 0 .14em, #0b0f19 .17em, transparent .19em) center / 100% 100% no-repeat, #05070c;
}
.x-devs .dev--lap .dev__bez:not(#_)::after { border-radius: 0 0 .5em .5em !important; }
.x-devs .dev--tab .dev__bez::after {
  content: ""; position: absolute; z-index: 3; left: 50%; top: .42em; width: .36em; height: .36em; translate: -50% 0;
  background: radial-gradient(circle at 40% 40%, #2b3a5c, #05070c 70%);
}
.x-devs .dev--tab .dev__bez:not(#_)::after { border-radius: 50% !important; }
/* the laptop: a menu bar as tall as the notch, like on a real one, so the notch never covers the app; the app and the
   still shot start under it */
.x-devs .dev--lap .scr { --bar: .95em; }
.x-devs .dev--lap .scr::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: var(--bar); background: #070b16; box-shadow: inset 0 -1px 0 rgb(255 255 255 / .06); }
[data-theme="light"] .x-devs .dev--lap .scr::before { background: #e9edf5; box-shadow: inset 0 -1px 0 rgb(11 31 79 / .08); }
.x-devs .dev--lap :is(.dev__app, .dev__img):not(#_) { top: var(--bar); }
.x-devs .dev--lap .dev__img:not(#_) { height: calc(100% - var(--bar)); inset: var(--bar) 0 auto 0; }

/* ===== 22.10.2026: the laptop shows the app in a browser window: under the menu bar with the notch, a toolbar with the
   three window buttons and the address; the app and the still shot start under it (--bar = menu bar + toolbar) ===== */
.x-devs .dev--lap .scr:not(#_) { --menu: .95em; --bar: 2.55em; }
.x-devs .dev--lap .scr::before { height: var(--menu); }
.dev__chrome { display: none; }
.x-devs .dev--lap .dev__chrome {
  position: absolute; z-index: 2; left: 0; right: 0; top: var(--menu); height: calc(var(--bar) - var(--menu));
  display: flex; align-items: center; gap: .32em; padding: 0 .75em; background: #0d1631; box-shadow: inset 0 -1px 0 rgb(255 255 255 / .07);
}
.x-devs .dev--lap .dev__chrome i { width: .5em; height: .5em; flex: none; background: #ff5f57; }
.x-devs .dev--lap .dev__chrome i:nth-child(2) { background: #febc2e; }
.x-devs .dev--lap .dev__chrome i:nth-child(3) { background: #28c840; }
.x-devs .dev--lap .dev__chrome i:not(#_) { border-radius: 50% !important; }
.x-devs .dev--lap .dev__chrome span {
  display: flex; align-items: center; justify-content: center; gap: .3em; width: 42%; height: 1em; margin: 0 auto; translate: -1em 0;
  background: rgb(255 255 255 / .07); font: 500 .5em/1 var(--x-font, sans-serif); color: #9aa6c4; white-space: nowrap;
}
.x-devs .dev--lap .dev__chrome span { height: 2em; font-size: .5em; }
.x-devs .dev--lap .dev__chrome span:not(#_) { border-radius: 99px !important; }
.x-devs .dev--lap .dev__chrome svg { width: 1.1em; height: 1.1em; }
[data-theme="light"] .x-devs .dev--lap .dev__chrome { background: #f3f5fa; box-shadow: inset 0 -1px 0 rgb(11 31 79 / .08); }
[data-theme="light"] .x-devs .dev--lap .dev__chrome span { background: rgb(11 31 79 / .06); color: #405172; }

/* ===== 22.10.2026: the two phones of "HubSuite завжди під рукою" run the app live too (bigger, mw=320), the island over
   it in line with the status bar of the app, side buttons on the body (container units of the phone) ===== */
.is-live > .dev__app:not(#_) { opacity: 1; }
.is-live > .dev__img:not(#_) { opacity: 0; transition: opacity .8s ease .2s; }
.b-phone2__island:not(#_) { z-index: 2; }
.b-phone2__body::before {
  content: ""; position: absolute; z-index: -1; right: -1cqw; top: 30cqw; width: 1.2cqw; height: 20cqw;
  background: linear-gradient(90deg, #2a3348, #10141f); box-shadow: -100.8cqw -8cqw 0 0 #1c2334, -100.8cqw 14cqw 0 0 #1c2334;
}
.b-sec .b-phone2__body:not(#_)::before { border-radius: 99px !important; }

/* ===== 22.10.2026: phones and tablets get the block reveal of the desktop too (shorter moves): cards rise in one
   after another, section titles line by line, the orbit grows in. The cards of the sideways rows stay as they are
   (they are off screen to the side, the observer would never see them) ===== */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .b-sec .x-rv.x-rv:not(.x-devs) { transition: opacity .8s var(--ease) var(--rd, 0s), translate .9s var(--ease) var(--rd, 0s), scale .9s var(--ease) var(--rd, 0s), --bd1 .45s var(--ease), --bd2 .45s var(--ease); }
  .b-sec .x-rv:not(.in):not(.x-devs) { opacity: 0; transform: none; translate: 0 30px; scale: .97; }
  .b-sec [data-reveal] { transition: opacity .8s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .9s var(--ease) var(--d, 0s); }
  .b-sec [data-reveal]:not(.in) { opacity: 0; translate: 0 24px; }
  .b-sec .b-head[data-reveal]:not(.in) { opacity: 1; translate: none; }
  .b-sec .b-head[data-reveal] > * { transition: opacity .8s var(--ease), translate .9s var(--ease); }
  .b-sec .b-head[data-reveal] > :nth-child(2) { transition-delay: .12s; }
  .b-sec .b-head[data-reveal]:not(.in) > * { opacity: 0; translate: 0 22px; }
  .b-sec .b-orbit-holder[data-reveal]:not(.in) { translate: none; scale: .88; }
  :is(#problem .b-grid--3, .b-mods, .b-fit .b-grid--3, #trust .b-grid--3, .b-sec-grid, .b-plans) > .x-rv:not(#_):not(#_) { opacity: 1; translate: none; scale: 1; }
}

/* ===== 22.10.2026 (2): phones. "Система підлаштовується" shows only the laptop, across the whole width (the three
   devices side by side were too small to read); the two buttons of "Про нас" go one under the other ===== */
@media (max-width: 760px) {
  .b-fit .x-devs :is(.dev--tab, .dev--ph):not(#_) { display: none; }
  .b-fit .x-devs:not(#_):not(#_):not(#_):not(#_) { height: auto; padding: 0; font-size: 1.6cqw; translate: none; }
  .b-fit .x-devs .dev--lap:not(#_):not(#_):not(#_):not(#_) { position: relative; left: auto; right: auto; bottom: auto; width: 100%; }
  .b-fit .x-devs .dev--lap .dev__lid:not(#_):not(#_):not(#_):not(#_) { width: 84%; }
}
@media (max-width: 640px) {
  .b-about .b-actions:not(#_):not(#_) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .b-about .b-actions .x-btn:not(#_):not(#_) { flex: none; width: 100%; min-height: 56px; }
  .b-about .b-actions .x-btn > span:first-child:not(#_):not(#_) { justify-content: flex-start; padding: 10px 16px; font-size: 15px; }
  .b-about .b-actions .x-btn__ic:not(#_):not(#_) { width: 38px; height: 38px; margin-right: 8px; }
}

/* ===== 23.10.2026: one phone body on the whole site, the one of the hero phone (main-hero.css, #hsMain .hs-mwrap on
   phones): a navy body with a thin light outline, a bezel of 2.65% of the width, corners of 14.2%, a black island of
   31% x 9% at 6.2% from the top, side buttons in the same navy. The proportions are given in the units of each phone:
   container units in "HubSuite завжди під рукою" (.b-phone2), em of the device scene in the devices block (.dev--ph) ===== */
.b-sec .b-phone2__body:not(#_):not(#_):not(#_) { padding: 2.65cqw; border: 0; border-radius: 14.2cqw !important;
  background: linear-gradient(150deg, #262f55, #0a0f24 60%);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / .8), inset 0 0 0 1.5px rgb(255 255 255 / .14); }
[data-theme="light"] .b-sec .b-phone2__body:not(#_):not(#_):not(#_) { box-shadow: 0 40px 80px -40px rgb(11 31 79 / .45), inset 0 0 0 1.5px rgb(255 255 255 / .14); }
.b-sec .b-phone2__scr:not(#_):not(#_):not(#_) { border-radius: 11.55cqw !important; }
.b-sec .b-phone2__island:not(#_):not(#_):not(#_) { top: 3.55cqw; width: 31.3cqw; height: 9.1cqw; background: #000; }
.b-phone2__body:not(#_)::before { right: -.9cqw; top: 29.5cqw; width: .9cqw; height: 16.5cqw;
  background: linear-gradient(90deg, #4a5579, #252e50); box-shadow: -100.9cqw -4cqw 0 0 #252e50, -100.9cqw 8.5cqw 0 0 #252e50; }

.x-devs .dev--ph .dev__bez:not(#_):not(#_) { padding: .334em; border: 0; border-radius: 1.79em !important;
  background: linear-gradient(150deg, #262f55, #0a0f24 60%);
  box-shadow: 0 2.4em 4em -2em rgb(0 0 0 / .6), inset 0 0 0 1.5px rgb(255 255 255 / .14); }
.x-devs .dev--ph .scr:not(#_):not(#_) { border-radius: 1.46em !important; }
.x-devs .dev--ph .dev__bez:not(#_)::after { top: .78em; width: 3.94em; height: 1.15em; background: #000; box-shadow: none; }
.x-devs .dev--ph .dev__bez:not(#_)::before { right: -.11em; top: 3.72em; width: .11em; height: 2.08em;
  background: linear-gradient(90deg, #4a5579, #252e50); box-shadow: -12.82em -.5em 0 0 #252e50, -12.82em 1.07em 0 0 #252e50; }

/* 23.10.2026, touch screens: no reaction of the blocks to the finger (the card hover, light and press rules above only run
   with a mouse); in the dark theme a tapped card keeps its border hidden as the others */
@media (hover: none) { html:not([data-theme="light"]) .b-card:hover { --bd1: transparent; --bd2: transparent; } }

/* 23.10.2026: the hero is one piece with the page. It does not cut anything off at its bottom (only the sides are clipped),
   its own network fades out to the bottom, and the DNA of the page (z-index -1, under everything) starts inside the hero
   and fades in there (js/blocks.js, lift) */
.hero.hs-anim:not(#_), .i-hero:not(#_) { overflow-x: clip; overflow-y: visible; }
.hero .hs-net, .i-hero .x-net { -webkit-mask-image: linear-gradient(#000 calc(100% - 320px), transparent); mask-image: linear-gradient(#000 calc(100% - 320px), transparent); }

/* 23.10.2026: the blocks arrive without shrinking (rise and fade only). A shrunk card is drawn scaled and its text is redrawn
   sharp when the animation ends, which read as a twitch at the end (/modules/, /tenders/) */
.b-sec .x-rv:not(.in):not(.x-devs):not(#_), .b-aibox:not(.in) > .chat-area:not(#_), .b-tbox:not(.in) > .b-tbox__txt:not(#_), .b-sec .b-apps__stage.x-rv:not(.in):not(#_) { scale: 1; }