@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../fonts/manrope-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/jetbrainsmono-700-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/jetbrainsmono-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
:root {
--font-heading: 'Manrope', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--bg-primary: #081121;
--bg-secondary: #0b1524;
--bg-card: #0e1a2c;
--bg-card-hover: #13233b;
--text-primary: #ffffff;
--text-secondary: #b7bcc3;
--text-muted: #8792a0;
--accent: #1d48e6;
--accent-hover: #1a3fce;
--accent-light: #526ccc;
--accent-bg: rgba(29, 72, 230, 0.10);
--accent-bg-strong: rgba(29, 72, 230, 0.16);
--surface-2: #374658;
--surface-2-hover: #415268;
--border-color: rgba(183, 188, 195, 0.14);
--border-card: rgba(183, 188, 195, 0.16);
--border-tag: rgba(183, 188, 195, 0.22);
--hero-overlay: rgba(8, 17, 33, 0.5);
--hero-glow-core: rgba(90, 116, 255, 0.55);
--hero-glow-mid:  rgba(120, 70, 220, 0.30);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-full: 99px;
--container-max: 1520px;
--container-pad: 200px;
--section-py: clamp(52px, 5.5vw, 76px);
--header-offset: clamp(104px, 4vw + 76px, 140px);
}
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f6f8fb;
--bg-card: #f6f8fb;
--bg-card-hover: #eef2f7;
--text-primary: #0f1b2d;
--text-secondary: #475569;
--text-muted: #64748b;
--accent: #1d48e6;
--accent-hover: #1a3fce;
--accent-light: #3a58c0;
--accent-bg: rgba(29, 72, 230, 0.06);
--accent-bg-strong: rgba(29, 72, 230, 0.10);
--surface-2: #e6ebf2;
--surface-2-hover: #dbe2ec;
--border-color: #e2e8f0;
--border-card: #e2e8f0;
--border-tag: #cbd5e1;
--hero-overlay: rgba(255, 255, 255, 0.4);
}


*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
html {
max-width: 100%;
}
body {
overflow-x: hidden;
max-width: 100%;
}
body {
font-family: var(--font-body);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background 0.3s ease, color 0.3s ease;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
list-style: none;
}
button {
font-family: inherit;
}
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
opacity: 0;
transform: translateX(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
opacity: 1;
transform: translate(0, 0);
}
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.40s; }
.itb-container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: clamp(20px, 10vw, var(--container-pad));
}
.itb-section {
padding-block: var(--section-py);
}
.itb-section--alt {
background: var(--bg-secondary);
}
.itb-section__header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 48px;
max-width: 720px;
}
.itb-section__eyebrow {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--text-secondary);
}
.itb-section__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(30px, 4vw, 46px);
line-height: 1.08;
letter-spacing: -1px;
color: var(--text-primary);
}
.itb-section__subtitle {
font-size: 17px;
line-height: 1.55;
color: var(--text-secondary);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 15.5px;
line-height: 1;
padding: 16px 28px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.btn--primary {
background: var(--accent);
color: #fff;
}
.btn--primary:hover {
background: var(--accent-hover);
}
.btn--ghost {
background: var(--surface-2);
color: var(--text-primary);
border-color: var(--border-color);
}
.btn--ghost:hover {
background: var(--surface-2-hover);
}
.btn--circle {
padding: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border-color: var(--border-color);
color: var(--text-secondary);
}
.btn--circle:hover {
color: var(--text-primary);
border-color: var(--border-tag);
}
.itb-tag {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-secondary);
background: var(--accent-bg);
border: 1px solid var(--border-tag);
border-radius: var(--radius-sm);
padding: 6px 12px;
}


.site-header {
position: absolute;
inset: 0 0 auto 0;
z-index: 50;
background: var(--hero-overlay);
backdrop-filter: blur(2px);
}
.site-main > .itb-legal,
.site-main > .itb-page,
.site-main > .itb-404,
.site-main > .itb-blog-hero,
.site-main > .itb-article,
.site-main > .itb-single {
padding-top: var(--header-offset);
}
.site-main > .itb-section--ab-intro {
padding-top: max(var(--header-offset), clamp(48px, 7vw, 96px));
}
#cta {
scroll-margin-top: var(--header-offset);
}
.site-header__inner {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding: 24px clamp(20px, 10vw, var(--container-pad));
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.site-header__logo {
display: inline-flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.site-header__logo-img {
height: 28px;
width: auto;
display: block;
}
.site-header__logo-text {
font-family: var(--font-heading);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.18px;
color: var(--text-secondary);
}
.site-header__nav {
display: flex;
flex: 1;
justify-content: center;
}
.site-header__menu {
display: flex;
align-items: center;
gap: 26px;
}
.site-header__menu a,
.site-header__menu-text {
font-family: var(--font-heading);
font-weight: 500;
font-size: 14.5px;
color: var(--text-secondary);
white-space: nowrap;
transition: color 0.2s ease;
}
.site-header__menu a:hover {
color: var(--text-primary);
}
.site-header__menu-text {
cursor: default;
opacity: 0.55;
}
.site-header__actions {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.site-header__socials {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0;
padding-left: 16px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
[data-theme="light"] .site-header__socials {
border-left-color: rgba(22, 24, 31, 0.12);
}
.site-header__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
color: var(--text-secondary);
transition: color 0.2s ease, background 0.2s ease;
}
.site-header__social:hover,
.site-header__social:focus-visible {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .site-header__social:hover,
[data-theme="light"] .site-header__social:focus-visible {
color: #2233d6;
background: rgba(34, 51, 214, 0.08);
}
.site-header__social:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }
.site-header__social .itb-social__icon {
width: 17px;
height: 17px;
fill: currentColor;
}
.site-header__social[aria-label="Rutube"] .itb-social__icon,
.site-header__social[aria-label="MAX"] .itb-social__icon,
.site-header__social[aria-label="Дзен"] .itb-social__icon {
width: 15px;
height: 15px;
}
.site-header__cta { margin-left: 10px; }
.site-header__burger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 11px;
color: var(--text-primary);
cursor: pointer;
}
.site-header__burger:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }
.site-header__burger-box {
position: relative;
display: block;
width: 20px;
height: 14px;
}
.site-header__burger-line {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.site-header__burger-line:nth-child(1) { top: 0; }
.site-header__burger-line:nth-child(2) { top: 6px; }
.site-header__burger-line:nth-child(3) { top: 12px; }
.site-header__burger.is-active .site-header__burger-line:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.site-header__burger.is-active .site-header__burger-line:nth-child(2) { opacity: 0; }
.site-header__burger.is-active .site-header__burger-line:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.site-nav-backdrop {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(6, 11, 22, 0.55);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 0.28s ease;
}
.site-nav-backdrop.is-open { opacity: 1; }
.site-nav-backdrop[hidden] { display: none; }
.site-nav-mobile {
position: fixed;
inset: 0 0 0 auto;
z-index: 100;
width: min(360px, 88vw);
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
background: var(--bg-primary);
border-left: 1px solid var(--border-color);
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav-mobile.is-open { transform: translateX(0); }
.site-nav-mobile[hidden] { display: none; }
body.has-nav-open { overflow: hidden; }
.site-nav-mobile__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border-color);
}
.site-nav-mobile__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.2px;
color: var(--text-primary);
}
.site-nav-mobile__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: none;
padding: 0;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 11px;
color: var(--text-secondary);
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav-mobile__close:hover { color: var(--text-primary); border-color: var(--border-tag); }
.site-nav-mobile__close:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }
.site-nav-mobile__menu {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 6px 0;
}
.site-nav-mobile__menu li { display: flex; }
.site-nav-mobile__menu a,
.site-nav-mobile__menu .site-header__menu-text {
flex: 1;
display: flex;
align-items: center;
min-height: 52px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.2px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
transition: color 0.2s ease;
}
.site-nav-mobile__menu a:hover { color: var(--accent-light); }
.site-nav-mobile__menu .site-header__menu-text {
color: var(--text-secondary);
opacity: 0.55;
cursor: default;
}
.site-nav-mobile__footer {
margin-top: auto;
padding-top: 22px;
display: flex;
flex-direction: column;
gap: 20px;
}
.site-nav-mobile__cta {
width: 100%;
height: 54px;
}
.site-nav-mobile__socials {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav-mobile__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--border-color);
border-radius: 12px;
color: var(--text-secondary);
transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav-mobile__social:hover { color: var(--text-primary); border-color: var(--border-tag); }
.site-nav-mobile__social:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }
.site-nav-mobile__social .itb-social__icon {
width: 19px;
height: 19px;
fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
.site-nav-mobile,
.site-nav-backdrop,
.site-header__burger-line { transition: none; }
}
.itb-has-dropdown {
position: relative;
display: flex;
align-items: center;
}
.itb-dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
font-family: var(--font-heading);
font-weight: 500;
font-size: 14.5px;
line-height: 1;
color: var(--text-secondary);
white-space: nowrap;
cursor: pointer;
transition: color 0.2s ease;
}
.itb-dropdown-toggle:hover,
.itb-has-dropdown.is-open .itb-dropdown-toggle {
color: var(--text-primary);
}
.itb-dropdown-toggle:focus-visible {
outline: 2px solid #2233d6;
outline-offset: 4px;
border-radius: 4px;
}
.itb-dropdown-caret {
width: 7px;
height: 7px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: translateY(-1px) rotate(45deg);
transition: transform 0.25s ease;
opacity: 0.75;
}
.itb-has-dropdown.is-open .itb-dropdown-caret {
transform: translateY(1px) rotate(-135deg);
}
.itb-products-menu {
position: absolute;
top: calc(100% + 14px);
left: 0;
transform: translateY(6px);
width: min(440px, calc(100vw - 40px));
padding: 8px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-md);
box-shadow: 0 18px 48px -20px rgba(3, 8, 20, 0.7), 0 2px 8px -4px rgba(3, 8, 20, 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
z-index: 60;
}
[data-theme="light"] .itb-products-menu {
box-shadow: 0 18px 44px -22px rgba(15, 27, 45, 0.28), 0 2px 8px -4px rgba(15, 27, 45, 0.14);
}
.itb-products-menu::before {
content: "";
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
}
.itb-has-dropdown.is-open .itb-products-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.itb-products-menu--simple {
width: max-content;
min-width: 200px;
max-width: min(320px, calc(100vw - 40px));
}
.itb-products-menu__eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 12px 14px 10px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.itb-products-menu__eyebrow-count {
margin-left: auto;
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--accent-bg);
color: var(--accent-light);
letter-spacing: 0.06em;
}
.itb-products-menu__list + .itb-products-menu__group-label {
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid var(--border-color);
}
.itb-products-menu__list {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
}
.itb-products-menu__item { min-width: 0; }
.itb-products-menu__link {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 11px;
min-width: 0;
padding: 11px 14px;
border-radius: var(--radius-sm);
transition: background 0.18s ease;
}
.itb-products-menu__link:hover,
.itb-products-menu__link:focus-visible {
background: var(--bg-card-hover);
outline: none;
}
.itb-products-menu__link:focus-visible {
box-shadow: inset 0 0 0 1px var(--accent-light);
}
.itb-products-menu__marker {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-muted);
opacity: 0.45;
transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.itb-products-menu__link:hover .itb-products-menu__marker,
.itb-products-menu__link:focus-visible .itb-products-menu__marker {
background: var(--accent);
opacity: 1;
}
.itb-products-menu__name {
min-width: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.15px;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.itb-products-menu__role {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
padding: 3px 9px;
border: 1px solid var(--border-tag);
border-radius: var(--radius-full);
transition: color 0.18s ease, border-color 0.18s ease;
}
.itb-products-menu__link:hover .itb-products-menu__role,
.itb-products-menu__link:focus-visible .itb-products-menu__role {
color: var(--text-secondary);
border-color: var(--border-color);
}
.itb-products-menu__item.is-core .itb-products-menu__link {
background: linear-gradient(100deg, var(--accent-bg), transparent 72%);
}
.itb-products-menu__item.is-core .itb-products-menu__link:hover,
.itb-products-menu__item.is-core .itb-products-menu__link:focus-visible {
background: linear-gradient(100deg, var(--accent-bg-strong), transparent 68%);
}
.itb-products-menu__item.is-core .itb-products-menu__marker {
background: var(--accent);
opacity: 1;
}
.itb-products-menu__item.is-core .itb-products-menu__role {
color: var(--accent-light);
border-color: color-mix(in oklch, var(--accent-light) 42%, transparent);
}
.itb-products-menu__all {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 15px 14px 14px;
border-top: 1px solid var(--border-color);
font-family: var(--font-heading);
font-weight: 600;
font-size: 13.5px;
line-height: 1;
color: var(--accent-light);
transition: color 0.18s ease, background 0.18s ease;
}
.itb-products-menu__all-label { display: inline-flex; align-items: center; }
.itb-products-menu__all:hover,
.itb-products-menu__all:focus-visible {
color: var(--text-primary);
outline: none;
}
.itb-products-menu__all:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
.itb-products-menu__all-arrow {
display: inline-flex;
align-items: center;
margin-left: auto;
line-height: 1;
color: var(--accent-light);
transition: transform 0.18s ease, color 0.18s ease;
}
.itb-products-menu__all:hover .itb-products-menu__all-arrow {
transform: translateX(4px);
color: var(--text-primary);
}
@media (prefers-reduced-motion: reduce) {
.itb-products-menu,
.itb-products-menu__marker,
.itb-dropdown-caret,
.itb-products-menu__all,
.itb-products-menu__all-arrow { transition: none; }
.itb-has-dropdown.is-open .itb-products-menu { transform: translateY(0); }
}
@media (max-width: 1320px) {
.site-header__menu { gap: 20px; }
}
@media (max-width: 1240px) {
.site-header__socials { display: none; }
}
@media (max-width: 900px) {
.site-header__nav { display: none; }
.site-header__cta { display: none; }
.site-header__burger { display: inline-flex; }
}
.site-nav-mobile__menu .itb-has-dropdown {
flex-direction: column;
align-items: stretch;
}
.site-nav-mobile__menu .itb-dropdown-toggle {
flex: 1;
justify-content: space-between;
min-height: 52px;
width: 100%;
font-weight: 600;
font-size: 17px;
letter-spacing: -0.2px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
}
.site-nav-mobile__menu .itb-dropdown-toggle:hover,
.site-nav-mobile__menu .itb-has-dropdown.is-open .itb-dropdown-toggle {
color: var(--accent-light);
}
.site-nav-mobile__menu .itb-products-menu {
position: static;
transform: none;
width: 100%;
max-width: none;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: hidden;
pointer-events: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease, visibility 0s linear 0.28s;
}
.site-nav-mobile__menu .itb-products-menu::before { content: none; }
.site-nav-mobile__menu .itb-products-menu__list { padding-top: 4px; }
.site-nav-mobile__menu .itb-products-menu > :last-child { margin-bottom: 10px; }
.site-nav-mobile__menu .itb-has-dropdown.is-open .itb-products-menu {
visibility: visible;
pointer-events: auto;
max-height: 1200px;
transition: max-height 0.32s ease;
}
.site-nav-mobile__menu .itb-products-menu__eyebrow { display: none; }
.site-nav-mobile__menu .itb-products-menu__group-label {
display: flex;
padding: 14px 12px 6px 14px;
}
.site-nav-mobile__menu .itb-products-menu__group-label + .itb-products-menu__list { padding-top: 0; }
.site-nav-mobile__menu .itb-products-menu__link {
padding: 12px 12px 12px 14px;
min-height: 48px;
}
.site-nav-mobile__menu .itb-products-menu__name { font-size: 15.5px; }
.site-nav-mobile__menu .itb-products-menu__item.is-core .itb-products-menu__link {
background: var(--accent-bg);
}
.site-nav-mobile__menu .itb-products-menu__all {
margin-top: 4px;
padding: 13px 14px;
}
@media (prefers-reduced-motion: reduce) {
.site-nav-mobile__menu .itb-products-menu { transition: visibility 0s; }
}
@media (max-width: 480px) {
.site-header__inner { padding-block: 16px; }
.site-header__logo-img { height: 24px; }
.site-header__logo-text { font-size: 16px; }
}


.itb-hero {
position: relative;
min-height: 820px;
display: flex;
align-items: center;
padding-top: 120px;
background-color: var(--bg-primary);
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
overflow: hidden;
}
.itb-hero--photo {
background-image:
linear-gradient(90deg, rgba(8, 17, 33, 0.92) 0%, rgba(8, 17, 33, 0.55) 45%, rgba(8, 17, 33, 0.15) 100%),
var(--hero-bg);
}
.itb-hero--glow {
background-color: #060c18;
}
.itb-hero--glow::before {
content: "";
position: absolute;
top: -20%;
right: -8%;
width: min(900px, 70vw);
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle at 35% 35%,
var(--hero-glow-core) 0%,
var(--hero-glow-mid) 40%,
rgba(29, 72, 230, 0.05) 65%,
transparent 72%);
filter: blur(10px);
pointer-events: none;
z-index: 0;
}
.itb-hero::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 160px;
background: linear-gradient(to bottom, transparent, var(--bg-primary));
pointer-events: none;
}
.itb-hero .itb-container {
position: relative;
z-index: 1;
}
.itb-hero__badge {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--text-secondary);
background: rgba(218, 220, 226, 0.12);
border: 1px solid rgba(183, 188, 195, 0.2);
border-radius: var(--radius-full);
padding: 8px 16px;
margin-bottom: 24px;
}
.itb-hero__title {
max-width: 980px;
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(38px, 5vw, 58px);
line-height: 1.04;
letter-spacing: -1.74px;
color: var(--text-primary);
margin-bottom: 28px;
}
.itb-hero__title p { margin: 0; }
.itb-hero__title .accent,
.itb-hero__title em {
color: var(--accent-light);
font-style: normal;
}
.itb-hero__subtitle {
max-width: 640px;
font-size: 18px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 40px;
}
.itb-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.itb-hero__actions .btn {
height: 54px;
}
.itb-hero__meta {
margin-top: 36px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-secondary);
}
@media (max-width: 1024px) {
.itb-hero {
min-height: 0;
padding-block: 140px 80px;
}
.itb-hero__subtitle { margin-bottom: 32px; }
}
@media (max-width: 700px) {
.itb-hero {
padding-block: 120px 64px;
background-image:
linear-gradient(180deg, rgba(8, 17, 33, 0.6) 0%, rgba(8, 17, 33, 0.9) 100%),
var(--hero-bg, url('../img/hero-bg.webp'));
}
.itb-hero::after { height: 100px; }
.itb-hero__badge { margin-bottom: 20px; }
.itb-hero__title {
font-size: clamp(28px, 8vw, 38px);
letter-spacing: -1px;
margin-bottom: 20px;
}
.itb-hero__subtitle { font-size: 16px; margin-bottom: 28px; }
.itb-hero__actions { flex-direction: column; align-items: stretch; }
.itb-hero__actions .btn { width: 100%; }
.itb-hero__meta { margin-top: 28px; font-size: 11px; letter-spacing: 1.1px; }
}
@media (max-width: 380px) {
.itb-hero { padding-block: 108px 52px; }
.itb-hero__badge { font-size: 11px; letter-spacing: 1.2px; padding: 7px 13px; }
}


.site-footer {
background: #efece4;
color: #16181f;
border-top: 1px solid #e2ddd1;
padding-top: 64px;
}
.site-footer__inner {
display: grid;
grid-template-columns: minmax(240px, 1fr) auto auto auto;
gap: 60px;
padding-bottom: 48px;
}
.site-footer__brand {
max-width: 300px;
display: flex;
flex-direction: column;
gap: 18px;
}
.site-footer__logo {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.4px;
color: #16181f;
}
.site-footer__logo-img {
height: 34px;
width: auto;
display: block;
}
.site-footer__tagline {
font-size: 14.5px;
line-height: 1.55;
color: #565c6a;
}
.site-footer__brand .btn {
align-self: flex-start;
padding: 13px 22px;
font-size: 14.5px;
background: #152040;
color: #fff;
border-color: #152040;
}
.site-footer__brand .btn:hover { background: #1d2c58; }
.site-footer__socials {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
margin: 4px 0 0;
padding: 0;
}
.site-footer__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid #ddd8cc;
border-radius: 11px;
color: #565c6a;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.site-footer__social:hover,
.site-footer__social:focus-visible {
color: #2233d6;
border-color: #2233d6;
background: rgba(34, 51, 214, 0.06);
}
.site-footer__social:focus-visible { outline: 2px solid #2233d6; outline-offset: 2px; }
.site-footer__social .itb-social__icon {
width: 20px;
height: 20px;
fill: currentColor;
}
.site-footer__columns {
display: contents;
}
.site-footer__column {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 150px;
}
.site-footer__heading {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #8a8578;
margin-bottom: 4px;
}
.site-footer__links {
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer__links a {
font-size: 15px;
color: #3c4250;
transition: color 0.2s ease;
}
.site-footer__links a:hover { color: #152040; }
.site-footer__contacts {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 240px;
}
.site-footer__contacts > div { display: flex; flex-direction: column; gap: 3px; }
.site-footer__contacts .site-footer__phone,
.site-footer__contacts .site-footer__email a,
.site-footer__contacts .site-footer__address {
font-size: 16px;
color: #16181f;
}
.site-footer__contacts .site-footer__address {
font-size: 14px;
line-height: 1.5;
color: #565c6a;
}
.site-footer__contacts .site-footer__phone-link {
font-size: 16px;
color: #16181f;
transition: color 0.2s ease;
}
.site-footer__contacts .site-footer__phone-link:hover { color: #2233d6; }
.site-footer__contacts .site-footer__phone-note {
font-size: 13px;
line-height: 1.4;
color: #565c6a;
margin-bottom: 4px;
}
.site-footer__contacts .site-footer__label {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #a8a396;
}
.site-footer__legal {
padding-block: 24px;
border-top: 1px solid #e2ddd1;
}
.site-footer__legal-links {
display: flex;
flex-wrap: wrap;
gap: 8px 0;
margin: 0 0 14px;
padding: 0;
list-style: none;
font-size: 13px;
}
.site-footer__legal-links a {
color: #6f6a5e;
text-decoration: none;
}
.site-footer__legal-links a:hover {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.site-footer__legal-links li:not(:last-child)::after {
content: '·';
margin-inline: 10px;
color: #b8b3a6;
}
.site-footer__okved {
margin: 0;
max-width: 90ch;
font-size: 12px;
line-height: 1.6;
color: #a8a396;
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-block: 0 28px;
font-size: 13px;
color: #8a8578;
}
.site-footer__req {
display: inline-flex;
gap: 24px;
flex-wrap: wrap;
font-family: var(--font-mono);
}
@media (max-width: 1000px) {
.site-footer { padding-top: 48px; }
.site-footer__inner {
grid-template-columns: 1fr 1fr;
gap: 40px;
padding-bottom: 36px;
}
.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.site-footer { padding-top: 40px; }
.site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
.site-footer__column,
.site-footer__contacts { min-width: 0; }
.site-footer__brand { max-width: none; }
.site-footer__brand .btn { align-self: stretch; }
.site-footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding-block: 0 22px;
}
.site-footer__req { gap: 6px 18px; }
.site-footer__legal { padding-block: 20px; }
.site-footer__legal-links {
flex-direction: column;
gap: 10px;
}
.site-footer__legal-links li:not(:last-child)::after { content: none; }
}


body.page-template-template-services,
body.single-service {
--hero-glow-core: rgba(77, 92, 255, 0.55);
--hero-glow-mid:  rgba(60, 80, 210, 0.30);
}
body.page-template-template-solutions {
--hero-glow-core: rgba(70, 110, 200, 0.55);
--hero-glow-mid:  rgba(50, 90, 180, 0.30);
}
body.page-template-template-products,
body.single-product {
--hero-glow-core: rgba(120, 70, 220, 0.55);
--hero-glow-mid:  rgba(95, 55, 190, 0.30);
}
body.page-template-template-cases {
--hero-glow-core: rgba(63, 127, 230, 0.55);
--hero-glow-mid:  rgba(45, 100, 205, 0.30);
}
body.page-template-template-industries {
--hero-glow-core: rgba(96, 84, 232, 0.55);
--hero-glow-mid:  rgba(76, 64, 200, 0.30);
}
body.page-template-template-about {
--hero-glow-core: rgba(46, 92, 235, 0.55);
--hero-glow-mid:  rgba(35, 70, 200, 0.30);
}


.itb-section--tasks {
background: #f4f5f8;
color: #1f2025;
}
[data-theme="light"] .itb-section--tasks { background: #f4f5f8; }
.itb-section--tasks .itb-section__title { color: #16181f; }
.itb-section--tasks .itb-section__subtitle { color: #565c6a; }
.itb-tasks__topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
margin-bottom: 44px;
}
.itb-tasks__title {
color: #16181f;
max-width: 620px;
}
.itb-tasks__nav {
display: flex;
align-items: center;
padding-top: 8px;
}
.itb-tasks__subtitle {
max-width: 260px;
font-size: 15px;
line-height: 1.5;
color: #565c6a;
text-align: right;
}
.itb-tasks__carousel {
position: relative;
}
.itb-cards--tasks {
display: flex;
gap: var(--tasks-gap, 24px);
overflow-x: auto;
--tasks-pad-x: 16px;
padding: 12px var(--tasks-pad-x) 22px;
margin-inline: calc(-1 * var(--tasks-pad-x));
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-inline: var(--tasks-pad-x);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.itb-cards--tasks::-webkit-scrollbar { display: none; }
.itb-cards--tasks { cursor: grab; }
.itb-cards--tasks.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
user-select: none;
}
.itb-cards--tasks.is-dragging a { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.itb-cards--tasks { scroll-behavior: auto; }
}
.itb-tasks__pager {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin-top: 34px;
}
.itb-tasks__arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1.5px solid #c9ccd8;
background: #fff;
color: #152040;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.itb-tasks__arrow:hover:not(:disabled) {
border-color: #2233d6;
color: #2233d6;
}
.itb-tasks__arrow:focus-visible {
outline: 2px solid #2233d6;
outline-offset: 3px;
}
.itb-tasks__arrow:disabled {
opacity: 0.35;
cursor: default;
}
.itb-tasks__dots {
display: flex;
align-items: center;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.itb-tasks__dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: #c4c8d4;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, width 0.25s ease;
}
.itb-tasks__dot:hover { background: #9aa0b8; }
.itb-tasks__dot:focus-visible {
outline: 2px solid #2233d6;
outline-offset: 2px;
}
.itb-tasks__dot.is-active {
width: 26px;
border-radius: 99px;
background: #2233d6;
}
@media (max-width: 1000px) {
.itb-cards--tasks { --tasks-gap: 18px; }
}
@media (max-width: 760px) {
.itb-tasks__topbar { flex-direction: column; gap: 20px; margin-bottom: 32px; }
.itb-tasks__nav { width: 100%; justify-content: flex-start; padding-top: 0; }
.itb-tasks__subtitle { max-width: none; text-align: left; }
.itb-tasks__pager { gap: 16px; margin-top: 26px; }
.itb-tasks__arrow { width: 44px; height: 44px; }
}
.itb-card--task {
flex: 0 0 var(--tasks-card-w, 400px);
width: var(--tasks-card-w, 400px);
min-height: 280px;
background: #fff;
border-radius: 14px;
padding: 39px 32px;
display: flex;
flex-direction: column;
gap: 18px;
scroll-snap-align: start;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-card--task:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
.itb-card--task { transition: box-shadow 0.3s ease; }
.itb-card--task:hover { transform: none; }
}
.itb-card--task .itb-card__number {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
color: #152040;
}
.itb-card--task .itb-card__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 27px;
line-height: 1.12;
letter-spacing: -0.54px;
color: #1f2025;
}
.itb-card--task .itb-card__desc {
font-size: 14.5px;
line-height: 1.55;
color: #444957;
}
.itb-card--task .itb-card__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
margin-top: auto;
}
.itb-card--task .itb-tag {
font-family: var(--font-heading);
font-weight: 700;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: #152040;
background: #efeffb;
border: none;
border-radius: 99px;
padding: 6px 14px;
}
.itb-card--highlighted {
background: #2233d6;
}
.itb-card--highlighted .itb-card__number { color: rgba(255, 255, 255, 0.65); }
.itb-card--highlighted .itb-card__title { color: #fff; }
.itb-card--highlighted .itb-card__desc { color: rgba(255, 255, 255, 0.85); }
.itb-card--highlighted .itb-tag {
color: #fff;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.itb-card--cta {
flex: 0 0 var(--tasks-card-w, 400px);
width: var(--tasks-card-w, 400px);
min-height: 280px;
background: #d9dae2;
border: 1.5px dashed #9aa0c4;
border-radius: 14px;
padding: 34px 36px;
display: flex;
flex-direction: column;
scroll-snap-align: start;
transition: background 0.2s ease;
}
.itb-card--cta__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 27px;
line-height: 1.12;
letter-spacing: -0.54px;
color: #16181f;
margin-bottom: 14px;
}
.itb-card--cta__desc {
font-size: 14.5px;
line-height: 1.5;
color: #444957;
margin-bottom: auto;
}
.itb-card--cta__btn {
align-self: stretch;
height: 54px;
margin-top: 20px;
background: #1d2fd6;
}
.itb-card--cta__btn:hover { background: #1626b8; }
@media (max-width: 640px) {
.itb-card--task,
.itb-card--cta {
min-height: 0;
padding: 28px 24px;
}
.itb-card--task { gap: 14px; }
.itb-card--task .itb-card__title,
.itb-card--cta__title { font-size: 23px; letter-spacing: -0.4px; }
.itb-card--task .itb-card__tags { justify-content: flex-start; padding-top: 4px; }
}


.itb-section--solutions {
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
background: #efece4;
border-top: 1px solid #eae6dd;
border-bottom: 1px solid #eae6dd;
color: #16181f;
}
[data-theme="light"] .itb-section--solutions { background: #efece4; }
.itb-solutions__grid {
display: grid;
grid-template-columns: 340px 1fr;
gap: 80px;
align-items: start;
}
.itb-solutions__aside {
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
}
.itb-solutions__eyebrow {
color: #2233d6;
letter-spacing: 2px;
margin-bottom: 24px;
position: relative;
padding-left: 38px;
}
.itb-solutions__eyebrow::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 2px;
background: #2233d6;
border-radius: 2px;
}
.itb-solutions__aside .itb-section__title {
color: #2b3a6b;
font-size: 54px;
letter-spacing: -1.9px;
line-height: 1;
margin-bottom: 24px;
}
.itb-solutions__desc {
font-size: 16px;
line-height: 1.56;
color: #565c6a;
margin-bottom: 40px;
}
.itb-solutions__aside-footer {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.btn--dark {
background: #152040;
color: #fff;
border-radius: 10px;
height: 52px;
}
.btn--dark:hover { background: #1d2c58; }
.itb-solutions__count {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
color: #8a8f9c;
}
.itb-card--solution {
display: grid;
grid-template-columns: minmax(220px, 1.1fr) 1.4fr auto;
gap: 30px;
align-items: start;
padding: 28px 30px;
border-top: 1px solid #ddd8cc;
cursor: pointer;
transition:
background 0.28s var(--ease-out-quint),
transform 0.28s var(--ease-out-quint),
box-shadow 0.36s var(--ease-out-quint),
padding 0.36s var(--ease-out-quint);
}
.itb-solutions__list > .itb-card--solution:first-child { border-top: none; }
.itb-card--solution:not(.is-active):hover {
background: rgba(34, 51, 214, 0.04);
transform: translateX(4px);
}
.itb-card--solution:focus-visible { outline: 2px solid #2233d6; outline-offset: -2px; }
.itb-card--solution.is-active {
border-top: none;
background: #fff;
border-radius: 18px;
padding: 28px 30px;
box-shadow: 0 26px 54px -32px rgba(21, 32, 64, 0.45);
position: relative;
cursor: default;
}
.itb-card--solution.is-active::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 4px;
border-radius: 0 4px 4px 0;
background: #2233d6;
transform-origin: top;
animation: itb-solution-bar 0.45s var(--ease-out-quint) both;
}
@keyframes itb-solution-bar {
from { transform: scaleY(0); opacity: 0; }
to   { transform: scaleY(1); opacity: 1; }
}
.itb-card--solution .itb-card__head {
grid-column: 1;
grid-row: 1 / 3;
align-self: start;
}
.itb-card--solution .itb-card__category {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #2233d6;
margin-bottom: 8px;
}
.itb-card--solution .itb-card__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 22px;
line-height: 1.18;
letter-spacing: -0.44px;
color: #16181f;
}
.itb-card--solution .itb-card__desc {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
font-size: 14.5px;
line-height: 1.52;
color: #565c6a;
}
.itb-card--solution .itb-card__link {
grid-column: 3;
grid-row: 1 / 3;
align-self: center;
font-family: var(--font-heading);
font-weight: 600;
font-size: 14px;
color: #2233d6;
white-space: nowrap;
}
.itb-card--solution .itb-card__link:hover { text-decoration: underline; }
.itb-card--solution-nolink {
grid-template-columns: minmax(220px, 1.1fr) 1.4fr;
}
.itb-card--solution-nolink .itb-card__points { grid-column: 1 / 3; }
.itb-card--solution .itb-card__points {
grid-column: 1 / 4;
grid-row: 3;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
min-height: 0;
transition: grid-template-rows 0.4s var(--ease-out-quint);
}
.itb-card--solution.is-active .itb-card__points {
grid-template-rows: 1fr;
}
.itb-card--solution .itb-card__points-inner {
min-height: 0;
margin: 20px 0 0;
padding: 18px 0 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px 26px;
border-top: 1px solid #eae6dd;
opacity: 0;
transform: translateY(6px);
transition:
opacity 0.3s var(--ease-out-quint) 0.08s,
transform 0.3s var(--ease-out-quint) 0.08s;
}
.itb-card--solution.is-active .itb-card__points-inner {
opacity: 1;
transform: translateY(0);
}
.itb-card--solution .itb-card__points li {
position: relative;
padding-left: 16px;
font-size: 14px;
color: #3c4250;
}
.itb-card--solution .itb-card__points li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 7px;
height: 7px;
border-radius: 2px;
background: #2233d6;
}
@media (max-width: 1000px) {
.itb-solutions__grid { grid-template-columns: 1fr; gap: 40px; }
.itb-solutions__aside { position: static; }
.itb-solutions__aside .itb-section__title {
font-size: clamp(30px, 6vw, 44px);
letter-spacing: -1.2px;
}
.itb-solutions__desc { margin-bottom: 28px; }
.itb-card--solution {
grid-template-columns: 1fr;
gap: 16px 20px;
}
.itb-card--solution .itb-card__head {
grid-column: 1;
grid-row: auto;
}
.itb-card--solution .itb-card__desc,
.itb-card--solution .itb-card__link {
grid-column: 1;
grid-row: auto;
margin-top: 8px;
}
.itb-card--solution .itb-card__points { grid-column: 1; }
.itb-card--solution:not(.is-active):hover { transform: none; }
}
@media (max-width: 640px) {
.itb-solutions__grid { gap: 32px; }
.itb-card--solution { padding: 22px 0; gap: 12px; }
.itb-card--solution.is-active { padding: 24px 20px; }
.itb-card--solution.is-active::before { top: 14px; bottom: 14px; }
.itb-card--solution .itb-card__title { font-size: 20px; }
.itb-card--solution .itb-card__desc,
.itb-card--solution .itb-card__link { margin-top: 0; }
.itb-card--solution .itb-card__points-inner {
flex-direction: column;
gap: 10px;
margin-top: 16px;
padding-top: 16px;
}
.itb-solutions__aside-footer { gap: 14px; }
.itb-solutions__aside-footer .btn--dark { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
.itb-card--solution,
.itb-card--solution .itb-card__points,
.itb-card--solution .itb-card__points-inner {
transition: background 0.01ms, color 0.01ms, border-color 0.01ms;
}
.itb-card--solution:not(.is-active):hover { transform: none; }
.itb-card--solution.is-active::before { animation: none; }
.itb-card--solution .itb-card__points-inner {
opacity: 1;
transform: none;
}
}


.itb-section--products {
background: var(--bg-primary);
}
.itb-section--products .itb-section__header { max-width: 680px; }
.itb-section--products .itb-container {
max-width: 1600px;
padding-inline: clamp(20px, 4vw, 48px);
}
.itb-diagram {
position: relative;
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(440px, 540px) minmax(300px, 1fr);
align-items: center;
gap: 90px;
margin-top: 48px;
}
.itb-diagram__col {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.itb-diagram__col--left { align-items: flex-start; }
.itb-diagram__col--right { align-items: flex-end; }
.itb-diagram__col .itb-node { width: 380px; max-width: 100%; }
.itb-diagram__core { min-width: 0; }
.itb-diagram__core .itb-card--core { width: 100%; }
.itb-diagram__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 1;
}
.itb-diagram__line {
fill: none;
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 5 7;
animation: itb-dash-run 1s linear infinite;
}
@keyframes itb-dash-run {
to { stroke-dashoffset: -24; }
}
.itb-diagram__col,
.itb-diagram__core { position: relative; z-index: 2; }
.itb-node {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 4px;
border-bottom: 1px solid var(--border-color);
}
.itb-node:last-child { border-bottom: none; }
.itb-node__num {
flex: 0 0 44px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(122, 160, 255, 0.30);
border-radius: 12px;
background: var(--bg-card);
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
color: var(--accent-light);
}
.itb-node__body { min-width: 0; flex: 1 1 auto; }
.itb-node__head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.itb-node__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.2px;
color: var(--text-primary);
}
.itb-node__link {
color: inherit;
transition: color 0.2s ease;
}
.itb-node__link:hover { color: var(--accent-light); }
.itb-node--link { position: relative; cursor: pointer; }
.itb-node--link::before {
content: '';
position: absolute;
inset: 0 -16px;
border-radius: var(--radius-sm);
background: transparent;
transition: background 0.2s ease, box-shadow 0.2s ease;
pointer-events: none;
}
.itb-node--link .itb-node__link::after {
content: '';
position: absolute;
inset: 0 -16px;
border-radius: var(--radius-sm);
z-index: 1;
}
.itb-node--link > * { position: relative; }
.itb-node--link:hover::before { background: var(--bg-card-hover); }
.itb-node--link:hover .itb-node__link { color: var(--accent-light); }
.itb-node--link:hover .itb-node__num {
border-color: rgba(122, 160, 255, 0.55);
color: var(--accent-light);
}
.itb-node--link:hover .itb-node__arrow {
color: var(--accent-light);
transform: translateX(3px);
}
.itb-diagram__col--right .itb-node--link:hover .itb-node__arrow {
transform: scaleX(-1) translateX(3px);
}
.itb-node--link:focus-within::before {
background: var(--bg-card-hover);
box-shadow: inset 0 0 0 1px var(--accent-light);
}
.itb-node--link .itb-node__link:focus-visible { outline: none; }
.itb-node--link:focus-within .itb-node__arrow { color: var(--accent-light); }
.itb-node__role {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.3px;
color: var(--accent);
}
.itb-node__desc {
margin-top: 4px;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-node__arrow {
flex: 0 0 auto;
align-self: center;
margin-left: auto;
padding-right: 6px;
font-size: 19px;
line-height: 1;
color: var(--text-muted);
transition: color 0.2s ease, transform 0.2s ease;
}
.itb-diagram__col--right .itb-node { flex-direction: row-reverse; text-align: right; }
.itb-diagram__col--right .itb-node__head { justify-content: flex-end; }
.itb-diagram__col--right .itb-node__arrow {
margin-left: 0;
margin-right: auto;
padding-right: 0;
padding-left: 6px;
transform: scaleX(-1);
}
.itb-diagram__col--right .itb-node__arrow:hover { transform: scaleX(-1) translateX(3px); }
.itb-card--core {
width: 100%;
background: linear-gradient(150deg, #16235a 0%, #0f1830 100%);
border: 1px solid rgba(122, 160, 255, 0.30);
border-radius: 22px;
padding: 35px;
display: flex;
flex-direction: column;
gap: 16px;
color: #fff;
}
.itb-card--core .itb-card__img {
width: 100%;
border-radius: 12px;
margin-bottom: 8px;
}
.itb-card--core .itb-card__head { display: flex; align-items: baseline; gap: 12px; }
.itb-card--core .itb-card__logo {
margin-left: auto;
align-self: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
color: #fff;
}
.itb-card--core .itb-card__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 34px;
letter-spacing: -0.85px;
color: #fff;
}
.itb-card--core .itb-card__role {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.itb-card--core .itb-card__subtitle,
.itb-card--core .itb-card__desc {
font-size: 14.5px;
line-height: 1.55;
color: #aeb9d6;
}
.itb-card--core .itb-card__subtitle + .itb-card__desc { margin-top: -8px; }
.itb-card--core .itb-card__points {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.itb-card--core .itb-card__points li {
position: relative;
padding: 13px 18px 13px 35px;
font-size: 13.5px;
color: #dbe2f2;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 11px;
}
.itb-card--core .itb-card__points li::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 2px;
background: #5a8bff;
}
.itb-card--core .itb-card__link {
margin-top: 0;
align-self: flex-start;
background: #2233d6;
border: 1px solid transparent;
border-radius: 11px;
padding: 12px 22px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 14.5px;
color: #fff;
transition: background 0.2s ease;
}
.itb-card--core .itb-card__link:hover { background: #1a279f; }
.itb-card--module {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 4px 22px;
align-items: center;
padding: 22px 0;
border-top: 1px solid var(--border-color);
}
.itb-card--module:first-of-type { border-top: none; }
.itb-card--module .itb-card__img { display: none; }
.itb-card--module .itb-card__number {
grid-row: 1 / 3;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-tag);
border-radius: 12px;
font-family: var(--font-mono);
font-weight: 400;
font-size: 14px;
color: var(--text-secondary);
}
.itb-card--module .itb-card__head {
grid-column: 2;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.itb-card--module .itb-card__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 20px;
letter-spacing: -0.3px;
color: var(--text-primary);
}
.itb-card--module .itb-card__role {
font-family: var(--font-mono);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-muted);
}
.itb-card--module .itb-card__subtitle { display: none; }
.itb-card--module .itb-card__desc {
grid-column: 2;
grid-row: 2;
font-size: 14px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-card--module .itb-card__points { display: none; }
.itb-card--module .itb-card__link {
grid-column: 3;
grid-row: 1 / 3;
font-size: 22px;
color: var(--text-secondary);
transition: color 0.2s ease;
font-size: 0;
}
.itb-card--module .itb-card__link::after {
content: "→";
font-size: 22px;
}
.itb-card--module .itb-card__link:hover { color: var(--accent-light); }
.itb-products__footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 56px;
}
.itb-products__tags {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.itb-products__tags-label {
font-family: var(--font-mono);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.5px;
color: var(--text-secondary);
margin-right: 4px;
}
@media (max-width: 1000px) {
.itb-diagram {
grid-template-columns: 1fr;
gap: 24px;
max-width: 640px;
margin-inline: auto;
}
.itb-diagram__core { order: -1; }
.itb-diagram__lines { display: none; }
.itb-diagram__col--left,
.itb-diagram__col--right { align-items: stretch; }
.itb-diagram__col .itb-node { width: 100%; }
.itb-diagram__col--right .itb-node { flex-direction: row; text-align: left; }
.itb-diagram__col--right .itb-node__head { justify-content: flex-start; }
.itb-diagram__col--right .itb-node__arrow {
margin-left: auto;
margin-right: 0;
padding-left: 0;
padding-right: 6px;
transform: none;
}
.itb-diagram__col--right .itb-node--link:hover .itb-node__arrow { transform: translateX(3px); }
}
@media (max-width: 640px) {
.itb-card--core { padding: 26px 22px; border-radius: 18px; }
.itb-card--core .itb-card__title { font-size: 27px; letter-spacing: -0.6px; }
.itb-card--core .itb-card__logo { width: 28px; height: 28px; }
.itb-card--core .itb-card__link { align-self: stretch; text-align: center; }
.itb-card--core .itb-card__points li { padding: 12px 14px 12px 32px; }
.itb-node { gap: 12px; padding: 16px 0; }
.itb-node__num { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; }
.itb-node__title { font-size: 16px; }
.itb-node__arrow { padding-right: 0; font-size: 17px; }
.itb-products__footer { margin-top: 40px; }
.itb-products__tags { justify-content: flex-start; }
.itb-products__tags-label { flex-basis: 100%; margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.itb-diagram__line { animation: none; }
}


.itb-section--audience,
.itb-section--why {
color: #16181f;
}
.itb-section--why { background: #efece4; }
.itb-section--audience { background: #f4f1ea; }
[data-theme="light"] .itb-section--why { background: #efece4; }
[data-theme="light"] .itb-section--audience { background: #f4f1ea; }
.itb-section--audience .itb-section__title,
.itb-section--why .itb-section__title {
color: #16181f;
}
.itb-section--audience .itb-section__subtitle,
.itb-section--why .itb-section__subtitle {
color: #565c6a;
}
.itb-audience__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px 40px;
}
.itb-audience__item {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 26px 0 26px 28px;
border-top: 1px solid #ddd8cc;
}
.itb-audience__item:nth-child(-n+3) { border-top: none; }
.itb-audience__item::before {
content: "";
position: absolute;
left: 0;
top: 33px;
width: 8px;
height: 8px;
border-radius: 2px;
background: #2233d6;
}
.itb-audience__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.3px;
color: #16181f;
}
.itb-audience__desc {
font-size: 14.5px;
line-height: 1.5;
color: #565c6a;
}
.itb-why__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: start;
}
.itb-why__item {
position: relative;
background: #fff;
border: 1px solid #eae6dd;
border-radius: 14px;
overflow: hidden;
transition:
border-color 0.35s ease,
box-shadow 0.35s ease;
}
.itb-why__item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #2233d6;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1;
}
.itb-why__item:hover::before,
.itb-why__item.is-open::before {
transform: scaleY(1);
}
.itb-why__item:hover {
border-color: #cfd6f2;
box-shadow: 0 22px 44px -26px rgba(29, 47, 214, 0.4);
}
.itb-why__item.is-open {
border-color: #b9c4f0;
box-shadow: 0 20px 40px -28px rgba(29, 47, 214, 0.35);
}
.itb-why__head {
width: 100%;
display: flex;
align-items: flex-start;
gap: 16px;
padding: 24px 24px 24px 28px;
background: none;
border: 0;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
}
.itb-why__title {
flex: 1;
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
line-height: 1.3;
letter-spacing: -0.3px;
color: #16181f;
transition: color 0.3s ease;
}
.itb-why__item:hover .itb-why__title,
.itb-why__item.is-open .itb-why__title {
color: #1d2fd6;
}
.itb-why__toggle {
position: relative;
flex: none;
width: 26px;
height: 26px;
margin-top: 1px;
border-radius: 50%;
border: 1.5px solid #d6d0c4;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.itb-why__toggle::before,
.itb-why__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 1.6px;
background: #2233d6;
transform: translate(-50%, -50%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-why__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.itb-why__item:hover .itb-why__toggle { border-color: #b9c4f0; }
.itb-why__item.is-open .itb-why__toggle {
border-color: #2233d6;
background: rgba(34, 51, 214, 0.08);
}
.itb-why__item.is-open .itb-why__toggle::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.itb-why__head:focus-visible {
outline: 2px solid #2233d6;
outline-offset: -3px;
border-radius: 12px;
}
.itb-why__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-why__item.is-open .itb-why__panel {
grid-template-rows: 1fr;
}
.itb-why__panel > .itb-why__desc {
overflow: hidden;
min-height: 0;
margin: 0;
padding: 0 26px 0 28px;
font-size: 14px;
line-height: 1.55;
color: #565c6a;
opacity: 0;
transition: opacity 0.3s ease, padding-bottom 0.4s ease;
}
.itb-why__item.is-open .itb-why__panel > .itb-why__desc {
opacity: 1;
padding-bottom: 26px;
}
@media (prefers-reduced-motion: reduce) {
.itb-why__item,
.itb-why__item::before,
.itb-why__toggle,
.itb-why__toggle::before,
.itb-why__toggle::after,
.itb-why__title,
.itb-why__panel,
.itb-why__panel > .itb-why__desc { transition: none; }
}
@media (max-width: 1000px) {
.itb-audience__grid,
.itb-why__grid { grid-template-columns: repeat(2, 1fr); }
.itb-audience__item:nth-child(-n+3) { border-top: 1px solid #ddd8cc; }
.itb-audience__item:nth-child(-n+2) { border-top: none; }
}
@media (max-width: 620px) {
.itb-audience__grid,
.itb-why__grid { grid-template-columns: 1fr; }
.itb-audience__grid { gap: 0; }
.itb-audience__item:nth-child(-n+2) { border-top: 1px solid #ddd8cc; }
.itb-audience__item:first-child { border-top: none; }
}
.itb-audience__grid .itb-audience__item--feature {
grid-column: span 2;
margin-top: 12px;
padding: 30px 28px;
border-top: none;
border-radius: 14px;
background: linear-gradient(135deg, #2a54ea, #1738b4);
}
.itb-audience__grid .itb-audience__item--feature::before { display: none; }
.itb-audience__item--feature .itb-audience__title { color: #fff; }
.itb-audience__item--feature .itb-audience__desc { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 620px) {
.itb-audience__grid .itb-audience__item--feature { grid-column: auto; }
}


.itb-section--clients {
background: #fbfbf9;
color: #16181f;
}
[data-theme="light"] .itb-section--clients { background: #fbfbf9; }
.itb-section--clients .itb-section__header { align-items: flex-start; text-align: left; }
.itb-section--clients .itb-section__title { color: #16181f; }
.itb-clients-marquee {
margin-top: 32px;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.itb-clients-marquee__viewport {
display: flex;
width: max-content;
}
.itb-clients-marquee:hover .itb-clients-marquee__track {
animation-play-state: paused;
}
.itb-clients-marquee__track {
animation: itb-clients-scroll 60s linear infinite;
}
@keyframes itb-clients-scroll {
to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
.itb-clients-marquee { overflow-x: auto; }
.itb-clients-marquee__track { animation: none; }
.itb-clients-marquee__track[aria-hidden="true"] { display: none; }
}
.itb-clients {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 20px;
flex: 0 0 auto;
padding-inline: 10px;
}
.itb-clients__item {
flex: 0 0 208px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 148px;
padding: 28px 24px;
background: #fff;
border: 1px solid #ecece6;
border-radius: 16px;
text-align: center;
transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.itb-clients__item:hover {
border-color: #dcdccf;
box-shadow: 0 18px 40px -28px rgba(21, 32, 64, 0.35);
transform: translateY(-4px);
}
.itb-clients__logo {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
width: 100%;
}
.itb-clients__img {
max-height: 100%;
max-width: 150px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1);
opacity: 0.62;
transition: filter 0.35s ease, opacity 0.35s ease;
}
.itb-clients__item:hover .itb-clients__img {
filter: grayscale(0);
opacity: 1;
}
.itb-clients__mono {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #eef0fc;
color: #2233d6;
font-family: var(--font-heading);
font-weight: 700;
font-size: 20px;
transition: background 0.35s ease, color 0.35s ease;
}
.itb-clients__item:hover .itb-clients__mono {
background: #2233d6;
color: #fff;
}
.itb-clients__name {
font-family: var(--font-heading);
font-weight: 600;
font-size: 14px;
line-height: 1.3;
letter-spacing: -0.2px;
color: #565c6a;
transition: color 0.35s ease;
}
.itb-clients__item:hover .itb-clients__name { color: #16181f; }
@media (prefers-reduced-motion: reduce) {
.itb-clients__item,
.itb-clients__img,
.itb-clients__mono,
.itb-clients__name { transition: none; }
.itb-clients__item:hover { transform: none; }
}
@media (max-width: 560px) {
.itb-clients { gap: 14px; }
.itb-clients__item { flex-basis: 150px; min-height: 132px; padding: 22px 16px; }
}


.itb-section--cases {
background: #fff;
color: #16181f;
}
[data-theme="light"] .itb-section--cases { background: #fff; }
.itb-section--cases .itb-section__topbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
}
.itb-section--cases .itb-section__topbar .itb-section__header { margin-bottom: 0; }
.itb-section--cases .itb-section__title { color: #16181f; }
.itb-section--cases .itb-section__eyebrow { color: #2233d6; }
.itb-section__link {
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
color: #152040;
white-space: nowrap;
}
.itb-section__link:hover { text-decoration: underline; }
.itb-cards--cases {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.itb-card--case {
background: #fff;
border: 1px solid #e6e8ee;
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.itb-card--case:hover {
border-color: #c9d0e6;
box-shadow: 0 20px 44px -30px rgba(21, 32, 64, 0.4);
}
.itb-card--case .itb-card__media {
display: block;
aspect-ratio: 411 / 172;
overflow: hidden;
}
.itb-card--case .itb-card__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.itb-card--case .itb-tag {
margin: 22px 24px 0;
align-self: flex-start;
color: #2233d6;
background: #eef0fc;
border: 1px solid #dfe3f8;
}
.itb-card--case .itb-card__title {
margin: 14px 24px 0;
font-family: var(--font-heading);
font-weight: 700;
font-size: 19px;
line-height: 1.2;
letter-spacing: -0.3px;
color: #16181f;
}
.itb-card--case .itb-card__title a { color: inherit; }
.itb-card--case .itb-card__title a:hover { color: #2233d6; }
.itb-card--case .itb-card__desc {
margin: 10px 24px 26px;
font-size: 14px;
line-height: 1.5;
color: #565c6a;
}
@media (max-width: 900px) {
.itb-cards--cases { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 640px) {
.itb-section--cases .itb-section__topbar {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: 28px;
}
.itb-cards--cases { max-width: none; gap: 18px; }
.itb-card--case .itb-tag { margin: 18px 20px 0; }
.itb-card--case .itb-card__title { margin: 12px 20px 0; }
.itb-card--case .itb-card__desc { margin: 10px 20px 22px; }
}


.itb-section--process {
background: #f4f2ec;
color: #16181f;
}
[data-theme="light"] .itb-section--process { background: #f4f2ec; }
.itb-section--process .itb-section__title { color: #16181f; }
.itb-section--process .itb-section__subtitle { color: #565c6a; }
.itb-process {
position: relative;
}
.itb-steps {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.itb-steps__item {
position: relative;
}
.itb-steps__item:not(:last-child)::before {
content: "";
position: absolute;
top: 24px;
left: 48px;
width: calc(100% - 48px + 16px);
height: 0;
border-top: 1.5px dashed #b9bfd6;
transform: translateY(-50%);
z-index: 0;
}
.itb-steps__item:last-child::before { display: none; }
.itb-steps__btn {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
padding: 0;
background: none;
border: 0;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
}
.itb-steps__btn:disabled { cursor: default; }
.itb-steps__num {
width: 48px;
height: 48px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid #2233d6;
border-radius: 50%;
background: #fff;
font-family: var(--font-mono);
font-weight: 700;
font-size: 14px;
color: #2233d6;
transition: background-color 0.3s ease, color 0.3s ease,
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.3s ease;
}
.itb-steps__btn:not(:disabled):hover .itb-steps__num {
transform: translateY(-3px);
box-shadow: 0 12px 24px -14px rgba(34, 51, 214, 0.5);
}
.itb-steps__btn.is-active .itb-steps__num {
background: #2233d6;
color: #fff;
transform: none;
}
.itb-steps__btn:focus-visible {
outline: 2px solid #2233d6;
outline-offset: 4px;
border-radius: 10px;
}
.itb-steps__text {
font-family: var(--font-heading);
font-weight: 600;
font-size: 13.5px;
line-height: 1.3;
color: #444957;
text-wrap: balance;
transition: color 0.3s ease;
}
.itb-steps__btn:not(:disabled):hover .itb-steps__text,
.itb-steps__btn.is-active .itb-steps__text {
color: #1d2fd6;
}
.itb-steps__pop {
--pop-x: 26px;
position: absolute;
z-index: 20;
width: min(420px, calc(100% - 8px));
background: #fff;
border-radius: 16px;
padding: 24px 28px;
box-shadow: 0 26px 54px -24px rgba(10, 14, 30, 0.4);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-steps__pop[hidden] { display: none; }
.itb-steps__pop.is-open {
opacity: 1;
transform: translateY(0);
}
.itb-steps__pop::before {
content: "";
position: absolute;
top: -8px;
left: var(--pop-x);
width: 16px;
height: 16px;
margin-left: -8px;
background: #fff;
border-radius: 3px 0 0 0;
transform: rotate(45deg);
}
.itb-steps__pop-title {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
line-height: 1.3;
letter-spacing: -0.3px;
color: #16181f;
margin-bottom: 10px;
}
.itb-steps__pop-desc {
font-size: 15px;
line-height: 1.6;
color: #565c6a;
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.itb-steps__num,
.itb-steps__text,
.itb-steps__pop { transition: none; }
}
@media (min-width: 1101px) {
.postid-185 .itb-steps { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.postid-185 .itb-steps__num { width: 60px; height: 60px; font-size: 17px; }
.postid-185 .itb-steps__text { font-size: 15.5px; }
.postid-185 .itb-steps__item:not(:last-child)::before {
top: 30px;
left: 60px;
width: calc(100% - 60px + 20px);
}
}
@media (max-width: 1100px) {
.itb-steps { grid-template-columns: repeat(4, 1fr); gap: 36px 20px; }
.itb-steps__item::before { display: block; }
.itb-steps__item:nth-child(4n)::before { display: none; }
}
@media (max-width: 760px) {
.itb-steps { grid-template-columns: repeat(3, 1fr); }
.itb-steps__item::before { display: block; }
.itb-steps__item:nth-child(3n)::before { display: none; }
}
@media (max-width: 520px) {
.itb-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.itb-steps__item::before { display: block; }
.itb-steps__item:nth-child(2n)::before { display: none; }
.itb-steps__pop { width: calc(100% - 8px); }
}


.itb-section--cta {
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
}
.itb-cta__inner {
display: grid;
grid-template-columns: 1fr 606px;
gap: 80px;
align-items: start;
}
.itb-cta__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(30px, 3.6vw, 42px);
line-height: 1.1;
letter-spacing: -1px;
color: var(--text-primary);
margin-bottom: 20px;
max-width: 600px;
}
.itb-cta__desc {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 32px;
max-width: 440px;
}
.itb-cta__buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 580px;
}
.itb-cta__buttons .btn {
padding: 12px 20px;
font-size: 14.5px;
border-radius: var(--radius-sm);
}
.itb-cta__form {
position: relative;
}
@media (max-width: 1000px) {
.itb-cta__inner { grid-template-columns: 1fr; gap: 40px; }
.itb-cta__desc { max-width: none; }
.itb-cta__buttons { max-width: none; }
}
@media (max-width: 640px) {
.itb-cta__inner { gap: 32px; }
.itb-cta__desc { margin-bottom: 24px; }
.itb-cta__buttons { gap: 8px; }
.itb-cta__buttons .btn {
flex: 1 1 calc(50% - 4px);
padding: 12px 14px;
font-size: 13.5px;
white-space: normal;
}
}


.itb-single--case .itb-single__inner {
max-width: 880px;
margin-inline: auto;
}
.itb-single--case .itb-single__head {
margin-bottom: 40px;
}
.itb-single--case .itb-single__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(30px, 4.4vw, 50px);
line-height: 1.08;
letter-spacing: -1.4px;
color: var(--text-primary);
margin: 18px 0 20px;
}
.itb-single--case .itb-single__lead {
font-size: 19px;
line-height: 1.6;
color: var(--text-secondary);
}
.itb-single--case .itb-single__media {
margin-bottom: 48px;
border-radius: var(--radius-lg);
overflow: hidden;
}
.itb-single--case .itb-single__media img {
display: block;
width: 100%;
height: auto;
max-height: 460px;
object-fit: cover;
}
.itb-case-facts {
display: grid;
gap: 2px;
margin: 0;
border: 1px solid var(--border-card);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--border-card);
}
.itb-case-facts__row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 28px;
padding: 26px 30px;
background: var(--bg-card);
}
.itb-case-facts__label {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-muted);
padding-top: 3px;
}
.itb-case-facts__value {
margin: 0;
font-size: 16.5px;
line-height: 1.6;
color: var(--text-primary);
}
.itb-case-facts__row--result {
background: var(--accent-bg);
}
.itb-case-facts__row--result .itb-case-facts__label {
color: var(--accent);
}
.itb-single--case .itb-single__content {
margin-top: 40px;
font-size: 16.5px;
line-height: 1.7;
color: var(--text-secondary);
}
.itb-single--case .itb-single__content > *:first-child { margin-top: 0; }
.itb-single--case .itb-single__content h2 {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.2;
letter-spacing: -0.6px;
color: var(--text-primary);
margin: 40px 0 16px;
}
.itb-single--case .itb-single__content h3 {
font-family: var(--font-heading);
font-weight: 700;
font-size: 20px;
line-height: 1.3;
color: var(--text-primary);
margin: 28px 0 12px;
}
.itb-single--case .itb-single__content p { margin: 0 0 18px; }
.itb-single--case .itb-single__content ul,
.itb-single--case .itb-single__content ol {
margin: 0 0 18px;
padding-left: 4px;
list-style: none;
}
.itb-single--case .itb-single__content li {
position: relative;
margin-bottom: 8px;
padding-left: 26px;
}
.itb-single--case .itb-single__content ul > li::before {
content: "";
position: absolute;
left: 4px;
top: 0.62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-light);
}
.itb-single--case .itb-single__content ol { counter-reset: itb-li; }
.itb-single--case .itb-single__content ol > li { counter-increment: itb-li; }
.itb-single--case .itb-single__content ol > li::before {
content: counter(itb-li) ".";
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--accent-light);
}
.itb-single--case .itb-single__content a {
color: var(--accent-light);
text-decoration: underline;
text-underline-offset: 2px;
}
.itb-single--case .itb-single__content strong { color: var(--text-primary); }
@media (max-width: 640px) {
.itb-case-facts__row {
grid-template-columns: 1fr;
gap: 8px;
padding: 22px 22px;
}
}


.itb-section--prod-cta {
--bg-primary: #0b1020;
--bg-card: #101a33;
--text-primary: #ffffff;
--text-secondary: #9aa4bb;
--border-card: rgba(148, 163, 208, 0.18);
--accent-bg: rgba(90, 116, 255, 0.14);
--surface-2: rgba(148, 163, 208, 0.12);
--surface-2-hover: rgba(148, 163, 208, 0.22);
--border-color: rgba(148, 163, 208, 0.18);
background: #0b1020;
color: #fff;
}
.itb-section--prod-cta .itb-section__eyebrow {
display: flex;
align-items: center;
gap: 14px;
color: #7f97ff;
margin-bottom: 16px;
}
.itb-section--prod-cta .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: #2f4dff;
flex: none;
}


.itb-cookie {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
padding: 16px clamp(16px, 4vw, 32px);
padding-bottom: max(16px, env(safe-area-inset-bottom));
background: var(--bg-card);
border-top: 1px solid var(--border-card);
box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
transform: translateY(100%);
transition: transform .28s ease-out;
}
.itb-cookie.is-visible {
transform: translateY(0);
}
.itb-cookie__inner {
max-width: var(--container-max);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.itb-cookie__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
}
.itb-cookie__text a {
color: var(--text-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.itb-cookie__text a:hover {
color: var(--accent-light);
}
.itb-cookie__accept {
flex-shrink: 0;
min-width: 160px;
}
@media (max-width: 720px) {
.itb-cookie {
padding-top: 12px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.itb-cookie__inner {
gap: 12px;
}
.itb-cookie__purpose {
display: none;
}
.itb-cookie__text {
font-size: 13px;
line-height: 1.45;
}
.itb-cookie__accept {
min-width: 0;
padding-inline: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.itb-cookie {
transition: none;
}
}


.itb-svc-hero__chips {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 1120px;
}
.itb-svc-hero__chip {
font-family: var(--font-heading);
font-weight: 600;
font-size: 14.5px;
line-height: 1;
color: var(--text-primary);
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-full);
padding: 11px 18px;
white-space: nowrap;
}
@media (max-width: 640px) {
.itb-svc-hero__chips { gap: 8px; margin-bottom: 24px; }
.itb-svc-hero__chip { font-size: 13px; padding: 9px 14px; }
}


.itb-section--bt-about,
.itb-section--bt-impl,
.itb-section--bt-industries,
.itb-section--bt-cases {
--text-primary: #0f1b2d;
--text-secondary: #475569;
--text-muted: #64748b;
--bg-card: #f6f8fb;
--bg-card-hover: #eef2f7;
--border-card: #e2e8f0;
--border-color: #e2e8f0;
--accent-light: #3a58c0;
--accent-bg: rgba(29, 72, 230, 0.06);
background: #ffffff;
color: #0f1b2d;
}
.itb-section--bt-audience,
.itb-section--bt-compare,
.itb-section--bt-pricing {
--text-primary: #0f1b2d;
--text-secondary: #475569;
--text-muted: #64748b;
--bg-card: #ffffff;
--bg-card-hover: #eef2f7;
--border-card: #dbe2ec;
--border-color: #dbe2ec;
--accent-light: #3a58c0;
--accent-bg: rgba(29, 72, 230, 0.06);
background: #f2f4f8;
--bt-table-mask: #f2f4f8;
color: #0f1b2d;
}
.itb-section--bt-benefits {
--text-primary: #ffffff;
--text-secondary: #b7bcc3;
--bg-card: #0e1a2c;
--border-card: rgba(183, 188, 195, 0.16);
background: #060c18;
color: #ffffff;
}
.itb-section--bt-about .itb-section__eyebrow,
.itb-section--bt-audience .itb-section__eyebrow,
.itb-section--bt-func .itb-section__eyebrow,
.itb-section--bt-impl .itb-section__eyebrow,
.itb-section--bt-compare .itb-section__eyebrow,
.itb-section--bt-benefits .itb-section__eyebrow,
.itb-section--bt-industries .itb-section__eyebrow,
.itb-section--bt-pricing .itb-section__eyebrow,
.itb-section--bt-faq .itb-section__eyebrow,
.itb-section--bt-cta .itb-section__eyebrow,
.itb-bt-func__label,
.itb-bt-deck__eyebrow,
.itb-bt-ecosystem__eyebrow,
.itb-bt-compliance__kicker {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent-light);
}
.itb-section--bt-about .itb-section__eyebrow::before,
.itb-section--bt-audience .itb-section__eyebrow::before,
.itb-section--bt-func .itb-section__eyebrow::before,
.itb-section--bt-impl .itb-section__eyebrow::before,
.itb-section--bt-compare .itb-section__eyebrow::before,
.itb-section--bt-benefits .itb-section__eyebrow::before,
.itb-section--bt-industries .itb-section__eyebrow::before,
.itb-section--bt-pricing .itb-section__eyebrow::before,
.itb-section--bt-faq .itb-section__eyebrow::before,
.itb-section--bt-cta .itb-section__eyebrow::before,
.itb-bt-func__label::before,
.itb-bt-deck__eyebrow::before,
.itb-bt-ecosystem__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-bt-about__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px 64px;
margin-bottom: 48px;
}
.itb-bt-about__lead .itb-section__eyebrow { margin-bottom: 20px; }
.itb-bt-about__lead .itb-section__title { margin-bottom: 24px; }
.itb-bt-about__text {
font-size: 16px;
line-height: 1.65;
color: var(--text-secondary);
}
.itb-bt-about__points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 24px;
align-self: center;
}
.itb-bt-about__points li {
position: relative;
padding-left: 26px;
font-size: 16px;
line-height: 1.55;
color: var(--text-secondary);
}
.itb-bt-about__points li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.itb-bt-about__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #0a1120;
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 28px;
}
.itb-bt-about__card {
background: #0a1120;
padding: 44px 40px;
position: relative;
}
.itb-bt-about__card + .itb-bt-about__card::before {
content: "";
position: absolute;
top: 44px;
bottom: 44px;
left: 0;
width: 1px;
background: rgba(255, 255, 255, 0.12);
}
.itb-bt-about__card-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 26px;
color: #fff;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 2px solid var(--accent);
display: inline-block;
}
.itb-bt-about__card-desc {
font-size: 15px;
line-height: 1.55;
color: #aeb6c4;
}
.itb-bt-about__anchor {
display: inline-block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
}
.itb-bt-about__anchor:hover { color: var(--accent-hover); }
.itb-bt-audience__grid {
display: grid;
grid-template-columns: 1fr 1.35fr;
gap: 48px 64px;
align-items: center;
}
.itb-bt-audience__lead .itb-section__eyebrow { margin-bottom: 20px; }
.itb-bt-audience__lead .itb-section__title { margin-bottom: 24px; }
.itb-bt-audience__text {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 28px;
}
.itb-bt-audience__points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.itb-bt-audience__points li {
position: relative;
padding-left: 26px;
font-size: 15.5px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-bt-audience__points li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.itb-bt-audience__segments {
list-style: none;
margin: 0 0 24px;
padding: 0;
border-top: 1px solid var(--border-color);
}
.itb-bt-audience__segment {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 28px;
padding: 26px 12px 26px 4px;
border-bottom: 1px solid var(--border-color);
}
.itb-bt-audience__segment-index {
font-family: var(--font-mono);
font-weight: 700;
font-size: 30px;
line-height: 1;
letter-spacing: -1px;
color: var(--border-card);
font-variant-numeric: tabular-nums;
}
.itb-bt-audience__segment-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.itb-bt-audience__segment-name {
font-family: var(--font-heading);
font-weight: 800;
font-size: 20px;
line-height: 1.25;
color: var(--text-primary);
}
.itb-bt-audience__segment-task {
font-size: 15px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-bt-audience__cta .btn { width: 100%; }
@media (max-width: 900px) {
.itb-bt-about__grid,
.itb-bt-audience__grid { grid-template-columns: 1fr; gap: 32px; }
.itb-bt-about__cards { grid-template-columns: 1fr; }
.itb-bt-audience__segment { gap: 20px; }
.itb-bt-about__card + .itb-bt-about__card::before {
top: 0;
bottom: auto;
left: 40px;
right: 40px;
width: auto;
height: 1px;
}
}


.itb-section--bt-func {
background: #060c18;
color: #fff;
}
.itb-bt-func__header {
max-width: 820px;
margin-bottom: 44px;
}
.itb-bt-func__header .itb-section__eyebrow { margin-bottom: 20px; }
.itb-section--bt-func .itb-section__title { color: #fff; }
.itb-section--bt-func .itb-section__subtitle { color: #aeb6c4; margin-top: 16px; }
.itb-bt-func__label {
margin-bottom: 20px;
}
.itb-bt-deck {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 48px;
margin-bottom: 56px;
align-items: start;
}
.itb-bt-deck__aside,
.itb-bt-deck__stack {
min-width: 0;
}
.itb-bt-deck__eyebrow { margin-bottom: 18px; }
.itb-bt-deck__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 28px;
line-height: 1.15;
color: #fff;
margin-bottom: 16px;
}
.itb-bt-deck__text {
font-size: 15px;
line-height: 1.6;
color: #9aa4b4;
margin-bottom: 32px;
}
.itb-bt-deck__tabs {
list-style: none;
margin: 0;
padding: 0;
}
.itb-bt-deck__tab {
position: relative;
display: flex;
align-items: baseline;
gap: 14px;
width: 100%;
text-align: left;
padding: 16px 16px 16px 18px;
background: transparent;
border: none;
border-left: 2px solid rgba(255, 255, 255, 0.12);
color: #aeb6c4;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.itb-bt-deck__tab:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
.itb-bt-deck__tab:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.itb-bt-deck__tab.is-active {
color: #fff;
border-left-color: var(--accent);
background: rgba(29, 72, 230, 0.10);
}
.itb-bt-deck__tab-num {
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
color: #7d879a;
transition: color 0.2s ease;
}
.itb-bt-deck__tab.is-active .itb-bt-deck__tab-num { color: var(--accent-light); }
.itb-bt-deck__tab-label {
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
line-height: 1.3;
}
.itb-bt-deck__stack {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.itb-bt-deck__card {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 24px;
background: #0d1626;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-lg);
padding: 32px;
overflow: hidden;
animation: itb-bt-card-in 0.3s ease;
}
.itb-bt-deck__card[hidden] {
display: flex;
visibility: hidden;
pointer-events: none;
}
@keyframes itb-bt-card-in {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.itb-bt-deck__card { animation: none; }
}
.itb-bt-deck__media {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.12);
overflow: hidden;
background: #060c18;
box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
cursor: zoom-in;
transition: border-color 0.2s ease;
}
.itb-bt-deck__media:hover { border-color: rgba(58, 130, 255, 0.5); }
.itb-bt-deck__media:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.itb-bt-deck__zoom {
position: absolute;
right: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 8px;
background: rgba(6, 12, 24, 0.82);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(4px);
font-size: 12.5px;
font-weight: 600;
color: #fff;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.itb-bt-deck__media:hover .itb-bt-deck__zoom,
.itb-bt-deck__media:focus-visible .itb-bt-deck__zoom { opacity: 1; transform: none; }
.itb-bt-deck__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
display: block;
}
.itb-bt-deck__head { display: flex; flex-direction: column; }
.itb-bt-deck__card:not(.has-media) {
justify-content: space-between;
min-height: 360px;
padding: 40px;
}
.itb-bt-deck__body { display: flex; flex-direction: column; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__body {
flex: 1;
justify-content: space-between;
gap: 32px;
}
.itb-bt-deck__card-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(22px, 2.4vw, 28px);
color: #fff;
margin: 0;
}
.itb-bt-deck__card-desc {
font-size: 14.5px;
line-height: 1.55;
color: #9aa4b4;
margin-bottom: 24px;
}
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__card-desc {
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.6;
color: #c4ccd8;
max-width: 58ch;
margin-bottom: 0;
}
.itb-bt-deck__points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 32px;
}
.itb-bt-deck__card.has-media .itb-bt-deck__points {
grid-template-columns: 1fr;
gap: 12px;
}
.itb-bt-deck__points li {
position: relative;
padding-left: 22px;
font-size: 14.5px;
line-height: 1.5;
color: #c4ccd8;
}
.itb-bt-deck__points li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.itb-bt-deck__point-num { display: none; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points { gap: 0 32px; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li {
padding: 16px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
margin-top: 16px;
font-size: 15px;
color: #c4ccd8;
}
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li:nth-child(-n + 2) { margin-top: 0; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li::before { content: none; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__point-num {
display: block;
margin-bottom: 6px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: #6f96ff;
}
.itb-bt-func__procedures { margin-bottom: 32px; }
.itb-bt-func__chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.itb-bt-func__chip {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 0.5px;
color: #c4ccd8;
background: rgba(29, 72, 230, 0.12);
border: 1px solid rgba(29, 72, 230, 0.35);
border-radius: var(--radius-full);
padding: 9px 16px;
}
.itb-bt-func__note {
max-width: 900px;
font-size: 15px;
line-height: 1.6;
color: #9aa4b4;
margin-bottom: 40px;
}
.itb-bt-func__modules { margin-bottom: 40px; }
.itb-bt-func__modules-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 20px;
}
.itb-bt-func__module {
background: #0d1626;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-md);
padding: 26px 24px;
}
.itb-bt-func__module-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
color: #fff;
margin-bottom: 12px;
}
.itb-bt-func__module-desc {
font-size: 13.5px;
line-height: 1.55;
color: #9aa4b4;
}
@media (max-width: 1000px) {
.itb-bt-deck { grid-template-columns: 1fr; gap: 24px; }
.itb-bt-func__modules-grid { grid-template-columns: repeat(2, 1fr); }
.itb-bt-deck__tabs {
display: flex;
gap: 8px;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.itb-bt-deck__tab {
flex: 0 0 auto;
scroll-snap-align: start;
border-left: none;
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.14);
padding: 10px 16px;
}
.itb-bt-deck__tab.is-active {
border-color: var(--accent);
background: rgba(29, 72, 230, 0.16);
}
}
@media (max-width: 720px) {
.itb-bt-deck__card { padding: 24px; }
.itb-bt-deck__card:not(.has-media) { padding: 24px; }
.itb-bt-deck__points { grid-template-columns: 1fr; gap: 12px; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points { gap: 0; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li:nth-child(-n + 2) { margin-top: 16px; }
.itb-bt-deck__card:not(.has-media) .itb-bt-deck__points li:first-child { margin-top: 0; }
}
@media (max-width: 560px) {
.itb-bt-func__modules-grid { grid-template-columns: 1fr; }
}
.itb-bt-lightbox[hidden] { display: none; }
.itb-bt-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 48px);
background: rgba(4, 8, 16, 0.9);
backdrop-filter: blur(8px);
cursor: zoom-out;
opacity: 0;
transition: opacity 0.25s ease;
}
.itb-bt-lightbox.is-open { opacity: 1; }
.itb-bt-lightbox__img {
max-width: 100%;
max-height: 100%;
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.95);
transform: scale(0.97);
transition: transform 0.25s ease;
}
.itb-bt-lightbox.is-open .itb-bt-lightbox__img { transform: none; }
.itb-bt-lightbox__close {
position: absolute;
top: clamp(12px, 3vw, 28px);
right: clamp(12px, 3vw, 28px);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: #fff;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.itb-bt-lightbox__close:hover { background: rgba(255, 255, 255, 0.14); }
.itb-bt-lightbox__close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.itb-bt-lightbox,
.itb-bt-lightbox__img { transition: none; }
.itb-bt-lightbox__img { transform: none; }
}


.itb-bt-impl__header { max-width: 820px; margin-bottom: 40px; }
.itb-bt-impl__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-impl__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 56px;
}
.itb-bt-impl__card {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-md);
padding: 28px 26px;
}
.itb-bt-impl__card-kicker {
display: block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.itb-bt-impl__card-desc {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-secondary);
}
.itb-bt-journey {
--track-ease: cubic-bezier(0.16, 1, 0.3, 1);
--track-line: rgba(91, 123, 255, 0.28);
--track-line-done: var(--accent);
background: #0a1120;
border-radius: var(--radius-lg);
padding: 44px 48px 40px;
margin-bottom: 40px;
}
.itb-bt-journey .itb-bt-func__label { color: #5b7bff; margin-bottom: 20px; }
.itb-bt-journey .itb-bt-func__label::before { background: var(--accent); }
.itb-bt-journey__track {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
grid-template-rows: minmax(84px, auto) 52px minmax(84px, auto);
column-gap: 4px;
position: relative;
}
.itb-bt-journey__track::before {
content: "";
position: absolute;
top: 50%;
left: calc(50% / var(--steps));
right: calc(50% / var(--steps));
height: 2px;
background: linear-gradient(90deg, var(--track-line-done), var(--track-line));
transform: translateY(-1px);
z-index: 0;
}
.itb-bt-journey__node {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 4;
}
.itb-bt-journey__btn {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 4;
align-items: center;
justify-items: center;
gap: 0;
width: 100%;
padding: 0 8px;
background: none;
border: 0;
font: inherit;
color: inherit;
cursor: pointer;
text-align: center;
}
.itb-bt-journey__btn:disabled { cursor: default; }
.itb-bt-journey__dot {
position: relative;
grid-row: 2;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: #131d38;
border: 2px solid rgba(91, 123, 255, 0.45);
box-shadow: 0 0 0 6px #0a1120;
transition: border-color 0.3s var(--track-ease), background 0.3s var(--track-ease),
transform 0.3s var(--track-ease), box-shadow 0.3s var(--track-ease);
}
.itb-bt-journey__num {
font-family: var(--font-mono);
font-weight: 700;
font-size: 15px;
color: #c3ccff;
transition: color 0.3s var(--track-ease);
}
.itb-bt-journey__node.is-final .itb-bt-journey__dot {
background: var(--accent);
border-color: var(--accent);
}
.itb-bt-journey__node.is-final .itb-bt-journey__num { color: #fff; }
.itb-bt-journey__title {
position: relative;
font-family: var(--font-heading);
font-weight: 700;
font-size: 15.5px;
line-height: 1.25;
letter-spacing: -0.2px;
color: #fff;
text-wrap: balance;
transition: color 0.3s var(--track-ease);
}
.itb-bt-journey__node.is-above .itb-bt-journey__title { grid-row: 1; align-self: end; padding-bottom: 20px; }
.itb-bt-journey__node.is-below .itb-bt-journey__title { grid-row: 3; align-self: start; padding-top: 20px; }
.itb-bt-journey__title::after {
content: "";
position: absolute;
left: 50%;
width: 1px;
height: 20px;
background: var(--track-line);
transform: translateX(-0.5px);
}
.itb-bt-journey__node.is-above .itb-bt-journey__title::after { bottom: 0; }
.itb-bt-journey__node.is-below .itb-bt-journey__title::after { top: 0; }
.itb-bt-journey__btn.is-active .itb-bt-journey__dot {
border-color: #7d97ff;
box-shadow: 0 0 0 6px #0a1120, 0 12px 30px -12px rgba(91, 123, 255, 0.7);
}
.itb-bt-journey__btn.is-active .itb-bt-journey__title { color: #9db3ff; }
.itb-bt-journey__btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 12px;
}
.itb-bt-journey__track-wrap { position: relative; }
.itb-bt-journey__pop {
--pop-x: 26px;
position: absolute;
z-index: 20;
width: min(340px, calc(100% - 8px));
background: #131d38;
border: 1px solid rgba(91, 123, 255, 0.28);
border-radius: 16px;
padding: 20px 24px;
box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.65);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.28s var(--track-ease), transform 0.32s var(--track-ease);
}
.itb-bt-journey__pop[hidden] { display: none; }
.itb-bt-journey__pop.is-open { opacity: 1; transform: translateY(0); }
.itb-bt-journey__pop::before {
content: "";
position: absolute;
top: -7px;
bottom: auto;
left: var(--pop-x);
width: 14px;
height: 14px;
margin-left: -7px;
background: #131d38;
border-left: 1px solid rgba(91, 123, 255, 0.28);
border-top: 1px solid rgba(91, 123, 255, 0.28);
transform: rotate(45deg);
}
.itb-bt-journey__pop.is-up { transform: translateY(-6px); }
.itb-bt-journey__pop.is-up.is-open { transform: translateY(0); }
.itb-bt-journey__pop.is-up::before {
top: auto;
bottom: -7px;
border-left: none;
border-top: none;
border-right: 1px solid rgba(91, 123, 255, 0.28);
border-bottom: 1px solid rgba(91, 123, 255, 0.28);
}
.itb-bt-journey__pop-title {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.3px;
color: #fff;
margin-bottom: 8px;
}
.itb-bt-journey__pop-desc {
font-size: 14px;
line-height: 1.6;
color: #9aa4b8;
margin: 0;
}
.itb-bt-journey__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 28px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 16px;
color: #5b7bff;
transition: color 0.2s var(--track-ease);
}
.itb-bt-journey__link:hover { color: #7d97ff; }
.itb-bt-journey__link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 4px;
}
@media (hover: hover) {
.itb-bt-journey__btn:not(:disabled):hover .itb-bt-journey__dot {
border-color: #7d97ff;
transform: translateY(-3px);
}
.itb-bt-journey__btn:not(:disabled):hover .itb-bt-journey__title { color: #9db3ff; }
}
@media (prefers-reduced-motion: no-preference) {
.itb-bt-journey__node {
opacity: 0;
transform: translateY(12px);
animation: itb-bt-journey-in 0.6s var(--track-ease) forwards;
animation-delay: calc(var(--i, 0) * 70ms);
}
}
@keyframes itb-bt-journey-in {
to { opacity: 1; transform: translateY(0); }
}
.itb-bt-impl__outcome {
max-width: 820px;
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 32px;
}
.itb-bt-impl__demo {
background: #0a1120;
border-radius: var(--radius-lg);
padding: 32px 40px 40px;
margin-bottom: 40px;
}
.itb-bt-impl__demo-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.itb-bt-impl__demo-media {
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #0d1626;
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.itb-bt-impl__demo-chrome {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.itb-bt-impl__demo-chrome span {
width: 11px;
height: 11px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
}
.itb-bt-impl__demo-media img {
display: block;
width: 100%;
height: auto;
}
.itb-bt-impl__demo-kicker {
display: block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 12px;
}
.itb-bt-impl__demo-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 20px;
color: #fff;
}
.itb-bt-impl__demo .btn--ghost {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.20);
color: #fff;
}
.itb-bt-impl__actions,
.itb-bt-compare__actions,
.itb-bt-pricing__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.itb-bt-impl__actions .btn--ghost,
.itb-bt-compare__actions .btn--ghost,
.itb-bt-pricing__actions .btn--ghost {
background: transparent;
border-color: var(--border-color);
color: var(--text-primary);
}
.itb-bt-impl__actions .btn--ghost:hover,
.itb-bt-compare__actions .btn--ghost:hover,
.itb-bt-pricing__actions .btn--ghost:hover {
background: var(--bg-card-hover);
border-color: var(--accent);
}
.itb-bt-compare__header { max-width: 820px; margin-bottom: 40px; }
.itb-bt-compare__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-compare__header .itb-section__subtitle { margin-top: 14px; }
.itb-bt-compare__scroll {
overflow-x: auto;
margin-bottom: 32px;
border-radius: var(--radius-md);
background:
linear-gradient(to right, var(--bt-table-mask, #f2f4f8), rgba(255, 255, 255, 0)) left center,
linear-gradient(to left, var(--bt-table-mask, #f2f4f8), rgba(255, 255, 255, 0)) right center,
radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.16), rgba(255, 255, 255, 0)) left center,
radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.16), rgba(255, 255, 255, 0)) right center;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
background-attachment: local, local, scroll, scroll;
}
.itb-bt-compare__hint {
display: none;
}
@media (max-width: 1024px) {
.itb-bt-compare__hint {
display: flex;
align-items: center;
gap: 8px;
margin: -8px 0 20px;
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.3px;
color: var(--text-muted);
}
.itb-bt-compare__hint svg { flex: none; }
}
.itb-bt-compare__table {
width: 100%;
min-width: 820px;
border-collapse: collapse;
font-size: 14.5px;
}
.itb-bt-compare__table th,
.itb-bt-compare__table td {
text-align: left;
padding: 16px 20px;
vertical-align: top;
line-height: 1.4;
}
.itb-bt-compare__table thead th {
position: sticky;
top: 0;
z-index: 1;
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.3px;
color: var(--text-primary);
background: var(--bg-card);
border-bottom: 2px solid var(--text-primary);
}
.itb-bt-compare__table thead th.itb-bt-compare__col-torgi {
color: #fff;
background: var(--accent);
border-bottom-color: var(--accent);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.itb-bt-compare__table tbody th {
font-weight: 600;
color: var(--text-primary);
}
.itb-bt-compare__table tbody td { color: var(--text-secondary); }
.itb-bt-compare__table tbody td.itb-bt-compare__col-torgi {
font-weight: 600;
color: var(--text-primary);
background: var(--accent-bg);
}
.itb-bt-compare__table tbody tr { border-bottom: 1px solid var(--border-color); }
.itb-bt-compare__table tbody tr:last-child { border-bottom: none; }
.itb-bt-compare__outcome {
max-width: 900px;
font-size: 15.5px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 28px;
}
.itb-bt-compare__link {
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
color: var(--accent);
text-decoration: none;
}
.itb-bt-compare__link:hover { color: var(--accent-hover); }
@media (max-width: 1000px) {
.itb-bt-impl__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.itb-bt-impl__cards { grid-template-columns: 1fr; }
.itb-bt-journey { padding: 32px 24px; }
.itb-bt-impl__demo { padding: 26px 24px; }
.itb-bt-journey__track {
grid-template-columns: 48px 1fr;
grid-template-rows: none;
grid-auto-rows: auto;
column-gap: 18px;
row-gap: 6px;
position: relative;
}
.itb-bt-journey__track::before {
top: 24px;
bottom: 24px;
left: 24px;
right: auto;
width: 2px;
height: auto;
transform: translateX(-1px);
background: linear-gradient(180deg, var(--track-line-done), var(--track-line));
}
.itb-bt-journey__node {
grid-template-rows: none;
grid-row: auto;
grid-column: 1 / -1;
}
.itb-bt-journey__btn {
grid-template-columns: 48px 1fr;
grid-template-rows: none;
grid-row: auto;
align-items: center;
justify-items: start;
column-gap: 18px;
padding: 8px 0;
}
.itb-bt-journey__dot {
grid-row: auto;
grid-column: 1;
width: 44px;
height: 44px;
box-shadow: 0 0 0 5px #0a1120;
}
.itb-bt-journey__num { font-size: 14px; }
.itb-bt-journey__node.is-above .itb-bt-journey__title,
.itb-bt-journey__node.is-below .itb-bt-journey__title {
grid-row: auto;
grid-column: 2;
align-self: center;
text-align: left;
padding: 0;
font-size: 16px;
}
.itb-bt-journey__title::after { display: none; }
}


.itb-bt-benefits__header { margin-bottom: 40px; }
.itb-bt-benefits__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-benefits__axes {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(183, 188, 195, 0.16);
}
.itb-bt-benefits__axis {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
align-items: center;
gap: 24px 44px;
padding: 28px 32px;
border-bottom: 1px solid rgba(183, 188, 195, 0.16);
transition: background 0.3s ease;
}
.itb-bt-benefits__axis:hover { background: rgba(29, 72, 230, 0.06); }
.itb-bt-benefits__axis.is-key {
background: linear-gradient(100deg, rgba(29, 72, 230, 0.09), rgba(29, 72, 230, 0.02));
}
.itb-bt-benefits__axis.is-key:hover {
background: linear-gradient(100deg, rgba(29, 72, 230, 0.14), rgba(29, 72, 230, 0.04));
}
.itb-bt-benefits__axis.is-dark.is-key {
background: linear-gradient(100deg, rgba(29, 72, 230, 0.09), rgba(29, 72, 230, 0.02));
}
.itb-bt-benefits__axis.is-muted {
background: rgba(255, 255, 255, 0.03);
}
.itb-bt-benefits__axis.is-muted:hover {
background: rgba(255, 255, 255, 0.05);
}
.itb-bt-benefits__axis-lead { min-width: 0; }
.itb-bt-benefits__axis-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 22px;
line-height: 1.2;
color: #fff;
margin: 0;
}
.itb-bt-benefits__axis.is-key .itb-bt-benefits__axis-title,
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__axis-title {
font-size: clamp(24px, 2.4vw, 30px);
}
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__axis-title {
color: #aeb6c4;
}
.itb-bt-benefits__metric {
margin: 20px 0 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 12px;
}
.itb-bt-benefits__metric-value {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(40px, 5vw, 64px);
line-height: 0.95;
letter-spacing: -0.02em;
color: #fff;
font-variant-numeric: tabular-nums;
}
.itb-bt-benefits__axis.is-key .itb-bt-benefits__metric-value { color: #7f97ff; }
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__metric-value {
color: #aeb6c4;
}
.itb-bt-benefits__metric-unit {
font-size: 13.5px;
line-height: 1.4;
color: #9aa4b4;
max-width: 220px;
}
.itb-bt-benefits__axis-note {
margin: 14px 0 0;
font-size: 15px;
line-height: 1.55;
color: #b7bcc3;
max-width: 42ch;
}
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__axis-note { color: #98a1af; }
.itb-bt-benefits__proofs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-self: center;
}
.itb-bt-benefits__proof {
font-family: var(--font-mono);
font-weight: 600;
font-size: 13px;
line-height: 1.35;
letter-spacing: 0.01em;
color: #c4ccd8;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-full);
padding: 8px 15px;
}
.itb-bt-benefits__axis.is-key .itb-bt-benefits__proof {
color: #dfe6ff;
background: rgba(90, 116, 255, 0.14);
border-color: rgba(90, 116, 255, 0.32);
}
.itb-bt-benefits__axis.is-muted .itb-bt-benefits__proof {
color: #98a1b0;
background: rgba(255, 255, 255, 0.035);
}
.itb-bt-industries__header { max-width: 820px; margin-bottom: 40px; }
.itb-bt-industries__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-industries__header .itb-section__subtitle { margin-top: 14px; }
.itb-bt-industries__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 36px;
}
.itb-bt-industries__card {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 24px;
}
.itb-bt-industries__media {
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 20px;
aspect-ratio: 16 / 9;
}
.itb-bt-industries__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.itb-bt-industries__card-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 19px;
color: var(--text-primary);
margin-bottom: 10px;
}
.itb-bt-industries__card-desc {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-secondary);
}
.itb-bt-pricing__header { margin-bottom: 36px; }
.itb-bt-pricing__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-pricing__hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
background: #0a1120;
border-radius: var(--radius-lg);
padding: 44px 48px;
margin-bottom: 24px;
}
.itb-bt-pricing__kicker {
display: block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 18px;
}
.itb-bt-pricing__price {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(34px, 5vw, 52px);
line-height: 1;
color: #fff;
margin-bottom: 16px;
}
.itb-bt-pricing__price-desc {
max-width: 620px;
font-size: 14.5px;
line-height: 1.55;
color: #9aa4b4;
}
.itb-bt-pricing__models {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 28px;
}
.itb-bt-pricing__model {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 32px 34px;
}
.itb-bt-pricing__model-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 20px;
color: var(--text-primary);
margin-bottom: 12px;
}
.itb-bt-pricing__model-desc {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-secondary);
}
.itb-bt-pricing__note {
max-width: 940px;
font-size: 14.5px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 40px;
}
.itb-bt-pricing__support { margin-bottom: 40px; }
.itb-bt-pricing__support > .itb-bt-func__label { margin-bottom: 22px; }
.itb-bt-pricing__scale {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--levels, 3), 1fr);
align-items: stretch;
gap: 20px;
}
.itb-bt-pricing__step {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--accent) calc(var(--step, 0) * 7%), #ffffff);
border: 1px solid var(--border-card);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-bt-pricing__step:hover { transform: translateY(-4px); }
.itb-bt-pricing__step.is-accent {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 24px 48px -20px rgba(29, 72, 230, 0.55);
}
.itb-bt-pricing__step.is-accent:hover { transform: translateY(-8px); }
.itb-bt-pricing__step-stamp {
position: absolute;
right: -18px;
bottom: -18px;
color: var(--accent);
opacity: 0.07;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-bt-pricing__step-stamp svg {
display: block;
width: 120px;
height: 120px;
}
.itb-bt-pricing__step:hover .itb-bt-pricing__step-stamp {
opacity: 0.11;
transform: translate(-4px, -4px) rotate(-4deg);
}
.itb-bt-pricing__step.is-accent .itb-bt-pricing__step-stamp {
color: #fff;
opacity: 0.12;
}
.itb-bt-pricing__step.is-accent:hover .itb-bt-pricing__step-stamp { opacity: 0.18; }
.itb-bt-pricing__step-rank {
position: relative;
z-index: 1;
font-family: var(--font-mono);
font-weight: 700;
font-size: 15px;
letter-spacing: 1px;
color: var(--accent);
opacity: 0.55;
}
.itb-bt-pricing__step.is-accent .itb-bt-pricing__step-rank { color: #fff; opacity: 0.7; }
.itb-bt-pricing__step-title {
position: relative;
z-index: 1;
font-family: var(--font-heading);
font-weight: 800;
font-size: 21px;
line-height: 1.1;
color: var(--text-primary);
margin: 0;
}
.itb-bt-pricing__step.is-accent .itb-bt-pricing__step-title { color: #fff; }
.itb-bt-pricing__step-params {
position: relative;
z-index: 1;
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.itb-bt-pricing__step-param {
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
background: rgba(15, 27, 45, 0.05);
border: 1px solid var(--border-card);
border-radius: var(--radius-full);
padding: 6px 13px;
}
.itb-bt-pricing__step.is-accent .itb-bt-pricing__step-param {
color: #eef2ff;
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.28);
}
.itb-bt-pricing__support-note {
font-size: 14px;
color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
.itb-bt-pricing__step,
.itb-bt-pricing__step.is-accent { transition: box-shadow 0.2s ease; }
.itb-bt-pricing__step:hover,
.itb-bt-pricing__step.is-accent:hover { transform: none; }
.itb-bt-pricing__step:hover .itb-bt-pricing__step-stamp { transform: none; }
}
@media (max-width: 1000px) {
.itb-bt-industries__grid { grid-template-columns: repeat(2, 1fr); }
.itb-bt-pricing__scale { grid-template-columns: repeat(2, 1fr); }
.itb-bt-benefits__axis {
grid-template-columns: 1fr;
gap: 20px;
padding: 32px 24px;
}
}
@media (max-width: 700px) {
.itb-bt-industries__grid,
.itb-bt-pricing__models { grid-template-columns: 1fr; }
.itb-bt-pricing__scale { grid-template-columns: 1fr; }
.itb-bt-pricing__hero { padding: 32px 26px; }
.itb-bt-benefits__axis { gap: 16px; }
}


.itb-bt-compliance__header {
max-width: 820px;
margin-bottom: 48px;
}
.itb-bt-compliance__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-compliance__ledger {
border-top: 1px solid rgba(183, 188, 195, 0.16);
margin-bottom: 72px;
}
.itb-bt-compliance__row {
display: grid;
grid-template-columns: 108px minmax(0, 1fr) minmax(0, 320px);
align-items: start;
gap: 32px 40px;
padding: 36px 0;
border-bottom: 1px solid rgba(183, 188, 195, 0.16);
transition: background 0.25s ease;
}
.itb-bt-compliance__row:hover { background: rgba(29, 72, 230, 0.05); }
.itb-bt-compliance__logo {
display: flex;
align-items: center;
align-self: center;
min-height: 44px;
}
.itb-bt-compliance__logo img {
display: block;
width: 100%;
height: auto;
max-height: 48px;
object-fit: contain;
object-position: left center;
}
.itb-bt-compliance__logo--0 img {
background: #fff;
border-radius: var(--radius-sm);
padding: 7px 10px;
}
.itb-bt-compliance__logo--1 img {
width: auto;
height: 56px;
max-height: 56px;
}
.itb-bt-compliance__logo-mark {
width: 40px;
height: 40px;
color: #fff;
}
.itb-bt-compliance__index {
font-family: var(--font-mono);
font-weight: 700;
font-size: 15px;
letter-spacing: 1px;
color: var(--accent-light);
padding-top: 4px;
}
.itb-bt-compliance__kicker {
display: block;
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(19px, 2vw, 23px);
letter-spacing: 0;
text-transform: none;
color: #fff;
margin-bottom: 12px;
}
.itb-bt-compliance__text {
font-size: 15px;
line-height: 1.65;
color: var(--text-secondary);
max-width: 62ch;
}
.itb-bt-compliance__proof {
display: inline-flex;
flex-direction: column;
gap: 8px;
justify-self: start;
align-self: center;
padding: 16px 20px;
border: 1px solid rgba(29, 72, 230, 0.45);
border-radius: var(--radius-sm);
background: rgba(29, 72, 230, 0.06);
}
.itb-bt-compliance__proof-label {
order: -1;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--accent-light);
}
.itb-bt-compliance__proof-value {
font-family: var(--font-mono);
font-weight: 700;
font-size: 18px;
line-height: 1.2;
color: #fff;
}
.itb-bt-ecosystem {
padding-top: 8px;
border-top: 1px solid rgba(183, 188, 195, 0.10);
}
.itb-bt-ecosystem__eyebrow { color: var(--accent-light); margin-bottom: 20px; }
.itb-bt-ecosystem__eyebrow::before { background: var(--accent); }
.itb-bt-ecosystem__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(24px, 3vw, 32px);
line-height: 1.15;
color: #fff;
margin-bottom: 36px;
max-width: 820px;
}
.itb-bt-ecosystem__list {
list-style: none;
margin: 0 0 40px;
padding: 0;
border-top: 1px solid rgba(183, 188, 195, 0.14);
}
.itb-bt-ecosystem__row { border-bottom: 1px solid rgba(183, 188, 195, 0.14); }
.itb-bt-ecosystem__link {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px;
align-items: baseline;
gap: 24px;
padding: 22px 8px 22px 4px;
text-decoration: none;
transition: padding 0.25s ease, background 0.25s ease;
}
.itb-bt-ecosystem__link:hover {
background: rgba(29, 72, 230, 0.06);
padding-left: 16px;
}
.itb-bt-ecosystem__name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
color: #fff;
}
.itb-bt-ecosystem__role {
font-size: 14px;
color: #8792a4;
}
.itb-bt-ecosystem__arrow {
justify-self: end;
font-size: 16px;
color: var(--accent-light);
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.itb-bt-ecosystem__link:hover .itb-bt-ecosystem__arrow {
opacity: 1;
transform: translateX(0);
}
.itb-bt-ecosystem__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.itb-bt-cases .itb-section__topbar { margin-bottom: 40px; }
.itb-bt-cases .itb-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--accent-light);
}
.itb-bt-cases .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-bt-faq__header { margin-bottom: 40px; }
.itb-bt-faq__header .itb-section__eyebrow { margin-bottom: 18px; }
.itb-bt-faq__list {
border-top: 1px solid var(--border-color);
}
.itb-bt-faq__item {
border-bottom: 1px solid var(--border-color);
}
.itb-bt-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 4px;
cursor: pointer;
list-style: none;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
line-height: 1.35;
color: var(--text-primary);
}
.itb-bt-faq__question::-webkit-details-marker { display: none; }
.itb-bt-faq__icon {
position: relative;
flex: none;
width: 16px;
height: 16px;
}
.itb-bt-faq__icon::before,
.itb-bt-faq__icon::after {
content: "";
position: absolute;
background: var(--accent);
transition: transform 0.2s, opacity 0.2s;
}
.itb-bt-faq__icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.itb-bt-faq__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.itb-bt-faq__item[open] .itb-bt-faq__icon::after { opacity: 0; transform: scaleY(0); }
.itb-bt-faq__answer {
padding: 0 4px 16px;
margin-top: -2px;
max-width: 72ch;
}
.itb-bt-faq__answer p {
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
}
.itb-bt-faq__item[hidden] { display: none; }
.itb-bt-faq__more {
margin-top: 24px;
text-align: center;
}
.itb-bt-faq__more-btn {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 13px 26px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 15px;
color: var(--text-primary);
background: transparent;
border: 1px solid var(--border-tag);
border-radius: var(--radius-full);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.itb-bt-faq__more-btn:hover {
border-color: var(--accent);
background: var(--accent-bg);
}
.itb-bt-faq__more-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.itb-bt-faq__more-count {
font-family: var(--font-mono);
font-weight: 600;
font-size: 13px;
color: var(--text-muted);
}
.itb-section--bt-cta {
--bg-primary: #0b1020;
--bg-card: #101a33;
--text-primary: #ffffff;
--text-secondary: #9aa4bb;
--border-card: rgba(148, 163, 208, 0.18);
--accent-bg: rgba(90, 116, 255, 0.14);
--surface-2: rgba(148, 163, 208, 0.12);
--surface-2-hover: rgba(148, 163, 208, 0.22);
--border-color: rgba(148, 163, 208, 0.18);
background: #0b1020;
color: #fff;
}
.itb-section--bt-cta .itb-section__eyebrow {
display: flex;
align-items: center;
gap: 14px;
color: #7f97ff;
margin-bottom: 16px;
}
.itb-section--bt-cta .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: #2f4dff;
flex: none;
}
@media (max-width: 900px) {
.itb-bt-compliance__row {
grid-template-columns: 92px 1fr;
gap: 20px 24px;
padding: 30px 0;
}
.itb-bt-compliance__proof {
grid-column: 2;
margin-top: 4px;
}
.itb-bt-ecosystem__link {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 4px 16px;
}
.itb-bt-ecosystem__name { grid-column: 1; grid-row: 1; }
.itb-bt-ecosystem__role { grid-column: 1; grid-row: 2; }
.itb-bt-ecosystem__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 560px) {
.itb-bt-compliance__row {
grid-template-columns: 1fr;
gap: 14px;
}
.itb-bt-compliance__index { padding-top: 0; }
.itb-bt-compliance__proof { grid-column: 1; }
.itb-bt-ecosystem__arrow { opacity: 1; transform: none; }
}


.itb-section--pp-pains,
.itb-section--pp-twocol {
--text-primary: #0f1b2d;
--text-secondary: #475569;
--text-muted: #64748b;
--bg-card: #f6f8fb;
--bg-card-hover: #eef2f7;
--border-card: #e2e8f0;
--border-color: #e2e8f0;
--accent-light: #3a58c0;
--accent-bg: rgba(29, 72, 230, 0.06);
background: #ffffff;
color: #0f1b2d;
}
.itb-section--pp-process,
.itb-section--pp-split,
.itb-section--pp-pilot {
--text-primary: #0f1b2d;
--text-secondary: #475569;
--text-muted: #64748b;
--bg-card: #ffffff;
--bg-card-hover: #eef2f7;
--border-card: #dbe2ec;
--border-color: #dbe2ec;
--accent-light: #3a58c0;
--accent-bg: rgba(29, 72, 230, 0.06);
background: #f2f4f8;
color: #0f1b2d;
}
.itb-section--pp-pains .itb-section__eyebrow,
.itb-section--pp-process .itb-section__eyebrow,
.itb-section--pp-split .itb-section__eyebrow,
.itb-section--pp-twocol .itb-section__eyebrow,
.itb-section--pp-pilot .itb-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent-light);
}
.itb-section--pp-pains .itb-section__eyebrow::before,
.itb-section--pp-process .itb-section__eyebrow::before,
.itb-section--pp-split .itb-section__eyebrow::before,
.itb-section--pp-twocol .itb-section__eyebrow::before,
.itb-section--pp-pilot .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-pp-pains__header,
.itb-pp-process__header,
.itb-pp-split__header,
.itb-pp-twocol__header,
.itb-pp-pilot__header {
max-width: 760px;
margin-bottom: 48px;
}
.itb-pp-pains__header .itb-section__eyebrow,
.itb-pp-process__header .itb-section__eyebrow,
.itb-pp-split__header .itb-section__eyebrow,
.itb-pp-twocol__header .itb-section__eyebrow,
.itb-pp-pilot__header .itb-section__eyebrow { margin-bottom: 20px; }
.itb-pp-pains__header .itb-section__title,
.itb-pp-process__header .itb-section__title,
.itb-pp-split__header .itb-section__title,
.itb-pp-twocol__header .itb-section__title,
.itb-pp-pilot__header .itb-section__title { margin-bottom: 16px; }
.itb-pp-pains__grid {
list-style: none;
margin: 0 0 40px;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--pain-cols, 2), minmax(0, 1fr));
gap: 20px;
}
.itb-pp-pains__card {
position: relative;
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 30px 30px 32px;
}
.itb-pp-pains__stamp {
position: absolute;
right: -14px;
bottom: -14px;
color: var(--accent);
opacity: 0.08;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-pp-pains__stamp svg {
display: block;
width: 112px;
height: 112px;
}
@media (hover: hover) {
.itb-pp-pains__card:hover .itb-pp-pains__stamp {
opacity: 0.13;
transform: translate(-4px, -4px) rotate(-4deg);
}
}
.itb-pp-pains__index,
.itb-pp-pains__card-title,
.itb-pp-pains__card-desc { position: relative; z-index: 1; }
.itb-pp-pains__index {
display: block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
color: var(--accent);
}
.itb-pp-pains__card-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 19px;
line-height: 1.3;
color: var(--text-primary);
margin: 10px 0 10px;
}
.itb-pp-pains__card-desc {
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
}
.itb-pp-pains__outcome {
background: var(--accent-bg);
color: var(--text-primary);
border: 1px solid rgba(29, 72, 230, 0.18);
border-radius: var(--radius-lg);
padding: 28px 32px;
font-size: 17px;
line-height: 1.55;
}
.itb-pp-tagline {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding: 20px 0 0;
border-top: 1px solid rgba(29, 72, 230, 0.16);
}
.itb-pp-tagline__label {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent);
flex-shrink: 0;
}
.itb-pp-tagline__list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.itb-pp-tagline__item {
position: relative;
padding: 0 20px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-secondary);
}
.itb-pp-tagline__item:not(:last-child)::after {
content: "";
position: absolute;
right: -1.5px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(29, 72, 230, 0.45);
}
.itb-pp-tagline__item:first-child { padding-left: 0; }
@media (max-width: 560px) {
.itb-pp-tagline { gap: 12px; }
.itb-pp-tagline__item { padding: 0 12px; font-size: 11px; letter-spacing: 0.8px; }
}
.itb-pp-rail {
--rail-ease: cubic-bezier(0.16, 1, 0.3, 1);
--rail-line: rgba(29, 72, 230, 0.22);
--rail-line-done: var(--accent);
list-style: none;
margin: 0 0 32px;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
grid-template-rows: minmax(72px, auto) 52px minmax(72px, auto);
column-gap: 4px;
position: relative;
}
.itb-pp-rail::before {
content: "";
position: absolute;
top: 50%;
left: calc(50% / var(--steps));
right: calc(50% / var(--steps));
height: 2px;
background: linear-gradient(90deg, var(--rail-line-done), var(--rail-line));
transform: translateY(-1px);
z-index: 0;
}
.itb-pp-rail__node {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 4;
align-items: center;
justify-items: center;
text-align: center;
padding: 0 8px;
}
.itb-pp-rail__dot {
position: relative;
grid-row: 2;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
border: 2px solid rgba(29, 72, 230, 0.35);
box-shadow: 0 0 0 6px var(--bg-secondary, #f2f4f8);
}
.itb-section--pp-process .itb-pp-rail__dot { box-shadow: 0 0 0 6px #f2f4f8; }
.itb-pp-rail__num {
font-family: var(--font-mono);
font-weight: 700;
font-size: 15px;
color: var(--accent);
}
.itb-pp-rail__node.is-final .itb-pp-rail__dot {
background: var(--accent);
border-color: var(--accent);
}
.itb-pp-rail__node.is-final .itb-pp-rail__num { color: #fff; }
.itb-pp-rail__title {
position: relative;
font-family: var(--font-heading);
font-weight: 700;
font-size: 15.5px;
line-height: 1.25;
letter-spacing: -0.2px;
color: var(--text-primary);
text-wrap: balance;
}
.itb-pp-rail__node.is-above .itb-pp-rail__title { grid-row: 1; align-self: end; padding-bottom: 20px; }
.itb-pp-rail__node.is-below .itb-pp-rail__title { grid-row: 3; align-self: start; padding-top: 20px; }
.itb-pp-rail__title::after {
content: "";
position: absolute;
left: 50%;
width: 1px;
height: 20px;
background: var(--rail-line);
transform: translateX(-0.5px);
}
.itb-pp-rail__node.is-above .itb-pp-rail__title::after { bottom: 0; }
.itb-pp-rail__node.is-below .itb-pp-rail__title::after { top: 0; }
@media (prefers-reduced-motion: no-preference) {
.itb-pp-rail__node {
opacity: 0;
transform: translateY(12px);
animation: itb-pp-rail-in 0.6s var(--rail-ease) forwards;
animation-delay: calc(var(--i, 0) * 70ms);
}
}
@keyframes itb-pp-rail-in {
to { opacity: 1; transform: translateY(0); }
}
.itb-pp-rail-wrap { position: relative; }
.itb-pp-rail__btn {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 4;
align-items: center;
justify-items: center;
gap: 0;
width: 100%;
padding: 0 8px;
background: none;
border: 0;
font: inherit;
color: inherit;
cursor: pointer;
text-align: center;
}
.itb-pp-rail__btn:disabled { cursor: default; }
.itb-pp-rail__btn .itb-pp-rail__dot { grid-row: 2; }
.itb-pp-rail__node.is-above .itb-pp-rail__btn .itb-pp-rail__title { grid-row: 1; align-self: end; padding-bottom: 20px; }
.itb-pp-rail__node.is-below .itb-pp-rail__btn .itb-pp-rail__title { grid-row: 3; align-self: start; padding-top: 20px; }
.itb-pp-rail__btn.is-active .itb-pp-rail__dot,
.itb-pp-rail__btn:not(:disabled):hover .itb-pp-rail__dot {
border-color: var(--accent);
box-shadow: 0 0 0 6px #f2f4f8, 0 12px 30px -14px rgba(29, 72, 230, 0.6);
}
.itb-pp-rail__btn.is-active .itb-pp-rail__title,
.itb-pp-rail__btn:not(:disabled):hover .itb-pp-rail__title { color: var(--accent-light); }
.itb-pp-rail__btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 12px;
}
.itb-pp-rail__pop {
--pop-x: 26px;
position: absolute;
z-index: 20;
width: min(340px, calc(100% - 8px));
background: #ffffff;
border: 1px solid var(--border-card);
border-radius: 16px;
padding: 20px 24px;
box-shadow: 0 26px 54px -24px rgba(15, 27, 45, 0.35);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.28s var(--rail-ease), transform 0.32s var(--rail-ease);
}
.itb-pp-rail__pop[hidden] { display: none; }
.itb-pp-rail__pop.is-open { opacity: 1; transform: translateY(0); }
.itb-pp-rail__pop::before {
content: "";
position: absolute;
top: -7px;
left: var(--pop-x);
width: 14px;
height: 14px;
margin-left: -7px;
background: #ffffff;
border-left: 1px solid var(--border-card);
border-top: 1px solid var(--border-card);
transform: rotate(45deg);
}
.itb-pp-rail__pop.is-up { transform: translateY(-6px); }
.itb-pp-rail__pop.is-up.is-open { transform: translateY(0); }
.itb-pp-rail__pop.is-up::before {
top: auto;
bottom: -7px;
border-left: none;
border-top: none;
border-right: 1px solid var(--border-card);
border-bottom: 1px solid var(--border-card);
}
.itb-pp-rail__pop-title {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.3px;
color: var(--text-primary);
margin-bottom: 8px;
}
.itb-pp-rail__pop-desc {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.itb-pp-rail__pop-desc[hidden] { display: none; }
.itb-section--pp-pilot .itb-pp-rail__dot { box-shadow: 0 0 0 6px #f2f4f8; }
.itb-pp-rail--pilot {
grid-template-rows: minmax(112px, auto) 52px minmax(112px, auto);
margin-bottom: 40px;
}
.itb-pp-rail--pilot .itb-pp-rail__title { display: flex; flex-direction: column; gap: 7px; max-width: 260px; }
.itb-pp-rail__name {
font-family: var(--font-heading);
font-weight: 800;
font-size: 16px;
line-height: 1.25;
color: var(--text-primary);
}
.itb-pp-rail__desc {
font-family: var(--font-body, var(--font-heading));
font-weight: 400;
font-size: 13.5px;
line-height: 1.45;
letter-spacing: 0;
color: var(--text-secondary);
}
.itb-pp-split__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px 64px;
margin-bottom: 32px;
}
.itb-pp-split__text p {
font-size: 16.5px;
line-height: 1.65;
color: var(--text-secondary);
margin: 0 0 16px;
}
.itb-pp-split__text p:last-child { margin-bottom: 0; }
.itb-pp-split__points-intro {
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
color: var(--text-primary);
margin-bottom: 18px;
}
.itb-pp-split__points ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.itb-pp-split__points li {
position: relative;
padding-left: 26px;
font-size: 16px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-pp-split__points li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.itb-pp-split__callout {
background: var(--accent-bg);
border: 1px solid rgba(29, 72, 230, 0.18);
border-radius: var(--radius-md);
padding: 20px 26px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
line-height: 1.5;
color: var(--text-primary);
margin-bottom: 16px;
}
.itb-pp-split__note {
max-width: 820px;
margin-top: 16px;
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
}
.itb-pp-split__action {
margin: 24px 0 0;
}
.itb-pp-twocol__cards {
display: grid;
grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
gap: 24px;
margin-bottom: 44px;
}
.itb-pp-twocol__cards:has(.itb-pp-twocol__card:only-child) { grid-template-columns: minmax(0, 640px); }
.itb-pp-twocol__card {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 36px 36px 40px;
}
.itb-pp-twocol__card-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 22px;
line-height: 1.25;
color: var(--text-primary);
padding-bottom: 16px;
margin-bottom: 18px;
border-bottom: 2px solid var(--accent);
display: inline-block;
}
.itb-pp-twocol__card-desc {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 22px;
}
.itb-pp-twocol__card-points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.itb-pp-twocol__card-points li {
position: relative;
padding-left: 26px;
font-size: 15px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-pp-twocol__card-points li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.itb-pp-twocol__list-block { margin-bottom: 32px; }
.itb-pp-twocol__list-block .itb-bt-func__label { margin-bottom: 20px; display: inline-flex; }
.itb-pp-twocol__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--border-color);
}
.itb-pp-twocol__list-item {
display: grid;
grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
gap: 16px 32px;
align-items: baseline;
padding: 20px 4px;
border-bottom: 1px solid var(--border-color);
}
.itb-pp-twocol__list-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
color: var(--text-primary);
}
.itb-pp-twocol__list-desc {
font-size: 15px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-pp-twocol__note {
max-width: 820px;
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 28px;
}
.itb-pp-twocol__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.itb-pp-hub {
--hub-line: 91, 123, 255;
position: relative;
isolation: isolate;
background:
radial-gradient(120% 120% at 6% 0%, rgba(29, 72, 230, 0.20), transparent 58%),
#080f1d;
border: 1px solid rgba(var(--hub-line), 0.14);
border-radius: var(--radius-lg);
padding: 52px 52px 52px 56px;
display: grid;
grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
align-items: center;
gap: 40px 64px;
overflow: hidden;
}
.itb-pp-hub__lead {
position: relative;
z-index: 1;
}
.itb-pp-hub__lead-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(38px, 4.4vw, 60px);
line-height: 1.02;
letter-spacing: -1.5px;
color: #fff;
margin: 0;
}
.itb-pp-hub__lead-note {
max-width: 34ch;
margin: 22px 0 0;
font-size: 16px;
line-height: 1.6;
color: #aeb8cc;
}
.itb-pp-hub__panels {
position: relative;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.itb-pp-hub__panel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px 24px;
background: rgba(19, 29, 56, 0.55);
border: 1px solid rgba(var(--hub-line), 0.18);
border-radius: var(--radius-md);
color: #d7ddf2;
text-decoration: none;
transition: border-color 0.25s ease, background 0.25s ease,
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.itb-pp-hub__panel-title {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 17px;
line-height: 1.25;
color: #fff;
}
.itb-pp-hub__panel-desc {
display: block;
margin-top: 4px;
font-size: 14px;
line-height: 1.45;
color: #9aa4b8;
}
.itb-pp-hub__panel-arrow {
flex: none;
font-size: 20px;
line-height: 1;
color: rgba(var(--hub-line), 0.8);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}
.itb-pp-hub__panel.is-priority {
background: var(--accent);
border-color: var(--accent);
}
.itb-pp-hub__panel.is-priority .itb-pp-hub__panel-title { font-size: 19px; color: #fff; }
.itb-pp-hub__panel.is-priority .itb-pp-hub__panel-desc { color: rgba(255, 255, 255, 0.82); }
.itb-pp-hub__panel.is-priority .itb-pp-hub__panel-arrow { color: #fff; }
.itb-pp-hub__panel.is-link { cursor: pointer; }
@media (hover: hover) {
.itb-pp-hub__panel.is-link:hover {
border-color: #7d97ff;
background: rgba(29, 72, 230, 0.22);
}
.itb-pp-hub__panel.is-link:hover .itb-pp-hub__panel-arrow { transform: translateX(4px); }
.itb-pp-hub__panel.is-priority.is-link:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
}
.itb-pp-hub__panel.is-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.itb-pp-catalog {
margin-top: 36px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.03);
}
.itb-section--bt-func .itb-bt-func__cta { margin-top: 36px; }
.itb-pp-catalog__summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 26px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
color: #fff;
}
.itb-pp-catalog__summary::-webkit-details-marker { display: none; }
.itb-pp-catalog__icon {
position: relative;
flex: none;
width: 18px;
height: 18px;
}
.itb-pp-catalog__icon::before,
.itb-pp-catalog__icon::after {
content: "";
position: absolute;
background: var(--accent-light);
transition: transform 0.2s ease;
}
.itb-pp-catalog__icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.itb-pp-catalog__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.itb-pp-catalog[open] .itb-pp-catalog__icon::after { transform: scaleY(0); }
.itb-pp-catalog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px 40px;
padding: 8px 26px 30px;
}
.itb-pp-catalog__group-title {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 14px;
}
.itb-pp-catalog__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.itb-pp-catalog__items li {
font-size: 14.5px;
line-height: 1.45;
color: #aeb6c4;
padding-left: 16px;
position: relative;
}
.itb-pp-catalog__items li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
.itb-pp-feat-extra {
margin-top: 40px;
display: flex;
flex-direction: column;
gap: 28px;
}
.itb-pp-stat {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px 32px;
padding: 34px 36px;
border: 1px solid var(--accent);
border-radius: var(--radius-lg);
background:
linear-gradient(150deg, var(--accent-bg-strong), transparent 62%),
var(--bg-card);
}
.itb-pp-stat__figure {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 16px;
margin: 0;
}
.itb-pp-stat__value {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(38px, 6vw, 54px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.itb-pp-stat__label {
font-size: 17px;
line-height: 1.4;
color: var(--text-secondary);
}
.itb-pp-stat__caption {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--accent-light);
}
.itb-pp-feat-extra__items {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 28px;
}
.itb-pp-feat-extra__items li {
position: relative;
padding-left: 26px;
font-size: 15px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-pp-feat-extra__items li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--accent-bg-strong);
box-shadow: inset 0 0 0 1.5px var(--accent-light);
}
.itb-section--pp-audience {
--text-primary: #0f1b2d;
--text-secondary: #475569;
--text-muted: #64748b;
--bg-card: #ffffff;
--bg-card-hover: #f2f5fa;
--border-card: #e2e8f0;
--border-color: #e2e8f0;
--accent-light: #3a58c0;
--accent-bg: rgba(29, 72, 230, 0.06);
background: #f4f7fb;
color: #0f1b2d;
}
.itb-pp-audience__header { margin-bottom: 40px; }
.itb-pp-audience__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.itb-pp-audience__card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 30px 28px;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
@media (hover: hover) {
.itb-pp-audience__card:hover {
border-color: var(--accent);
box-shadow: 0 18px 50px -34px rgba(29, 72, 230, 0.5);
transform: translateY(-3px);
}
}
.itb-pp-audience__index {
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
color: var(--accent-light);
}
.itb-pp-audience__card-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 18px;
line-height: 1.3;
color: var(--text-primary);
margin: 12px 0 10px;
}
.itb-pp-audience__card-desc {
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
}
.itb-pp-audience__card--feature { grid-column: span 2; }
.itb-pp-audience__card--promo {
display: flex;
flex-direction: column;
background: var(--accent);
border-color: transparent;
}
.itb-pp-audience__card--promo .itb-pp-audience__card-title { color: #fff; }
.itb-pp-audience__card--promo .itb-pp-audience__card-desc { color: rgba(255, 255, 255, 0.82); }
@media (hover: hover) {
.itb-pp-audience__card--promo:hover { border-color: transparent; }
}
.itb-pp-audience__card--promo .itb-pp-audience__card-title { margin-top: 0; }
.itb-pp-audience__promo-btn {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
margin-top: auto;
padding-top: 18px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 15px;
color: #fff;
text-decoration: none;
transition: gap 0.2s ease;
}
.itb-pp-audience__promo-btn span { transition: transform 0.2s ease; }
.itb-pp-audience__promo-btn:hover span { transform: translateX(4px); }
.itb-section--pp-pains .btn--ghost,
.itb-section--pp-audience .btn--ghost,
.itb-section--pp-twocol .btn--ghost,
.itb-section--pp-split .btn--ghost {
background: transparent;
border-color: var(--border-color);
color: var(--text-primary);
}
.itb-section--pp-pains .btn--ghost:hover,
.itb-section--pp-audience .btn--ghost:hover,
.itb-section--pp-twocol .btn--ghost:hover,
.itb-section--pp-split .btn--ghost:hover {
background: var(--bg-card-hover);
border-color: var(--accent);
}
@media (max-width: 1100px) {
.itb-pp-audience__grid { grid-template-columns: repeat(2, 1fr); }
.itb-pp-twocol__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itb-pp-pains__grid { grid-template-columns: repeat(min(var(--pain-cols, 2), 2), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.itb-pp-pains__grid { grid-template-columns: 1fr; }
.itb-pp-feat-extra__items { grid-template-columns: 1fr; }
.itb-pp-split__grid { grid-template-columns: 1fr; gap: 32px; }
.itb-pp-twocol__cards { grid-template-columns: 1fr; }
.itb-pp-catalog__grid { grid-template-columns: repeat(2, 1fr); }
.itb-pp-twocol__list-item { grid-template-columns: 1fr; gap: 6px; }
.itb-pp-hub {
grid-template-columns: 1fr;
gap: 32px;
padding: 36px 26px;
}
}
@media (max-width: 640px) {
.itb-pp-rail {
grid-template-columns: 48px 1fr;
grid-template-rows: none;
grid-auto-rows: auto;
column-gap: 18px;
row-gap: 6px;
}
.itb-pp-rail::before {
top: 24px;
bottom: 24px;
left: 24px;
right: auto;
width: 2px;
height: auto;
transform: translateX(-1px);
background: linear-gradient(180deg, var(--rail-line-done), var(--rail-line));
}
.itb-pp-rail__node {
grid-template-rows: none;
grid-row: auto;
grid-column: 1 / -1;
grid-template-columns: 48px 1fr;
justify-items: start;
align-items: center;
column-gap: 18px;
padding: 8px 0;
}
.itb-pp-rail__btn {
grid-column: 1 / -1;
grid-template-columns: 48px 1fr;
grid-template-rows: none;
grid-row: auto;
align-items: center;
justify-items: start;
column-gap: 18px;
padding: 8px 0;
}
.itb-pp-rail__btn .itb-pp-rail__dot { grid-column: 1; }
.itb-pp-rail__node.is-above .itb-pp-rail__btn .itb-pp-rail__title,
.itb-pp-rail__node.is-below .itb-pp-rail__btn .itb-pp-rail__title {
grid-column: 2;
align-self: center;
text-align: left;
padding: 0;
font-size: 16px;
}
.itb-pp-rail__dot {
grid-row: auto;
grid-column: 1;
width: 44px;
height: 44px;
box-shadow: 0 0 0 5px #f2f4f8;
}
.itb-pp-rail__num { font-size: 14px; }
.itb-pp-rail__node.is-above .itb-pp-rail__title,
.itb-pp-rail__node.is-below .itb-pp-rail__title {
grid-row: auto;
grid-column: 2;
align-self: center;
text-align: left;
padding: 0;
font-size: 16px;
}
.itb-pp-rail__title::after { display: none; }
.itb-pp-rail--pilot { grid-template-rows: none; }
.itb-pp-rail--pilot .itb-pp-rail__title { max-width: none; align-items: flex-start; }
.itb-pp-rail--pilot .itb-pp-rail__node { align-items: start; padding: 12px 0; }
.itb-pp-rail--pilot .itb-pp-rail__dot { align-self: start; }
}
.itb-pp-pilot__steps {
list-style: none;
margin: 0 0 40px;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.itb-pp-pilot__step {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 28px 28px 30px;
}
.itb-pp-pilot__num {
font-family: var(--font-mono);
font-weight: 700;
font-size: 22px;
line-height: 1;
color: var(--accent);
letter-spacing: 0.5px;
}
.itb-pp-pilot__text {
font-size: 17px;
line-height: 1.5;
color: var(--text-primary);
}
.itb-pp-pilot__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
@media (max-width: 900px) {
.itb-pp-pilot__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.itb-pp-audience__grid { grid-template-columns: 1fr; }
.itb-pp-audience__card--feature { grid-column: auto; }
.itb-pp-stat { padding: 26px 24px; }
.itb-pp-pilot__steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.itb-pp-catalog__grid { grid-template-columns: 1fr; }
}


.itb-section--pp-pricing {
--text-primary: #0f1b2d;
--text-secondary: #475569;
--text-muted: #64748b;
--bg-card: #ffffff;
--bg-card-hover: #f2f5fa;
--border-card: #e2e8f0;
--border-color: #e2e8f0;
--accent-light: #3a58c0;
--accent-bg: rgba(29, 72, 230, 0.06);
background: #ffffff;
color: #0f1b2d;
}
.itb-pp-pricing__header { margin-bottom: 44px; }
.itb-pp-pricing__grid {
display: grid;
grid-template-columns: repeat(var(--plans, 3), 1fr);
gap: 20px;
align-items: stretch;
}
.itb-pp-pricing__card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 32px 28px;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
@media (hover: hover) {
.itb-pp-pricing__card:hover {
border-color: #c9d3e2;
box-shadow: 0 20px 54px -34px rgba(15, 27, 45, 0.35);
transform: translateY(-3px);
}
}
.itb-pp-pricing__card.is-featured {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 26px 64px -34px rgba(29, 72, 230, 0.6);
background: linear-gradient(180deg, rgba(29, 72, 230, 0.05), transparent 220px), var(--bg-card);
}
@media (hover: hover) {
.itb-pp-pricing__card.is-featured:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 30px 70px -32px rgba(29, 72, 230, 0.7);
}
}
.itb-pp-pricing__badge {
position: absolute;
top: -12px;
left: 28px;
background: var(--accent);
color: #fff;
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 5px 13px;
border-radius: var(--radius-full);
}
.itb-pp-pricing__name {
font-family: var(--font-heading);
font-weight: 800;
font-size: 22px;
line-height: 1.2;
color: var(--text-primary);
margin: 0 0 6px;
}
.itb-pp-pricing__audience {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
margin: 0 0 20px;
min-height: 42px;
}
.itb-pp-pricing__price {
margin: 0 0 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border-card);
}
.itb-pp-pricing__price-value {
display: block;
font-family: var(--font-heading);
font-weight: 800;
font-size: 30px;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.itb-pp-pricing__price-note {
display: block;
margin-top: 8px;
font-size: 13px;
line-height: 1.45;
color: var(--text-secondary);
}
.itb-pp-pricing__features {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.itb-pp-pricing__features li {
position: relative;
padding-left: 26px;
font-size: 14px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-pp-pricing__features li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent-bg);
box-shadow: inset 0 0 0 1.5px var(--accent-light);
}
.itb-pp-pricing__card-cta { margin-top: auto; }
.itb-pp-pricing__card-cta .btn {
display: block;
width: 100%;
text-align: center;
}
.itb-pp-pricing__note {
margin: 28px auto 0;
max-width: 900px;
text-align: center;
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
}
.itb-pp-pricing__actions {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.itb-section--pp-pricing .btn--ghost {
background: transparent;
border-color: var(--border-color);
color: var(--text-primary);
}
.itb-section--pp-pricing .btn--ghost:hover {
background: var(--bg-card-hover);
border-color: var(--accent);
}
@media (max-width: 960px) {
.itb-pp-pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.itb-pp-pricing__audience { min-height: 0; }
}


.itb-section--pp-matrix {
--text-primary: #0f1b2d;
--text-secondary: #475569;
--text-muted: #64748b;
--bg-card: #f6f8fb;
--bg-card-hover: #eef2f7;
--border-card: #e2e8f0;
--border-color: #e2e8f0;
--accent-light: #3a58c0;
--st-match-fg: #15803d;
--st-match-bg: rgba(22, 163, 74, 0.12);
--st-diff-fg: #b91c1c;
--st-diff-bg: rgba(220, 38, 38, 0.12);
--st-check-fg: #b45309;
--st-check-bg: rgba(217, 119, 6, 0.14);
background: #ffffff;
color: #0f1b2d;
}
.itb-pp-matrix__header {
max-width: 760px;
margin-bottom: 48px;
}
.itb-section--pp-matrix .itb-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent-light);
}
.itb-section--pp-matrix .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-pp-matrix__header .itb-section__title { margin-bottom: 16px; }
.itb-pp-matrix__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg);
border: 1px solid var(--border-card);
background: var(--bg-card);
}
.itb-pp-matrix__table {
width: 100%;
border-collapse: collapse;
font-size: 16px;
}
.itb-pp-matrix__table th,
.itb-pp-matrix__table td {
padding: 16px 20px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid var(--border-card);
}
.itb-pp-matrix__table tbody tr:last-child th,
.itb-pp-matrix__table tbody tr:last-child td { border-bottom: 0; }
.itb-pp-matrix__table thead th {
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--text-muted);
background: var(--bg-card-hover);
white-space: nowrap;
}
.itb-pp-matrix__th-sup { border-left: 1px solid var(--border-card); }
.itb-pp-matrix__req {
font-weight: 600;
color: var(--text-primary);
}
.itb-pp-matrix__value {
color: var(--text-primary);
border-left: 1px solid var(--border-card);
white-space: nowrap;
}
.itb-pp-matrix__status { white-space: nowrap; }
.itb-pp-matrix__sup-label { display: none; }
.itb-pp-matrix__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.itb-pp-matrix__badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex: none;
}
.itb-pp-matrix__badge.is-match { color: var(--st-match-fg); background: var(--st-match-bg); }
.itb-pp-matrix__badge.is-diff  { color: var(--st-diff-fg);  background: var(--st-diff-bg); }
.itb-pp-matrix__badge.is-check { color: var(--st-check-fg); background: var(--st-check-bg); }
.itb-pp-matrix__note {
margin: 22px 0 0;
font-size: 15px;
color: var(--text-muted);
}
@media (max-width: 720px) {
.itb-pp-matrix__scroll {
overflow-x: visible;
border: 0;
background: transparent;
border-radius: 0;
}
.itb-pp-matrix__table,
.itb-pp-matrix__table thead,
.itb-pp-matrix__table tbody,
.itb-pp-matrix__table tr,
.itb-pp-matrix__table th,
.itb-pp-matrix__table td { display: block; }
.itb-pp-matrix__table thead { display: none; }
.itb-pp-matrix__table tbody tr {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 20px 22px;
margin-bottom: 16px;
}
.itb-pp-matrix__table th,
.itb-pp-matrix__table td { border-bottom: 0; padding: 0; }
.itb-pp-matrix__req {
font-size: 17px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border-card);
}
.itb-pp-matrix__value {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
border-left: 0;
white-space: normal;
padding-top: 12px;
font-weight: 600;
}
.itb-pp-matrix__sup-label {
display: inline;
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
}
.itb-pp-matrix__status { padding: 6px 0 4px; }
}


.itb-section--pp-registry {
--text-primary: #0f1b2d;
--text-secondary: #576574;
--accent-light: #3a58c0;
--border-hair: #e6e0d7;
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
background: #f7f3eb;
color: #0f1b2d;
}
.itb-section--pp-registry .itb-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 20px;
}
.itb-section--pp-registry .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-pp-registry__header {
max-width: 760px;
margin-bottom: 40px;
}
.itb-pp-registry__header .itb-section__title { margin-bottom: 16px; }
.itb-pp-registry__list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--border-hair);
}
.itb-pp-registry__row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(20px, 4vw, 56px);
align-items: baseline;
padding: 26px 8px 26px 0;
border-bottom: 1px solid var(--border-hair);
transition: background 0.4s var(--ease-expo), padding-left 0.4s var(--ease-expo);
}
.itb-pp-registry__row::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s var(--ease-expo);
}
@media (hover: hover) {
.itb-pp-registry__row:hover {
background: linear-gradient(90deg, rgba(29, 72, 230, 0.04), transparent 60%);
padding-left: 18px;
}
.itb-pp-registry__row:hover::before { transform: scaleY(1); }
.itb-pp-registry__row:hover .itb-pp-registry__icon {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
}
.itb-pp-registry__lead {
display: flex;
align-items: center;
gap: 16px;
}
.itb-pp-registry__icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 11px;
background: rgba(29, 72, 230, 0.07);
color: var(--accent);
border: 1px solid rgba(29, 72, 230, 0.14);
transition: background 0.4s var(--ease-expo), color 0.4s var(--ease-expo), border-color 0.4s var(--ease-expo);
}
.itb-pp-registry__icon svg { width: 21px; height: 21px; }
.itb-pp-registry__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 18px;
line-height: 1.25;
color: var(--text-primary);
margin: 0;
}
.itb-pp-registry__desc {
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
max-width: 60ch;
}
.itb-pp-registry__row--key {
background: linear-gradient(90deg, rgba(29, 72, 230, 0.05), transparent 65%);
padding: 30px 8px 30px 22px;
}
.itb-pp-registry__row--key::before { transform: scaleY(1); }
.itb-pp-registry__row--key .itb-pp-registry__icon {
width: 48px;
height: 48px;
border-radius: 13px;
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.itb-pp-registry__row--key .itb-pp-registry__icon svg { width: 25px; height: 25px; }
.itb-pp-registry__row--key .itb-pp-registry__title { font-size: 21px; }
.itb-pp-registry__row--key .itb-pp-registry__desc { font-size: 16px; }
@media (max-width: 820px) {
.itb-pp-registry__row,
.itb-pp-registry__row--key {
grid-template-columns: 1fr;
gap: 12px;
padding-left: 16px;
}
.itb-pp-registry__row--key::before { transform: scaleY(1); }
.itb-pp-registry__desc { padding-left: 56px; }
}
@media (max-width: 480px) {
.itb-pp-registry__desc { padding-left: 0; }
}
.itb-pp-tiles {
position: relative;
}
.itb-pp-tiles__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
.itb-pp-tiles__cell { display: flex; }
.itb-pp-tiles__tile {
position: relative;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 22px 46px 22px 22px;
text-align: left;
background: #fcfaf6;
border: 1px solid var(--border-hair);
border-radius: 14px;
cursor: pointer;
font: inherit;
color: inherit;
transition: border-color 0.4s var(--ease-expo), background 0.4s var(--ease-expo),
box-shadow 0.4s var(--ease-expo), transform 0.4s var(--ease-expo);
}
.itb-pp-tiles__tile.is-static { cursor: default; padding-right: 22px; }
.itb-pp-tiles__icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(29, 72, 230, 0.07);
color: var(--accent);
border: 1px solid rgba(29, 72, 230, 0.14);
transition: background 0.4s var(--ease-expo), color 0.4s var(--ease-expo),
border-color 0.4s var(--ease-expo);
}
.itb-pp-tiles__icon svg { width: 22px; height: 22px; }
.itb-pp-tiles__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 17px;
line-height: 1.3;
color: var(--text-primary);
}
.itb-pp-tiles__more {
position: absolute;
right: 20px;
top: 50%;
width: 14px;
height: 14px;
margin-top: -7px;
flex: none;
}
.itb-pp-tiles__more::before,
.itb-pp-tiles__more::after {
content: "";
position: absolute;
background: var(--accent);
transition: transform 0.3s var(--ease-expo), opacity 0.3s var(--ease-expo);
}
.itb-pp-tiles__more::before { left: 0; top: 6px; width: 14px; height: 2px; }
.itb-pp-tiles__more::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.itb-pp-tiles__tile.is-active .itb-pp-tiles__more::after { opacity: 0; transform: scaleY(0); }
@media (hover: hover) {
.itb-pp-tiles__tile:not(.is-static):hover {
border-color: rgba(29, 72, 230, 0.35);
box-shadow: 0 10px 30px rgba(15, 27, 45, 0.07);
transform: translateY(-2px);
}
.itb-pp-tiles__tile:not(.is-static):hover .itb-pp-tiles__icon {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
}
.itb-pp-tiles__tile:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.itb-pp-tiles__tile.is-active {
border-color: var(--accent);
background: linear-gradient(180deg, rgba(29, 72, 230, 0.05), transparent);
}
.itb-pp-tiles__tile.is-active .itb-pp-tiles__icon {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.itb-pp-tiles__pop {
position: absolute;
left: 0;
right: 0;
z-index: 3;
padding: 22px 52px 24px 24px;
background: #fff;
border: 1px solid var(--accent);
border-radius: 14px;
box-shadow: 0 18px 44px rgba(15, 27, 45, 0.13);
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.3s var(--ease-expo), transform 0.3s var(--ease-expo);
}
.itb-pp-tiles__pop.is-open { opacity: 1; transform: translateY(0); }
.itb-pp-tiles__pop::before {
content: "";
position: absolute;
top: -7px;
left: var(--pop-x, 50%);
width: 12px;
height: 12px;
margin-left: -6px;
background: #fff;
border-left: 1px solid var(--accent);
border-top: 1px solid var(--accent);
transform: rotate(45deg);
}
.itb-pp-tiles__pop-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: 18px;
line-height: 1.3;
color: var(--text-primary);
margin: 0 0 8px;
}
.itb-pp-tiles__pop-desc {
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
max-width: 78ch;
}
.itb-pp-tiles__pop-close {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
background: transparent;
border: 1px solid var(--border-hair);
border-radius: 50%;
color: var(--text-secondary);
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.itb-pp-tiles__pop-close:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(29, 72, 230, 0.06);
}
@media (prefers-reduced-motion: reduce) {
.itb-pp-tiles__tile,
.itb-pp-tiles__pop { transition: none; }
}
@media (max-width: 720px) {
.itb-pp-tiles__grid { grid-template-columns: 1fr; gap: 12px; }
.itb-pp-tiles__tile { padding: 18px 42px 18px 18px; }
.itb-pp-tiles__title { font-size: 16px; }
.itb-pp-tiles__pop { padding: 20px 46px 20px 20px; }
}


.itb-section--pp-modes {
--text-primary: #ffffff;
--text-secondary: #b7bcc3;
--accent-light: #6f8bff;
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
background: #060c18;
color: #ffffff;
}
.itb-section--pp-modes .itb-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 20px;
}
.itb-section--pp-modes .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-pp-modes__header {
max-width: 760px;
margin-bottom: 44px;
}
.itb-pp-modes__header .itb-section__title { margin-bottom: 16px; color: #fff; }
.itb-pp-modes__header .itb-section__subtitle { color: var(--text-secondary); }
.itb-pp-modes__list {
list-style: none;
margin: 0;
padding: 0;
}
.itb-pp-modes__row {
--rail: 24px;
position: relative;
display: grid;
grid-template-columns: auto var(--rail) 1fr;
gap: 22px;
align-items: start;
padding: 32px 0;
border-top: 1px solid rgba(183, 188, 195, 0.14);
transition: transform 0.5s var(--ease-expo);
}
.itb-pp-modes__row:last-child { border-bottom: 1px solid rgba(183, 188, 195, 0.14); }
.itb-pp-modes__num {
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(30px, 4vw, 46px);
line-height: 1;
color: var(--accent-light);
letter-spacing: -1px;
min-width: 62px;
}
.itb-pp-modes__row::before {
content: "";
position: absolute;
left: calc(62px + 22px + var(--rail) / 2);
top: 0;
bottom: 0;
width: 1px;
background: rgba(111, 139, 255, 0.30);
}
.itb-pp-modes__row:first-child::before { top: 50%; }
.itb-pp-modes__row:last-child::before { bottom: 50%; }
.itb-pp-modes__row::after {
content: "";
position: absolute;
left: calc(62px + 22px + var(--rail) / 2);
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
transform: translate(-50%, -50%);
box-shadow: 0 0 0 5px #060c18, 0 0 0 6px rgba(111, 139, 255, 0.35);
transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo);
z-index: 1;
}
.itb-pp-modes__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(19px, 2.4vw, 23px);
line-height: 1.25;
color: #fff;
margin: 0 0 8px;
}
.itb-pp-modes__desc {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
max-width: 68ch;
}
@media (hover: hover) {
.itb-pp-modes__row:hover .itb-pp-modes__title { color: var(--accent-light); }
.itb-pp-modes__row:hover::after {
transform: translate(-50%, -50%) scale(1.5);
box-shadow: 0 0 0 5px #060c18, 0 0 0 8px rgba(111, 139, 255, 0.5);
}
}
@media (max-width: 640px) {
.itb-pp-modes__row {
grid-template-columns: auto 1fr;
gap: 8px 18px;
align-items: baseline;
padding: 24px 0;
}
.itb-pp-modes__rail { display: none; }
.itb-pp-modes__row::before,
.itb-pp-modes__row::after { display: none; }
.itb-pp-modes__num { font-size: 30px; min-width: 48px; }
}


.itb-section--pp-why {
--text-primary: #0f1b2d;
--text-secondary: #475569;
--accent-light: #3a58c0;
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
background: #f2f4f8;
color: #0f1b2d;
}
.itb-pp-why__inner {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
.itb-pp-why__aside {
position: sticky;
top: 120px;
}
.itb-pp-why__aside .itb-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 24px;
}
.itb-pp-why__aside .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-pp-why__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(30px, 4.4vw, 50px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0;
}
.itb-pp-why__title .accent { color: var(--accent); }
.itb-pp-why__list {
list-style: none;
margin: 0;
padding: 0;
}
.itb-pp-why__item {
display: grid;
grid-template-columns: clamp(56px, 8vw, 88px) 1fr;
gap: clamp(20px, 3vw, 36px);
padding: 30px 0;
border-top: 1px solid #dbe2ec;
}
.itb-pp-why__item:first-child { padding-top: 0; border-top: none; }
.itb-pp-why__num {
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(34px, 5vw, 52px);
line-height: 1;
letter-spacing: -1px;
color: var(--accent-light);
}
.itb-pp-why__item-title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(18px, 2.2vw, 21px);
line-height: 1.28;
color: var(--text-primary);
margin: 0 0 8px;
}
.itb-pp-why__item-desc {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
max-width: 62ch;
}
@media (max-width: 900px) {
.itb-pp-why__inner { grid-template-columns: 1fr; gap: 40px; }
.itb-pp-why__aside { position: static; }
.itb-pp-why__count { margin-top: 20px; }
}
@media (max-width: 520px) {
.itb-pp-why__item { grid-template-columns: 1fr; gap: 6px; }
.itb-pp-why__num { padding-top: 0; }
}


.itb-section--pp-chat {
--text-primary: #ffffff;
--text-secondary: #b7bcc3;
--accent-light: #7f97ff;
--panel: #0e1a2c;
--hair: rgba(183, 188, 195, 0.14);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--tg-bg: #0e1621;
--tg-header: #17212b;
--tg-in: #182533;
--tg-out: #2b5278;
--tg-text: #ffffff;
--tg-muted: #7d8e9e;
background:
radial-gradient(1100px 500px at 88% 8%, rgba(29, 72, 230, 0.14), transparent 60%),
#060c18;
color: #fff;
}
.itb-pp-chat__inner {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 420px);
gap: clamp(36px, 5vw, 80px);
align-items: center;
justify-content: center;
}
.itb-pp-chat__header { margin-bottom: 32px; }
.itb-pp-chat__aside .itb-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent-light);
margin-bottom: 20px;
}
.itb-pp-chat__aside .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-pp-chat__aside .itb-section__title { margin-bottom: 16px; color: #fff; }
.itb-pp-chat__aside .itb-section__subtitle { color: var(--text-secondary); }
.itb-pp-chat__topics {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.itb-pp-chat__topic {
width: 100%;
text-align: left;
cursor: pointer;
display: block;
background: var(--panel);
border: 1px solid var(--hair);
border-radius: 14px;
padding: 16px 20px;
color: var(--text-secondary);
transition: background 0.4s var(--ease-expo), border-color 0.4s var(--ease-expo), transform 0.4s var(--ease-expo);
}
.itb-pp-chat__topic-label {
display: block;
font-family: var(--font-heading);
font-weight: 800;
font-size: 16px;
line-height: 1.3;
color: #fff;
}
.itb-pp-chat__topic-desc {
display: block;
margin-top: 5px;
font-size: 13.5px;
line-height: 1.5;
color: #8a93a4;
}
@media (hover: hover) {
.itb-pp-chat__topic:hover { border-color: rgba(127, 151, 255, 0.5); transform: translateX(3px); }
}
.itb-pp-chat__topic.is-active {
background: linear-gradient(100deg, rgba(29, 72, 230, 0.22), rgba(29, 72, 230, 0.06));
border-color: var(--accent);
}
.itb-pp-chat__topic.is-active .itb-pp-chat__topic-desc { color: #c7cede; }
.itb-pp-chat__phone {
justify-self: center;
width: 100%;
max-width: 380px;
}
.itb-pp-chat__device {
position: relative;
aspect-ratio: 384 / 800;
background: #05090f;
border: 2px solid #222c3a;
border-radius: 46px;
padding: 12px;
box-shadow:
0 0 0 2px #0a0f17,
0 50px 110px -40px rgba(0, 0, 0, 0.95),
inset 0 1px 1px rgba(255, 255, 255, 0.06);
}
.itb-pp-chat__island {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 108px;
height: 30px;
background: #05090f;
border-radius: 16px;
z-index: 3;
}
.itb-pp-chat__screen {
position: relative;
height: 100%;
border-radius: 36px;
overflow: hidden;
background: var(--tg-bg);
}
.itb-pp-chat__panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
}
.itb-pp-chat__panel[hidden] { display: none; }
.itb-pp-chat__bar {
display: flex;
align-items: center;
gap: 10px;
padding: 46px 14px 12px;
background: var(--tg-header);
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.itb-pp-chat__back {
flex: none;
color: #5aa7e8;
display: inline-flex;
}
.itb-pp-chat__back svg { width: 22px; height: 22px; }
.itb-pp-chat__avatar {
flex: none;
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2d5bff, #6f4dff);
color: #fff;
font-family: var(--font-heading);
font-weight: 800;
font-size: 15px;
}
.itb-pp-chat__agent-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.itb-pp-chat__agent-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 15px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.itb-pp-chat__agent-status {
font-size: 12.5px;
color: #5aa7e8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.itb-pp-chat__menu { flex: none; color: var(--tg-muted); display: inline-flex; }
.itb-pp-chat__menu svg { width: 20px; height: 20px; }
.itb-pp-chat__thread {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 12px;
background:
radial-gradient(circle at 20% 15%, rgba(43, 82, 120, 0.20), transparent 40%),
radial-gradient(circle at 82% 70%, rgba(111, 77, 255, 0.14), transparent 45%),
var(--tg-bg);
}
.itb-pp-chat__msg {
display: flex;
max-width: 82%;
opacity: 0;
transform: translateY(10px) scale(0.98);
transition: opacity 0.35s var(--ease-expo), transform 0.35s var(--ease-expo);
}
.itb-pp-chat__msg.is-shown { opacity: 1; transform: none; }
.itb-pp-chat__msg--user { align-self: flex-end; }
.itb-pp-chat__msg--ai { align-self: flex-start; }
.itb-pp-chat__bubble {
position: relative;
padding: 8px 12px 7px;
font-size: 14px;
line-height: 1.4;
border-radius: 14px;
color: var(--tg-text);
}
.itb-pp-chat__bubble-text { display: inline; }
.itb-pp-chat__file {
display: flex;
align-items: center;
gap: 11px;
padding: 6px 2px 6px 0;
}
.itb-pp-chat__bubble--has-file .itb-pp-chat__file:not(:last-child) {
margin-bottom: 7px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.itb-pp-chat__file-icon {
position: relative;
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--file-color, #7d8e9e);
color: #fff;
}
.itb-pp-chat__file-icon svg { width: 20px; height: 20px; }
.itb-pp-chat__file-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.2px;
line-height: 1;
color: #fff;
}
.itb-pp-chat__file-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.itb-pp-chat__file-name {
font-weight: 600;
font-size: 13.5px;
line-height: 1.25;
color: #fff;
word-break: break-word;
}
.itb-pp-chat__file-sub {
font-size: 11.5px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.55);
}
.itb-pp-chat__msg--user .itb-pp-chat__file-sub { color: rgba(255, 255, 255, 0.7); }
.itb-pp-chat__file--pdf     { --file-color: #e0564f; }
.itb-pp-chat__file--xlsx    { --file-color: #21a366; }
.itb-pp-chat__file--docx    { --file-color: #2b7cd3; }
.itb-pp-chat__file--1c      { --file-color: #f2c94c; }
.itb-pp-chat__file--zip     { --file-color: #b06fd0; }
.itb-pp-chat__file--img     { --file-color: #4aa1e0; }
.itb-pp-chat__file--generic { --file-color: #7d8e9e; }
.itb-pp-chat__file--1c .itb-pp-chat__file-badge { color: #2a2a2a; }
.itb-pp-chat__msg--user .itb-pp-chat__bubble {
background: var(--tg-out);
border-bottom-right-radius: 5px;
}
.itb-pp-chat__msg--ai .itb-pp-chat__bubble {
background: var(--tg-in);
border-bottom-left-radius: 5px;
}
.itb-pp-chat__bubble .accent { color: #8fb8ff; font-weight: 700; }
.itb-pp-chat__time {
float: right;
margin: 6px 0 -2px 10px;
font-size: 10.5px;
line-height: 1;
color: rgba(255, 255, 255, 0.5);
position: relative;
top: 4px;
}
.itb-pp-chat__bubble--typing {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 11px 14px;
}
.itb-pp-chat__typing-label {
font-size: 12.5px;
color: var(--tg-muted);
margin-right: 2px;
}
.itb-pp-chat__typing-label[hidden] { display: none; }
.itb-pp-chat__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--tg-muted);
animation: pp-chat-dot 1.2s infinite ease-in-out;
}
.itb-pp-chat__dot:nth-child(2) { animation-delay: 0.18s; }
.itb-pp-chat__dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes pp-chat-dot {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.itb-pp-chat__input {
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--tg-header);
border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.itb-pp-chat__input-text {
flex: 1;
font-size: 14px;
color: var(--tg-muted);
}
.itb-pp-chat__send {
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #5aa7e8;
color: #fff;
}
.itb-pp-chat__send svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) {
.itb-pp-chat__msg { opacity: 1; transform: none; transition: none; }
.itb-pp-chat__dot { animation: none; }
}
@media (max-width: 900px) {
.itb-pp-chat__inner { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
.itb-pp-chat__aside { width: 100%; }
}
@media (max-width: 480px) {
.itb-pp-chat__topic { padding: 14px 16px; }
.itb-pp-chat__device { border-radius: 40px; }
.itb-pp-chat__screen { border-radius: 30px; }
}


.itb-section--pp-shot {
--text-primary: #ffffff;
--text-secondary: #b7bcc3;
--text-muted: #8792a0;
--border-color: rgba(183, 188, 195, 0.16);
background: #0b1524;
color: #ffffff;
}
.itb-section--pp-shot .itb-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 1.68px;
text-transform: uppercase;
color: var(--accent-light);
}
.itb-section--pp-shot .itb-section__eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--accent);
flex: none;
}
.itb-pp-shot__header {
max-width: 760px;
margin-bottom: 48px;
}
.itb-pp-shot__header .itb-section__eyebrow { margin-bottom: 20px; }
.itb-pp-shot__header .itb-section__title { margin-bottom: 18px; }
.itb-pp-shot__header .itb-section__subtitle {
font-size: 17px;
line-height: 1.6;
color: var(--text-secondary);
}
.itb-pp-shot__body {
display: flex;
flex-direction: column;
gap: clamp(28px, 3vw, 40px);
}
.itb-pp-shot__window {
margin: 0;
border: 1px solid rgba(148, 163, 208, 0.18);
border-radius: var(--radius-md);
overflow: hidden;
background: #0b1220;
}
.itb-pp-shot__chrome {
display: flex;
align-items: center;
gap: 8px;
padding: 13px 16px;
background: #0b1220;
border-bottom: 1px solid rgba(148, 163, 208, 0.14);
}
.itb-pp-shot__chrome span {
width: 11px;
height: 11px;
border-radius: 50%;
background: rgba(148, 163, 208, 0.3);
}
.itb-pp-shot__chrome span:nth-child(1) { background: #ff5f57; }
.itb-pp-shot__chrome span:nth-child(2) { background: #febc2e; }
.itb-pp-shot__chrome span:nth-child(3) { background: #28c840; }
.itb-pp-shot__img {
display: block;
width: 100%;
height: auto;
}
.itb-pp-shot__caption {
padding: 14px 18px;
border-top: 1px solid rgba(148, 163, 208, 0.14);
font-size: 13.5px;
line-height: 1.5;
color: var(--text-muted);
}
.itb-pp-shot__points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px 36px;
}
.itb-pp-shot__points li {
position: relative;
padding-left: 26px;
font-size: 15.5px;
line-height: 1.55;
color: var(--text-secondary);
}
.itb-pp-shot__points li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
@media (max-width: 620px) {
.itb-pp-shot__header { margin-bottom: 32px; }
.itb-pp-shot__points { grid-template-columns: 1fr; }
.itb-pp-shot__chrome { padding: 10px 13px; }
.itb-pp-shot__chrome span { width: 9px; height: 9px; }
}


.itb-pp-hero {
--text-primary: #ffffff;
--text-secondary: #aeb6c4;
--surface-2: rgba(148, 163, 208, 0.12);
--surface-2-hover: rgba(148, 163, 208, 0.22);
--border-color: rgba(148, 163, 208, 0.20);
position: relative;
overflow: hidden;
background: #060c18;
padding-top: clamp(72px, 10vw, 130px);
padding-bottom: 0;
isolation: isolate;
}
.itb-pp-hero__glow {
position: absolute;
top: -20%;
right: -10%;
width: min(900px, 70vw);
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle at 35% 35%,
var(--hero-glow-core) 0%,
var(--hero-glow-mid) 40%,
rgba(29, 72, 230, 0.05) 65%,
transparent 72%);
filter: blur(10px);
pointer-events: none;
z-index: -1;
}
.itb-pp-hero__lead {
max-width: 900px;
}
.itb-pp-hero__badge {
display: inline-block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12.5px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #9db0ff;
background: rgba(90, 116, 255, 0.12);
border: 1px solid rgba(90, 116, 255, 0.30);
border-radius: var(--radius-full);
padding: 8px 16px;
margin-bottom: 24px;
}
.itb-pp-hero__title {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(34px, 5vw, 64px);
line-height: 1.06;
letter-spacing: -0.02em;
color: #fff;
margin: 0;
}
.itb-pp-hero__title .accent { color: #7f97ff; }
.itb-pp-hero__subtitle {
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.6;
color: #aeb6c4;
margin: 22px 0 0;
max-width: 720px;
}
.itb-pp-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 36px;
}
.itb-pp-hero__shot {
margin-top: clamp(48px, 6vw, 88px);
padding: 0 clamp(16px, 4vw, 48px);
max-width: 1360px;
margin-left: auto;
margin-right: auto;
}
.itb-pp-hero__window {
border-radius: 14px 14px 0 0;
border: 1px solid rgba(148, 163, 208, 0.22);
border-bottom: none;
overflow: hidden;
background: #0d1626;
box-shadow: 0 -10px 80px -30px rgba(90, 116, 255, 0.5),
0 40px 100px -40px rgba(0, 0, 0, 0.9);
}
.itb-pp-hero__window-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 18px;
background: #0b1220;
border-bottom: 1px solid rgba(148, 163, 208, 0.14);
}
.itb-pp-hero__window-bar span {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(148, 163, 208, 0.35);
}
.itb-pp-hero__window-bar span:nth-child(1) { background: #ff5f57; }
.itb-pp-hero__window-bar span:nth-child(2) { background: #febc2e; }
.itb-pp-hero__window-bar span:nth-child(3) { background: #28c840; }
.itb-pp-hero__window-body {
max-height: clamp(360px, 46vw, 560px);
overflow: hidden;
}
.itb-pp-hero__shot-img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 720px) {
.itb-pp-hero__window-body { max-height: 62vw; }
.itb-pp-hero__actions .btn { flex: 1 1 auto; }
}
.itb-hero--split .itb-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: clamp(40px, 5vw, 88px);
align-items: start;
}
.itb-hero--split .itb-hero__lead { container-type: inline-size; }
.itb-hero--split .itb-hero__title { max-width: 100%; }
.itb-hero--split .itb-hero__subtitle { max-width: 100%; }
@media (min-width: 1025px) {
@container (min-width: 1px) {
.itb-hero--split .itb-hero__title { font-size: clamp(34px, 8.2cqi, 52px); }
}
}
.itb-hero--split .itb-hero__badge { margin-bottom: 18px; }
.itb-hero--split .itb-hero__title { margin-bottom: 22px; }
.itb-hero--split .itb-hero__subtitle { margin-bottom: 44px; }
.itb-hero--split .itb-hero__actions { margin-bottom: 22px; }
.itb-hero--split .itb-svc-hero__chips { max-width: 100%; margin-bottom: 0; }
.single-product .itb-hero__actions { margin-bottom: 22px; }
.single-product .itb-svc-hero__chips { margin-bottom: 0; }
.itb-pp-flow {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
padding: 28px 30px;
}
.itb-pp-flow__label {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11.5px;
line-height: 1.4;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 6px;
}
.itb-pp-flow__list {
list-style: none;
margin: 0;
padding: 0;
}
.itb-pp-flow__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
}
.itb-pp-flow__row:last-child { border-bottom: 0; padding-bottom: 0; }
.itb-pp-flow__stage {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.itb-pp-flow__step {
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
line-height: 1.3;
color: var(--text-primary);
}
.itb-pp-flow__note {
font-size: 13.5px;
line-height: 1.4;
color: var(--text-muted);
}
.itb-pp-flow__doc {
flex: none;
font-family: var(--font-mono);
font-weight: 700;
font-size: 11.5px;
line-height: 1.3;
letter-spacing: 0.4px;
color: var(--accent-light);
background: var(--accent-bg);
border: 1px solid var(--border-tag);
border-radius: var(--radius-sm);
padding: 7px 11px;
text-align: right;
}
@media (max-width: 1024px) {
.itb-hero--split .itb-hero__grid {
grid-template-columns: 1fr;
gap: 44px;
}
.itb-hero--split .itb-hero__actions { margin-bottom: 28px; }
}
@media (max-width: 700px) {
.itb-pp-flow { padding: 24px 20px; }
.itb-pp-flow__row {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 16px 0;
}
.itb-pp-flow__doc { text-align: left; }
.itb-hero--split .itb-hero__grid { gap: 36px; }
}


.itb-cw {
position: fixed;
right: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
bottom: max(clamp(16px, 3vw, 32px), env(safe-area-inset-bottom));
z-index: 70;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.itb-cw__fab {
position: relative;
flex-shrink: 0;
width: 56px;
height: 56px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background: var(--accent);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 6px 20px rgba(8, 17, 33, .28);
transition: background .2s ease, transform .2s ease;
}
.itb-cw__fab:hover {
background: var(--accent-hover);
transform: translateY(-2px);
}
.itb-cw__fab:focus-visible {
outline: 2px solid var(--accent-light);
outline-offset: 3px;
}
.itb-cw__fab-icon {
grid-area: 1 / 1;
width: 26px;
height: 26px;
transition: opacity .2s ease, transform .2s ease;
}
.itb-cw__fab-icon--close {
opacity: 0;
transform: rotate(-90deg);
}
.itb-cw.is-open .itb-cw__fab-icon--open {
opacity: 0;
transform: rotate(90deg);
}
.itb-cw.is-open .itb-cw__fab-icon--close {
opacity: 1;
transform: rotate(0);
}
.itb-cw__fab::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
}
.itb-cw__fab.is-pulsing::after {
animation: itb-cw-pulse 1.8s ease-out 3;
}
@keyframes itb-cw-pulse {
0%   { opacity: .55; box-shadow: 0 0 0 0 var(--accent); }
70%  { opacity: 0;   box-shadow: 0 0 0 18px var(--accent); }
100% { opacity: 0;   box-shadow: 0 0 0 18px var(--accent); }
}
.itb-cw__menu {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.itb-cw__menu[hidden] {
display: none;
}
.itb-cw__item {
position: relative;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--border-card);
border-radius: var(--radius-full);
background: var(--bg-card);
color: var(--text-primary);
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 4px 14px rgba(8, 17, 33, .22);
text-decoration: none;
opacity: 0;
transform: translateY(8px);
transition: opacity .22s ease, transform .22s ease, background .2s ease, border-color .2s ease;
}
.itb-cw.is-open .itb-cw__item {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--cw-i, 0) * 40ms);
}
.itb-cw__item:hover {
background: var(--bg-card-hover);
border-color: var(--border-tag);
}
.itb-cw__item:focus-visible {
outline: 2px solid var(--accent-light);
outline-offset: 3px;
}
.itb-cw__item-icon,
.itb-cw__item .itb-social__icon {
width: 22px;
height: 22px;
color: var(--text-primary);
}
.itb-cw__item-tip {
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%) translateX(4px);
white-space: nowrap;
padding: 5px 10px;
border-radius: var(--radius-sm);
background: var(--bg-card);
border: 1px solid var(--border-card);
color: var(--text-secondary);
font-size: 13px;
line-height: 1.2;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.itb-cw__item:hover .itb-cw__item-tip,
.itb-cw__item:focus-visible .itb-cw__item-tip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.itb-cw__popover {
width: 320px;
max-width: calc(100vw - 32px);
padding: 18px;
border: 1px solid var(--border-card);
border-radius: var(--radius-md);
background: var(--bg-card);
box-shadow: 0 12px 40px rgba(8, 17, 33, .32);
opacity: 0;
transform: translateY(8px);
transition: opacity .22s ease, transform .22s ease;
}
.itb-cw__popover[hidden] {
display: none;
}
.itb-cw__popover.is-visible {
opacity: 1;
transform: translateY(0);
}
.itb-cw__popover-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.itb-cw__popover-title {
margin: 0;
font-family: var(--font-heading);
font-size: 17px;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
}
.itb-cw__popover-close,
.itb-cw__greeting-close {
flex-shrink: 0;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: var(--radius-full);
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: grid;
place-items: center;
transition: color .18s ease, background .18s ease;
}
.itb-cw__popover-close:hover,
.itb-cw__greeting-close:hover {
color: var(--text-primary);
background: var(--surface-2);
}
.itb-cw__popover-close svg,
.itb-cw__greeting-close svg {
width: 16px;
height: 16px;
}
.itb-cw-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.itb-cw-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.itb-cw-form__field {
display: flex;
flex-direction: column;
gap: 5px;
}
.itb-cw-form__label {
font-size: 12px;
color: var(--text-muted);
}
.itb-cw-form__field input,
.itb-cw-form__field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
transition: border-color .18s ease;
}
.itb-cw-form__field textarea {
resize: vertical;
min-height: 56px;
}
.itb-cw-form__field input::placeholder,
.itb-cw-form__field textarea::placeholder {
color: var(--text-muted);
}
.itb-cw-form__field input:focus,
.itb-cw-form__field textarea:focus {
outline: none;
border-color: var(--accent);
}
.itb-cw-form__submit {
width: 100%;
}
.itb-cw-form__submit.is-loading {
opacity: .6;
pointer-events: none;
}
.itb-cw-form__submit:disabled {
opacity: .5;
cursor: not-allowed;
}
.itb-cw-form__consent {
margin: 0;
}
.itb-cw-form__consent .itb-consent__text {
font-size: 11px;
line-height: 1.45;
color: var(--text-muted);
}
.itb-cw-form__consent a {
color: var(--text-secondary);
text-decoration: underline;
text-underline-offset: 2px;
}
.itb-cw-form__consent a:hover {
color: var(--accent-light);
}
.itb-cw-form__result {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--text-secondary);
}
.itb-cw-form__result.is-error {
color: #ff8f8f;
}
[data-theme="light"] .itb-cw-form__result.is-error {
color: #b42318;
}
.itb-cw__greeting {
position: relative;
width: 320px;
max-width: calc(100vw - 32px);
border: 1px solid var(--border-card);
border-radius: var(--radius-md);
background: var(--bg-card);
box-shadow: 0 12px 40px rgba(8, 17, 33, .32);
opacity: 0;
transform: translateY(8px);
transition: opacity .28s ease, transform .28s ease;
}
.itb-cw__greeting[hidden] {
display: none;
}
.itb-cw__greeting.is-visible {
opacity: 1;
transform: translateY(0);
}
.itb-cw__greeting-close {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}
.itb-cw__greeting-body {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
padding: 16px;
border: none;
border-radius: inherit;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.itb-cw__greeting-body:focus-visible {
outline: 2px solid var(--accent-light);
outline-offset: -2px;
}
.itb-cw__greeting-photo {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: var(--radius-full);
object-fit: cover;
object-position: center top;
}
.itb-cw__greeting-content {
display: block;
min-width: 0;
padding-right: 22px;
}
.itb-cw__greeting-name {
display: block;
margin-bottom: 4px;
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--text-primary);
}
.itb-cw__greeting-text {
display: block;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-cw__greeting-p {
display: block;
margin: 0 0 8px;
}
.itb-cw__greeting-p:last-child {
margin-bottom: 0;
}
@media (max-width: 600px) {
.itb-cw {
right: 12px;
bottom: max(12px, env(safe-area-inset-bottom));
}
.itb-cw__fab {
width: 52px;
height: 52px;
}
.itb-cw__popover,
.itb-cw__greeting {
width: calc(100vw - 24px);
}
.itb-cw__item-tip {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.itb-cw__fab,
.itb-cw__fab-icon,
.itb-cw__item,
.itb-cw__item-tip,
.itb-cw__popover,
.itb-cw__greeting {
transition: none;
}
.itb-cw.is-open .itb-cw__item {
transition-delay: 0s;
}
.itb-cw__fab:hover {
transform: none;
}
.itb-cw__fab.is-pulsing::after {
animation: none;
}
}


.itb-roi {
--roi-paper: #f7f9fc;
--roi-surface: #ffffff;
--roi-surface-2: #eef2f8;
--roi-ink: #0f1b2d;
--roi-ink-2: #44516a;
--roi-muted: #6b7789;
--roi-line: #e2e8f0;
--roi-line-strong: #cbd5e1;
--roi-accent: #1d48e6;
--roi-accent-soft: rgba(29, 72, 230, 0.08);
--roi-deep: #0e1a2c;
--roi-pos: #1f7a55;
--roi-neg: #b3352a;
width: min(96vw, 1240px);
max-width: 96vw;
height: 96dvh;
max-height: 96dvh;
margin: auto;
padding: 0;
border: 1px solid var(--roi-line);
border-radius: var(--radius-md, 16px);
background: var(--roi-paper);
color: var(--roi-ink-2);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
overflow: hidden;
}
.itb-roi::backdrop {
background: rgba(6, 12, 24, 0.78);
backdrop-filter: blur(2px);
}
.itb-roi__shell {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.itb-roi__head {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 18px 28px 16px;
border-bottom: 1px solid var(--roi-line);
background: var(--roi-surface);
}
.itb-roi__head-text {
flex: 1;
min-width: 0;
}
.itb-roi__eyebrow {
display: block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--roi-accent);
}
.itb-roi__title {
margin: 6px 0 0;
font-size: clamp(19px, 2.1vw, 24px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--roi-ink);
text-wrap: balance;
}
.itb-roi__lead {
margin: 8px 0 0;
max-width: none;
font-size: 13.5px;
color: var(--roi-ink-2);
}
.itb-roi__about {
margin-top: 6px;
}
.itb-roi__about-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: none;
background: none;
color: var(--roi-accent);
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.itb-roi__about-toggle::-webkit-details-marker {
display: none;
}
.itb-roi__about-toggle svg {
transition: transform 0.2s ease;
}
.itb-roi__about[open] .itb-roi__about-toggle svg {
transform: rotate(180deg);
}
.itb-roi__proof {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin-top: 12px;
}
.itb-roi__proof-label {
font-family: var(--font-mono);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--roi-muted);
}
.itb-roi__chip {
padding: 6px 12px;
border-radius: var(--radius-full, 99px);
background: var(--roi-accent-soft);
font-size: 12px;
color: var(--roi-ink-2);
}
.itb-roi__chip b {
color: var(--roi-accent);
}
.itb-roi__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--roi-line-strong);
border-radius: var(--radius-sm, 8px);
background: transparent;
color: var(--roi-muted);
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
}
.itb-roi__close:hover {
color: var(--roi-ink);
border-color: var(--roi-ink-2);
}
.itb-roi__body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 22px 28px 26px;
}
.itb-roi__grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: 24px;
align-items: start;
}
.itb-roi__inputs {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.itb-roi__panel {
padding: 18px;
border: 1px solid var(--roi-line);
border-radius: var(--radius-sm, 8px);
background: var(--roi-surface);
}
.itb-roi__panel--tight {
padding: 16px 18px;
}
.itb-roi__panel-title {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--roi-muted);
}
.itb-roi__mark {
flex: 0 0 auto;
width: 15px;
height: 15px;
object-fit: contain;
opacity: 0.85;
}
.itb-roi__panel--fold {
padding: 0;
}
.itb-roi__summary {
margin: 0;
padding: 15px 18px;
cursor: pointer;
list-style: none;
}
.itb-roi__summary::-webkit-details-marker {
display: none;
}
.itb-roi__summary > span:first-of-type {
flex: 1;
min-width: 0;
}
.itb-roi__summary-hint {
flex: 0 0 auto;
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
letter-spacing: 0;
text-transform: none;
color: var(--roi-accent);
font-variant-numeric: tabular-nums;
}
.itb-roi__chevron {
flex: 0 0 auto;
color: var(--roi-muted);
transition: transform 0.2s ease;
}
.itb-roi__panel--fold[open] .itb-roi__chevron {
transform: rotate(180deg);
}
.itb-roi__fold-body {
padding: 2px 18px 18px;
}
.itb-roi__field + .itb-roi__field,
.itb-roi__pair + .itb-roi__field,
.itb-roi__field + .itb-roi__pair,
.itb-roi__pair + .itb-roi__pair {
margin-top: 14px;
}
.itb-roi__pair {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 0 16px;
align-items: start;
}
.itb-roi__pair > .itb-roi__field,
.itb-roi__pair > [data-roi-capex-field] {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
gap: 0;
}
.itb-roi__pair > [data-roi-capex-field] > .itb-roi__field {
display: contents;
}
.itb-roi__pair > [hidden] {
display: none;
}
@media (min-width: 1200px) {
.itb-roi__pair--triple {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@supports not (grid-template-rows: subgrid) {
.itb-roi__pair > .itb-roi__field,
.itb-roi__pair > [data-roi-capex-field] {
display: block;
}
.itb-roi__pair > [data-roi-capex-field] > .itb-roi__field {
display: block;
}
.itb-roi__pair .itb-roi__field-top {
min-height: 36px;
align-items: flex-end;
}
}
.itb-roi__field-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 8px;
}
.itb-roi__pair .itb-roi__field-top {
align-items: flex-end;
margin-bottom: 0;
padding-bottom: 8px;
}
.itb-roi__field label {
font-size: 13px;
font-weight: 600;
color: var(--roi-ink);
}
.itb-roi__hint {
font-weight: 400;
font-size: 11.5px;
color: var(--roi-muted);
}
.itb-roi__value {
flex: 0 0 auto;
font-family: var(--font-mono);
font-weight: 700;
font-size: 14px;
color: var(--roi-accent);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.itb-roi__unit {
margin-left: 3px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 11.5px;
color: var(--roi-muted);
}
.itb-roi input[type="number"],
.itb-roi select {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--roi-line);
border-radius: 6px;
background: var(--roi-surface-2);
color: var(--roi-ink);
font-family: var(--font-mono);
font-weight: 700;
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.itb-roi select {
font-family: var(--font-body);
font-weight: 600;
appearance: none;
padding-right: 34px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%236b7789' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 11px center;
}
.itb-roi input[type="range"] {
appearance: none;
width: 100%;
height: 5px;
margin: 4px 0 0;
border-radius: 3px;
background: var(--roi-line-strong);
outline: none;
}
.itb-roi input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 17px;
height: 17px;
border: 3px solid var(--roi-surface);
border-radius: 50%;
background: var(--roi-accent);
box-shadow: 0 0 0 1px var(--roi-accent);
cursor: pointer;
}
.itb-roi input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
border: 3px solid var(--roi-surface);
border-radius: 50%;
background: var(--roi-accent);
box-shadow: 0 0 0 1px var(--roi-accent);
cursor: pointer;
}
.itb-roi input:focus-visible,
.itb-roi select:focus-visible,
.itb-roi button:focus-visible,
.itb-roi summary:focus-visible {
outline: 2px solid var(--roi-accent);
outline-offset: 2px;
}
.itb-roi__note {
margin: 12px 0 0;
font-size: 11.5px;
line-height: 1.5;
color: var(--roi-muted);
}
.itb-roi__warn {
margin: 16px 0 0;
padding: 10px 12px;
border: 1px solid rgba(179, 53, 42, 0.28);
border-radius: 6px;
background: rgba(179, 53, 42, 0.06);
font-size: 12px;
line-height: 1.5;
color: var(--roi-neg);
}
.itb-roi__warn b {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.itb-roi__check {
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
}
.itb-roi__check input {
width: 17px;
height: 17px;
accent-color: var(--roi-accent);
}
.itb-roi__check label {
font-size: 13px;
font-weight: 600;
color: var(--roi-ink);
}
.itb-roi__seg {
display: flex;
gap: 4px;
padding: 4px;
border-radius: 9px;
background: var(--roi-surface-2);
}
.itb-roi__seg button {
flex: 1;
padding: 9px 8px;
border: none;
border-radius: 6px;
background: transparent;
color: var(--roi-ink-2);
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.itb-roi__seg button:hover {
color: var(--roi-ink);
}
.itb-roi__seg button.is-active {
background: var(--roi-accent);
color: #fff;
}
.itb-roi__seg--small button {
padding: 7px;
font-size: 12px;
}
.itb-roi__results {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.itb-roi__headline {
padding: 20px;
border-radius: var(--radius-sm, 8px);
background: var(--roi-deep);
}
.itb-roi__headline-label {
display: block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8fa0bd;
}
.itb-roi__headline-value {
margin: 8px 0 2px;
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(32px, 4vw, 42px);
line-height: 1;
letter-spacing: -0.02em;
color: #fff;
font-variant-numeric: tabular-nums;
}
.itb-roi__headline-unit {
margin-left: 6px;
font-size: 16px;
font-weight: 400;
color: #9fb0cc;
}
.itb-roi__headline-sub {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
color: #9fb0cc;
font-variant-numeric: tabular-nums;
}
.itb-roi__kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.itb-roi__kpi {
padding: 15px;
border: 1px solid var(--roi-line);
border-radius: var(--radius-sm, 8px);
background: var(--roi-surface);
}
.itb-roi__kpi-label {
display: block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--roi-muted);
}
.itb-roi__kpi-value {
margin: 4px 0 0;
font-family: var(--font-mono);
font-weight: 700;
font-size: 24px;
letter-spacing: -0.02em;
color: var(--roi-ink);
font-variant-numeric: tabular-nums;
}
.itb-roi__kpi-value.is-pos {
color: var(--roi-pos);
}
.itb-roi__kpi-value.is-neg {
color: var(--roi-neg);
}
.itb-roi__infra {
padding: 0;
border-color: var(--roi-accent);
}
.itb-roi__infra .itb-roi__summary [data-roi-infra-title] {
color: var(--roi-accent);
}
.itb-roi__infra-rows {
margin: 0;
}
.itb-roi__infra-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 7px 0;
border-bottom: 1px solid var(--roi-line);
font-size: 13px;
}
.itb-roi__infra-row:last-of-type {
border-bottom: none;
}
.itb-roi__infra-row dt {
color: var(--roi-ink-2);
}
.itb-roi__infra-row dd {
margin: 0;
font-family: var(--font-mono);
font-weight: 700;
color: var(--roi-ink);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.itb-roi__infra-row--hl dd {
color: var(--roi-accent);
}
.itb-roi__infra-toggle {
margin-top: 12px;
}
.itb-roi__infra-toggle .itb-roi__note {
margin: 0 0 8px;
}
.itb-roi__bars {
padding: 18px;
border: 1px solid var(--roi-line);
border-radius: var(--radius-sm, 8px);
background: var(--roi-surface);
}
.itb-roi__bars-title {
margin: 0 0 14px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--roi-muted);
}
.itb-roi__bar {
display: flex;
align-items: center;
gap: 12px;
}
.itb-roi__bar + .itb-roi__bar {
margin-top: 10px;
}
.itb-roi__bar-tag {
flex: 0 0 92px;
font-size: 12px;
color: var(--roi-ink-2);
}
.itb-roi__bar-track {
flex: 1;
min-width: 0;
height: 20px;
border-radius: 3px;
background: var(--roi-surface-2);
overflow: hidden;
}
.itb-roi__bar-fill {
display: block;
height: 100%;
width: 0;
border-radius: 3px;
transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.itb-roi__bar-fill--inv {
background: #6b7f9e;
}
.itb-roi__bar-fill--sav {
background: var(--roi-accent);
}
.itb-roi__bar-num {
flex: 0 0 68px;
text-align: right;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
color: var(--roi-ink);
font-variant-numeric: tabular-nums;
}
.itb-roi__cta {
justify-content: center;
width: 100%;
}
.itb-roi__footnote {
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid var(--roi-line);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.5;
color: var(--roi-muted);
}
@media (max-width: 1024px) {
.itb-roi__grid {
grid-template-columns: minmax(0, 1fr);
}
.itb-roi__results {
position: static;
}
}
@media (max-width: 640px) {
.itb-roi:not(.itb-roi--inline) {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
border: none;
border-radius: 0;
}
.itb-roi__head {
padding: 20px 18px 18px;
}
.itb-roi__body {
padding: 18px 18px 24px;
}
.itb-roi__panel {
padding: 18px;
}
.itb-roi__summary {
padding: 16px 18px;
}
.itb-roi__fold-body {
padding: 2px 18px 18px;
}
.itb-roi__pair,
.itb-roi__kpis {
grid-template-columns: minmax(0, 1fr);
}
.itb-roi__pair {
grid-template-rows: none;
gap: 16px;
}
.itb-roi__pair > .itb-roi__field,
.itb-roi__pair > [data-roi-capex-field] {
display: block;
grid-row: auto;
}
.itb-roi__pair > [data-roi-capex-field] > .itb-roi__field {
display: block;
}
.itb-roi__pair .itb-roi__field-top {
align-items: baseline;
padding-bottom: 0;
margin-bottom: 8px;
}
.itb-roi__seg {
flex-wrap: wrap;
}
.itb-roi__seg button {
flex: 1 1 100%;
}
.itb-roi__seg--small button {
flex: 1 1 0;
}
}
@media (prefers-reduced-motion: reduce) {
.itb-roi__bar-fill,
.itb-roi__chevron {
transition: none;
}
}
.itb-roi-hero {
min-height: 0;
padding-bottom: clamp(36px, 4vw, 56px);
}
.itb-roi-hero__grid {
display: grid;
gap: clamp(28px, 4vw, 64px);
align-items: center;
}
.itb-roi-hero--split .itb-roi-hero__grid {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
}
.itb-roi-hero__lead {
min-width: 0;
}
.itb-roi-hero--split .itb-hero__title,
.itb-roi-hero--split .itb-hero__subtitle {
max-width: none;
}
.itb-roi-hero__proof {
min-width: 0;
}
.itb-roi-hero__proof-note {
margin: 0 0 12px;
font-family: var(--font-mono);
font-size: 10.5px;
line-height: 1.45;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.itb-roi-hero__proof-list {
list-style: none;
display: grid;
gap: 8px;
margin: 0;
padding: 0;
}
.itb-roi-hero__proof-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 13px 18px;
border: 1px solid var(--border-card);
border-radius: var(--radius-sm);
background: var(--bg-card);
}
.itb-roi-hero__proof-label {
font-size: 13.5px;
color: var(--text-secondary);
}
.itb-roi-hero__proof-value {
flex: 0 0 auto;
font-family: var(--font-mono);
font-weight: 700;
font-size: 15px;
line-height: 1.2;
color: var(--text-primary);
white-space: nowrap;
}
.itb-roi-tool {
background: #f7f9fc;
padding-top: clamp(34px, 4vw, 56px);
padding-bottom: clamp(34px, 4vw, 56px);
}
.itb-roi-tool__inner {
width: 100%;
}
.itb-roi--inline {
display: block;
width: 100%;
max-width: none;
height: auto;
max-height: none;
margin: 0;
border: none;
border-radius: 0;
background: none;
overflow: visible;
}
.itb-roi--inline .itb-roi__shell {
height: auto;
}
.itb-roi--inline .itb-roi__body {
overflow: visible;
padding: 0;
}
@media (max-width: 640px) {
.itb-roi:not(.itb-roi--inline) {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
border: none;
border-radius: 0;
}
.itb-roi__head {
padding: 20px 18px 18px;
}
.itb-roi__body {
padding: 18px 18px 24px;
}
.itb-roi__panel {
padding: 18px;
}
.itb-roi__summary {
padding: 16px 18px;
}
.itb-roi__fold-body {
padding: 2px 18px 18px;
}
.itb-roi__pair,
.itb-roi__kpis {
grid-template-columns: minmax(0, 1fr);
}
.itb-roi__pair {
grid-template-rows: none;
gap: 16px;
}
.itb-roi__pair > .itb-roi__field,
.itb-roi__pair > [data-roi-capex-field] {
display: block;
grid-row: auto;
}
.itb-roi__pair > [data-roi-capex-field] > .itb-roi__field {
display: block;
}
.itb-roi__pair .itb-roi__field-top {
align-items: baseline;
padding-bottom: 0;
margin-bottom: 8px;
}
.itb-roi__seg {
flex-wrap: wrap;
}
.itb-roi__seg button {
flex: 1 1 100%;
}
.itb-roi__seg--small button {
flex: 1 1 0;
}
}
@media (prefers-reduced-motion: reduce) {
.itb-roi__bar-fill,
.itb-roi__chevron {
transition: none;
}
}
.itb-roi-hero {
min-height: 0;
padding-bottom: clamp(36px, 4vw, 56px);
}
.itb-roi-hero__proof {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 30px 0 12px;
padding: 0;
}
.itb-roi-hero__proof-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 18px;
border: 1px solid var(--border-card);
border-radius: var(--radius-sm);
background: var(--bg-card);
}
.itb-roi-hero__proof-label {
font-size: 12.5px;
color: var(--text-muted);
}
.itb-roi-hero__proof-value {
font-family: var(--font-mono);
font-weight: 700;
font-size: 17px;
line-height: 1.1;
color: var(--text-primary);
}
@media (max-width: 1100px) {
.itb-roi-hero--split .itb-roi-hero__grid {
grid-template-columns: minmax(0, 1fr);
}
.itb-roi-hero__proof-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.itb-roi-hero__proof-list {
grid-template-columns: minmax(0, 1fr);
}
.itb-roi-hero__proof-item {
padding: 11px 14px;
}
}
.itb-roi__field-note {
margin: 6px 0 0;
font-size: 11.5px;
line-height: 1.5;
color: var(--roi-muted);
}
.itb-roi__input--readonly {
cursor: not-allowed;
opacity: .75;
}
.itb-roi__years-hint {
margin: 12px 0 0;
font-size: 11.5px;
line-height: 1.5;
color: var(--roi-muted);
}


.itb-cta-form {
display: flex;
flex-direction: column;
gap: 16px;
padding: 28px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
}
.itb-cta-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.itb-cta-form__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.itb-cta-form__label {
font-size: 13px;
color: var(--text-secondary);
}
.itb-cta-form input[type="text"],
.itb-cta-form textarea {
width: 100%;
padding: 12px 14px;
background: var(--bg-primary);
border: 1px solid var(--border-card);
border-radius: var(--radius-sm);
color: var(--text-primary);
font: inherit;
outline: none;
transition: border-color .15s;
}
.itb-cta-form input[type="text"]:focus,
.itb-cta-form textarea:focus {
border-color: var(--accent);
}
.itb-cta-form textarea {
resize: vertical;
min-height: 96px;
}
.itb-cta-form__submit {
width: 100%;
justify-content: center;
cursor: pointer;
}
.itb-cta-form__submit.is-loading {
opacity: .6;
pointer-events: none;
}
.itb-cta-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.itb-cta__result {
margin: 0;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--accent-bg);
color: var(--text-primary);
font-size: 14px;
}
.itb-cta__result.is-error {
background: rgba(220, 60, 60, 0.12);
}
.itb-cta__preset {
cursor: pointer;
}
.itb-cta__preset.is-active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.itb-cta-form.is-flash {
box-shadow: 0 0 0 2px var(--accent);
transition: box-shadow .2s;
}
.itb-cta-form__consents {
display: flex;
flex-direction: column;
gap: 12px;
}
.itb-consent {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
align-items: start;
cursor: pointer;
}
.itb-consent input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
margin: 0;
width: 18px;
height: 18px;
margin-top: 2px;
background: var(--bg-primary);
border: 1px solid var(--border-tag);
border-radius: 4px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.itb-consent input[type="checkbox"]:hover {
border-color: var(--accent);
}
.itb-consent input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
background-size: 14px;
background-position: center;
background-repeat: no-repeat;
}
.itb-consent input[type="checkbox"]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.itb-consent__text {
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.itb-consent__text a {
color: var(--text-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.itb-consent__text a:hover {
color: var(--accent-light);
}
.itb-consent__req {
color: var(--accent);
}
.itb-cta-form__submit:disabled {
opacity: .5;
cursor: not-allowed;
}
@media (max-width: 640px) {
.itb-cta-form__row {
grid-template-columns: 1fr;
}
.itb-cta-form {
padding: 20px;
gap: 14px;
}
.itb-cta-form input[type="text"],
.itb-cta-form textarea {
font-size: 16px;
padding: 13px 14px;
}
.itb-cta-form textarea {
min-height: 112px;
}
.itb-cta-form__submit {
height: 52px;
}
}


@media (max-width: 1024px) {
:root {
--section-py: 72px;
}
}
@media (max-width: 768px) {
:root {
--section-py: 56px;
}
.itb-section__header { margin-bottom: 32px; }
.itb-section__subtitle { font-size: 15.5px; }
.itb-expertise__inner { gap: 10px; padding-block: 16px; }
.itb-expertise__list { gap: 6px 18px; }
.itb-expertise__item { padding: 0; }
.itb-expertise__item:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) {
:root {
--section-py: 48px;
}
.btn {
padding: 15px 22px;
font-size: 15px;
}
}