/* HubSuite homepage. Tokens follow the Figma variables (Color: Dark / Light). */
@font-face { font-family: "Brigadier Stencil UA"; src: url(../assets/fonts/BrigadierStencil-UA.otf) format("opentype"); font-weight: 400 900; font-display: swap; }
:root,
[data-theme="dark"] {
  --font: "Inter", "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Brigadier Stencil UA", var(--font);
  --fg: 255 255 255;
  --bg-rgb: 8 16 37;
  --bg: #081025;   /* 19.10.2026: a touch lighter than #050b1a */
  --raised: #0a1530;
  --elevated: #0e1c3d;
  --text: #fff;
  --text-2: #b4c0dc;
  --subtle: #8796b7;
  --muted: #7181a2;
  --accent: #ccff00;
  --text-accent: #ccff00;
  --on-accent: #000;
  --inverse: #000;
  --danger: #ff6b6b;
  --warn: #ffb547;
  --ok: #3ddc84;
  --info: #2a5bff;
  --line: rgb(150 180 255 / .1);
  --line-2: rgb(150 180 255 / .14);
  --line-3: rgb(150 180 255 / .2);
  --panel: rgb(150 180 255 / .035);
  --hdr-bg: rgb(14 28 61 / .55);
  --hdr-border: rgb(150 180 255 / .16);
  --hdr-shadow: rgb(0 4 20 / .45);
  --hdr-hl: rgb(255 255 255 / .12);
  --tile-a: #12224a;
  --tile-b: #070f24;
  --tile-st: rgb(204 255 0 / .7);
  --tile-ic: #ccff00;
  --glow: rgb(204 255 0 / .35);
  --ghost-num: rgb(var(--fg) / .06);
  --mac-bar: #0c1631;
  --mac-body: #071026;
  --mac-url: rgb(255 255 255 / .06);
  --mac-line: rgb(150 180 255 / .14);
  --navy: #0b1f4f;
  color-scheme: dark;
}
[data-theme="light"] {
  --fg: 11 31 79;
  --bg-rgb: 244 246 251;
  --bg: #f4f6fb;
  --raised: #ffffff;
  --elevated: #eaeef7;
  --text: #0b1f4f;
  --text-2: #405172;
  --subtle: #5f6f8f;
  --muted: #687895;
  --text-accent: #0b1f4f;
  --inverse: #fff;
  --hdr-bg: rgb(255 255 255 / .85);
  --hdr-border: rgb(11 31 79 / .1);
  --hdr-shadow: rgb(11 31 79 / .08);
  --hdr-hl: rgb(255 255 255 / 0);
  --tile-a: #ffffff;
  --tile-b: #eef2fa;
  --tile-st: rgb(11 31 79 / .35);
  --tile-ic: #0b1f4f;
  --mac-bar: #e9edf6;
  --mac-body: #fff;
  --mac-url: #fff;
  --mac-line: rgb(11 31 79 / .12);
  --glow: rgb(11 31 79 / .2);
  --ghost-num: rgb(11 31 79 / .05);
  --accent: #0b1f4f;
  --on-accent: #fff;
  --navy: #0b1f4f;
  color-scheme: light;
}

:root {
  --pad: max(120px, calc((100vw - 1440px) / 2 + 120px));
  --sec-top: 320px;
  --sec-top-s: 290px;
  --sec-bot: 130px;
  --ease: cubic-bezier(.22, .7, .2, 1);
}
@media (max-width: 1200px) { :root { --pad: 64px; --sec-top: 260px; --sec-top-s: 240px; } }
@media (max-width: 900px) { :root { --pad: 40px; --sec-top: 210px; --sec-top-s: 195px; --sec-bot: 104px; } }
@media (max-width: 640px) { :root { --pad: 20px; --sec-top: 156px; --sec-top-s: 144px; --sec-bot: 80px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
html { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .4s, color .4s;
}
h1, h2, h3, p { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
img { display: block; max-width: 100%; }
ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- theme transition ---------- */
.theme-wipe {
  position: fixed;
  z-index: 300;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.theme-wipe::before,
.theme-wipe::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: #090a0d;
  will-change: transform;
}
.theme-wipe::before { top: 0; transform: translateY(-101%); }
.theme-wipe::after { bottom: 0; transform: translateY(101%); }
.theme-wipe.is-closing,
.theme-wipe.is-opening { visibility: visible; }
.theme-wipe.is-closing::before,
.theme-wipe.is-closing::after { transform: translateY(0); transition: transform .42s cubic-bezier(.76, 0, .24, 1); }
.theme-wipe.is-opening::before { transform: translateY(-101%); transition: transform .48s cubic-bezier(.76, 0, .24, 1); }
.theme-wipe.is-opening::after { transform: translateY(101%); transition: transform .48s cubic-bezier(.76, 0, .24, 1); }
/* arriving from another page: the curtain is shut from the very first frame */
html.is-arriving .theme-wipe { visibility: visible; }
html.is-arriving .theme-wipe::before, html.is-arriving .theme-wipe::after { transform: translateY(0); transition: none; }
@media (prefers-reduced-motion: reduce) { .theme-wipe { display: none; } }

/* ---------- custom page scrollbar ---------- */
.scroll-ui {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 6px;
  bottom: 0;
  width: 6px;
  pointer-events: none;
}
.scroll-ui__rail {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgb(var(--fg) / .08);
  pointer-events: auto;
  cursor: pointer;
}
.scroll-ui__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  min-height: 58px;
  border-radius: 999px;
  background: var(--accent);
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform, height;
}
.scroll-ui__thumb:active { cursor: grabbing; }
[data-theme="light"] .scroll-ui__rail { background: rgb(11 31 79 / .1); }
@media (max-width: 900px) {
  .scroll-ui { top: 0; right: 3px; bottom: 0; width: 4px; }
  .scroll-ui__thumb { width: 4px; min-height: 48px; }
}
@media (hover: none) and (pointer: coarse) {
  .scroll-ui { opacity: .7; }
}

.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.w460 { max-width: 460px; } .w432 { max-width: 432px; } .w480 { max-width: 480px; } .w360 { max-width: 360px; } .w900 { max-width: calc(900px + var(--pad) * 2); }
.c2 { color: var(--text-2); }
.w { color: var(--text); }

/* ---------- icons (mask, colour = currentColor) ---------- */
.i { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i-arrow { --m: url(../assets/icons/arrow-right.svg); width: 24px; height: 24px; }
.i-link { --m: url(../assets/icons/link-arrow.svg); color: var(--text-accent); }
.i-chevron { --m: url(../assets/icons/chevron-down.svg); width: 18px; height: 18px; }
.i-check { --m: url(../assets/icons/check.svg); }
.i-cross { --m: url(../assets/icons/cross.svg); width: 22.5px; height: 22.5px; }
.i-arrow-up { --m: url(../assets/icons/arrow-up.svg); }
.i-arrow-left { --m: url(../assets/icons/arrow-left.svg); width: 22px; height: 22px; }
.i-up-right { --m: url(../assets/icons/arrow-up-right.svg); }
.i-plus { --m: url(../assets/icons/plus.svg); width: 22px; height: 22px; color: var(--text-accent); }
.i-select { --m: url(../assets/icons/select-chevron.svg); }
.i-menu-arrow { --m: url(../assets/icons/menu-arrow.svg); width: 24px; height: 24px; }
.i-phone { width: 16px; height: 16px; background: url(../assets/icons/phone.svg) center / contain no-repeat; -webkit-mask: none; mask: none; }
.i-phone-solid { --m: url(../assets/icons/phone.svg); width: 18px; height: 18px; }
.flag { width: 16px; height: 11px; flex: none; display: inline-block; }
.flag--ua { background: linear-gradient(#0057b7 50%, #ffd700 50%); }

/* ---------- type ---------- */
.h2 { font-size: clamp(32px, 3.9vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.h2--56 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.1; letter-spacing: -.03em; }
.h2--600 { max-width: 780px; line-height: 1.12; }
.h-50 { font-size: clamp(30px, 3.1vw, 44px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.h-44 { font-size: clamp(30px, 3.05vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.h-40 { font-size: clamp(28px, 2.78vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.t-34 { font-size: clamp(26px, 2.36vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.t-28 { font-size: clamp(22px, 1.95vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.t-24 { font-size: clamp(20px, 1.67vw, 24px); font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.t-20 { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.t-18 { font-size: 18px; line-height: 1.55; color: var(--text-2); }
.t-16 { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.t-15 { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.t-14 { font-size: 14px; } .t-13 { font-size: 13px; }

/* ---------- section scaffolding ---------- */
.sec { padding-top: var(--sec-top); padding-bottom: var(--sec-bot); display: flex; flex-direction: column; gap: 112px; }
.sec--180 { padding-top: var(--sec-top-s); }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.head .h2 { flex: 1 1 auto; min-width: 0; max-width: 900px; }
.head__p { width: 380px; flex: none; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.head__p--360 { width: 360px; }
.head__sub { margin-top: 20px; font-size: 18px; color: var(--text-2); }
.grid-lines { border-top: 1px solid var(--line); }
.gap200 { height: var(--sec-top); }
.label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.label--w { color: var(--text); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--gray { background: var(--muted); }
.dot--lime { background: var(--accent); box-shadow: 0 0 10px rgb(204 255 0 / .7); }
.tag { display: inline-flex; padding: 4px 8px; font-size: 11px; font-weight: 700; line-height: 1.2; background: rgb(var(--fg) / .1); color: var(--text); transition: background .3s, color .3s; }
.tag--lime, .step.is-on .tag { background: var(--accent); color: var(--on-accent); }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; font-size: 16px; font-weight: 500; line-height: 1.25; white-space: nowrap; transition: box-shadow .3s, background .3s, transform .2s; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--text); color: var(--inverse); }
.btn--primary:hover { box-shadow: 0 0 28px rgb(var(--fg) / .45); }
.btn--ghost { padding: 14px 18px; }
.btn--ghost .i { transition: transform .3s; }
.btn--ghost:hover .i { transform: translateY(3px); }
.pulse-soft { animation: pulseSoft 2.8s ease-in-out infinite; }
@keyframes pulseSoft { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--fg) / .0); } 50% { box-shadow: 0 0 30px 0 rgb(var(--fg) / .28); } }

.btn-lime { display: inline-flex; align-items: center; gap: 24px; padding-left: 24px; background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 600; white-space: nowrap; transition: box-shadow .35s, transform .2s; }
.btn-lime:active { transform: scale(.985); }
.btn-lime--glow { box-shadow: 0 8px 30px rgb(204 255 0 / .35); animation: pulseLime 2.6s ease-in-out infinite; }
.btn-lime:hover { box-shadow: 0 10px 40px rgb(204 255 0 / .55); }
.btn-lime--full { width: 100%; justify-content: space-between; font-size: 17px; }
.btn-lime__box { position: relative; width: 56px; height: 56px; flex: none; border-left: 1px solid rgb(0 0 0 / .18); overflow: hidden; }
.btn-lime__box .i { position: absolute; left: 15px; top: 16px; transition: transform .45s var(--ease); }
.btn-lime__box .i + .i { left: -29px; }
.btn-lime:hover .btn-lime__box .i { transform: translateX(44px); }
@keyframes pulseLime { 0%, 100% { box-shadow: 0 8px 30px rgb(204 255 0 / .3); } 50% { box-shadow: 0 8px 44px rgb(204 255 0 / .6); } }

/* outlined button with a boxed down arrow; on hover the arrow drops out and a new one comes from the top */
.btn-box { display: inline-flex; align-items: stretch; height: 48px; border: 1px solid var(--line-3); font-size: 16px; font-weight: 500; white-space: nowrap; transition: border-color .3s, transform .2s; }
.btn-box:active { transform: scale(.98); }
.btn-box > span:first-child { flex: 1; display: flex; align-items: center; padding: 0 20px; }
.btn-box__ic { position: relative; width: 46px; flex: none; border-left: 1px solid var(--line-3); overflow: hidden; transition: background .3s, color .3s, border-color .3s; }
.btn-box__ic .i { position: absolute; left: 11px; top: 11px; rotate: 90deg; transition: translate .45s var(--ease); }
.btn-box__ic .i + .i { top: -35px; }
.btn-box:hover { border-color: rgb(var(--fg) / .4); }
.btn-box:hover .btn-box__ic { background: var(--accent); color: var(--on-accent); border-left-color: var(--accent); }
.btn-box:hover .btn-box__ic .i { translate: 0 46px; }
.btn-white { display: inline-flex; align-items: center; gap: 24px; padding-left: 24px; background: var(--text); color: var(--inverse); font-weight: 600; white-space: nowrap; transition: box-shadow .3s; }
.btn-white__box { width: 56px; height: 56px; display: grid; place-items: center; border-left: 1px solid var(--muted); }
.btn-white__box .i { transition: transform .35s var(--ease); }
.btn-white:hover { box-shadow: 0 0 30px rgb(var(--fg) / .35); }
.btn-white:hover .btn-white__box .i { transform: translateX(4px); }

.link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; white-space: nowrap; align-self: flex-start; }
.link .i { transition: transform .3s var(--ease); }
.link:hover .i { transform: translateX(4px); }
.link--18 { font-size: 18px; }
.link--15 { font-size: 15px; }
.sq { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-2); transition: background .25s, color .25s, border-color .25s; flex: none; }
.sq:hover { border-color: var(--text); }
.sq--fill { background: var(--text); color: var(--inverse); border-color: var(--text); }

/* ---------- header ---------- */
.hdr { position: fixed; z-index: 50; top: 12px; left: 32px; right: 32px; height: 62px; display: flex; align-items: center; gap: 32px; padding: 9px 9px 9px 16px; border: 1px solid var(--hdr-border); background: var(--hdr-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 20px var(--hdr-shadow), inset 0 1px 0 var(--hdr-hl); transition: transform .45s var(--ease), background .4s, border-color .4s; }
.hdr.is-hidden { transform: translateY(-120%); }
.hdr__brand { display: flex; align-items: center; gap: 10px; flex: none; }
.logo { height: 30px; width: auto; }
.hdr .logo { height: 28px; }
[data-theme="dark"] .logo--light, [data-theme="light"] .logo--dark { display: none; }
.hdr__div { width: 2px; height: 18px; border-radius: 1px; background: rgb(var(--fg) / .3); }
.hdr__sub { font-size: 14px; font-weight: 500; white-space: nowrap; }
.hdr__tag { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.tel { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; background: rgb(var(--fg) / .08); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .25s; }
.tel:hover { background: rgb(var(--fg) / .14); }
.tel-ico { display: none; width: 44px; height: 44px; place-items: center; background: var(--accent); color: var(--on-accent); }
.lang { position: relative; display: flex; width: 132px; height: 44px; padding: 3px; background: rgb(var(--fg) / .06); border: 1px solid var(--line-2); }
.lang__thumb { position: absolute; top: 3px; left: 3px; width: 62px; height: 36px; background: var(--accent); box-shadow: 0 6px 16px rgb(204 255 0 / .45); transition: transform .35s var(--ease); }
.lang[data-on="en"] .lang__thumb { transform: translateX(62px); }
.lang__opt { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: rgb(var(--fg) / .55); transition: color .3s; }
.lang__opt.is-on { color: var(--on-accent); }
.theme { width: 48px; height: 48px; display: grid; place-items: center; background: rgb(var(--fg) / .06); border: 1px solid var(--line-2); transition: background .25s; }
.theme:hover { background: rgb(var(--fg) / .12); }
.theme svg { width: 28px; height: 28px; overflow: visible; }
.theme__icon { color: var(--accent); }
.theme__rays { transform-origin: 14px 14px; }
.theme__rays path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; opacity: .9; transition: opacity .35s, transform .35s; }
.theme__glass { fill: rgb(204 255 0 / .18); stroke: currentColor; stroke-width: 1.7; transition: fill .35s, filter .35s, stroke .35s; }
.theme__filament, .theme__socket { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .theme__glass { fill: rgb(204 255 0 / .32); filter: drop-shadow(0 0 5px rgb(204 255 0 / .75)); }
[data-theme="light"] .theme__icon { color: #0b1f4f; }
[data-theme="light"] .theme__rays path { opacity: .32; }
[data-theme="light"] .theme__glass { fill: rgb(11 31 79 / .06); filter: none; }
.theme.is-switching .theme__icon { animation: bulbSwitch .55s var(--ease); }
.theme.is-switching .theme__rays { animation: bulbRays .55s ease-out; }
@keyframes bulbSwitch { 0% { transform: scale(1) rotate(0); } 38% { transform: scale(.72) rotate(-9deg); } 72% { transform: scale(1.12) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes bulbRays { 0%, 35% { opacity: .15; transform: scale(.75) rotate(-18deg); } 70% { opacity: 1; transform: scale(1.18) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.pill-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pulse { animation: pulseRing 2.4s ease-out infinite; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgb(204 255 0 / .55); } 70%, 100% { box-shadow: 0 0 0 12px rgb(204 255 0 / 0); } }
.menu-btn { height: 44px; padding: 0 16px 0 20px; display: inline-flex; align-items: center; background: rgb(var(--fg) / .06); border: 1px solid var(--line-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .25s; }
.menu-btn:hover { background: rgb(var(--fg) / .12); }

/* menu */
.menu { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.menu__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .55); opacity: 0; transition: opacity .4s; }
/* full-screen panel: slides down from the top, links and contacts fade in one by one */
.menu__panel { position: absolute; inset: 0; height: 100vh; height: 100dvh; padding: 12px var(--pad) 48px; display: flex; flex-direction: column; overflow: hidden auto; background: var(--raised); transform: translateY(-100%); transition: transform .65s var(--ease); }
.menu.is-open { pointer-events: auto; }
.menu.is-open .menu__backdrop { opacity: 1; }
.menu.is-open .menu__panel { transform: none; }
.menu__top { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.menu__brand .logo { height: 50px; }
/* close sits exactly over the header menu button (position set from JS) */
.menu-close { position: fixed; z-index: 2; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); background: rgb(var(--fg) / .06); color: var(--text); transition: background .25s; }
.menu-close:hover { background: rgb(var(--fg) / .12); }
.x { position: relative; width: 20px; height: 20px; }
.x::before, .x::after { content: ""; position: absolute; left: 1px; top: 9px; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.x::after { transform: rotate(-45deg); }
.menu__body { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 96px; align-items: end; padding-top: 40px; }
.menu__links { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.menu__links a { display: flex; align-items: center; gap: 28px; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-size: clamp(28px, 3.3vw, 50px); line-height: 1.05; white-space: nowrap; opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .25s, padding .35s var(--ease); }
.menu__links a .i { margin-left: auto; width: 30px; height: 30px; opacity: .45; transition: transform .3s var(--ease), opacity .3s; }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
/* the slide on hover only with a mouse: on phones :hover sticks after a tap and the slide jammed the menu */
@media (hover: hover) and (pointer: fine) {
  .menu__links a:hover { color: var(--text-accent); padding-left: 14px; }
  .menu__links a:hover .i { transform: translateX(6px); opacity: 1; }
}
/* touch: a short press feedback without moving the line */
.menu__links a { -webkit-tap-highlight-color: transparent; }
.menu__links a:active { color: var(--text-accent); transition-duration: .08s; }
.menu__links a:active .i { transform: translateX(6px); opacity: 1; transition-duration: .08s; }
.menu__side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 8px; opacity: 0; transform: translateY(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.menu.is-open .menu__side { opacity: 1; transform: none; transition-delay: .45s; }
.menu__label { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu__tel { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.01em; }
.menu__mail { font-size: 17px; color: var(--text-2); }
.menu__tel:hover, .menu__mail:hover { color: var(--text-accent); }
.menu__hours { font-size: 14px; color: var(--muted); }
.menu__side .pill-cta { margin-top: 18px; }
.menu__prefs { display: none; gap: 8px; }
/* big faint logo mark with a glow, bottom right */
.menu__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.menu__mark { position: absolute; right: -6vw; bottom: -10vw; width: 38vw; max-width: 560px; opacity: .07; pointer-events: none; filter: drop-shadow(0 0 60px var(--glow)); }

/* ---------- 01 hero ---------- */
.hero { position: relative; min-height: 0; overflow: clip; display: flex; flex-direction: column; align-items: center; padding-bottom: 88px; }
.hero__net { position: absolute; inset: 0; width: 100%; height: 72%; pointer-events: none; }
.hero__ui { display: none; }
.hu { position: absolute; background: rgb(var(--fg) / .05); }
.hu--frame { inset: 0; border-radius: 20px; background: rgb(var(--fg) / .04); }
.hu--side { left: 2%; top: 4.8%; width: 19%; height: 90.5%; border-radius: 14px; }
.hu--kpi { top: 18%; width: 17.6%; height: 21.4%; border-radius: 12px; animation: kpi 5s ease-in-out infinite; }
.hu--kpi:nth-of-type(odd) { animation-delay: -2.5s; }
@keyframes kpi { 50% { background: rgb(var(--fg) / .09); } }
.hu--chart { left: 23%; top: 43.8%; width: 50%; height: 50%; border-radius: 12px; display: flex; align-items: flex-end; gap: 1.8%; padding: 0 2.6% 6%; }
.hu--chart span { flex: 1; height: 40%; background: rgb(var(--fg) / .1); transform-origin: bottom; animation: bar 3.2s ease-in-out infinite; }
.hu--chart span:nth-child(3n+2) { height: 70%; animation-delay: -.8s; }
.hu--chart span:nth-child(3n) { height: 100%; animation-delay: -1.6s; }
@keyframes bar { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.hu--list { left: 74.6%; top: 43.8%; width: 23.6%; height: 50%; border-radius: 12px; display: flex; flex-direction: column; gap: 6%; padding: 6% 6.8%; }
.hu--list span { height: 21%; background: rgb(var(--fg) / .08); }
.hero__vignette { display: none; }
.hero__content { position: relative; z-index: 2; margin-top: 150px; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0 var(--pad); }
.announce { display: inline-flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--line-2); background: rgb(var(--fg) / .04); transition: border-color .3s, background .3s; }
.announce:hover { border-color: rgb(var(--fg) / .3); background: rgb(var(--fg) / .07); }
.announce__tag { padding: 3px 9px; background: rgb(var(--fg) / .1); font-size: 12px; font-weight: 600; }
.announce__text { font-size: 14px; font-weight: 500; white-space: nowrap; }
.announce__text b { font-weight: 500; color: var(--text-accent); }
.announce__btn { width: 32px; height: 32px; display: grid; place-items: center; background: rgb(var(--fg) / .1); }
.announce__btn .i { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.announce:hover .announce__btn .i { transform: translateX(3px); }
.hero__h1 { margin-top: 30px; font-size: 20px; font-weight: 500; color: var(--text-2); }
.hero__content > .hero__h1:first-child { margin-top: 0; }
.hero__tagline { margin-top: 14px; font-size: clamp(46px, 5.84vw, 84px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.hero__line2 { white-space: nowrap; }
.caret { display: inline-block; width: .06em; height: .82em; margin-left: .06em; vertical-align: -.06em; background: var(--accent); box-shadow: 0 0 16px rgb(204 255 0 / .8); animation: blink 1s steps(1) infinite; }
.caret.is-done { animation: blink 1s steps(1) 3 forwards, fadeOut .4s 3s forwards; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; width: 0; margin: 0; } }
.hero__lead { margin-top: 22px; max-width: 640px; font-size: 20px; line-height: 1.5; color: var(--text-2); }
.hero__btns { margin-top: 34px; display: flex; gap: 12px; }
.hero__stage { position: relative; align-self: stretch; display: flex; flex-direction: column; }
.hero__pin { position: relative; display: flex; flex-direction: column; }
.hero__pin .hero__net { height: 100%; }
.hero__win { position: relative; z-index: 2; width: calc(100% - 64px); margin: 68px auto 0; transform-origin: 0 0; }
/* fully open window: gradient outline + soft glow behind it (lime, brand blue, cyan); static, so it costs nothing per frame */
.hero__win::before, .hero__win::after, .chat-win::before, .chat-win::after { content: ""; position: absolute; pointer-events: none; border-radius: 13px; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s 1s; background: conic-gradient(from 200deg, #ccff00, #2a5bff 30%, #0db0e0 55%, #7b5cff 75%, #ccff00); }
.hero__win::before, .chat-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); }
.hero__win::after, .chat-win::after { inset: -28px; z-index: -1; border-radius: 40px; filter: blur(56px); }
.hero__win.is-open::before, .hero__win.is-open::after, .chat-win::before, .chat-win::after { visibility: visible; transition: opacity 1s var(--ease); }
.hero__win.is-open::before, .chat-win::before { opacity: 1; }
.hero__win.is-open::after, .chat-win::after { opacity: .55; }
/* light theme: lime fades on white, so a deeper, more saturated gradient, a thicker outline and a stronger glow */
[data-theme="light"] .hero__win::before, [data-theme="light"] .hero__win::after, [data-theme="light"] .chat-win::before, [data-theme="light"] .chat-win::after { background: conic-gradient(from 200deg, #8fc400, #2a5bff 30%, #0aa5d8 55%, #6a4dff 75%, #8fc400); }
[data-theme="light"] .hero__win::before, [data-theme="light"] .chat-win::before { inset: -2.5px; padding: 2.5px; border-radius: 14px; }
[data-theme="light"] .hero__win.is-open::after, [data-theme="light"] .chat-win::after { opacity: .6; }
.mac { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--mac-line); background: var(--mac-body); box-shadow: 0 60px 120px -40px rgb(0 0 0 / .7), 0 0 0 1px rgb(0 0 0 / .2), 0 0 80px -20px rgb(204 255 0 / .12); }
.mac__bar { position: relative; height: 40px; display: flex; align-items: center; padding: 0 16px; background: var(--mac-bar); border-bottom: 1px solid var(--mac-line); }
.mac__dots { display: flex; gap: 8px; }
.mac__dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .2); }
.mac__dots i:nth-child(2) { background: #febc2e; }
.mac__dots i:nth-child(3) { background: #28c840; }
.hero__demo-frame { position: relative; display: block; width: 100%; aspect-ratio: 1.6 / 1; border: 0; background: transparent; color-scheme: normal; }
.presence { position: absolute; z-index: 2; top: 700px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; background: rgb(var(--fg) / .08); font-size: 13px; font-weight: 500; white-space: nowrap; }
.presence[data-reveal] { transform: translate(-50%, 24px); }
.presence[data-reveal].in { transform: translateX(-50%); }
.presence b { font-weight: 500; display: inline-block; min-width: 1.2em; text-align: right; }
.presence__dot { position: relative; width: 18px; height: 18px; display: grid; place-items: center; }
.presence__dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.presence__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid var(--accent); animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
/* client names: full-width band, label cell on the left, running names on the right */
.trusted { position: relative; z-index: 2; align-self: stretch; display: grid; grid-template-columns: calc(var(--pad) + 300px) 1fr; align-items: stretch; margin-top: 120px; border-block: 1px solid var(--line); background: var(--panel); }
.trusted__label { display: flex; align-items: center; padding: 36px 40px 36px var(--pad); border-right: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--text-2); }
.marquee { min-width: 0; display: flex; align-items: center; padding: 40px 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 72px; width: max-content; animation: marquee 48s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 40s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-size: 30px; font-weight: 600; letter-spacing: -.025em; white-space: nowrap; color: rgb(var(--fg) / .55); transition: color .3s; }
.marquee span:hover { color: var(--text); }
@keyframes marquee { to { transform: translateX(calc(-50% - 32px)); } }

/* ---------- lead reveal (words) ---------- */
.lead-reveal { font-weight: 500; color: var(--muted); }
.lead-reveal--28 { font-size: clamp(22px, 1.95vw, 28px); line-height: 1.4; letter-spacing: -.01em; max-width: calc(760px + var(--pad) * 2); }
.lead-reveal--40 { font-size: clamp(26px, 2.78vw, 40px); line-height: 1.25; letter-spacing: -.025em; max-width: calc(980px + var(--pad) * 2); }
.lead-reveal .wd { color: rgb(var(--fg) / .14); transition: color .5s; }
.lead-reveal .wd.on { color: var(--muted); }
.lead-reveal .wd.hi.on { color: var(--text); }

/* ---------- 02 about ---------- */
.about { gap: 120px; }
.panel { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about__top { display: grid; grid-template-columns: 680fr 760fr; }
.steps { padding: 48px 48px 48px var(--pad); border-right: 1px solid var(--line); }
.steps .h-44 { max-width: 460px; }
.steps__list { margin-top: 48px; }
.step { display: block; width: 100%; padding: 22px 0; border-top: 1px solid var(--line); }
.step__row { display: flex; align-items: center; gap: 14px; }
.step__title { font-size: clamp(22px, 1.95vw, 28px); font-weight: 500; letter-spacing: -.02em; color: rgb(var(--fg) / .62); transition: color .3s; }
.step:hover .step__title, .step.is-on .step__title { color: var(--text); }
.step__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.step__text { overflow: hidden; max-width: 440px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.step.is-on .step__body { grid-template-rows: 1fr; }
.step.is-on .step__text { padding-top: 14px; }
.step__bar { display: none; height: 2px; margin-top: 14px; background: var(--line); }
.step__bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.step.is-on .step__bar { display: block; }
.step.is-on .step__bar span { animation: stepbar var(--dur, 5s) linear forwards; }
@keyframes stepbar { to { width: 100%; } }

.diagram { position: relative; min-height: 564px; overflow: hidden; container-type: size; }
/* the drawing keeps its own proportions, sits in the middle with equal air above and below (its content is 3% lower than its box, so lift it) */
.diagram__in { --w: min(100cqw - 48px, (100cqh - 128px) * 1.3475); position: absolute; left: 50%; top: 50%; width: var(--w); height: calc(var(--w) / 1.3475); translate: -50% -53%; }
.diagram__dots { position: absolute; inset: 0; background: radial-gradient(circle, rgb(var(--fg) / .12) 1px, transparent 1.4px) 0 0 / 32px 32px; -webkit-mask: radial-gradient(circle at 50% 53%, #000 0, #000 30%, transparent 55%); mask: radial-gradient(circle at 50% 53%, #000 0, #000 30%, transparent 55%); }
.diagram__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.d-ring { fill: none; stroke: var(--line); }
.d-glow { transform-origin: 379px 300.5px; opacity: .55; transition: opacity .6s; animation: glow 3.4s ease-in-out infinite; }
[data-theme="light"] .d-glow { opacity: .35; }
@keyframes glow { 50% { transform: scale(1.12); } }
.diagram[data-step="1"] .d-glow { opacity: 1; }
.d-links path, .d-int path { fill: none; stroke: rgb(var(--fg) / .22); stroke-width: 1.5; transition: stroke .5s; }
.d-int path { stroke-width: 2; stroke: rgb(var(--fg) / .3); }
.d-flow path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 200; stroke-dashoffset: 210; opacity: 0; transition: opacity .5s; }
.diagram[data-step="3"] .d-flow path { opacity: 1; animation: flow 1.8s linear infinite; }
.diagram[data-step="3"] .d-flow path:nth-child(2n) { animation-delay: -.9s; }
.diagram[data-step="3"] .d-int path, .diagram[data-step="3"] .d-links path { stroke: rgb(204 255 0 / .35); }
[data-theme="light"] .d-flow path { stroke: #0b1f4f; }
[data-theme="light"] .diagram[data-step="3"] .d-int path, [data-theme="light"] .diagram[data-step="3"] .d-links path { stroke: rgb(11 31 79 / .3); }
@keyframes flow { to { stroke-dashoffset: 0; } }
.d-nodes circle { fill: var(--elevated); stroke: rgb(var(--fg) / .3); stroke-width: 1; transition: fill .5s, stroke .5s; }
.diagram[data-step="2"] .d-nodes circle { stroke: var(--accent); fill: rgb(204 255 0 / .12); animation: nodePop 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
[data-theme="light"] .diagram[data-step="2"] .d-nodes circle { stroke: #0b1f4f; fill: rgb(11 31 79 / .08); }
.diagram[data-step="2"] .d-nodes circle:nth-child(2) { animation-delay: -.5s; } .diagram[data-step="2"] .d-nodes circle:nth-child(3) { animation-delay: -1s; } .diagram[data-step="2"] .d-nodes circle:nth-child(4) { animation-delay: -1.5s; }
@keyframes nodePop { 50% { transform: scale(1.1); } }
.d-hex { fill: var(--raised); stroke: #ccff00; stroke-width: 4; stroke-linejoin: round; }
[data-theme="light"] .d-hex { stroke: #0b1f4f; }
.chip-mod { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; background: var(--bg); border: 1px solid var(--line-2); font-size: 12px; font-weight: 500; white-space: nowrap; transition: border-color .4s, color .4s; }
.chip-mod::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--fg) / .45); transition: background .4s, box-shadow .4s; }
.diagram[data-step="2"] .chip-mod, .diagram[data-step="3"] .chip-mod { border-color: rgb(204 255 0 / .45); }
.diagram[data-step="2"] .chip-mod::before, .diagram[data-step="3"] .chip-mod::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
[data-theme="light"] .diagram[data-step="2"] .chip-mod, [data-theme="light"] .diagram[data-step="3"] .chip-mod { border-color: rgb(11 31 79 / .4); }
[data-theme="light"] .diagram[data-step="2"] .chip-mod::before, [data-theme="light"] .diagram[data-step="3"] .chip-mod::before { background: #0b1f4f; box-shadow: none; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 72px 48px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.stat:first-child { padding-left: var(--pad); }
.stat:last-child { padding-right: var(--pad); border-right: 0; }
.stat__n { font-size: clamp(44px, 4.45vw, 64px); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 15px; color: var(--text-2); }

/* ---------- 03 problem ---------- */
.problem { gap: 128px; }
.zig__row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.zig__row > * { padding: 80px var(--pad); }
.zig__row > :first-child { border-right: 1px solid var(--line); }
.zig__cell { display: flex; flex-direction: column; gap: 16px; }
.zig__cell .t-28, .zig__cell .t-16 { max-width: 440px; }
.zig__row--rev .zig__cell { padding-left: 120px; padding-right: var(--pad); }
.zig__row:not(.zig__row--rev) .zig__cell { padding-right: 120px; }
.zig__num { display: flex; align-items: center; }
.zig__row--rev .zig__num { justify-content: flex-end; padding-right: 120px; }
.zig__row:not(.zig__row--rev) .zig__num { padding-left: 120px; }
.zig__num span { font-size: clamp(96px, 9.7vw, 140px); font-weight: 500; line-height: 1; letter-spacing: -.06em; color: var(--ghost-num); -webkit-text-stroke: 1px transparent; transition: color .8s, -webkit-text-stroke-color .8s; }
.zig__row.in .zig__num span { -webkit-text-stroke-color: rgb(var(--fg) / .14); }
.ico-box { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.ico-box--danger { background: rgb(255 107 107 / .15); color: var(--danger); }
.zig__cell.in .ico-box { animation: pop .6s var(--ease) .2s both; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } }
.cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 44px var(--pad); background: var(--panel); border-bottom: 1px solid var(--line); }
.cta-strip p { max-width: 700px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.015em; color: var(--text-2); }

/* ---------- 04 solution ---------- */
/* chaos -> system: six benefits */
.bnf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)) auto; }
.bnf__cell { display: flex; flex-direction: column; gap: 16px; padding: 64px 48px 72px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bnf__cell:nth-child(3n+1) { padding-left: var(--pad); }
.bnf__cell:nth-child(3n) { padding-right: var(--pad); border-right: 0; }
.bnf__cell .t-28 { max-width: 340px; margin-top: 12px; }
.bnf__cell .t-16 { max-width: 380px; }
.bnf__cell[data-reveal] .box-check { transform: scale(0); transition: transform .5s var(--ease) .3s; }
.bnf__cell.in .box-check { transform: none; }
.bnf__cta { grid-column: 1 / -1; }
.steps__lead { margin-top: 16px; max-width: 420px; }
.mod-links { display: flex; flex-wrap: wrap; gap: 16px 48px; }
.how__cta { display: flex; }
.demo__h p { margin-top: 20px; max-width: 460px; }
.solution { gap: 120px; }
.cmp__row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.cmp__cell { display: flex; align-items: flex-start; gap: 18px; padding: 56px 120px 56px var(--pad); }
.cmp__cell + .cmp__cell { padding: 56px var(--pad) 56px 120px; }
.cmp__cell:first-child { border-right: 1px solid var(--line); }
.cmp__head .cmp__cell { align-items: center; gap: 10px; padding-top: 22px; padding-bottom: 22px; }
.cmp__cell p { max-width: 420px; font-size: clamp(17px, 1.32vw, 19px); line-height: 1.45; color: var(--text-2); }
.cmp__cell--ok p { color: var(--text); font-weight: 500; }
.box-minus { position: relative; width: 32px; height: 32px; flex: none; border: 1px solid var(--line-2); }
.box-minus::before { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 2.5px; margin-top: -1.25px; background: var(--muted); }
.box-check { width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.cmp__row[data-reveal] { transform: none; opacity: 1; }
.cmp__row[data-reveal] .cmp__cell:first-child p { transition: color .6s .1s, opacity .6s; }
.cmp__row[data-reveal] .box-check { transform: scale(0); transition: transform .5s var(--ease) .35s; }
.cmp__row[data-reveal] .cmp__cell--ok p { opacity: 0; transform: translateX(-10px); transition: opacity .6s .45s, transform .6s var(--ease) .45s; }
.cmp__row.in .box-check { transform: none; }
.cmp__row.in .cmp__cell--ok p { opacity: 1; transform: none; }
.cmp__row.in .cmp__cell:first-child p { text-decoration: line-through; text-decoration-color: rgb(var(--fg) / .25); text-decoration-thickness: 1px; }

/* ---------- accordion (modules + faq) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); transition: background .35s; }
.acc__item:hover, .acc__item.is-open { background: var(--panel); }
.acc__btn { width: 100%; display: flex; align-items: center; gap: 24px; }
.pm { position: relative; width: 48px; height: 48px; flex: none; border: 1px solid var(--line-3); transition: background .3s, border-color .3s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background: var(--text); transition: transform .35s var(--ease), background .3s; }
.pm::after { transform: rotate(90deg); }
.acc__item.is-open .pm { background: var(--accent); border-color: var(--accent); }
.acc__item.is-open .pm::before, .acc__item.is-open .pm::after { background: var(--on-accent); }
.acc__item.is-open .pm::after { transform: rotate(0); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }

.acc--mod .acc__btn { padding: 44px var(--pad); transition: padding .4s var(--ease); }
.acc--mod .acc__item.is-open .acc__btn { padding-top: 56px; }
.acc--mod .acc__title { flex: 1; font-size: clamp(28px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; transition: transform .4s var(--ease); }
.acc--mod .acc__btn:hover .acc__title { transform: translateX(8px); }
.acc--mod .acc__meta { font-size: 16px; color: var(--text-2); white-space: nowrap; }
.mod { display: grid; grid-template-columns: 440px 1fr; gap: 64px; padding: 16px var(--pad) 64px; }
.mod__l { display: flex; flex-direction: column; gap: 24px; }
.mod__l p { font-size: 18px; line-height: 1.55; color: var(--text-2); }
.mod__subs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); align-self: start; }
.mod__subs span { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease); }
.acc__item.is-open .mod__subs span { opacity: 1; transform: none; }
.modules .link--18 { margin-top: 0; }

.acc--faq { border-top: 0; }
.acc--faq .acc__btn { gap: 20px; padding: 44px var(--pad) 44px 64px; }
.acc--faq .acc__num { font-size: 13px; font-weight: 500; color: var(--muted); }
.acc--faq .acc__title { flex: 1; font-size: clamp(18px, 1.53vw, 22px); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.acc--faq .pm { width: 40px; height: 40px; }
.acc--faq .pm::before, .acc--faq .pm::after { width: 20px; margin-left: -10px; }
.acc--faq .acc__item.is-open .acc__btn { padding-bottom: 14px; }
.acc--faq .acc__btn { transition: padding .4s var(--ease); }
.acc--faq .acc__inner p { max-width: calc(560px + 88px + var(--pad)); padding: 0 var(--pad) 28px 88px; margin-top: 0; font-size: 17px; line-height: 1.55; color: var(--text-2); }

/* ---------- 06 AI ---------- */
.ai__top { display: grid; grid-template-columns: 520px 1fr; border-bottom: 1px solid var(--line); }
.roles { padding: 72px 48px 72px var(--pad); border-right: 1px solid var(--line); }
.role { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.role__bar { width: 3px; height: 22px; border-radius: 2px; background: transparent; transition: background .3s, box-shadow .3s; }
.role__t { flex: 1; font-size: clamp(18px, 1.53vw, 22px); font-weight: 500; letter-spacing: -.01em; color: rgb(var(--fg) / .62); transition: color .3s, transform .35s var(--ease); }
.role .i { width: 25px; height: 25px; color: var(--text-accent); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .35s var(--ease); --m: url(../assets/icons/arrow-right.svg); }
.role:hover .role__t { color: var(--text); transform: translateX(4px); }
.role.is-on .role__t { color: var(--text); }
.role.is-on .role__bar { background: var(--accent); box-shadow: 0 0 10px rgb(204 255 0 / .6); }
.role.is-on .i { opacity: 1; transform: none; }
.chat-area { position: relative; min-height: 672px; overflow: hidden; }
.chat-area__glow { position: absolute; left: 13%; top: 25%; width: 76%; height: 66%; background: radial-gradient(closest-side, rgb(42 91 255 / .25), transparent); filter: blur(40px); }
.chat-win { position: absolute; z-index: 1; left: max(40px, calc((100% - 720px) / 2)); top: 56px; width: min(720px, calc(100% - 80px)); height: 560px; }
/* AI chat drawn as the real product window, same look as the hero demo; light or dark with the page theme */
.chat { --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;
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--p-bg); color: var(--p-ink); font-family: Roboto, "Segoe UI", system-ui, Arial, sans-serif; }
[data-theme="light"] .chat { --p-bg: #fff; --p-ink: #1d2433; --p-soft: #405172; --p-line: #e3e7ee; --p-nav: #0b2d5b; --p-ai: #e4f3f6; --p-ai-line: #8fd0dc; --p-chip: #fafbfc; }
.pnav { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; background: var(--p-nav); color: #fff; font-size: 15px; font-weight: 700; }
.pnav__brand { display: flex; align-items: center; gap: 8px; }
.pnav__brand small { margin-left: 6px; font-size: 13px; font-weight: 400; opacity: .8; }
.pnav__ava { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; background: linear-gradient(135deg, #9aa6b8, #5d6b80); }
.chat__head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--p-line); }
.chat__name { flex: 1; font-size: 15px; font-weight: 700; }
.chat__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 16px 18px 12px; overflow: hidden; }
.cm { display: flex; gap: 12px; }
.cm__av { width: 36px; height: 36px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #5c8a6e; color: #fff; font-size: 12px; font-weight: 700; }
.cm--ai .cm__av { background: #0b2d5b; }
.cm__c { flex: 1; min-width: 0; }
.cm__who { font-size: 13px; font-weight: 700; }
.cm__who small { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--p-soft); }
.cm__txt { margin-top: 3px; font-size: 14px; line-height: 1.5; }
.pfile { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-chip); font-size: 12.5px; }
.pfile i { width: 24px; height: 28px; border-radius: 3px; display: grid; place-items: center; background: #f2a43a; color: #fff; font-size: 8.5px; font-style: normal; font-weight: 700; }
.pfile--xls i { background: #21a453; }
.pfile--pdf i { background: #e5484d; }
.pans { margin-top: 6px; padding: 12px 16px 14px; border-left: 3px solid var(--p-ai-line); background: var(--p-ai); font-size: 13.5px; line-height: 1.5; }
.pans__t { margin-bottom: 4px; font-weight: 700; }
.prow { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; }
.prow > .i, .prow > b { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #e0a100; font-size: 14px; line-height: 16px; text-align: center; }
.prow[data-c="d"] > .i { color: #e5484d; }
.prow[data-c="o"] > .i { color: #21a453; }
.pacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pact { padding: 6px 12px; border: 1px solid #2a5cc8; border-radius: 4px; background: #2a5cc8; color: #fff; font-size: 12px; font-weight: 600; }
.pact + .pact { background: transparent; color: var(--p-ink); border-color: var(--p-line); }
.ptyping { display: inline-flex; gap: 4px; margin-top: 8px; }
.ptyping span { width: 6px; height: 6px; border-radius: 50%; background: #8a63d2; animation: dots 1s ease-in-out infinite; }
.ptyping span:nth-child(2) { animation-delay: .15s; } .ptyping span:nth-child(3) { animation-delay: .3s; }
.chat__input { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 18px 16px; padding: 0 6px 0 14px; border: 1px solid var(--p-line); border-radius: 8px; transition: border-color .2s; }
.chat__input.is-focus { border-color: #2a5cc8; }
.chat__typed { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__typed.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: currentColor; animation: blink 1s steps(1) infinite; }
.chat__ph { color: var(--p-soft); }
.chat__send { width: 32px; height: 32px; flex: none; border-radius: 7px; display: grid; place-items: center; background: #2a5cc8; color: #fff; transition: transform .2s; }
.chat__send.is-hit { transform: scale(.85); }
.pcursor { position: absolute; z-index: 5; left: 0; top: 0; width: 24px; height: 24px; opacity: 0; pointer-events: none; transition: left .7s cubic-bezier(.45, 0, .2, 1), top .7s cubic-bezier(.45, 0, .2, 1), opacity .3s, transform .15s; }
.pcursor.show { opacity: 1; }
.pcursor.down { transform: scale(.85); }
@keyframes edge { 50% { opacity: .5; } }
.chat__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.chat__status span { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
@keyframes dots { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.pop-in { animation: popIn .45s var(--ease) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ai__bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.ai__cell { display: flex; flex-direction: column; gap: 12px; padding: 64px 48px; border-right: 1px solid var(--line); }
.ai__cell:first-child { padding-left: var(--pad); }
.ai__cell .t-15 { max-width: 340px; }
.ai__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 64px var(--pad) 64px 48px; background: var(--accent); color: var(--on-accent); font-size: clamp(18px, 1.53vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.ai__cta .i { width: 25px; height: 25px; transition: transform .35s var(--ease); }
.ai__cta:hover .i { transform: translateX(8px); }

/* ---------- 07 industries ---------- */
.bento { display: grid; grid-template-columns: calc(var(--pad) + 368px) minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bento__feat { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 64px 48px 64px var(--pad); border-right: 1px solid var(--line); background: linear-gradient(rgb(204 255 0 / .1), rgb(204 255 0 / 0)); }
[data-theme="light"] .bento__feat { background: linear-gradient(rgb(204 255 0 / .25), rgb(204 255 0 / 0)); }
.bento__feat .t-34 { max-width: 320px; } .bento__feat .t-16 { max-width: 300px; }
.bento__sp { flex: 1; min-height: 40px; }
.mini { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--bg); border: 1px solid rgb(204 255 0 / .4); }
[data-theme="light"] .mini { border-color: rgb(11 31 79 / .25); }
.mini__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.mini__row b { font-size: 20px; font-weight: 500; color: var(--text-accent); font-variant-numeric: tabular-nums; }
.mini__bar { height: 6px; background: rgb(var(--fg) / .1); }
.mini__bar span { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 10px rgb(204 255 0 / .6); transition: width 1.6s var(--ease); }
.mini.in .mini__bar span { width: 87%; }
.bento__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ind { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 80px 40px 88px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .35s; }
.ind:nth-child(3n) { border-right: 0; padding-right: var(--pad); }
.ind:nth-child(n+4) { border-bottom: 0; }
.ind .i { align-self: flex-end; color: var(--text-2); margin-bottom: 56px; transition: transform .35s var(--ease), color .3s; }
.ind h3 { font-size: clamp(20px, 1.67vw, 24px); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.ind p { font-size: 14px; color: var(--text-2); }
.ind:hover { background: var(--panel); }
.ind:hover .i { transform: translate(4px, -4px); color: var(--text-accent); }
.ind--own { background: var(--panel); }
.ind--own .i { align-self: flex-start; }
.ind--own:hover .i { transform: rotate(90deg); }

/* ---------- 08 tenders ---------- */
.tenders { display: grid; grid-template-columns: 660fr 780fr; }
.tenders__left { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 200px 64px 180px var(--pad); border-right: 1px solid var(--line); }
.tenders__left .h-50 { max-width: 520px; font-size: clamp(28px, 2.65vw, 38px); } .tenders__left .t-18 { max-width: 460px; }
.tsteps { width: 100%; border-top: 1px solid var(--line); }
.tsteps li { display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; cursor: default; }
.tsteps__b { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; transition: background .35s, border-color .35s, color .35s; }
.tsteps__hint { grid-column: 2; font-size: 14px; font-weight: 400; color: var(--text-2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .35s, margin .45s; }
.tsteps li.is-on .tsteps__b { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 14px rgb(204 255 0 / .5); }
.tsteps li.is-on .tsteps__hint { max-height: 64px; opacity: 1; margin-top: 4px; }
.tsteps li.is-done .tsteps__b { border-color: var(--text-accent); color: var(--text-accent); }
.tenders__right { min-width: 0; position: relative; min-height: 1038px; overflow: hidden; display: grid; place-items: center; }
.tenders__dots { position: absolute; inset: 0; background: radial-gradient(circle, rgb(var(--fg) / .1) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask: radial-gradient(ellipse at center, #000 20%, transparent 70%); mask: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.tenders__glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, rgb(204 255 0 / .18), transparent); filter: blur(30px); animation: glow 4s ease-in-out infinite; }
.tcard { position: relative; width: min(460px, calc(100vw - 40px)); padding: 24px 25px 26px; border-radius: 22px; background: var(--raised); border: 1px solid var(--line); }
.tcard__edge { position: absolute; inset: -2px; z-index: -1; border-radius: 24px; background: linear-gradient(150deg, rgb(204 255 0 / .9) 0%, rgb(255 255 255 / .04) 40%, rgb(42 91 255 / .9) 100%); filter: blur(8px); }
.tcard__id { font-size: 13px; color: var(--text-2); }
.tcard__title { margin-top: 4px; font-size: 20px; font-weight: 500; }
.tcard__ring { position: relative; display: flex; align-items: center; gap: 16px; margin: 22px 0; }
.tcard__ring svg { width: 88px; height: 88px; transform: rotate(-90deg); flex: none; }
.ring-bg { fill: none; stroke: rgb(var(--fg) / .08); stroke-width: 8; }
.ring-arc { fill: none; stroke: var(--accent); stroke-width: 8; stroke-dasharray: 238.76; stroke-dashoffset: 238.76; filter: drop-shadow(0 0 6px rgb(204 255 0 / .6)); }
.tcard__pct { position: absolute; left: 0; top: 0; width: 88px; height: 88px; display: grid; place-items: center; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tcard__s { font-size: 14px; color: var(--text-2); }
.tcard__d { font-size: 17px; font-weight: 500; }
.tcard__rows { display: flex; flex-direction: column; gap: 14px; }
.trow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: rgb(var(--fg) / .04); opacity: .35; transition: opacity .4s; }
.trow.is-on { opacity: 1; }
.trow__ic { position: relative; width: 32px; height: 32px; flex: none; display: grid; place-items: center; }
.trow__ic .i-check, .trow__ic .i-cross { width: 20px; height: 20px; }
.trow__ic .ex { font-style: normal; font-size: 13px; font-weight: 700; }
.trow__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trow__t b { font-size: 15px; font-weight: 500; }
.trow__t small { font-size: 13px; color: var(--text-2); }
.trow__tag { padding: 3px 8px; font-size: 11px; font-weight: 600; }
.trow[data-st="ok"] .trow__ic, .trow[data-st="ok"] .trow__tag { background: rgb(61 220 132 / .15); color: var(--ok); }
.trow[data-st="warn"] .trow__ic, .trow[data-st="warn"] .trow__tag { background: rgb(255 181 71 / .15); color: var(--warn); }
.trow[data-st="risk"] .trow__ic, .trow[data-st="risk"] .trow__tag { background: rgb(255 107 107 / .15); color: var(--danger); }
.trow .trow__tag, .trow .trow__ic > * { opacity: 0; transition: opacity .3s; }
.trow.is-on .trow__tag, .trow.is-on .trow__ic > * { opacity: 1; }
.trow.is-scan .trow__ic { background: rgb(var(--fg) / .06); }
.trow.is-scan .trow__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid rgb(var(--fg) / .2); border-top-color: var(--text-accent); animation: spin .7s linear infinite; }
.trow.is-scan { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.tcard__foot { margin-top: 20px; text-align: right; font-size: 14px; color: var(--text-accent); opacity: 0; transition: opacity .5s; }
.tcard.is-done .tcard__foot { opacity: 1; }

/* ---------- 09 security ---------- */
.sec-row { display: grid; border-bottom: 1px solid var(--line); }
/* all three illustrations share one scale: columns are sized from the drawings (672 and 432 wide at 300 high), not split by ratio */
.security { --ill-h: min(300px, calc((100vw - 2 * var(--pad) - 96px) * 300 / 1104)); }
.sec-row--a { grid-template-columns: calc(var(--pad) + 48px + var(--ill-h) * 2.24) minmax(0, 1fr); }
.sec-row--b { grid-template-columns: calc(var(--pad) + 48px + var(--ill-h) * 1.44) minmax(0, 1fr); }
.sec-cell { display: flex; flex-direction: column; gap: 12px; padding: 32px 48px 72px var(--pad); border-right: 1px solid var(--line); }
.sec-cell--r { padding: 32px var(--pad) 72px 48px; border-right: 0; }
.ill { height: var(--ill-h, 300px); margin-bottom: 10px; }
.ill svg { width: 100%; height: 100%; overflow: visible; }
.ill--matrix svg { width: calc(var(--ill-h, 300px) * 2.24); }
.ill--clean svg, .ill--cloud svg { width: calc(var(--ill-h, 300px) * 1.44); }
.tile__bg { fill: url(#tileGrad); }
.tile-a { stop-color: var(--tile-a); } .tile-b { stop-color: var(--tile-b); }
.tile__st { fill: none; stroke: var(--tile-st); stroke-width: 1.5; }
.tile__ic { fill: var(--tile-ic); }
.tile__ic-st { stroke: var(--tile-ic); }
.tile__hole { fill: var(--raised); }
.tile { filter: drop-shadow(0 0 15px var(--glow)); }
.sec-glow { fill: rgb(204 255 0 / .12); filter: blur(24px); animation: secglow 3s ease-in-out infinite; }
[data-theme="light"] .sec-glow { fill: rgb(204 255 0 / .3); }
@keyframes secglow { 50% { opacity: .5; } }
.m-lines path { fill: none; stroke: var(--line-2); stroke-width: 1.5; transition: stroke .4s; }
.m-lines path.is-on { stroke: var(--accent); filter: drop-shadow(0 0 3px rgb(204 255 0 / .6)); }
[data-theme="light"] .m-lines path.is-on { stroke: #0b1f4f; filter: none; }
.u-bg { fill: var(--elevated); }
.u-st { fill: none; stroke: var(--line-2); transition: stroke .4s; }
.u-ic { fill: rgb(var(--fg) / .55); transition: fill .4s; }
.m-user.is-on .u-st { stroke: rgb(204 255 0 / .6); }
.m-user.is-on .u-ic { fill: var(--accent); }
[data-theme="light"] .m-user.is-on .u-st { stroke: rgb(11 31 79 / .6); }
[data-theme="light"] .m-user.is-on .u-ic { fill: #0b1f4f; }
.m-packet { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
[data-theme="light"] .m-packet { fill: #0b1f4f; filter: none; }
.c-line { stroke: var(--line-2); stroke-width: 1; }
.c-dots circle { fill: rgb(var(--fg) / .35); }
.clock-hand { transform-origin: 36px 36px; animation: spin 6s linear infinite; }
.cl-line { stroke: var(--accent); stroke-width: 1.5; opacity: .8; }
[data-theme="light"] .cl-line { stroke: #0b1f4f; opacity: .5; }
.cl-packet { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
[data-theme="light"] .cl-packet { fill: #0b1f4f; filter: none; }
.srv__bg { fill: var(--elevated); }
.srv__st { fill: none; stroke: rgb(var(--fg) / .2); }
.srv__bar { fill: rgb(var(--fg) / .5); }
.srv__led { fill: #ccff00; animation: led 1.4s steps(2) infinite; }
.srv__led:nth-of-type(2) { animation-delay: -.45s; } .srv__led:nth-of-type(3) { animation-delay: -.9s; }
@keyframes led { 50% { opacity: .2; } }
[data-theme="light"] .srv__led { fill: #3ddc84; }
.ill-label { fill: var(--text-2); font-size: 12px; font-weight: 500; font-family: var(--font); }
.sec-cta { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 40px; padding: 80px var(--pad) 80px 64px; background: linear-gradient(152deg, rgb(204 255 0 / .08) 0%, rgb(204 255 0 / 0) 71%); }
[data-theme="light"] .sec-cta { background: linear-gradient(152deg, rgb(204 255 0 / .3) 0%, rgb(204 255 0 / 0) 71%); }
.sec-cta .h-40 { max-width: 560px; }

/* ---------- 10 results ---------- */
.nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.num { display: flex; flex-direction: column; gap: 20px; min-height: 300px; padding: 64px max(36px, var(--pad)); border-right: 1px solid var(--line); }
.num:first-child { padding-left: var(--pad); }
.num:last-child { padding-right: var(--pad); border-right: 0; }
.num:nth-child(2n) { border-right: 0; }
.num:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.num:nth-child(3) { padding-left: var(--pad); }
.num__n { padding-right: .1em; margin-right: -.1em; font-size: clamp(64px, 6.67vw, 96px); font-weight: 500; line-height: 1; letter-spacing: -.05em; white-space: nowrap; font-variant-numeric: tabular-nums; background: linear-gradient(rgb(var(--fg) / .9), rgb(var(--fg) / .35)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num__n--lime { font-size: clamp(68px, 7.23vw, 104px); background-image: linear-gradient(#ccff00, rgb(204 255 0 / .35)); }
[data-theme="light"] .num__n--lime { background-image: linear-gradient(#0b1f4f, rgb(11 31 79 / .45)); }
.num__l { max-width: 220px; font-size: 16px; color: var(--text-2); }

/* ---------- 11 how ---------- */
.how__wrap { border-bottom: 1px solid var(--line); }
.how__line { height: 2px; background: var(--line); margin-top: -1px; }
.how__line span { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 8px rgb(204 255 0 / .8); }
.how__row { display: grid; grid-template-columns: repeat(5, 1fr); }
.how__cell { display: flex; flex-direction: column; gap: 16px; padding: 72px 32px 88px; border-right: 1px solid var(--line); }
.how__cell:first-child { padding-left: var(--pad); }
.how__cell:last-child { padding-right: var(--pad); border-right: 0; }
.how__cell .t-24 { margin-top: 40px; }
.how__b { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; transition: background .4s, border-color .4s, box-shadow .4s, color .4s; }
.how__b .i { position: absolute; color: var(--on-accent); width: 25px; height: 25px; transform: scale(0); transition: transform .4s var(--ease); }
.how__cell.is-cur .how__b { border: 1.5px solid var(--text-accent); color: var(--text-accent); box-shadow: 0 0 12px rgb(204 255 0 / .5); }
.how__cell.is-done .how__b { background: var(--accent); border-color: var(--accent); color: transparent; }
.how__cell.is-done .how__b .i { transform: none; }

/* ---------- 12 pricing ---------- */
.pricing { display: grid; grid-template-columns: 720fr 720fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricing__l { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 120px 64px 120px var(--pad); border-right: 1px solid var(--line); }
.pricing__btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pricing__btns .link { padding: 14px 18px; }
.pricing__r { min-width: 0; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 120px var(--pad) 120px 64px; overflow: hidden; }
.pricing__glow { position: absolute; left: 120px; top: 80px; width: 460px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgb(204 255 0 / .2), transparent); filter: blur(30px); pointer-events: none; }
.pricing__r > p { position: relative; }
.pricing__from, .pricing__per { font-size: 18px; font-weight: 500; color: var(--text-2); }
.pricing__price { padding-right: .1em; font-size: clamp(64px, 8.4vw, 128px); font-weight: 500; line-height: 1; letter-spacing: -.07em; white-space: nowrap; background: linear-gradient(var(--text), rgb(var(--fg) / .4)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.pricing__price small { margin-left: .12em; font-family: var(--font); font-size: .3em; font-weight: 600; letter-spacing: 0; }
.pricing__trial { padding-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }

/* ---------- 13 testimonials ---------- */
.tbox { border-bottom: 1px solid var(--line); }
.tbox__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 40px var(--pad); border-bottom: 1px solid var(--line); }
.tbox__co { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.tbox__nav { display: flex; align-items: center; gap: 16px; }
.tbox__cnt { font-size: 14px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tbox__main { display: flex; flex-direction: column; gap: 48px; padding: 112px var(--pad); min-height: 360px; }
.tbox__q { max-width: 1000px; font-size: clamp(24px, 2.78vw, 40px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: var(--text-2); }
.tbox__q .w { color: var(--text); }
.tbox__who { display: flex; align-items: center; gap: 14px; }
.tbox__who b { display: block; font-size: 16px; font-weight: 500; }
.tbox__who small { font-size: 14px; color: var(--text-2); }
.tbox__av { width: 48px; height: 48px; display: grid; place-items: center; background: var(--elevated); border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; }
.tbox__main.swap > * { animation: popIn .6s var(--ease) both; }
.tbox__main.swap > :nth-child(2) { animation-delay: .1s; }
.tbox__list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.tq { display: flex; flex-direction: column; gap: 10px; padding: 40px 36px 48px; border-right: 1px solid var(--line); transition: background .3s; }
.tq:first-child { padding-left: var(--pad); }
.tq:last-child { padding-right: var(--pad); border-right: 0; }
.tq:hover { background: var(--panel); }
.tq__bar { height: 2px; background: var(--line-2); overflow: hidden; }
.tq__bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.tq.is-on .tq__bar span { animation: stepbar 7s linear forwards; }
.tq__q { font-size: 14px; line-height: 1.5; color: rgb(var(--fg) / .6); transition: color .3s; }
.tq.is-on .tq__q { color: var(--text); }
.tq__a { font-size: 12px; color: var(--muted); }

/* ---------- 14 FAQ ---------- */
.faq { display: grid; grid-template-columns: 560fr 880fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq__l { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 96px 48px 96px var(--pad); border-right: 1px solid var(--line); }
.faq .acc__item:last-child { border-bottom: 0; }

/* ---------- 15 demo form ---------- */
.demo { display: grid; grid-template-columns: 720fr 720fr; border-bottom: 1px solid var(--line); }
.demo__l { position: relative; min-height: 860px; overflow: hidden; border-right: 1px solid var(--line); }
.demo__art { position: absolute; left: 50%; top: 370px; width: 0; height: 0; }
.demo__glow { position: absolute; left: -280px; top: -280px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, rgb(204 255 0 / .3), rgb(204 255 0 / .06) 60%, transparent); animation: glow 3.6s ease-in-out infinite; }
.ring, .wave { position: absolute; border-radius: 50%; border: 1px solid var(--line); }
.r1 { width: 300px; height: 300px; left: -150px; top: -150px; }
.r2 { width: 460px; height: 460px; left: -230px; top: -230px; }
.r3 { width: 620px; height: 620px; left: -310px; top: -310px; }
.wave { width: 200px; height: 200px; left: -100px; top: -100px; border-color: rgb(204 255 0 / .5); animation: wave 4s ease-out infinite; }
.wave.w2 { animation-delay: 2s; }
[data-theme="light"] .wave { border-color: rgb(11 31 79 / .35); }
@keyframes wave { from { transform: scale(1); opacity: 1; } to { transform: scale(3.1); opacity: 0; } }
.demo__mark { max-width: none; position: absolute; width: 220px; height: 220px; left: -110px; top: -110px; filter: drop-shadow(0 0 22px rgb(204 255 0 / .55)); animation: float 6s ease-in-out infinite; }
[data-theme="light"] .demo__mark { filter: drop-shadow(0 10px 30px rgb(11 31 79 / .25)); }
@keyframes float { 50% { transform: translateY(-10px) rotate(4deg); } }
.demo__h { position: absolute; left: var(--pad); right: 40px; top: 620px; max-width: 600px; }
.form { display: flex; flex-direction: column; gap: 18px; padding: 112px var(--pad) 112px 64px; }
.form__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 10px 15px; border: 1px solid var(--line-3); font-size: 13px; font-weight: 500; color: rgb(var(--fg) / .8); transition: background .25s, color .25s, border-color .25s, transform .15s; }
.chip:hover { border-color: rgb(var(--fg) / .45); }
.chip:active { transform: scale(.96); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { width: 100%; height: 56px; padding: 0 18px; background: rgb(var(--fg) / .04); border: 1px solid rgb(var(--fg) / .12); border-radius: 0; color: var(--text); font: 15px var(--font); outline: none; transition: border-color .25s, background .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.field::placeholder { color: var(--muted); }
.field:hover { border-color: rgb(var(--fg) / .25); }
.field:focus { border-color: var(--text-accent); background: rgb(var(--fg) / .06); box-shadow: 0 0 0 3px rgb(204 255 0 / .15); }
.field.is-err { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(255 107 107 / .15); }
.field--ta { height: 120px; padding-top: 16px; resize: vertical; }
.select { position: relative; }
.select select { padding-right: 44px; cursor: pointer; }
.select select:invalid { color: var(--muted); }
.select option { color: #000; }
.select .i { position: absolute; right: 18px; top: 18px; pointer-events: none; color: var(--text); }
.consent { display: flex; align-items: center; gap: 12px; padding-top: 4px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent__box { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line-3); color: var(--on-accent); transition: background .2s, border-color .2s; }
.consent__box .i { width: 17px; height: 17px; transform: scale(0); transition: transform .25s var(--ease); }
.consent input:checked + .consent__box { background: var(--accent); border-color: var(--accent); }
.consent input:checked + .consent__box .i { transform: none; }
.consent a { color: var(--text); }
.consent a:hover { text-decoration: underline; }
.form__note { font-size: 13px; color: var(--muted); }

/* ---------- 16 footer ---------- */
.foot__st { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 160px var(--pad) 112px; border-bottom: 1px solid var(--line); }
.foot__big { font-size: clamp(48px, 6.67vw, 96px); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.foot__big span { color: var(--muted); }
.totop { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.totop .sq { border-color: var(--line-2); color: var(--text); }
.totop:hover .sq { background: var(--text); color: var(--inverse); }
.totop:hover .i { animation: upBounce .6s var(--ease); }
@keyframes upBounce { 40% { transform: translateY(-5px); } }
.foot__cols { display: grid; grid-template-columns: 420px repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.foot__brand { display: flex; flex-direction: column; gap: 16px; padding: 80px 40px 88px var(--pad); border-right: 1px solid var(--line); }
.foot__brand .logo { height: 44px; width: auto; align-self: flex-start; }
.foot__brand p { max-width: 260px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.foot__soc { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.foot__soc a { padding: 7px 12px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 500; transition: border-color .25s, background .25s, color .25s; }
.foot__soc a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 80px 40px 88px; border-right: 1px solid var(--line); }
.foot__col:last-child { padding-right: var(--pad); border-right: 0; }
.foot__h { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.foot__col a { font-size: 15px; font-weight: 500; transition: color .2s; }
.foot__col a:hover { color: var(--text-accent); }
.foot__col .foot__tel { font-size: 18px; }
.foot__legal { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px var(--pad); font-size: 13px; color: var(--muted); }
.foot__links { display: flex; gap: 28px; color: var(--text-2); }
.foot__links a:hover { color: var(--text); }
.lang-s { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); }
.lang-s > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text); }
.lang-s > span.is-on { background: var(--accent); color: var(--on-accent); }

/* ---------- thank you ---------- */
.thanks { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.thanks__bd { position: absolute; inset: 0; background: rgb(var(--bg-rgb) / .78); opacity: 0; transition: opacity .4s; }
.thanks__box { position: relative; width: 480px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px; background: var(--raised); border: 1px solid rgb(var(--fg) / .12); opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .4s, transform .5s var(--ease); }
.thanks__ic { width: 56px; height: 56px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.thanks__ic .i { width: 28px; height: 28px; }
.thanks.is-open { pointer-events: auto; }
.thanks.is-open .thanks__bd { opacity: 1; }
.thanks.is-open .thanks__box { opacity: 1; transform: none; }
.thanks.is-open .thanks__ic { animation: pop .6s var(--ease) .15s both; }

/* ================= responsive ================= */
@media (max-width: 1200px) {
  .hdr__tag { display: none; }
  .ai__top { grid-template-columns: 400px 1fr; }
  .chat-win { left: 40px; width: calc(100% - 80px); }
  .bento { grid-template-columns: 380px 1fr; }
  .mod { grid-template-columns: 360px 1fr; }
  .foot__cols { grid-template-columns: 1.4fr repeat(4, 1fr); }
  .zig__row--rev .zig__cell, .cmp__cell + .cmp__cell { padding-left: 64px; }
  .zig__row:not(.zig__row--rev) .zig__cell, .cmp__cell { padding-right: 64px; }
  .zig__row--rev .zig__num { padding-right: 64px; } .zig__row:not(.zig__row--rev) .zig__num { padding-left: 64px; }
}
@media (max-width: 1100px) {
  .hdr__sub, .hdr__div { display: none; }
  .hdr .tel span { display: none; } .hdr .tel { padding: 0 14px; }
}
@media (max-width: 900px) {
  .hdr { left: 12px; right: 12px; height: 54px; padding: 6px 6px 6px 14px; gap: 12px; justify-content: space-between; }
  .hdr .logo { height: 24px; }
  .hdr__actions > .tel, .hdr__actions > .lang, .hdr__actions > .theme, .hdr__actions > .pill-cta { display: none; }
  .tel-ico { display: grid; }
  .tel-ico, .menu-btn { height: 40px; }
  .tel-ico { width: 40px; }
  .menu__prefs { display: flex; }
  .menu__prefs .lang { display: flex; }
  .menu__prefs .theme { display: grid; }
  .menu__panel { padding: 8px var(--pad) 32px; }
  .menu__top { height: 52px; }
  .menu__brand .logo { height: 36px; }
  /* phone menu fits one screen: sizes follow the screen height, prefs and CTA share a row */
  .menu__body { grid-template-columns: 1fr; gap: clamp(18px, 3vh, 32px); align-items: start; padding-top: clamp(10px, 2vh, 24px); }
  .menu__links a { gap: 18px; padding: clamp(6px, 1.25vh, 12px) 0; font-size: clamp(22px, min(7.4vw, 4.4vh), 40px); }
  .menu__side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 0; }
  .menu__side > .menu__label, .menu__side > .menu__tel, .menu__side > .menu__mail, .menu__side > .menu__hours { flex-basis: 100%; }
  .menu__label { margin-bottom: 2px; }
  .menu__hours { margin-bottom: 10px; }
  .menu__side .pill-cta { margin: 0 0 0 auto; }
  .menu__prefs .theme { width: 44px; height: 44px; }
  .menu__links a .i { width: 24px; height: 24px; }
  .menu__mark { width: 70vw; right: -20vw; bottom: -18vw; }

  .head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .head__p, .head__p--360 { width: auto; max-width: 520px; font-size: 16px; }
  .sec { gap: 72px; }

  .hero { min-height: 0; padding-bottom: 72px; }
  .hero__net { height: 60%; }
  .hero__content { margin-top: 140px; }
  .announce__text { white-space: normal; text-align: left; font-size: 13px; }
  .hero__h1 { font-size: 16px; max-width: 320px; }
  .hero__lead { font-size: 17px; }
  .hero__btns { flex-direction: column; align-self: stretch; width: 100%; max-width: 420px; }
  .hero__btns .btn, .hero__btns .btn-box { width: 100%; }
  .hero__win { width: calc(100% - 32px); margin-top: 72px; }
  .hero__tagline { margin-top: 20px; }
  .hero__lead { margin-top: 28px; }
  .hero__btns { margin-top: 40px; gap: 14px; }
  .mac { border-radius: 9px; }
  .mac__bar { height: 30px; padding: 0 11px; }
  .mac__dots { gap: 6px; }
  .mac__dots i { width: 9px; height: 9px; }

  .trusted { margin-top: 88px; grid-template-columns: 1fr; }
  .trusted__label { padding: 24px var(--pad) 0; border-right: 0; font-size: 14px; }
  .marquee { padding: 20px 0 28px; }
  .marquee span { font-size: 22px; }
  .marquee__track { gap: 48px; }
  @keyframes marquee { to { transform: translateX(calc(-50% - 24px)); } }

  .about { gap: 72px; }
  .about__top { grid-template-columns: 1fr; }
  .steps { padding: 40px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .steps__list { margin-top: 32px; }
  .diagram { min-height: 0; aspect-ratio: 760 / 640; }
  .diagram__in { --w: min(100cqw - 24px, (100cqh - 64px) * 1.3475); }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat:first-child, .stat:last-child { padding: 32px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }

  .problem { gap: 72px; }
  .zig__row, .zig__row--rev { grid-template-columns: 1fr; }
  .zig__num { display: none; }
  .zig__row > *, .zig__row--rev .zig__cell, .zig__row:not(.zig__row--rev) .zig__cell { padding: 36px var(--pad); border-right: 0; }
  .cta-strip { flex-direction: column; align-items: stretch; }
  .cta-strip .btn-lime { justify-content: space-between; }

  .cmp__head { display: none; }
  .cmp__row { grid-template-columns: 1fr; }
  .cmp__cell, .cmp__cell + .cmp__cell { padding: 24px var(--pad); border-right: 0; }
  .cmp__cell:first-child { padding-bottom: 0; border-right: 0; }
  .cmp__cell p { font-size: 16px; }

  .acc--mod .acc__btn { padding: 22px var(--pad); gap: 16px; }
  .acc--mod .acc__meta { display: none; }
  .acc--mod .pm { width: 40px; height: 40px; }
  .acc--mod .pm::before, .acc--mod .pm::after { width: 20px; margin-left: -10px; }
  .mod { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
  .mod__l p { font-size: 16px; }
  .mod__subs span { font-size: 16px; padding: 14px 12px 14px 0; }

  .ai__top { grid-template-columns: 1fr; }
  .roles { padding: 24px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-area { min-height: 0; padding: 40px var(--pad); }
  .chat-win { position: relative; left: auto; top: auto; width: 100%; }
  .chat-win { height: 500px; }
  .ai__bottom { grid-template-columns: 1fr; }
  .ai__cell, .ai__cell:first-child { padding: 28px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .ai__cta { padding: 28px var(--pad); }

  .bento { grid-template-columns: 1fr; }
  .bento__feat { padding: 36px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .bento__grid { grid-template-columns: 1fr 1fr; }
  .ind, .ind:nth-child(3n) { padding: 24px 20px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ind:nth-child(2n) { border-right: 0; }
  .ind:nth-child(n+5) { border-bottom: 0; }
  .ind:nth-child(4) { border-bottom: 1px solid var(--line); }
  .ind .i { margin-bottom: 24px; }

  .tenders { grid-template-columns: 1fr; }
  .tenders__left { padding: var(--sec-top) var(--pad) 48px; border-right: 0; }
  .tenders__left .btn-lime { width: 100%; justify-content: space-between; }
  .tenders__right { min-height: 0; padding: 64px 0; border-top: 1px solid var(--line); }

  .sec-row--a, .sec-row--b { grid-template-columns: 1fr; }
  .sec-cell, .sec-cell--r { padding: 32px var(--pad) 36px; border-right: 0; border-bottom: 1px solid var(--line); align-items: center; text-align: center; }
  .sec-cell .w460, .sec-cell .w432 { max-width: 460px; }
  .ill { width: 100%; height: auto; display: flex; justify-content: center; }
  .ill svg { height: auto; }
  .ill--matrix svg { width: 100%; max-width: 672px; }
  .ill--clean svg, .ill--cloud svg { width: 100%; max-width: 432px; }


  .sec-cta { padding: 40px var(--pad); }
  .sec-cta .btn-white { width: 100%; justify-content: space-between; }

  .nums { grid-template-columns: 1fr 1fr; }
  .num, .num:first-child, .num:last-child { padding: 32px var(--pad); }
  .num:nth-child(2n) { border-right: 0; }
  .num:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .num__n { font-size: clamp(48px, 12vw, 72px); }
  .num__n--lime { font-size: clamp(52px, 13vw, 78px); }

  .how__row { grid-template-columns: 1fr; }
  .how__line { display: none; }
  .how__cell, .how__cell:first-child, .how__cell:last-child { position: relative; padding: 28px var(--pad) 28px calc(var(--pad) + 68px); border-right: 0; border-bottom: 1px solid var(--line); }
  .how__cell:last-child { border-bottom: 0; }
  .how__b { position: absolute; left: var(--pad); top: 28px; }
  .how__cell .t-24 { margin-top: 0; }
  .how__cell::before { content: ""; position: absolute; left: calc(var(--pad) + 21px); top: 72px; bottom: -29px; width: 2px; background: var(--line); }
  .how__cell:last-child::before { display: none; }
  .how__cell.is-done::before { background: var(--accent); box-shadow: 0 0 8px rgb(204 255 0 / .6); }

  .pricing { grid-template-columns: 1fr; }
  .pricing__l { padding: 56px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .pricing__r { padding: 56px var(--pad); }
  .pricing__glow { left: 0; }

  .tbox__head { padding: 20px var(--pad); }
  .tbox__co { font-size: 18px; }
  .tbox__main { padding: 40px var(--pad); min-height: 0; gap: 28px; }
  .tbox__list { grid-template-columns: 1fr; }
  .tq, .tq:first-child, .tq:last-child { padding: 20px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .tq:last-child { border-bottom: 0; }

  .faq { grid-template-columns: 1fr; }
  .faq__l { padding: 48px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .acc--faq .acc__btn { padding: 22px var(--pad); gap: 14px; align-items: flex-start; }
  .acc--faq .acc__num { padding-top: 4px; }
  .acc--faq .acc__inner p { max-width: none; padding: 0 var(--pad) 24px calc(var(--pad) + 30px); font-size: 16px; }

  .demo { grid-template-columns: 1fr; }
  .demo__l { min-height: 560px; border-right: 0; border-bottom: 1px solid var(--line); }
  .demo__art { top: 220px; transform: scale(.7); }
  .demo__h { top: auto; bottom: 40px; right: var(--pad); }
  .form { padding: 48px var(--pad); }
  .form__row { grid-template-columns: 1fr; }

  .foot__st { flex-direction: column; align-items: flex-start; padding: 64px var(--pad) 48px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; padding: 40px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .foot__col, .foot__col:last-child { padding: 32px var(--pad); border-bottom: 1px solid var(--line); }
  .foot__col:nth-child(odd) { border-right: 0; }
  .foot__col--c { grid-column: 1 / -1; border-bottom: 0; }
  .foot__legal { flex-direction: column; align-items: flex-start; }
  .foot__links { flex-direction: column; gap: 12px; }
}
@media (max-width: 640px) {
  .hero__content { margin-top: 120px; padding: 0 var(--pad); }
  .hero__tagline { font-size: min(46px, calc((100vw - 40px) / 8.8)); }
  .hero__ui { display: none; }
  .hero__vignette { display: none; }
  .chat-win { height: 520px; }
  .chat__status { display: none; }
  .chat__msgs { padding: 16px 14px; }
  .bento__grid { grid-template-columns: 1fr; }
  .ind, .ind:nth-child(3n), .ind:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px var(--pad) 28px; }
  .ind:last-child { border-bottom: 0; }
  .ind .i { position: absolute; right: var(--pad); top: 24px; margin: 0; }
  .ind--own .i { position: static; }
  .ind h3 { padding-right: 32px; }
  .nums { grid-template-columns: 1fr; }
  .num, .num:first-child, .num:last-child, .num:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .num:last-child { border-bottom: 0; }
  .tcard { padding: 20px 16px 22px; }
  .trow__t small { font-size: 12px; }
  .tsteps li { font-size: 17px; }
  .cta-strip .btn-lime, .btn-lime { font-size: 15px; }
  .foot__links { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Figma rows use flex-1 cells where side padding is added on top of equal shares */
@media (min-width: 901px) {
  .stats, .ai__bottom, .how__row, .tbox__list { display: flex; }
  .stat, .ai__cell, .ai__cta, .how__cell, .tq { flex: 1 1 0; min-width: 0; }
  .bento__grid { grid-template-columns: 1fr 1fr calc((100% - var(--pad) + 32px) / 3 + var(--pad) - 32px); }
  .head > .link { align-self: flex-end; }
}
.sec-row > * { min-width: 0; }
@media (max-width: 900px) {
  .presence, .presence[data-reveal].in { left: auto; transform: none; }
  .presence[data-reveal] { transform: translateY(24px); }
  .announce__text { white-space: nowrap; }
}
@media (max-width: 640px) {
  .hide-m { display: none; }
  .btn-white { white-space: normal; }
  .btn-white > span:first-child { padding: 10px 0; line-height: 1.3; }
}
@media (max-width: 640px) {
  .chat-win { height: auto; }
  .chat { height: auto; min-height: 600px; }
  .chat__msgs { overflow: visible; }
}
@media (max-width: 640px) { .pricing__btns .link { padding-left: 0; } }
/* headings font (swap here) */
.h2, .h-50, .h-44, .h-40, .hero__tagline, .foot__big, .acc--mod .acc__title, .zig__num span, .num__n, .pricing__price, .stat__n { font-family: var(--font-head); letter-spacing: 0; }
.h2, .h-50, .h-44, .h-40 { text-wrap: balance; }
.nw { white-space: nowrap; }

/* Webflow-inspired header: original controls preserved */
.hdr {
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  padding: 0 40px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: rgb(var(--bg-rgb) / .96);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hdr__brand { flex: 0 0 auto; min-width: 0; color: var(--text); }
.hdr .logo { height: 38px; width: auto; }
.hdr__tag { color: var(--text-2); }
.hdr__actions { gap: 14px; margin-left: auto; }
.hdr .tel { color: var(--text); }
.hdr .lang,
.hdr .theme,
.hdr .menu-btn { border-color: var(--line); background: transparent; color: var(--text); }
.hdr .lang,
.menu__prefs .lang { position: relative; width: 68px; height: 44px; padding: 0; background: transparent; overflow: visible; }
.lang-toggle { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.lang-toggle i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; }
.lang-toggle:hover i { opacity: 1; }
.lang.is-open .lang-toggle i { transform: rotate(225deg) translate(-1px, -1px); }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 174px; padding: 6px; border: 1px solid var(--line-2); background: var(--raised); box-shadow: 0 18px 45px rgb(0 0 0 / .28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, visibility .2s, transform .2s; }
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 13px; color: var(--text-2); }
.lang-menu button:hover, .lang-menu button.is-on { background: rgb(var(--fg) / .08); color: var(--text); }
.lang-menu button span { width: 24px; font-size: 11px; font-weight: 800; color: var(--text-accent); }
.hdr .pill-cta { margin-left: 10px; }
.hdr .menu-btn { margin-left: 4px; }
.hdr .pill-cta { min-height: 44px; padding: 0 20px; border: 1px solid var(--accent); border-radius: 0; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 700; box-shadow: none; }
.hdr .pill-cta:hover { background: #b8e600; border-color: #b8e600; transform: none; }
.hdr .menu-btn { width: 48px; padding: 0; justify-content: center; }
.menu-icon { width: 20px; display: grid; gap: 4px; }
.menu-icon i { display: block; width: 100%; height: 2px; background: currentColor; transition: transform .25s ease; }
.menu-icon i:nth-child(2) { width: 14px; justify-self: end; }

@media (max-width: 1350px) {
  .hdr__tag { display: none; }
}

@media (max-width: 1180px) {
  .hdr__sub,
  .hdr__div { display: none; }
}

@media (max-width: 1120px) {
  .hdr { padding: 0 24px; }
}

@media (min-width: 901px) and (max-width: 1050px) {
  .hdr { gap: 16px; padding: 0 18px; }
  .hdr .logo { height: 34px; }
  .hdr__actions { gap: 8px; }
  .hdr .tel { width: 44px; padding: 0; justify-content: center; }
  .hdr .lang { width: 60px; }
  .hdr .theme,
  .hdr .menu-btn { width: 44px; height: 44px; }
  .hdr .pill-cta { padding: 0 16px; font-size: 12px; }
}

@media (max-width: 900px) {
  .hdr { top: 0; left: 0; right: 0; height: 60px; padding: 0 12px 0 16px; }
  .hdr .logo { height: 31px; }
  .hdr__actions { gap: 8px; }
  .hdr .menu-btn { width: 40px; height: 40px; padding: 0; border-radius: 0; }
}

@media (max-width: 420px) {
  .hdr { padding-left: 12px; }
  .hdr .logo { height: 28px; }
  .hdr__actions { gap: 6px; }
  .tel-ico,
  .hdr .menu-btn { width: 38px; height: 38px; }
}

/* hero: heading on top, small mac window on the right that grows into a full-width window on scroll (driven by main.js) */
@media (min-width: 1101px) {
  .hero__tagline { font-size: clamp(56px, 5.84vw, 96px); }
  .hero__lead { max-width: 440px; font-size: 18px; }
  .hero__win { z-index: 3; width: var(--win-w, calc(100% - 128px)); margin-top: calc(96px + 27vh); will-change: transform; }
}

/* demo form and footer: brand navy bands in both themes */
.on-navy {
  --fg: 255 255 255; --bg-rgb: 11 31 79; --bg: #0b1f4f; --raised: #10265c; --elevated: #142d69;
  --text: #fff; --text-2: #b4c0dc; --subtle: #8796b7; --muted: #7181a2; --text-accent: #ccff00;
  --accent: #ccff00; --on-accent: #000; --inverse: #0b1f4f;
  --line: rgb(180 200 255 / .14); --line-2: rgb(180 200 255 / .2); --line-3: rgb(180 200 255 / .28);
  --panel: rgb(255 255 255 / .04); --glow: rgb(204 255 0 / .35); --ghost-num: rgb(255 255 255 / .06);
  color-scheme: dark; background: var(--bg); color: var(--text);
}
/* the heroes follow the site theme: light tokens again in the light theme */
[data-theme="light"] .hs-anim.on-navy {
  --fg: 11 31 79; --bg-rgb: 244 246 251; --bg: #f4f6fb; --raised: #ffffff; --elevated: #eaeef7;
  --text: #0b1f4f; --text-2: #405172; --subtle: #5f6f8f; --muted: #687895; --text-accent: #0b1f4f;
  --accent: #0b1f4f; --on-accent: #fff; --inverse: #fff;
  --line: rgb(11 31 79 / .1); --line-2: rgb(11 31 79 / .14); --line-3: rgb(11 31 79 / .2);
  --panel: #fff; --glow: rgb(11 31 79 / .2); --ghost-num: rgb(11 31 79 / .05);
  color-scheme: light; color: var(--text);
}
[data-theme="light"] .on-navy:not(.hs-anim) .logo--light { display: none; }
[data-theme="light"] .on-navy:not(.hs-anim) .logo--dark { display: block; }
[data-theme="light"] .on-navy:not(.hs-anim) .wave { border-color: rgb(204 255 0 / .5); }
[data-theme="light"] .on-navy:not(.hs-anim) .demo__mark { filter: drop-shadow(0 0 22px rgb(204 255 0 / .55)); }

@media (max-width: 1100px) {
  .bnf { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)) auto; }
  .bnf__cell:nth-child(n) { padding: 48px 40px 56px; border-right: 1px solid var(--line); }
  .bnf__cell:nth-child(2n+1) { padding-left: var(--pad); }
  .bnf__cell:nth-child(2n) { padding-right: var(--pad); border-right: 0; }
}
@media (max-width: 640px) {
  .bnf { grid-template-columns: 1fr; grid-template-rows: none; }
  .bnf__cell:nth-child(n) { padding: 36px var(--pad) 40px; border-right: 0; }
}
@media (max-width: 640px) { .how .h2 br { display: none; } }

/* footer language switcher: the header dropdown, opening upward */
.foot .lang { position: relative; width: 68px; height: 44px; padding: 0; background: transparent; border-color: var(--line-2); overflow: visible; }
.lang--up .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; transform: translateY(6px); }
.lang--up .lang-toggle i { transform: rotate(225deg) translate(-1px, -1px); }
.lang--up.is-open .lang-toggle i { transform: rotate(45deg) translateY(-2px); }
/* short phones: drop the hours line so the menu still fits without scrolling */
@media (max-width: 900px) and (max-height: 720px) { .menu__hours { display: none; } .menu__panel { padding-bottom: 16px; } }
/* language menu inside the burger menu opens upward, so it never pushes the panel into scrolling */
.menu__prefs .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; transform: translateY(6px); }

/* footer responsive correction */
.foot__cols {
  display: grid;
  grid-template-columns: calc(var(--pad) + 300px) repeat(4, minmax(0, 1fr));
}
.foot__brand,
.foot__col { min-width: 0; }
.foot__brand { padding: 72px 40px 80px var(--pad); }
.foot__brand .logo { height: 54px; }
.foot__col { padding: 72px clamp(24px, 2.4vw, 40px) 80px; }
.foot__col:last-child { padding-right: clamp(24px, 2.4vw, 40px); }
.foot__col > * { white-space: normal; }

@media (max-width: 1280px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand {
    grid-column: 1 / -1;
    padding: 52px var(--pad);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .foot__brand .logo { height: 50px; }
  .foot__brand p { max-width: 420px; }
  .foot__col,
  .foot__col:last-child { padding: 40px var(--pad); border-bottom: 1px solid var(--line); }
  .foot__col:nth-child(odd) { border-right: 0; }
  .foot__col:nth-last-child(-n+2) { border-bottom: 0; }
  .foot__col--c { grid-column: auto; }
}

@media (max-width: 640px) {
  .foot__cols { grid-template-columns: 1fr; }
  .foot__brand { grid-column: auto; padding: 40px var(--pad); }
  .foot__brand .logo { height: 44px; }
  .foot__brand p { max-width: 320px; }
  .foot__col,
  .foot__col:last-child,
  .foot__col:nth-child(odd),
  .foot__col:nth-last-child(-n+2) {
    padding: 32px var(--pad);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .foot__col:last-child { border-bottom: 0; }
}
/* AI section-wide glow */
.ai {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ai::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 40px -12vw -80px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 50% at 72% 48%, rgb(42 91 255 / .24), rgb(42 91 255 / .1) 38%, transparent 76%),
    radial-gradient(ellipse 38% 34% at 82% 46%, rgb(204 255 0 / .09), transparent 72%);
  filter: blur(44px);
}
.ai > * { position: relative; z-index: 1; }
.chat-area { overflow: visible; }
.chat-area__glow { display: none; }

[data-theme="light"] .ai::before {
  background:
    radial-gradient(ellipse 58% 50% at 72% 48%, rgb(42 91 255 / .16), rgb(42 91 255 / .06) 40%, transparent 76%),
    radial-gradient(ellipse 38% 34% at 82% 46%, rgb(143 196 0 / .09), transparent 72%);
}

/* product promo section */
.product-promo {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
  gap: 64px;
  min-height: 880px;
  padding: 128px var(--pad) 104px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 48% 58% at 78% 58%, rgb(42 91 255 / .28), transparent 70%),
    radial-gradient(circle at 82% 68%, rgb(204 255 0 / .12), transparent 34%),
    #081630;
}
.product-promo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .42;
  background-image: linear-gradient(rgb(180 200 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(180 200 255 / .08) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask: linear-gradient(90deg, transparent 10%, #000 58%, #000);
  mask: linear-gradient(90deg, transparent 10%, #000 58%, #000);
}
.product-promo__copy { position: relative; z-index: 3; align-self: start; }
.product-promo__eyebrow { margin-bottom: 22px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-accent); }
.product-promo__title { max-width: 600px; font-family: var(--font-head); font-size: clamp(52px, 5.25vw, 76px); font-weight: 500; line-height: .98; text-wrap: balance; }
.product-promo__lead { max-width: 510px; margin-top: 28px; font-size: 20px; line-height: 1.5; color: var(--text-2); }
.product-promo__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.product-promo__chips span { padding: 9px 14px; border: 1px solid rgb(204 255 0 / .45); border-radius: 999px; font-size: 13px; font-weight: 600; }
.product-promo__devices { position: relative; min-height: 610px; align-self: end; }
.device { position: absolute; overflow: hidden; border: 1px solid rgb(180 200 255 / .28); background: #0c1736; box-shadow: 0 30px 90px rgb(0 0 0 / .5), 0 0 55px rgb(42 91 255 / .18); }
.device--desktop { z-index: 1; top: 10px; right: 0; width: min(820px, 100%); aspect-ratio: 16 / 10; border-radius: 18px; }
.device__bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #0a1a40; color: #b4c0dc; font-size: 11px; }
.device__bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.device__bar i:nth-child(2) { background: #ffbd2e; }
.device__bar i:nth-child(3) { background: #28c840; }
.device__bar span { margin-left: 8px; }
.mock-app { display: grid; grid-template-columns: 64px 1fr; height: calc(100% - 38px); }
.mock-app__side { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 18px; background: #0b2d5b; }
.mock-app__side b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: #071226; }
.mock-app__side span { width: 24px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .28); }
.mock-app__side span.is-on { background: var(--accent); }
.mock-app__main { padding: 26px; background: #f5f7fb; color: #14213c; }
.mock-app__head { display: flex; justify-content: space-between; align-items: center; }
.mock-app__head small { display: block; color: #71809e; }
.mock-app__head strong { display: block; margin-top: 3px; font-size: 22px; }
.mock-app__head button { padding: 9px 13px; border-radius: 6px; background: #0b2d5b; color: #fff; font-size: 11px; }
.mock-app__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.mock-app__metrics span { padding: 16px; border: 1px solid #e0e5ef; background: #fff; }
.mock-app__metrics small { display: block; color: #71809e; }
.mock-app__metrics b { display: block; margin-top: 8px; font-size: 18px; }
.mock-app__board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.mock-app__board > div { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #e9edf5; }
.mock-app__board i { height: 46px; border-left: 3px solid #2a5bff; border-radius: 4px; background: #fff; }
.mock-app__board > div:nth-child(2) i { border-left-color: #f2a43a; }
.mock-app__board > div:nth-child(3) i { border-left-color: #21a453; }
.device--tablet { z-index: 2; left: -34px; bottom: 4px; width: 300px; height: 390px; padding: 24px 20px; border-radius: 22px; transform: rotate(-2deg); }
.device--phone { z-index: 3; left: 230px; bottom: -8px; width: 164px; height: 350px; padding: 28px 14px 16px; border: 5px solid #071226; border-radius: 28px; background: #f7f9fc; color: #14213c; }
.device__notch { position: absolute; left: 50%; top: 7px; width: 60px; height: 14px; margin-left: -30px; border-radius: 10px; background: #071226; }
.device__mini-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #dce5f8; font-size: 13px; }
.device--phone .device__mini-head { color: #14213c; }
.device__mini-head b { color: var(--accent); }
.device__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.device__kpis i { height: 86px; border-radius: 8px; background: linear-gradient(145deg, rgb(42 91 255 / .35), rgb(204 255 0 / .08)); }
.device__chart { height: 180px; display: flex; align-items: flex-end; gap: 8px; margin-top: 24px; padding: 16px; border-radius: 10px; background: rgb(255 255 255 / .05); }
.device__chart span { flex: 1; height: 35%; background: #2a5bff; }
.device__chart span:nth-child(2n) { height: 68%; background: var(--accent); }
.device__chart span:nth-child(3n) { height: 90%; }
.device__bubble { margin-top: 28px; padding: 12px; border-radius: 10px; background: #e6edfb; color: #2a5bff; font-size: 11px; line-height: 1.35; }
.device__action { height: 42px; margin-top: 10px; border-radius: 8px; background: #eef1f6; }
.product-promo__cta { position: relative; z-index: 4; grid-column: 1 / -1; width: min(520px, 100%); justify-content: space-between; margin-top: -4px; }

@media (max-width: 1100px) {
  .product-promo { grid-template-columns: 1fr; min-height: 0; padding-top: 96px; }
  .product-promo__devices { min-height: 600px; }
  .device--desktop { left: 50%; right: auto; width: min(820px, 92%); transform: translateX(-50%); }
  .device--tablet { left: 3%; }
  .device--phone { left: 24%; }
}
@media (max-width: 640px) {
  .product-promo { gap: 44px; padding: 72px var(--pad); }
  .product-promo__title { font-size: clamp(42px, 12.4vw, 58px); }
  .product-promo__lead { font-size: 17px; }
  .product-promo__devices { min-height: 430px; }
  .device--desktop { width: 100%; border-radius: 12px; }
  .mock-app { grid-template-columns: 38px 1fr; }
  .mock-app__main { padding: 12px; }
  .mock-app__head strong { font-size: 15px; }
  .mock-app__head button { display: none; }
  .mock-app__metrics { gap: 5px; margin-top: 12px; }
  .mock-app__metrics span { padding: 7px; }
  .mock-app__metrics b { font-size: 11px; }
  .mock-app__board { gap: 5px; margin-top: 7px; }
  .mock-app__board > div { gap: 4px; padding: 5px; }
  .mock-app__board i { height: 23px; }
  .device--tablet { left: 0; bottom: 0; width: 44%; height: 250px; padding: 16px 12px; }
  .device--phone { left: 36%; bottom: -8px; width: 112px; height: 236px; padding: 22px 9px 10px; border-width: 4px; border-radius: 20px; }
  .device__chart { height: 100px; padding: 8px; gap: 4px; }
  .device__bubble { margin-top: 16px; padding: 8px; font-size: 8px; }
  .device__action { height: 27px; margin-top: 7px; }
}

/* full-width footer contact */
.foot__cols { grid-template-columns: calc(var(--pad) + 300px) repeat(3, minmax(0, 1fr)); }
.foot__contact {
  display: grid;
  grid-template-columns: 130px minmax(220px, .8fr) minmax(300px, 1fr) 180px minmax(280px, 1fr);
  align-items: center;
  gap: 24px 40px;
  padding: 34px var(--pad);
  border-bottom: 1px solid var(--line);
}
.foot__contact-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.foot__contact-phone { font-size: 20px; font-weight: 600; white-space: nowrap; }
.foot__contact-mails { display: flex; gap: 24px; flex-wrap: wrap; }
.foot__contact-mails a { font-size: 15px; font-weight: 500; }
.foot__contact-hours, .foot__contact-social { font-size: 14px; color: var(--text-2); }
.foot__contact-social { text-align: right; }

@media (max-width: 1280px) {
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
  .foot__col,
  .foot__col:last-child,
  .foot__col:nth-child(odd),
  .foot__col:nth-last-child(-n+2) { border-bottom: 0; }
  .foot__col:last-child { border-right: 0; }
  .foot__contact { grid-template-columns: 1fr 1fr; }
  .foot__contact-title { grid-column: 1 / -1; }
  .foot__contact-social { text-align: left; }
}
@media (max-width: 900px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__col:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .foot__cols { grid-template-columns: 1fr; }
  .foot__col:last-child { grid-column: auto; }
  .foot__contact { grid-template-columns: 1fr; gap: 14px; padding: 32px var(--pad); }
  .foot__contact-title { grid-column: auto; margin-bottom: 6px; }
  .foot__contact-mails { flex-direction: column; gap: 10px; }
}

/* product promo mobile overflow correction */
@media (max-width: 640px) {
  .product-promo__copy,
  .product-promo__devices { min-width: 0; max-width: 100%; }
  .product-promo__title {
    max-width: 100%;
    font-size: clamp(34px, 9.7vw, 40px);
    line-height: 1.02;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
  }
  .product-promo__lead { max-width: 100%; }
  .product-promo__chips { gap: 8px; }
  .product-promo__chips span { padding: 8px 10px; font-size: 11px; }
}

/* preserve existing heading typography after UI font update */
h1,
h2,
h3,
h4,
h5,
h6,
.step__title,
.role__t {
  font-family: var(--font);
}

/* 15.10: nothing stops on hover or touch: the client strip keeps running */
.marquee:hover .marquee__track { animation-play-state: running; }
/* 15.10: icons drawn as inline SVG by main.js (the mask is only a fallback) */
.i.i--svg { background: none !important; -webkit-mask: none !important; mask: none !important; }
.i--svg svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* 16.10: no zoom on phones: no double-tap zoom (taps also react at once) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* 16.10: security - the panic button as the main feature: the lime CTA cell format (big title, text), the red button with pulsing rings on the right */
.sec-cta--panic { position: relative; justify-content: center; gap: 24px; padding-right: calc(var(--pad) + 200px); }
.sec-cta--panic .h-40 { position: relative; z-index: 1; }
.sec-cta__p { position: relative; z-index: 1; max-width: 460px; }
.pn-mini { position: absolute; right: var(--pad); top: 50%; width: 180px; height: 180px; transform: translateY(-50%); }
.pn-mini svg { width: 100%; height: 100%; overflow: visible; }
.pn-btn { transform-origin: 100px 100px; animation: pnpress 4s ease-in-out infinite; }
@keyframes pnpress { 0%, 70% { transform: none; } 75% { transform: scale(.88); } 82%, 100% { transform: none; } }
.pn-glow { fill: rgb(240 82 82 / .3); filter: blur(22px); animation: secglow 3s ease-in-out infinite; }
.pn-ring { fill: none; stroke: rgb(240 82 82 / .55); stroke-width: 1.5; transform-origin: 100px 100px; animation: pnring 2.5s ease-out infinite; }
.pn-ring--2 { animation-delay: 1.25s; }
@keyframes pnring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.pn-ic { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; }
@media (max-width: 900px) {
  .sec-cta--panic { padding-right: var(--pad); }
  .pn-mini { position: relative; right: auto; top: auto; width: 120px; height: 120px; transform: none; margin: 0 0 4px -10px; }
}
@media (prefers-reduced-motion: reduce) { .pn-btn, .pn-ring, .pn-glow { animation: none; } }
/* the panic button cell stands out: a clearly visible lime wash in both themes */
.sec-cta.sec-cta--panic { background: linear-gradient(135deg, rgb(204 255 0 / .2) 0%, rgb(204 255 0 / .06) 55%, rgb(204 255 0 / 0) 100%); box-shadow: inset 0 0 0 1px rgb(204 255 0 / .18); }
[data-theme="light"] .sec-cta.sec-cta--panic { background: linear-gradient(135deg, rgb(204 255 0 / .5) 0%, rgb(204 255 0 / .18) 55%, rgb(204 255 0 / .04) 100%); box-shadow: inset 0 0 0 1px rgb(150 190 0 / .3); }
/* bigger panic button */
.sec-cta--panic:not(#_) { padding-right: calc(var(--pad) + 280px); }
.pn-mini:not(#_) { width: 260px; height: 260px; right: calc(var(--pad) - 20px); }
@media (max-width: 900px) {
  .sec-cta--panic:not(#_) { padding-right: var(--pad); }
  .pn-mini:not(#_) { width: 170px; height: 170px; right: auto; margin: 0 0 4px -16px; }
}