:root {
    --tf-rail-width: 300px;
    --tf-logo-final-width: 240px;
    --tf-topbar-height: 112px;
    --tf-topbar-opacity: 0;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: #020713;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

[hidden] {
    display: none !important;
}

body.popup-open {
    overflow-x: hidden;
}

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

.space-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(79, 163, 255, 0.24), transparent 32%),
        radial-gradient(circle at 74% 24%, rgba(104, 80, 255, 0.18), transparent 34%),
        radial-gradient(circle at 50% 84%, rgba(25, 118, 210, 0.18), transparent 38%),
        linear-gradient(180deg, #020817 0%, #06152a 42%, #020713 100%);
    transition: opacity 0.12s linear;
}

.space-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(130, 190, 255, 0.22) 0 1px, transparent 1.4px);
    background-size: 90px 90px, 140px 140px;
    background-position: 12px 18px, 44px 66px;
    opacity: 0.22;
}

.space-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.26) 64%, rgba(0, 0, 0, 0.66) 100%);
}

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

.intro-fixed-stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #000000;
    isolation: isolate;
    contain: layout paint;
    will-change: opacity;
}

.intro-fixed-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
    backface-visibility: hidden;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.35) 68%, rgba(0, 0, 0, 0.72) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.34));
}

/* ======== TOP BAR / HEADLINES ======== */

.tf-fixed-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: calc(var(--tf-topbar-height) + 144px);

    z-index: 999990;
    pointer-events: none;
    border: none;

    background:
        linear-gradient(to bottom,
            rgba(85, 150, 235, 0.14) 0%,
            rgba(45, 95, 165, 0.075) 34%,
            rgba(15, 35, 75, 0.035) 62%,
            rgba(10, 25, 55, 0.00) 100%
        );

    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);

    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 38%,
        rgba(0, 0, 0, 0.72) 58%,
        rgba(0, 0, 0, 0.28) 78%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 38%,
        rgba(0, 0, 0, 0.72) 58%,
        rgba(0, 0, 0, 0.28) 78%,
        rgba(0, 0, 0, 0) 100%
    );

    opacity: var(--tf-topbar-opacity);
    transition: opacity 0.18s linear, height 0.12s linear;
}

.morph-headline,
.morph-subheadline {
    position: fixed;
    z-index: 999995;
    color: #ffffff;
    line-height: 1.04;
    font-weight: 300;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    white-space: normal;
    text-wrap: balance;
    text-shadow:
        0 0 14px rgba(0, 0, 0, 0.98),
        0 0 42px rgba(0, 0, 0, 0.9),
        0 0 34px rgba(120, 190, 255, 0.18);
    will-change: transform, left, top, width, font-size, opacity, letter-spacing;
}

.morph-subheadline {
    color: rgba(255, 255, 255, 0.92);
    text-shadow:
        0 0 14px rgba(0, 0, 0, 0.98),
        0 0 36px rgba(0, 0, 0, 0.88),
        0 0 30px rgba(120, 190, 255, 0.14);
}

/* ======== RIGHT RAIL ======== */

.tf-right-rail {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--tf-rail-width);
    height: 100dvh;
    z-index: 999980;
    pointer-events: none;
    border: none;
    background: transparent;
    transition: background 0.32s ease, box-shadow 0.32s ease;
}

body.rail-open .tf-right-rail {
    pointer-events: auto;
    background:
        radial-gradient(circle at top, rgba(70, 125, 255, 0.18), transparent 42%),
        linear-gradient(to bottom, rgba(4, 24, 48, 0.96), rgba(1, 8, 20, 0.97));
    box-shadow:
        -22px 0 70px rgba(0, 0, 0, 0.38),
        inset 1px 0 0 rgba(255, 255, 255, 0.035);
}

.tf-rail-progress-track {
    position: absolute;
    top: calc(var(--tf-topbar-height) + 34px);
    right: 18px;
    bottom: 28px;
    width: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    overflow: hidden;
}

.tf-rail-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    border-radius: 999px;
    background: rgba(160, 210, 255, 0.72);
    box-shadow: 0 0 16px rgba(120, 190, 255, 0.4);
}

.tf-rail-panel {
    position: absolute;
    top: calc(var(--tf-topbar-height) + 34px);
    left: 22px;
    right: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translate3d(18px, 0, 0);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

body.rail-open .tf-rail-panel {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.tf-rail-panel-title {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.tf-rail-panel a {
    display: block;
    padding: 13px 15px;
    border-radius: 14px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.075);
    border: none;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.tf-rail-panel a:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(120, 190, 255, 0.24);
}

/* ======== LOGO ======== */

.site-logo-layer {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    pointer-events: none;
}

.intro-logo-button {
    position: fixed;
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center center;
    pointer-events: auto;
    cursor: default;
    z-index: 1000002;
    overflow: visible;

    opacity: 0;
    animation: logoPageEntrance 2.4s ease-out forwards;
}

@keyframes logoPageEntrance {
    0% {
        opacity: 0;
        transform: translate3d(-50%, calc(-50% + 32px), 0) scale(0.965);
        filter: blur(2px);
    }

    55% {
        opacity: 1;
        transform: translate3d(-50%, calc(-50% - 4px), 0) scale(1.006);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
        filter: blur(0px);
    }
}

.intro-logo-button:disabled {
    pointer-events: none;
}

.intro-logo-button.menu-ready {
    cursor: pointer;
}

.intro-logo-button::after {
    content: "";
    position: absolute;
    top: -4%;
    right: -8%;
    width: 116%;
    height: 62%;
    pointer-events: none;
    border-radius: 40px;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(180, 220, 255, 0.04) 20%,
        rgba(255, 255, 255, 0.11) 35%,
        rgba(130, 180, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.00) 70%
    );
    mix-blend-mode: screen;
    filter: blur(12px);
    opacity: 0.48;
    animation: waterFlow 9s ease-in-out infinite;
    z-index: 2;
}

.intro-logo-img {
    position: absolute;
    top: -12.5%;
    left: -12.5%;
    width: 125%;
    height: auto;
    display: block;
    opacity: 1;
    pointer-events: none;
    filter:
        drop-shadow(0 0 10px rgba(255, 210, 120, 0.18))
        drop-shadow(0 0 24px rgba(255, 190, 90, 0.13))
        drop-shadow(0 0 48px rgba(70, 120, 255, 0.13));
    animation:
        logoFloat 7.5s ease-in-out infinite,
        logoGlow 5.5s ease-in-out infinite,
        logoShimmer 8s ease-in-out infinite;
    will-change: transform, filter, clip-path;
}

@keyframes logoFloat {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    25% { transform: translate3d(-1px, -4px, 0) scale(1.002); }
    50% { transform: translate3d(1px, -7px, 0) scale(1.004); }
    75% { transform: translate3d(-1px, -3px, 0) scale(1.001); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes logoGlow {
    0% {
        filter:
            drop-shadow(0 0 10px rgba(255, 210, 120, 0.14))
            drop-shadow(0 0 24px rgba(255, 190, 90, 0.08))
            drop-shadow(0 0 42px rgba(70, 120, 255, 0.06));
    }
    50% {
        filter:
            drop-shadow(0 0 14px rgba(255, 220, 140, 0.20))
            drop-shadow(0 0 32px rgba(255, 200, 100, 0.14))
            drop-shadow(0 0 52px rgba(90, 140, 255, 0.10));
    }
    100% {
        filter:
            drop-shadow(0 0 10px rgba(255, 210, 120, 0.14))
            drop-shadow(0 0 24px rgba(255, 190, 90, 0.08))
            drop-shadow(0 0 42px rgba(70, 120, 255, 0.06));
    }
}

@keyframes logoShimmer {
    0% { clip-path: inset(0 0 0 0); }
    25% { clip-path: inset(0.3% 0 0 0); }
    50% { clip-path: inset(0 0 0.4% 0); }
    75% { clip-path: inset(0.2% 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes waterFlow {
    0% { transform: translate3d(-15px, 0, 0) skewX(-8deg); opacity: 0.35; }
    25% { transform: translate3d(10px, -2px, 0) skewX(-6deg); opacity: 0.5; }
    50% { transform: translate3d(20px, 2px, 0) skewX(-10deg); opacity: 0.6; }
    75% { transform: translate3d(5px, -1px, 0) skewX(-7deg); opacity: 0.45; }
    100% { transform: translate3d(-15px, 0, 0) skewX(-8deg); opacity: 0.35; }
}

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

.hero-products-content,
.hero-services-content {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    will-change: opacity, transform;
    padding:
        calc(var(--tf-topbar-height) + 20px)
        var(--tf-hero-side-safe)
        28px
        var(--tf-hero-side-safe);
}

.hero-scroll-inner {
    width: min(1080px, calc(100vw - var(--tf-hero-side-safe) - var(--tf-hero-side-safe)));
    text-align: center;
    pointer-events: none;
    padding-bottom: 140px;
}

.hero-scroll-inner a,
.hero-box,
.service-box,
.hero-image-card,
.hero-service-puls-link {
    pointer-events: auto;
}

.hero-section-title {
    margin: 0 auto 30px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.6rem, 3.7vw, 3.45rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow:
        0 0 14px rgba(0, 0, 0, 0.98),
        0 0 36px rgba(0, 0, 0, 0.88),
        0 0 28px rgba(120, 190, 255, 0.14);
}

.hero-section-title-services {
    margin-top: 0;
}

.hero-boxes,
.service-boxes {
    margin-top: 0;
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-image-grid {
    align-items: flex-start;
    gap: 34px;
}

.hero-image-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 190px;
    text-decoration: none;
    color: #ffffff;

    background: transparent;
    border: none;
    box-shadow: none;
    text-shadow: none;

    cursor: pointer;
    pointer-events: auto;

    transition:
        transform 0.32s ease,
        opacity 0.32s ease,
        filter 0.32s ease;
}

.hero-image-card:hover {
    transform: translateY(-6px);
    opacity: 0.94;
}

.hero-image-card-visual {
    width: 190px;
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero-image-card-image {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 150px;
    height: auto;
    object-fit: contain;
    object-position: center bottom;

    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    filter: none;
}

.hero-image-card-title {
    display: block;
    margin-top: 15px;

    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.82rem, 1.05vw, 1.08rem);
    line-height: 1.15;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;

    text-shadow: none;
}

.hero-service-puls-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hero-service-puls-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(1080px, calc(100vw - var(--tf-hero-side-safe) - var(--tf-hero-side-safe)));
    text-decoration: none;
    color: #ffffff;
    pointer-events: auto;
}

.hero-service-puls-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(38px, 4vw, 58px);
    width: 100%;
    transform: translate3d(0, 0, 0);
    transition:
        transform 0.32s ease,
        opacity 0.32s ease,
        filter 0.32s ease;
}

.hero-service-puls-link:hover .hero-service-puls-layout {
    transform: translate3d(0, -6px, 0);
    opacity: 0.94;
}

.hero-service-puls-image {
    display: block;
    width: min(35vw, 360px);
    max-width: 360px;
    min-width: 210px;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    filter:
        drop-shadow(0 22px 40px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 28px rgba(80, 150, 255, 0.10));
    animation: heroPulsFloat 7.2s ease-in-out infinite;
    will-change: transform;
}

@keyframes heroPulsFloat {
    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(0, -5px, 0);
    }

    50% {
        transform: translate3d(0, -12px, 0);
    }

    75% {
        transform: translate3d(0, -4px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.hero-service-puls-copy {
    width: min(500px, 42vw);
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.hero-service-puls-kicker {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.28rem, 2.65vw, 2.55rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    text-shadow:
        0 0 14px rgba(0, 0, 0, 0.98),
        0 0 36px rgba(0, 0, 0, 0.88),
        0 0 28px rgba(120, 190, 255, 0.14);
}

.hero-service-puls-info {
    width: 100%;
    padding: 25px 28px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    background: rgba(255, 255, 255, 0.018);
    backdrop-filter: blur(30px) saturate(112%);
    -webkit-backdrop-filter: blur(30px) saturate(112%);
    box-shadow:
        0 20px 58px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(0.88rem, 1.05vw, 1rem);
    line-height: 1.72;
    text-align: left;
    text-wrap: pretty;
}

.hero-service-puls-text {
    display: block;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1.2rem, 2.8vw, 2.7rem);
    line-height: 1;
    font-weight: 300;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    text-align: left;
    text-shadow: none;
}

.hero-box,
.service-box {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.12);
    padding: 20px 30px;
    border-radius: 15px;
    font-size: 1.2rem;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
    font-weight: bold;
    letter-spacing: 0.1em;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    border: none;
    box-shadow:
        0 0 24px rgba(90, 180, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.hero-box:hover,
.service-box:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.17);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.48);
}

.onepage-scroll-spacer {
    position: relative;
    height: 470svh;
    background: transparent;
    pointer-events: none;
}

/* ======== FULL CONTENT IN SPACE STYLE ======== */

.space-main-content {
    position: relative;
    z-index: 30;
    padding: calc(var(--tf-topbar-height) + 100px) calc(var(--tf-rail-width) + 36px) 120px 36px;
    background: transparent;
}

.space-section {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 104px;
}

.first-space-section {
    margin-top: 0;
}

.space-content {
    width: 100%;
    color: #ffffff;
}

.section-glow-title {
    display: inline-block;
    margin: 0 0 34px;
    padding: 14px 22px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(5, 18, 38, 0.28);
    box-shadow:
        0 0 28px rgba(80, 150, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.08;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-wrap: balance;
}

.section-glow-title.small-title {
    margin-top: 8px;
    font-size: clamp(1.35rem, 2.5vw, 2.2rem);
}

.space-content p {
    margin: 0 0 24px;
    max-width: 980px;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.8;
}

.space-content .lead-text {
    color: rgba(255, 255, 255, 0.92);
}

.tables-container {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    margin: 42px auto 42px;
    flex-wrap: wrap;
}

.effect-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0 9px;
    width: 500px;
    max-width: 100%;
    overflow: hidden;
    background: transparent;
}

.effect-table th {
    padding: 0 0 8px;
}

.effect-table td {
    padding: 0 5px;
    vertical-align: stretch;
    overflow: hidden;
}

.effect-table .empty-cell {
    background: transparent;
}

.table-heading-button,
.micro-info-button,
.inline-info-button {
    appearance: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.table-heading-button {
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    color: #ffffff;
    font-size: 1.03rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    background:
        linear-gradient(135deg, rgba(110, 180, 255, 0.34), rgba(80, 120, 255, 0.13)),
        rgba(255, 255, 255, 0.055);
    box-shadow:
        0 0 30px rgba(90, 170, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation:
        shaderFloat 7.8s ease-in-out infinite,
        shaderPulse 4.8s ease-in-out infinite;
}

.micro-info-button {
    width: 100%;
    min-height: 78px;
    padding: 14px 13px;
    border-radius: 17px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.94rem;
    line-height: 1.35;
    text-align: left;
    background:
        radial-gradient(circle at 18% 18%, rgba(120, 190, 255, 0.14), transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.028));
    box-shadow:
        0 0 22px rgba(90, 170, 255, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    transform: translate3d(0, 0, 0);
    transition:
        transform 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease,
        color 0.28s ease;
    animation:
        shaderFloat 8.5s ease-in-out infinite,
        shaderPulse 5.2s ease-in-out infinite;
}

.effect-table tr:nth-child(2n) .micro-info-button {
    animation-delay: -1.6s, -0.7s;
}

.effect-table tr:nth-child(3n) .micro-info-button {
    animation-delay: -2.8s, -1.4s;
}

.effect-table td:nth-child(2) .micro-info-button {
    animation-delay: -3.4s, -1.1s;
}

.effect-table td:nth-child(3) .micro-info-button {
    animation-delay: -4.6s, -2.2s;
}

.table-heading-button:hover,
.micro-info-button:hover,
.inline-info-button:hover {
    color: #ffffff;
    transform: translate3d(0, -4px, 0) scale(1.012);
    background:
        radial-gradient(circle at 18% 18%, rgba(160, 220, 255, 0.22), transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.145), rgba(255, 255, 255, 0.052));
    box-shadow:
        0 0 26px rgba(110, 200, 255, 0.20),
        0 12px 34px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.table-heading-button:focus-visible,
.micro-info-button:focus-visible,
.inline-info-button:focus-visible,
.info-popup-close:focus-visible {
    outline: 2px solid rgba(150, 220, 255, 0.75);
    outline-offset: 4px;
}

@keyframes shaderFloat {
    0% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(1.5px, -2px, 0);
    }
    50% {
        transform: translate3d(-1px, -3px, 0);
    }
    75% {
        transform: translate3d(-1.5px, -1px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes shaderPulse {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.08);
    }
    100% {
        filter: brightness(1);
    }
}

.tf-main-image {
    display: block;
    width: 100%;
    max-width: 980px;
    height: auto;
    margin: 36px auto 30px;
    border-radius: 26px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.42),
        0 0 38px rgba(70, 140, 255, 0.13);
}

.interactive-list {
    list-style: none;
    margin: 30px 0 34px;
    padding: 0;
    max-width: 1000px;
    display: grid;
    gap: 13px;
}

.inline-info-button {
    width: 100%;
    padding: 16px 18px;
    border-radius: 18px;
    text-align: left;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.55;
    background:
        radial-gradient(circle at 14% 28%, rgba(120, 190, 255, 0.13), transparent 48%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.026));
    box-shadow:
        0 0 22px rgba(90, 170, 255, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    animation:
        shaderFloat 8.2s ease-in-out infinite,
        shaderPulse 5.1s ease-in-out infinite;
    transition:
        transform 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease,
        color 0.28s ease;
}

.interactive-list li:nth-child(2n) .inline-info-button {
    animation-delay: -1.9s, -0.8s;
}

.interactive-list li:nth-child(3n) .inline-info-button {
    animation-delay: -3.2s, -1.6s;
}

/* ======== POPUP ======== */

.info-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at center, rgba(80, 160, 255, 0.18), transparent 36%),
        rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        opacity 0.28s ease,
        backdrop-filter 0.28s ease;
}

.info-popup-backdrop.open {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.info-popup-window {
    width: min(560px, 100%);
    padding: 34px 32px 30px;
    position: relative;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(120, 190, 255, 0.18), transparent 46%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045)),
        rgba(4, 14, 31, 0.86);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.56),
        0 0 42px rgba(90, 170, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translate3d(0, 28px, 0) scale(0.94);
    opacity: 0;
    transition:
        transform 0.34s cubic-bezier(.2, .8, .2, 1),
        opacity 0.34s ease;
}

.info-popup-backdrop.open .info-popup-window {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

.info-popup-kicker {
    margin-bottom: 10px;
    color: rgba(180, 220, 255, 0.68);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.info-popup-window h3 {
    margin: 0 34px 16px 0;
    color: #ffffff;
    font-size: clamp(1.45rem, 3vw, 2.25rem);
    line-height: 1.12;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.info-popup-window p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1rem;
    line-height: 1.72;
}

.info-popup-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.info-popup-close:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: rotate(8deg) scale(1.06);
}

/* ======== RESPONSIVE ======== */

@media (max-width: 900px) {
    :root {
        --tf-rail-width: 230px;
        --tf-logo-final-width: 184px;
        --tf-topbar-height: 92px;
        --tf-hero-side-safe: 100px;
    }

    .onepage-scroll-spacer {
        height: 560svh;
    }

    .hero-section-title {
        margin-bottom: 24px;
        font-size: clamp(1.2rem, 3.4vw, 2.2rem);
        letter-spacing: 0.16em;
    }

    .hero-boxes,
    .service-boxes {
        gap: 16px;
    }

    .hero-image-grid {
        gap: 22px;
    }

    .hero-image-card {
        width: 150px;
    }

    .hero-image-card-visual {
        width: 150px;
        height: 124px;
    }

    .hero-image-card-image {
        max-width: 150px;
        max-height: 124px;
    }

    .hero-image-card-title {
        margin-top: 12px;
        font-size: 0.82rem;
        letter-spacing: 0.13em;
    }

    .hero-service-puls-layout {
        gap: 30px;
        transform: translate3d(0, 0, 0);
    }

    .hero-service-puls-link:hover .hero-service-puls-layout {
        transform: translate3d(0, -5px, 0);
    }

    .hero-service-puls-image {
        width: min(38vw, 300px);
        max-width: 300px;
        min-width: 165px;
    }

    .hero-service-puls-copy {
        width: min(410px, 42vw);
        max-width: 410px;
    }

    .hero-service-puls-kicker {
        margin-bottom: 18px;
        font-size: clamp(1.08rem, 2.75vw, 1.85rem);
        letter-spacing: 0.16em;
    }

    .hero-service-puls-info {
        padding: 20px 20px;
        font-size: 0.92rem;
        line-height: 1.62;
        backdrop-filter: blur(28px) saturate(110%);
        -webkit-backdrop-filter: blur(28px) saturate(110%);
    }

    .hero-service-puls-text {
        font-size: clamp(1.05rem, 2.8vw, 2.1rem);
        letter-spacing: 0.22em;
    }

    .hero-box,
    .service-box {
        padding: 14px 22px;
        font-size: 1rem;
    }

    .space-main-content {
        padding-right: calc(var(--tf-rail-width) + 22px);
        padding-left: 22px;
    }
}

@media (max-width: 640px) {
    :root {
        --tf-rail-width: 0px;
        --tf-logo-final-width: 96px;
        --tf-topbar-height: 116px;
    }

    .onepage-scroll-spacer {
        height: 620svh;
    }

    .hero-products-content,
    .hero-services-content {
        inset: 0;
        padding:
            calc(var(--tf-topbar-height) + 12px)
            12px
            16px
            12px;
    }

    .hero-scroll-inner {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        padding-bottom: 58px;
    }

    .tf-right-rail {
        left: 0;
        width: 100%;
        height: var(--tf-topbar-height);
    }

    body.rail-open .tf-right-rail {
        height: 100dvh;
        background:
            radial-gradient(circle at top right, rgba(70, 125, 255, 0.18), transparent 42%),
            linear-gradient(to bottom, rgba(4, 24, 48, 0.97), rgba(1, 8, 20, 0.98));
        box-shadow:
            0 22px 70px rgba(0, 0, 0, 0.42),
            inset 0 -1px 0 rgba(255, 255, 255, 0.035);
    }

    .tf-rail-progress-track {
        top: 10px;
        right: 6px;
        bottom: 10px;
    }

    .tf-rail-panel {
        top: calc(var(--tf-topbar-height) + 22px);
        left: 18px;
        right: 18px;
    }

    .hero-section-title {
        margin-bottom: 15px;
        font-size: clamp(0.98rem, 4.3vw, 1.28rem);
        letter-spacing: 0.105em;
        line-height: 1.04;
        white-space: nowrap;
    }

    .hero-boxes,
    .service-boxes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 10px;
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image-grid {
        gap: 16px 10px;
    }

    .hero-image-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .hero-image-card-visual {
        width: 100%;
        height: 92px;
    }

    .hero-image-card-image {
        max-width: 102px;
        max-height: 92px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image-card-title {
        margin-top: 8px;
        font-size: 0.62rem;
        letter-spacing: 0.075em;
        line-height: 1.14;
    }

    .hero-service-puls-link {
        width: min(100%, 350px);
    }

    .hero-service-puls-layout {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        transform: translate3d(0, 0, 0);
    }

    .hero-service-puls-link:hover .hero-service-puls-layout {
        transform: translate3d(0, -4px, 0);
    }

    .hero-service-puls-image {
        width: min(60vw, 210px);
        min-width: 0;
        max-width: 210px;
    }

    .hero-service-puls-copy {
        width: 100%;
        max-width: 100%;
        align-items: center;
    }

    .hero-service-puls-kicker {
        margin-bottom: 12px;
        font-size: clamp(0.95rem, 4.15vw, 1.18rem);
        letter-spacing: 0.095em;
        line-height: 1.04;
        text-align: center;
        white-space: nowrap;
    }

    .hero-service-puls-info {
        width: 100%;
        padding: 15px 14px;
        border-radius: 17px;
        font-size: 0.80rem;
        line-height: 1.48;
        text-align: center;
        backdrop-filter: blur(26px) saturate(108%);
        -webkit-backdrop-filter: blur(26px) saturate(108%);
    }

    .hero-service-puls-text {
        font-size: clamp(0.9rem, 4.4vw, 1.35rem);
        letter-spacing: 0.16em;
    }

    .hero-box,
    .service-box {
        width: auto;
        min-width: 0;
        max-width: 100%;
        padding: 11px 10px;
        font-size: 0.82rem;
        letter-spacing: 0.055em;
        border-radius: 12px;
        text-align: center;
    }

    .space-main-content {
        padding: calc(var(--tf-topbar-height) + 70px) 14px 80px;
    }

    .space-section {
        margin-bottom: 66px;
    }

    .section-glow-title {
        padding: 12px 15px;
        border-radius: 18px;
        font-size: 1.55rem;
        letter-spacing: 0.045em;
    }

    .section-glow-title.small-title {
        font-size: 1.22rem;
        letter-spacing: 0.045em;
    }

    .space-content p,
    .space-content li {
        font-size: 0.96rem;
        line-height: 1.68;
    }

    .tables-container {
        gap: 20px;
    }

    .effect-table {
        width: 100%;
        border-spacing: 0 8px;
    }

    .table-heading-button {
        font-size: 0.88rem;
        padding: 12px 10px;
    }

    .micro-info-button {
        min-height: 72px;
        padding: 11px 9px;
        font-size: 0.78rem;
        line-height: 1.32;
        border-radius: 14px;
    }

    .inline-info-button {
        padding: 14px 14px;
        font-size: 0.94rem;
        line-height: 1.55;
    }

    .info-popup-window {
        padding: 30px 22px 26px;
        border-radius: 24px;
    }
}

@media (max-width: 390px) {
    .hero-image-card-visual {
        height: 82px;
    }

    .hero-image-card-image {
        max-width: 90px;
        max-height: 82px;
    }

    .hero-image-card-title {
        font-size: 0.56rem;
        letter-spacing: 0.055em;
    }

    .hero-service-puls-image {
        width: min(56vw, 188px);
        max-width: 188px;
    }

    .hero-service-puls-kicker {
        font-size: clamp(0.86rem, 3.9vw, 1.02rem);
        letter-spacing: 0.075em;
    }

    .hero-service-puls-info {
        padding: 13px 12px;
        font-size: 0.76rem;
        line-height: 1.42;
    }
}

@media (max-width: 640px) and (max-height: 760px) {
    .hero-section-title {
        margin-bottom: 12px;
        font-size: clamp(0.88rem, 4vw, 1.14rem);
        letter-spacing: 0.085em;
    }

    .hero-boxes,
    .service-boxes {
        gap: 12px 8px;
    }

    .hero-image-card-visual {
        height: 76px;
    }

    .hero-image-card-image {
        max-width: 82px;
        max-height: 76px;
    }

    .hero-image-card-title {
        margin-top: 7px;
        font-size: 0.52rem;
        letter-spacing: 0.05em;
    }

    .hero-service-puls-layout {
        gap: 10px;
    }

    .hero-service-puls-image {
        max-width: 168px;
        min-width: 0;
    }

    .hero-service-puls-kicker {
        margin-bottom: 10px;
        font-size: clamp(0.82rem, 3.8vw, 0.98rem);
        letter-spacing: 0.07em;
    }

    .hero-service-puls-info {
        padding: 12px 11px;
        font-size: 0.74rem;
        line-height: 1.38;
    }

    .hero-service-puls-text {
        font-size: clamp(0.78rem, 4vw, 1.08rem);
        letter-spacing: 0.14em;
    }

    .hero-box,
    .service-box {
        padding: 9px 8px;
        font-size: 0.76rem;
    }
}