/* =========================================================
   TENACITY SOFT HERO
========================================================= */

.ts-hero {
    --hero-blue: #1688ff;
    --hero-blue-light: #6ac4ff;

    --hero-yellow: #ffc400;
    --hero-yellow-light: #ffe477;

    --hero-text: #f5f7fb;
    --hero-muted: #aab8c8;

    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    padding:
        calc(var(--ts-header-height, 82px) + 24px)
        0
        42px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 77% 46%,
            rgba(10, 92, 190, 0.17),
            transparent 37%
        ),
        radial-gradient(
            circle at 67% 79%,
            rgba(0, 104, 255, 0.09),
            transparent 36%
        ),
        linear-gradient(
            112deg,
            #020914 0%,
            #020b18 48%,
            #03101f 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.ts-hero__background {
    position: absolute;

    inset: 0;

    z-index: -5;

    overflow: hidden;

    pointer-events: none;
}


.ts-hero__background::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 9, 20, 0.99) 0%,
            rgba(2, 9, 20, 0.94) 32%,
            rgba(2, 9, 20, 0.4) 68%,
            rgba(2, 9, 20, 0.74) 100%
        );
}


.ts-hero__background-grid {
    position: absolute;

    inset: 0;

    opacity: 0.12;

    background-image:
        linear-gradient(
            rgba(42, 122, 214, 0.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(42, 122, 214, 0.09) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

    -webkit-mask-image:
        radial-gradient(
            ellipse at 72% 50%,
            #000 5%,
            transparent 76%
        );

    mask-image:
        radial-gradient(
            ellipse at 72% 50%,
            #000 5%,
            transparent 76%
        );
}


.ts-hero__ambient {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(140px);
}


.ts-hero__ambient--left {
    width: 380px;
    height: 380px;

    left: -230px;
    top: 31%;

    opacity: 0.07;

    background:
        var(--hero-blue);
}


.ts-hero__ambient--right {
    width: 760px;
    height: 760px;

    right: -220px;
    top: 4%;

    opacity: 0.13;

    background:
        var(--hero-blue);

    animation:
        tsHeroAmbient
        18s ease-in-out infinite alternate;
}


@keyframes tsHeroAmbient {
    to {
        opacity: 0.18;

        transform:
            translate3d(-14px, 9px, 0)
            scale(1.04);
    }
}


.ts-hero__particles {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    object-fit: cover;

    opacity: 0.28;

    mix-blend-mode: screen;

    filter:
        contrast(1.35)
        brightness(0.46)
        saturate(1.25);

    animation:
        tsParticleDrift
        85s ease-in-out infinite alternate;
}


@keyframes tsParticleDrift {
    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        opacity: 0.34;

        transform:
            translate3d(-10px, -7px, 0)
            scale(1.01);
    }
}


/* =========================================================
   LAYOUT
========================================================= */

.ts-hero__container {
    position: relative;

    width:
        min(
            calc(100% - 78px),
            1510px
        );

    display: grid;

    grid-template-columns:
        minmax(420px, 0.76fr)
        minmax(650px, 1.24fr);

    align-items: center;

    gap:
        clamp(44px, 4.7vw, 82px);
}


/* =========================================================
   CONTENT
========================================================= */

.ts-hero__content {
    position: relative;

    z-index: 30;

    max-width: 595px;
}


.ts-hero__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

    color:
        var(--hero-blue-light);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.105em;
    text-transform: uppercase;
}


.ts-hero__eyebrow-dot {
    position: relative;

    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border:
        1px solid rgba(22, 136, 255, 0.36);

    border-radius: 50%;

    background:
        rgba(22, 136, 255, 0.08);
}


.ts-hero__eyebrow-dot::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--hero-blue);

    box-shadow:
        0 0 13px
        rgba(22, 136, 255, 0.95);
}


.ts-hero__eyebrow-dot::after {
    content: "";

    position: absolute;

    inset: 2px;

    border:
        1px solid rgba(22, 136, 255, 0.35);

    border-radius: inherit;

    animation:
        tsEyebrowPulse
        2.8s ease-out infinite;
}


@keyframes tsEyebrowPulse {
    from {
        opacity: 0.8;

        transform:
            scale(0.65);
    }

    to {
        opacity: 0;

        transform:
            scale(1.6);
    }
}


.ts-hero__title {
    max-width: 585px;

    margin:
        0 0 24px;

    color:
        var(--hero-text);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            53px,
            4.25vw,
            72px
        );

    font-weight: 700;

    line-height: 1.015;

    letter-spacing: -0.055em;
}


.ts-hero__title span {
    display: block;

    background:
        linear-gradient(
            100deg,
            var(--hero-yellow-light),
            var(--hero-yellow) 52%,
            #ffa800
        );

    background-clip: text;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.ts-hero__description {
    max-width: 555px;

    margin: 0;

    color:
        var(--hero-muted);

    font-size: 17px;

    line-height: 1.72;
}


/* =========================================================
   BUTTONS
========================================================= */

.ts-hero__actions {
    display: flex;
    flex-wrap: wrap;

    align-items: stretch;

    gap: 13px;

    margin-top: 31px;
}


.ts-hero__call-button {
    min-height: 64px;

    display: inline-flex;
    align-items: center;

    gap: 17px;

    padding:
        10px 24px;

    text-align: left;
}


.ts-hero__call-icon {
    width: 23px;
    height: 23px;

    flex: 0 0 auto;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.75;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 220ms ease;
}


.ts-hero__call-button:hover
.ts-hero__call-icon {
    transform:
        rotate(-8deg)
        scale(1.07);
}


.ts-hero__call-copy {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    line-height: 1;
}


.ts-hero__call-copy small {
    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    opacity: 0.66;
}


.ts-hero__call-copy strong {
    font-size: 15px;
    font-weight: 850;

    letter-spacing: 0.01em;

    white-space: nowrap;
}


.ts-hero__secondary-button {
    min-height: 64px;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding-inline: 23px;
}


.ts-hero__secondary-button svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 220ms ease;
}


.ts-hero__secondary-button:hover svg {
    transform:
        translateX(4px);
}


/* =========================================================
   VISUAL
========================================================= */

.ts-hero__visual {
    position: relative;

    min-height:
        clamp(
            560px,
            70vh,
            720px
        );

    z-index: 5;
}


.ts-hero-scene {
    position: absolute;

    width: 117%;
    height: 100%;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}


.ts-hero-scene__glow {
    position: absolute;

    width: 80%;
    height: 66%;

    left: 57%;
    top: 48%;

    border-radius: 50%;

    opacity: 0.45;

    background:
        radial-gradient(
            ellipse,
            rgba(17, 127, 255, 0.31),
            rgba(17, 127, 255, 0.09) 43%,
            transparent 73%
        );

    filter:
        blur(60px);

    transform:
        translate(-50%, -50%);

    animation:
        tsSceneGlow
        12s ease-in-out infinite alternate;
}


@keyframes tsSceneGlow {
    to {
        opacity: 0.61;

        transform:
            translate(-50%, -50%)
            scale(1.05);
    }
}


/* =========================================================
   TECHNOLOGY LINES
========================================================= */

.ts-tech-network {
    position: absolute;

    width: 111%;
    height: 100%;

    left: -5%;
    top: 0;

    z-index: 4;

    overflow: visible;

    pointer-events: none;
}


.ts-tech-line {
    fill: none;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect:
        non-scaling-stroke;
}


.ts-tech-line--blue {
    stroke:
        url("#tsCircuitBlue");

    filter:
        url("#tsBlueGlow");
}


.ts-tech-line--gold {
    stroke:
        url("#tsCircuitGold");

    filter:
        url("#tsGoldGlow");
}


.ts-tech-line--thin {
    stroke-width: 1;

    opacity: 0.62;
}


.ts-tech-line--micro {
    stroke-width: 0.7;

    opacity: 0.44;
}


/*
Database connector is separate.
No additional blue L-shaped path exists here.
*/

.ts-tech-line--database {
    stroke-width: 1.45;

    opacity: 0.76;
}


.ts-tech-node,
.ts-tech-nodes circle,
.ts-cube-connector circle {
    animation:
        tsNodePulse
        4.8s ease-in-out infinite alternate;
}


.ts-tech-node--gold,
.ts-tech-nodes .is-gold {
    fill:
        var(--hero-yellow);

    filter:
        url("#tsGoldGlow");
}


.ts-tech-nodes .is-blue,
.ts-cube-connector .is-blue {
    fill:
        var(--hero-blue-light);

    filter:
        url("#tsBlueGlow");
}


@keyframes tsNodePulse {
    to {
        opacity: 0.48;

        transform:
            scale(1.25);

        transform-origin: center;
    }
}


/* Cube connectors */

.ts-cube-connector__shadow {
    fill: none;

    stroke:
        rgba(15, 80, 145, 0.18);

    stroke-width: 4;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.ts-cube-connector__line {
    fill: none;

    stroke:
        rgba(106, 196, 255, 0.76);

    stroke-width: 1.35;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        url("#tsBlueGlow");
}


/* =========================================================
   DIGITAL FLOOR
========================================================= */

.ts-digital-floor {
    position: absolute;

    width: 98%;
    height: 40%;

    left: 54%;
    bottom: -2%;

    z-index: 5;

    overflow: hidden;

    border-radius: 50%;

    opacity: 0.84;

    transform:
        translateX(-50%)
        perspective(760px)
        rotateX(69deg)
        scaleY(0.9);

    -webkit-mask-image:
        radial-gradient(
            ellipse,
            #000 19%,
            rgba(0, 0, 0, 0.95) 55%,
            transparent 83%
        );

    mask-image:
        radial-gradient(
            ellipse,
            #000 19%,
            rgba(0, 0, 0, 0.95) 55%,
            transparent 83%
        );
}


.ts-digital-floor__ambient {
    position: absolute;

    inset: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(21, 132, 255, 0.29),
            rgba(21, 132, 255, 0.06) 48%,
            transparent 75%
        );

    filter:
        blur(7px);
}


.ts-digital-floor__grid {
    position: absolute;

    inset: -35%;

    background-image:
        linear-gradient(
            rgba(23, 133, 255, 0.2) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23, 133, 255, 0.2) 1px,
            transparent 1px
        );

    background-size:
        43px 43px;

    transform:
        rotate(3deg);

    animation:
        tsFloorGrid
        45s linear infinite;
}


@keyframes tsFloorGrid {
    to {
        background-position:
            43px 43px;
    }
}


.ts-digital-floor__ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}


.ts-digital-floor__ring--outer {
    width: 94%;
    height: 88%;

    border:
        1px solid rgba(22, 136, 255, 0.56);

    box-shadow:
        0 0 18px rgba(22, 136, 255, 0.16);
}


.ts-digital-floor__ring--middle {
    width: 70%;
    height: 64%;

    border:
        1px solid rgba(255, 196, 0, 0.35);

    box-shadow:
        0 0 15px rgba(255, 196, 0, 0.08);
}


.ts-digital-floor__ring--inner {
    width: 43%;
    height: 39%;

    border:
        1px solid rgba(22, 136, 255, 0.7);

    box-shadow:
        0 0 17px rgba(22, 136, 255, 0.18);

    animation:
        tsFloorRing
        9s ease-in-out infinite alternate;
}


@keyframes tsFloorRing {
    to {
        opacity: 0.5;

        transform:
            translate(-50%, -50%)
            scale(1.06);
    }
}


.ts-digital-floor__axis {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}


.ts-digital-floor__axis--x {
    width: 95%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(22, 136, 255, 0.64),
            transparent
        );
}


.ts-digital-floor__axis--y {
    width: 1px;
    height: 91%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 196, 0, 0.46),
            transparent
        );
}


.ts-floor-node {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--hero-blue-light);

    box-shadow:
        0 0 10px var(--hero-blue),
        0 0 24px rgba(22, 136, 255, 0.5);

    animation:
        tsFloorNodePulse
        7s ease-in-out infinite alternate;
}


.ts-floor-node--one {
    left: 14%;
    top: 57%;
}


.ts-floor-node--two {
    left: 41%;
    top: 19%;

    background:
        var(--hero-yellow);

    box-shadow:
        0 0 10px var(--hero-yellow),
        0 0 24px rgba(255, 196, 0, 0.45);

    animation-delay:
        -1.7s;
}


.ts-floor-node--three {
    right: 16%;
    top: 60%;

    animation-delay:
        -3s;
}


.ts-floor-node--four {
    left: 62%;
    bottom: 10%;

    background:
        var(--hero-yellow);

    box-shadow:
        0 0 10px var(--hero-yellow),
        0 0 24px rgba(255, 196, 0, 0.45);

    animation-delay:
        -4.2s;
}


@keyframes tsFloorNodePulse {
    to {
        opacity: 0.34;

        transform:
            scale(1.3);
    }
}


/* =========================================================
   ASSETS
========================================================= */

.ts-hero-asset,
.ts-system-cube {
    position: absolute;

    pointer-events: none;
    user-select: none;
}


.ts-hero-asset img,
.ts-system-cube img {
    width: 100%;
    height: auto;

    display: block;

    pointer-events: none;
    user-select: none;
}


/* Bee */

.ts-hero-asset--bee {
    width: 24%;

    left: 0;
    top: 1%;

    z-index: 20;

    animation:
        tsBeeMove
        6.2s ease-in-out infinite;
}


.ts-hero-asset--bee img {
    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 24px 20px rgba(0, 0, 0, 0.42)
        )
        drop-shadow(
            0 0 24px rgba(22, 136, 255, 0.2)
        )
        drop-shadow(
            0 0 16px rgba(255, 196, 0, 0.11)
        );
}


.ts-hero-asset__bee-glow {
    position: absolute;

    width: 78%;
    height: 72%;

    left: 48%;
    top: 52%;

    border-radius: 50%;

    opacity: 0.46;

    background:
        radial-gradient(
            circle,
            rgba(22, 136, 255, 0.38),
            rgba(255, 196, 0, 0.08) 44%,
            transparent 74%
        );

    filter:
        blur(22px);

    transform:
        translate(-50%, -50%);

    animation:
        tsBeeGlow
        4.2s ease-in-out infinite alternate;
}


@keyframes tsBeeMove {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-5deg);
    }

    40% {
        transform:
            translate3d(9px, -13px, 0)
            rotate(-1.5deg);
    }

    72% {
        transform:
            translate3d(-3px, -5px, 0)
            rotate(-3.5deg);
    }
}


@keyframes tsBeeGlow {
    to {
        opacity: 0.69;

        transform:
            translate(-50%, -50%)
            scale(1.11);
    }
}


/* Panel */

.ts-hero-asset--panel {
    width: 23.5%;

    left: 0;
    bottom: 9%;

    z-index: 16;

    transform:
        rotate(-1deg);

    filter:
        drop-shadow(
            16px 32px 28px rgba(0, 0, 0, 0.54)
        )
        drop-shadow(
            0 0 20px rgba(22, 136, 255, 0.15)
        );
}


/* Monitor */

.ts-hero-asset--monitor {
    width: 75%;

    left: 17%;
    top: 24%;

    z-index: 12;

    filter:
        drop-shadow(
            0 45px 50px rgba(0, 0, 0, 0.58)
        )
        drop-shadow(
            0 0 28px rgba(22, 136, 255, 0.12)
        );
}


/* Phone */

.ts-hero-asset--phone {
    width: 22%;

    right: -1%;
    bottom: 8%;

    z-index: 17;

    filter:
        drop-shadow(
            -18px 36px 31px rgba(0, 0, 0, 0.56)
        )
        drop-shadow(
            0 0 20px rgba(22, 136, 255, 0.15)
        );
}


/* =========================================================
   SYSTEM CUBES
========================================================= */

.ts-system-cube {
    z-index: 24;

    display: flex;
    flex-direction: column;
    align-items: center;

    isolation: isolate;
}


.ts-system-cube::before {
    content: "";

    position: absolute;

    width: 68%;
    height: 20%;

    left: 50%;
    bottom: 20px;

    z-index: -1;

    border-radius: 50%;

    opacity: 0.64;

    background:
        radial-gradient(
            ellipse,
            rgba(22, 136, 255, 0.58),
            rgba(22, 136, 255, 0.11) 48%,
            transparent 76%
        );

    filter:
        blur(7px);

    transform:
        translateX(-50%);
}


.ts-system-cube img {
    position: relative;

    z-index: 2;

    filter:
        contrast(1.16)
        brightness(1.17)
        saturate(1.2)
        drop-shadow(
            0 0 12px rgba(22, 136, 255, 0.55)
        )
        drop-shadow(
            0 0 26px rgba(22, 136, 255, 0.22)
        );
}


.ts-system-cube__halo {
    position: absolute;

    width: 80%;
    aspect-ratio: 1;

    left: 50%;
    top: 41%;

    z-index: 1;

    border:
        1px solid rgba(22, 136, 255, 0.28);

    border-radius: 50%;

    opacity: 0.62;

    box-shadow:
        inset 0 0 16px rgba(22, 136, 255, 0.11),
        0 0 18px rgba(22, 136, 255, 0.14);

    transform:
        translate(-50%, -50%);
}


.ts-system-cube__label {
    position: relative;

    z-index: 4;

    min-width: 66px;

    display: inline-flex;
    justify-content: center;

    margin-top: -7px;

    padding:
        5px 10px;

    border:
        1px solid rgba(74, 173, 255, 0.28);

    border-radius: 999px;

    color:
        #dceeff;

    background:
        rgba(3, 19, 38, 0.9);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.28);

    backdrop-filter:
        blur(8px);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.ts-system-cube--api {
    width: 12%;

    left: 7%;
    bottom: -1%;
}


.ts-system-cube--database {
    width: 11.5%;

    right: 4%;
    top: 1%;
}


.ts-system-cube--users {
    width: 12%;

    right: 8%;
    bottom: -2%;
}


/* =========================================================
   REVEAL
========================================================= */

[data-hero-reveal] {
    opacity: 0;

    transition:
        opacity 900ms ease,
        transform 900ms
        cubic-bezier(
            0.18,
            0.8,
            0.2,
            1
        );
}


[data-hero-reveal="content"] {
    transform:
        translate3d(-28px, 0, 0);
}


[data-hero-reveal="visual"] {
    transform:
        translate3d(30px, 0, 0);
}


[data-hero-reveal].is-visible {
    opacity: 1;

    transform:
        translate3d(0, 0, 0);
}


/* =========================================================
   TRANSITION
========================================================= */

.ts-hero {
    position: relative;
    z-index: 1;
}


.ts-hero__transition {
    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 90px;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(2, 9, 20, 0.5) 58%,
            #020914 100%
        );
}


/* =========================================================
   SHORT DESKTOP
========================================================= */

@media (min-width: 1081px) and (max-height: 880px) {

    .ts-hero {
        padding-top:
            calc(
                var(--ts-header-height, 82px) +
                12px
            );

        padding-bottom: 17px;
    }


    .ts-hero__eyebrow {
        margin-bottom: 13px;
    }


    .ts-hero__title {
        margin-bottom: 17px;

        font-size:
            clamp(
                47px,
                3.7vw,
                61px
            );
    }


    .ts-hero__description {
        font-size: 15px;

        line-height: 1.6;
    }


    .ts-hero__actions {
        margin-top: 22px;
    }


    .ts-hero__visual {
        min-height:
            calc(
                100svh -
                var(--ts-header-height, 82px) -
                38px
            );
    }


    .ts-hero-scene {
        width: 109%;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1280px) {

    .ts-hero__container {
        width:
            min(
                calc(100% - 54px),
                1240px
            );

        grid-template-columns:
            minmax(390px, 0.8fr)
            minmax(550px, 1.2fr);

        gap: 30px;
    }


    .ts-hero-scene {
        width: 120%;
    }


    .ts-hero__title {
        font-size:
            clamp(
                47px,
                4vw,
                63px
            );
    }


    .ts-system-cube__label {
        min-width: 58px;

        font-size: 8px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1080px) {

    .ts-hero {
        min-height: auto;

        padding:
            calc(
                var(--ts-header-height, 82px) +
                52px
            )
            0
            76px;
    }


    .ts-hero__container {
        width:
            min(
                calc(100% - 48px),
                900px
            );

        grid-template-columns: 1fr;

        gap: 36px;
    }


    .ts-hero__content {
        max-width: 720px;

        margin-inline: auto;

        text-align: center;
    }


    .ts-hero__eyebrow,
    .ts-hero__actions {
        justify-content: center;
    }


    .ts-hero__title,
    .ts-hero__description {
        margin-inline: auto;
    }


    .ts-hero__visual {
        min-height: 650px;
    }


    .ts-hero-scene {
        width:
            min(
                120%,
                960px
            );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ts-hero {
        padding:
            calc(
                var(--ts-header-height, 72px) +
                34px
            )
            0
            60px;
    }


    .ts-hero__container {
        width:
            min(
                calc(100% - 32px),
                620px
            );

        gap: 24px;
    }


    .ts-hero__eyebrow {
        font-size: 10px;
    }


    .ts-hero__title {
        font-size:
            clamp(
                42px,
                11vw,
                55px
            );

        line-height: 1.02;
    }


    .ts-hero__description {
        font-size: 15px;

        line-height: 1.65;
    }


    .ts-hero__actions {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


    .ts-hero__actions .ts-btn {
        width: 100%;
    }


    .ts-hero__call-button,
    .ts-hero__secondary-button {
        justify-content: center;
    }


    .ts-hero__visual {
        min-height: 500px;

        margin-top: 4px;
    }


    .ts-hero-scene {
        width: 152%;
    }


    .ts-hero-asset--monitor {
        width: 72%;

        left: 15%;
        top: 26%;
    }


    .ts-hero-asset--bee {
        width: 20%;

        left: 7%;
        top: 6%;
    }


    .ts-hero-asset--panel {
        width: 20%;

        left: 7%;
        bottom: 13%;
    }


    .ts-hero-asset--phone {
        width: 19%;

        right: 7%;
        bottom: 12%;
    }


    .ts-system-cube--api {
        width: 9%;

        left: 9%;
        bottom: 4%;
    }


    .ts-system-cube--database {
        width: 8.5%;

        right: 9%;
        top: 8%;
    }


    .ts-system-cube--users {
        width: 9%;

        right: 12%;
        bottom: 3%;
    }


    .ts-system-cube__label {
        display: none;
    }


    .ts-tech-network {
        opacity: 0.62;
    }


    .ts-digital-floor {
        width: 90%;
        height: 35%;

        bottom: 3%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ts-hero__container {
        width:
            min(
                calc(100% - 26px),
                500px
            );
    }


    .ts-hero__title {
        font-size:
            clamp(
                38px,
                10.7vw,
                48px
            );
    }


    .ts-hero__visual {
        min-height: 375px;
    }


    .ts-hero-scene {
        width: 163%;
    }


    .ts-hero-asset--panel {
        width: 18%;

        left: 11%;
    }


    .ts-hero-asset--bee {
        width: 18%;

        left: 13%;
    }


    .ts-hero-asset--phone {
        width: 17%;

        right: 12%;
    }


    .ts-system-cube--api {
        display: none;
    }


    .ts-system-cube--database {
        width: 7%;

        right: 12%;
    }


    .ts-system-cube--users {
        width: 7%;

        right: 14%;
    }


    .ts-tech-line--thin,
    .ts-tech-line--micro {
        display: none;
    }


    .ts-tech-network {
        opacity: 0.46;
    }


    .ts-digital-floor {
        width: 83%;
        height: 31%;

        bottom: 7%;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ts-hero *,
    .ts-hero *::before,
    .ts-hero *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }


    [data-hero-reveal] {
        opacity: 1;

        transform: none;
    }

}


/* =========================================================
   PAUSE OUTSIDE VIEWPORT
========================================================= */

.ts-hero.is-outside-viewport
.ts-hero-asset--bee,

.ts-hero.is-outside-viewport
.ts-hero__particles,

.ts-hero.is-outside-viewport
.ts-digital-floor__grid,

.ts-hero.is-outside-viewport
.ts-digital-floor__ring,

.ts-hero.is-outside-viewport
.ts-floor-node,

.ts-hero.is-outside-viewport
.ts-tech-nodes circle {
    animation-play-state: paused;
}