/* v165 blocks/home-gsap.css: homepage GSAP hero/stage/scrollytelling visuals. Loaded only on the main page. */

/* === v4: scroll-driven first screen, i-teco-like pinned motion === */
.ts-hero[data-ts-hero-scroll] {
    --ts-hero-progress: 0;
    --ts-hero-text-y: 0px;
    --ts-hero-visual-y: 0px;
    --ts-hero-bottom-y: 0px;
    --ts-hero-canvas-y: 0px;
    --ts-hero-grid-y: 0px;
    --ts-hero-title-scale: 1;
    --ts-hero-card-scale: 1;
    --ts-hero-canvas-scale: 1;
    --ts-hero-text-opacity: 1;
    --ts-hero-bottom-opacity: 1;
    --ts-hero-canvas-opacity: .78;
    --ts-hero-ambient-opacity: .9;
    --ts-hero-visual-opacity: .96;
    --ts-hero-after-opacity: .95;
    --ts-hero-cue-scale: 1;
    --ts-hero-ambient-y: 0px;
    --ts-hero-before-y: 0px;
    padding: 0;
    min-height: 100svh;
    display: block;
    isolation: isolate;
}
.ts-hero__sticky {
    position: relative;
    min-height: 100svh;
    padding-top: clamp(116px, 9vw, 164px);
    padding-bottom: clamp(42px, 5vw, 70px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.ts-hero__sticky > .uk-container {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ts-hero[data-ts-hero-scroll] .ts-hero-canvas {
    height: 100%;
    opacity: var(--ts-hero-canvas-opacity);
    transform: translate3d(0, var(--ts-hero-canvas-y), 0) scale(var(--ts-hero-canvas-scale));
    transform-origin: 50% 58%;
    will-change: transform, opacity;
}
.ts-hero[data-ts-hero-scroll] .ts-grid-bg {
    transform: translate3d(0, var(--ts-hero-grid-y), 0);
    will-change: transform;
}
.ts-hero[data-ts-hero-scroll] .ts-ambient {
    opacity: var(--ts-hero-ambient-opacity);
    transform: translate3d(0, var(--ts-hero-ambient-y), 0);
    will-change: transform, opacity;
}
.ts-hero-copy {
    opacity: var(--ts-hero-text-opacity);
    transform: translate3d(0, var(--ts-hero-text-y), 0);
    will-change: transform, opacity;
}
.ts-hero-copy .ts-title-xl {
    transform: scale(var(--ts-hero-title-scale));
    transform-origin: 0 45%;
    will-change: transform;
}
.ts-hero-visual {
    opacity: var(--ts-hero-visual-opacity);
    transform: translate3d(0, var(--ts-hero-visual-y), 0);
    will-change: transform, opacity;
}
.ts-hero-visual .ts-hero-card {
    transform:
        perspective(1200px)
        rotateX(calc((var(--my-ratio, .5) - .5) * -5deg))
        rotateY(calc((var(--mx-ratio, .5) - .5) * 5deg))
        scale(var(--ts-hero-card-scale));
    will-change: transform;
}
.ts-hero[data-ts-hero-scroll] .ts-hero__bottom {
    opacity: var(--ts-hero-bottom-opacity);
    transform: translate3d(0, var(--ts-hero-bottom-y), 0);
    will-change: transform, opacity;
}
.ts-hero[data-ts-hero-scroll]:after {
    opacity: var(--ts-hero-after-opacity);
}
.ts-hero[data-ts-hero-scroll]:before {
    transform: translate3d(0, var(--ts-hero-before-y), 0);
    will-change: transform;
}
.ts-hero[data-ts-hero-scroll] .ts-scroll-cue:after {
    content: "";
    display: inline-block;
    width: 64px;
    height: 1px;
    margin-left: 12px;
    vertical-align: middle;
    background: linear-gradient(90deg, var(--ts-accent), transparent);
    transform-origin: left center;
    transform: scaleX(var(--ts-hero-cue-scale));
}
@media (min-width: 960px) {
    .ts-hero[data-ts-hero-scroll] {
        min-height: 185svh;
    }
    .ts-hero__sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 760px;
    }
    .ts-hero[data-ts-hero-scroll] + .ts-section {
        margin-top: -1px;
    }
}
@media (max-width: 959px) {
    .ts-hero[data-ts-hero-scroll] {
        min-height: auto;
    }
    .ts-hero__sticky {
        min-height: auto;
        padding-top: 112px;
    }
    .ts-hero-copy,
    .ts-hero-visual,
    .ts-hero[data-ts-hero-scroll] .ts-hero__bottom,
    .ts-hero[data-ts-hero-scroll] .ts-hero-canvas,
    .ts-hero[data-ts-hero-scroll] .ts-grid-bg,
    .ts-hero[data-ts-hero-scroll] .ts-ambient {
        opacity: 1;
        transform: none;
    }
    .ts-hero-copy .ts-title-xl,
    .ts-hero-visual .ts-hero-card {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ts-hero[data-ts-hero-scroll] {
        min-height: auto;
    }
    .ts-hero__sticky {
        position: relative;
        height: auto;
        min-height: auto;
    }
    .ts-hero-copy,
    .ts-hero-visual,
    .ts-hero[data-ts-hero-scroll] .ts-hero__bottom,
    .ts-hero[data-ts-hero-scroll] .ts-hero-canvas,
    .ts-hero[data-ts-hero-scroll] .ts-grid-bg,
    .ts-hero[data-ts-hero-scroll] .ts-ambient {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* === v5: i-teco-like partial scroll stage + lighter headings === */
body.ts-body h1,
body.ts-body h2,
body.ts-body h3,
.ts-title-xl,
.ts-title-lg,
.ts-page-title,
.ts-section-title,
.ts-mission-text,
.ts-promo-card h3,
.ts-feature-card h3,
.ts-direction-card h3,
.ts-case-card h3,
.ts-price-card h3,
.ts-news-title,
.ts-footer-title {
    font-weight: 700 !important;
}

.ts-hero--stage[data-ts-hero-scroll] {
    --ts-stage-progress: 0;
    --ts-stage-rotate: -6deg;
    --ts-stage-scale: 1;
    --ts-stage-shift-x: 0px;
    --ts-stage-shift-y: 0px;
    --ts-stage-core-scale: 1;
    --ts-stage-screen-y: 0px;
    --ts-stage-screen-opacity: .92;
    --ts-stage-bg-x: 22%;
    --ts-stage-bg-y: 28%;
    --ts-stage-line: 0%;
    min-height: 190svh;
    background:
        radial-gradient(circle at var(--ts-stage-bg-x) var(--ts-stage-bg-y), rgba(24, 214, 177, .27), transparent 28vw),
        radial-gradient(circle at 16% 78%, rgba(88, 166, 255, .18), transparent 34vw),
        linear-gradient(135deg, #05080d 0%, #07101a 47%, #06232d 100%);
}
.ts-hero--stage .ts-hero__sticky {
    min-height: 100svh;
    padding-top: clamp(112px, 8vw, 150px);
    padding-bottom: clamp(34px, 4vw, 58px);
}
.ts-hero-stage-container {
    width: 100%;
}
.ts-stage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 42vw);
    align-items: center;
    gap: clamp(32px, 6vw, 90px);
    min-height: min(720px, calc(100svh - 210px));
}
.ts-hero--stage .ts-title-xl {
    max-width: 980px;
    font-size: clamp(54px, 7.4vw, 128px);
    line-height: .87;
    letter-spacing: -.045em;
}
.ts-hero--stage .ts-lead {
    max-width: 700px;
}
.ts-hero--stage .ts-hero-copy {
    max-width: 900px;
    opacity: calc(1 - (var(--ts-stage-progress) * .25));
    transform: translate3d(0, calc(var(--ts-stage-progress) * -28px), 0);
}
.ts-stage-wrap {
    position: relative;
    min-height: clamp(520px, 74svh, 760px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 5;
}
.ts-stage {
    position: relative;
    width: min(100%, 650px);
    height: clamp(520px, 72svh, 760px);
    border-radius: clamp(30px, 4vw, 54px);
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        rgba(4, 9, 15, .42);
    box-shadow: 0 42px 120px rgba(0,0,0,.33);
    backdrop-filter: blur(18px);
    transform:
        translate3d(var(--ts-stage-shift-x), var(--ts-stage-shift-y), 0)
        rotate(var(--ts-stage-rotate))
        scale(var(--ts-stage-scale));
    transform-origin: 55% 50%;
    will-change: transform;
}
.ts-stage:before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 54px 54px;
    opacity: .45;
    transform: translate3d(calc(var(--ts-stage-progress) * -54px), calc(var(--ts-stage-progress) * 54px), 0);
    mask-image: radial-gradient(circle at 52% 46%, #000 0, rgba(0,0,0,.72) 44%, transparent 78%);
}
.ts-stage__bg {
    position: absolute;
    inset: -22%;
    background:
        radial-gradient(circle at var(--ts-stage-bg-x) var(--ts-stage-bg-y), rgba(24,214,177,.46), transparent 24%),
        radial-gradient(circle at 76% 70%, rgba(88,166,255,.28), transparent 28%),
        radial-gradient(circle at 44% 44%, rgba(232,255,95,.12), transparent 20%);
    filter: blur(8px);
    opacity: .72;
    transform: rotate(calc(var(--ts-stage-progress) * 26deg)) scale(1.04);
}
.ts-stage__scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(24,214,177,.18) 47%, transparent 70%);
    height: 44%;
    transform: translateY(calc(-42% + var(--ts-stage-progress) * 220%));
    opacity: .55;
    mix-blend-mode: screen;
}
.ts-stage__index {
    position: absolute;
    left: clamp(22px, 3vw, 42px);
    top: clamp(22px, 3vw, 42px);
    z-index: 4;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-family: var(--ts-font-condensed);
}
.ts-stage__index span {
    display: block;
    font-size: clamp(54px, 7vw, 104px);
    line-height: .78;
    letter-spacing: -.05em;
    font-weight: 700;
    color: rgba(255,255,255,.94);
}
.ts-stage__index em {
    font-style: normal;
    color: rgba(234,242,255,.42);
    font-size: 18px;
    letter-spacing: .08em;
    padding-top: 8px;
}
.ts-stage__label {
    position: absolute;
    right: clamp(22px, 3vw, 42px);
    top: clamp(28px, 3vw, 50px);
    z-index: 4;
    color: var(--ts-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.ts-stage__core {
    position: absolute;
    width: min(78%, 500px);
    aspect-ratio: 1;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%) scale(var(--ts-stage-core-scale));
    z-index: 2;
    will-change: transform;
}
.ts-stage__ring {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    transform: rotate(calc(var(--ts-stage-progress) * 1turn));
}
.ts-stage__ring--b {
    inset: 20%;
    border-style: dashed;
    border-color: rgba(24,214,177,.32);
    transform: rotate(calc(var(--ts-stage-progress) * -1.3turn));
}
.ts-stage__ring--c {
    inset: 34%;
    border-color: rgba(88,166,255,.28);
    box-shadow: inset 0 0 44px rgba(24,214,177,.08);
}
.ts-stage__scheme {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ts-stage__scheme path,
.ts-stage__scheme circle {
    fill: none;
    stroke: url(#tsLine);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(24,214,177,.28));
}
.ts-stage__scheme circle {
    fill: rgba(24,214,177,.95);
    stroke: rgba(255,255,255,.55);
    stroke-width: 1.5;
}
.ts-stage__group {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(.82) rotate(-8deg);
    transition: opacity .42s ease, transform .55s cubic-bezier(.2,.9,.2,1);
}
.ts-stage__group path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset .8s cubic-bezier(.2,.9,.2,1);
}
.ts-hero--stage.is-stage-0 .ts-stage__group--web,
.ts-hero--stage.is-stage-1 .ts-stage__group--crm,
.ts-hero--stage.is-stage-2 .ts-stage__group--server,
.ts-hero--stage.is-stage-3 .ts-stage__group--growth {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.ts-hero--stage.is-stage-0 .ts-stage__group--web path,
.ts-hero--stage.is-stage-1 .ts-stage__group--crm path,
.ts-hero--stage.is-stage-2 .ts-stage__group--server path,
.ts-hero--stage.is-stage-3 .ts-stage__group--growth path {
    stroke-dashoffset: 0;
}
.ts-stage__center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(116px, 12vw, 160px);
    height: clamp(116px, 12vw, 160px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    background: rgba(5,8,13,.72);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 0 80px rgba(24,214,177,.20);
    backdrop-filter: blur(14px);
}
.ts-stage__center strong {
    font-family: var(--ts-font-condensed);
    font-size: 48px;
    line-height: .9;
    letter-spacing: -.04em;
    font-weight: 700;
}
.ts-stage__center span {
    color: rgba(234,242,255,.62);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ts-stage__screen {
    position: absolute;
    left: clamp(20px, 3vw, 38px);
    right: clamp(20px, 3vw, 38px);
    bottom: clamp(82px, 8vw, 112px);
    z-index: 4;
    padding: 18px;
    border-radius: 22px;
    background: rgba(5, 8, 13, .72);
    border: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(16px);
    opacity: var(--ts-stage-screen-opacity);
    transform: translate3d(0, var(--ts-stage-screen-y), 0);
    transition: opacity .25s ease;
}
.ts-stage__screen-top {
    display: flex;
    gap: 7px;
    margin-bottom: 14px;
}
.ts-stage__screen-top i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
}
.ts-stage__line {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 26px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(234,242,255,.64);
    font-size: 12px;
}
.ts-stage__line b {
    color: var(--ts-accent);
    font-weight: 700;
}
.ts-stage__chips {
    position: absolute;
    left: clamp(20px, 3vw, 38px);
    right: clamp(20px, 3vw, 38px);
    bottom: clamp(24px, 3vw, 40px);
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ts-stage__chips span {
    min-height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.045);
    color: rgba(234,242,255,.54);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.ts-stage__chips span.is-active {
    background: linear-gradient(135deg, rgba(24,214,177,.95), rgba(232,255,95,.86));
    color: #061018;
    border-color: transparent;
    transform: translateY(-2px);
}
.ts-hero--stage .ts-hero__bottom {
    position: relative;
    z-index: 6;
    margin-top: clamp(34px, 5vw, 64px);
    opacity: calc(.92 - (var(--ts-stage-progress) * .18));
    transform: translate3d(0, calc(var(--ts-stage-progress) * -20px), 0);
}
.ts-hero--stage .ts-scroll-cue:after {
    transform: scaleX(calc(1 - var(--ts-stage-progress)));
}
.ts-hero--stage:after {
    opacity: .36;
}
.ts-hero--stage:before {
    opacity: .55;
}

@media (min-width: 960px) {
    .ts-hero--stage .ts-hero__sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 760px;
    }
}
@media (max-width: 1199px) {
    .ts-stage-layout {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 39vw);
        gap: 34px;
    }
    .ts-stage {
        height: clamp(480px, 64svh, 650px);
    }
}
@media (max-width: 959px) {
    .ts-hero--stage[data-ts-hero-scroll] {
        min-height: auto;
    }
    .ts-stage-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .ts-stage-wrap {
        min-height: auto;
        justify-content: flex-start;
    }
    .ts-stage {
        width: 100%;
        height: 520px;
        transform: none !important;
    }
    .ts-hero--stage .ts-hero-copy {
        opacity: 1 !important;
        transform: none !important;
    }
}
@media (max-width: 639px) {
    .ts-stage {
        height: 460px;
        border-radius: 28px;
    }
    .ts-stage__screen {
        bottom: 78px;
        padding: 14px;
    }
    .ts-stage__line {
        font-size: 11px;
    }
    .ts-stage__chips {
        grid-template-columns: repeat(2, 1fr);
    }
    .ts-stage__label {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ts-stage,
    .ts-stage__bg,
    .ts-stage__scan,
    .ts-stage__ring,
    .ts-stage__screen,
    .ts-hero--stage .ts-hero-copy,
    .ts-hero--stage .ts-hero__bottom {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* === v6: page-long stage animation. The visual element is no longer limited by the hero block. === */
.ts-home-stage-scope {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: #f4f7fb;
}
.ts-home-stage-scope .ts-section,
.ts-home-stage-scope .ts-hero {
    position: relative;
}
.ts-home-stage-scope .ts-section > .uk-container,
.ts-home-stage-scope .ts-hero > .uk-container,
.ts-home-stage-scope .ts-cta-panel {
    position: relative;
    z-index: 5;
}
.ts-page-stage-track {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(44vw, 760px);
    min-width: 520px;
    pointer-events: none;
    z-index: 3;
}
.ts-page-stage {
    --ts-stage-progress: 0;
    --ts-stage-rotate: -7deg;
    --ts-stage-scale: .94;
    --ts-stage-shift-x: 0px;
    --ts-stage-shift-y: 0px;
    --ts-stage-core-scale: 1;
    --ts-stage-screen-y: 0px;
    --ts-stage-screen-opacity: .88;
    --ts-stage-bg-x: 22%;
    --ts-stage-bg-y: 28%;
    --ts-stage-opacity: .92;
    position: sticky;
    top: 94px;
    height: calc(100svh - 112px);
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px clamp(18px, 3vw, 44px) 22px 0;
    opacity: var(--ts-stage-opacity);
    transform: translate3d(0, calc(var(--ts-stage-progress) * 18px), 0);
    will-change: transform, opacity;
}
.ts-page-stage__hint {
    position: absolute;
    right: clamp(28px, 5vw, 76px);
    top: clamp(28px, 8vh, 70px);
    z-index: 6;
    color: rgba(5, 8, 13, .42);
    font-family: var(--ts-font-condensed);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
    transform: translate3d(calc(var(--ts-stage-progress) * -24px), calc(var(--ts-stage-progress) * 16px), 0);
}
.ts-page-stage .ts-stage {
    width: min(100%, 600px);
    height: min(72svh, 680px);
    min-height: 560px;
    border-radius: clamp(28px, 4.5vw, 58px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
        rgba(5, 11, 19, .60);
    border-color: rgba(255,255,255,.18);
    box-shadow:
        0 42px 130px rgba(0,0,0,.30),
        0 0 0 1px rgba(24,214,177,.08) inset;
    transform:
        translate3d(var(--ts-stage-shift-x), var(--ts-stage-shift-y), 0)
        rotate(var(--ts-stage-rotate))
        scale(var(--ts-stage-scale));
    transform-origin: 50% 50%;
}
.ts-page-stage .ts-stage:after {
    content: "";
    position: absolute;
    inset: auto 13% 7% 13%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(24,214,177,.78), transparent);
    box-shadow: 0 0 28px rgba(24,214,177,.45);
    opacity: .8;
    transform: translateX(calc((var(--ts-stage-progress) - .5) * 70px));
}
.ts-page-stage .ts-stage__scheme path,
.ts-page-stage .ts-stage__scheme circle {
    stroke: url(#tsLineGlobal);
}
.ts-page-stage .ts-stage__scheme circle {
    fill: rgba(24,214,177,.95);
}
.ts-page-stage.is-stage-0 .ts-stage__group--web,
.ts-page-stage.is-stage-1 .ts-stage__group--crm,
.ts-page-stage.is-stage-2 .ts-stage__group--server,
.ts-page-stage.is-stage-3 .ts-stage__group--growth {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.ts-page-stage.is-stage-0 .ts-stage__group--web path,
.ts-page-stage.is-stage-1 .ts-stage__group--crm path,
.ts-page-stage.is-stage-2 .ts-stage__group--server path,
.ts-page-stage.is-stage-3 .ts-stage__group--growth path {
    stroke-dashoffset: 0;
}
.ts-page-stage .ts-stage__chips span.is-active {
    background: linear-gradient(135deg, rgba(24,214,177,.95), rgba(232,255,95,.88));
    color: #061018;
    border-color: transparent;
    transform: translateY(-2px);
}
.ts-page-stage__progress {
    position: absolute;
    right: clamp(14px, 2vw, 26px);
    top: 14%;
    bottom: 14%;
    width: 2px;
    border-radius: 999px;
    background: rgba(5, 8, 13, .14);
    overflow: hidden;
}
.ts-page-stage__progress i {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 0;
    transform: scaleY(var(--ts-stage-progress));
    background: linear-gradient(180deg, var(--ts-accent), var(--ts-accent-2), transparent);
    box-shadow: 0 0 18px rgba(24,214,177,.5);
}
.ts-hero--clean {
    min-height: 100svh;
    padding-top: clamp(128px, 11vw, 178px);
    padding-bottom: clamp(58px, 7vw, 98px);
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 82% 20%, rgba(24,214,177,.22), transparent 28vw),
        radial-gradient(circle at 18% 82%, rgba(88,166,255,.16), transparent 34vw),
        linear-gradient(135deg, #05080d 0%, #07101a 48%, #06232d 100%);
}
.ts-hero--clean:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.9) 52%, transparent 100%);
    opacity: .36;
    transform: translate3d(calc(var(--ts-stage-progress, 0) * -72px), calc(var(--ts-stage-progress, 0) * 72px), 0);
}
.ts-hero--clean .ts-hero-canvas {
    position: absolute;
    inset: 0;
    opacity: .44;
    mix-blend-mode: screen;
}
.ts-hero--clean .ts-ambient {
    z-index: 1;
}
.ts-hero--clean .uk-container {
    min-height: calc(100svh - 230px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ts-hero--clean .ts-hero-copy {
    max-width: min(980px, 64vw);
}
.ts-hero--clean .ts-title-xl {
    max-width: 960px;
    font-size: clamp(56px, 7.2vw, 126px);
    line-height: .88;
    letter-spacing: -.05em;
    font-weight: 700 !important;
}
.ts-hero--clean .ts-lead {
    max-width: 710px;
    color: rgba(234,242,255,.78);
}
.ts-hero--clean .ts-hero__bottom {
    max-width: min(920px, 64vw);
    margin-top: clamp(44px, 7vw, 92px);
    position: relative;
    z-index: 6;
}
.ts-hero--clean .ts-stat {
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.11);
    backdrop-filter: blur(14px);
}
.ts-home-stage-scope .ts-section--night {
    background:
        radial-gradient(circle at 82% 16%, rgba(24,214,177,.18), transparent 26vw),
        linear-gradient(135deg, #05080d, #091929 70%, #071018);
}
.ts-home-stage-scope .ts-section--white,
.ts-home-stage-scope .ts-section--paper {
    background: rgba(244,247,251,.92);
    backdrop-filter: blur(0px);
}
.ts-home-stage-scope .ts-section--white {
    background: rgba(255,255,255,.92);
}
.ts-title-xl,
.ts-title-lg,
.ts-page-title,
.ts-section-title,
.ts-mission-text,
.ts-promo-card h3,
.ts-feature-card h3,
.ts-direction-card h3,
.ts-case-card h3,
.ts-price-card h3,
.ts-news-title,
.ts-footer-title {
    font-weight: 700 !important;
}
@media (max-width: 1439px) {
    .ts-page-stage-track { width: min(39vw, 620px); min-width: 420px; }
    .ts-page-stage .ts-stage { width: min(100%, 500px); min-height: 500px; height: min(66svh, 610px); }
    .ts-hero--clean .ts-hero-copy,
    .ts-hero--clean .ts-hero__bottom { max-width: min(880px, 62vw); }
}
@media (max-width: 1199px) {
    .ts-page-stage-track { opacity: .62; width: 42vw; min-width: 360px; }
    .ts-page-stage .ts-stage { width: min(100%, 440px); min-height: 460px; height: min(60svh, 540px); }
    .ts-page-stage .ts-stage__screen { display: none; }
    .ts-page-stage .ts-stage__chips { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 959px) {
    .ts-page-stage-track { display: none; }
    .ts-hero--clean { min-height: auto; padding-top: 118px; }
    .ts-hero--clean .ts-hero-copy,
    .ts-hero--clean .ts-hero__bottom { max-width: none; }
    .ts-hero--clean .ts-title-xl { font-size: clamp(44px, 13vw, 78px); }
    .ts-home-stage-scope .ts-section--white,
    .ts-home-stage-scope .ts-section--paper { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
    .ts-page-stage,
    .ts-page-stage .ts-stage,
    .ts-page-stage .ts-stage__bg,
    .ts-page-stage .ts-stage__scan,
    .ts-page-stage .ts-stage__ring,
    .ts-page-stage .ts-stage__screen {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* === v7: reserved right corridor for page-long animation.
   The animated stage stays on the right, while all main page content is shifted left
   so text/cards never sit behind the animation. === */
@media (min-width: 1200px) {
    .ts-home-stage-scope {
        --ts-stage-reserve: clamp(440px, 39vw, 700px);
        --ts-stage-safe-gap: clamp(32px, 4vw, 76px);
    }

    .ts-page-stage-track {
        width: var(--ts-stage-reserve);
        min-width: 0;
        right: 0;
    }

    .ts-home-stage-scope .ts-section > .uk-container,
    .ts-home-stage-scope .ts-hero > .uk-container {
        box-sizing: border-box;
        padding-right: calc(var(--ts-stage-reserve) + var(--ts-stage-safe-gap));
    }

    .ts-home-stage-scope .ts-cta-panel {
        margin-right: 0;
    }

    .ts-hero--clean .ts-hero-copy,
    .ts-hero--clean .ts-hero__bottom {
        max-width: 100%;
    }

    .ts-hero--clean .ts-title-xl {
        max-width: 920px;
    }

    .ts-hero--clean .ts-lead {
        max-width: 680px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .ts-home-stage-scope {
        --ts-stage-reserve: clamp(400px, 36vw, 520px);
        --ts-stage-safe-gap: 34px;
    }

    .ts-page-stage .ts-stage {
        width: min(100%, 470px);
        min-height: 480px;
        height: min(62svh, 560px);
    }

    .ts-page-stage__hint {
        right: clamp(20px, 3vw, 42px);
    }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .ts-home-stage-scope {
        --ts-stage-reserve: 330px;
        --ts-stage-safe-gap: 28px;
    }

    .ts-page-stage-track {
        width: var(--ts-stage-reserve);
        min-width: 0;
        opacity: .48;
    }

    .ts-home-stage-scope .ts-section > .uk-container,
    .ts-home-stage-scope .ts-hero > .uk-container {
        box-sizing: border-box;
        padding-right: calc(var(--ts-stage-reserve) + var(--ts-stage-safe-gap));
    }

    .ts-page-stage .ts-stage {
        width: min(100%, 330px);
        min-height: 390px;
        height: min(54svh, 470px);
        border-radius: 34px;
    }

    .ts-page-stage__hint,
    .ts-page-stage__progress,
    .ts-page-stage .ts-stage__screen,
    .ts-page-stage .ts-stage__chips {
        display: none;
    }

    .ts-hero--clean .ts-hero-copy,
    .ts-hero--clean .ts-hero__bottom {
        max-width: 100%;
    }
}

@media (min-width: 1600px) {
    .ts-home-stage-scope {
        --ts-stage-reserve: clamp(620px, 38vw, 760px);
        --ts-stage-safe-gap: clamp(54px, 4vw, 96px);
    }

    .ts-page-stage .ts-stage {
        width: min(100%, 620px);
    }
}

/* === v8: clean scrollytelling block. The visual no longer covers global content.
   It lives in its own right column and changes while the left steps scroll. === */
.ts-scroll-showcase {
    position: relative;
    isolation: isolate;
    min-height: 390svh;
    padding: 0;
    overflow: clip;
    background:
        radial-gradient(circle at 78% 16%, rgba(24,214,177,.13), transparent 30vw),
        linear-gradient(180deg, #f7f9fc 0%, #ffffff 44%, #f4f7fb 100%);
}
.ts-scroll-showcase:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(6,15,27,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6,15,27,.045) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
    opacity: .42;
    pointer-events: none;
}
.ts-scroll-showcase .uk-container {
    position: relative;
    z-index: 2;
}
.ts-scroll-showcase__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .82fr);
    gap: clamp(54px, 7vw, 118px);
    align-items: start;
}
.ts-scroll-showcase__steps {
    padding: clamp(92px, 12vw, 168px) 0 clamp(96px, 14vw, 190px);
}
.ts-story-step {
    min-height: 82svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 720px;
    border-top: 1px solid rgba(6,15,27,.12);
    padding: clamp(42px, 6vw, 78px) 0;
}
.ts-story-step:first-child {
    border-top: 0;
}
.ts-story-step h2 {
    max-width: 720px;
    margin: 22px 0 0;
    font-family: var(--ts-font-condensed);
    font-size: clamp(48px, 5.4vw, 94px);
    line-height: .9;
    letter-spacing: -.045em;
    font-weight: 700 !important;
    color: #17202b;
}
.ts-story-step p {
    max-width: 620px;
    margin: 28px 0 0;
    color: #506176;
    font-size: clamp(18px, 1.35vw, 22px);
    line-height: 1.58;
}
.ts-story-list {
    display: grid;
    gap: 10px;
    max-width: 600px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.ts-story-list li {
    position: relative;
    padding-left: 26px;
    color: #243445;
    font-size: 16px;
    line-height: 1.48;
}
.ts-story-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ts-accent);
    box-shadow: 0 0 18px rgba(24,214,177,.42);
}
.ts-scroll-showcase .ts-page-stage-track {
    position: sticky;
    top: 88px;
    right: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    height: calc(100svh - 108px);
    pointer-events: none;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ts-scroll-showcase .ts-page-stage {
    position: relative;
    top: auto;
    height: 100%;
    min-height: 0;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: none;
}
.ts-scroll-showcase .ts-page-stage__hint {
    top: clamp(20px, 7vh, 58px);
    right: clamp(22px, 4vw, 58px);
    color: rgba(6,15,27,.42);
}
.ts-scroll-showcase .ts-page-stage .ts-stage {
    width: min(100%, 620px);
    height: min(68svh, 620px);
    min-height: 500px;
    max-height: 660px;
    transform:
        translate3d(var(--ts-stage-shift-x), var(--ts-stage-shift-y), 0)
        rotate(var(--ts-stage-rotate))
        scale(var(--ts-stage-scale));
    background:
        radial-gradient(circle at var(--ts-stage-bg-x) var(--ts-stage-bg-y), rgba(24,214,177,.30), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.055)),
        rgba(7, 16, 26, .72);
}
.ts-scroll-showcase .ts-page-stage__progress {
    right: 8px;
    top: 18%;
    bottom: 18%;
}
.ts-scroll-showcase .ts-stage__screen {
    left: 8%;
    right: 8%;
    bottom: 20%;
}
.ts-scroll-showcase .ts-stage__chips {
    left: 9%;
    right: 9%;
    bottom: 7%;
}
.ts-hero--clean .ts-hero-copy,
.ts-hero--clean .ts-hero__bottom {
    max-width: 1040px;
}
.ts-hero--clean .ts-title-xl {
    max-width: 1080px;
}
.ts-hero--clean .ts-lead {
    max-width: 760px;
}
@media (max-width: 1439px) {
    .ts-scroll-showcase__grid {
        grid-template-columns: minmax(0, 1fr) minmax(380px, .72fr);
        gap: clamp(40px, 5vw, 78px);
    }
    .ts-scroll-showcase .ts-page-stage .ts-stage {
        width: min(100%, 520px);
        min-height: 460px;
        height: min(64svh, 560px);
    }
    .ts-story-step h2 {
        font-size: clamp(46px, 5.2vw, 76px);
    }
}
@media (max-width: 1199px) {
    .ts-scroll-showcase {
        min-height: auto;
        padding: 92px 0;
    }
    .ts-scroll-showcase__grid {
        grid-template-columns: 1fr;
    }
    .ts-scroll-showcase .ts-page-stage-track {
        position: relative;
        top: auto;
        order: -1;
        height: auto;
        min-height: 520px;
    }
    .ts-scroll-showcase .ts-page-stage {
        min-height: 520px;
    }
    .ts-scroll-showcase .ts-page-stage .ts-stage {
        height: 520px;
        min-height: 0;
        width: min(100%, 560px);
    }
    .ts-scroll-showcase__steps {
        padding: 0;
    }
    .ts-story-step {
        min-height: auto;
        padding: 54px 0;
    }
}
@media (max-width: 959px) {
    .ts-scroll-showcase .ts-page-stage-track {
        display: block;
        min-height: 410px;
    }
    .ts-scroll-showcase .ts-page-stage {
        min-height: 410px;
    }
    .ts-scroll-showcase .ts-page-stage .ts-stage {
        width: min(100%, 420px);
        height: 390px;
        border-radius: 34px;
        transform: scale(.92) !important;
    }
    .ts-scroll-showcase .ts-stage__screen,
    .ts-scroll-showcase .ts-page-stage__hint,
    .ts-scroll-showcase .ts-page-stage__progress {
        display: none;
    }
    .ts-story-step h2 {
        font-size: clamp(40px, 12vw, 64px);
    }
    .ts-story-step p {
        font-size: 17px;
    }
}
@media (max-width: 639px) {
    .ts-scroll-showcase {
        padding: 66px 0;
    }
    .ts-scroll-showcase .ts-page-stage-track {
        min-height: 320px;
    }
    .ts-scroll-showcase .ts-page-stage {
        min-height: 320px;
    }
    .ts-scroll-showcase .ts-page-stage .ts-stage {
        height: 300px;
        width: min(100%, 330px);
        transform: scale(.88) !important;
    }
}

/* v11: premium kinetic hero + contact poster animation */
.ts-hero--kinetic {
    --ts-hero-local-x: 0px;
    --ts-hero-local-y: 0px;
    position: relative;
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: clamp(112px, 10vw, 152px);
    padding-bottom: clamp(48px, 7vw, 84px);
    background:
        radial-gradient(circle at 82% 34%, rgba(18, 214, 177, .25), transparent 26vw),
        radial-gradient(circle at 18% 74%, rgba(88, 166, 255, .18), transparent 26vw),
        linear-gradient(115deg, #051019 0%, #07151f 44%, #0a1b23 100%);
}
.ts-hero--kinetic .uk-container { position: relative; z-index: 3; width: 100%; }
.ts-hero--kinetic:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 36%, #000 74%, rgba(0,0,0,.12));
    opacity: .72;
    animation: ts-v11-grid-drift 22s linear infinite;
}
.ts-hero--kinetic:after {
    content: "";
    position: absolute;
    inset: -20% -18%;
    z-index: 2;
    pointer-events: none;
    background:
        conic-gradient(from 110deg at 68% 45%, transparent 0 16%, rgba(24,214,177,.12) 18%, transparent 23%, transparent 64%, rgba(88,166,255,.10) 68%, transparent 75%),
        radial-gradient(circle at calc(55% + var(--mx-px, 0px) * .03) calc(46% + var(--my-px, 0px) * .03), rgba(255,255,255,.075), transparent 34vw);
    filter: blur(.2px);
    opacity: .9;
}
.ts-hero-ribbons {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .82;
    mix-blend-mode: screen;
}
.ts-hero--kinetic .ts-grid-bg,
.ts-hero--kinetic .ts-ambient { display: none; }
.ts-hero-kinetic-grid {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(420px, .86fr);
    align-items: center;
    gap: clamp(42px, 7vw, 118px);
}
.ts-hero--kinetic .ts-hero-copy {
    max-width: 760px;
    opacity: 1;
    transform: none;
}
.ts-hero--kinetic .ts-title-xl,
.ts-hero--kinetic .ts-section-title,
.ts-title-xl,
.ts-section-title,
.ts-page-title,
.ts-story-step h2,
.ts-feature-card h3,
.ts-direction-card h3,
.ts-case-card h3,
.ts-price-card h3 {
    font-weight: 700 !important;
}
.ts-kinetic-visual {
    position: relative;
    min-height: clamp(460px, 48vw, 690px);
    perspective: 1200px;
    transform-style: preserve-3d;
}
.ts-kinetic-visual__frame {
    position: absolute;
    inset: 5% 0 4% 0;
    border-radius: clamp(32px, 4vw, 58px);
    border: 1px solid rgba(255,255,255,.16);
    background:
        linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.025) 45%, rgba(24,214,177,.10)),
        radial-gradient(circle at 76% 16%, rgba(24,214,177,.35), transparent 22%),
        rgba(3, 14, 20, .68);
    box-shadow: 0 44px 120px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.05);
    overflow: hidden;
    transform:
        rotateX(calc(var(--my-ratio, .5) * -7deg + 3.5deg))
        rotateY(calc(var(--mx-ratio, .5) * 9deg - 4.5deg));
    transition: transform .18s ease-out;
}
.ts-kinetic-visual__frame:before {
    content: "";
    position: absolute;
    inset: -24%;
    background:
        linear-gradient(100deg, transparent 0 42%, rgba(255,255,255,.18) 48%, transparent 56% 100%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 1px, transparent 1px 38px);
    animation: ts-v11-frame-sweep 7.5s cubic-bezier(.7,0,.2,1) infinite;
    opacity: .48;
}
.ts-kinetic-visual__frame:after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    transform: rotate(-18deg) scale(1.06);
    opacity: .75;
}
.ts-kinetic-visual__tag {
    position: absolute;
    top: 30px;
    right: 34px;
    z-index: 5;
    color: rgba(255,255,255,.58);
    text-transform: uppercase;
    letter-spacing: .34em;
    font: 700 11px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
}
.ts-kinetic-orbit {
    position: absolute;
    inset: 13% 9% 16% 9%;
    z-index: 3;
    border: 1px solid rgba(24,214,177,.24);
    border-radius: 999px;
    transform: rotate(-19deg);
    animation: ts-v11-orbit 18s linear infinite;
}
.ts-kinetic-orbit:before,
.ts-kinetic-orbit:after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: inherit;
    border: 1px dashed rgba(255,255,255,.15);
}
.ts-kinetic-orbit:after {
    inset: 30%;
    border-style: solid;
    border-color: rgba(88,166,255,.24);
    animation: ts-v11-orbit 12s linear reverse infinite;
}
.ts-kinetic-orbit span {
    position: absolute;
    left: 50%; top: 50%;
    min-width: 92px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #041015;
    background: linear-gradient(135deg, #1be6bf, #d4ff74);
    font: 700 12px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    transform:
        rotate(calc(var(--i) * 90deg))
        translateX(clamp(130px, 17vw, 210px))
        rotate(calc(var(--i) * -90deg + 19deg));
    box-shadow: 0 18px 36px rgba(0,0,0,.24);
}
.ts-kinetic-core {
    position: absolute;
    left: 50%; top: 49%;
    z-index: 4;
    width: clamp(210px, 26vw, 330px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}
.ts-kinetic-core__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    background: conic-gradient(from 0deg, rgba(24,214,177,.05), rgba(24,214,177,.7), rgba(88,166,255,.45), rgba(24,214,177,.05));
    mask-image: radial-gradient(circle, transparent 55%, #000 56% 61%, transparent 62%);
    animation: ts-v11-spin 10s linear infinite;
}
.ts-kinetic-core__ring--b {
    inset: 16%;
    animation-duration: 7s;
    animation-direction: reverse;
    opacity: .75;
}
.ts-kinetic-core__cube {
    position: absolute;
    inset: 24%;
    display: grid;
    place-items: center;
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
        linear-gradient(145deg, #10252c, #061015);
    box-shadow: 0 30px 70px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.18);
    transform: rotate(-11deg);
    animation: ts-v11-cube 5.6s ease-in-out infinite;
}
.ts-kinetic-core__cube span {
    color: #fff;
    font: 800 clamp(36px, 4.2vw, 74px)/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: -.05em;
}
.ts-kinetic-core__cube i {
    position: absolute;
    border-radius: 999px;
    background: #18d6b1;
    box-shadow: 0 0 24px rgba(24,214,177,.8);
}
.ts-kinetic-core__cube i:nth-child(2) { width: 10px; height: 10px; top: 20%; right: 18%; }
.ts-kinetic-core__cube i:nth-child(3) { width: 7px; height: 7px; left: 18%; bottom: 24%; background: #58a6ff; }
.ts-kinetic-core__cube i:nth-child(4) { width: 48px; height: 2px; left: 22%; top: 22%; transform: rotate(-35deg); opacity: .65; }
.ts-kinetic-panel {
    position: absolute;
    z-index: 6;
    width: clamp(168px, 17vw, 230px);
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    background: rgba(4,15,22,.72);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 55px rgba(0,0,0,.28);
    animation: ts-v11-float 6s ease-in-out infinite;
}
.ts-kinetic-panel b { color: #18d6b1; font: 800 14px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif); letter-spacing: .14em; }
.ts-kinetic-panel span { display: block; margin-top: 8px; font-weight: 700; font-size: 20px; }
.ts-kinetic-panel em { display: block; margin-top: 4px; color: rgba(255,255,255,.58); font-style: normal; font-size: 12px; }
.ts-kinetic-panel--one { left: 8%; bottom: 18%; }
.ts-kinetic-panel--two { right: 6%; top: 28%; animation-delay: -1.9s; }
.ts-kinetic-panel--three { right: 12%; bottom: 11%; animation-delay: -3.3s; }
.ts-kinetic-lines i {
    position: absolute;
    z-index: 2;
    height: 1px;
    width: 46%;
    left: 27%;
    top: calc(18% + var(--n, 0) * 14%);
    background: linear-gradient(90deg, transparent, rgba(24,214,177,.58), transparent);
    animation: ts-v11-line-pulse 3.8s ease-in-out infinite;
}
.ts-kinetic-lines i:nth-child(1){ --n: 0; animation-delay: -.2s; }
.ts-kinetic-lines i:nth-child(2){ --n: 1; animation-delay: -1s; }
.ts-kinetic-lines i:nth-child(3){ --n: 2; animation-delay: -1.8s; }
.ts-kinetic-lines i:nth-child(4){ --n: 3; animation-delay: -2.6s; }

.ts-contact-section {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 10vw, 140px) 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(24,214,177,.18), transparent 28vw),
        linear-gradient(135deg, #081018, #0c1821 52%, #0e2428);
    color: #fff;
}
.ts-contact-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .16;
    mask-image: radial-gradient(circle at 70% 50%, #000, transparent 70%);
}
.ts-contact-super {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(360px, .72fr);
    gap: clamp(36px, 7vw, 96px);
    align-items: center;
}
.ts-contact-super__copy { max-width: 660px; }
.ts-contact-super__actions {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 34px;
}
.ts-contact-super__mail {
    color: rgba(255,255,255,.72);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(24,214,177,.52);
}
.ts-contact-super__mail:hover { color: #fff; text-decoration: none; }
.ts-contact-super__motion {
    min-height: clamp(420px, 44vw, 610px);
    perspective: 1100px;
}
.ts-contact-poster {
    --contact-x: 0px;
    --contact-y: 0px;
    position: relative;
    height: 100%;
    min-height: clamp(420px, 44vw, 610px);
    border-radius: clamp(30px, 4vw, 54px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    background:
        radial-gradient(circle at calc(50% + var(--contact-x) * .05) calc(45% + var(--contact-y) * .05), rgba(24,214,177,.35), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.035) 46%, rgba(88,166,255,.10)),
        #101b22;
    transform:
        rotateX(calc(var(--contact-y) * -0.01deg))
        rotateY(calc(var(--contact-x) * 0.012deg));
    box-shadow: 0 50px 115px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.18);
}
.ts-contact-poster__noise,
.ts-contact-poster__noise:before,
.ts-contact-poster__noise:after {
    content: "";
    position: absolute;
    inset: -10%;
    pointer-events: none;
}
.ts-contact-poster__noise {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px);
    transform: rotate(-12deg);
    opacity: .5;
}
.ts-contact-poster__noise:before {
    background: linear-gradient(110deg, transparent 0 42%, rgba(255,255,255,.22) 48%, transparent 56% 100%);
    animation: ts-v11-contact-sweep 5.8s cubic-bezier(.65,0,.2,1) infinite;
}
.ts-contact-poster__marquee {
    position: absolute;
    left: 0; right: 0; top: 28px;
    display: flex;
    width: max-content;
    color: rgba(255,255,255,.64);
    font: 700 12px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .24em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: ts-v11-marquee 18s linear infinite;
}
.ts-contact-poster__marquee span { padding-right: 28px; }
.ts-contact-poster__body {
    position: absolute;
    inset: 84px 34px 72px;
}
.ts-contact-poster__word {
    position: absolute;
    left: 0; top: 0;
    color: #fff;
    font: 800 clamp(68px, 8vw, 130px)/.78 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: -.07em;
    text-transform: uppercase;
    transform: translate3d(calc(var(--contact-x) * .045), calc(var(--contact-y) * .035), 0);
}
.ts-contact-poster__word span { display: block; }
.ts-contact-poster__word span:nth-child(2) { color: #18d6b1; padding-left: .32em; }
.ts-contact-poster__word span:nth-child(3) { color: rgba(255,255,255,.62); padding-left: .08em; }
.ts-contact-poster__word span:nth-child(4) { color: #d4ff74; padding-left: .44em; }
.ts-contact-poster__form {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: min(74%, 360px);
    padding: 24px;
    border-radius: 28px;
    background: rgba(2,10,15,.72);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(14px);
    transform: translate3d(calc(var(--contact-x) * -.05), calc(var(--contact-y) * -.035), 0) rotate(-3deg);
}
.ts-contact-poster__form i {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    margin-bottom: 12px;
    overflow: hidden;
}
.ts-contact-poster__form i:before {
    content: "";
    display: block;
    width: 56%; height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #18d6b1, #58a6ff);
    transform-origin: left center;
    animation: ts-v11-field 4.2s ease-in-out infinite;
}
.ts-contact-poster__form i:nth-child(2):before { width: 72%; animation-delay: -.9s; }
.ts-contact-poster__form i:nth-child(3):before { width: 42%; animation-delay: -1.7s; }
.ts-contact-poster__form strong {
    display: block;
    margin-top: 20px;
    color: #fff;
    font: 700 22px/1.1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ts-contact-poster__form em { display: block; margin-top: 7px; color: rgba(255,255,255,.55); font-style: normal; }
.ts-contact-poster__cursor {
    position: absolute;
    right: 10%; top: 32%;
    width: 74px; height: 74px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #18d6b1, #d4ff74);
    color: #041015;
    font: 800 18px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    text-transform: uppercase;
    box-shadow: 0 24px 58px rgba(24,214,177,.24);
    transform: translate3d(calc(var(--contact-x) * .09), calc(var(--contact-y) * .08), 0);
    animation: ts-v11-contact-cursor 4s ease-in-out infinite;
}
.ts-contact-poster__bottom {
    position: absolute;
    left: 30px; right: 30px; bottom: 26px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}
.ts-contact-poster__bottom span {
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.72);
    font: 700 12px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ts-contact-poster__bottom span:first-child { color: #061014; background: linear-gradient(135deg, #18d6b1, #d4ff74); border-color: transparent; }

@keyframes ts-v11-grid-drift { to { background-position: 76px 76px, 76px 76px; } }
@keyframes ts-v11-frame-sweep { 0% { transform: translateX(-35%) rotate(0deg); opacity: 0; } 18%, 58% { opacity: .48; } 100% { transform: translateX(35%) rotate(0deg); opacity: 0; } }
@keyframes ts-v11-orbit { to { transform: rotate(341deg); } }
@keyframes ts-v11-spin { to { transform: rotate(1turn); } }
@keyframes ts-v11-cube { 0%,100% { transform: rotate(-11deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-14px); } }
@keyframes ts-v11-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes ts-v11-line-pulse { 0%,100% { opacity: .08; transform: scaleX(.34); } 50% { opacity: .72; transform: scaleX(1); } }
@keyframes ts-v11-contact-sweep { 0% { transform: translateX(-70%); opacity: 0; } 20%,55% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }
@keyframes ts-v11-marquee { to { transform: translateX(-50%); } }
@keyframes ts-v11-field { 0%,100% { transform: scaleX(.32); } 48% { transform: scaleX(1); } }
@keyframes ts-v11-contact-cursor { 0%,100% { transform: translate3d(calc(var(--contact-x) * .09), calc(var(--contact-y) * .08), 0) scale(1); } 50% { transform: translate3d(calc(var(--contact-x) * .09), calc(var(--contact-y) * .08 - 16px), 0) scale(1.08); } }

@media (max-width: 1199px) {
    .ts-hero-kinetic-grid,
    .ts-contact-super { grid-template-columns: 1fr; }
    .ts-kinetic-visual { min-height: 560px; max-width: 760px; margin: 0 auto; width: 100%; }
    .ts-contact-super__motion { min-height: 520px; }
}
@media (max-width: 767px) {
    .ts-hero--kinetic { min-height: auto; padding-top: 118px; }
    .ts-hero-ribbons { opacity: .45; }
    .ts-kinetic-visual { min-height: 420px; }
    .ts-kinetic-panel { width: 160px; padding: 13px 14px; }
    .ts-kinetic-panel span { font-size: 17px; }
    .ts-kinetic-panel--three { display: none; }
    .ts-kinetic-orbit span { min-width: 72px; font-size: 10px; transform: rotate(calc(var(--i) * 90deg)) translateX(118px) rotate(calc(var(--i) * -90deg + 19deg)); }
    .ts-contact-super { gap: 30px; }
    .ts-contact-super__motion,
    .ts-contact-poster { min-height: 440px; }
    .ts-contact-poster__body { inset: 78px 22px 70px; }
    .ts-contact-poster__form { width: 82%; padding: 18px; }
    .ts-contact-poster__bottom { grid-template-columns: repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ts-hero-ribbons { display: none; }
    .ts-kinetic-orbit,
    .ts-kinetic-core__ring,
    .ts-kinetic-core__cube,
    .ts-kinetic-panel,
    .ts-contact-poster__marquee,
    .ts-contact-poster__noise:before,
    .ts-contact-poster__cursor,
    .ts-contact-poster__form i:before { animation: none !important; }
}


/* v12: redesigned contact brief block */
.ts-contact-section--brief {
    isolation: isolate;
    min-height: auto;
    padding: clamp(86px, 11vw, 156px) 0;
    background:
        radial-gradient(circle at 74% 28%, rgba(24,214,177,.22), transparent 34vw),
        radial-gradient(circle at 22% 76%, rgba(88,166,255,.16), transparent 32vw),
        linear-gradient(135deg, #071018 0%, #0b1520 50%, #101b22 100%);
}
.ts-contact-noise {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .22;
    background:
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        radial-gradient(circle at 70% 45%, rgba(212,255,116,.13), transparent 24vw);
    background-size: 96px 96px, 96px 96px, auto;
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 92%, transparent 100%);
}
.ts-brief-contact {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(420px, .78fr);
    gap: clamp(42px, 7vw, 112px);
    align-items: center;
}
.ts-brief-contact__copy {
    max-width: 760px;
}
.ts-brief-contact__copy .ts-section-title {
    max-width: 860px;
}
.ts-brief-contact__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
    max-width: 620px;
}
.ts-brief-contact__meta span {
    min-height: 74px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.7);
    font: 700 13px/1.25 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ts-brief-contact__meta b {
    display: block;
    margin-bottom: 8px;
    color: var(--ts-accent, #18d6b1);
    letter-spacing: .18em;
}
.ts-brief-contact__visual {
    min-height: clamp(430px, 44vw, 640px);
    display: grid;
    place-items: center;
    perspective: 1200px;
}
.ts-brief-card {
    --brief-x: 0px;
    --brief-y: 0px;
    position: relative;
    width: min(100%, 560px);
    min-height: clamp(430px, 42vw, 610px);
    border-radius: clamp(30px, 4vw, 52px);
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255,255,255,.17);
    background:
        radial-gradient(circle at calc(56% + var(--brief-x) * .06) calc(38% + var(--brief-y) * .04), rgba(24,214,177,.28), transparent 27%),
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045) 45%, rgba(88,166,255,.11)),
        rgba(11,20,27,.88);
    box-shadow: 0 56px 125px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.16);
    transform: rotateX(calc(var(--brief-y) * -.008deg)) rotateY(calc(var(--brief-x) * .01deg));
}
.ts-brief-card:before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: calc(clamp(30px, 4vw, 52px) - 12px);
    pointer-events: none;
}
.ts-brief-card:after {
    content: "";
    position: absolute;
    inset: -35% -20%;
    background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.18) 49%, transparent 57%);
    transform: translateX(-50%) rotate(8deg);
    animation: ts-v12-brief-sheen 7s cubic-bezier(.65,0,.2,1) infinite;
    pointer-events: none;
}
.ts-brief-card__orbit {
    position: absolute;
    inset: 70px 58px 104px;
    border-radius: 42px;
    opacity: .8;
    transform: translate3d(calc(var(--brief-x) * -.035), calc(var(--brief-y) * -.025), 0);
}
.ts-brief-card__orbit i {
    position: absolute;
    inset: calc(var(--n, 0) * 34px);
    border-radius: 44% 56% 54% 46%;
    border: 1px solid rgba(24,214,177,.24);
    animation: ts-v12-orbit-morph 9s ease-in-out infinite;
}
.ts-brief-card__orbit i:nth-child(1) { --n: 0; }
.ts-brief-card__orbit i:nth-child(2) { --n: 1; animation-delay: -2s; border-color: rgba(88,166,255,.18); }
.ts-brief-card__orbit i:nth-child(3) { --n: 2; animation-delay: -4s; border-color: rgba(212,255,116,.15); }
.ts-brief-card__header,
.ts-brief-card__footer {
    position: absolute;
    left: 34px;
    right: 34px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font: 700 12px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.ts-brief-card__header { top: 30px; color: rgba(255,255,255,.62); }
.ts-brief-card__header b {
    color: #071018;
    background: linear-gradient(135deg, #18d6b1, #d4ff74);
    border-radius: 999px;
    padding: 8px 12px;
    letter-spacing: .12em;
}
.ts-brief-card__main {
    position: absolute;
    z-index: 3;
    left: 44px;
    right: 44px;
    top: 94px;
    bottom: 88px;
    display: grid;
    align-content: center;
    gap: 20px;
    transform: translate3d(calc(var(--brief-x) * .04), calc(var(--brief-y) * .03), 0);
}
.ts-brief-card__status {
    width: min(100%, 390px);
    padding: 24px;
    border-radius: 30px;
    background: rgba(2,9,14,.68);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.ts-brief-card__status strong {
    display: block;
    font: 700 clamp(34px, 4vw, 58px)/.9 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: -.04em;
}
.ts-brief-card__status em {
    display: block;
    margin-top: 14px;
    color: rgba(255,255,255,.58);
    font-style: normal;
    font-weight: 700;
}
.ts-brief-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 390px);
}
.ts-brief-card__grid span {
    min-height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(255,255,255,.05);
    font: 700 13px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ts-brief-card__grid span:first-child { color: #061014; background: linear-gradient(135deg, #18d6b1, #d4ff74); }
.ts-brief-card__fields {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(46%, 240px);
    padding: 20px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    transform: translate3d(calc(var(--brief-x) * -.08), calc(var(--brief-y) * -.06), 0) rotate(-2deg);
}
.ts-brief-card__fields i {
    display: block;
    height: 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    margin: 0 0 13px;
    overflow: hidden;
}
.ts-brief-card__fields i:last-child { margin-bottom: 0; }
.ts-brief-card__fields b {
    display: block;
    height: 100%;
    width: 58%;
    border-radius: inherit;
    background: linear-gradient(90deg, #18d6b1, #58a6ff);
    animation: ts-v12-field-fill 4.8s ease-in-out infinite;
}
.ts-brief-card__fields i:nth-child(2) b { width: 80%; animation-delay: -1.1s; }
.ts-brief-card__fields i:nth-child(3) b { width: 44%; animation-delay: -2.2s; }
.ts-brief-card__footer { bottom: 28px; }
.ts-brief-card__footer span { color: rgba(255,255,255,.62); }
.ts-brief-card__footer strong {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #061014;
    background: linear-gradient(135deg, #18d6b1, #d4ff74);
    box-shadow: 0 26px 70px rgba(24,214,177,.26);
    font: 700 22px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .08em;
    text-transform: uppercase;
    animation: ts-v12-go-pulse 3.8s ease-in-out infinite;
}
.ts-brief-card__scheme {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: .76;
    transform: translate3d(calc(var(--brief-x) * -.025), calc(var(--brief-y) * -.02), 0);
}
.ts-brief-card__scheme path,
.ts-brief-card__scheme circle {
    fill: none;
    stroke: rgba(24,214,177,.58);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.ts-brief-card__scheme circle {
    fill: #18d6b1;
    stroke: rgba(255,255,255,.55);
}
@keyframes ts-v12-brief-sheen { 0%, 56% { transform: translateX(-62%) rotate(8deg); opacity: 0; } 68% { opacity: 1; } 100% { transform: translateX(62%) rotate(8deg); opacity: 0; } }
@keyframes ts-v12-orbit-morph { 0%,100% { transform: rotate(0deg) scale(1); border-radius: 44% 56% 54% 46%; } 50% { transform: rotate(12deg) scale(1.04); border-radius: 58% 42% 46% 54%; } }
@keyframes ts-v12-field-fill { 0%,100% { transform: scaleX(.42); } 48% { transform: scaleX(1); } }
@keyframes ts-v12-go-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 1199px) {
    .ts-brief-contact { grid-template-columns: 1fr; }
    .ts-brief-contact__visual { max-width: 680px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767px) {
    .ts-contact-section--brief { padding: 72px 0; }
    .ts-brief-contact__meta { grid-template-columns: 1fr; }
    .ts-brief-contact__visual { min-height: 390px; }
    .ts-brief-card { min-height: 390px; border-radius: 30px; }
    .ts-brief-card__header, .ts-brief-card__footer { left: 22px; right: 22px; }
    .ts-brief-card__main { left: 24px; right: 24px; top: 78px; bottom: 86px; }
    .ts-brief-card__status { padding: 18px; border-radius: 22px; }
    .ts-brief-card__fields { position: relative; width: auto; margin-top: 0; }
    .ts-brief-card__footer strong { width: 68px; height: 68px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .ts-brief-card:after,
    .ts-brief-card__orbit i,
    .ts-brief-card__fields b,
    .ts-brief-card__footer strong { animation: none !important; }
}

/* v13: hero typography tuning + refreshed logo icon
   User request: reduce the hero title size and redesign only the logo icon. */
.ts-hero--kinetic .ts-title-xl {
    font-size: clamp(48px, 4.9vw, 86px) !important;
    line-height: .985 !important;
    letter-spacing: -.058em !important;
    max-width: 780px;
}
.ts-hero--kinetic .ts-hero-copy {
    max-width: 800px;
}
.ts-hero--kinetic .ts-lead {
    max-width: 720px;
}
@media (min-width: 1200px) {
    .ts-hero--kinetic .ts-hero__bottom {
        margin-top: clamp(34px, 5.5vw, 72px);
    }
}
@media (max-width: 1199px) {
    .ts-hero--kinetic .ts-title-xl {
        font-size: clamp(46px, 9vw, 74px) !important;
        max-width: 840px;
    }
}
@media (max-width: 767px) {
    .ts-hero--kinetic .ts-title-xl {
        font-size: clamp(40px, 12vw, 58px) !important;
        line-height: .95 !important;
    }
}

/* v15: coded hero system graphic, no nested-window composition */
.ts-hero-system {
    --system-x: 0px;
    --system-y: 0px;
    position: relative;
    min-height: clamp(520px, 45vw, 690px);
    width: min(100%, 760px);
    margin-inline: auto;
    isolation: isolate;
    transform-style: preserve-3d;
}
.ts-hero-system:before {
    content: "";
    position: absolute;
    inset: 8% 2% 4%;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(24,214,177,.22), transparent 30%),
        radial-gradient(circle at 70% 26%, rgba(88,166,255,.18), transparent 26%),
        radial-gradient(circle at 28% 70%, rgba(212,255,116,.10), transparent 25%);
    filter: blur(24px);
    opacity: .92;
    transform: translate3d(calc(var(--system-x) * -.12), calc(var(--system-y) * -.08), 0);
}
.ts-hero-system:after {
    content: "";
    position: absolute;
    inset: 12% 6%;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    background:
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0 54%, transparent 78%);
    opacity: .56;
    transform: translate3d(calc(var(--system-x) * .025), calc(var(--system-y) * .025), 0);
}
.ts-hero-system__caption {
    position: absolute;
    z-index: 6;
    left: clamp(8px, 2vw, 24px);
    top: clamp(8px, 2vw, 22px);
    color: rgba(255,255,255,.66);
    font: 700 clamp(11px, .82vw, 14px)/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .35em;
    text-transform: uppercase;
}
.ts-hero-system__caption:after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    border-radius: 99px;
    margin-top: 16px;
    background: linear-gradient(90deg, #18d6b1, #58a6ff);
    box-shadow: 0 0 20px rgba(24,214,177,.55);
}
.ts-hero-system__hud {
    position: absolute;
    z-index: 2;
    inset: 2% -2% 0;
    width: 104%;
    height: 100%;
    overflow: visible;
    transform:
        translate3d(calc(var(--system-x) * -.05), calc(var(--system-y) * -.04), 0)
        rotateX(calc(var(--my-ratio, .5) * -2deg + 1deg))
        rotateY(calc(var(--mx-ratio, .5) * 3deg - 1.5deg));
    transition: transform .15s ease-out;
}
.ts-hero-system__grid-lines path {
    fill: none;
    stroke: rgba(255,255,255,.055);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.ts-hero-system__orbits,
.ts-hero-system__trace,
.ts-hero-system__nodes {
    transform-box: fill-box;
    transform-origin: center;
}
.ts-hero-system__orbits { animation: ts-v15-system-drift 18s linear infinite; }
.ts-hero-system__orbits ellipse,
.ts-hero-system__orbits circle {
    fill: none;
    stroke: url(#tsHeroOrbit);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}
.ts-hero-system__orbits ellipse:nth-child(2) { stroke-dasharray: 9 12; opacity: .62; animation: ts-v15-dash 9s linear infinite; }
.ts-hero-system__orbits ellipse:nth-child(3) { stroke: rgba(88,166,255,.28); stroke-dasharray: 3 10; animation: ts-v15-dash 7s linear reverse infinite; }
.ts-hero-system__orbits circle { stroke: rgba(24,214,177,.25); }
.ts-hero-system__trace path {
    fill: none;
    stroke: url(#tsHeroLine);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 260 620;
    opacity: .72;
    vector-effect: non-scaling-stroke;
    animation: ts-v15-trace 7.5s cubic-bezier(.45,0,.2,1) infinite;
}
.ts-hero-system__trace path:nth-child(2) { animation-delay: -2.1s; opacity: .44; }
.ts-hero-system__trace path:nth-child(3) { animation-delay: -4.2s; opacity: .36; }
.ts-hero-system__nodes circle {
    fill: #18d6b1;
    opacity: .9;
    animation: ts-v15-node 3.8s ease-in-out infinite;
}
.ts-hero-system__nodes circle:nth-child(2n) { fill: #58a6ff; animation-delay: -1.2s; }
.ts-hero-system__nodes circle:nth-child(3n) { fill: #d4ff74; animation-delay: -2.3s; }
.ts-hero-system__hub {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    width: clamp(150px, 15vw, 215px);
    aspect-ratio: 1;
    transform: translate3d(calc(-50% + var(--system-x) * .045), calc(-50% + var(--system-y) * .035), 0);
}
.ts-hero-system__pulse {
    position: absolute;
    inset: -42%;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, transparent 0 12%, rgba(24,214,177,.82) 17%, rgba(88,166,255,.45) 28%, transparent 34% 100%);
    mask-image: radial-gradient(circle, transparent 0 55%, #000 56% 59%, transparent 60%);
    filter: drop-shadow(0 0 22px rgba(24,214,177,.46));
    animation: ts-v15-spin 10s linear infinite;
}
.ts-hero-code-icon {
    position: absolute;
    inset: 15%;
    border-radius: 34%;
    display: grid;
    grid-template-rows: 28% 1fr;
    overflow: hidden;
    background:
        radial-gradient(circle at 62% 26%, rgba(24,214,177,.34), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
        #07141c;
    border: 1px solid rgba(255,255,255,.20);
    box-shadow:
        0 28px 90px rgba(0,0,0,.44),
        0 0 0 1px rgba(24,214,177,.10),
        0 0 58px rgba(24,214,177,.30),
        inset 0 1px 0 rgba(255,255,255,.20);
    transform: rotate(-3deg);
    animation: ts-v15-hub-float 5.6s ease-in-out infinite;
}
.ts-hero-code-icon:before {
    content: "";
    position: absolute;
    inset: -40% -80%;
    background: linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,.24) 49%, transparent 56% 100%);
    animation: ts-v15-sheen 5.4s cubic-bezier(.65,0,.2,1) infinite;
}
.ts-hero-code-icon__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.05);
}
.ts-hero-code-icon__bar i {
    width: 9px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #18d6b1;
    box-shadow: 0 0 16px rgba(24,214,177,.8);
}
.ts-hero-code-icon__bar i:nth-child(2) { background: #58a6ff; box-shadow: 0 0 16px rgba(88,166,255,.8); }
.ts-hero-code-icon__bar i:nth-child(3) { background: #d4ff74; box-shadow: 0 0 16px rgba(212,255,116,.62); }
.ts-hero-code-icon__body {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
}
.ts-hero-code-icon__body span {
    color: #eaf2ff;
    font: 800 clamp(36px, 4.4vw, 70px)/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: -.05em;
    text-shadow: 0 0 26px rgba(24,214,177,.45);
}
.ts-hero-system__pill {
    position: absolute;
    z-index: 7;
    min-width: 92px;
    padding: 9px 16px;
    border-radius: 999px;
    color: #061014;
    background: linear-gradient(135deg, #18d6b1, #d4ff74);
    box-shadow: 0 20px 45px rgba(0,0,0,.32), 0 0 30px rgba(24,214,177,.26);
    font: 700 13px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
    transform: translate3d(calc(var(--system-x) * var(--px, .02)), calc(var(--system-y) * var(--py, .02)), 0) rotate(var(--rot, 0deg));
    animation: ts-v15-pill-float 5.8s ease-in-out infinite;
}
.ts-hero-system__pill--bitrix { --px: .035; --py: -.025; --rot: 8deg; left: 21%; top: 46%; }
.ts-hero-system__pill--crm { --px: -.03; --py: .025; --rot: -8deg; left: 57%; top: 26%; animation-delay: -1.4s; }
.ts-hero-system__pill--seo { --px: -.025; --py: -.035; --rot: -12deg; right: 20%; bottom: 22%; animation-delay: -3s; }
.ts-hero-system__card {
    position: absolute;
    z-index: 8;
    width: clamp(205px, 17vw, 285px);
    min-height: 130px;
    padding: 22px 24px 20px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.17);
    color: #fff;
    background:
        radial-gradient(circle at 90% 12%, rgba(24,214,177,.12), transparent 36%),
        rgba(4,15,22,.70);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 28px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translate3d(calc(var(--system-x) * var(--cx, .03)), calc(var(--system-y) * var(--cy, .03)), 0);
    animation: ts-v15-card-float 6.4s ease-in-out infinite;
}
.ts-hero-system__card:after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 18px;
    width: 46px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #18d6b1, #58a6ff);
    opacity: .9;
}
.ts-hero-system__card b {
    display: block;
    color: #18d6b1;
    font: 800 16px/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: .16em;
}
.ts-hero-system__card span {
    display: block;
    margin-top: 12px;
    color: #fff;
    font: 700 clamp(25px, 2vw, 34px)/1 var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    letter-spacing: -.035em;
}
.ts-hero-system__card em {
    display: block;
    margin-top: 10px;
    color: rgba(234,242,255,.70);
    font-style: normal;
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.3;
}
.ts-hero-system__card--one { --cx: .042; --cy: -.02; left: 0; bottom: 18%; }
.ts-hero-system__card--two { --cx: -.035; --cy: .026; right: 2%; top: 29%; animation-delay: -1.8s; }
.ts-hero-system__card--three { --cx: -.025; --cy: -.036; right: 7%; bottom: 7%; animation-delay: -3.2s; }
.ts-hero-system__icon {
    position: absolute;
    right: 22px;
    top: 22px;
    width: 34px;
    height: 34px;
    opacity: .9;
}
.ts-hero-system__icon--doc {
    border: 2px solid #18d6b1;
    border-radius: 5px;
}
.ts-hero-system__icon--doc:before,
.ts-hero-system__icon--doc:after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    height: 2px;
    border-radius: 99px;
    background: #18d6b1;
}
.ts-hero-system__icon--doc:before { top: 10px; }
.ts-hero-system__icon--doc:after { top: 18px; opacity: .62; }
.ts-hero-system__icon--chart:before {
    content: "";
    position: absolute;
    inset: 2px 2px 3px;
    background:
        linear-gradient(#18d6b1,#18d6b1) 1px 20px/5px 10px no-repeat,
        linear-gradient(#18d6b1,#18d6b1) 10px 14px/5px 16px no-repeat,
        linear-gradient(#18d6b1,#18d6b1) 19px 7px/5px 23px no-repeat,
        linear-gradient(#18d6b1,#18d6b1) 28px 0/5px 30px no-repeat;
    border-radius: 5px;
}
.ts-hero-system__icon--tree:before,
.ts-hero-system__icon--tree:after {
    content: "";
    position: absolute;
}
.ts-hero-system__icon--tree:before {
    left: 50%; top: 4px;
    width: 8px; height: 8px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: #18d6b1;
    box-shadow: -12px 18px 0 #18d6b1, 0 18px 0 #58a6ff, 12px 18px 0 #18d6b1;
}
.ts-hero-system__icon--tree:after {
    left: 7px; right: 7px; top: 13px; height: 15px;
    border-left: 2px solid rgba(24,214,177,.75);
    border-right: 2px solid rgba(24,214,177,.75);
    border-top: 2px solid rgba(24,214,177,.75);
}
@keyframes ts-v15-spin { to { transform: rotate(1turn); } }
@keyframes ts-v15-system-drift { to { transform: rotate(1turn); } }
@keyframes ts-v15-dash { to { stroke-dashoffset: -140; } }
@keyframes ts-v15-trace { 0% { stroke-dashoffset: 620; opacity: 0; } 15%, 70% { opacity: .72; } 100% { stroke-dashoffset: -260; opacity: 0; } }
@keyframes ts-v15-node { 0%,100% { transform: scale(1); opacity: .58; } 50% { transform: scale(1.8); opacity: 1; } }
@keyframes ts-v15-hub-float { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-12px); } }
@keyframes ts-v15-pill-float { 0%,100% { margin-top: 0; } 50% { margin-top: -12px; } }
@keyframes ts-v15-card-float { 0%,100% { margin-top: 0; } 50% { margin-top: -14px; } }
@keyframes ts-v15-sheen { 0%, 48% { transform: translateX(-40%); opacity: 0; } 64% { opacity: .95; } 100% { transform: translateX(40%); opacity: 0; } }

@media (max-width: 1199px) {
    .ts-hero-system { min-height: 600px; max-width: 760px; }
}
@media (max-width: 767px) {
    .ts-hero-system {
        min-height: 470px;
        width: 100%;
        margin-top: 12px;
    }
    .ts-hero-system__caption { font-size: 10px; letter-spacing: .25em; }
    .ts-hero-system__card { width: min(230px, 70vw); padding: 16px 18px 18px; min-height: 108px; border-radius: 20px; }
    .ts-hero-system__card span { font-size: 22px; }
    .ts-hero-system__card em { font-size: 13px; }
    .ts-hero-system__card--one { left: 0; bottom: 13%; }
    .ts-hero-system__card--two { right: 0; top: 31%; }
    .ts-hero-system__card--three { display: none; }
    .ts-hero-system__pill { min-width: 74px; padding: 8px 11px; font-size: 10px; }
    .ts-hero-system__pill--bitrix { left: 11%; top: 48%; }
    .ts-hero-system__pill--crm { left: 58%; top: 24%; }
    .ts-hero-system__pill--seo { right: 16%; bottom: 16%; }
}
@media (prefers-reduced-motion: reduce) {
    .ts-hero-system__orbits,
    .ts-hero-system__trace path,
    .ts-hero-system__nodes circle,
    .ts-hero-system__pulse,
    .ts-hero-code-icon,
    .ts-hero-code-icon:before,
    .ts-hero-system__pill,
    .ts-hero-system__card { animation: none !important; }
}


/* v17: remove decorative underlines inside hero-system cards.
   The small accent line looked like an underline under the first word in card captions. */
.ts-hero-system__card::after,
.ts-hero-system__card span::after,
.ts-hero-system__card em::after {
    display: none !important;
    content: none !important;
}

.ts-hero-system__card em {
    text-decoration: none !important;
    border-bottom: 0 !important;
    background-image: none !important;
}


/* v18: header right-side layout fix (phone + CTA)
   Make the phone and button align normally on the right, with stable spacing and centering. */
.ts-navbar .uk-navbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(12px, 1.35vw, 24px);
    margin-left: auto;
    flex: 0 0 auto;
}
.ts-navbar .uk-navbar-left {
    flex: 0 0 auto;
}
.ts-navbar .uk-navbar-center {
    flex: 1 1 auto;
    min-width: 0;
}
.ts-header-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    margin-right: 0 !important;
    white-space: nowrap;
}
.ts-header-contact a,
.ts-header--sticky .ts-header-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 6px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    font-family: var(--ts-font-condensed);
    font-size: clamp(17px, .95vw, 19px);
    font-weight: 700;
    letter-spacing: .02em;
}
.ts-header .ts-button--ghost,
.ts-header--sticky .ts-button--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(170px, 12vw, 205px);
    min-height: 46px;
    padding: 0 clamp(18px, 1.5vw, 26px);
    border-radius: 999px;
    line-height: 1;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}
@media (max-width: 1599px) {
    .ts-header-contact a,
    .ts-header--sticky .ts-header-contact a { font-size: 16px; }
    .ts-header .ts-button--ghost,
    .ts-header--sticky .ts-button--ghost { min-width: 164px; }
}
@media (max-width: 1439px) {
    .ts-navbar .uk-navbar-right { gap: 12px; }
}




/* v165: homepage stage/hero refinements. */
/* v27: move dynamic stage label to the top hint position.
   The changing label WEB‑платформа / CRM / Сервер / Рост now replaces "web system".
   The old label place inside the card is intentionally empty. */
.ts-page-stage__hint[data-ts-stage-label] {
    min-width: 170px;
    text-align: right;
    color: rgba(8, 18, 31, .42);
    transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.ts-stage__label:empty,
.ts-stage__label[aria-hidden="true"] {
    display: none !important;
}
@media (max-width: 959px) {
    .ts-page-stage__hint[data-ts-stage-label] {
        min-width: 0;
        text-align: left;
    }
}

/* v28: sharper text inside the page-stage card.
   Reason: the whole card was transformed/rotated as a compositor texture.
   On FullHD this makes small text blurry. Keep depth, but stop transforming
   the text layer itself and use integer-ish text rendering. */
.ts-page-stage,
.ts-stage,
.ts-stage--global {
    transform-style: flat !important;
}

.ts-stage {
    transform: none !important;
    will-change: auto !important;
}

.ts-stage__bg,
.ts-stage__scan,
.ts-stage__core,
.ts-stage__scheme,
.ts-stage__ring {
    will-change: transform, opacity;
}

/* Keep all text/UI labels crisp */
.ts-stage__index,
.ts-stage__index *,
.ts-stage__center,
.ts-stage__center *,
.ts-stage__screen,
.ts-stage__screen *,
.ts-stage__chips,
.ts-stage__chips *,
.ts-page-stage__hint,
.ts-page-stage__hint * {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    filter: none !important;
    text-shadow: none !important;
}

/* The dark screen block had blur + opacity over transformed parent.
   Reduce blur effect and strengthen contrast. */
.ts-stage__screen {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(3, 12, 18, .86) !important;
    border-color: rgba(255,255,255,.16) !important;
}

.ts-stage__line span,
.ts-stage__line b,
.ts-stage__screen-top i {
    opacity: 1 !important;
}

.ts-stage__line span {
    color: rgba(255,255,255,.78) !important;
    font-weight: 800 !important;
}

.ts-stage__line b {
    color: var(--ts-accent) !important;
}

.ts-stage__chips span {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.74);
    font-weight: 800;
}

.ts-stage__chips span.is-active,
.ts-stage__chips span.uk-active,
.ts-stage__chips span[data-active="true"] {
    color: #07111f;
}

/* If JS sets small translate/rotate on the whole stage, neutralize it through CSS. */
.ts-page-stage[style],
.ts-stage[style] {
    transform: none !important;
}

/* Keep graphic movement only for inner decorative parts */
.ts-stage__core {
    transform-origin: 50% 50%;
}

/* FullHD-specific: avoid fractional oversized text blur in stage. */
@media (min-width: 960px) and (max-width: 1920px) {
    .ts-stage__index span {
        letter-spacing: -0.035em;
    }
    .ts-stage__center strong {
        letter-spacing: -0.025em;
    }
    .ts-stage__screen {
        font-size: 14px;
    }
}

/* v29: stage chips as anchors + remove bottom line + move stage label to top right */
.ts-stage__chips {
    position: relative;
    z-index: 8;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}
.ts-stage__chips:before,
.ts-stage__chips:after {
    display: none !important;
    content: none !important;
}
.ts-stage__chips a,
.ts-stage__chips span {
    text-decoration: none !important;
    border-bottom: 0 !important;
    background-image: none !important;
}
.ts-stage__chips a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: inherit;
    color: inherit;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}
.ts-stage__chips a:hover {
    transform: translateY(-2px);
}
.ts-stage__chips a.is-active,
.ts-stage__chips a.uk-active,
.ts-stage__chips a[data-active="true"] {
    color: #07111f !important;
    background: linear-gradient(135deg, var(--ts-accent), var(--ts-warn)) !important;
    border-color: transparent !important;
}

/* Hide the dark center circle, keep the stage number in the big index only. */
.ts-stage__center {
    display: none !important;
}

/* New compact dynamic stage label in the top right of the card. */
.ts-stage__corner-label {
    position: absolute;
    top: clamp(28px, 4vw, 52px);
    right: clamp(34px, 4.6vw, 70px);
    z-index: 9;
    max-width: 220px;
    text-align: right;
    color: rgba(255,255,255,.74);
    font-family: var(--ts-font-condensed);
    font-size: clamp(13px, .92vw, 18px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.ts-stage__corner-label small {
    display: block;
    margin-top: 7px;
    color: var(--ts-accent);
    font-size: .72em;
    letter-spacing: .18em;
}

/* Hide the old top external hint if it is too close to the card after moving label inside. */
.ts-page-stage__hint[data-ts-stage-label] {
    opacity: .52;
}

/* Anchor offset for fixed header */
.ts-anchor-target {
    position: relative;
    display: block;
    top: -96px;
    height: 1px;
    width: 1px;
    pointer-events: none;
    visibility: hidden;
}
@media (max-width: 767px) {
    .ts-stage__corner-label {
        top: 24px;
        right: 24px;
        font-size: 12px;
    }
}

/* v30: repair stage after v29 label move.
   Final behavior:
   - no external top hint;
   - no dark center circle;
   - stage label is inside the card, top right;
   - bottom chips are visible, clickable, no underline/line. */
.ts-page-stage__hint[aria-hidden="true"],
.ts-page-stage__hint[data-ts-stage-label] {
    display: none !important;
}

.ts-stage {
    position: relative;
    overflow: hidden;
}

.ts-stage__center,
.ts-stage__label,
.ts-stage__label[aria-hidden="true"] {
    display: none !important;
}

.ts-stage__corner-label {
    position: absolute !important;
    top: clamp(26px, 3.8vw, 46px) !important;
    right: clamp(30px, 4.2vw, 58px) !important;
    z-index: 12 !important;
    max-width: 260px;
    text-align: right;
    pointer-events: none;
    color: rgba(255,255,255,.78) !important;
    font-family: var(--ts-font-condensed) !important;
    font-size: clamp(13px, .92vw, 17px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    filter: none !important;
}

.ts-stage__corner-label small {
    display: block;
    margin-top: 7px;
    color: var(--ts-accent) !important;
    font-size: .72em;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .18em;
}

.ts-stage__chips {
    position: absolute !important;
    left: clamp(26px, 4vw, 54px) !important;
    right: clamp(26px, 4vw, 54px) !important;
    bottom: clamp(28px, 4vw, 52px) !important;
    z-index: 14 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1vw, 14px) !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-image: none !important;
}

.ts-stage__chips:before,
.ts-stage__chips:after {
    display: none !important;
    content: none !important;
}

.ts-stage__chips a,
.ts-stage__chips span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(255,255,255,.72) !important;
    font-family: var(--ts-font-condensed) !important;
    font-size: clamp(12px, .85vw, 15px) !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

.ts-stage__chips a:hover {
    transform: translateY(-2px);
    border-color: rgba(24,214,177,.48) !important;
    color: #fff !important;
}

.ts-stage__chips a.is-active,
.ts-stage__chips a.uk-active,
.ts-stage__chips a[data-active="true"],
.ts-page-stage.is-stage-0 .ts-stage__chips a[data-ts-stage-jump="0"],
.ts-page-stage.is-stage-1 .ts-stage__chips a[data-ts-stage-jump="1"],
.ts-page-stage.is-stage-2 .ts-stage__chips a[data-ts-stage-jump="2"],
.ts-page-stage.is-stage-3 .ts-stage__chips a[data-ts-stage-jump="3"] {
    color: #07111f !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--ts-accent), var(--ts-warn)) !important;
}

.ts-anchor-target {
    position: relative;
    display: block;
    top: -96px;
    height: 1px;
    width: 1px;
    pointer-events: none;
    visibility: hidden;
}

@media (max-width: 767px) {
    .ts-stage__corner-label {
        top: 22px !important;
        right: 22px !important;
        font-size: 12px !important;
    }

    .ts-stage__chips {
        left: 18px !important;
        right: 18px !important;
        bottom: 22px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ts-stage__chips a,
    .ts-stage__chips span {
        min-height: 40px !important;
        font-size: 12px !important;
    }
}

/* v31: make stage bottom tags clickable and keep top-right label inside the card */
.ts-stage {
    isolation: isolate;
}

/* Put decorative layers behind interactive UI */
.ts-stage__bg,
.ts-stage__scan,
.ts-stage__scheme,
.ts-stage__ring,
.ts-stage__orbit,
.ts-stage__decor,
.ts-stage__glow,
.ts-stage__shapes {
    pointer-events: none !important;
}

.ts-stage__screen {
    z-index: 7 !important;
    pointer-events: none !important;
}

/* Top-right label must live inside the rounded card background */
.ts-stage__corner-label {
    top: clamp(24px, 3.2vw, 42px) !important;
    right: clamp(30px, 4vw, 54px) !important;
    max-width: min(230px, 38%) !important;
    z-index: 16 !important;
    transform: none !important;
    text-align: right !important;
    color: rgba(255,255,255,.82) !important;
    overflow: hidden;
}
.ts-stage__corner-label small {
    color: var(--ts-accent) !important;
}

/* The old external label/hint is hidden completely */
.ts-page-stage__hint,
.ts-page-stage__hint[data-ts-stage-label],
.ts-page-stage__hint[aria-hidden="true"] {
    display: none !important;
}

/* Bottom chips: real clickable anchors above all visual layers */
.ts-stage__chips {
    z-index: 30 !important;
    pointer-events: auto !important;
}

.ts-stage__chips a {
    position: relative !important;
    z-index: 31 !important;
    pointer-events: auto !important;
    user-select: none;
}

/* Make the clickable area reliable */
.ts-stage__chips a::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
}

/* If any previous pseudo line survived, remove it */
.ts-stage__chips,
.ts-stage__chips a,
.ts-stage__chips span {
    border-bottom: 0 !important;
    text-decoration: none !important;
    background-image: none !important;
}

.ts-stage__chips::before,
.ts-stage__chips::after,
.ts-stage__chips a::after {
    display: none !important;
    content: none !important;
}

/* Avoid big line at the very bottom of the card from older CSS */
.ts-stage::after {
    pointer-events: none !important;
}

/* Make anchors more obviously interactive */
.ts-stage__chips a:hover {
    cursor: pointer;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .ts-stage__corner-label {
        top: 22px !important;
        right: 22px !important;
        max-width: 48% !important;
    }
}

/* v32: hard fix for live stage block.
   Removes external hint behavior, pins label INSIDE .ts-stage, and guarantees clickable chips. */

/* Old external hint must not exist visually even if cached markup remains */
.ts-page-stage__hint,
.ts-page-stage__hint[data-ts-stage-label],
.ts-page-stage__hint[aria-hidden="true"],
div.ts-page-stage__hint {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Stage container becomes the containing block for label/chips */
.ts-page-stage .ts-stage,
.ts-stage {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* All decorative layers are behind UI and do not block clicks */
.ts-stage svg,
.ts-stage canvas,
.ts-stage__bg,
.ts-stage__scan,
.ts-stage__scheme,
.ts-stage__ring,
.ts-stage__orbit,
.ts-stage__decor,
.ts-stage__glow,
.ts-stage__shapes,
.ts-stage__screen,
.ts-stage__screen *,
.ts-stage__index,
.ts-stage__index * {
    pointer-events: none !important;
}

/* Remove old dark center circle and old label */
.ts-stage__center,
.ts-stage__center *,
.ts-stage__label,
.ts-stage__label * {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Corner label: strictly inside the card */
.ts-stage > .ts-stage__corner-label,
.ts-stage__corner-label[data-ts-stage-corner-label] {
    position: absolute !important;
    top: clamp(24px, 3.1vw, 42px) !important;
    right: clamp(28px, 3.9vw, 54px) !important;
    z-index: 80 !important;
    max-width: min(235px, 42%) !important;
    color: rgba(255,255,255,.82) !important;
    text-align: right !important;
    font-family: var(--ts-font-condensed) !important;
    font-size: clamp(13px, .92vw, 17px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
    pointer-events: none !important;
}

.ts-stage__corner-label small {
    display: block !important;
    margin-top: 8px !important;
    color: var(--ts-accent) !important;
    font-size: .72em !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .2em !important;
}

/* Bottom chips: hard positioned and clickable */
.ts-stage__chips,
.ts-stage__chips[data-ts-stage-chips] {
    position: absolute !important;
    left: clamp(28px, 4vw, 56px) !important;
    right: clamp(28px, 4vw, 56px) !important;
    bottom: clamp(28px, 4vw, 52px) !important;
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1vw, 14px) !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.ts-stage__chips::before,
.ts-stage__chips::after {
    display: none !important;
    content: none !important;
}

.ts-stage__chips a,
.ts-stage__chips[data-ts-stage-chips] a {
    position: relative !important;
    z-index: 101 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.78) !important;
    font-family: var(--ts-font-condensed) !important;
    font-size: clamp(12px, .85vw, 15px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent;
}

.ts-stage__chips a::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
}

.ts-stage__chips a:hover {
    transform: translateY(-2px);
    color: #fff !important;
    border-color: rgba(24,214,177,.55) !important;
}

.ts-page-stage.is-stage-0 .ts-stage__chips a[data-ts-stage-jump="0"],
.ts-page-stage.is-stage-1 .ts-stage__chips a[data-ts-stage-jump="1"],
.ts-page-stage.is-stage-2 .ts-stage__chips a[data-ts-stage-jump="2"],
.ts-page-stage.is-stage-3 .ts-stage__chips a[data-ts-stage-jump="3"],
.ts-stage__chips a.is-active {
    color: #07111f !important;
    background: linear-gradient(135deg, var(--ts-accent), var(--ts-warn)) !important;
    border-color: transparent !important;
}

.ts-anchor-target {
    position: relative;
    top: -100px;
    display: block;
    width: 1px;
    height: 1px;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 767px) {
    .ts-stage > .ts-stage__corner-label,
    .ts-stage__corner-label[data-ts-stage-corner-label] {
        top: 22px !important;
        right: 22px !important;
        max-width: 48% !important;
        font-size: 12px !important;
    }

    .ts-stage__chips,
    .ts-stage__chips[data-ts-stage-chips] {
        left: 18px !important;
        right: 18px !important;
        bottom: 22px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ts-stage__chips a {
        min-height: 40px !important;
        font-size: 12px !important;
    }
}

/* v33: clean wrong top anchors and remove duplicate labels behind the stage card */
.ts-page-stage__hint,
.ts-page-stage__hint[data-ts-stage-label],
.ts-page-stage__hint[aria-hidden="true"],
.ts-page-stage > [data-ts-stage-label]:not(.ts-stage__corner-label),
.ts-page-stage > .ts-page-stage__hint {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.ts-stage > .ts-stage__corner-label[data-ts-stage-corner-label] {
    display: block !important;
    position: absolute !important;
    top: clamp(26px, 3.2vw, 44px) !important;
    right: clamp(30px, 4vw, 56px) !important;
    z-index: 120 !important;
    max-width: min(230px, 40%) !important;
    color: rgba(255,255,255,.84) !important;
    text-align: right !important;
    font-family: var(--ts-font-condensed) !important;
    font-size: clamp(13px, .92vw, 17px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
}
.ts-stage > .ts-stage__corner-label[data-ts-stage-corner-label] small {
    display: block !important;
    margin-top: 8px !important;
    color: var(--ts-accent) !important;
    font-size: .72em !important;
    line-height: 1 !important;
    letter-spacing: .2em !important;
}
div.ts-anchor-target {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}
section#sites,
section#crm,
section#server,
section#growth {
    scroll-margin-top: 110px;
}
.ts-stage__chips[data-ts-stage-chips],
.ts-stage__chips {
    z-index: 140 !important;
    pointer-events: auto !important;
}
.ts-stage__chips a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* v34: anchors for stage chips point to the four scrollytelling step blocks */
#sites,
#crm,
#server,
#growth {
    scroll-margin-top: 110px;
}

/* Old standalone anchors must not affect layout if cached */
div.ts-anchor-target {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide any remaining external labels behind the stage */
.ts-page-stage__hint,
.ts-page-stage__hint[data-ts-stage-label],
.ts-page-stage > [data-ts-stage-label]:not(.ts-stage__corner-label) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Keep only internal top-right label */
.ts-stage > .ts-stage__corner-label[data-ts-stage-corner-label] {
    display: block !important;
    position: absolute !important;
    top: clamp(26px, 3.2vw, 44px) !important;
    right: clamp(30px, 4vw, 56px) !important;
    z-index: 140 !important;
    max-width: min(230px, 40%) !important;
    color: rgba(255,255,255,.84) !important;
    text-align: right !important;
    font-family: var(--ts-font-condensed) !important;
    font-size: clamp(13px, .92vw, 17px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
}

.ts-stage > .ts-stage__corner-label[data-ts-stage-corner-label] small {
    display: block !important;
    margin-top: 8px !important;
    color: var(--ts-accent) !important;
    font-size: .72em !important;
    line-height: 1 !important;
    letter-spacing: .2em !important;
}

/* Clickable stage chips */
.ts-stage__chips,
.ts-stage__chips[data-ts-stage-chips] {
    z-index: 160 !important;
    pointer-events: auto !important;
}
.ts-stage__chips a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* v35: remove duplicated stage corner label.
   Only `.ts-stage > .ts-stage__corner-label` is allowed.
   Any label that became a sibling after `.ts-page-stage__progress` is hidden. */
.ts-page-stage > .ts-stage__corner-label[data-ts-stage-corner-label],
.ts-page-stage__progress + .ts-stage__corner-label[data-ts-stage-corner-label],
.ts-page-stage > div.ts-stage__corner-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ts-stage > .ts-stage__corner-label[data-ts-stage-corner-label] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* v36: more fitting WEB svg scheme + remove right progress stripe */
.ts-page-stage__progress {
    display: none !important;
}

/* v37: remove sweeping shine/glare effect from hero/stage slider.
   This disables the animated stripe that periodically moves left-to-right. */
.ts-hero:before,
.ts-hero:after,
.ts-hero--kinetic:before,
.ts-hero--kinetic:after,
.ts-hero--stage:before,
.ts-hero--stage:after,
.ts-stage:before,
.ts-stage:after,
.ts-stage__card:before,
.ts-stage__card:after,
.ts-hero-card:before,
.ts-hero-card:after,
.ts-kinetic-card:before,
.ts-kinetic-card:after,
.ts-hero-system:before,
.ts-hero-system:after,
.ts-sx-device:after,
.ts-brief-card:after {
    animation: none !important;
}

/* Hide only typical moving glare overlays, without removing static backgrounds. */
.ts-hero--kinetic .ts-hero-ribbons,
.ts-hero-ribbons {
    animation: none !important;
}

/* Extra safety for named sheen/glare animations used in older versions. */
[class*="sheen"],
[class*="glare"],
[class*="shine"] {
    animation: none !important;
}

/* v38: smoother hero-system motion, all cards/pills fully visible, no jerky mouse reaction */
.ts-hero-system {
    overflow: visible;
    padding: 0 clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 24px);
    box-sizing: border-box;
}
.ts-hero-system__hud {
    inset: 4% 2% 2%;
    width: 96%;
    height: 94%;
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.ts-hero-system__hub {
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.ts-hero-system__pill,
.ts-hero-system__card {
    will-change: transform;
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.ts-hero-system__pill {
    z-index: 9;
    animation: ts-v38-pill-float 8s ease-in-out infinite !important;
}
.ts-hero-system__card {
    width: clamp(198px, 16vw, 258px);
    min-height: 124px;
    animation: ts-v38-card-float 9.5s ease-in-out infinite !important;
}
.ts-hero-system__pill--bitrix { left: 26%; top: 43%; }
.ts-hero-system__pill--crm { left: 55%; top: 20%; }
.ts-hero-system__pill--seo { right: 17%; bottom: 20%; }
.ts-hero-system__card--one { left: 5%; bottom: 18%; }
.ts-hero-system__card--two { right: 4%; top: 26%; }
.ts-hero-system__card--three { right: 9%; bottom: 8%; }
@keyframes ts-v38-pill-float {
    0%,100% { margin-top: 0; }
    50% { margin-top: -6px; }
}
@keyframes ts-v38-card-float {
    0%,100% { margin-top: 0; }
    50% { margin-top: -8px; }
}
@media (max-width: 767px) {
    .ts-hero-system { padding-inline: 0; }
    .ts-hero-system__card--one { left: 2%; bottom: 13%; }
    .ts-hero-system__card--two { right: 2%; top: 29%; }
    .ts-hero-system__pill--bitrix { left: 14%; top: 47%; }
    .ts-hero-system__pill--crm { left: 58%; top: 22%; }
    .ts-hero-system__pill--seo { right: 14%; bottom: 17%; }
}

/* v39: calmer premium hero-system composition */
.ts-hero-system {
    min-height: clamp(560px, 46vw, 700px);
    width: min(100%, 740px);
    padding: 0 clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 20px);
}
.ts-hero-system__hud {
    inset: 5% 2% 2%;
    width: 95%;
    height: 92%;
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.ts-hero-system__hub {
    width: clamp(138px, 14vw, 188px);
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.ts-hero-code-icon {
    animation-duration: 8.4s !important;
}
.ts-hero-system__pill,
.ts-hero-system__card {
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.ts-hero-system__pill {
    min-width: 86px;
    padding: 8px 14px;
    font-size: 12px;
    animation: ts-v39-pill-float 10s ease-in-out infinite !important;
}
.ts-hero-system__card {
    width: clamp(214px, 16.2vw, 252px);
    min-height: 118px;
    padding: 20px 22px 18px;
    border-radius: 22px;
    animation: ts-v39-card-float 12s ease-in-out infinite !important;
}
.ts-hero-system__card span { font-size: clamp(22px, 1.85vw, 30px); }
.ts-hero-system__card em { font-size: clamp(13px, .95vw, 16px); }
.ts-hero-system__card--one { left: 3%; bottom: 16%; }
.ts-hero-system__card--two { right: 4%; top: 24%; }
.ts-hero-system__card--three { right: 9%; bottom: 8%; }
.ts-hero-system__pill--bitrix { left: 22%; top: 48%; transform: rotate(8deg); }
.ts-hero-system__pill--crm { left: 57%; top: 16%; transform: rotate(-7deg); }
.ts-hero-system__pill--seo { right: 13%; bottom: 18%; transform: rotate(-10deg); }
.ts-hero-system__card--one { animation-delay: -1.2s !important; }
.ts-hero-system__card--two { animation-delay: -4.2s !important; }
.ts-hero-system__card--three { animation-delay: -7.1s !important; }
.ts-hero-system__pill--bitrix { animation-delay: -.8s !important; }
.ts-hero-system__pill--crm { animation-delay: -3.4s !important; }
.ts-hero-system__pill--seo { animation-delay: -6.2s !important; }
@keyframes ts-v39-pill-float {
    0%,100% { margin-top: 0; }
    25% { margin-top: -4px; }
    50% { margin-top: -7px; }
    75% { margin-top: -3px; }
}
@keyframes ts-v39-card-float {
    0%,100% { margin-top: 0; }
    25% { margin-top: -3px; }
    50% { margin-top: -7px; }
    75% { margin-top: -2px; }
}
@media (max-width: 767px) {
    .ts-hero-system { min-height: 500px; padding-inline: 0; }
    .ts-hero-system__hub { width: 132px; }
    .ts-hero-system__card { width: min(220px, 68vw); min-height: 104px; padding: 16px 18px; }
    .ts-hero-system__card--one { left: 1%; bottom: 14%; }
    .ts-hero-system__card--two { right: 1%; top: 29%; }
    .ts-hero-system__card--three { right: 4%; bottom: 8%; }
    .ts-hero-system__pill--bitrix { left: 15%; top: 48%; }
    .ts-hero-system__pill--crm { left: 58%; top: 18%; }
    .ts-hero-system__pill--seo { right: 12%; bottom: 19%; }
}

/* Hero caption layout adjustment. */
.ts-hero-system__caption:empty,
.ts-hero-system__caption[aria-hidden="true"] {
    display: none !important;
}

/* v41: redesign hero pills into subtle glass markers instead of green tags */
.ts-hero-system__pill {
    min-width: auto !important;
    padding: 8px 14px 8px 28px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(8,24,33,.82), rgba(7,20,28,.68)) !important;
    border: 1px solid rgba(24,214,177,.28) !important;
    box-shadow:
        0 10px 32px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 18px rgba(24,214,177,.08) !important;
    color: rgba(225,246,243,.92) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    transform: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: visible !important;
}
.ts-hero-system__pill::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #18d6b1, #58a6ff);
    box-shadow: 0 0 14px rgba(24,214,177,.55);
}
.ts-hero-system__pill::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, rgba(24,214,177,.48), rgba(88,166,255,0));
    opacity: .8;
}
.ts-hero-system__pill--bitrix::after {
    left: 100%;
    margin-left: 10px;
}
.ts-hero-system__pill--crm::after,
.ts-hero-system__pill--seo::after {
    right: 100%;
    margin-right: 10px;
    transform: scaleX(-1);
}
.ts-hero-system__pill--bitrix {
    left: 18% !important;
    top: 46% !important;
}
.ts-hero-system__pill--crm {
    left: 59% !important;
    top: 17% !important;
}
.ts-hero-system__pill--seo {
    right: 10% !important;
    bottom: 20% !important;
}
@media (max-width: 767px) {
    .ts-hero-system__pill {
        padding: 7px 12px 7px 24px !important;
        font-size: 10px !important;
        letter-spacing: .18em !important;
    }
    .ts-hero-system__pill::after {
        width: 20px;
    }
    .ts-hero-system__pill--bitrix {
        left: 11% !important;
        top: 49% !important;
    }
    .ts-hero-system__pill--crm {
        left: 60% !important;
        top: 20% !important;
    }
    .ts-hero-system__pill--seo {
        right: 8% !important;
        bottom: 18% !important;
    }
}

/* v42: add more hero markers, move SEO away from card, and subtle mouse attraction */
.ts-hero-system__pill {
    z-index: 11;
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    transition:
        transform .32s cubic-bezier(.22,1,.36,1),
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease;
}
.ts-hero-system__pill:hover {
    border-color: rgba(24,214,177,.42) !important;
    box-shadow:
        0 14px 36px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 22px rgba(24,214,177,.12) !important;
}
.ts-hero-system__pill::after {
    width: 28px;
}
.ts-hero-system__pill--bitrix {
    left: 15% !important;
    top: 44% !important;
}
.ts-hero-system__pill--crm {
    left: 58% !important;
    top: 10% !important;
}
.ts-hero-system__pill--seo {
    right: 2% !important;
    bottom: 24% !important;
}
.ts-hero-system__pill--forms,
.ts-hero-system__pill--server {
    position: absolute;
}
.ts-hero-system__pill--forms {
    left: 41% !important;
    top: 21% !important;
}
.ts-hero-system__pill--server {
    left: 63% !important;
    bottom: 9% !important;
}
.ts-hero-system__pill--forms::after {
    left: 100%;
    margin-left: 10px;
}
.ts-hero-system__pill--server::after,
.ts-hero-system__pill--seo::after,
.ts-hero-system__pill--crm::after {
    right: 100%;
    margin-right: 10px;
    transform: scaleX(-1);
}
@media (max-width: 767px) {
    .ts-hero-system__pill::after { width: 16px; }
    .ts-hero-system__pill--bitrix { left: 10% !important; top: 45% !important; }
    .ts-hero-system__pill--crm { left: 57% !important; top: 12% !important; }
    .ts-hero-system__pill--seo { right: 2% !important; bottom: 22% !important; }
    .ts-hero-system__pill--forms { left: 34% !important; top: 23% !important; }
    .ts-hero-system__pill--server { left: 58% !important; bottom: 8% !important; }
}

/* v43: independent local proximity for hero tags + tighter composition */
.ts-hero-system__pill {
    --pill-px: 0px;
    --pill-py: 0px;
    --pill-active: 0;
    z-index: 9 !important;
    pointer-events: auto !important;
    transform: translate3d(var(--pill-px), var(--pill-py), 0) !important;
    transition:
        transform .38s cubic-bezier(.22, 1, .36, 1),
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease,
        opacity .28s ease !important;
    opacity: calc(.82 + var(--pill-active) * .18);
}

.ts-hero-system__pill:hover {
    border-color: rgba(24,214,177,.46) !important;
    box-shadow:
        0 12px 30px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 calc(16px + var(--pill-active) * 18px) rgba(24,214,177,.14) !important;
}

/* Put markers back into a compact orbit around the central graphic */
.ts-hero-system__pill--crm {
    left: 58% !important;
    top: 13% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--forms {
    left: 36% !important;
    top: 25% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--bitrix {
    left: 22% !important;
    top: 43% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--seo {
    left: auto !important;
    right: 12% !important;
    top: 45% !important;
    bottom: auto !important;
}

.ts-hero-system__pill--server {
    left: 56% !important;
    top: 76% !important;
    right: auto !important;
    bottom: auto !important;
}

/* Smaller connector lines so tags do not visually collide with cards */
.ts-hero-system__pill::after {
    width: 20px !important;
    opacity: .62 !important;
}

.ts-hero-system__pill--seo::after,
.ts-hero-system__pill--server::after,
.ts-hero-system__pill--crm::after {
    right: 100% !important;
    left: auto !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    transform: scaleX(-1) !important;
}

.ts-hero-system__pill--forms::after,
.ts-hero-system__pill--bitrix::after {
    left: 100% !important;
    right: auto !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
    transform: none !important;
}

@media (max-width: 767px) {
    .ts-hero-system__pill {
        opacity: .82;
    }

    .ts-hero-system__pill--crm {
        left: 58% !important;
        top: 14% !important;
    }

    .ts-hero-system__pill--forms {
        left: 32% !important;
        top: 25% !important;
    }

    .ts-hero-system__pill--bitrix {
        left: 14% !important;
        top: 43% !important;
    }

    .ts-hero-system__pill--seo {
        right: 7% !important;
        top: 46% !important;
    }

    .ts-hero-system__pill--server {
        left: 55% !important;
        top: 78% !important;
    }
}

/* v44: local hover on hero cards + hub, cleaner background lines */
.ts-hero-system__grid-lines,
.ts-hero-system__trace {
    display: none !important;
}
.ts-hero-system__flow-lines path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ts-hero-system__flow-lines--back path {
    stroke: rgba(88, 166, 255, .10);
    stroke-width: 1.25;
    opacity: .9;
}
.ts-hero-system__flow-lines--front path {
    stroke: url(#tsHeroLine);
    stroke-width: 1.75;
    opacity: .62;
    stroke-dasharray: 160 420;
    animation: ts-v15-trace 9s cubic-bezier(.45,0,.2,1) infinite;
}
.ts-hero-system__flow-lines--front path:nth-child(2) {
    animation-delay: -2.8s;
    opacity: .44;
}
.ts-hero-system__flow-lines--front path:nth-child(3) {
    animation-delay: -5.2s;
    opacity: .34;
}
.ts-hero-system__pill,
.ts-hero-system__card,
.ts-hero-system__hub {
    pointer-events: auto;
}
.ts-hero-system__pill {
    --pill-px: 0px;
    --pill-py: 0px;
    --pill-active: 0;
    transform: translate3d(var(--pill-px), var(--pill-py), 0) !important;
    opacity: calc(.84 + var(--pill-active) * .16);
}
.ts-hero-system__card {
    --card-px: 0px;
    --card-py: 0px;
    --card-active: 0;
    transform: translate3d(var(--card-px), var(--card-py), 0) !important;
    transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
}
.ts-hero-system__card:hover {
    border-color: rgba(24,214,177,.32);
    box-shadow: 0 26px 72px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.1), 0 0 26px rgba(24,214,177,.10);
}
.ts-hero-system__hub {
    --hub-px: 0px;
    --hub-py: 0px;
    --hub-active: 0;
    transform: translate3d(calc(-50% + var(--system-x) * .045 + var(--hub-px)), calc(-50% + var(--system-y) * .035 + var(--hub-py)), 0);
    transition: transform .36s cubic-bezier(.22,1,.36,1), filter .28s ease;
}
.ts-hero-code-icon {
    box-shadow: 0 28px 90px rgba(0,0,0,.44), 0 0 0 1px rgba(24,214,177,.10), 0 0 calc(58px + var(--hub-active) * 18px) rgba(24,214,177,.30), inset 0 1px 0 rgba(255,255,255,.20);
}
.ts-hero-system__pill--crm { left: 55% !important; top: 8% !important; }
.ts-hero-system__pill--forms { left: 34% !important; top: 18% !important; }
.ts-hero-system__pill--bitrix { left: 14% !important; top: 40% !important; }
.ts-hero-system__pill--seo { right: 14% !important; top: 44% !important; bottom: auto !important; }
.ts-hero-system__pill--server { left: 50% !important; top: 75% !important; bottom: auto !important; }
.ts-hero-system__card--one { left: 2% !important; bottom: 15% !important; }
.ts-hero-system__card--two { right: 6% !important; top: 17% !important; }
.ts-hero-system__card--three { right: 10% !important; bottom: 5% !important; }
@media (max-width: 767px) {
    .ts-hero-system__pill--crm { left: 56% !important; top: 9% !important; }
    .ts-hero-system__pill--forms { left: 31% !important; top: 19% !important; }
    .ts-hero-system__pill--bitrix { left: 12% !important; top: 41% !important; }
    .ts-hero-system__pill--seo { right: 9% !important; top: 46% !important; }
    .ts-hero-system__pill--server { left: 48% !important; top: 76% !important; }
    .ts-hero-system__card--two { right: 2% !important; top: 18% !important; }
    .ts-hero-system__card--three { right: 4% !important; bottom: 7% !important; }
}

/* v45: keep hero ribbons canvas, but remove the old background panel/rectangle feel */
.ts-hero-ribbons {
    opacity: .72 !important;
}

/* The former canvas panel is removed in JS. These rules keep only soft ribbons visible. */
.ts-v45-ribbons-no-panel .ts-hero-ribbons {
    mix-blend-mode: screen;
}

/* v46: larger full header logo */
.ts-navbar {
    min-height: 84px;
}
.ts-logo {
    min-height: 84px;
    padding-right: clamp(14px, 2vw, 28px);
}
.ts-logo img {
    max-width: clamp(210px, 13.8vw, 270px) !important;
    width: 100%;
    height: auto;
}
@media (max-width: 1439px) {
    .ts-logo img {
        max-width: 208px !important;
    }
}
@media (max-width: 1199px) {
    .ts-navbar,
    .ts-logo,
    .ts-nav > li > a {
        min-height: 76px;
    }
    .ts-logo img {
        max-width: 196px !important;
    }
}
@media (max-width: 767px) {
    .ts-navbar,
    .ts-logo {
        min-height: 72px;
    }
    .ts-logo img {
        max-width: 186px !important;
    }
}

/* v47: typography readability + unified logo icon */
.ts-title-xl,
.ts-section-title,
.ts-card-title,
.ts-hero-system__card span,
.ts-stage__corner-label,
.ts-stage__label,
.ts-page-stage__hint,
.ts-eyebrow {
    letter-spacing: 0 !important;
}

.ts-hero-system__pill,
.ts-stage__chips a,
.ts-stage__line b,
.ts-hero-system__card b {
    letter-spacing: .04em !important;
}

.ts-title-xl,
.ts-section-title,
.ts-hero-system__card span,
.ts-stage__corner-label,
.ts-page-stage__hint,
.ts-stage__label,
.ts-eyebrow {
    color: rgba(255,255,255,.96) !important;
}

.ts-hero-copy .ts-title-xl {
    color: rgba(255,255,255,.98) !important;
    opacity: 1 !important;
    text-shadow:
        0 16px 54px rgba(0,0,0,.28),
        0 0 22px rgba(255,255,255,.04);
}

.ts-hero-copy .ts-lead,
.ts-hero-system__card em {
    color: rgba(234,242,255,.82) !important;
}

/* Same logo-mark in the floating hero block */
.ts-hero-code-icon__body {
    padding: 12%;
}

.ts-hero-code-icon__body span {
    display: none !important;
}

.ts-hero-code-icon__mark {
    display: block;
    width: 82%;
    max-width: 118px;
    height: auto;
    filter:
        drop-shadow(0 0 16px rgba(24,214,177,.38))
        drop-shadow(0 0 10px rgba(88,166,255,.24));
}

.ts-hero-code-icon {
    border-radius: 24%;
}

/* v48: remove pseudo window buttons from stage screen */
.ts-stage__screen-top,
.ts-stage__screen-top *,
.ts-stage__screen > .ts-stage__screen-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* v50: small direct team section */
.ts-section--team-direct {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 22%, rgba(24,214,177,.16), transparent 34%),
        radial-gradient(circle at 18% 74%, rgba(88,166,255,.10), transparent 34%),
        linear-gradient(180deg, #07131d 0%, #06111a 100%);
}

.ts-direct-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
    gap: clamp(34px, 6vw, 92px);
    align-items: center;
}

.ts-direct-copy p {
    max-width: 720px;
    color: rgba(234,242,255,.74);
    font-size: clamp(17px, 1.25vw, 21px);
    line-height: 1.65;
}

.ts-direct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.ts-direct-visual {
    position: relative;
    min-height: clamp(420px, 34vw, 560px);
    perspective: 1100px;
}

.ts-direct-orbit {
    position: absolute;
    inset: 2%;
    border-radius: 42px;
    background:
        radial-gradient(circle at 50% 50%, rgba(24,214,177,.20), transparent 35%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
        0 30px 90px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
    transform-style: preserve-3d;
}

.ts-direct-orbit::before,
.ts-direct-orbit::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px solid rgba(24,214,177,.20);
    transform: rotate(-12deg);
}

.ts-direct-orbit::after {
    inset: 25%;
    border-color: rgba(88,166,255,.18);
    transform: rotate(18deg);
}

.ts-direct-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: clamp(170px, 14vw, 220px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
    border-radius: 34%;
    background:
        radial-gradient(circle at 62% 28%, rgba(24,214,177,.32), transparent 36%),
        rgba(4,15,22,.82);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 26px 70px rgba(0,0,0,.38),
        0 0 54px rgba(24,214,177,.22);
}

.ts-direct-core strong {
    display: block;
    color: #18d6b1;
    font-family: var(--ts-font-condensed);
    font-size: clamp(64px, 5.8vw, 96px);
    line-height: .76;
    letter-spacing: 0;
}

.ts-direct-core span {
    display: block;
    max-width: 120px;
    margin-top: 12px;
    color: rgba(234,242,255,.78);
    font-size: 14px;
    line-height: 1.25;
}

.ts-direct-node {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(5,18,27,.78);
    border: 1px solid rgba(24,214,177,.30);
    color: rgba(234,242,255,.90);
    font-family: var(--ts-font-condensed);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    box-shadow:
        0 18px 46px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08);
    animation: ts-direct-node-float 7.5s ease-in-out infinite;
}

.ts-direct-node::before {
    content: "";
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, #18d6b1, #58a6ff);
    box-shadow: 0 0 16px rgba(24,214,177,.6);
}

.ts-direct-node--client { left: 8%; top: 17%; }
.ts-direct-node--dev { right: 8%; top: 24%; animation-delay: -1.8s; }
.ts-direct-node--seo { left: 12%; bottom: 20%; animation-delay: -3.4s; }
.ts-direct-node--result { right: 12%; bottom: 15%; animation-delay: -5.2s; }

.ts-direct-line {
    position: absolute;
    z-index: 3;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(24,214,177,.70), rgba(88,166,255,.40), transparent);
    transform-origin: center;
    opacity: .65;
    animation: ts-direct-line-flow 4.8s ease-in-out infinite;
}

.ts-direct-line--a { left: 18%; top: 35%; width: 62%; transform: rotate(12deg); }
.ts-direct-line--b { left: 18%; bottom: 34%; width: 64%; transform: rotate(-16deg); animation-delay: -1.8s; }
.ts-direct-line--c { left: 28%; top: 50%; width: 46%; transform: rotate(0deg); animation-delay: -3s; }

.ts-direct-benefits {
    position: relative;
    z-index: 2;
    margin-top: clamp(30px, 5vw, 74px);
}

.ts-direct-benefit {
    min-height: 230px;
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 10%, rgba(24,214,177,.14), transparent 34%),
        rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.ts-direct-benefit:hover {
    transform: translateY(-7px);
    border-color: rgba(24,214,177,.30);
    background:
        radial-gradient(circle at 88% 10%, rgba(24,214,177,.18), transparent 36%),
        rgba(255,255,255,.06);
}

.ts-direct-benefit b {
    color: #18d6b1;
    font-family: var(--ts-font-condensed);
    font-size: 15px;
}

.ts-direct-benefit h3 {
    margin: 18px 0 10px;
    color: #fff;
    font-family: var(--ts-font-condensed);
    font-size: clamp(24px, 1.8vw, 32px);
    line-height: 1;
    letter-spacing: 0;
}

.ts-direct-benefit p {
    margin: 0;
    color: rgba(234,242,255,.68);
    line-height: 1.55;
}

@keyframes ts-direct-node-float {
    0%,100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-10px,0); }
}

@keyframes ts-direct-line-flow {
    0%,100% { opacity: .30; filter: blur(0); }
    50% { opacity: .82; filter: blur(.2px); }
}

/* v50: interactive prices */
.ts-section--prices {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(24,214,177,.12), transparent 32%),
        linear-gradient(180deg, #06111a 0%, #081623 100%);
}

.ts-price-switch {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 34px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
}

.ts-price-switch button {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(234,242,255,.72);
    font-family: var(--ts-font-condensed);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.ts-price-switch button:hover {
    color: #fff;
    transform: translateY(-1px);
}

.ts-price-switch button.is-active {
    color: #061018;
    background: linear-gradient(135deg, #18d6b1, #d4ff74);
}

.ts-price-panel {
    display: none;
}

.ts-price-panel.is-active {
    display: block;
}

.ts-price-card {
    position: relative;
    min-height: 100%;
    padding: 28px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(24,214,177,.13), transparent 35%),
        rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow:
        0 24px 70px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
    transition: transform .32s ease, border-color .32s ease, background .32s ease;
}

.ts-price-card:hover {
    transform: translateY(-8px);
    border-color: rgba(24,214,177,.32);
    background:
        radial-gradient(circle at 90% 10%, rgba(24,214,177,.19), transparent 36%),
        rgba(255,255,255,.06);
}

.ts-price-card--accent {
    border-color: rgba(24,214,177,.34);
    box-shadow:
        0 28px 84px rgba(0,0,0,.24),
        0 0 42px rgba(24,214,177,.10),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.ts-price-card__top {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ts-price-card__top span {
    color: #18d6b1;
    font-family: var(--ts-font-condensed);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ts-price-card__top strong {
    color: #fff;
    font-family: var(--ts-font-condensed);
    font-size: clamp(30px, 2.4vw, 42px);
    line-height: 1;
    letter-spacing: 0;
}

.ts-price-card p {
    margin: 20px 0 22px;
    color: rgba(234,242,255,.72);
    line-height: 1.55;
}

.ts-price-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(24,214,177,.30);
    background: rgba(24,214,177,.08);
    color: #fff;
    font-family: var(--ts-font-condensed);
    font-weight: 800;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.ts-price-more:hover {
    transform: translateY(-2px);
    border-color: rgba(24,214,177,.60);
    background: rgba(24,214,177,.14);
}

.ts-price-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .38s ease, opacity .28s ease, margin-top .28s ease;
}

.ts-price-card.is-open .ts-price-detail {
    max-height: 360px;
    opacity: 1;
    margin-top: 18px;
}

.ts-price-detail ul {
    margin: 0;
    padding-left: 19px;
    color: rgba(234,242,255,.74);
    line-height: 1.65;
}

.ts-price-note {
    margin-top: 28px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(24,214,177,.08);
    border: 1px solid rgba(24,214,177,.18);
    color: rgba(234,242,255,.76);
}

.ts-price-note strong {
    color: #fff;
}

@media (max-width: 959px) {
    .ts-direct-grid {
        grid-template-columns: 1fr;
    }

    .ts-direct-visual {
        min-height: 440px;
    }

    .ts-price-switch {
        display: flex;
        width: 100%;
        border-radius: 24px;
    }

    .ts-price-switch button {
        flex: 1 1 100%;
    }
}

@media (max-width: 639px) {
    .ts-direct-visual {
        min-height: 380px;
    }

    .ts-direct-node {
        min-height: 36px;
        padding: 0 12px;
        font-size: 11px;
    }

    .ts-direct-core {
        width: 160px;
    }
}



/* v193: mobile direct-team spacing insurance */
@media (max-width: 767px) {
    .ts-section--team-direct .ts-direct-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .ts-section--team-direct .ts-direct-benefits {
        clear: both !important;
        margin-top: 0 !important;
    }
}


/* v211: balanced typography for homepage interactive sections */
.ts-hero--kinetic .ts-title-xl,
.ts-hero--stage .ts-title-xl {
    font-size: clamp(42px, 5.2vw, 72px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
}

.ts-scroll-showcase .ts-section-title,
.ts-scroll-showcase .ts-title-lg,
.ts-scroll-showcase h2,
.ts-story-step h2,
.ts-section--team-direct .ts-section-title,
.ts-section--prices .ts-section-title {
    font-size: clamp(36px, 4.7vw, 68px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
}

.ts-stage__index span {
    font-size: clamp(42px, 5.2vw, 72px) !important;
    line-height: .86 !important;
}

.ts-direct-benefit h3,
.ts-price-card h3,
.ts-promo-card h3,
.ts-direction-card h3 {
    font-size: clamp(24px, 2vw, 32px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.02em !important;
}

.ts-direct-copy p,
.ts-scroll-showcase p,
.ts-section--prices .ts-section-text {
    font-size: clamp(16px, 1.18vw, 20px) !important;
    line-height: 1.6 !important;
}

@media (max-width: 767px) {
    .ts-hero--kinetic .ts-title-xl,
    .ts-hero--stage .ts-title-xl,
    .ts-scroll-showcase .ts-section-title,
    .ts-scroll-showcase .ts-title-lg,
    .ts-scroll-showcase h2,
    .ts-story-step h2,
    .ts-section--team-direct .ts-section-title,
    .ts-section--prices .ts-section-title {
        font-size: clamp(34px, 10vw, 48px) !important;
        line-height: 1.05 !important;
    }
}


/* v212: hero system animation polish — cleaner labels, no stray background lines, logo in center */
.ts-hero-system__flow-lines,
.ts-hero-system__flow-lines path {
    display: none !important;
    opacity: 0 !important;
}

.ts-hero-system:after {
    opacity: .22 !important;
    mask-image: radial-gradient(circle at 50% 50%, #000 0 42%, transparent 70%) !important;
}

.ts-hero-system__orbits ellipse,
.ts-hero-system__orbits circle {
    stroke-opacity: .58 !important;
}

.ts-hero-system__pill {
    z-index: 4 !important;
    min-width: auto !important;
    padding: 7px 12px !important;
    color: rgba(234,242,255,.78) !important;
    background: rgba(5,18,27,.76) !important;
    border: 1px solid rgba(24,214,177,.28) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07) !important;
    font-size: 12px !important;
    letter-spacing: .05em !important;
}

.ts-hero-system__pill:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: #18d6b1;
    box-shadow: 0 0 14px rgba(24,214,177,.48);
    vertical-align: 1px;
}

.ts-hero-system__pill--crm {
    left: 56% !important;
    top: 5% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--forms {
    left: 25% !important;
    top: 14% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--bitrix {
    left: 6% !important;
    top: 36% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--seo {
    right: 5% !important;
    top: 38% !important;
    left: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--server {
    left: 57% !important;
    top: 62% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__card {
    z-index: 8 !important;
}

.ts-hero-system__card--one {
    left: 1% !important;
    bottom: 13% !important;
}

.ts-hero-system__card--two {
    right: 6% !important;
    top: 16% !important;
}

.ts-hero-system__card--three {
    right: 6% !important;
    bottom: 2% !important;
}

.ts-hero-code-icon__body {
    padding: 13% !important;
}

.ts-hero-code-icon__mark {
    display: block !important;
    width: 82% !important;
    max-width: 118px !important;
    height: auto !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 16px rgba(24,214,177,.42))
        drop-shadow(0 0 10px rgba(88,166,255,.24)) !important;
}

.ts-hero-code-icon__glyph {
    display: none !important;
}

.ts-hero-code-icon {
    background:
        radial-gradient(circle at 62% 26%, rgba(24,214,177,.26), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
        #07141c !important;
}

@media (max-width: 1199px) {
    .ts-hero-system__pill {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    .ts-hero-system__pill--forms {
        left: 22% !important;
        top: 12% !important;
    }

    .ts-hero-system__pill--bitrix {
        left: 5% !important;
        top: 34% !important;
    }

    .ts-hero-system__pill--server {
        left: 56% !important;
        top: 60% !important;
    }
}

@media (max-width: 767px) {
    .ts-hero-system__pill {
        transform: none !important;
        opacity: .86 !important;
    }

    .ts-hero-system__pill--crm {
        left: 56% !important;
        top: 6% !important;
    }

    .ts-hero-system__pill--forms {
        left: 20% !important;
        top: 16% !important;
    }

    .ts-hero-system__pill--bitrix {
        left: 4% !important;
        top: 38% !important;
    }

    .ts-hero-system__pill--seo {
        right: 4% !important;
        top: 40% !important;
    }

    .ts-hero-system__pill--server {
        left: 52% !important;
        top: 65% !important;
    }
}


/* v213: cleaner central logo render, no double pseudo-browser window */
.ts-hero-code-icon {
    inset: 17% !important;
    display: grid !important;
    grid-template-rows: 1fr !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(24,214,177,.24), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
        rgba(7,20,28,.92) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow:
        0 24px 64px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 28px rgba(24,214,177,.12) !important;
    transform: rotate(-2deg) !important;
}

.ts-hero-code-icon__bar {
    display: none !important;
}

.ts-hero-code-icon__body {
    padding: 15% !important;
}

.ts-hero-code-icon__mark {
    width: 88% !important;
    max-width: 132px !important;
    object-fit: contain !important;
    animation: ts-v213-mark-float 6s ease-in-out infinite !important;
    filter:
        drop-shadow(0 8px 20px rgba(0,0,0,.26))
        drop-shadow(0 0 22px rgba(24,214,177,.16)) !important;
}

.ts-hero-code-icon__glyph {
    display: none !important;
}

@keyframes ts-v213-mark-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.02); }
}


/* v214: fix hero tags readability and use clean central logo mark */
.ts-hero-system__pill,
.ts-hero-system__pill:hover {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    min-width: auto !important;
    min-height: 30px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    color: rgba(234,242,255,.78) !important;
    background: rgba(5,18,27,.78) !important;
    border: 1px solid rgba(24,214,177,.24) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
    font-family: var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.ts-hero-system__pill::before,
.ts-hero-system__pill::after {
    display: none !important;
    content: none !important;
}

.ts-hero-system__pill--crm {
    left: 58% !important;
    top: 5% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--forms {
    left: 24% !important;
    top: 14% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--bitrix {
    left: 5% !important;
    top: 36% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--seo {
    right: 4% !important;
    top: 38% !important;
    left: auto !important;
    bottom: auto !important;
}

.ts-hero-system__pill--server {
    left: 58% !important;
    top: 63% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-code-icon {
    inset: 18% !important;
    border-radius: 30px !important;
    display: grid !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 34%, rgba(24,214,177,.20), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
        rgba(7,20,28,.94) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow:
        0 24px 64px rgba(0,0,0,.40),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 28px rgba(24,214,177,.10) !important;
}

.ts-hero-code-icon__bar,
.ts-hero-code-icon__glyph,
.ts-hero-code-icon__body span {
    display: none !important;
}

.ts-hero-code-icon__body {
    display: grid !important;
    place-items: center !important;
    padding: 13% !important;
    width: 100% !important;
    height: 100% !important;
}

.ts-hero-code-icon__mark {
    display: block !important;
    width: 84% !important;
    max-width: 126px !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 8px 20px rgba(0,0,0,.22))
        drop-shadow(0 0 20px rgba(24,214,177,.16)) !important;
    animation: ts-v214-mark-breathe 6.4s ease-in-out infinite !important;
}

@keyframes ts-v214-mark-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.025); }
}

@media (max-width: 767px) {
    .ts-hero-system__pill {
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        letter-spacing: .03em !important;
    }

    .ts-hero-system__pill--forms {
        left: 20% !important;
        top: 15% !important;
    }

    .ts-hero-system__pill--bitrix {
        left: 4% !important;
        top: 37% !important;
    }

    .ts-hero-system__pill--server {
        left: 52% !important;
        top: 65% !important;
    }
}


/* v215: central hero logo uses PNG render instead of SVG */
.ts-hero-code-icon__mark[src$="logo-mark-hero.png"] {
    display: block !important;
    width: 84% !important;
    max-width: 126px !important;
    height: auto !important;
    object-fit: contain !important;
    image-rendering: auto !important;
}


/* v216: hero dashboard redesigned 1:1 concept with four service cards and premium chips */
.ts-hero-system--dashboard {
    position: relative !important;
    width: min(100%, 900px) !important;
    min-height: clamp(620px, 48vw, 780px) !important;
    margin-inline: auto !important;
}

.ts-hero-system--dashboard:before {
    inset: 6% 0 4% !important;
    opacity: .82 !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(24,214,177,.20), transparent 30%),
        radial-gradient(circle at 72% 28%, rgba(88,166,255,.15), transparent 24%),
        radial-gradient(circle at 24% 70%, rgba(212,255,116,.08), transparent 23%) !important;
}

.ts-hero-system--dashboard:after {
    opacity: .30 !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.026) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
}

.ts-hero-dashboard__bg {
    position: absolute;
    z-index: 2;
    inset: 4% -2% 0;
    width: 104%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: .92;
    transform: translate3d(calc(var(--system-x) * -.04), calc(var(--system-y) * -.035), 0);
}

.ts-hero-dashboard__rings ellipse,
.ts-hero-dashboard__rings circle {
    fill: none;
    stroke: url(#tsDashOrbit);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    opacity: .62;
}

.ts-hero-dashboard__rings ellipse:nth-child(1) {
    stroke-dasharray: 7 10;
    animation: ts-v216-orbit-dash 18s linear infinite;
}

.ts-hero-dashboard__rings ellipse:nth-child(2) {
    animation: ts-v216-orbit-drift 16s ease-in-out infinite;
}

.ts-hero-dashboard__nodes circle {
    fill: url(#tsDashNode);
    animation: ts-v216-node-pulse 3.8s ease-in-out infinite;
}

.ts-hero-dashboard__nodes circle:nth-child(2n) {
    fill: #58a6ff;
    animation-delay: -1.2s;
}

.ts-hero-dashboard__nodes circle:nth-child(3n) {
    fill: #d7f34a;
    animation-delay: -2.1s;
}

.ts-hero-system--dashboard .ts-hero-system__hub {
    z-index: 6 !important;
    width: clamp(132px, 12vw, 174px) !important;
    top: 50% !important;
    left: 50% !important;
}

.ts-hero-system--dashboard .ts-hero-system__pulse {
    inset: -76% !important;
    opacity: .65 !important;
    filter: drop-shadow(0 0 18px rgba(24,214,177,.32)) !important;
}

.ts-hero-system--dashboard .ts-hero-code-icon {
    inset: 0 !important;
    border-radius: 30px !important;
    transform: rotate(0deg) !important;
    background:
        radial-gradient(circle at 52% 34%, rgba(24,214,177,.22), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        rgba(5,15,23,.94) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

.ts-hero-system--dashboard .ts-hero-code-icon__mark {
    width: 78% !important;
    max-width: 120px !important;
}

/* service cards */
.ts-hero-system--dashboard .ts-hero-system__card {
    z-index: 8 !important;
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 22px !important;
    width: clamp(320px, 26vw, 410px) !important;
    min-height: 148px !important;
    padding: 24px 28px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(24,214,177,.30) !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 95% 10%, rgba(24,214,177,.12), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(4,15,24,.74) !important;
    box-shadow:
        0 30px 90px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 24px rgba(24,214,177,.08) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    animation: ts-v216-card-breathe 7.4s ease-in-out infinite !important;
}

.ts-hero-system--dashboard .ts-hero-system__card:after {
    display: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon {
    position: relative !important;
    inset: auto !important;
    width: 94px !important;
    height: 94px !important;
    display: grid !important;
    place-items: center !important;
    opacity: 1 !important;
    color: #18f4df !important;
    filter: drop-shadow(0 0 18px rgba(24,214,177,.34));
}

.ts-hero-system--dashboard .ts-hero-system__card-icon svg {
    width: 100%;
    height: 100%;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon svg * {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 {
    color: #93f85d !important;
    filter: drop-shadow(0 0 18px rgba(147,248,93,.30));
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--seo {
    color: #43b8ff !important;
    filter: drop-shadow(0 0 18px rgba(67,184,255,.30));
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--support {
    color: #9c61ff !important;
    filter: drop-shadow(0 0 18px rgba(156,97,255,.30));
}

.ts-hero-system--dashboard .ts-hero-system__card span {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(26px, 2.05vw, 36px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.02em !important;
}

.ts-hero-system--dashboard .ts-hero-system__card em {
    grid-column: 2 !important;
    margin: 10px 0 0 !important;
    color: rgba(234,242,255,.74) !important;
    font-size: clamp(15px, 1.08vw, 18px) !important;
    line-height: 1.42 !important;
}

.ts-hero-system__card--bitrix {
    left: 0 !important;
    top: 19% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system__card--crm24 {
    right: 0 !important;
    top: 19% !important;
    left: auto !important;
    bottom: auto !important;
    border-color: rgba(147,248,93,.30) !important;
}

.ts-hero-system__card--seo-card {
    left: 1% !important;
    bottom: 8% !important;
    right: auto !important;
    top: auto !important;
    border-color: rgba(67,184,255,.28) !important;
    animation-delay: -2.2s !important;
}

.ts-hero-system__card--support {
    right: 1% !important;
    bottom: 8% !important;
    left: auto !important;
    top: auto !important;
    border-color: rgba(156,97,255,.34) !important;
    animation-delay: -4.4s !important;
}

/* chips */
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover {
    z-index: 9 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 0 18px 0 15px !important;
    border-radius: 999px !important;
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border: 1px solid rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    animation: ts-v216-chip-float 8s ease-in-out infinite !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill::before,
.ts-hero-system--dashboard .ts-hero-system__pill::after {
    display: none !important;
    content: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    background: rgba(24,214,177,.10) !important;
    border: 1px solid rgba(24,214,177,.24) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i:before {
    color: #18f4df;
    font-family: var(--ts-font-condensed, 'Roboto Condensed', Arial, sans-serif);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.ts-hero-system__pill--server i:before { content: "▤"; }
.ts-hero-system__pill--php i:before { content: "PHP"; font-size: 10px !important; color: #9d70ff !important; }
.ts-hero-system__pill--js i:before { content: "JS"; color: #d7f34a !important; }
.ts-hero-system__pill--metrika i:before { content: "▥"; color: #7d79ff !important; }
.ts-hero-system__pill--direct i:before { content: "➜"; color: #d7f34a !important; }
.ts-hero-system__pill--context i:before { content: "◎"; color: #b16dff !important; }
.ts-hero-system__pill--leads i:before { content: "◉"; color: #18f4df !important; }
.ts-hero-system__pill--tic i:before { content: "↗"; color: #43b8ff !important; }

.ts-hero-system__pill--server { left: 2% !important; top: 5% !important; }
.ts-hero-system__pill--php { left: 24% !important; top: 5% !important; animation-delay: -1.1s !important; }
.ts-hero-system__pill--metrika { right: 14% !important; top: 2% !important; animation-delay: -2.2s !important; }
.ts-hero-system__pill--js { left: 2% !important; top: 50% !important; animation-delay: -3.1s !important; }
.ts-hero-system__pill--direct { right: 1% !important; top: 48% !important; animation-delay: -4.2s !important; }
.ts-hero-system__pill--context { left: 5% !important; bottom: 0 !important; top: auto !important; animation-delay: -5.4s !important; }
.ts-hero-system__pill--leads { left: 43% !important; bottom: 1% !important; top: auto !important; animation-delay: -6.2s !important; }
.ts-hero-system__pill--tic { right: 12% !important; bottom: 1% !important; top: auto !important; animation-delay: -7s !important; }

@keyframes ts-v216-orbit-dash {
    to { stroke-dashoffset: -220; }
}

@keyframes ts-v216-orbit-drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(4px, -3px) rotate(.7deg); }
}

@keyframes ts-v216-node-pulse {
    0%, 100% { opacity: .68; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.45); }
}

@keyframes ts-v216-card-breathe {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -6px; }
}

@keyframes ts-v216-chip-float {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -5px; }
}

@media (max-width: 1199px) {
    .ts-hero-system--dashboard {
        width: min(100%, 760px) !important;
        min-height: 690px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card {
        width: clamp(280px, 42vw, 350px) !important;
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 20px !important;
        min-height: 126px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card-icon {
        width: 68px !important;
        height: 68px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card span {
        font-size: clamp(23px, 3vw, 30px) !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card em {
        font-size: 14px !important;
    }

    .ts-hero-system__card--bitrix { left: 0 !important; top: 18% !important; }
    .ts-hero-system__card--crm24 { right: 0 !important; top: 18% !important; }
    .ts-hero-system__card--seo-card { left: 0 !important; bottom: 12% !important; }
    .ts-hero-system__card--support { right: 0 !important; bottom: 12% !important; }

    .ts-hero-system--dashboard .ts-hero-system__pill {
        min-height: 34px !important;
        padding: 0 13px 0 10px !important;
        font-size: 12px !important;
        gap: 8px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard {
        min-height: 900px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__hub {
        top: 46% !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card {
        width: min(100%, 330px) !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }

    .ts-hero-system__card--bitrix { left: 0 !important; top: 13% !important; }
    .ts-hero-system__card--crm24 { right: 0 !important; top: 29% !important; }
    .ts-hero-system__card--seo-card { left: 0 !important; bottom: 19% !important; }
    .ts-hero-system__card--support { right: 0 !important; bottom: 4% !important; }

    .ts-hero-system__pill--server { left: 0 !important; top: 0 !important; }
    .ts-hero-system__pill--php { left: 42% !important; top: 0 !important; }
    .ts-hero-system__pill--metrika { right: 0 !important; top: 6% !important; }
    .ts-hero-system__pill--js { left: 0 !important; top: 46% !important; }
    .ts-hero-system__pill--direct { right: 0 !important; top: 48% !important; }
    .ts-hero-system__pill--context { left: 0 !important; bottom: 15% !important; }
    .ts-hero-system__pill--leads { left: 38% !important; bottom: 15% !important; }
    .ts-hero-system__pill--tic { right: 0 !important; bottom: 0 !important; }
}


/* v217: bring homepage dashboard hero closer to approved mockup */
@media (min-width: 1360px) {
    .ts-hero--kinetic .ts-hero-kinetic-grid {
        grid-template-columns: minmax(360px, .72fr) minmax(720px, 1.16fr) !important;
        gap: clamp(28px, 4vw, 74px) !important;
    }

    .ts-hero--kinetic .ts-hero-copy {
        max-width: 700px !important;
    }
}

.ts-hero-system--dashboard {
    width: min(100%, 960px) !important;
    min-height: clamp(660px, 51vw, 820px) !important;
    overflow: visible !important;
}

.ts-hero-system--dashboard:before {
    inset: 7% 2% 6% !important;
    filter: blur(22px) !important;
    opacity: .76 !important;
}

.ts-hero-system--dashboard:after {
    opacity: .24 !important;
    background-size: 54px 54px !important;
    mask-image: radial-gradient(circle at 50% 50%, #000 0 55%, transparent 82%) !important;
}

.ts-hero-system--dashboard .ts-hero-dashboard__bg {
    inset: 5% -2% 1% !important;
    width: 104% !important;
    height: 100% !important;
    opacity: .82 !important;
}

.ts-hero-system--dashboard .ts-hero-dashboard__rings ellipse,
.ts-hero-system--dashboard .ts-hero-dashboard__rings circle {
    stroke-width: 1.15 !important;
    opacity: .54 !important;
}

.ts-hero-system--dashboard .ts-hero-system__hub {
    width: clamp(138px, 12vw, 190px) !important;
    top: 50% !important;
    left: 50% !important;
}

.ts-hero-system--dashboard .ts-hero-code-icon {
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 50% 34%, rgba(24,214,177,.24), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
        rgba(5,15,23,.95) !important;
    border-color: rgba(255,255,255,.18) !important;
}

.ts-hero-system--dashboard .ts-hero-code-icon__mark {
    width: 80% !important;
    max-width: 130px !important;
}

/* Cards: force premium large four-card layout and suppress stale legacy icon/number styles */
.ts-hero-system--dashboard > .ts-hero-system__card {
    position: absolute !important;
    z-index: 8 !important;
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    width: clamp(360px, 28vw, 448px) !important;
    min-height: 156px !important;
    padding: 26px 30px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 96% 10%, rgba(24,214,177,.13), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(4,15,24,.76) !important;
    border: 1px solid rgba(24,214,177,.34) !important;
    box-shadow:
        0 34px 100px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 26px rgba(24,214,177,.08) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    transform: translate3d(var(--card-px, 0px), var(--card-py, 0px), 0) !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card b,
.ts-hero-system--dashboard > .ts-hero-system__card > .ts-hero-system__icon {
    display: none !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 96px !important;
    height: 96px !important;
    align-self: center !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(28px, 2.25vw, 38px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.02em !important;
    white-space: normal !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card em {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 12px 0 0 !important;
    color: rgba(234,242,255,.73) !important;
    font-size: clamp(16px, 1.12vw, 19px) !important;
    line-height: 1.46 !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card--bitrix {
    left: 0 !important;
    top: 18% !important;
    right: auto !important;
    bottom: auto !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card--crm24 {
    right: 0 !important;
    top: 18% !important;
    left: auto !important;
    bottom: auto !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card--seo-card {
    left: .8% !important;
    bottom: 9% !important;
    right: auto !important;
    top: auto !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card--support {
    right: .8% !important;
    bottom: 9% !important;
    left: auto !important;
    top: auto !important;
}

/* Chips: larger readable pills like the mockup */
.ts-hero-system--dashboard > .ts-hero-system__pill {
    position: absolute !important;
    z-index: 9 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    padding: 0 18px 0 15px !important;
    border-radius: 999px !important;
    color: rgba(234,242,255,.80) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.80) !important;
    border: 1px solid rgba(24,214,177,.30) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    transform: none !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill:before,
.ts-hero-system--dashboard > .ts-hero-system__pill:after {
    display: none !important;
    content: none !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill i {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    background: rgba(24,214,177,.10) !important;
    border: 1px solid rgba(24,214,177,.24) !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--server { left: 1% !important; top: 5% !important; }
.ts-hero-system--dashboard > .ts-hero-system__pill--php { left: 23% !important; top: 5% !important; }
.ts-hero-system--dashboard > .ts-hero-system__pill--metrika { right: 13% !important; top: 2% !important; }
.ts-hero-system--dashboard > .ts-hero-system__pill--js { left: 2% !important; top: 49% !important; }
.ts-hero-system--dashboard > .ts-hero-system__pill--direct { right: 1% !important; top: 48% !important; }
.ts-hero-system--dashboard > .ts-hero-system__pill--context { left: 4% !important; bottom: 1% !important; top: auto !important; }
.ts-hero-system--dashboard > .ts-hero-system__pill--leads { left: 42% !important; bottom: 1% !important; top: auto !important; }
.ts-hero-system--dashboard > .ts-hero-system__pill--tic { right: 12% !important; bottom: 1% !important; top: auto !important; }

@media (max-width: 1359px) {
    .ts-hero--kinetic .ts-hero-kinetic-grid {
        grid-template-columns: 1fr !important;
    }

    .ts-hero-system--dashboard {
        width: min(100%, 940px) !important;
        margin-top: 34px !important;
    }
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard {
        min-height: 980px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card {
        width: min(100%, 348px) !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 14px !important;
        min-height: 116px !important;
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
        width: 60px !important;
        height: 60px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card span {
        font-size: clamp(22px, 6vw, 28px) !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card em {
        font-size: 13px !important;
        line-height: 1.34 !important;
        margin-top: 7px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--bitrix { left: 0 !important; top: 13% !important; }
    .ts-hero-system--dashboard > .ts-hero-system__card--crm24 { right: 0 !important; top: 28% !important; }
    .ts-hero-system--dashboard > .ts-hero-system__card--seo-card { left: 0 !important; bottom: 20% !important; }
    .ts-hero-system--dashboard > .ts-hero-system__card--support { right: 0 !important; bottom: 5% !important; }

    .ts-hero-system--dashboard > .ts-hero-system__pill {
        min-height: 32px !important;
        padding: 0 11px !important;
        font-size: 11px !important;
        gap: 7px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__pill i {
        width: 18px !important;
        height: 18px !important;
    }
}


/* v218: polish hero dashboard spacing and hierarchy */
@media (min-width: 1360px) {
    .ts-hero--kinetic .ts-title-xl {
        max-width: 660px !important;
        font-size: clamp(40px, 4.35vw, 64px) !important;
        line-height: 1.04 !important;
    }

    .ts-hero--kinetic .ts-lead {
        max-width: 650px !important;
        font-size: clamp(16px, 1.08vw, 19px) !important;
    }

    .ts-hero--kinetic .ts-hero-kinetic-grid {
        grid-template-columns: minmax(330px, .66fr) minmax(760px, 1.22fr) !important;
        gap: clamp(34px, 4.8vw, 88px) !important;
        align-items: center !important;
    }
}

.ts-hero-system--dashboard {
    width: min(100%, 980px) !important;
    min-height: clamp(700px, 52vw, 850px) !important;
}

.ts-hero-system--dashboard .ts-hero-dashboard__bg {
    inset: 8% 1% 4% !important;
    width: 98% !important;
    height: 92% !important;
    opacity: .72 !important;
}

.ts-hero-system--dashboard .ts-hero-system__hub {
    width: clamp(128px, 10.8vw, 170px) !important;
    top: 51% !important;
}

/* Cards should read as four independent cards, not as two merged rows. */
.ts-hero-system--dashboard > .ts-hero-system__card {
    width: clamp(318px, 23.4vw, 370px) !important;
    min-height: 138px !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    column-gap: 20px !important;
    padding: 22px 24px !important;
    border-radius: 26px !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    width: 82px !important;
    height: 82px !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card span {
    font-size: clamp(26px, 1.9vw, 34px) !important;
    line-height: 1.05 !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card em {
    margin-top: 9px !important;
    font-size: clamp(14px, 1vw, 17px) !important;
    line-height: 1.38 !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card--bitrix {
    left: 1.5% !important;
    top: 18% !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card--crm24 {
    right: 1.5% !important;
    top: 18% !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card--seo-card {
    left: 2% !important;
    bottom: 12% !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card--support {
    right: 2% !important;
    bottom: 12% !important;
}

/* More refined chip placement: secondary info should orbit around the main cards. */
.ts-hero-system--dashboard > .ts-hero-system__pill {
    min-height: 36px !important;
    padding: 0 14px 0 12px !important;
    gap: 8px !important;
    font-size: 12px !important;
    opacity: .92 !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill i {
    width: 21px !important;
    height: 21px !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--server {
    left: 3% !important;
    top: 5% !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--php {
    left: 25% !important;
    top: 5% !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--metrika {
    right: 10% !important;
    top: 3% !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--js {
    left: 4% !important;
    top: 48% !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--direct {
    right: 1.5% !important;
    top: 48% !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--context {
    left: 4% !important;
    bottom: 2.5% !important;
    top: auto !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--leads {
    left: 42% !important;
    bottom: 2.5% !important;
    top: auto !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill--tic {
    right: 10% !important;
    bottom: 2.5% !important;
    top: auto !important;
}

/* Keep decorative background quiet; the cards are the focus. */
.ts-hero-system--dashboard .ts-hero-dashboard__rings ellipse,
.ts-hero-system--dashboard .ts-hero-dashboard__rings circle {
    opacity: .42 !important;
}

.ts-hero-system--dashboard .ts-hero-dashboard__nodes circle {
    opacity: .78 !important;
}

@media (max-width: 1359px) {
    .ts-hero-system--dashboard {
        min-height: 740px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card {
        width: clamp(280px, 41vw, 348px) !important;
    }
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard {
        min-height: 940px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__hub {
        top: 48% !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card {
        width: min(100%, 330px) !important;
        min-height: 112px !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        padding: 16px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card span {
        font-size: clamp(21px, 6vw, 27px) !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card em {
        font-size: 12px !important;
        line-height: 1.32 !important;
    }
}


/* v219: refine hero card icons and magnetic pills */
.ts-hero-system--dashboard .ts-hero-system__card-icon {
    width: 98px !important;
    height: 98px !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon svg {
    overflow: visible;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon svg * {
    stroke-width: 2.8 !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--bitrix svg {
    filter: drop-shadow(0 0 14px rgba(24, 244, 223, .18));
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 svg {
    filter: drop-shadow(0 0 14px rgba(147, 248, 93, .16));
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--seo svg {
    filter: drop-shadow(0 0 14px rgba(67, 184, 255, .18));
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--support svg {
    filter: drop-shadow(0 0 14px rgba(156, 97, 255, .18));
}

.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover {
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1),
                box-shadow .22s ease,
                border-color .22s ease,
                background .22s ease,
                color .22s ease !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill:hover {
    box-shadow:
        0 20px 48px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 0 1px rgba(24,214,177,.14) !important;
}

/* v221: cleaner hero card SVG icons and magnetic tags without hover scaling */
.ts-hero-system--dashboard .ts-hero-system__card-icon {
    width: 100px !important;
    height: 100px !important;
    border-radius: 28px !important;
    background: radial-gradient(circle at 50% 50%, currentColor 0, transparent 64%) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon svg * {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--bitrix {
    color: #18f4df !important;
    filter: drop-shadow(0 0 20px rgba(24,244,223,.30)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 {
    color: #9bf85f !important;
    filter: drop-shadow(0 0 20px rgba(155,248,95,.26)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--seo {
    color: #43b8ff !important;
    filter: drop-shadow(0 0 20px rgba(67,184,255,.26)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--support {
    color: #9c61ff !important;
    filter: drop-shadow(0 0 20px rgba(156,97,255,.26)) !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover {
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    animation: none !important;
    transition: transform .24s cubic-bezier(.22,1,.36,1),
                box-shadow .22s ease,
                border-color .22s ease,
                background .22s ease,
                color .22s ease !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:hover {
    border-color: rgba(24,214,177,.36) !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 0 1px rgba(24,214,177,.10) !important;
}

.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic {
    border-color: rgba(24,214,177,.46) !important;
    box-shadow:
        0 22px 52px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 24px rgba(24,214,177,.14) !important;
}


/* v222: remove visible hover styling from hero chips. Magnetic movement may remain, but hover must not visually scale/glow. */
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic {
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    scale: 1 !important;
}

/* v222: growth/conversion blocks on the main page */
.ts-growth-lab {
    position: relative;
    overflow: hidden;
    padding: clamp(76px, 9vw, 132px) 0;
    background:
        radial-gradient(circle at 80% 10%, rgba(24,214,177,.12), transparent 30%),
        radial-gradient(circle at 14% 45%, rgba(88,166,255,.08), transparent 32%),
        linear-gradient(180deg, #fff 0%, #f7fbff 46%, #fff 100%);
}

.ts-growth-lab > .ts-grid-bg {
    opacity: .48;
    background-size: 72px 72px;
}

.ts-growth-lab .uk-container {
    position: relative;
    z-index: 2;
}

.ts-growth-diagnostic {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(420px, .72fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
    padding: clamp(26px, 4vw, 54px);
    border-radius: clamp(30px, 4vw, 56px);
    border: 1px solid rgba(8,18,31,.08);
    background:
        radial-gradient(circle at 86% 10%, rgba(24,214,177,.17), transparent 34%),
        rgba(255,255,255,.86);
    box-shadow: 0 34px 110px rgba(8,18,31,.08);
}

.ts-growth-diagnostic__copy h2,
.ts-growth-section-head h2,
.ts-growth-stack__intro h2,
.ts-growth-handoff h2,
.ts-growth-calc__copy h2 {
    margin: 14px 0 0;
    color: var(--ts-ink);
    font-family: var(--ts-font-condensed);
    font-weight: 850;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

.ts-growth-diagnostic__copy p,
.ts-growth-stack__intro p,
.ts-growth-handoff p,
.ts-growth-calc__copy p {
    max-width: 760px;
    margin: 20px 0 0;
    color: var(--ts-muted-dark);
    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.62;
}

.ts-growth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.ts-growth-diagnostic__panel {
    position: relative;
    min-height: 360px;
}

.ts-growth-terminal {
    position: relative;
    z-index: 2;
    overflow: hidden;
    min-height: 300px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 18%, rgba(24,214,177,.20), transparent 34%),
        linear-gradient(145deg, #06111b, #0a1b29);
    border: 1px solid rgba(24,214,177,.18);
    box-shadow: 0 28px 90px rgba(8,18,31,.20);
}

.ts-growth-terminal__top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ts-growth-terminal__top i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #18d6b1;
}

.ts-growth-terminal__top i:nth-child(2) { background: #58a6ff; }
.ts-growth-terminal__top i:nth-child(3) { background: #d7f34a; }

.ts-growth-terminal__top span {
    margin-left: 5px;
    color: rgba(234,242,255,.56);
    font-weight: 850;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ts-growth-checks {
    display: grid;
    gap: 12px;
    padding: 24px;
}

.ts-growth-checks span {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 17px;
    color: rgba(234,242,255,.78);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
}

.ts-growth-checks b {
    color: var(--ts-accent);
    font-family: var(--ts-font-condensed);
    font-weight: 900;
    letter-spacing: .08em;
}

.ts-growth-diagnostic__result {
    position: absolute;
    right: -8px;
    bottom: 0;
    z-index: 3;
    width: min(230px, 52%);
    padding: 22px;
    border-radius: 26px;
    color: #061014;
    background: linear-gradient(135deg, var(--ts-accent), var(--ts-warn));
    box-shadow: 0 22px 64px rgba(24,214,177,.24);
}

.ts-growth-diagnostic__result strong {
    display: block;
    font-family: var(--ts-font-condensed);
    font-size: clamp(44px, 5vw, 72px);
    line-height: .88;
}

.ts-growth-diagnostic__result span {
    display: block;
    margin-top: 12px;
    font-weight: 750;
    line-height: 1.25;
}

.ts-growth-section-head {
    margin: clamp(62px, 8vw, 110px) 0 clamp(28px, 4vw, 46px);
}

.ts-growth-problems,
.ts-growth-stack__grid,
.ts-growth-support__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.ts-growth-problems article,
.ts-growth-stack__grid article,
.ts-growth-support__grid article,
.ts-growth-handoff article,
.ts-growth-calc {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(8,18,31,.08);
    background: rgba(255,255,255,.86);
    box-shadow: 0 24px 80px rgba(8,18,31,.07);
}

.ts-growth-problems article {
    padding: 26px;
}

.ts-growth-problems article:nth-child(1) {
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(24,214,177,.18), transparent 34%),
        var(--ts-night);
    border-color: rgba(24,214,177,.18);
}

.ts-growth-problems b {
    color: var(--ts-accent);
    font-family: var(--ts-font-condensed);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ts-growth-problems h3,
.ts-growth-stack__grid h3,
.ts-growth-support__grid h3 {
    margin: 34px 0 0;
    color: inherit;
    font-family: var(--ts-font-condensed);
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1.05;
    font-weight: 850;
}

.ts-growth-problems p,
.ts-growth-stack__grid p,
.ts-growth-support__grid p {
    margin: 14px 0 0;
    color: var(--ts-muted-dark);
    line-height: 1.56;
}

.ts-growth-problems article:nth-child(1) p,
.ts-growth-problems article:nth-child(1) li {
    color: rgba(234,242,255,.70);
}

.ts-growth-problems ul,
.ts-growth-support__grid ul,
.ts-growth-handoff ul,
.ts-growth-handoff ol {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.ts-growth-problems li,
.ts-growth-support__grid li,
.ts-growth-handoff li {
    position: relative;
    padding-left: 18px;
    color: var(--ts-muted-dark);
    line-height: 1.36;
}

.ts-growth-problems li:before,
.ts-growth-support__grid li:before,
.ts-growth-handoff li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--ts-accent);
}

.ts-growth-stack,
.ts-growth-support,
.ts-growth-handoff,
.ts-growth-calc {
    margin-top: clamp(62px, 8vw, 110px);
}

.ts-growth-stack {
    display: grid;
    grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: start;
}

.ts-growth-stack__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ts-growth-stack__grid article {
    padding: 28px;
}

.ts-growth-stack__grid h3 {
    margin-top: 0;
}

.ts-growth-support__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ts-growth-support__grid article {
    padding: 30px;
}

.ts-growth-support__grid article.is-accent {
    color: #fff;
    background:
        radial-gradient(circle at 86% 12%, rgba(24,214,177,.24), transparent 34%),
        linear-gradient(145deg, #071421, #0b1e2c);
    border-color: rgba(24,214,177,.22);
}

.ts-growth-support__grid span {
    display: inline-flex;
    color: var(--ts-accent);
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
}

.ts-growth-support__grid strong {
    display: block;
    margin-top: 16px;
    color: inherit;
    font-family: var(--ts-font-condensed);
    font-size: clamp(34px, 3.4vw, 52px);
    line-height: 1;
}

.ts-growth-support__grid article.is-accent p,
.ts-growth-support__grid article.is-accent li {
    color: rgba(234,242,255,.72);
}

.ts-growth-handoff {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.ts-growth-handoff article {
    padding: 30px;
}

.ts-growth-handoff article:first-child {
    color: #fff;
    background:
        radial-gradient(circle at 90% 6%, rgba(24,214,177,.16), transparent 34%),
        var(--ts-night);
    border-color: rgba(255,255,255,.08);
}

.ts-growth-handoff article:first-child p,
.ts-growth-handoff article:first-child li {
    color: rgba(234,242,255,.72);
}

.ts-growth-calc {
    display: grid;
    grid-template-columns: minmax(0, .55fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    padding: clamp(28px, 4vw, 52px);
}

.ts-growth-calc__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
    gap: 20px;
}

.ts-growth-calc__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ts-growth-calc__options label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 16px;
    border-radius: 18px;
    color: var(--ts-ink);
    background: #f6f9fc;
    border: 1px solid rgba(8,18,31,.08);
    cursor: pointer;
}

.ts-growth-calc__options input {
    width: 18px;
    height: 18px;
    accent-color: #18d6b1;
}

.ts-growth-calc__result {
    padding: 22px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 10%, rgba(24,214,177,.24), transparent 34%),
        var(--ts-night);
}

.ts-growth-calc__result span {
    color: var(--ts-accent);
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
}

.ts-growth-calc__result strong {
    display: block;
    margin-top: 14px;
    font-family: var(--ts-font-condensed);
    font-size: clamp(34px, 3vw, 48px);
    line-height: 1;
}

.ts-growth-calc__result p {
    margin: 14px 0 22px;
    color: rgba(234,242,255,.68);
    line-height: 1.45;
}

@media (max-width: 1199px) {
    .ts-growth-diagnostic,
    .ts-growth-stack,
    .ts-growth-calc,
    .ts-growth-calc__panel {
        grid-template-columns: 1fr;
    }

    .ts-growth-problems,
    .ts-growth-handoff {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ts-growth-support__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .ts-growth-lab {
        padding: 58px 0;
    }

    .ts-growth-diagnostic,
    .ts-growth-calc {
        padding: 22px;
        border-radius: 28px;
    }

    .ts-growth-diagnostic__panel {
        min-height: 330px;
    }

    .ts-growth-problems,
    .ts-growth-stack__grid,
    .ts-growth-handoff,
    .ts-growth-calc__options {
        grid-template-columns: 1fr;
    }

    .ts-growth-diagnostic__copy h2,
    .ts-growth-section-head h2,
    .ts-growth-stack__intro h2,
    .ts-growth-handoff h2,
    .ts-growth-calc__copy h2 {
        font-size: clamp(30px, 9vw, 42px);
    }
}


/* v223: final fixes for growth blocks, calculator modal and hero tag hover */
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic {
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    filter: none !important;
    scale: 1 !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic i {
    transform: none !important;
    filter: none !important;
}

/* Growth block order/design fixes */
.ts-growth-lab .ts-eyebrow {
    color: var(--ts-accent) !important;
}

.ts-growth-lab .ts-eyebrow:before {
    background: currentColor !important;
}

.ts-growth-section-head {
    max-width: 1040px;
}

.ts-growth-section-head h2 {
    font-size: clamp(34px, 3.6vw, 54px) !important;
    line-height: 1.06 !important;
}

/* The typical task cards are not clickable: remove misleading first-card highlight. */
.ts-growth-problems article,
.ts-growth-problems article:nth-child(1) {
    color: var(--ts-ink) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(24,214,177,.10), transparent 32%),
        rgba(255,255,255,.88) !important;
    border-color: rgba(8,18,31,.08) !important;
    box-shadow: 0 24px 80px rgba(8,18,31,.07) !important;
}

.ts-growth-problems article p,
.ts-growth-problems article li,
.ts-growth-problems article:nth-child(1) p,
.ts-growth-problems article:nth-child(1) li {
    color: var(--ts-muted-dark) !important;
}

.ts-growth-problems article h3 {
    color: var(--ts-ink) !important;
}

/* Dark cards: headings and labels must be readable. */
.ts-growth-handoff article:first-child h2,
.ts-growth-handoff article:first-child .ts-eyebrow,
.ts-growth-handoff article:first-child .ts-eyebrow:before {
    color: #fff !important;
}

.ts-growth-handoff article:first-child h2 {
    opacity: 1 !important;
}

.ts-growth-handoff article:first-child .ts-eyebrow {
    color: var(--ts-accent) !important;
}

.ts-growth-support .ts-growth-section-head .ts-eyebrow,
.ts-growth-support .ts-growth-section-head .ts-eyebrow:before {
    color: var(--ts-accent) !important;
}

.ts-growth-support .ts-growth-section-head h2 {
    max-width: 1180px;
    font-size: clamp(34px, 3.5vw, 54px) !important;
    line-height: 1.06 !important;
}

/* Modal form for calculator/diagnostic */
.ts-growth-modal .uk-modal-dialog {
    width: min(920px, calc(100vw - 32px));
}

.ts-growth-modal__dialog {
    overflow: hidden;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 34px 120px rgba(8,18,31,.28);
}

.ts-growth-modal__head {
    padding: clamp(24px, 4vw, 42px);
    color: #fff;
    background:
        radial-gradient(circle at 92% 10%, rgba(24,214,177,.24), transparent 35%),
        linear-gradient(135deg, #07111d, #09272c);
}

.ts-growth-modal__head span {
    color: var(--ts-accent);
    font-weight: 850;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 12px;
}

.ts-growth-modal__head h3 {
    margin: 12px 0 0;
    color: #fff;
    font-family: var(--ts-font-condensed);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.02;
}

.ts-growth-modal__head p {
    max-width: 680px;
    margin: 14px 0 0;
    color: rgba(234,242,255,.72);
    line-height: 1.55;
}

.ts-growth-modal__form {
    padding: clamp(22px, 4vw, 42px);
}

.ts-growth-modal .uk-modal-close-default {
    top: 18px;
    right: 18px;
    color: #fff;
}

.ts-growth-modal .ts-feedback-form__status {
    color: var(--ts-muted-dark);
}

/* Calculator now opens the ajax modal, so make the CTA read like an action, not a page link. */
.ts-growth-calc__result .ts-button {
    cursor: pointer;
}

@media (max-width: 767px) {
    .ts-growth-section-head h2,
    .ts-growth-support .ts-growth-section-head h2 {
        font-size: clamp(30px, 9vw, 42px) !important;
    }

    .ts-growth-modal__dialog {
        border-radius: 24px;
    }

    .ts-growth-modal__form {
        padding: 20px;
    }
}


/* v224: final homepage fixes after live review */

/* Hero chips: no hover / no JS-like visual reaction. Keep only the static chip appearance. */
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic {
    transform: none !important;
    scale: 1 !important;
    filter: none !important;
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard .ts-hero-system__pill:focus i,
.ts-hero-system--dashboard .ts-hero-system__pill:active i {
    transform: none !important;
    filter: none !important;
}

/* Move the new conversion block closer to the previous visual section. */
.ts-growth-lab {
    padding-top: clamp(38px, 4.8vw, 74px) !important;
    padding-bottom: clamp(72px, 8vw, 124px) !important;
}

.ts-growth-diagnostic {
    align-items: center !important;
    margin-top: 0 !important;
}

.ts-growth-diagnostic__panel {
    min-height: 330px !important;
}

.ts-growth-diagnostic__result {
    right: 16px !important;
    bottom: -22px !important;
    width: min(210px, 46%) !important;
}

/* Make all new growth headings/eyebrows readable on both light and dark cards. */
.ts-growth-lab .ts-eyebrow {
    color: var(--ts-accent) !important;
    opacity: 1 !important;
}

.ts-growth-lab .ts-eyebrow:before {
    background: currentColor !important;
    opacity: 1 !important;
}

.ts-growth-section-head {
    max-width: 1180px !important;
}

.ts-growth-section-head h2,
.ts-growth-support .ts-growth-section-head h2 {
    font-size: clamp(34px, 3.55vw, 54px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
}

/* Typical task cards are informational, not buttons: no highlighted first card. */
.ts-growth-problems article,
.ts-growth-problems article:nth-child(1) {
    color: var(--ts-ink) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(24,214,177,.10), transparent 32%),
        rgba(255,255,255,.90) !important;
    border-color: rgba(8,18,31,.08) !important;
    box-shadow: 0 24px 80px rgba(8,18,31,.07) !important;
}

.ts-growth-problems article h3,
.ts-growth-problems article:nth-child(1) h3 {
    color: var(--ts-ink) !important;
}

.ts-growth-problems article p,
.ts-growth-problems article li,
.ts-growth-problems article:nth-child(1) p,
.ts-growth-problems article:nth-child(1) li {
    color: var(--ts-muted-dark) !important;
}

/* Dark handoff card fix: title must never be hidden. */
.ts-growth-handoff article:first-child h2 {
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.ts-growth-handoff article:first-child .ts-eyebrow {
    color: var(--ts-accent) !important;
}

.ts-growth-handoff article:first-child .ts-eyebrow:before {
    background: var(--ts-accent) !important;
}

/* Support heading eyebrow on light section. */
.ts-growth-support .ts-growth-section-head .ts-eyebrow,
.ts-growth-support .ts-growth-section-head .ts-eyebrow:before {
    color: var(--ts-accent) !important;
}

/* Modal form: force light, readable form controls inside modal. */
.ts-growth-modal__dialog {
    overflow: hidden !important;
    border-radius: 32px !important;
    background: #fff !important;
}

.ts-growth-modal__form {
    background: #fff !important;
    color: var(--ts-ink) !important;
}

.ts-growth-modal__form .ts-field span,
.ts-growth-modal__form .ts-check span {
    color: rgba(8,18,31,.64) !important;
    opacity: 1 !important;
}

.ts-growth-modal__form .ts-field input,
.ts-growth-modal__form .ts-field select,
.ts-growth-modal__form .ts-field textarea {
    background: #f4f7fb !important;
    border: 1px solid rgba(8,18,31,.12) !important;
    color: var(--ts-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
}

.ts-growth-modal__form .ts-field input::placeholder,
.ts-growth-modal__form .ts-field textarea::placeholder {
    color: rgba(8,18,31,.38) !important;
}

.ts-growth-modal__form .ts-field select {
    color: var(--ts-ink) !important;
}

.ts-growth-modal__form .ts-check {
    color: var(--ts-ink) !important;
}

.ts-growth-modal__form .ts-check input {
    accent-color: #18d6b1 !important;
}

.ts-growth-modal__form .ts-feedback-form__status {
    color: var(--ts-muted-dark) !important;
}

.ts-growth-modal__form .ts-field.is-error input,
.ts-growth-modal__form .ts-field.is-error select,
.ts-growth-modal__form .ts-field.is-error textarea {
    border-color: rgba(255,80,80,.55) !important;
}

.ts-growth-modal__form .ts-field.is-valid input,
.ts-growth-modal__form .ts-field.is-valid select,
.ts-growth-modal__form .ts-field.is-valid textarea {
    border-color: rgba(24,214,177,.48) !important;
}

@media (max-width: 767px) {
    .ts-growth-lab {
        padding-top: 34px !important;
    }

    .ts-growth-diagnostic__panel {
        min-height: 300px !important;
    }

    .ts-growth-diagnostic__result {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        margin-top: 16px !important;
    }

    .ts-growth-modal__dialog {
        width: calc(100vw - 22px) !important;
        border-radius: 24px !important;
    }
}


/* v225: PNG icon assets from generated collage + no hover grow for hero tags */
.ts-hero-system--dashboard .ts-hero-system__card-icon {
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon:before,
.ts-hero-system--dashboard .ts-hero-system__card-icon:after,
.ts-hero-system--dashboard .ts-hero-system__card-icon *:before,
.ts-hero-system--dashboard .ts-hero-system__card-icon *:after {
    display: none !important;
    content: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon-img,
.ts-hero-system--dashboard .ts-hero-system__card-icon img {
    display: block !important;
    width: 104px !important;
    height: 104px !important;
    max-width: none !important;
    object-fit: contain !important;
    image-rendering: auto !important;
    filter:
        drop-shadow(0 0 14px rgba(24,214,177,.18))
        drop-shadow(0 10px 24px rgba(0,0,0,.20)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 img {
    filter:
        drop-shadow(0 0 14px rgba(147,248,93,.18))
        drop-shadow(0 10px 24px rgba(0,0,0,.20)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--seo img {
    filter:
        drop-shadow(0 0 14px rgba(67,184,255,.18))
        drop-shadow(0 10px 24px rgba(0,0,0,.20)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--support img {
    filter:
        drop-shadow(0 0 14px rgba(156,97,255,.18))
        drop-shadow(0 10px 24px rgba(0,0,0,.20)) !important;
}

/* Tags are decorative: no hover growth, no pointer hover-state, no pseudo icon overlays. */
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic {
    pointer-events: none !important;
    transform: none !important;
    scale: 1 !important;
    translate: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard .ts-hero-system__pill:focus i,
.ts-hero-system--dashboard .ts-hero-system__pill:active i {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    transform: none !important;
    scale: 1 !important;
    filter: none !important;
    background: transparent !important;
    border-color: transparent !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i:before,
.ts-hero-system--dashboard .ts-hero-system__pill i:after {
    display: none !important;
    content: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: none !important;
    object-fit: contain !important;
    image-rendering: auto !important;
    filter: drop-shadow(0 0 9px rgba(24,214,177,.16)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill--php i img,
.ts-hero-system--dashboard .ts-hero-system__pill--context i img {
    filter: drop-shadow(0 0 9px rgba(156,97,255,.18)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill--js i img,
.ts-hero-system--dashboard .ts-hero-system__pill--direct i img {
    filter: drop-shadow(0 0 9px rgba(215,243,74,.18)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill--metrika i img,
.ts-hero-system--dashboard .ts-hero-system__pill--tic i img {
    filter: drop-shadow(0 0 9px rgba(67,184,255,.18)) !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard .ts-hero-system__card-icon img {
        width: 64px !important;
        height: 64px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img {
        width: 19px !important;
        height: 19px !important;
    }
}


/* v226: clean transparent PNG icons + card-like hover for hero tags without scaling */
.ts-hero-system--dashboard .ts-hero-system__card-icon {
    align-self: center !important;
    justify-self: center !important;
    width: 98px !important;
    height: 98px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img {
    display: block !important;
    width: 98px !important;
    height: 98px !important;
    max-width: 98px !important;
    max-height: 98px !important;
    object-fit: contain !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--bitrix img {
    filter: drop-shadow(0 0 16px rgba(24,244,223,.34)) drop-shadow(0 8px 18px rgba(0,0,0,.16)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 img {
    filter: drop-shadow(0 0 16px rgba(147,248,93,.30)) drop-shadow(0 8px 18px rgba(0,0,0,.16)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--seo img {
    filter: drop-shadow(0 0 16px rgba(67,184,255,.32)) drop-shadow(0 8px 18px rgba(0,0,0,.16)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--support img {
    filter: drop-shadow(0 0 16px rgba(177,109,255,.32)) drop-shadow(0 8px 18px rgba(0,0,0,.16)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus {
    pointer-events: auto !important;
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    translate: none !important;
    animation: none !important;
    transition:
        transform .26s cubic-bezier(.22,1,.36,1),
        box-shadow .24s ease,
        border-color .24s ease,
        background .24s ease,
        color .24s ease !important;
    will-change: transform !important;
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 calc(10px + var(--pill-active, 0) * 14px) rgba(24,214,177,.08) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus {
    border-color: rgba(24,214,177,.48) !important;
    background:
        radial-gradient(circle at 96% 10%, rgba(24,214,177,.13), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.034)),
        rgba(5,18,27,.84) !important;
    box-shadow:
        0 24px 58px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.11),
        0 0 28px rgba(24,214,177,.16) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    scale: 1 !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    object-fit: contain !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 8px rgba(24,214,177,.22)) !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard .ts-hero-system__card-icon img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }
}


/* v227: clean cropped transparent hero icons + tags move only toward cursor, without hover grow/glow */
.ts-hero-system--dashboard > .ts-hero-system__card {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    column-gap: 22px !important;
    align-items: center !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    width: 94px !important;
    height: 94px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
    display: block !important;
    width: 94px !important;
    height: 94px !important;
    max-width: 94px !important;
    max-height: 94px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--bitrix img { filter: drop-shadow(0 0 16px rgba(24,244,223,.34)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 img { filter: drop-shadow(0 0 16px rgba(147,248,93,.30)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--seo img { filter: drop-shadow(0 0 16px rgba(67,184,255,.32)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--support img { filter: drop-shadow(0 0 16px rgba(177,109,255,.32)) !important; }

.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic {
    pointer-events: none !important;
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    translate: none !important;
    filter: none !important;
    animation: none !important;
    transition: transform .26s cubic-bezier(.22,1,.36,1) !important;
    will-change: transform !important;
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    scale: 1 !important;
    filter: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    scale: 1 !important;
    filter: drop-shadow(0 0 8px rgba(24,214,177,.18)) !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard > .ts-hero-system__card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard .ts-hero-system__card-icon img {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img {
        width: 19px !important;
        height: 19px !important;
        max-width: 19px !important;
        max-height: 19px !important;
    }
}


/* v227: use source collage icons with background removed; tags only magnetically move, no hover scale/glow */
.ts-hero-system--dashboard .ts-hero-system__card-icon,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    width: 112px !important;
    height: 112px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
    width: 112px !important;
    height: 112px !important;
    max-width: 112px !important;
    max-height: 112px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--bitrix img { filter: drop-shadow(0 0 12px rgba(24,244,223,.28)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 img { filter: drop-shadow(0 0 12px rgba(147,248,93,.24)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--seo img { filter: drop-shadow(0 0 12px rgba(67,184,255,.26)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--support img { filter: drop-shadow(0 0 12px rgba(177,109,255,.26)) !important; }

.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active {
    pointer-events: none !important;
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    translate: none !important;
    animation: none !important;
    transition: transform .24s cubic-bezier(.22,1,.36,1) !important;
    will-change: transform !important;
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    filter: none !important;
    opacity: .92 !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill *,
.ts-hero-system--dashboard > .ts-hero-system__pill * {
    pointer-events: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i {
    transform: none !important;
    scale: 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 7px rgba(24,214,177,.18)) !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard .ts-hero-system__card-icon img,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }
}


/* v227: extracted transparent icons from generated collage + sticky tags without scale/hover-grow */
.ts-hero-system--dashboard .ts-hero-system__card-icon,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    display: grid !important;
    place-items: center !important;
    width: 122px !important;
    height: 122px !important;
    min-width: 122px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon:before,
.ts-hero-system--dashboard .ts-hero-system__card-icon:after,
.ts-hero-system--dashboard .ts-hero-system__card-icon *:before,
.ts-hero-system--dashboard .ts-hero-system__card-icon *:after {
    display: none !important;
    content: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
    display: block !important;
    width: 122px !important;
    height: 122px !important;
    max-width: 122px !important;
    max-height: 122px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--bitrix img { filter: drop-shadow(0 0 16px rgba(24,244,223,.36)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 img { filter: drop-shadow(0 0 16px rgba(147,248,93,.32)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--seo img { filter: drop-shadow(0 0 16px rgba(67,184,255,.34)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--support img { filter: drop-shadow(0 0 16px rgba(177,109,255,.34)) !important; }

.ts-hero-system--dashboard > .ts-hero-system__card {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    column-gap: 24px !important;
    align-items: center !important;
}

/* Tags should only stick to the cursor by JS translate variables. No grow, no hover-state, no glow jump. */
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic {
    pointer-events: none !important;
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    translate: none !important;
    rotate: none !important;
    animation: none !important;
    transition: transform .24s cubic-bezier(.22,1,.36,1) !important;
    will-change: transform !important;
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    filter: none !important;
    opacity: .92 !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill *,
.ts-hero-system--dashboard > .ts-hero-system__pill * {
    pointer-events: none !important;
    transform: none !important;
    scale: 1 !important;
    translate: none !important;
    rotate: none !important;
    animation: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 7px rgba(24,214,177,.18)) !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard .ts-hero-system__card-icon img,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        max-height: 66px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card {
        grid-template-columns: 70px minmax(0, 1fr) !important;
    }
}


/* v228: hero tags are 40% larger and central logo uses cutout from the real logo */
.ts-hero-system--dashboard .ts-hero-code-icon__mark[src$="logo-mark-cutout.png"] {
    width: 94% !important;
    max-width: 176px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter:
        drop-shadow(0 10px 26px rgba(0,0,0,.26))
        drop-shadow(0 0 26px rgba(24,214,177,.18)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic {
    min-height: 50px !important;
    padding: 0 20px 0 16px !important;
    gap: 12px !important;
    border-radius: 999px !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: .01em !important;
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    translate: none !important;
    rotate: none !important;
    animation: none !important;
    transition: transform .24s cubic-bezier(.22,1,.36,1) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 8px rgba(24,214,177,.18)) !important;
    transform: none !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard .ts-hero-system__pill,
    .ts-hero-system--dashboard > .ts-hero-system__pill,
    .ts-hero-system--dashboard .ts-hero-system__pill:hover,
    .ts-hero-system--dashboard > .ts-hero-system__pill:hover {
        min-height: 40px !important;
        padding: 0 14px 0 12px !important;
        gap: 9px !important;
        font-size: 13px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard > .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img,
    .ts-hero-system--dashboard > .ts-hero-system__pill i img {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
    }
}


/* v229: polish hero service cards and enlarge tag icons only */
.ts-hero-system--dashboard > .ts-hero-system__card {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    min-height: 128px !important;
    padding: 20px 24px !important;
    align-items: center !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    padding: 0 !important;
    justify-self: center !important;
    align-self: center !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img,
.ts-hero-system--dashboard .ts-hero-system__card-icon-img {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card span,
.ts-hero-system--dashboard .ts-hero-system__card span {
    font-size: clamp(23px, 1.55vw, 30px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.018em !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card em,
.ts-hero-system--dashboard .ts-hero-system__card em {
    margin-top: 8px !important;
    font-size: clamp(14px, .98vw, 16px) !important;
    line-height: 1.38 !important;
}

/* Enlarge only the tag icon pictures; keep the current tag text size untouched. */
.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i img {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
    object-position: center center !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard > .ts-hero-system__card {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        column-gap: 14px !important;
        min-height: 108px !important;
        padding: 16px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard .ts-hero-system__card-icon img,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card span,
    .ts-hero-system--dashboard .ts-hero-system__card span {
        font-size: clamp(20px, 5.8vw, 25px) !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img,
    .ts-hero-system--dashboard > .ts-hero-system__pill i,
    .ts-hero-system--dashboard > .ts-hero-system__pill i img {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }
}


/* v230: make dark cards meaningful, not random */
.ts-growth-problems article,
.ts-growth-problems article:nth-child(1),
.ts-growth-handoff article,
.ts-growth-handoff article:first-child {
    color: var(--ts-ink) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(24,214,177,.10), transparent 32%),
        rgba(255,255,255,.88) !important;
    border-color: rgba(8,18,31,.08) !important;
    box-shadow: 0 24px 80px rgba(8,18,31,.07) !important;
}

.ts-growth-problems article p,
.ts-growth-problems article li,
.ts-growth-problems article:nth-child(1) p,
.ts-growth-problems article:nth-child(1) li,
.ts-growth-handoff article p,
.ts-growth-handoff article li,
.ts-growth-handoff article:first-child p,
.ts-growth-handoff article:first-child li {
    color: var(--ts-muted-dark) !important;
}

.ts-growth-problems article h3,
.ts-growth-handoff article h2,
.ts-growth-handoff article:first-child h2 {
    color: var(--ts-ink) !important;
    opacity: 1 !important;
}

.ts-growth-handoff article .ts-eyebrow,
.ts-growth-handoff article:first-child .ts-eyebrow {
    color: var(--ts-accent) !important;
}

/* Support packages are the only interactive cards in this group. Dark style means selected package. */
.ts-growth-support .ts-growth-section-head p {
    max-width: 820px;
    margin-top: 18px;
    color: var(--ts-muted-dark);
    font-size: clamp(16px, 1.1vw, 19px);
    line-height: 1.55;
}

.ts-growth-support__grid article {
    cursor: pointer !important;
    transition:
        transform .32s cubic-bezier(.22,1,.36,1),
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease,
        color .28s ease !important;
}

.ts-growth-support__grid article:hover,
.ts-growth-support__grid article:focus-within {
    transform: translateY(-6px);
    border-color: rgba(24,214,177,.20) !important;
    box-shadow: 0 30px 90px rgba(8,18,31,.11) !important;
}

.ts-growth-support__grid article.is-active {
    color: #fff !important;
    background:
        radial-gradient(circle at 86% 12%, rgba(24,214,177,.24), transparent 34%),
        linear-gradient(145deg, #071421, #0b1e2c) !important;
    border-color: rgba(24,214,177,.26) !important;
    box-shadow:
        0 32px 96px rgba(8,18,31,.20),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.ts-growth-support__grid article.is-active p,
.ts-growth-support__grid article.is-active li {
    color: rgba(234,242,255,.72) !important;
}

.ts-growth-support__grid article.is-active strong,
.ts-growth-support__grid article.is-active h3 {
    color: #fff !important;
}

.ts-growth-support__grid article button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 24px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(8,18,31,.12);
    background: rgba(8,18,31,.04);
    color: var(--ts-ink);
    font-family: var(--ts-font-condensed);
    font-weight: 900;
    cursor: pointer;
}

.ts-growth-support__grid article.is-active button {
    color: #061014;
    background: linear-gradient(135deg, var(--ts-accent), var(--ts-warn));
    border-color: transparent;
}

.ts-growth-support__badge {
    position: absolute;
    right: 20px;
    top: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    color: #061014;
    background: linear-gradient(135deg, var(--ts-accent), var(--ts-warn));
    font-family: var(--ts-font-condensed);
    font-style: normal;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ts-growth-support__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    margin-top: 22px;
    padding: 22px 24px;
    border-radius: 28px;
    border: 1px solid rgba(8,18,31,.08);
    background:
        radial-gradient(circle at 100% 0, rgba(24,214,177,.12), transparent 34%),
        rgba(255,255,255,.88);
    box-shadow: 0 22px 70px rgba(8,18,31,.07);
}

.ts-growth-support__summary span {
    color: var(--ts-accent);
    font-family: var(--ts-font-condensed);
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 13px;
}

.ts-growth-support__summary strong {
    display: block;
    margin-top: 8px;
    color: var(--ts-ink);
    font-family: var(--ts-font-condensed);
    font-size: clamp(28px, 2.4vw, 40px);
    line-height: 1;
}

.ts-growth-support__summary p {
    margin: 10px 0 0;
    color: var(--ts-muted-dark);
    line-height: 1.5;
}

@media (max-width: 767px) {
    .ts-growth-support__summary {
        grid-template-columns: 1fr;
    }
}

/* v232: crisp transparent hero PNG icons and refined sizing */
.ts-hero-system--dashboard > .ts-hero-system__card {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    column-gap: 17px !important;
    min-height: 124px !important;
    padding: 20px 22px !important;
    align-items: center !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-self: center !important;
    align-self: center !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon:before,
.ts-hero-system--dashboard .ts-hero-system__card-icon:after,
.ts-hero-system--dashboard .ts-hero-system__card-icon *:before,
.ts-hero-system--dashboard .ts-hero-system__card-icon *:after {
    display: none !important;
    content: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img,
.ts-hero-system--dashboard .ts-hero-system__card-icon-img {
    display: block !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon--bitrix img { filter: drop-shadow(0 0 13px rgba(24,244,223,.30)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 img { filter: drop-shadow(0 0 13px rgba(147,248,93,.28)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--seo img { filter: drop-shadow(0 0 13px rgba(67,184,255,.30)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--support img { filter: drop-shadow(0 0 13px rgba(177,109,255,.30)) !important; }

.ts-hero-system--dashboard > .ts-hero-system__card span,
.ts-hero-system--dashboard .ts-hero-system__card span {
    font-size: clamp(22px, 1.44vw, 28px) !important;
    line-height: 1.07 !important;
    letter-spacing: -.015em !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card em,
.ts-hero-system--dashboard .ts-hero-system__card em {
    margin-top: 7px !important;
    font-size: clamp(14px, .96vw, 16px) !important;
    line-height: 1.38 !important;
}

/* Bigger tag pictures only: do not change tag text size. */
.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard .ts-hero-system__pill:focus i,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus i {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard .ts-hero-system__pill:focus i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus i img {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: drop-shadow(0 0 10px rgba(24,214,177,.20)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active {
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    animation: none !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard > .ts-hero-system__card {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        column-gap: 13px !important;
        min-height: 104px !important;
        padding: 15px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard .ts-hero-system__card-icon img,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img,
    .ts-hero-system--dashboard > .ts-hero-system__pill i,
    .ts-hero-system--dashboard > .ts-hero-system__pill i img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }
}


/* v233: hand-built clean transparent PNG icons, no generated-background artifacts */
.ts-hero-system--dashboard .ts-hero-system__card-icon,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    display: grid !important;
    place-items: center !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
    display: block !important;
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* The PNGs are already transparent line icons. CSS adds only glow, not a backing plate. */
.ts-hero-system--dashboard .ts-hero-system__card-icon--bitrix img { filter: drop-shadow(0 0 13px rgba(24,244,223,.34)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--crm24 img { filter: drop-shadow(0 0 13px rgba(147,248,93,.32)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--seo img { filter: drop-shadow(0 0 13px rgba(67,184,255,.34)) !important; }
.ts-hero-system--dashboard .ts-hero-system__card-icon--support img { filter: drop-shadow(0 0 13px rgba(177,109,255,.34)) !important; }

.ts-hero-system--dashboard > .ts-hero-system__card {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
}

/* Tag images are sized to the pill height; text size is intentionally untouched. */
.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard .ts-hero-system__pill:focus i,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus i,
.ts-hero-system--dashboard .ts-hero-system__pill:active i,
.ts-hero-system--dashboard > .ts-hero-system__pill:active i {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard .ts-hero-system__pill:focus i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus i img,
.ts-hero-system--dashboard .ts-hero-system__pill:active i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:active i img {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: drop-shadow(0 0 9px rgba(24,214,177,.22)) !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic {
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    animation: none !important;
    transition: transform .22s cubic-bezier(.22,1,.36,1) !important;
}

/* Keep hover from changing size/visual state; only JS movement is allowed. */
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active {
    color: rgba(234,242,255,.78) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(5,18,27,.78) !important;
    border-color: rgba(24,214,177,.28) !important;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
    filter: none !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card-icon img,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        column-gap: 14px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }
}


/* v234: replace noisy icon cutouts with simple geometric transparent PNGs */
.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img,
.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img {
    background: transparent !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* SEO icon was redrawn so the chart stays fully inside the magnifier. */
.ts-hero-system--dashboard .ts-hero-system__card-icon--seo img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
}


/* v235: real PNG cutouts from approved neon icon sheets */
.ts-hero-system--dashboard .ts-hero-system__card-icon,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    display: grid !important;
    place-items: center !important;
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
    display: block !important;
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    image-rendering: auto !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    column-gap: 20px !important;
    align-items: center !important;
}

/* Tag icons from the same sheet: fit to tag height, no text-size change. */
.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i,
.ts-hero-system--dashboard .ts-hero-system__pill:focus i,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus i {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img,
.ts-hero-system--dashboard .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover i img,
.ts-hero-system--dashboard .ts-hero-system__pill:focus i img,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus i img {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    image-rendering: auto !important;
}

/* No hover-scale for tags: only proximity movement through JS variables is allowed. */
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active,
.ts-hero-system--dashboard .ts-hero-system__pill.is-magnetic,
.ts-hero-system--dashboard > .ts-hero-system__pill.is-magnetic {
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    animation: none !important;
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card-icon img,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card {
        grid-template-columns: 66px minmax(0, 1fr) !important;
        column-gap: 14px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
    }
}


/* v236: hero cards/icon alignment and safe mobile layout */
.ts-hero-system--dashboard > .ts-hero-system__card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    min-height: 132px !important;
    padding: 22px 26px !important;
    align-items: center !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
    display: grid !important;
    place-items: center !important;
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    image-rendering: auto !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card span,
.ts-hero-system--dashboard .ts-hero-system__card span {
    font-size: clamp(24px, 1.56vw, 30px) !important;
    line-height: 1.06 !important;
}

.ts-hero-system--dashboard > .ts-hero-system__card em,
.ts-hero-system--dashboard .ts-hero-system__card em {
    margin-top: 8px !important;
    font-size: clamp(14px, .98vw, 16px) !important;
    line-height: 1.38 !important;
}

/* Tags: only pointer attraction is allowed; no scaling/growing on hover. */
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__pill:active,
.ts-hero-system--dashboard > .ts-hero-system__pill:active {
    transform: translate3d(var(--pill-px, 0px), var(--pill-py, 0px), 0) !important;
    scale: 1 !important;
    animation: none !important;
    transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease, box-shadow .22s ease !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill:hover img,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover img,
.ts-hero-system--dashboard .ts-hero-system__pill:focus img,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus img {
    transform: none !important;
    scale: 1 !important;
}

/* Mobile: cards must not stay absolutely scattered over the center. */
@media (max-width: 767px) {
    .ts-hero--kinetic .ts-hero-system--dashboard {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 18px 14px 28px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    .ts-hero-system--dashboard:before {
        inset: 4% -12% 0 !important;
        opacity: .55 !important;
    }

    .ts-hero-system--dashboard:after {
        opacity: .16 !important;
    }

    .ts-hero-system--dashboard .ts-hero-dashboard__bg {
        position: absolute !important;
        inset: 13% -28% 12% !important;
        width: 156% !important;
        height: 74% !important;
        opacity: .30 !important;
        transform: none !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 4 !important;
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        column-gap: 16px !important;
        width: 100% !important;
        min-height: 118px !important;
        padding: 18px 20px !important;
        border-radius: 24px !important;
        transform: none !important;
        animation: none !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--crm24 {
        order: 1 !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__hub {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 3 !important;
        order: 2 !important;
        grid-column: 1 / -1 !important;
        width: 172px !important;
        margin: 8px auto 10px !important;
        transform: none !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--bitrix {
        order: 3 !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--seo-card {
        order: 4 !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--support {
        order: 5 !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card-icon,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__card-icon img,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        max-height: 66px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card span,
    .ts-hero-system--dashboard .ts-hero-system__card span {
        font-size: clamp(22px, 6.6vw, 27px) !important;
        line-height: 1.05 !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card em,
    .ts-hero-system--dashboard .ts-hero-system__card em {
        font-size: 14px !important;
        line-height: 1.36 !important;
        margin-top: 6px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill,
    .ts-hero-system--dashboard > .ts-hero-system__pill {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 5 !important;
        order: 10 !important;
        justify-self: center !important;
        align-self: center !important;
        width: max-content !important;
        max-width: 100% !important;
        min-height: 40px !important;
        padding: 0 12px 0 9px !important;
        gap: 7px !important;
        font-size: 11px !important;
        transform: none !important;
        animation: none !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill--server { order: 11 !important; }
    .ts-hero-system--dashboard .ts-hero-system__pill--php { order: 12 !important; }
    .ts-hero-system--dashboard .ts-hero-system__pill--js { order: 13 !important; }
    .ts-hero-system--dashboard .ts-hero-system__pill--metrika { order: 14 !important; }
    .ts-hero-system--dashboard .ts-hero-system__pill--direct { order: 15 !important; }
    .ts-hero-system--dashboard .ts-hero-system__pill--context { order: 16 !important; }
    .ts-hero-system--dashboard .ts-hero-system__pill--leads { order: 17 !important; }
    .ts-hero-system--dashboard .ts-hero-system__pill--tic { order: 18 !important; }

    .ts-hero-system--dashboard .ts-hero-system__pulse {
        inset: -64% !important;
        opacity: .45 !important;
    }

    .ts-hero-system--dashboard .ts-hero-code-icon__mark {
        max-width: 108px !important;
    }
}


/* v237: mobile order fix + cleaned transparent icon assets */
@media (max-width: 767px) {
    /* Required order: central logo first, then CRM. */
    .ts-hero-system--dashboard .ts-hero-system__hub {
        order: 1 !important;
        margin: 0 auto 12px !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--crm24 {
        order: 2 !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--bitrix {
        order: 3 !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--seo-card {
        order: 4 !important;
    }

    .ts-hero-system--dashboard > .ts-hero-system__card--support {
        order: 5 !important;
    }

    .ts-hero-system--dashboard .ts-hero-dashboard__bg {
        inset: 7% -22% 8% !important;
        opacity: .22 !important;
    }
}

/* Do not let icon PNGs show any residual light/white background under glow. */
.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard .ts-hero-system__pill i img {
    mix-blend-mode: normal !important;
    background-color: transparent !important;
}


/* v242: use user-provided hero icon PNGs */
.ts-hero-system--dashboard .ts-hero-system__card-icon img,
.ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
    display: block !important;
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    transform: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i,
.ts-hero-system--dashboard > .ts-hero-system__pill i {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill i img,
.ts-hero-system--dashboard > .ts-hero-system__pill i img {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    transform: none !important;
}

.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover {
    scale: 1 !important;
    animation: none !important;
}

@media (max-width: 767px) {
    .ts-hero-system--dashboard .ts-hero-system__card-icon img,
    .ts-hero-system--dashboard > .ts-hero-system__card .ts-hero-system__card-icon img {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }

    .ts-hero-system--dashboard .ts-hero-system__pill i,
    .ts-hero-system--dashboard .ts-hero-system__pill i img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
    }
}


/* v243: smoother hero motion */
.ts-hero-system--dashboard,
.ts-hero-system--dashboard .ts-hero-dashboard__bg,
.ts-hero-system--dashboard .ts-hero-system__card,
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__hub {
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.ts-hero-system--dashboard .ts-hero-system__card,
.ts-hero-system--dashboard > .ts-hero-system__card,
.ts-hero-system--dashboard .ts-hero-system__pill,
.ts-hero-system--dashboard > .ts-hero-system__pill,
.ts-hero-system--dashboard .ts-hero-system__hub {
    transition:
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease,
        opacity .28s ease !important;
}

.ts-hero-system--dashboard .ts-hero-dashboard__bg {
    transition: opacity .28s ease !important;
}

/* Keep hover visual, but do not let hover scale/transition fight the JS smoothing. */
.ts-hero-system--dashboard .ts-hero-system__pill:hover,
.ts-hero-system--dashboard > .ts-hero-system__pill:hover,
.ts-hero-system--dashboard .ts-hero-system__pill:focus,
.ts-hero-system--dashboard > .ts-hero-system__pill:focus,
.ts-hero-system--dashboard .ts-hero-system__card:hover,
.ts-hero-system--dashboard > .ts-hero-system__card:hover {
    scale: 1 !important;
}

/* On touch devices there is no cursor to follow, so keep the block static and stable. */
@media (hover: none), (pointer: coarse) {
    .ts-hero-system--dashboard .ts-hero-system__card,
    .ts-hero-system--dashboard .ts-hero-system__pill,
    .ts-hero-system--dashboard .ts-hero-system__hub {
        transition: box-shadow .25s ease, border-color .25s ease !important;
    }
}