/* Декор не перехватывает клики */
.hero-v9-decor-layer {
    pointer-events: none;
}

/* Точка у верхнего бейджа (w-2 h-2) — в Bootstrap без размеров растягивалась */
.hero-v9-badge-dot {
    box-sizing: border-box;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
}

/* Круг с галочкой в списке features (w-5 h-5) */
.hero-v9-feature-check {
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    overflow: hidden;
}

.hero-v9-feature-check i {
    line-height: 1;
}

/* Плитка иконки в key-benefits (w-12 h-12 rounded-lg) */
.hero-v9-benefit-icon {
    box-sizing: border-box;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    overflow: hidden;
}

.hero-v9-benefit-icon i {
    line-height: 1;
}

/* Высота картинки как Tailwind h-96 (24rem) */
.hero-v9-hero-img {
    height: 24rem;
    max-height: 70vh;
    object-fit: cover;
}

/* Фоновые блобы — позиции как в Tailwind */
.hero-v9-blob-ne {
    position: absolute;
    top: 5rem;
    right: 5rem;
    width: 18rem;
    height: 18rem;
    filter: blur(64px);
}

.hero-v9-blob-sw {
    position: absolute;
    bottom: 5rem;
    left: 5rem;
    width: 24rem;
    height: 24rem;
    filter: blur(64px);
}

/* -- Button hover states -- */
.hero-btn-primary {
    transition: filter 0.2s ease, transform 0.15s ease;
}
.hero-btn-primary:hover,
.hero-btn-primary:focus {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.hero-btn-outline-secondary {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.hero-btn-outline-secondary:hover,
.hero-btn-outline-secondary:focus {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
    border-color: var(--bs-secondary) !important;
    transform: translateY(-1px);
}

.hero-btn-outline-primary-light {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.hero-btn-outline-primary-light:hover,
.hero-btn-outline-primary-light:focus {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
    transform: translateY(-1px);
}
/* intro v28 — Arc diagonal-split: clip split, floating rings, ransom-note words, grayscale hover, click burst */

/* Diagonal split zone */
.intro-arc2__split {
    clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
    opacity: 0.6;
}

/* Floating rings / donuts (fixed size — no BS w-N/h-N utility) */
.intro-arc2__ring { width: 10rem; height: 10rem; animation: intro-arc2-float 7s ease-in-out infinite; }
.intro-arc2__ring--2 { width: 6rem; height: 6rem; animation-duration: 9s; animation-delay: 1s; }
@keyframes intro-arc2-float {
    50% { transform: translateY(-1.2rem) rotate(20deg); }
}

/* Serif accent (paired with sans body) */
.intro-arc2__serif { font-family: ui-serif, Georgia, "Times New Roman", serif; }

/* Hero image grayscale → colour reveal on hover */
.intro-arc2__figure { aspect-ratio: 4 / 3; }
.intro-arc2__img {
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 420ms ease;
}
.intro-arc2__figure:hover .intro-arc2__img { filter: grayscale(0); }

/* Ransom-note mixed letters: alternate rotation, weight, family (no colour) */
.intro-arc2__word {
    display: inline-block;
    margin-right: 0.25em;
}
.intro-arc2__word:nth-child(3n+1) { transform: rotate(-4deg); font-weight: 900; }
.intro-arc2__word:nth-child(3n+2) { transform: rotate(3deg);  font-family: ui-serif, Georgia, serif; font-style: italic; }
.intro-arc2__word:nth-child(3n+3) { transform: rotate(-1deg); font-weight: 700; text-transform: uppercase; }

/* Click burst spark (inherits the button's primary colour via currentColor) */
.intro-arc2__react { position: relative; overflow: visible; }
.intro-arc2__spark {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    animation: intro-arc2-burst 640ms ease-out forwards;
}
@keyframes intro-arc2-burst {
    to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4) rotate(160deg); }
}

@media (prefers-reduced-motion: reduce) {
    .intro-arc2__ring { animation: none; }
}

/* v25 - chat bubble speech tail (border-triangle trick has no TW/BS utility) */
[data-chat-bubble] {
    position: relative;
}

/* fixed max-widths matching the TW max-w-3xl / max-w-2xl utilities (no BS equivalent) */
.dialogue-thread__wrap {
    max-width: 48rem;
}

.dialogue-thread__subtitle-max {
    max-width: 42rem;
}

/* fixed avatar size matching TW w-8 h-8 (no BS utility beyond 25/50/75/100%) */
.dialogue-thread__avatar {
    width: 2rem;
    height: 2rem;
}

/* fixed bubble max-width matching TW max-w-md (no BS equivalent) */
.dialogue-thread__bubble {
    max-width: 28rem;
}

[data-bubble-side="left"] [data-chat-bubble]::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: -0.5rem;
    width: 0;
    height: 0;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
    border-right: 0.5rem solid currentColor;
    color: inherit;
    opacity: 0.15;
}

[data-bubble-side="right"] [data-chat-bubble]::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    right: -0.5rem;
    width: 0;
    height: 0;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
    border-left: 0.5rem solid currentColor;
    color: inherit;
    opacity: 0.15;
}

/* advantages collage — CSS multi-column masonry (no BS analog); cards must not split across columns */

/* decor sizes/positions live here so they render in Bootstrap too (BS has no w-N/h-N/inset utilities) */
.advantages-collage__orb {
    width: 20rem;
    height: 20rem;
    top: -6rem;
    left: -4rem;
}

.advantages-collage__ring {
    width: 16rem;
    height: 16rem;
    bottom: -4rem;
    right: -4rem;
}

.advantages-collage {
    column-count: 1;
    column-gap: 1.5rem;
}

.advantages-collage__cell {
    break-inside: avoid;
}

@media (min-width: 640px) {
    .advantages-collage {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .advantages-collage {
        column-count: 3;
    }
}

/* integrations — unified hover (layout; shadow + lift; respect reduced motion) */
.integrations-card-hover {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.integrations-card-hover:hover {
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
    transform: translateY(-2px) scale(1.03);
}

.integrations-card-hover--shadow-only {
    transition: box-shadow 0.35s ease;
}

.integrations-card-hover--shadow-only:hover {
    transform: none;
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .integrations-card-hover:hover {
        transform: none;
    }
}

/* Primary tile: wpg-preview --tw-primary-* | --bs-primary-scale-*; inherited --bs-primary hex */
.integrations__icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    color: #fff;
    --_ie-from: rgb(var(--tw-primary-500, var(--bs-primary-scale-500, 99 102 241)) / 1);
    --_ie-to: rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1);
    background-color: var(--bs-primary, rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1));
    background-image: linear-gradient(to bottom right, var(--_ie-from), var(--_ie-to));
}
.integrations__icon-tile i {
    color: inherit;
}
.integrations__icon-tile svg,
.integrations__icon-tile :is(path, circle, rect, polygon) {
    fill: currentColor;
}

/* v14: left VS column — solid primary (fixes white-on-white if background helper omits in BS) */
.integrations__vs-left {
    color: #fff;
    background-color: var(--bs-primary, rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1));
    background-image: linear-gradient(
        to bottom right,
        rgb(var(--tw-primary-500, var(--bs-primary-scale-500, 99 102 241)) / 1),
        rgb(var(--tw-primary-700, var(--bs-primary-scale-700, 67 56 202)) / 1)
    );
}

.integrations__vs-left .integrations__icon-tile--on-primary {
    background-color: rgba(255, 255, 255, 0.18);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

.integrations__cta-on-primary {
    background-color: #fff;
    color: var(--bs-primary, rgb(var(--tw-primary-700, var(--bs-primary-scale-700, 67 56 202)) / 1));
}
.integrations__cta-on-primary:hover {
    background-color: color-mix(
        in srgb,
        #ffffff 88%,
        var(--bs-primary, rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1))
    );
    color: var(--bs-primary, rgb(var(--tw-primary-800, var(--bs-primary-scale-800, 55 48 163)) / 1));
}

/* Right column: solid primary + white text (readable on neutral card; BS-safe) */
.integrations__cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background-color: var(--bs-primary, rgb(var(--tw-primary-600, var(--bs-primary-scale-600, 79 70 229)) / 1));
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}
.integrations__cta-primary:hover {
    filter: brightness(1.06);
    color: #fff !important;
}

/* Softer card hover shadow (avoids muddy stack with shadow-lg / BS cards) */
.integrations-card-hover:hover {
    box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.07);
}
.integrations-card-hover--shadow-only:hover {
    box-shadow: 0 0.375rem 1rem rgba(15, 23, 42, 0.07);
}

/* Decorative VS: bounded size (avoids broken TW arbitrary / huge glyph in BS) */
.integrations__vs-watermark {
    font-size: min(38vw, 9rem);
    line-height: 0.85;
    max-width: 100%;
    text-align: center;
}

/* glossary ladder — figure offset */
.glossary-ladder__fig {
    transition: transform 0.2s ease;
}

.glossary-ladder__fig:hover {
    transform: translateX(4px);
}