/* ==========================================================================
   WEBVERSA FINAL — MASTER STYLESHEET
   File: Assets/CSS/style.css

   EDITING GUIDE
   01. Global Foundation + Home
   02. Projects / Clientele (scoped)
   03. Contact Page (scoped)
   04. Shared Contact Terminal
   05. Shared Motion
   06. Global Theme
   07. Responsive Overrides
   08. 404 Page
   09. Final Global Cleanup

   All website CSS is intentionally kept in THIS ONE FILE.
   ========================================================================== */


/* ==========================================================================
   SECTION 01 — GLOBAL FOUNDATION + HOME PAGE
   ========================================================================== */

/* ==================================================
   WEBVERSA SOFTWARE SOLUTIONS
   PAGE: HOME / INDEX
   Organized external stylesheet
================================================== */

:root {
    --webversa-red: #ED202A;
    --webversa-black: #000000;
    --webversa-white: #F9F9F9;
    --primary: var(--webversa-red);
    --primary-dark: var(--webversa-red);
    --primary-soft: var(--webversa-red);
    --brand-red: var(--webversa-red);
    --red: var(--webversa-red);
    --red-dark: var(--webversa-red);
    --background: var(--webversa-black);
    --bg: #020202;
    --surface: #101010;
    --surface-soft: #171117;
    --text: var(--webversa-white);
    --white: var(--webversa-white);
    --muted: #a7a7a7;
    --border: rgba(249, 249, 249, 0.14);
    --container: 1180px;
    --header-height: 120px;
    --mobile-header-height: 78px;
    --page-gutter: clamp(18px, 4vw, 48px);
    --fluid-page-gutter: clamp(16px, 4vw, 42px);
    --section-space: clamp(64px, 6.5vw, 94px);
    --font-body: "Segoe UI", Arial, sans-serif;
    --font-heading: "Segoe UI", Arial, sans-serif;
    --ease: cubic-bezier(.2, .82, .22, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    min-height: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

body {
    width: 100%;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
    color: var(--text);
    background: var(--background);
    font-family: var(--font-body);
    line-height: 1.7;
}

main,
section,
header,
footer {
    max-width: 100%;
}

main>section {
    position: relative;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    color: inherit;
    font: inherit;
}

button,
a,
input,
textarea {
    touch-action: manipulation;
}

textarea,
input {
    min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    letter-spacing: -0.025em;
}

h2 {
    margin-bottom: 14px;
    font-size: clamp(34px, 4.7vw, 62px);
    line-height: 1.04;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 10px 14px;
    border-radius: 8px;
    color: #080808;
    background: var(--webversa-white);
    font: 600 14px/1.2 var(--font-body);
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.project-row--1 {
    --project-index: 1;
}

.project-row--2 {
    --project-index: 2;
}

.project-row--3 {
    --project-index: 3;
}

.project-row--4 {
    --project-index: 4;
}

.project-row--5 {
    --project-index: 5;
}

.project-row--6 {
    --project-index: 6;
}

.project-row--7 {
    --project-index: 7;
}

.project-row--8 {
    --project-index: 8;
}

@media (max-width: 1120px) {
    :root {
        --header-height: var(--mobile-header-height);
    }
}

@media (max-width: 700px) {
    .page-container {
        width: calc(100% - 28px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1000;
    width: 100%;
}

.status-bar {
    position: relative;
    height: 43px;
}

.status-part {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    height: 43px;
    color: var(--text);
    background: var(--background);
    font-size: 14px;
    white-space: nowrap;
}

.status-part strong {
    margin-left: 5px;
    color: var(--primary);
    font-weight: 600;
}

.status-left {
    left: 0;
    width: calc(50% - 300px);
    min-width: 390px;
    padding-left: 40px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0 100%);
}

.status-right {
    right: 0;
    width: calc(50% - 300px);
    min-width: 390px;
    justify-content: flex-end;
    padding-right: 40px;
    clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%);
}

.navbar-area {
    position: relative;
    height: 77px;
}

.brand-logo {
    position: absolute;
    top: 17px;
    left: 80px;
    z-index: 20;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}

.brand-logo img {
    width: 206px;
    height: 80px;
    object-fit: contain;
    object-position: left center;
}

.center-navbar {
    position: absolute;
    top: 0;
    left: 50%;
    width: 740px;
    height: 77px;
    background: var(--background);
    clip-path: polygon(0 0, 100% 0, 90.5% 100%, 9.5% 100%);
    transform: translateX(-50%);
}

.nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding-top: 6px;
    list-style: none;
}

.nav-item {
    display: flex;
    align-items: center;
}

.nav-link {
    position: relative;
    display: inline-block;
    padding: 15px 0 12px;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
}

.nav-link::after {
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--webversa-red);
    content: "";
    transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-separator {
    width: 1px;
    height: 17px;
    margin: 0 27px;
    background: rgba(249, 249, 249, 0.75);
}

.connect-wrapper {
    position: absolute;
    top: 15px;
    right: 40px;
    z-index: 30;
}

.btn-connect {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 150px;
    min-height: 46px;
    padding: 12px 35px;

    overflow: hidden;
    color: var(--webversa-white);
    background: #090909;

    border: 1px solid rgba(249, 249, 249, 0.16);

    clip-path: polygon(10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;

    box-shadow: 0 0 14px rgba(237, 32, 42, 0.38);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-connect:hover {
    background: var(--webversa-red);
    box-shadow: 0 0 30px rgba(237, 32, 42, 0.9);
    transform: translateY(-2px);
}

.btn-connect .btn-border-line {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.btn-connect .btn-connect-label {
    position: relative;
    z-index: 2;
    display: inline-block;
    pointer-events: none;
}

.btn-connect .btn-border-top {
    top: 0;
    left: -100%;

    width: 100%;
    height: 2px;

    background: linear-gradient(90deg,
            transparent,
            var(--webversa-white));

    animation: buttonTop 2s linear infinite;
}

.btn-connect .btn-border-right {
    top: -100%;
    right: 0;

    width: 2px;
    height: 100%;

    background: linear-gradient(180deg,
            transparent,
            var(--webversa-white));

    animation: buttonRight 2s linear 0.5s infinite;
}

.btn-connect .btn-border-bottom {
    right: -100%;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(270deg,
            transparent,
            var(--webversa-white));

    animation: buttonBottom 2s linear 1s infinite;
}

.btn-connect .btn-border-left {
    bottom: -100%;
    left: 0;

    width: 2px;
    height: 100%;

    background: linear-gradient(0deg,
            transparent,
            var(--webversa-white));

    animation: buttonLeft 2s linear 1.5s infinite;
}

@keyframes buttonTop {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

@keyframes buttonRight {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

@keyframes buttonBottom {
    0% {
        right: -100%;
    }

    50%,
    100% {
        right: 100%;
    }
}

@keyframes buttonLeft {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}

.menu-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1200;
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(249, 249, 249, 0.16);
    border-radius: 10px;
    outline: none;
    background: rgba(0, 0, 0, 0.62);
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    border-radius: 4px;
    background: var(--webversa-white);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1450px) {
    .center-navbar {
        width: 650px;
    }

    .status-left,
    .status-right {
        width: calc(50% - 245px);
        min-width: 330px;
    }

    .status-left,
    .brand-logo {
        left: 25px;
    }

    .status-right,
    .connect-wrapper {
        right: 25px;
    }

    .status-left {
        padding-left: 0;
    }

    .status-right {
        padding-right: 0;
    }

    .nav-link {
        font-size: 15px;
    }

    .nav-separator {
        margin-inline: 20px;
    }
}

@media (max-width: 1120px) {

    .status-bar,
    .connect-wrapper {
        display: none;
    }

    .site-header,
    .navbar-area {
        height: var(--mobile-header-height);
    }

    .navbar-area {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
    }

    .brand-logo {
        top: 14px;
        left: 20px;
    }

    .brand-logo img {
        width: 165px;
    }

    .menu-toggle {
        display: block;
    }

    .center-navbar {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(420px, 100%);
        height: 100svh;
        padding: 100px 24px 30px;
        opacity: 0;
        visibility: hidden;
        background: #99999B;
        clip-path: none;
        transform: translateX(100%);
        backdrop-filter: blur(18px);
        transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    }

    .center-navbar.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        height: auto;
        padding: 0;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        display: block;
        width: 100%;
        padding: 18px 5px;
        border-bottom: 1px solid rgba(249, 249, 249, 0.13);
        font-size: 20px;
    }

    .nav-link::after {
        bottom: 9px;
        left: 5px;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 50px;
    }

    .nav-separator {
        display: none;
    }
}

@media (max-width: 700px) {
    .brand-logo {
        left: 14px;
    }

    .brand-logo img {
        width: 145px;
        height: 38px;
    }
}

.site-header {
    position: fixed;
    height: var(--header-height);
    background: transparent;
    transform: translateZ(0);
    transition:
        height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.55s ease,
        box-shadow 0.55s ease,
        backdrop-filter 0.55s ease;
    will-change: height, background, box-shadow;
}

.site-header::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.985) 0%,
            rgba(0, 0, 0, 0.965) 100%);
    opacity: 0;
    content: "";
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.site-header::after {
    position: absolute;
    top: 56px;
    left: 50%;
    width: min(720px, calc(100% - 60px));
    height: 1px;
    box-shadow: 0 0 16px rgba(237, 32, 42, 0.4);
    opacity: 0;
    content: "";
    pointer-events: none;
    transform: translateX(-50%) scaleX(0.45);
    transition:
        opacity 0.45s ease 0.08s,
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.status-bar {
    overflow: hidden;
    opacity: 1;
    transition:
        height 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease,
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: height, opacity, transform;
}

.status-part {
    transition:
        opacity 0.35s ease,
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar-area {
    transition:
        height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.55s ease;
}

.brand-logo {
    transform: translate3d(0, 0, 0);
    transform-origin: center;
    transition:
        top 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s ease;
    will-change: top, left, transform;
}

.brand-logo img {
    transition:
        width 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s ease,
        transform 0.45s ease;
}

.center-navbar {
    transition:
        top 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.5s ease,
        box-shadow 0.5s ease,
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: width, height, clip-path, transform;
}

.nav-list {
    transition:
        height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link,
.nav-separator {
    transition:
        color 0.3s ease,
        opacity 0.45s ease,
        transform 0.45s ease,
        margin 0.55s ease;
}

.connect-wrapper {
    transition:
        opacity 0.35s ease,
        transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.35s ease;
}

.site-header.is-scrolled {
    height: 124px;
    background: var(--webversa-black);
    box-shadow:
        0 14px 42px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(249, 249, 249, 0.055);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header.is-scrolled::before {
    opacity: 1;
}

.site-header.is-scrolled::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

.site-header.is-scrolled .status-bar {
    height: 0;
    opacity: 0;
    transform: translateY(-43px);
}

.site-header.is-scrolled .status-part {
    opacity: 0;
    transform: translateY(-24px);
}

.site-header.is-scrolled .navbar-area {
    height: 124px;
    background: var(--webversa-black);
}

.site-header.is-scrolled .center-navbar {
    top: 0;
    width: min(760px, calc(100% - 60px));
    height: 57px;
    background:
        linear-gradient(180deg,
            #080808 0%,
            var(--webversa-black) 100%);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.42),
        inset 0 -1px 0 rgba(249, 249, 249, 0.055);
    clip-path:
        polygon(4% 0,
            96% 0,
            100% 100%,
            0 100%);
}

.site-header.is-scrolled .nav-list {
    height: 57px;
    padding-top: 0;
}

.site-header.is-scrolled .nav-link {
    padding-top: 18px;
    padding-bottom: 16px;
    font-size: 15px;
}

.site-header.is-scrolled .nav-separator {
    height: 15px;
    margin-inline: 23px;
    opacity: 0.65;
}

.site-header.is-scrolled .brand-logo {
    top: 63px;
    left: 50%;
    align-items: center;
    filter: drop-shadow(0 0 12px rgba(237, 32, 42, 0.15));
    transform: translate3d(-50%, 0, 0);
}

.site-header.is-scrolled .brand-logo img {
    width: 148px;
    height: 52px;
    object-position: center;
    filter:
        drop-shadow(0 0 10px rgba(249, 249, 249, 0.08));
}

.site-header.is-scrolled .connect-wrapper {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(45px, -12px, 0);
}

.menu-toggle {
    overflow: hidden;
    border-radius: 0;
    background:
        linear-gradient(145deg,
            rgba(24, 24, 24, 0.92),
            rgba(0, 0, 0, 0.9));
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(249, 249, 249, 0.035);
    clip-path:
        polygon(10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px);
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease,
        background 0.35s ease;
}

.menu-toggle::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg,
            transparent 20%,
            rgba(237, 32, 42, 0.24),
            transparent 80%);
    content: "";
    transform: translateX(-130%);
    transition: transform 0.65s ease;
}

.menu-toggle:hover {
    border-color: rgba(237, 32, 42, 0.65);
    box-shadow:
        0 0 24px rgba(237, 32, 42, 0.28),
        inset 0 0 0 1px rgba(237, 32, 42, 0.1);
    transform: translateY(-1px);
}

.menu-toggle:hover::before,
.menu-toggle.active::before {
    transform: translateX(130%);
}

.menu-toggle span {
    position: relative;
    z-index: 1;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease,
        width 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.menu-toggle.active {
    border-color: rgba(237, 32, 42, 0.75);
    box-shadow: 0 0 24px rgba(237, 32, 42, 0.34);
}

.menu-toggle.active span {
    background: var(--primary);
    box-shadow: 0 0 9px rgba(237, 32, 42, 0.8);
}

@media (max-width: 1120px) {
    .site-header {
        height: var(--mobile-header-height);
    }

    .site-header::after {
        display: none;
    }

    .site-header.is-scrolled {
        height: var(--mobile-header-height);
        background: rgba(0, 0, 0, 0.97);
        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.52),
            0 1px 0 rgba(249, 249, 249, 0.06);
    }

    .site-header.is-scrolled .navbar-area {
        height: var(--mobile-header-height);
        background: var(--webversa-black);
    }

    .site-header.is-scrolled .brand-logo {
        top: 14px;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
    }

    .site-header.is-scrolled .brand-logo img {
        width: 150px;
        height: 48px;
    }

    .center-navbar,
    .site-header.is-scrolled .center-navbar {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(440px, 100%);
        height: 100svh;
        padding: 108px 28px 36px;
        overflow: hidden auto;
        border-left: 1px solid rgba(237, 32, 42, 0.2);
        opacity: 0;
        visibility: hidden;
        background:
            radial-gradient(circle at 85% 12%,
                rgba(237, 32, 42, 0.2),
                transparent 30%),
            repeating-linear-gradient(to bottom,
                transparent 0,
                transparent 5px,
                rgba(249, 249, 249, 0.012) 6px),
            rgba(0, 0, 0, 0.985);
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.62);
        clip-path:
            polygon(13% 0,
                100% 0,
                100% 100%,
                0 100%,
                0 13%);
        transform: translate3d(105%, 0, 0) scale(0.98);
        transform-origin: right center;
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        transition:
            transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.38s ease,
            visibility 0.68s;
    }

    .center-navbar::before {
        position: absolute;
        top: 28px;
        left: 28px;
        color: rgba(249, 249, 249, 0.26);
        font-family: "Space Grotesk", sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.24em;
        content: "WEBVERSA / NAVIGATION";
    }

    .center-navbar::after {
        position: absolute;
        top: 58px;
        left: 28px;
        width: 68px;
        height: 2px;
        background: var(--primary);
        box-shadow: 0 0 14px rgba(237, 32, 42, 0.65);
        content: "";
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.55s ease 0.25s;
    }

    .center-navbar.show,
    .site-header.is-scrolled .center-navbar.show {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0) scale(1);
    }

    .center-navbar.show::after {
        transform: scaleX(1);
    }

    .nav-list {
        counter-reset: mobile-nav;
        height: auto;
    }

    .nav-item {
        counter-increment: mobile-nav;
        opacity: 0;
        transform: translate3d(48px, 0, 0);
        transition:
            opacity 0.48s ease,
            transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .center-navbar.show .nav-item {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .center-navbar.show .nav-item:nth-child(1) {
        transition-delay: 0.18s;
    }

    .center-navbar.show .nav-item:nth-child(3) {
        transition-delay: 0.25s;
    }

    .center-navbar.show .nav-item:nth-child(5) {
        transition-delay: 0.32s;
    }

    .center-navbar.show .nav-item:nth-child(7) {
        transition-delay: 0.39s;
    }

    .nav-link,
    .site-header.is-scrolled .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
        padding: 20px 8px;
        border-bottom: 1px solid rgba(249, 249, 249, 0.1);
        color: rgba(249, 249, 249, 0.74);
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(22px, 7vw, 34px);
        font-weight: 600;
        line-height: 1;
        transition:
            color 0.32s ease,
            padding-left 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            text-shadow 0.32s ease;
    }

    .nav-link::before {
        flex: 0 0 30px;
        color: var(--primary);
        font-family: Consolas, Monaco, monospace;
        font-size: 10px;
        letter-spacing: 0.08em;
        content: "0" counter(mobile-nav);
        opacity: 0.8;
    }

    .nav-link:hover,
    .nav-link.active {
        padding-left: 18px;
        color: var(--webversa-white);
        text-shadow: 0 0 18px rgba(237, 32, 42, 0.32);
    }

    .nav-link::after {
        bottom: 10px;
        left: 53px;
        height: 2px;
        box-shadow: 0 0 10px rgba(237, 32, 42, 0.6);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        width: 52px;
    }
}

@media (max-width: 700px) {
    .site-header.is-scrolled .brand-logo {
        top: 17px;
    }

    .site-header.is-scrolled .brand-logo img {
        width: 132px;
        height: 40px;
    }

    .center-navbar,
    .site-header.is-scrolled .center-navbar {
        width: 100%;
        padding: 102px 22px 30px;
        border-left: 0;
    }

    .center-navbar::before {
        left: 22px;
    }

    .center-navbar::after {
        left: 22px;
    }
}

.brand-logo {
    position: fixed;
    top: 50px;
    left: 80px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: none;
    transform: translate3d(0, 0, 0);
    transition:
        top 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        left 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.55s ease,
        background 0.55s ease,
        box-shadow 0.65s ease,
        clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease;
    will-change: top, left, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.site-header.is-scrolled {
    height: 64px;
    background: rgba(0, 0, 0, 0.98);
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.56),
        0 1px 0 rgba(249, 249, 249, 0.06);
}

.site-header.is-scrolled::after {
    top: 62px;
    width: min(760px, calc(100% - 60px));
}

.site-header.is-scrolled .navbar-area {
    height: 64px;
    background: var(--webversa-black);
}

.site-header.is-scrolled .center-navbar {
    top: 0;
    width: min(790px, calc(100% - 60px));
    height: 64px;
    background:
        linear-gradient(180deg,
            #090909 0%,
            var(--webversa-black) 100%);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.44),
        inset 0 -1px 0 rgba(249, 249, 249, 0.055);
    clip-path:
        polygon(4% 0,
            96% 0,
            100% 100%,
            0 100%);
}

.site-header.is-scrolled .nav-list {
    height: 64px;
    padding-top: 0;
}

.site-header.is-scrolled .nav-link {
    padding-top: 21px;
    padding-bottom: 19px;
    font-size: 15px;
}

.site-header.is-scrolled .brand-logo {
    top: calc(100dvh - 88px);
    left: 50%;
    width: 214px;
    height: 66px;
    padding: 7px 20px;
    align-items: center;
    justify-content: center;
    border-color: #99999B;
    background: #99999B;
    clip-path:
        polygon(14px 0,
            calc(100% - 14px) 0,
            100% 14px,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            14px 100%,
            0 calc(100% - 14px),
            0 14px);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.72),
        0 0 24px rgba(237, 32, 42, 0.18),
        inset 0 1px 0 rgba(249, 249, 249, 0.08);
    filter: none;
    transform: translate3d(-50%, 0, 0);
}

.site-header.is-scrolled .brand-logo::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 58%;
    height: 1px;
    background:
        linear-gradient(90deg,
            transparent,
            var(--primary),
            transparent);
    box-shadow: 0 0 14px rgba(237, 32, 42, 0.7);
    content: "";
    transform: translateX(-50%);
}

.site-header.is-scrolled .brand-logo img {
    width: 158px;
    height: 60px;
    object-position: center;
    filter: drop-shadow(0 0 10px rgba(249, 249, 249, 0.09));
}

@media (max-width: 1120px) {
    .brand-logo {
        top: 8px;
        left: 20px;
    }

    .site-header.is-scrolled {
        height: var(--mobile-header-height);
    }

    .site-header.is-scrolled .navbar-area {
        height: var(--mobile-header-height);
    }

    .site-header.is-scrolled .brand-logo {
        top: calc(100dvh - 76px);
        left: 50%;
        width: 184px;
        height: 58px;
        padding: 7px 17px;
        transform: translate3d(-50%, 0, 0);
    }

    .site-header.is-scrolled .brand-logo img {
        width: 140px;
        height: 43px;
    }
}

@media (max-width: 700px) {
    .brand-logo {
        top: 8px;
        left: 14px;
    }

    .site-header.is-scrolled .brand-logo {
        top: calc(100dvh - 69px);
        width: 166px;
        height: 52px;
        padding: 6px 14px;
    }

    .site-header.is-scrolled .brand-logo img {
        width: 128px;
        height: 38px;
    }
}

.site-header.is-scrolled {
    height: 72px;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.site-header.is-scrolled::before,
.site-header.is-scrolled::after {
    display: none !important;
    opacity: 0 !important;
}

.site-header.is-scrolled .navbar-area {
    height: 72px;
    background: transparent !important;
}

@media (min-width: 1121px) {
    .site-header.is-scrolled .center-navbar {
        top: 0;
        left: 50%;
        right: auto;
        width: min(860px, calc(100% - 28px));
        height: 72px;
        overflow: visible;
        background: var(--webversa-black);
        clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
        box-shadow:
            0 15px 34px rgba(0, 0, 0, 0.54),
            inset 0 -1px 0 rgba(249, 249, 249, 0.055);
        transform: translateX(-50%);
        pointer-events: auto;
    }

    .site-header.is-scrolled .center-navbar::before {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg,
                rgba(249, 249, 249, 0.025),
                transparent 55%);
        content: "";
        pointer-events: none;
    }

    .site-header.is-scrolled .nav-list {
        height: 72px;
        padding-top: 0;
    }

    .site-header.is-scrolled .nav-link {
        padding: 25px 0 21px;
        font-size: 17px;
    }

    .site-header.is-scrolled .nav-separator {
        height: 18px;
        margin-inline: 27px;
        opacity: 0.72;
    }
}

.site-header.is-scrolled .brand-logo,
.site-header.is-logo-docked .brand-logo {
    top: calc(100vh - 92px);
    top: calc(100dvh - 92px);
    left: 50%;
    width: 310px;
    height: 82px;
    padding: 10px 44px 8px;
    border: 0;
    background: var(--webversa-black);
    clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
    box-shadow:
        0 -15px 34px rgba(0, 0, 0, 0.54),
        inset 0 1px 0 rgba(249, 249, 249, 0.055);
    filter: none;
    transform: translate3d(-50%, 0, 0);
    pointer-events: auto;
    transition:
        top 1s cubic-bezier(0.16, 1, 0.3, 1),
        left 1s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 0.82s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.5s ease,
        box-shadow 0.65s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-scrolled .brand-logo::before,
.site-header.is-logo-docked .brand-logo::before {
    top: 0;
    left: 50%;
    width: 48%;
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 12px rgba(237, 32, 42, 0.72);
    opacity: 1;
    transform: translateX(-50%);
}

.site-header.is-scrolled .brand-logo img,
.site-header.is-logo-docked .brand-logo img {
    width: 176px;
    height: 58px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 0 10px rgba(249, 249, 249, 0.1));
}

@media (max-width: 1120px) {
    .site-header.is-scrolled {
        height: var(--mobile-header-height);
    }

    .site-header.is-scrolled .navbar-area {
        height: var(--mobile-header-height);
        background: transparent !important;
    }

    .site-header.is-scrolled .brand-logo,
    .site-header.is-logo-docked .brand-logo {
        top: calc(100vh - 80px);
        top: calc(100dvh - 80px);
        width: 230px;
        height: 70px;
        padding: 8px 34px 6px;
        clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    }

    .site-header.is-scrolled .brand-logo img,
    .site-header.is-logo-docked .brand-logo img {
        width: 150px;
        height: 48px;
    }
}

@media (max-width: 700px) {

    .site-header.is-scrolled .brand-logo,
    .site-header.is-logo-docked .brand-logo {
        top: calc(100vh - 72px);
        top: calc(100dvh - 72px);
        width: 196px;
        height: 62px;
        padding: 7px 28px 5px;
    }

    .site-header.is-scrolled .brand-logo img,
    .site-header.is-logo-docked .brand-logo img {
        width: 132px;
        height: 42px;
    }
}

@media (min-width: 1121px) {
    .center-navbar {
        width: min(900px, calc(100vw - 500px));
    }

    .nav-separator {
        margin-inline: clamp(13px, 1.45vw, 23px);
    }

    .site-header.is-scrolled .center-navbar {
        width: min(885px, calc(100% - 54px));
    }

    .site-header.is-scrolled .nav-separator {
        margin-inline: clamp(14px, 1.5vw, 22px);
    }
}

@media (min-width: 1121px) {
    .site-header.is-scrolled .center-navbar {
        isolation: isolate;
        border: 0;
        background: var(--webversa-white) !important;
        filter: drop-shadow(0 0 7px rgba(249, 249, 249, 0.22));
    }

    .site-header.is-scrolled .center-navbar::before {
        position: absolute;
        inset: 1px;
        z-index: 0;
        display: block;
        width: auto;
        height: auto;
        background: linear-gradient(180deg, #090909 0%, var(--webversa-black) 100%);
        clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
        content: "";
        pointer-events: none;
    }

    .site-header.is-scrolled .center-navbar .nav-list {
        position: relative;
        z-index: 1;
    }
}

.site-header.is-scrolled .brand-logo,
.site-header.is-logo-docked .brand-logo {
    isolation: isolate;
    border: 0 !important;
    background: var(--webversa-white) !important;
    filter: drop-shadow(0 0 7px rgba(249, 249, 249, 0.22));
}

.site-header.is-scrolled .brand-logo::after,
.site-header.is-logo-docked .brand-logo::after {
    position: absolute;
    inset: 1px;
    z-index: 0;
    background: var(--webversa-black);
    clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
    content: "";
    pointer-events: none;
}

.site-header.is-scrolled .brand-logo::before,
.site-header.is-logo-docked .brand-logo::before {
    z-index: 3;
}

.site-header.is-scrolled .brand-logo img,
.site-header.is-logo-docked .brand-logo img {
    position: relative;
    z-index: 2;
}

@media (max-width: 1120px) {

    .site-header.is-scrolled .brand-logo::after,
    .site-header.is-logo-docked .brand-logo::after {
        clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    }
}

.site-header {
    max-width: 100vw;
}

@media (max-width: 1240px) and (min-width: 1121px) {
    .center-navbar {
        width: 620px;
    }

    .nav-separator {
        margin-inline: 17px;
    }

    .brand-logo {
        left: 24px;
    }

    .connect-wrapper {
        right: 24px;
    }
}

@media (max-width: 1120px) {

    .site-header,
    .navbar-area {
        height: 78px;
    }

    .navbar-area {
        background: linear-gradient(180deg, rgba(0, 0, 0, .96), rgba(0, 0, 0, .72) 72%, transparent);
    }

    .brand-logo {
        top: 12px;
        left: 16px;
        z-index: 1202;
    }

    .brand-logo img {
        width: clamp(138px, 30vw, 170px);
        height: 52px;
    }

    .menu-toggle {
        top: 16px;
        right: 16px;
        z-index: 1203;
        display: block;
    }

    .center-navbar {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 1201;
        width: min(380px, 92vw);
        height: 100dvh;
        max-height: 100dvh;
        padding: 94px 24px 32px;
        overflow-y: auto;
        background: rgba(5, 5, 5, .98);
        border-left: 1px solid rgba(249, 249, 249, .13);
        box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
        clip-path: none;
        transform: translate3d(105%, 0, 0);
        overscroll-behavior: contain;
    }

    .center-navbar.show {
        transform: translate3d(0, 0, 0);
    }

    .nav-list {
        width: 100%;
        align-items: stretch;
    }

    .nav-link {
        min-height: 54px;
        display: flex;
        align-items: center;
        padding-inline: 8px;
    }

    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1199;
        background: rgba(0, 0, 0, .58);
        backdrop-filter: blur(3px);
    }
}

@media (max-width: 480px) {
    .center-navbar {
        width: 100%;
        padding-inline: 20px;
    }

    .brand-logo img {
        width: 142px;
    }
}

.btn-connect {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 126px;
    min-height: 44px;
    padding: 10px 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(249, 249, 249, .16) !important;
    color: var(--webversa-white) !important;
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red));
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(249, 249, 249, .08) !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
    transition: transform .32s ease, background .32s ease, box-shadow .32s ease !important;
}

.btn-connect:hover,
.btn-connect:focus-visible {
    background: var(--webversa-black) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(237, 32, 42, .48) !important;
    transform: translateY(-3px) !important;
}

.hero-section {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: clamp(650px, 100svh, 900px);
    padding: 155px 20px 170px;
    overflow: hidden;
    background: var(--background);
}

.hero-section::before,
.hero-section::after {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 0 88%);
    content: "";
    pointer-events: none;
}

.hero-section::before {
    z-index: -2;
    background:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.60)),
        url("../Images/Background.png") center / cover no-repeat;
}

.hero-section::after {
    z-index: -1;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.10) 68%, rgba(0, 0, 0, 0.45) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(980px, 100%);
    margin-inline: auto;
}

.code-window-shell {
    position: relative;
    width: min(640px, 100%);
    margin-inline: auto;
    z-index: 2;
}

.code-window {
    position: relative;
    width: 100%;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(249, 249, 249, 0.18);
    border-radius: 12px;
    background: rgba(16, 10, 18, 0.82);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.62), 0 0 28px rgba(237, 32, 42, 0.10);
    text-align: left;
    backdrop-filter: blur(13px);
}

.window-header {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 45px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(249, 249, 249, 0.10);
    background: rgba(249, 249, 249, 0.025);
}

.window-dots {
    display: flex;
    gap: 7px;
    margin-right: 6px;
}

.window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.window-dot:nth-child(1) {
    background: var(--webversa-red);
}

.window-dot:nth-child(2) {
    background: #febc2e;
}

.window-dot:nth-child(3) {
    background: #28c840;
}

.file-icon {
    font-size: 18px;
}

.file-name {
    color: #d7d7d7;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
}

.window-body {
    display: flex;
    align-items: center;
    min-height: 78px;
    padding: 21px 20px;
    font-family: Consolas, Monaco, monospace;
    font-size: clamp(15px, 2vw, 20px);
    line-height: 1.5;
}

.line-number {
    flex: 0 0 34px;
    color: #5f5f5f;
    user-select: none;
}

.code-text {
    color: #e9e9e9;
    overflow-wrap: anywhere;
}

.code-text::after {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--primary);
    content: "";
    animation: cursorBlink 0.8s steps(2, start) infinite;
}

.string {
    color: #e6b76b;
}

@keyframes cursorBlink {
    50% {
        opacity: 0;
    }
}

.slider-container {
    position: absolute;
    top: auto;
    left: -2%;
    bottom: 52px;
    z-index: 2;
    width: 104%;
    transform: rotate(-3deg);
    transform-origin: center;
}

.slider {
    display: flex;
    align-items: center;
    height: 80px;
    overflow: hidden;
    border-block: 1px solid rgba(249, 249, 249, 0.15);
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(5px);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.slide-track {
    display: flex;
    width: max-content;
    animation: sliderScroll 25s linear infinite;
    will-change: transform;
}

.slide-set {
    display: flex;
    flex-shrink: 0;
}

.slide {
    display: grid;
    place-items: center;
    flex: 0 0 112px;
    height: 78px;
}

.slide i {
    color: rgba(249, 249, 249, 0.72);
    font-size: 39px;
    transform: rotate(4deg);
    transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.slide i:hover {
    color: var(--webversa-red);
    text-shadow: 0 0 15px var(--webversa-red);
    transform: rotate(4deg) scale(1.18);
}

@keyframes sliderScroll {
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 700px) {
    .hero-section {
        min-height: max(680px, 100svh);
        padding: 110px 14px 145px;
    }

    .hero-content {
        width: min(100%, 760px);
        transform: translateY(12px);
    }

    .hero-section::before,
    .hero-section::after {
        clip-path: polygon(0 0, 100% 0, 100% 86%, 0 96%);
    }

    .hero-section::before {
        background-position: center center;
        background-size: cover;
    }

    .window-body {
        min-height: 82px;
        padding: 18px 14px;
        font-size: clamp(13px, 4vw, 17px);
    }

    .line-number {
        flex-basis: 27px;
    }

    .slider-container {
        top: auto;
        left: 0;
        bottom: 28px;
        width: 100%;
        transform: none;
    }

    .slider,
    .slide {
        height: 68px;
    }

    .slide {
        flex-basis: 86px;
    }

    .slide i {
        font-size: 31px;
        transform: none;
    }

    .slide i:hover {
        transform: scale(1.12);
    }
}

@media (max-width: 390px) {
    .code-window {
        border-radius: 9px;
    }

    .window-header {
        padding-inline: 12px;
    }

    .file-name {
        font-size: 12px;
    }

    .window-body {
        padding-inline: 11px;
    }

    .line-number {
        flex-basis: 24px;
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: max(640px, 100svh);
        padding-bottom: 132px;
    }

    .slider-container {
        bottom: 22px;
    }
}

.hero-section {
    min-height: clamp(620px, 100svh, 860px);
    padding: 132px 20px 112px;
}

.hero-content {
    transform: translateY(-8px);
}

.slider-container {
    bottom: 4px;
}

.code-window,
.slider-container,
.services-layout {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1120px) {
    .hero-section {
        padding-top: 108px;
        padding-bottom: 102px;
    }

    .slider-container {
        bottom: 0;
    }
}

@media (max-width: 700px) {
    .hero-section {
        min-height: max(620px, 100svh);
        padding: 102px 14px 86px;
    }

    .hero-content {
        transform: translateY(0);
    }

    .slider-container {
        bottom: 0;
    }
}

.hero-section {
    margin-bottom: 0;
}

.slider-container {
    bottom: 52px;
    z-index: 4;
}

.hero-section::before,
.hero-section::after {
    clip-path: polygon(0 0, 100% 0, 100% 74%, 0 90%);
}

@media (max-width: 1120px) {
    .slider-container {
        bottom: 38px;
    }
}

@media (max-width: 700px) {

    .hero-section::before,
    .hero-section::after {
        clip-path: polygon(0 0, 100% 0, 100% 87%, 0 97%);
    }

    .slider-container {
        bottom: 24px;
    }
}

@media (max-width: 480px) {
    .slider-container {
        bottom: 18px;
    }
}

.slider {
    contain: layout paint;
    transform: translateZ(0);
}

.slide-track {
    display: flex;
    width: max-content;
    min-width: max-content;
    animation: none !important;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

.slide-set {
    display: flex;
    flex: 0 0 auto;
    min-width: max-content;
}

.slide {
    flex: 0 0 clamp(92px, 7.3vw, 120px);
    transform: translateZ(0);
}

.slide i {
    position: relative;
    animation: technologyIconBreathe 4.8s ease-in-out infinite;
    animation-delay: calc(var(--technology-icon-index, 0) * -0.32s);
    transform: rotate(4deg) translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

.slide:nth-child(2n) i {
    animation-duration: 5.4s;
}

.slide:nth-child(3n) i {
    animation-duration: 4.2s;
}

.slide i:hover {
    animation-play-state: paused;
    transform: rotate(4deg) translate3d(0, -3px, 0) scale(1.18);
}

@keyframes technologyIconBreathe {

    0%,
    100% {
        opacity: 0.68;
        filter: drop-shadow(0 0 0 rgba(249, 249, 249, 0));
        transform: rotate(4deg) translate3d(0, 2px, 0) scale(0.98);
    }

    50% {
        opacity: 0.94;
        filter: drop-shadow(0 0 7px rgba(249, 249, 249, 0.10));
        transform: rotate(4deg) translate3d(0, -3px, 0) scale(1.025);
    }
}

@media (max-width: 700px) {
    .slide {
        flex-basis: 86px;
    }

    .slide i,
    .slide i:hover {
        transform-origin: center;
    }

    @keyframes technologyIconBreathe {

        0%,
        100% {
            opacity: 0.68;
            filter: none;
            transform: translate3d(0, 2px, 0) scale(0.98);
        }

        50% {
            opacity: 0.94;
            filter: drop-shadow(0 0 6px rgba(249, 249, 249, 0.10));
            transform: translate3d(0, -2px, 0) scale(1.025);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .slide-track {
        transform: translate3d(0, 0, 0) !important;
    }

    .slide i {
        animation: none !important;
    }
}

.slide-track {
    animation: none !important;
}

.hero-section {
    width: 100%;
}

.code-window {
    max-width: 100%;
}

@media (max-width: 700px) {
    .hero-section {
        min-height: max(620px, 100svh);
        padding: 104px 14px 126px;
    }

    .hero-content {
        width: 100%;
        transform: none;
    }

    .window-header {
        min-width: 0;
    }

    .file-name,
    .code-text {
        overflow-wrap: anywhere;
    }

    .slider-container {
        left: 0;
        bottom: 24px;
        width: 100%;
        transform: none;
    }

    .slider {
        width: 100%;
        border-inline: 0;
    }
}

@media (max-width: 420px) {
    .hero-section {
        padding-inline: 10px;
    }

    .window-body {
        align-items: flex-start;
        min-height: 94px;
        padding: 17px 11px;
        font-size: 13px;
    }

    .line-number {
        flex-basis: 22px;
    }
}

.hero-section {
    z-index: 10;
    overflow: visible !important;
}

.hero-section .slider-container {
    z-index: 30 !important;
}

.wv-screen-circuit .wv-circuit-main {
    stroke: var(--brand-red);
    stroke-width: 2.2;
    filter: drop-shadow(0 0 4px rgba(237, 32, 42, .28));
}

.wv-screen-circuit .wv-circuit-mid {
    stroke: var(--webversa-red);
    stroke-width: 1.2;
}

.wv-screen-circuit .wv-circuit-thin {
    stroke: rgba(249, 249, 249, .58);
    stroke-width: .72;
}

.wv-screen-circuit .wv-circuit-node {
    fill: var(--brand-red);
    filter: drop-shadow(0 0 5px rgba(237, 32, 42, .55));
}

.services-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
    align-items: center;
    column-gap: clamp(18px, 2.4vw, 36px);
    row-gap: 32px;
}

.services-copy h1 {
    margin-bottom: 20px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.05;
}

.description {
    margin-bottom: 38px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.highlight {
    color: var(--primary);
    font-size: 1.2em;
    font-weight: 700;
}

.cards-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.feature-box-wrapper {
    padding: 1px;
    background: var(--primary);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition: background 0.3s ease, transform 0.3s ease;
}

.feature-box-wrapper:hover {
    background: var(--webversa-white);
    transform: translateY(-4px);
}

.box-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    min-height: 108px;
    padding: 16px;
    background: var(--surface-soft);
    clip-path: inherit;
}

.icon-box {
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(249, 249, 249, 0.12);
    border-radius: 50%;
    background: var(--primary-dark);
    font-size: 19px;
}

.box-text h4 {
    margin-bottom: 4px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 17px;
    line-height: 1.25;
}

.box-text p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.services-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70%;
    min-width: 0;
    padding-block: 18px;
    overflow: visible;
    perspective: 1100px;
}

.flip-card {
    position: relative;
    flex: 0 0 auto;
    width: min(570px, 100%);
    height: auto;
    aspect-ratio: 11 / 7.2;
    overflow: visible;
    transform: translateZ(0);
}

.overlay-frame {
    position: absolute;
    top: 15%;
    left: 14%;
    z-index: 10;
    width: 73%;
    height: 80%;
    border-radius: 20px;
    object-fit: cover;
    pointer-events: none;
    transition: filter 0.4s ease, transform 0.4s ease;
}

.services-visual:hover .overlay-frame {
    filter: drop-shadow(0 0 25px rgba(237, 32, 42, 0.8));
    transform: scale(1.02);
}

.flip-card-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    text-align: center;
    transform-style: preserve-3d;
    transform-origin: center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: visible;
    background: transparent;
    clip-path: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-back {
    transform: rotateY(180deg);
}

.robot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    pointer-events: none;
}

.flip-back .robot-img {
    filter: contrast(1.08) saturate(1.2) hue-rotate(-8deg);
}

@media (max-width: 1120px) {
    .services-layout {
        grid-template-columns: 1fr;
    }

    .services-copy {
        max-width: 760px;
        margin-inline: auto;
    }

    .services-visual {
        order: -1;
    }
}

@media (max-width: 700px) {
    .services-section {
        padding: 45px 0 80px;
    }

    .services-layout {
        gap: 42px;
    }

    .services-visual {
        order: 0;
        padding-block: 6px 0;
    }

    .services-copy {
        order: 0;
    }

    .services-copy h1 {
        font-size: clamp(34px, 11vw, 48px);
    }

    .description {
        font-size: 14px;
        text-align: left;
    }

    .cards-row {
        grid-template-columns: 1fr;
    }

    .flip-card {
        width: min(430px, 100%);
        height: auto;
        aspect-ratio: 11 / 7.2;
    }

    .overlay-frame {
        top: 14%;
        left: 15%;
        width: 70%;
        height: 70%;
        border-radius: 18px;
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 390px) {
    .box-inner {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .services-visual {
        width: 100%;
        margin-inline: auto;
    }

    .flip-card {
        width: 100%;
        max-width: 390px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .flip-card:hover .flip-card-inner {
        transform: none;
    }

    .flip-card:focus .flip-card-inner,
    .flip-card:focus-within .flip-card-inner {
        transform: rotateY(180deg);
    }
}

.services-section {
    padding: 28px 0 96px;
}

.services-layout {
    align-items: center;
}

.services-visual {
    height: auto;
    padding-block: 0;
}

@media (max-width: 1120px) {
    .services-section {
        padding-top: 24px;
    }
}

@media (max-width: 700px) {
    .services-section {
        padding: 20px 0 72px;
    }
}

.services-visual,
.flip-card,
.flip-card-inner,
.flip-front,
.flip-back {
    overflow: visible;
}

.flip-front,
.flip-back {
    background: transparent;
    clip-path: none;
}

.robot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 700px) {
    .services-visual {
        padding-inline: 6px;
    }

    .flip-card {
        width: min(430px, 100%);
    }
}

.services-section {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    overflow: hidden;
}

.services-section>.page-container.services-layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(24px, 4vw, 72px);
}

@media (min-width: 1800px) {
    .services-section>.page-container.services-layout {
        padding-inline: 84px;
    }
}

@media (max-width: 700px) {
    .services-section>.page-container.services-layout {
        padding-inline: 16px;
    }
}

.services-section {
    padding-top: clamp(58px, 7vw, 92px);
}

.services-section {
    width: 100%;
    overflow: clip;
}

.services-layout {
    width: min(1180px, calc(100% - (var(--fluid-page-gutter) * 2)));
}

.services-copy,
.services-visual {
    min-width: 0;
}

@media (max-width: 980px) {
    .services-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .services-copy {
        order: 1;
    }

    .services-visual {
        order: 2;
        width: min(100%, 620px);
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .services-section {
        padding-inline: 0;
    }

    .services-layout {
        width: calc(100% - 28px);
        gap: 26px;
    }

    .cards-row {
        grid-template-columns: 1fr;
    }

    .feature-box-wrapper,
    .box-inner {
        width: 100%;
    }

    .flip-card {
        width: 100%;
        max-width: 440px;
        height: auto;
        aspect-ratio: 11 / 8;
    }
}

.wv-pro-services,
.wv-pro-services *,
.wv-pro-services *::before,
.wv-pro-services *::after {
    box-sizing: border-box;
}

.wv-pro-services * {
    margin: 0;
    padding: 0;
}

.wv-pro-services {
    font-family: "Inter", sans-serif;
    color: var(--webversa-white);
    position: relative;
    width: 100%;
    min-height: 310px;
    padding: 28px 18px 38px;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% -20%,
            rgba(237, 32, 42, 0.11),
            transparent 38%),
        radial-gradient(circle at 100% 30%,
            rgba(237, 32, 42, 0.04),
            transparent 25%),
        linear-gradient(180deg,
            #020202 0%,
            var(--webversa-black) 55%,
            #020202 100%);
}

.wv-pro-services::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(249, 249, 249, 0.012) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(249, 249, 249, 0.012) 1px,
            transparent 1px);

    background-size: 42px 42px;
    -webkit-mask-image: linear-gradient(to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent);
    mask-image: linear-gradient(to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent);
}

.wv-pro-services::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(900px, 80%);
    height: 1px;
    transform: translateX(-50%);

    background: linear-gradient(90deg,
            transparent,
            rgba(237, 32, 42, 0.65),
            transparent);

    box-shadow:
        0 0 18px rgba(237, 32, 42, 0.2);

    pointer-events: none;
}

.wv-services-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 12px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}

.wv-services-track {
    width: max-content;
    min-width: 100%;
    margin: 0 auto;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 124px;
    justify-content: center;
    align-items: start;
    column-gap: 8px;
}

.wv-service-card {
    position: relative;
    width: 144px;
    min-height: 245px;

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

    text-align: center;
    scroll-snap-align: center;
    cursor: pointer;

    animation:
        wvCardReveal 0.7s ease both;

    animation-delay: 0s;
}

.wv-service-card:nth-child(1) {
    animation-delay: 0.05s;
}

.wv-service-card:nth-child(2) {
    animation-delay: 0.10s;
}

.wv-service-card:nth-child(3) {
    animation-delay: 0.15s;
}

.wv-service-card:nth-child(4) {
    animation-delay: 0.20s;
}

.wv-service-card:nth-child(5) {
    animation-delay: 0.25s;
}

.wv-service-card:nth-child(6) {
    animation-delay: 0.30s;
}

.wv-service-card:nth-child(7) {
    animation-delay: 0.35s;
}

.wv-service-card:nth-child(8) {
    animation-delay: 0.40s;
}

.wv-service-card:nth-child(9) {
    animation-delay: 0.45s;
}

.wv-service-card:nth-child(10) {
    animation-delay: 0.50s;
}

.wv-service-card.wv-short-connector .wv-circuit-connector {
    height: 34px;
}

.wv-tech-box {
    position: relative;
    width: 104px;
    height: 104px;

    display: grid;
    place-items: center;

    isolation: isolate;
    cursor: pointer;

    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.4s ease;
}

.wv-tech-box::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -3;

    border: 1px solid rgba(237, 32, 42, 0.92);

    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);

    background:
        linear-gradient(135deg,
            rgba(237, 32, 42, 0.09),
            transparent 28%);

    box-shadow:
        0 0 4px rgba(237, 32, 42, 0.75),
        0 0 14px rgba(237, 32, 42, 0.18),
        inset 0 0 14px rgba(237, 32, 42, 0.08);

    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.wv-tech-box::after {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: -2;

    border: 1px solid rgba(237, 32, 42, 0.48);

    clip-path: polygon(9px 0,
            calc(100% - 9px) 0,
            100% 9px,
            100% calc(100% - 9px),
            calc(100% - 9px) 100%,
            9px 100%,
            0 calc(100% - 9px),
            0 9px);

    background:
        radial-gradient(circle at 50% 25%,
            rgba(237, 32, 42, 0.14),
            transparent 52%),
        radial-gradient(circle at center,
            rgba(237, 32, 42, 0.055),
            transparent 72%),
        linear-gradient(145deg,
            #120303 0%,
            #050505 42%,
            #010101 100%);

    box-shadow:
        inset 0 0 26px rgba(237, 32, 42, 0.12),
        0 0 10px rgba(237, 32, 42, 0.15);

    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.wv-service-card.wv-active .wv-tech-box::before {
    border-color: var(--webversa-red);

    box-shadow:
        0 0 8px rgba(237, 32, 42, 0.9),
        0 0 22px rgba(237, 32, 42, 0.34);
}

.wv-service-card.wv-active .wv-tech-box::after {
    background:
        radial-gradient(circle at 50% 35%,
            rgba(237, 32, 42, 0.25),
            transparent 58%),
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 45%,
            var(--webversa-red) 100%);

    border-color:
        rgba(237, 32, 42, 0.9);

    box-shadow:
        inset 0 0 30px rgba(237, 32, 42, 0.25),
        0 0 16px rgba(237, 32, 42, 0.5);
}

.wv-circuit-connector {
    position: relative;
    width: 38px;
    height: 88px;
    margin-top: -1px;

    transition:
        filter 0.35s ease;
}

.wv-circuit-main {
    position: absolute;
    top: 0;
    left: 50%;

    width: 1px;
    height: calc(100% - 5px);

    transform: translateX(-50%);

    background: linear-gradient(to bottom,
            rgba(249, 249, 249, 0.95),
            rgba(249, 249, 249, 0.8) 55%,
            rgba(249, 249, 249, 0.14));

    box-shadow:
        0 0 3px rgba(249, 249, 249, 0.2);
}

.wv-circuit-left {
    position: absolute;
    top: 16px;
    left: 7px;

    width: 12px;
    height: calc(100% - 30px);

    border-left:
        1px solid rgba(249, 249, 249, 0.76);

    border-bottom:
        1px solid rgba(249, 249, 249, 0.76);
}

.wv-circuit-left-inner {
    position: absolute;
    top: 27px;
    left: 12px;

    width: 7px;
    height: calc(100% - 43px);

    border-left:
        1px solid rgba(249, 249, 249, 0.42);
}

.wv-circuit-right {
    position: absolute;
    top: 24px;
    right: 7px;

    width: 12px;
    height: calc(100% - 38px);

    border-top:
        1px solid rgba(249, 249, 249, 0.68);

    border-right:
        1px solid rgba(249, 249, 249, 0.68);
}

.wv-circuit-middle {
    position: absolute;
    top: 47%;
    left: 12px;

    width: 8px;
    height: 19px;

    border-right:
        1px solid rgba(249, 249, 249, 0.5);

    border-bottom:
        1px solid rgba(249, 249, 249, 0.5);
}

.wv-terminal {
    position: absolute;
    bottom: 0;

    width: 1px;
    background:
        rgba(249, 249, 249, 0.72);
}

.wv-terminal-1 {
    left: 13px;
    height: 12px;
}

.wv-terminal-2 {
    left: 18px;
    height: 17px;
}

.wv-terminal-3 {
    left: 23px;
    height: 10px;
}

.wv-circuit-node {
    position: absolute;
    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: var(--webversa-white);

    box-shadow:
        0 0 4px rgba(249, 249, 249, 0.8);
}

.wv-circuit-node-top {
    top: 9px;
    left: 11px;
}

.wv-circuit-node-middle {
    top: 48%;
    right: 10px;
}

.wv-short-connector .wv-circuit-left {
    top: 9px;
    height: 23px;
}

.wv-short-connector .wv-circuit-left-inner {
    top: 14px;
    height: 18px;
}

.wv-short-connector .wv-circuit-right {
    top: 15px;
    height: 17px;
}

.wv-short-connector .wv-circuit-middle,
.wv-short-connector .wv-circuit-node-middle {
    display: none;
}

.wv-service-title {
    position: relative;
    width: 170px;
    margin: 2px 0 0;

    color: var(--webversa-white);
    font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.25px;
    white-space: nowrap;

    text-shadow:
        0 0 9px rgba(249, 249, 249, 0.1);

    transition:
        color 0.35s ease,
        transform 0.35s ease,
        text-shadow 0.35s ease;
}

.wv-service-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;

    width: 0;
    height: 1px;

    transform: translateX(-50%);

    background: linear-gradient(90deg,
            transparent,
            var(--webversa-red),
            transparent);

    box-shadow:
        0 0 7px rgba(237, 32, 42, 0.5);

    transition:
        width 0.35s ease;
}

.wv-service-card:focus-visible {
    outline: 1px solid rgba(237, 32, 42, 0.85);
    outline-offset: 6px;
}

.wv-service-card:hover .wv-tech-box {
    transform:
        translateY(-7px) scale(1.035);

    filter:
        drop-shadow(0 0 11px rgba(237, 32, 42, 0.3));
}

.wv-service-card:hover .wv-tech-box::before {
    border-color: var(--webversa-red);

    box-shadow:
        0 0 8px rgba(237, 32, 42, 0.95),
        0 0 24px rgba(237, 32, 42, 0.4),
        inset 0 0 18px rgba(237, 32, 42, 0.12);
}

.wv-service-card:hover .wv-tech-box::after {
    border-color:
        rgba(237, 32, 42, 0.72);

    box-shadow:
        inset 0 0 30px rgba(237, 32, 42, 0.2),
        0 0 17px rgba(237, 32, 42, 0.32);
}

.wv-service-card:hover .wv-circuit-connector {
    filter:
        drop-shadow(0 0 4px rgba(249, 249, 249, 0.25));
}

.wv-service-card:hover .wv-service-title {
    transform: translateY(2px);

    text-shadow:
        0 0 7px rgba(249, 249, 249, 0.32),
        0 0 14px rgba(237, 32, 42, 0.16);
}

.wv-service-card:hover .wv-service-title::after {
    width: 68px;
}

@keyframes wvCardReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wvRotateGear {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes wvSweepLight {
    from {
        transform:
            rotate(18deg) translateX(0);
    }

    to {
        transform:
            rotate(18deg) translateX(430%);
    }
}

.wv-services-viewport::-webkit-scrollbar {
    height: 5px;
}

.wv-services-viewport::-webkit-scrollbar-track {
    background: rgba(249, 249, 249, 0.025);
    border-radius: 20px;
}

.wv-services-viewport::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,
            var(--webversa-red),
            var(--webversa-red),
            var(--webversa-red));

    border-radius: 20px;
}

.wv-services-viewport::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg,
            var(--webversa-red),
            var(--webversa-red),
            var(--webversa-red));
}

@media screen and (max-width: 1550px) {
    .wv-services-track {
        justify-content: start;
        padding: 0 20px;
    }
}

@media screen and (max-width: 768px) {
    .wv-pro-services {
        min-height: 290px;
        padding:
            24px 8px 30px;
    }

    .wv-services-track {
        grid-auto-columns: 136px;

        column-gap: 4px;
        padding: 0 14px;
    }

    .wv-service-card {
        width: 136px;
        min-height: 225px;
    }

    .wv-tech-box {
        width: 94px;
        height: 94px;
    }

    .wv-circuit-connector {
        height: 78px;
    }

    .wv-service-card.wv-short-connector .wv-circuit-connector {
        height: 42px;
    }

    .wv-service-title {
        width: 150px;
        font-size: 15px;
    }
}

@media screen and (max-width: 480px) {
    .wv-services-track {
        grid-auto-columns: 130px;
        padding: 0 10px;
    }

    .wv-service-card {
        width: 130px;
    }

    .wv-tech-box {
        width: 90px;
        height: 90px;
    }

    .wv-service-title {
        width: 142px;
        font-size: 14px;
    }
}

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

    .wv-pro-services *,
    .wv-pro-services *::before,
    .wv-pro-services *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.wv-service-detail {
    position: relative;
    width: min(1380px, calc(100% - 24px));
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}

.wv-detail-rail {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;

    clip-path: polygon(22% 0,
            78% 0,
            100% 10%,
            100% 90%,
            78% 100%,
            22% 100%,
            0 90%,
            0 10%);

    background:
        linear-gradient(135deg,
            rgba(249, 249, 249, 0.075) 0 10%,
            transparent 10% 50%,
            rgba(249, 249, 249, 0.025) 50% 60%,
            transparent 60%),
        linear-gradient(45deg,
            rgba(249, 249, 249, 0.065) 0 10%,
            transparent 10% 50%,
            rgba(249, 249, 249, 0.02) 50% 60%,
            transparent 60%),
        linear-gradient(180deg, #131313 0%, #050505 52%, #101010 100%);

    background-size: 40px 40px, 40px 40px, auto;

    border: 1px solid rgba(237, 32, 42, 0.2);

    box-shadow:
        inset 0 0 34px rgba(237, 32, 42, 0.07),
        0 0 24px rgba(237, 32, 42, 0.05);
}

.wv-detail-rail::before,
.wv-detail-rail::after {
    content: "";
    position: absolute;
    top: 9%;
    bottom: 9%;
    width: 2px;

    background:
        linear-gradient(180deg,
            transparent,
            rgba(237, 32, 42, 0.95) 17%,
            rgba(237, 32, 42, 0.95) 83%,
            transparent);

    box-shadow:
        0 0 8px rgba(237, 32, 42, 0.8),
        0 0 18px rgba(237, 32, 42, 0.22);
}

.wv-detail-rail::before {
    left: 3px;
}

.wv-detail-rail::after {
    right: 3px;
}

.wv-detail-rail-inner {
    position: absolute;
    inset: 9px;
    pointer-events: none;

    clip-path: polygon(20% 0,
            80% 0,
            100% 9%,
            100% 91%,
            80% 100%,
            20% 100%,
            0 91%,
            0 9%);

    border: 1px solid rgba(249, 249, 249, 0.045);
}

.wv-detail-vertical-title {
    position: relative;
    z-index: 2;

    writing-mode: vertical-rl;
    transform: rotate(180deg);

    color: var(--webversa-white);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(23px, 2vw, 31px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.8px;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 14px rgba(249, 249, 249, 0.1);
}

.wv-detail-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 560px;
    overflow: hidden;
    isolation: isolate;
    background: transparent;

    filter:
        drop-shadow(0 0 8px rgba(237, 32, 42, 0.08));
}

.wv-detail-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.wv-detail-image {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: fill;
    object-position: center;

    opacity: 1;
    transform: none;
    filter: none;
}

.wv-detail-media::after {
    content: "";
    position: absolute;
    inset: 9% 8.5% 10%;
    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(circle at 77% 52%,
            rgba(237, 32, 42, 0.14),
            transparent 38%),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.83) 0%,
            rgba(0, 0, 0, 0.66) 42%,
            rgba(0, 0, 0, 0.58) 68%,
            rgba(0, 0, 0, 0.76) 100%);

    clip-path: polygon(4% 0,
            39% 0,
            43% 5%,
            57% 5%,
            61% 0,
            96% 0,
            100% 7%,
            100% 93%,
            96% 100%,
            61% 100%,
            57% 95%,
            43% 95%,
            39% 100%,
            4% 100%,
            0 93%,
            0 7%);
}

.wv-detail-content {
    position: relative;
    z-index: 3;

    width: min(900px, calc(100% - 230px));
    margin: 0 auto;
    padding: 135px 0 95px;
}

.wv-detail-eyebrow {
    margin: 0 0 6px;

    color: var(--webversa-red);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.15px;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.96),
        0 0 16px rgba(0, 0, 0, 0.92);
}

.wv-detail-heading {
    margin: 0;

    color: var(--webversa-white);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -1.2px;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.96),
        0 0 18px rgba(0, 0, 0, 0.95);
}

.wv-detail-copy-wide {
    margin-top: 20px;
}

.wv-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 14px;
}

.wv-detail-copy {
    display: flex;
    align-items: flex-start;
    margin: 0;

    color: rgba(249, 249, 249, 0.94);
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.15vw, 17px);
    font-weight: 500;
    line-height: 1.48;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.98),
        0 0 16px rgba(0, 0, 0, 0.98);
}

.wv-detail-dropcap {
    flex: 0 0 auto;
    margin-right: 2px;

    color: var(--webversa-red);
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.65em;
    font-weight: 600;
    line-height: 0.88;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.98),
        0 0 10px rgba(237, 32, 42, 0.16);
}

.wv-detail-button-wrap {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.wv-detail-button-wrap .btn-connect {
    min-width: 150px;
    min-height: 48px;
}

.wv-detail-button {
    position: relative;

    min-width: 142px;
    padding: 13px 24px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    overflow: hidden;

    color: var(--webversa-white);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    border: 1px solid rgba(237, 32, 42, 0.95);

    background:
        linear-gradient(180deg, var(--webversa-red) 0%, var(--webversa-red) 100%);

    clip-path: polygon(8px 0,
            calc(100% - 8px) 0,
            100% 8px,
            100% calc(100% - 4px),
            calc(100% - 4px) 100%,
            8px 100%,
            0 calc(100% - 8px),
            0 8px);

    box-shadow:
        0 0 0 2px #070707,
        0 0 0 3px rgba(249, 249, 249, 0.45),
        0 0 14px rgba(237, 32, 42, 0.18);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.wv-detail-button::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -35%;

    width: 24%;
    height: 340%;

    opacity: 0.28;
    background: var(--webversa-white);

    transform: rotate(24deg);
    transition: left 0.55s ease;
}

.wv-detail-button:hover,
.wv-detail-button:focus-visible {
    transform: translateY(-2px);
    outline: none;

    background:
        linear-gradient(180deg, var(--webversa-red) 0%, var(--webversa-red) 100%);

    box-shadow:
        0 0 0 2px #070707,
        0 0 0 3px rgba(249, 249, 249, 0.65),
        0 0 20px rgba(237, 32, 42, 0.3);
}

.wv-detail-button:hover::before,
.wv-detail-button:focus-visible::before {
    left: 125%;
}

.wv-detail-refresh .wv-detail-content {
    animation: wvDetailRefresh 0.45s ease both;
}

@keyframes wvDetailRefresh {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 1050px) {
    .wv-service-detail {
        width: min(960px, calc(100% - 24px));
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 20px;
    }

    .wv-detail-rail,
    .wv-detail-panel {
        min-height: 390px;
    }

    .wv-detail-content {
        width: min(620px, calc(100% - 150px));
        padding: 89px 0 63px;
    }

    .wv-detail-columns {
        gap: 25px;
    }
}

@media screen and (max-width: 768px) {
    .wv-service-detail {
        width: min(100%, calc(100% - 12px));
        margin-top: 22px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wv-detail-rail {
        min-height: 66px;

        clip-path: polygon(18px 0,
                calc(100% - 18px) 0,
                100% 18px,
                100% calc(100% - 18px),
                calc(100% - 18px) 100%,
                18px 100%,
                0 calc(100% - 18px),
                0 18px);

        background-size: 34px 34px, 34px 34px, auto;
    }

    .wv-detail-rail::before,
    .wv-detail-rail::after {
        top: 4px;
        bottom: 4px;
    }

    .wv-detail-vertical-title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    .wv-detail-panel {
        min-height: 470px;
    }

    .wv-detail-image {
        object-fit: cover;
    }

    .wv-detail-media::after {
        inset: 7% 5% 8%;
        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.66) 48%,
                rgba(0, 0, 0, 0.82) 100%);
    }

    .wv-detail-content {
        width: calc(100% - 88px);
        padding: 82px 0 66px;
    }

    .wv-detail-columns {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wv-detail-copy-wide {
        margin-top: 18px;
    }

    .wv-detail-button-wrap {
        margin-top: 24px;
    }
}

@media screen and (max-width: 480px) {
    .wv-detail-panel {
        min-height: 500px;
    }

    .wv-detail-content {
        width: calc(100% - 58px);
        padding: 74px 0 56px;
    }

    .wv-detail-heading {
        font-size: 27px;
        letter-spacing: -0.9px;
    }

    .wv-detail-copy {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media screen and (min-width: 769px) {
    .wv-services-track {
        grid-auto-columns: 124px;
        column-gap: 4px;
    }

    .wv-service-card {
        width: 124px;
        min-height: 205px;
    }

    .wv-tech-box {
        width: 84px;
        height: 84px;
    }

    .wv-circuit-connector {
        height: 68px;
    }

    .wv-service-card.wv-short-connector .wv-circuit-connector {
        height: 34px;
    }

    .wv-service-title {
        width: 138px;
        font-size: 14px;
    }

    .wv-service-detail {
        width: min(1380px, calc(100% - 24px));
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 28px;
    }

    .wv-detail-rail,
    .wv-detail-panel {
        min-height: 560px;
    }

    .wv-detail-content {
        width: min(900px, calc(100% - 230px));
        padding: 135px 0 95px;
    }
}

.wv-pro-services {
    width: 100%;
    min-height: 100vh;
    padding: 28px 0 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.wv-services-viewport {
    width: 100%;
    padding-inline: 0;
}

.wv-services-track {
    width: 100%;
    min-width: 100%;
    padding: 0 24px;
    justify-content: center;
}

.wv-service-detail {
    width: 100%;
    max-width: none;
    padding: 0 32px;
    margin: 34px auto 0;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 30px;
}

.wv-detail-rail {
    min-height: 620px;
}

.wv-detail-panel {
    min-height: 620px;
    overflow: hidden;


    clip-path: polygon(0 0,
            calc(100% - 72px) 0,
            100% 72px,
            100% calc(100% - 72px),
            calc(100% - 72px) 100%,
            0 100%);

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.90),
            rgba(0, 0, 0, 0.62) 55%,
            rgba(0, 0, 0, 0.80)),
        url("../Images/feature.webp") center / cover no-repeat;
}

.wv-detail-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    clip-path: inherit;

    border: 1px solid rgba(237, 32, 42, 0.72);

    background:
        linear-gradient(90deg, rgba(249, 249, 249, .62), transparent 18%) top / 100% 2px no-repeat,
        linear-gradient(90deg, transparent 72%, rgba(249, 249, 249, .62)) bottom / 100% 2px no-repeat,
        linear-gradient(180deg, rgba(249, 249, 249, .7), transparent 35%, rgba(249, 249, 249, .55)) left / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(249, 249, 249, .72), transparent 35%, rgba(249, 249, 249, .62)) right / 2px 100% no-repeat;

    box-shadow:
        inset 0 0 0 2px rgba(237, 32, 42, 0.06),
        inset 0 0 28px rgba(237, 32, 42, 0.10);
}

.wv-detail-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: inherit;
    overflow: hidden;
}

.wv-detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.wv-detail-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.72) 38%,
            rgba(0, 0, 0, 0.54) 70%,
            rgba(0, 0, 0, 0.76) 100%),
        linear-gradient(180deg,
            rgba(22, 0, 0, 0.30),
            transparent 45%,
            rgba(0, 0, 0, 0.72));
}

.wv-detail-content {
    z-index: 3;
    width: min(1040px, calc(100% - 180px));
    padding: 150px 0 110px;
}

@media screen and (max-width: 1100px) {
    .wv-service-detail {
        padding: 0 20px;
        grid-template-columns: 130px minmax(0, 1fr);
        gap: 20px;
    }

    .wv-detail-rail,
    .wv-detail-panel {
        min-height: 560px;
    }

    .wv-detail-content {
        width: min(820px, calc(100% - 120px));
        padding: 130px 0 90px;
    }
}

@media screen and (max-width: 768px) {
    .wv-pro-services {
        min-height: auto;
        padding-bottom: 42px;
    }

    .wv-services-track {
        width: max-content;
        min-width: 100%;
        justify-content: start;
        padding: 0 14px;
    }

    .wv-service-detail {
        padding: 0 8px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wv-detail-rail {
        min-height: 72px;
    }

    .wv-detail-panel {
        min-height: 560px;

        clip-path: polygon(0 0,
                calc(100% - 38px) 0,
                100% 38px,
                100% calc(100% - 38px),
                calc(100% - 38px) 100%,
                0 100%);
    }

    .wv-detail-content {
        width: calc(100% - 60px);
        padding: 100px 0 72px;
    }
}

@media screen and (max-width: 480px) {
    .wv-detail-panel {
        min-height: 590px;
    }

    .wv-detail-content {
        width: calc(100% - 42px);
        padding: 90px 0 62px;
    }
}

.wv-pro-services {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 24px 0 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 0%, rgba(237, 32, 42, 0.055), transparent 31%),
        radial-gradient(circle at 100% 72%, rgba(237, 32, 42, 0.07), transparent 28%),
        var(--webversa-black);
}

.wv-services-viewport {
    width: 100%;
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 12px;
}

.wv-services-track {
    width: min(1560px, 100%);
    min-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;

    grid-auto-columns: minmax(104px, 1fr);
    column-gap: 9px;
    justify-content: center;
}

.wv-service-card {
    width: 100%;
    min-width: 104px;
    min-height: 184px;
}

.wv-tech-box {
    width: 76px;
    height: 76px;
}

.wv-circuit-connector {
    width: 30px;
    height: 58px;
}

.wv-service-card.wv-short-connector .wv-circuit-connector {
    height: 30px;
}

.wv-service-title {
    width: 132px;
    font-size: 13px;
}

.wv-service-detail {
    width: min(1420px, calc(100% - 40px));
    max-width: none;
    margin: 22px auto 0;
    padding: 0;

    display: grid;
    grid-template-columns: 162px minmax(0, 1fr);
    gap: 42px;
    align-items: stretch;
}

.wv-detail-rail {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;

    clip-path: polygon(25% 0,
            75% 0,
            100% 10%,
            100% 90%,
            75% 100%,
            25% 100%,
            0 90%,
            0 10%);

    border: 0;

    background:
        linear-gradient(135deg, rgba(249, 249, 249, .07) 0 10%, transparent 10% 50%, rgba(249, 249, 249, .025) 50% 60%, transparent 60%),
        linear-gradient(45deg, rgba(249, 249, 249, .055) 0 10%, transparent 10% 50%, rgba(249, 249, 249, .02) 50% 60%, transparent 60%),
        linear-gradient(180deg, #151515, #050505 52%, #111111);

    background-size: 42px 42px, 42px 42px, auto;

    box-shadow:
        inset 0 0 34px rgba(237, 32, 42, .07),
        0 0 26px rgba(0, 0, 0, .85);
}

.wv-detail-rail::before,
.wv-detail-rail::after {
    content: "";
    position: absolute;
    top: 9%;
    bottom: 9%;
    width: 2px;
    z-index: 3;

    background:
        linear-gradient(180deg,
            transparent,
            var(--webversa-red) 18%,
            var(--webversa-red) 48%,
            var(--webversa-red) 82%,
            transparent);

    box-shadow:
        0 0 8px rgba(237, 32, 42, .75),
        0 0 18px rgba(237, 32, 42, .20);
}

.wv-detail-rail::before {
    left: 3px;
}

.wv-detail-rail::after {
    right: 3px;
}

.wv-detail-rail-inner {
    position: absolute;
    inset: 10px;
    z-index: 1;
    pointer-events: none;

    clip-path: polygon(22% 0,
            78% 0,
            100% 9%,
            100% 91%,
            78% 100%,
            22% 100%,
            0 91%,
            0 9%);

    border: 1px solid rgba(249, 249, 249, .055);
}

.wv-detail-rail-glow {
    position: absolute;
    left: 50%;
    width: 48%;
    height: 2px;
    transform: translateX(-50%);
    z-index: 4;
    background: linear-gradient(90deg, transparent, var(--webversa-red), transparent);
    box-shadow: 0 0 10px rgba(237, 32, 42, .55);
}

.wv-detail-rail-glow-top {
    top: 5px;
}

.wv-detail-rail-glow-bottom {
    bottom: 5px;
}

.wv-detail-vertical-title {
    z-index: 5;
    color: var(--webversa-white);
    font-size: clamp(25px, 2vw, 32px);
    font-weight: 500;
    letter-spacing: -1px;
}

.wv-detail-panel {
    --wv-panel-shape: polygon(4% 0,
            39% 0,
            42.5% 5%,
            57.5% 5%,
            61% 0,
            96% 0,
            100% 7%,
            100% 35%,
            97.8% 38.5%,
            97.8% 45%,
            100% 48%,
            100% 52%,
            97.8% 55%,
            97.8% 61.5%,
            100% 65%,
            100% 93%,
            96% 100%,
            61% 100%,
            57.5% 95%,
            42.5% 95%,
            39% 100%,
            4% 100%,
            0 93%,
            0 7%);

    position: relative;
    min-width: 0;
    min-height: 530px;
    overflow: hidden;
    isolation: isolate;

    clip-path: var(--wv-panel-shape);

    background:
        linear-gradient(145deg,
            #d8d8d8 0%,
            #737373 6%,
            #171717 13%,
            var(--webversa-red) 20%,
            #161616 29%,
            #090909 70%,
            var(--webversa-red) 82%,
            #1b1b1b 90%,
            #d2d2d2 100%);

    filter:
        drop-shadow(0 0 8px rgba(249, 249, 249, .13)) drop-shadow(0 0 18px rgba(237, 32, 42, .12));
}

.wv-detail-panel::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 0;
    pointer-events: none;

    clip-path: var(--wv-panel-shape);

    background:
        linear-gradient(145deg, #171717 0%, #050505 26%, #020202 73%, #161616 100%);
}

.wv-detail-panel::after {
    content: "";
    position: absolute;
    inset: 23px 25px;
    z-index: 2;
    pointer-events: none;

    clip-path: polygon(4% 0,
            39% 0,
            43% 5%,
            57% 5%,
            61% 0,
            96% 0,
            100% 7%,
            100% 93%,
            96% 100%,
            61% 100%,
            57% 95%,
            43% 95%,
            39% 100%,
            4% 100%,
            0 93%,
            0 7%);

    background:
        linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 12%, transparent 24%) top left / 50% 2px no-repeat,
        linear-gradient(225deg, var(--webversa-red), var(--webversa-red) 12%, transparent 24%) top right / 50% 2px no-repeat,
        linear-gradient(45deg, var(--webversa-red), var(--webversa-red) 12%, transparent 24%) bottom left / 50% 2px no-repeat,
        linear-gradient(315deg, var(--webversa-red), var(--webversa-red) 12%, transparent 24%) bottom right / 50% 2px no-repeat,
        linear-gradient(180deg, var(--webversa-red), transparent 22%, transparent 78%, var(--webversa-red)) left / 2px 100% no-repeat,
        linear-gradient(180deg, var(--webversa-red), transparent 22%, transparent 78%, var(--webversa-red)) right / 2px 100% no-repeat;

    filter: drop-shadow(0 0 4px rgba(237, 32, 42, .34));
}

.wv-detail-media {
    position: absolute;
    inset: 27px 29px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;

    clip-path: polygon(4% 0,
            39% 0,
            43% 5%,
            57% 5%,
            61% 0,
            96% 0,
            100% 7%,
            100% 93%,
            96% 100%,
            61% 100%,
            57% 95%,
            43% 95%,
            39% 100%,
            4% 100%,
            0 93%,
            0 7%);

    background:
        radial-gradient(circle at 75% 50%, rgba(237, 32, 42, .18), transparent 35%),
        radial-gradient(circle, rgba(237, 32, 42, .30) 0 1px, transparent 1.7px) 0 0 / 46px 46px,
        repeating-linear-gradient(90deg, transparent 0 68px, rgba(237, 32, 42, .16) 69px, transparent 70px),
        repeating-linear-gradient(0deg, transparent 0 60px, rgba(237, 32, 42, .10) 61px, transparent 62px),
        linear-gradient(180deg, #140000, #020202 50%, #080000);
}

.wv-detail-image {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    opacity: .92;
    transform: scale(1.01);
    filter: saturate(.88) contrast(1.05) brightness(.72);
}

.wv-detail-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .90) 0%,
            rgba(0, 0, 0, .73) 38%,
            rgba(0, 0, 0, .54) 67%,
            rgba(0, 0, 0, .76) 100%),
        linear-gradient(180deg,
            rgba(22, 0, 0, .25),
            transparent 42%,
            rgba(0, 0, 0, .70));
}

.wv-detail-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .24;

    background-image:
        radial-gradient(circle, rgba(237, 32, 42, .9) 0 1px, transparent 1.7px),
        linear-gradient(90deg, transparent 0 16%, rgba(237, 32, 42, .32) 16% 16.18%, transparent 16.18% 100%),
        linear-gradient(0deg, transparent 0 74%, rgba(237, 32, 42, .24) 74% 74.18%, transparent 74.18% 100%);

    background-size: 45px 45px, 100% 100%, 100% 100%;
}

.wv-detail-frame-decor {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.wv-panel-plate {
    position: absolute;
    left: 50%;
    width: 29%;
    height: 24px;
    transform: translateX(-50%);

    background:
        linear-gradient(180deg, var(--webversa-red), var(--webversa-red));

    clip-path: polygon(7% 0,
            93% 0,
            100% 28%,
            91% 100%,
            9% 100%,
            0 28%);

    box-shadow:
        inset 0 2px 0 rgba(237, 32, 42, .28),
        0 0 12px rgba(237, 32, 42, .26);
}

.wv-panel-plate-top {
    top: 0;
}

.wv-panel-plate-bottom {
    bottom: 0;
    transform: translateX(-50%) rotate(180deg);
}

.wv-panel-corner {
    position: absolute;
    width: 155px;
    height: 88px;

    background:
        linear-gradient(145deg, #202020, #070707 64%, var(--webversa-red));

    border: 1px solid rgba(237, 32, 42, .62);

    box-shadow:
        inset 0 0 18px rgba(237, 32, 42, .08),
        0 0 9px rgba(0, 0, 0, .9);
}

.wv-panel-corner-tl {
    top: 15px;
    left: 20px;
    clip-path: polygon(0 0, 100% 0, 77% 56%, 48% 56%, 34% 100%, 0 100%);
}

.wv-panel-corner-tr {
    top: 15px;
    right: 20px;
    transform: scaleX(-1);
    clip-path: polygon(0 0, 100% 0, 77% 56%, 48% 56%, 34% 100%, 0 100%);
}

.wv-panel-corner-bl {
    bottom: 15px;
    left: 20px;
    transform: scaleY(-1);
    clip-path: polygon(0 0, 100% 0, 77% 56%, 48% 56%, 34% 100%, 0 100%);
}

.wv-panel-corner-br {
    right: 20px;
    bottom: 15px;
    transform: scale(-1);
    clip-path: polygon(0 0, 100% 0, 77% 56%, 48% 56%, 34% 100%, 0 100%);
}

.wv-panel-wire {
    position: absolute;
    width: 210px;
    height: 68px;
    opacity: .9;
}

.wv-panel-wire::before,
.wv-panel-wire::after {
    content: "";
    position: absolute;
    background: rgba(225, 225, 225, .84);
    box-shadow: 0 0 4px rgba(249, 249, 249, .18);
}

.wv-panel-wire::before {
    width: 86%;
    height: 2px;
}

.wv-panel-wire::after {
    width: 2px;
    height: 77%;
}

.wv-panel-wire-tl {
    top: 4px;
    left: 6px;
}

.wv-panel-wire-tl::before {
    top: 0;
    left: 14%;
}

.wv-panel-wire-tl::after {
    top: 0;
    left: 0;
}

.wv-panel-wire-tr {
    top: 4px;
    right: 6px;
    transform: scaleX(-1);
}

.wv-panel-wire-tr::before {
    top: 0;
    left: 14%;
}

.wv-panel-wire-tr::after {
    top: 0;
    left: 0;
}

.wv-panel-wire-bl {
    bottom: 4px;
    left: 6px;
    transform: scaleY(-1);
}

.wv-panel-wire-bl::before {
    top: 0;
    left: 14%;
}

.wv-panel-wire-bl::after {
    top: 0;
    left: 0;
}

.wv-panel-wire-br {
    right: 6px;
    bottom: 4px;
    transform: scale(-1);
}

.wv-panel-wire-br::before {
    top: 0;
    left: 14%;
}

.wv-panel-wire-br::after {
    top: 0;
    left: 0;
}

.wv-panel-right-tech {
    position: absolute;
    top: 35%;
    right: 0;
    width: 35px;
    height: 30%;

    border-right: 2px solid rgba(225, 225, 225, .85);
    border-top: 2px solid rgba(225, 225, 225, .85);
    border-bottom: 2px solid rgba(225, 225, 225, .85);

    clip-path: polygon(45% 0,
            100% 0,
            100% 100%,
            45% 100%,
            45% 68%,
            0 60%,
            0 40%,
            45% 32%);

    filter: drop-shadow(0 0 4px rgba(249, 249, 249, .18));
}

.wv-panel-indicators {
    position: absolute;
    right: 82px;
    bottom: 8px;
    display: flex;
    gap: 8px;
}

.wv-panel-indicators i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--webversa-red);
    box-shadow: 0 0 7px rgba(237, 32, 42, .65);
}

.wv-detail-content {
    position: relative;
    z-index: 5;
    width: min(850px, calc(100% - 190px));
    margin: 0 auto;
    padding: 104px 0 72px;
}

.wv-detail-eyebrow {
    margin-bottom: 6px;
    font-size: clamp(13px, 1vw, 16px);
}

.wv-detail-heading {
    font-size: clamp(29px, 2.65vw, 43px);
}

.wv-detail-copy-wide {
    margin-top: 22px;
}

.wv-detail-columns {
    gap: 42px;
    margin-top: 17px;
}

.wv-detail-copy {
    font-size: clamp(13px, 1.02vw, 16px);
    line-height: 1.5;
}

.wv-detail-button-wrap {
    margin-top: 26px;
}

@media screen and (max-width: 1180px) {
    .wv-service-detail {
        width: min(1040px, calc(100% - 24px));
        grid-template-columns: 125px minmax(0, 1fr);
        gap: 22px;
    }

    .wv-detail-rail,
    .wv-detail-panel {
        min-height: 500px;
    }

    .wv-detail-content {
        width: min(730px, calc(100% - 130px));
        padding: 98px 0 68px;
    }

    .wv-panel-corner {
        width: 128px;
        height: 74px;
    }
}

@media screen and (max-width: 768px) {
    .wv-pro-services {
        min-height: auto;
        padding: 24px 0 34px;
    }

    .wv-services-track {
        width: max-content;
        min-width: 100%;
        padding: 0 12px;
        justify-content: start;
    }

    .wv-service-detail {
        width: calc(100% - 12px);
        margin-top: 20px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wv-detail-rail {
        min-height: 70px;
        clip-path: polygon(18px 0,
                calc(100% - 18px) 0,
                100% 18px,
                100% calc(100% - 18px),
                calc(100% - 18px) 100%,
                18px 100%,
                0 calc(100% - 18px),
                0 18px);
    }

    .wv-detail-vertical-title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 22px;
    }

    .wv-detail-panel {
        --wv-panel-shape: polygon(18px 0,
                calc(100% - 36px) 0,
                100% 36px,
                100% calc(100% - 36px),
                calc(100% - 36px) 100%,
                18px 100%,
                0 calc(100% - 18px),
                0 18px);

        min-height: 570px;
    }

    .wv-detail-panel::after {
        inset: 13px;
    }

    .wv-detail-media {
        inset: 16px;
        clip-path: polygon(14px 0,
                calc(100% - 28px) 0,
                100% 28px,
                100% calc(100% - 28px),
                calc(100% - 28px) 100%,
                14px 100%,
                0 calc(100% - 14px),
                0 14px);
    }

    .wv-detail-content {
        width: calc(100% - 64px);
        padding: 86px 0 62px;
    }

    .wv-detail-columns {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wv-panel-corner {
        width: 86px;
        height: 54px;
    }

    .wv-panel-wire {
        width: 115px;
        height: 45px;
    }

    .wv-panel-right-tech {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .wv-detail-panel {
        min-height: 610px;
    }

    .wv-detail-content {
        width: calc(100% - 44px);
        padding: 78px 0 54px;
    }

    .wv-detail-heading {
        font-size: 27px;
    }

    .wv-detail-copy {
        font-size: 13px;
        line-height: 1.55;
    }
}

.wv-pro-services {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 20px 0 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 76%, rgba(237, 32, 42, .10), transparent 27%),
        radial-gradient(circle at 100% 78%, rgba(237, 32, 42, .08), transparent 28%),
        var(--webversa-black);
}

.wv-services-viewport {
    width: 100%;
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 10px;
}

.wv-services-track {
    width: min(1500px, 100%);
    min-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
    grid-auto-columns: minmax(104px, 1fr);
    column-gap: 8px;
    justify-content: center;
}

.wv-service-card {
    width: 100%;
    min-width: 104px;
    min-height: 180px;
}

.wv-tech-box {
    width: 76px;
    height: 76px;
}

.wv-circuit-connector {
    width: 30px;
    height: 56px;
}

.wv-service-card.wv-short-connector .wv-circuit-connector {
    height: 29px;
}

.wv-service-title {
    width: 132px;
    font-size: 13px;
}

.wv-service-detail {
    width: min(1480px, calc(100% - 34px));
    max-width: none;
    margin: 20px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 42px;
    align-items: stretch;
}

.wv-detail-rail {
    position: relative;
    min-height: 540px;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    clip-path: polygon(24% 0,
            76% 0,
            100% 10%,
            100% 90%,
            76% 100%,
            24% 100%,
            0 90%,
            0 10%);
    background: #080808;
    box-shadow:
        inset 0 0 28px rgba(237, 32, 42, .10),
        0 0 24px rgba(0, 0, 0, .90);
}

.wv-detail-rail-inner {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border: 0;
    clip-path: inherit;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .18),
            rgba(0, 0, 0, .38)),
        url("../Images/Background.png") center / cover no-repeat;
}

.wv-detail-rail::before,
.wv-detail-rail::after {
    content: "";
    position: absolute;
    top: 9%;
    bottom: 9%;
    width: 2px;
    z-index: 3;
    background:
        linear-gradient(180deg,
            transparent,
            var(--webversa-red) 18%,
            var(--webversa-red) 50%,
            var(--webversa-red) 82%,
            transparent);
    box-shadow:
        0 0 8px rgba(237, 32, 42, .82),
        0 0 18px rgba(237, 32, 42, .22);
}

.wv-detail-rail::before {
    left: 3px;
}

.wv-detail-rail::after {
    right: 3px;
}

.wv-detail-rail-glow {
    position: absolute;
    left: 50%;
    z-index: 4;
    width: 48%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--webversa-red), transparent);
    box-shadow: 0 0 9px rgba(237, 32, 42, .55);
}

.wv-detail-rail-glow-top {
    top: 5px;
}

.wv-detail-rail-glow-bottom {
    bottom: 5px;
}

.wv-detail-vertical-title {
    position: relative;
    z-index: 5;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--webversa-white);
    font-size: clamp(25px, 2vw, 33px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow:
        0 3px 6px rgba(0, 0, 0, .98),
        0 0 15px rgba(0, 0, 0, .95);
}

.wv-detail-panel {
    --wv-detail-shape: polygon(4% 0,
            39% 0,
            43% 5%,
            57% 5%,
            61% 0,
            96% 0,
            100% 7%,
            100% 35%,
            97.8% 39%,
            97.8% 45%,
            100% 48%,
            100% 52%,
            97.8% 55%,
            97.8% 61%,
            100% 65%,
            100% 93%,
            96% 100%,
            61% 100%,
            57% 95%,
            43% 95%,
            39% 100%,
            4% 100%,
            0 93%,
            0 7%);

    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 540px;
    overflow: hidden;
    isolation: isolate;
    clip-path: var(--wv-detail-shape);
    background:
        linear-gradient(145deg,
            #d4d4d4 0%,
            #6f6f6f 5%,
            #151515 12%,
            var(--webversa-red) 20%,
            #0b0b0b 31%,
            #080808 70%,
            var(--webversa-red) 82%,
            #171717 91%,
            #d0d0d0 100%);
    filter:
        drop-shadow(0 0 8px rgba(249, 249, 249, .12)) drop-shadow(0 0 17px rgba(237, 32, 42, .11));
}

.wv-detail-panel::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 0;
    pointer-events: none;
    clip-path: var(--wv-detail-shape);
    background:
        linear-gradient(145deg, #171717, #040404 27%, #020202 72%, #171717);
}

.wv-detail-panel::after {
    content: "";
    position: absolute;
    inset: 23px 25px;
    z-index: 3;
    pointer-events: none;
    clip-path: polygon(4% 0,
            39% 0,
            43% 5%,
            57% 5%,
            61% 0,
            96% 0,
            100% 7%,
            100% 93%,
            96% 100%,
            61% 100%,
            57% 95%,
            43% 95%,
            39% 100%,
            4% 100%,
            0 93%,
            0 7%);
    background:
        linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 13%, transparent 26%) top left / 50% 2px no-repeat,
        linear-gradient(225deg, var(--webversa-red), var(--webversa-red) 13%, transparent 26%) top right / 50% 2px no-repeat,
        linear-gradient(45deg, var(--webversa-red), var(--webversa-red) 13%, transparent 26%) bottom left / 50% 2px no-repeat,
        linear-gradient(315deg, var(--webversa-red), var(--webversa-red) 13%, transparent 26%) bottom right / 50% 2px no-repeat,
        linear-gradient(180deg, var(--webversa-red), transparent 23%, transparent 77%, var(--webversa-red)) left / 2px 100% no-repeat,
        linear-gradient(180deg, var(--webversa-red), transparent 23%, transparent 77%, var(--webversa-red)) right / 2px 100% no-repeat;
    filter: drop-shadow(0 0 4px rgba(237, 32, 42, .32));
}

.wv-detail-media {
    position: absolute;
    inset: 27px 29px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    clip-path: polygon(4% 0,
            39% 0,
            43% 5%,
            57% 5%,
            61% 0,
            96% 0,
            100% 7%,
            100% 93%,
            96% 100%,
            61% 100%,
            57% 95%,
            43% 95%,
            39% 100%,
            4% 100%,
            0 93%,
            0 7%);


    background:
        linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .26)),
        url("../Images/feature.webp") center / cover no-repeat,
        #080000;
}

.wv-detail-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: cover;
    object-position: center;
    transform: none;
    filter: brightness(.82) contrast(1.06) saturate(.90);
}

.wv-detail-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .55) 40%,
            rgba(0, 0, 0, .35) 69%,
            rgba(0, 0, 0, .58) 100%),
        linear-gradient(180deg,
            rgba(20, 0, 0, .18),
            transparent 43%,
            rgba(0, 0, 0, .48));
}

.wv-detail-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .16;
    background-image:
        radial-gradient(circle, rgba(237, 32, 42, .86) 0 1px, transparent 1.7px),
        linear-gradient(90deg, transparent 0 17%, rgba(237, 32, 42, .30) 17% 17.2%, transparent 17.2% 100%),
        linear-gradient(0deg, transparent 0 73%, rgba(237, 32, 42, .22) 73% 73.2%, transparent 73.2% 100%);
    background-size: 46px 46px, 100% 100%, 100% 100%;
}

.wv-detail-frame-decor {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
}

.wv-panel-plate {
    position: absolute;
    left: 50%;
    width: 29%;
    height: 23px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--webversa-red), var(--webversa-red));
    clip-path: polygon(7% 0, 93% 0, 100% 28%, 91% 100%, 9% 100%, 0 28%);
    box-shadow:
        inset 0 2px 0 rgba(237, 32, 42, .24),
        0 0 11px rgba(237, 32, 42, .22);
}

.wv-panel-plate-top {
    top: 0;
}

.wv-panel-plate-bottom {
    bottom: 0;
    transform: translateX(-50%) rotate(180deg);
}

.wv-panel-corner {
    position: absolute;
    width: 150px;
    height: 86px;
    border: 1px solid rgba(237, 32, 42, .58);
    background: linear-gradient(145deg, #202020, #070707 65%, var(--webversa-red));
    box-shadow:
        inset 0 0 16px rgba(237, 32, 42, .08),
        0 0 8px rgba(0, 0, 0, .9);
}

.wv-panel-corner-tl {
    top: 15px;
    left: 20px;
    clip-path: polygon(0 0, 100% 0, 77% 56%, 48% 56%, 34% 100%, 0 100%);
}

.wv-panel-corner-tr {
    top: 15px;
    right: 20px;
    transform: scaleX(-1);
    clip-path: polygon(0 0, 100% 0, 77% 56%, 48% 56%, 34% 100%, 0 100%);
}

.wv-panel-corner-bl {
    bottom: 15px;
    left: 20px;
    transform: scaleY(-1);
    clip-path: polygon(0 0, 100% 0, 77% 56%, 48% 56%, 34% 100%, 0 100%);
}

.wv-panel-corner-br {
    right: 20px;
    bottom: 15px;
    transform: scale(-1);
    clip-path: polygon(0 0, 100% 0, 77% 56%, 48% 56%, 34% 100%, 0 100%);
}

.wv-panel-wire {
    position: absolute;
    width: 205px;
    height: 66px;
    opacity: .88;
}

.wv-panel-wire::before,
.wv-panel-wire::after {
    content: "";
    position: absolute;
    background: rgba(228, 228, 228, .84);
    box-shadow: 0 0 4px rgba(249, 249, 249, .16);
}

.wv-panel-wire::before {
    width: 86%;
    height: 2px;
}

.wv-panel-wire::after {
    width: 2px;
    height: 77%;
}

.wv-panel-wire-tl {
    top: 4px;
    left: 6px;
}

.wv-panel-wire-tl::before {
    top: 0;
    left: 14%;
}

.wv-panel-wire-tl::after {
    top: 0;
    left: 0;
}

.wv-panel-wire-tr {
    top: 4px;
    right: 6px;
    transform: scaleX(-1);
}

.wv-panel-wire-tr::before {
    top: 0;
    left: 14%;
}

.wv-panel-wire-tr::after {
    top: 0;
    left: 0;
}

.wv-panel-wire-bl {
    bottom: 4px;
    left: 6px;
    transform: scaleY(-1);
}

.wv-panel-wire-bl::before {
    top: 0;
    left: 14%;
}

.wv-panel-wire-bl::after {
    top: 0;
    left: 0;
}

.wv-panel-wire-br {
    right: 6px;
    bottom: 4px;
    transform: scale(-1);
}

.wv-panel-wire-br::before {
    top: 0;
    left: 14%;
}

.wv-panel-wire-br::after {
    top: 0;
    left: 0;
}

.wv-panel-right-tech {
    position: absolute;
    top: 35%;
    right: 0;
    width: 35px;
    height: 30%;
    border-top: 2px solid rgba(228, 228, 228, .85);
    border-right: 2px solid rgba(228, 228, 228, .85);
    border-bottom: 2px solid rgba(228, 228, 228, .85);
    clip-path: polygon(45% 0,
            100% 0,
            100% 100%,
            45% 100%,
            45% 68%,
            0 60%,
            0 40%,
            45% 32%);
    filter: drop-shadow(0 0 4px rgba(249, 249, 249, .18));
}

.wv-panel-indicators {
    position: absolute;
    right: 82px;
    bottom: 8px;
    display: flex;
    gap: 8px;
}

.wv-panel-indicators i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--webversa-red);
    box-shadow: 0 0 7px rgba(237, 32, 42, .62);
}

.wv-detail-content {
    position: relative;
    z-index: 6;
    width: min(860px, calc(100% - 190px));
    margin: 0 auto;
    padding: 105px 0 72px;
}

.wv-detail-eyebrow {
    margin-bottom: 6px;
    font-size: clamp(13px, 1vw, 16px);
}

.wv-detail-heading {
    font-size: clamp(29px, 2.65vw, 43px);
}

.wv-detail-copy-wide {
    margin-top: 22px;
}

.wv-detail-columns {
    gap: 42px;
    margin-top: 17px;
}

.wv-detail-copy {
    font-size: clamp(13px, 1.02vw, 16px);
    line-height: 1.5;
}

.wv-detail-button-wrap {
    margin-top: 26px;
}

@media screen and (max-width: 1180px) {
    .wv-service-detail {
        width: min(1050px, calc(100% - 24px));
        grid-template-columns: 126px minmax(0, 1fr);
        gap: 22px;
    }

    .wv-detail-rail,
    .wv-detail-panel {
        min-height: 500px;
    }

    .wv-detail-content {
        width: min(730px, calc(100% - 130px));
        padding: 98px 0 68px;
    }

    .wv-panel-corner {
        width: 126px;
        height: 74px;
    }
}

@media screen and (max-width: 768px) {
    .wv-pro-services {
        min-height: auto;
        padding: 22px 0 34px;
    }

    .wv-services-track {
        width: max-content;
        min-width: 100%;
        padding: 0 12px;
        justify-content: start;
    }

    .wv-service-detail {
        width: calc(100% - 12px);
        margin-top: 18px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wv-detail-rail {
        min-height: 72px;
        clip-path: polygon(18px 0,
                calc(100% - 18px) 0,
                100% 18px,
                100% calc(100% - 18px),
                calc(100% - 18px) 100%,
                18px 100%,
                0 calc(100% - 18px),
                0 18px);
    }

    .wv-detail-vertical-title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 22px;
    }

    .wv-detail-panel {
        --wv-detail-shape: polygon(18px 0,
                calc(100% - 36px) 0,
                100% 36px,
                100% calc(100% - 36px),
                calc(100% - 36px) 100%,
                18px 100%,
                0 calc(100% - 18px),
                0 18px);
        min-height: 570px;
    }

    .wv-detail-panel::after {
        inset: 13px;
    }

    .wv-detail-media {
        inset: 16px;
        clip-path: polygon(14px 0,
                calc(100% - 28px) 0,
                100% 28px,
                100% calc(100% - 28px),
                calc(100% - 28px) 100%,
                14px 100%,
                0 calc(100% - 14px),
                0 14px);
    }

    .wv-detail-content {
        width: calc(100% - 64px);
        padding: 86px 0 62px;
    }

    .wv-detail-columns {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wv-panel-corner {
        width: 86px;
        height: 54px;
    }

    .wv-panel-wire {
        width: 115px;
        height: 45px;
    }

    .wv-panel-right-tech {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .wv-detail-panel {
        min-height: 610px;
    }

    .wv-detail-content {
        width: calc(100% - 44px);
        padding: 78px 0 54px;
    }

    .wv-detail-heading {
        font-size: 27px;
    }

    .wv-detail-copy {
        font-size: 13px;
        line-height: 1.55;
    }
}

.wv-pro-services {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
}

.wv-detail-rail {
    position: relative;
    overflow: hidden;
    background: #050505;
}

.wv-detail-rail-inner {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: 0;
    clip-path: inherit;

    background:
        linear-gradient(rgba(0, 0, 0, 0.20),
            rgba(0, 0, 0, 0.32)),
        url("../Images/Background.png") center / cover no-repeat;
}

.wv-detail-vertical-title {
    position: relative;
    z-index: 2;
}

.wv-detail-rail-glow,
.wv-detail-rail::before,
.wv-detail-rail::after {
    display: none !important;
}

.wv-detail-panel {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    isolation: isolate;

    clip-path: none !important;
    background: transparent !important;
    filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.wv-detail-panel::before,
.wv-detail-panel::after {
    display: none !important;
    content: none !important;
}

.wv-detail-frame-decor,
.wv-panel-plate,
.wv-panel-corner,
.wv-panel-wire,
.wv-panel-right-tech,
.wv-panel-indicators {
    display: none !important;
}

.wv-detail-media {
    position: absolute;
    inset: 0 !important;
    z-index: 0;
    overflow: hidden;

    clip-path: none !important;
    background:
        url("../Images/feature.webp") center / 100% 100% no-repeat,
        var(--webversa-black) !important;
}

.wv-detail-media::after {
    display: none !important;
    content: none !important;
}

.wv-detail-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.28) 50%,
            rgba(0, 0, 0, 0.38) 100%) !important;
}

.wv-detail-image {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;
    display: block !important;

    object-fit: fill !important;
    object-position: center;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
}

.wv-detail-content {
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 768px) {
    .wv-detail-panel {
        min-height: 560px;
    }

    .wv-detail-media {
        inset: 0 !important;
    }

    .wv-detail-image {
        object-fit: cover !important;
    }
}

@media screen and (max-width: 480px) {
    .wv-detail-panel {
        min-height: 600px;
    }
}

.wv-service-card.wv-active .wv-tech-box {
    background:
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 48%,
            var(--webversa-red) 100%);

    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);

    box-shadow:
        0 0 0 1px rgba(237, 32, 42, 0.88),
        0 0 12px rgba(237, 32, 42, 0.28),
        inset 0 0 20px rgba(237, 32, 42, 0.10);
}

.wv-service-card.wv-active .wv-tech-box::before {
    inset: 0;
    border: 1px solid rgba(237, 32, 42, 0.96);

    background:
        linear-gradient(145deg,
            rgba(237, 32, 42, 0.11),
            transparent 34%);

    box-shadow:
        0 0 7px rgba(237, 32, 42, 0.82),
        0 0 17px rgba(237, 32, 42, 0.23),
        inset 0 0 14px rgba(237, 32, 42, 0.10);
}

.wv-service-card.wv-active .wv-tech-box::after {
    inset: 7px;

    border: 1px solid rgba(237, 32, 42, 0.34);

    background:
        linear-gradient(145deg,
            rgba(237, 32, 42, 0.98) 0%,
            rgba(237, 32, 42, 0.98) 55%,
            rgba(237, 32, 42, 0.98) 100%);

    box-shadow:
        inset 0 0 22px rgba(237, 32, 42, 0.12);
}

.wv-detail-rail {
    padding: 3px;

    background:
        linear-gradient(180deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 48%,
            var(--webversa-red) 100%) !important;

    box-shadow:
        0 0 0 1px rgba(237, 32, 42, 0.72),
        0 0 13px rgba(237, 32, 42, 0.18),
        inset 0 0 11px rgba(237, 32, 42, 0.14);
}

.wv-detail-rail-inner {
    inset: 3px !important;

    clip-path: polygon(24% 0,
            76% 0,
            100% 10%,
            100% 90%,
            76% 100%,
            24% 100%,
            0 90%,
            0 10%) !important;

    border: 1px solid rgba(237, 32, 42, 0.16) !important;

    background:
        linear-gradient(rgba(0, 0, 0, 0.16),
            rgba(0, 0, 0, 0.28)),
        url("../Images/Background.png") center / cover no-repeat !important;
}

.wv-detail-rail::before,
.wv-detail-rail::after {
    display: block !important;
    content: "";

    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 2px;
    z-index: 4;

    background:
        linear-gradient(180deg,
            transparent,
            var(--webversa-red) 17%,
            var(--webversa-red) 50%,
            var(--webversa-red) 83%,
            transparent) !important;

    border: 0 !important;

    box-shadow:
        0 0 7px rgba(237, 32, 42, 0.62),
        0 0 14px rgba(237, 32, 42, 0.17) !important;
}

.wv-detail-rail::before {
    left: 4px;
    right: auto;
}

.wv-detail-rail::after {
    right: 4px;
    left: auto;
}

@media screen and (max-width: 768px) {
    .wv-detail-rail {
        padding: 2px;
    }

    .wv-detail-rail-inner {
        inset: 2px !important;

        clip-path: polygon(18px 0,
                calc(100% - 18px) 0,
                100% 18px,
                100% calc(100% - 18px),
                calc(100% - 18px) 100%,
                18px 100%,
                0 calc(100% - 18px),
                0 18px) !important;
    }

    .wv-detail-rail::before,
    .wv-detail-rail::after {
        top: 5px;
        bottom: 5px;
    }
}

@media screen and (min-width: 769px) {
    .wv-service-detail {
        grid-template-columns: 152px minmax(0, 1fr);
        gap: 42px;
    }

    .wv-detail-rail {
        position: relative;
        width: 152px;
        min-height: 540px;
        padding: 0 !important;
        overflow: hidden;
        isolation: isolate;


        clip-path: polygon(0 0,
                57% 0,
                100% 20%,
                100% 100%,
                40% 100%,
                0 83%);

        border: 0 !important;
        background: #050505 !important;

        box-shadow:
            0 0 20px rgba(0, 0, 0, 0.92),
            inset 0 0 18px rgba(237, 32, 42, 0.025) !important;
    }

    .wv-detail-rail-inner {
        position: absolute;
        inset: 0 !important;
        z-index: 0;

        clip-path: inherit !important;
        border: 0 !important;

        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.04),
                rgba(0, 0, 0, 0.12)),
            url("../Images/Background.png") center / cover no-repeat !important;
    }

    .wv-detail-rail::before {
        display: block !important;
        content: "";
        position: absolute;
        top: 20%;
        bottom: 17%;
        left: 0;
        right: auto;

        width: 3px;
        z-index: 4;

        background:
            linear-gradient(180deg,
                var(--webversa-red) 0%,
                var(--webversa-red) 48%,
                var(--webversa-red) 100%) !important;

        box-shadow:
            0 0 5px rgba(237, 32, 42, 0.34) !important;
    }

    .wv-detail-rail::after {
        display: block !important;
        content: "";
        position: absolute;
        left: -1px;
        bottom: 17%;

        width: 108px;
        height: 3px;
        z-index: 4;

        transform-origin: left center;
        transform: rotate(56deg);

        background:
            linear-gradient(90deg,
                var(--webversa-red),
                var(--webversa-red) 55%,
                var(--webversa-red)) !important;

        box-shadow:
            0 0 5px rgba(237, 32, 42, 0.25) !important;
    }

    .wv-detail-rail-glow {
        display: none !important;
    }

    .wv-detail-vertical-title {
        position: relative;
        z-index: 6;

        writing-mode: vertical-rl;
        transform: rotate(180deg);

        color: var(--webversa-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 27px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.7px;

        text-shadow:
            0 2px 5px rgba(0, 0, 0, 0.98),
            0 0 10px rgba(0, 0, 0, 0.98);
    }
}

@media screen and (max-width: 768px) {
    .wv-detail-rail {
        width: 100%;
        min-height: 72px;
        padding: 2px !important;

        clip-path: polygon(18px 0,
                calc(100% - 18px) 0,
                100% 18px,
                100% calc(100% - 18px),
                calc(100% - 18px) 100%,
                18px 100%,
                0 calc(100% - 18px),
                0 18px);

        background:
            linear-gradient(180deg, var(--webversa-red), var(--webversa-red)) !important;
    }

    .wv-detail-rail-inner {
        inset: 2px !important;
        clip-path: inherit !important;

        background:
            linear-gradient(rgba(0, 0, 0, 0.10),
                rgba(0, 0, 0, 0.20)),
            url("../Images/Background.png") center / cover no-repeat !important;
    }

    .wv-detail-rail::before,
    .wv-detail-rail::after,
    .wv-detail-rail-glow {
        display: none !important;
    }

    .wv-detail-vertical-title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 22px;
    }
}

:where(.wv-pro-services) {
    --wv-maroon-light: var(--webversa-red);
    --wv-maroon-main: var(--webversa-red);
    --wv-maroon-dark: var(--webversa-red);
    --wv-maroon-edge: var(--webversa-red);
}

.wv-service-card.wv-active .wv-tech-box {
    overflow: hidden;

    background:
        linear-gradient(145deg,
            var(--wv-maroon-light) 0%,
            var(--wv-maroon-main) 48%,
            var(--wv-maroon-dark) 100%) !important;

    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);

    box-shadow:
        0 0 0 1px rgba(237, 32, 42, .88),
        0 0 12px rgba(237, 32, 42, .30),
        inset 0 1px 0 rgba(237, 32, 42, .14) !important;
}

.wv-service-card.wv-active .wv-tech-box::before {
    inset: 0 !important;

    border: 1px solid rgba(237, 32, 42, .96) !important;

    background:
        linear-gradient(145deg,
            rgba(237, 32, 42, .10),
            transparent 38%) !important;

    box-shadow:
        0 0 5px rgba(237, 32, 42, .65),
        inset 0 0 12px rgba(237, 32, 42, .06) !important;
}

.wv-service-card.wv-active .wv-tech-box::after {
    inset: 7px !important;

    border: 1px solid rgba(237, 32, 42, .18) !important;

    background:
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 52%,
            var(--webversa-red) 100%) !important;

    box-shadow:
        inset 0 0 19px rgba(237, 32, 42, .28) !important;
}

.wv-detail-button {
    border-color: rgba(237, 32, 42, .96) !important;

    background:
        linear-gradient(180deg,
            var(--wv-maroon-light) 0%,
            var(--wv-maroon-main) 52%,
            var(--wv-maroon-dark) 100%) !important;

    box-shadow:
        0 0 0 2px #070707,
        0 0 0 3px rgba(237, 32, 42, .80),
        0 0 14px rgba(237, 32, 42, .28) !important;
}

.wv-detail-button:hover,
.wv-detail-button:focus-visible {
    background:
        linear-gradient(180deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 52%,
            var(--webversa-red) 100%) !important;

    box-shadow:
        0 0 0 2px #070707,
        0 0 0 3px rgba(237, 32, 42, .92),
        0 0 20px rgba(237, 32, 42, .34) !important;
}

@media screen and (min-width: 769px) {
    .wv-detail-rail {
        width: 152px;
        min-height: 540px;
        padding: 0 !important;
        overflow: hidden;

        clip-path: polygon(0 0,
                57% 0,
                100% 20%,
                100% 100%,
                40% 100%,
                0 83%) !important;

        border: 0 !important;
        background: #050505 !important;

        box-shadow:
            0 0 20px rgba(0, 0, 0, .92),
            inset 0 0 16px rgba(237, 32, 42, .06) !important;
    }

    .wv-detail-rail-inner {
        inset: 0 !important;
        border: 0 !important;
        clip-path: inherit !important;

        background:
            linear-gradient(rgba(0, 0, 0, .03),
                rgba(0, 0, 0, .12)),
            url("../Images/Background.png") center / cover no-repeat !important;
    }

    .wv-detail-rail::before {
        display: block !important;
        content: "";
        position: absolute;
        top: 20%;
        bottom: 17%;
        left: 0;
        right: auto;
        width: 4px;
        z-index: 5;

        background:
            linear-gradient(180deg,
                var(--webversa-red) 0%,
                var(--webversa-red) 48%,
                var(--webversa-red) 100%) !important;

        box-shadow:
            0 0 4px rgba(237, 32, 42, .36) !important;
    }

    .wv-detail-rail::after {
        display: block !important;
        content: "";
        position: absolute;
        left: -1px;
        bottom: 17%;
        width: 108px;
        height: 4px;
        z-index: 5;

        transform-origin: left center;
        transform: rotate(56deg);

        background:
            linear-gradient(90deg,
                var(--webversa-red) 0%,
                var(--webversa-red) 54%,
                var(--webversa-red) 100%) !important;

        box-shadow:
            0 0 4px rgba(237, 32, 42, .30) !important;
    }

    .wv-detail-rail-glow {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .wv-detail-rail {
        padding: 2px !important;

        background:
            linear-gradient(180deg,
                var(--wv-maroon-main),
                var(--wv-maroon-dark)) !important;
    }

    .wv-detail-rail-inner {
        inset: 2px !important;
    }

    .wv-detail-rail::before,
    .wv-detail-rail::after,
    .wv-detail-rail-glow {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    .wv-detail-rail {
        position: relative;
        width: 152px;
        min-height: 540px;
        padding: 0 !important;
        overflow: hidden;
        isolation: isolate;

        clip-path: polygon(0 0,
                57% 0,
                100% 20%,
                100% 100%,
                40% 100%,
                0 83%) !important;

        border: 0 !important;
        background: #060606 !important;
        box-shadow:
            0 0 18px rgba(0, 0, 0, 0.90),
            inset 0 0 14px rgba(237, 32, 42, 0.05) !important;
    }

    .wv-detail-rail-inner {
        position: absolute;
        inset: 0 !important;
        z-index: 0;
        clip-path: inherit !important;
        border: 0 !important;

        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.03),
                rgba(0, 0, 0, 0.12)),
            url("../Images/Background.png") center / cover no-repeat !important;
    }

    .wv-detail-rail::before {
        display: block !important;
        content: "";
        position: absolute;
        left: 0;
        bottom: 17%;
        width: 4px;
        height: 63%;
        z-index: 5;

        background:
            linear-gradient(180deg,
                var(--webversa-red) 0%,
                var(--webversa-red) 48%,
                var(--webversa-red) 100%) !important;

        box-shadow:
            0 0 4px rgba(237, 32, 42, 0.24) !important;
    }

    .wv-detail-rail::after {
        display: block !important;
        content: "";
        position: absolute;
        right: 0;
        top: 19.5%;
        width: 4px;
        height: 80.5%;
        z-index: 5;

        background:
            linear-gradient(180deg,
                var(--webversa-red) 0%,
                var(--webversa-red) 48%,
                var(--webversa-red) 100%) !important;

        box-shadow:
            0 0 4px rgba(237, 32, 42, 0.24) !important;

        transform: none !important;
    }

    .wv-detail-rail-inner::before {
        display: block !important;
        content: "";
        position: absolute;
        left: -2px;
        bottom: 16.5%;
        width: 96px;
        height: 4px;
        z-index: 6;

        transform-origin: left center;
        transform: rotate(56deg);

        background:
            linear-gradient(90deg,
                var(--webversa-red) 0%,
                var(--webversa-red) 52%,
                var(--webversa-red) 100%);

        box-shadow:
            0 0 4px rgba(237, 32, 42, 0.24);
    }

    .wv-detail-rail-inner::after,
    .wv-detail-rail-glow {
        display: none !important;
        content: none !important;
    }

    .wv-detail-vertical-title {
        position: relative;
        z-index: 7;

        writing-mode: vertical-rl;
        transform: rotate(180deg);

        color: var(--webversa-white);
        font-family: "Space Grotesk", sans-serif;
        font-size: 27px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.7px;

        text-shadow:
            0 2px 5px rgba(0, 0, 0, 0.98),
            0 0 10px rgba(0, 0, 0, 0.98);
    }
}

@media screen and (max-width: 768px) {
    .wv-detail-rail {
        padding: 2px !important;
        background:
            linear-gradient(180deg,
                var(--webversa-red),
                var(--webversa-red)) !important;
    }

    .wv-detail-rail-inner {
        inset: 2px !important;
    }

    .wv-detail-rail::before,
    .wv-detail-rail::after,
    .wv-detail-rail-inner::before,
    .wv-detail-rail-inner::after,
    .wv-detail-rail-glow {
        display: none !important;
        content: none !important;
    }
}

@media screen and (min-width: 769px) {
    .wv-service-detail {
        grid-template-columns: 152px minmax(0, 1fr) !important;
        gap: 42px !important;
    }

    .wv-detail-rail {
        position: relative !important;
        width: 152px !important;
        min-height: 540px !important;
        padding: 0 !important;
        overflow: hidden !important;
        isolation: isolate !important;

        clip-path: polygon(0 0,
                57% 0,
                100% 20%,
                100% 100%,
                40% 100%,
                0 83%) !important;

        border: 0 !important;
        background: #050505 !important;

        box-shadow:
            0 0 18px rgba(0, 0, 0, 0.92),
            inset 0 0 16px rgba(237, 32, 42, 0.045) !important;
    }

    .wv-detail-rail-inner {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;

        clip-path: inherit !important;
        border: 0 !important;

        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, 0.025),
                rgba(0, 0, 0, 0.10)),
            url("../Images/Background.png") center / cover no-repeat !important;
    }

    .wv-detail-rail::before,
    .wv-detail-rail::after,
    .wv-detail-rail-inner::before,
    .wv-detail-rail-inner::after,
    .wv-detail-rail-glow {
        display: none !important;
        content: none !important;
    }

    .wv-heading-border-svg {
        position: absolute;
        inset: 0;
        z-index: 6;

        width: 100%;
        height: 100%;

        display: block;
        overflow: visible;
        pointer-events: none;
    }

    .wv-heading-border-line {
        fill: none;
        stroke: var(--webversa-red);
        stroke-width: 4;
        stroke-linecap: square;
        stroke-linejoin: miter;

        filter:
            drop-shadow(0 0 2px rgba(237, 32, 42, 0.26));
    }

    .wv-detail-vertical-title {
        position: relative !important;
        z-index: 7 !important;

        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;

        color: var(--webversa-white) !important;
        font-family: "Space Grotesk", sans-serif !important;
        font-size: 27px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: -0.7px !important;

        text-shadow:
            0 2px 5px rgba(0, 0, 0, 0.98),
            0 0 10px rgba(0, 0, 0, 0.98) !important;
    }
}

@media screen and (max-width: 768px) {
    .wv-heading-border-svg {
        display: none !important;
    }

    .wv-detail-rail {
        padding: 2px !important;
        background:
            linear-gradient(180deg,
                var(--webversa-red),
                var(--webversa-red)) !important;
    }

    .wv-detail-rail-inner {
        inset: 2px !important;
    }
}

@media screen and (min-width: 1181px) {
    .wv-service-detail {
        width: min(1180px, calc(100% - 40px)) !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;

        grid-template-columns:
            152px minmax(0, 1fr) !important;

        gap: 34px !important;
    }

    .wv-detail-panel {
        width: 100% !important;
        min-width: 0 !important;
    }

    .wv-detail-content {
        width: min(720px, calc(100% - 150px)) !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1180px) {
    .wv-service-detail {
        width: min(980px, calc(100% - 24px)) !important;

        grid-template-columns:
            138px minmax(0, 1fr) !important;

        gap: 24px !important;
    }

    .wv-detail-rail {
        width: 138px !important;
    }

    .wv-detail-content {
        width: min(660px, calc(100% - 110px)) !important;
    }
}

.wv-pro-services {
    --wv-chip-fill: rgba(237, 32, 42, 0.42);
    --wv-chip-border: rgba(237, 32, 42, 0.88);
    --wv-chip-glow: rgba(237, 32, 42, 0.24);
}

.wv-service-card,
.wv-service-card .wv-tech-box,
.wv-service-card .wv-circuit-connector,
.wv-service-card .wv-service-title,
.wv-service-card .wv-service-title::after {
    animation: none !important;
    transition: none !important;
}

.wv-service-card:hover .wv-tech-box,
.wv-service-card:focus-visible .wv-tech-box {
    transform: none !important;
    filter: none !important;
}

.wv-service-card:hover .wv-service-title,
.wv-service-card:focus-visible .wv-service-title {
    transform: none !important;
}

.wv-service-card:hover .wv-tech-box,
.wv-service-card:focus-visible .wv-tech-box,
.wv-service-card.wv-active .wv-tech-box {
    overflow: hidden;

    background:
        linear-gradient(145deg,
            var(--wv-chip-fill),
            rgba(237, 32, 42, 0.30)) !important;

    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);

    box-shadow:
        0 0 0 1px var(--wv-chip-border),
        0 0 13px var(--wv-chip-glow),
        inset 0 0 18px rgba(237, 32, 42, 0.10) !important;
}

.wv-service-card:hover .wv-tech-box::before,
.wv-service-card:focus-visible .wv-tech-box::before,
.wv-service-card.wv-active .wv-tech-box::before {
    inset: 0 !important;

    border-color: var(--wv-chip-border) !important;

    background:
        linear-gradient(145deg,
            rgba(249, 249, 249, 0.06),
            transparent 38%) !important;

    box-shadow:
        0 0 6px var(--wv-chip-glow),
        inset 0 0 12px rgba(237, 32, 42, 0.08) !important;
}

.wv-service-card:hover .wv-tech-box::after,
.wv-service-card:focus-visible .wv-tech-box::after,
.wv-service-card.wv-active .wv-tech-box::after {
    inset: 7px !important;

    border-color: rgba(237, 32, 42, 0.46) !important;

    background:
        linear-gradient(145deg,
            rgba(237, 32, 42, 0.42) 0%,
            rgba(237, 32, 42, 0.28) 55%,
            rgba(237, 32, 42, 0.82) 100%) !important;

    box-shadow:
        inset 0 0 18px rgba(237, 32, 42, 0.10) !important;
}

.wv-service-card:hover .wv-service-title::after,
.wv-service-card:focus-visible .wv-service-title::after,
.wv-service-card.wv-active .wv-service-title::after {
    width: 68px !important;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(237, 32, 42, 0.88),
            transparent) !important;

    box-shadow:
        0 0 7px rgba(237, 32, 42, 0.28) !important;
}

.wv-pro-services {
    --wv-topbox-main: var(--webversa-red);
    --wv-topbox-dark: var(--webversa-red);
    --wv-topbox-deep: var(--webversa-red);
    --wv-topbox-border: rgba(237, 32, 42, 0.96);
    --wv-topbox-glow: rgba(237, 32, 42, 0.26);
}

.wv-tech-box {
    overflow: hidden;
}

.wv-tech-box::before {
    border-color: var(--wv-topbox-border) !important;

    background:
        linear-gradient(145deg,
            rgba(249, 249, 249, 0.05),
            transparent 38%) !important;

    box-shadow:
        0 0 5px var(--wv-topbox-glow),
        0 0 12px rgba(237, 32, 42, 0.16),
        inset 0 0 10px rgba(237, 32, 42, 0.08) !important;
}

.wv-tech-box::after {
    border-color: rgba(237, 32, 42, 0.18) !important;

    background:
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--wv-topbox-main) 42%,
            var(--wv-topbox-dark) 72%,
            var(--wv-topbox-deep) 100%) !important;

    box-shadow:
        inset 0 0 20px rgba(249, 249, 249, 0.05),
        inset 0 0 24px rgba(237, 32, 42, 0.12),
        0 0 10px rgba(237, 32, 42, 0.12) !important;
}

.wv-service-card:hover .wv-tech-box,
.wv-service-card:focus-visible .wv-tech-box,
.wv-service-card.wv-active .wv-tech-box {
    background:
        linear-gradient(145deg,
            rgba(237, 32, 42, 0.40),
            rgba(237, 32, 42, 0.24)) !important;

    box-shadow:
        0 0 0 1px rgba(237, 32, 42, 0.90),
        0 0 13px rgba(237, 32, 42, 0.26),
        inset 0 0 18px rgba(237, 32, 42, 0.12) !important;
}

.wv-service-card:hover .wv-tech-box::before,
.wv-service-card:focus-visible .wv-tech-box::before,
.wv-service-card.wv-active .wv-tech-box::before {
    border-color: rgba(237, 32, 42, 0.98) !important;
}

.wv-service-card:hover .wv-tech-box::after,
.wv-service-card:focus-visible .wv-tech-box::after,
.wv-service-card.wv-active .wv-tech-box::after {
    background:
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--wv-topbox-main) 42%,
            var(--wv-topbox-dark) 72%,
            var(--wv-topbox-deep) 100%) !important;

    border-color: rgba(237, 32, 42, 0.20) !important;
}

.wv-pro-services {
    --wv-active-fill: var(--webversa-red);
    --wv-active-fill-dark: var(--webversa-red);
    --wv-active-fill-deep: var(--webversa-red);
    --wv-active-border: rgba(237, 32, 42, 0.96);
    --wv-active-glow: rgba(237, 32, 42, 0.28);
}

.wv-service-card:not(.wv-active) .wv-tech-box,
.wv-service-card:not(.wv-active):hover .wv-tech-box,
.wv-service-card:not(.wv-active):focus-visible .wv-tech-box {
    background: transparent !important;
    transform: none !important;
    filter: none !important;

    box-shadow:
        none !important;
}

.wv-service-card:not(.wv-active) .wv-tech-box::before,
.wv-service-card:not(.wv-active):hover .wv-tech-box::before,
.wv-service-card:not(.wv-active):focus-visible .wv-tech-box::before {
    inset: 1px !important;

    border-color:
        rgba(237, 32, 42, 0.58) !important;

    background:
        linear-gradient(145deg,
            rgba(237, 32, 42, 0.055),
            transparent 36%) !important;

    box-shadow:
        0 0 4px rgba(237, 32, 42, 0.24),
        inset 0 0 10px rgba(237, 32, 42, 0.04) !important;
}

.wv-service-card:not(.wv-active) .wv-tech-box::after,
.wv-service-card:not(.wv-active):hover .wv-tech-box::after,
.wv-service-card:not(.wv-active):focus-visible .wv-tech-box::after {
    inset: 10px !important;

    border-color:
        rgba(237, 32, 42, 0.22) !important;

    background:
        radial-gradient(circle at 50% 30%,
            rgba(237, 32, 42, 0.08),
            transparent 54%),
        linear-gradient(145deg,
            #150304 0%,
            #080808 48%,
            #020202 100%) !important;

    box-shadow:
        inset 0 0 20px rgba(237, 32, 42, 0.04),
        0 0 8px rgba(237, 32, 42, 0.05) !important;
}

.wv-service-card:not(.wv-active):hover .wv-service-title,
.wv-service-card:not(.wv-active):focus-visible .wv-service-title {
    transform: none !important;
}

.wv-service-card:not(.wv-active) .wv-service-title::after,
.wv-service-card:not(.wv-active):hover .wv-service-title::after,
.wv-service-card:not(.wv-active):focus-visible .wv-service-title::after {
    width: 0 !important;
}

.wv-service-card.wv-active .wv-tech-box {
    overflow: hidden;

    background:
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--wv-active-fill) 43%,
            var(--wv-active-fill-dark) 73%,
            var(--wv-active-fill-deep) 100%) !important;

    clip-path: polygon(15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px);

    transform: none !important;
    filter: none !important;

    box-shadow:
        0 0 0 1px var(--wv-active-border),
        0 0 14px var(--wv-active-glow),
        inset 0 1px 0 rgba(237, 32, 42, 0.14) !important;
}

.wv-service-card.wv-active .wv-tech-box::before {
    inset: 0 !important;

    border-color:
        var(--wv-active-border) !important;

    background:
        linear-gradient(145deg,
            rgba(249, 249, 249, 0.07),
            transparent 38%) !important;

    box-shadow:
        0 0 6px var(--wv-active-glow),
        inset 0 0 12px rgba(237, 32, 42, 0.08) !important;
}

.wv-service-card.wv-active .wv-tech-box::after {
    inset: 7px !important;

    border-color:
        rgba(237, 32, 42, 0.22) !important;

    background:
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--wv-active-fill) 42%,
            var(--wv-active-fill-dark) 73%,
            var(--wv-active-fill-deep) 100%) !important;

    box-shadow:
        inset 0 0 20px rgba(237, 32, 42, 0.28) !important;
}

.wv-service-card.wv-active .wv-service-title::after {
    width: 68px !important;

    background:
        linear-gradient(90deg,
            transparent,
            var(--wv-active-fill),
            transparent) !important;

    box-shadow:
        0 0 7px rgba(237, 32, 42, 0.30) !important;
}

.wv-service-card,
.wv-service-card *,
.wv-service-card *::before,
.wv-service-card *::after {
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.wv-service-card:hover .wv-tech-box,
.wv-service-card:focus-visible .wv-tech-box {
    transform: none !important;
}

body .wv-pro-services .wv-service-card:not(.wv-active) .wv-tech-box,
body .wv-pro-services .wv-service-card:not(.wv-active):hover .wv-tech-box,
body .wv-pro-services .wv-service-card:not(.wv-active):focus-visible .wv-tech-box {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

body .wv-pro-services .wv-service-card:not(.wv-active) .wv-tech-box::before,
body .wv-pro-services .wv-service-card:not(.wv-active):hover .wv-tech-box::before,
body .wv-pro-services .wv-service-card:not(.wv-active):focus-visible .wv-tech-box::before {
    inset: 1px !important;

    border-color: rgba(237, 32, 42, 0.72) !important;

    background: transparent !important;

    box-shadow:
        0 0 4px rgba(237, 32, 42, 0.20),
        inset 0 0 8px rgba(237, 32, 42, 0.025) !important;
}

body .wv-pro-services .wv-service-card:not(.wv-active) .wv-tech-box::after,
body .wv-pro-services .wv-service-card:not(.wv-active):hover .wv-tech-box::after,
body .wv-pro-services .wv-service-card:not(.wv-active):focus-visible .wv-tech-box::after {
    inset: 10px !important;

    border-color: rgba(237, 32, 42, 0.24) !important;

    background:
        linear-gradient(145deg,
            #101010 0%,
            #070707 52%,
            #010101 100%) !important;

    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.82),
        0 0 7px rgba(237, 32, 42, 0.05) !important;
}

body .wv-pro-services .wv-service-card:not(.wv-active):hover .wv-tech-box,
body .wv-pro-services .wv-service-card:not(.wv-active):hover .wv-service-title {
    transform: none !important;
}

body .wv-pro-services .wv-service-card:not(.wv-active) .wv-service-title::after,
body .wv-pro-services .wv-service-card:not(.wv-active):hover .wv-service-title::after {
    width: 0 !important;
}

body .wv-pro-services .wv-service-card.wv-active .wv-tech-box {
    background:
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 46%,
            var(--webversa-red) 74%,
            var(--webversa-red) 100%) !important;

    box-shadow:
        0 0 0 1px rgba(237, 32, 42, 0.96),
        0 0 14px rgba(237, 32, 42, 0.30),
        inset 0 1px 0 rgba(237, 32, 42, 0.14) !important;
}

body .wv-pro-services .wv-service-card.wv-active .wv-tech-box::before {
    inset: 0 !important;

    border-color: rgba(237, 32, 42, 1) !important;

    background:
        linear-gradient(145deg,
            rgba(249, 249, 249, 0.07),
            transparent 38%) !important;

    box-shadow:
        0 0 6px rgba(237, 32, 42, 0.32),
        inset 0 0 12px rgba(237, 32, 42, 0.08) !important;
}

body .wv-pro-services .wv-service-card.wv-active .wv-tech-box::after {
    inset: 7px !important;

    border-color: rgba(237, 32, 42, 0.24) !important;

    background:
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 44%,
            var(--webversa-red) 74%,
            var(--webversa-red) 100%) !important;

    box-shadow:
        inset 0 0 20px rgba(237, 32, 42, 0.28) !important;
}

body .wv-pro-services .wv-service-card.wv-active .wv-service-title::after {
    width: 68px !important;

    background:
        linear-gradient(90deg,
            transparent,
            var(--webversa-red),
            transparent) !important;

    box-shadow:
        0 0 7px rgba(237, 32, 42, 0.28) !important;
}

.wv-tech-box {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.wv-tech-box::before,
.wv-tech-box::after {
    content: none !important;
    display: none !important;
}

.wv-service-image {
    position: relative;
    z-index: 4;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: none !important;
    filter: none !important;
}

.wv-service-card:hover .wv-service-image,
.wv-service-card:focus-visible .wv-service-image,
.wv-service-card.wv-active .wv-service-image {
    transform: none !important;
    filter: none !important;
}

.wv-service-card.wv-active .wv-tech-box,
.wv-service-card:hover .wv-tech-box,
.wv-service-card:focus-visible .wv-tech-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body .wv-pro-services .wv-tech-box {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    isolation: isolate;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body .wv-pro-services .wv-service-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

body .wv-pro-services .wv-tech-box::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 10% !important;
    z-index: 3 !important;
    pointer-events: none;

    clip-path: polygon(12% 0,
            88% 0,
            100% 12%,
            100% 88%,
            88% 100%,
            12% 100%,
            0 88%,
            0 12%) !important;

    opacity: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    transition:
        opacity 0.28s ease,
        filter 0.28s ease !important;
}

body .wv-pro-services .wv-service-card.wv-active .wv-tech-box::after {
    opacity: 1 !important;
    background:
        radial-gradient(circle at 35% 22%,
            rgba(237, 32, 42, 0.34),
            transparent 40%),
        linear-gradient(145deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 48%,
            var(--webversa-red) 76%,
            var(--webversa-red) 100%) !important;

    box-shadow:
        inset 0 1px 0 rgba(237, 32, 42, 0.24),
        inset 0 0 18px rgba(237, 32, 42, 0.34),
        0 0 14px rgba(237, 32, 42, 0.38) !important;
}

body .wv-pro-services .wv-chip-icon {
    position: relative;
    z-index: 5;
    display: inline-grid;
    place-items: center;

    color: var(--webversa-white) !important;
    font-size: 24px;
    line-height: 1;

    pointer-events: none;
    filter:
        drop-shadow(0 0 2px rgba(249, 249, 249, 0.9)) drop-shadow(0 0 7px rgba(0, 0, 0, 0.82));

    transition:
        transform 0.28s ease,
        filter 0.28s ease;
}

body .wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
    color: var(--webversa-white) !important;
    transform: scale(1.07);
    filter:
        drop-shadow(0 0 2px rgba(249, 249, 249, 1)) drop-shadow(0 0 8px rgba(249, 249, 249, 0.24));
}

@media screen and (max-width: 768px) {
    body .wv-pro-services .wv-chip-icon {
        font-size: 23px;
    }
}

body .wv-pro-services .wv-chip-icon,
body .wv-pro-services .wv-service-card:hover .wv-chip-icon,
body .wv-pro-services .wv-service-card:focus-visible .wv-chip-icon,
body .wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
    color: var(--webversa-white) !important;
    filter: none !important;
    text-shadow: none !important;
}

.wv-pro-services {
    width: 100%;
    overflow: clip;
}

.wv-services-viewport {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.wv-service-card {
    outline-offset: 5px;
}

.wv-service-detail,
.wv-detail-panel,
.wv-detail-content,
.wv-detail-columns {
    min-width: 0;
}

@media (max-width: 900px) {
    .wv-services-track {
        justify-content: start;
        padding-inline: 18px;
    }

    .wv-service-detail {
        width: calc(100% - 28px);
        margin-inline: auto;
    }

    .wv-detail-rail {
        min-width: 58px;
    }

    .wv-detail-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .wv-pro-services {
        padding-inline: 10px;
    }

    .wv-services-viewport {
        width: 100%;
        padding: 2px 0 14px;
        overflow: hidden;
        scroll-snap-type: none;
        scrollbar-width: none;
    }

    .wv-services-viewport::-webkit-scrollbar {
        display: none;
    }

    .wv-services-track {
        width: min(100%, 700px);
        min-width: 0;
        margin-inline: auto;
        padding-inline: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        justify-content: center;
        column-gap: clamp(4px, 1.4vw, 10px);
        row-gap: 10px;
    }

    .wv-service-card {
        width: 100%;
        min-width: 0;
        min-height: 154px;
        scroll-snap-align: none;
    }

    .wv-tech-box {
        width: clamp(54px, 10.5vw, 76px);
        height: clamp(54px, 10.5vw, 76px);
    }

    body .wv-pro-services .wv-chip-icon {
        font-size: clamp(14px, 2.8vw, 19px);
    }

    .wv-circuit-connector {
        height: 46px;
        transform: scaleX(.72);
        transform-origin: top center;
    }

    .wv-service-card.wv-short-connector .wv-circuit-connector {
        height: 30px;
    }

    .wv-service-title {
        width: 100%;
        max-width: 90px;
        margin-inline: auto;
        padding-inline: 2px;
        font-size: clamp(9px, 1.65vw, 12px);
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wv-service-detail {
        display: block;
        width: calc(100% - 8px);
        scroll-margin-top: 92px;
    }

    .wv-detail-rail {
        width: 100%;
        min-width: 0;
        min-height: 56px;
    }

    .wv-detail-vertical-title {
        writing-mode: horizontal-tb;
        transform: none;
        text-align: center;
    }

    .wv-detail-panel {
        width: 100%;
    }

    .wv-detail-media {
        min-height: 190px;
    }

    .wv-detail-content {
        padding-inline: 18px;
    }
}

@media (max-width: 480px) {
    .wv-pro-services {
        padding-inline: 6px;
    }

    .wv-services-track {
        column-gap: 2px;
        row-gap: 6px;
    }

    .wv-service-card {
        min-height: 132px;
    }

    .wv-tech-box {
        width: clamp(46px, 14vw, 58px);
        height: clamp(46px, 14vw, 58px);
    }

    body .wv-pro-services .wv-chip-icon {
        font-size: clamp(12px, 4vw, 15px);
    }

    .wv-circuit-connector {
        height: 38px;
        transform: scaleX(.6);
    }

    .wv-service-card.wv-short-connector .wv-circuit-connector {
        height: 24px;
    }

    .wv-service-title {
        max-width: 68px;
        font-size: clamp(8px, 2.35vw, 10px);
    }
}

.wv-detail-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 48px;
    padding: 12px 28px !important;
    overflow: hidden !important;
    border: 1px solid rgba(249, 249, 249, .16) !important;
    color: var(--webversa-white) !important;
    background: #090909 !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45) !important;
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px) !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    transition: transform .32s ease, background .32s ease, box-shadow .32s ease !important;
}

.wv-detail-button:hover,
.wv-detail-button:focus-visible {
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red)) !important;
    box-shadow: 0 15px 32px rgba(0, 0, 0, .48), 0 0 26px rgba(237, 32, 42, .52) !important;
    transform: translateY(-3px) !important;
}

.industry-solutions {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 70px 35px;
    background:
        radial-gradient(circle at 30% 45%, rgba(237, 32, 42, 0.08), transparent 30%),
        var(--webversa-black);
}

.industry-solutions::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image:
        linear-gradient(rgba(249, 249, 249, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249, 249, 249, 0.1) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.solutions-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1650px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(600px, 1.1fr) minmax(500px, 0.9fr);
    gap: 80px;
    align-items: center;
}

.solutions-left {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

.solution-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.control-button {
    position: relative;
    width: 48px;
    height: 110px;
    color: var(--webversa-white);
    background: #555555;
    cursor: pointer;

    clip-path: polygon(28% 0,
            100% 0,
            100% 87%,
            72% 100%,
            0 100%,
            0 13%);

    will-change: transform, filter;
    transition:
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.45s ease,
        filter 0.45s ease;
}

.control-button::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    background: linear-gradient(180deg, #666666, #434343);

    clip-path: polygon(28% 0,
            100% 0,
            100% 87%,
            72% 100%,
            0 100%,
            0 13%);
}

.control-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, var(--webversa-red), #111111 45%, var(--webversa-red));
}

.control-button:hover {
    transform: translateX(4px);
    background: var(--webversa-red);
    filter: drop-shadow(0 0 10px rgba(237, 32, 42, 0.55));
}

.control-button:active {
    transform: translateX(4px) scale(0.95);
}

.control-button span {
    display: block;
    font-size: 35px;
    font-family: Arial, sans-serif;
    line-height: 1;
    will-change: transform;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.control-button:hover span {
    transform: scale(1.15);
}

.solutions-frame {
    position: relative;
    width: 100%;
    min-height: 540px;
    padding: 50px 42px 45px 48px;
    isolation: isolate;


    background-image: url("../Images/PrimaryCardFrame-DShR87od.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;


    overflow: hidden;
    contain: paint;
}

.frame-content {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: center;


    overflow: hidden;
    contain: paint;
}

.frame-heading {
    margin-bottom: 28px;
    padding: 0 25px;
    text-align: center;
    font-size: clamp(18px, 1.45vw, 24px);
    font-weight: 600;
    color: #f2f2f2;
}

.solutions-list {
    position: relative;
    width: 100%;
    height: 344px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0;
    isolation: isolate;


    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    contain: paint;
    clip-path: inset(0);
    transform: translateZ(0);
}

.solutions-list::-webkit-scrollbar {
    display: none;
}

.active-highlight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 86px;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background:
        linear-gradient(90deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 38%,
            var(--webversa-red) 72%,
            var(--webversa-red) 100%);
    border-top: 1px solid rgba(237, 32, 42, 0.55);
    border-bottom: 1px solid rgba(237, 32, 42, 0.55);

    box-shadow:
        inset 0 0 18px rgba(249, 249, 249, 0.12),
        inset 0 0 30px rgba(237, 32, 42, 0.18);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform, height;
    transition:
        transform 0.68s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s ease;
}

.active-highlight.no-transition {
    transition: none !important;
}

.active-highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    max-width: 100%;
    background: linear-gradient(110deg,
            transparent 0%,
            rgba(249, 249, 249, 0.02) 35%,
            rgba(249, 249, 249, 0.16) 49%,
            rgba(249, 249, 249, 0.02) 62%,
            transparent 100%);
    transform: translateX(-120%);
    animation: activeSweep 3.4s ease-in-out infinite;
}

@keyframes activeSweep {

    0%,
    56% {
        transform: translateX(-120%);
    }

    82%,
    100% {
        transform: translateX(120%);
    }
}

.solution-item {
    position: relative;
    width: 100%;
    min-height: 86px;
    padding: 18px 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #f7f7f7;
    background: transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;

    font-size: clamp(17px, 1.45vw, 23px);
    font-weight: 500;
    text-align: center;

    z-index: 1;
    cursor: pointer;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform, color;

    transition:
        color 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease,
        transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
        text-shadow 0.45s ease;
}

.solution-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;

    background:
        linear-gradient(90deg,
            var(--webversa-red) 0%,
            var(--webversa-red) 38%,
            var(--webversa-red) 72%,
            var(--webversa-red) 100%);

    transform: scaleX(0.85);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.solution-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--webversa-red);
    transform: translateX(-50%);
    transition: width 0.35s ease;
}

.solution-item:hover {
    color: var(--webversa-white);
    background: rgba(237, 32, 42, 0.16);
}

.solution-item:hover::after {
    width: 75%;
}

.solution-item.active {
    color: var(--webversa-white);

    transform: translate3d(0, -1px, 0);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.solution-item.active::before {
    opacity: 0;
    transform: scaleX(1);
}

.solution-item.active::after {
    width: 100%;
}

.solution-name {
    position: relative;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-item.active .solution-name {
    transform: translate3d(0, -1px, 0);
}

.solutions-right {
    position: relative;
    min-width: 0;
}

.details-panel {
    position: relative;
    width: 100%;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.details-panel.changing {
    pointer-events: none;
}

.details-title-wrapper {
    margin-bottom: 28px;
}

.details-title {
    position: relative;
    display: inline-block;
    padding: 3px 9px 5px;

    color: var(--webversa-white);
    background: linear-gradient(90deg, var(--webversa-red), var(--webversa-red));

    font-size: clamp(27px, 2.2vw, 38px);
    font-weight: 500;
    line-height: 1.2;

    box-shadow: inset 0 -1px 0 rgba(249, 249, 249, 0.08);
    transform-origin: left center;
    will-change: transform, opacity;
}

.details-description {
    max-width: 790px;
    color: #f1f1f1;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
    line-height: 1.7;
}

.details-description::first-letter {
    color: var(--webversa-red);
    font-size: 1.22em;
    font-weight: 700;
}

.details-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 65px;
    row-gap: 24px;
    margin-top: 27px;
}

.detail-feature {
    position: relative;
    color: #f3f3f3;
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 500;
    line-height: 1.65;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    animation: featureReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.detail-feature:nth-child(1) {
    animation-delay: 0.05s;
}

.detail-feature:nth-child(2) {
    animation-delay: 0.11s;
}

.detail-feature:nth-child(3) {
    animation-delay: 0.17s;
}

.detail-feature:nth-child(4) {
    animation-delay: 0.23s;
}

@keyframes featureReveal {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.detail-feature::before {
    content: "";
    position: absolute;
    top: 8px;
    left: -15px;
    width: 2px;
    height: 24px;
    opacity: 0;
    background: var(--webversa-red);
    transition: opacity 0.3s ease;
}

.detail-feature:hover::before {
    opacity: 1;
}

.feature-first-letter {
    color: var(--webversa-red);
    font-size: 1.45em;
    font-weight: 700;
    line-height: 0;
}

.explore-button-wrapper {
    margin-top: 65px;
    text-align: center;
}

.explore-button {
    position: relative;
    min-width: 160px;
    min-height: 54px;
    padding: 14px 35px;

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

    color: var(--webversa-white);
    background: #585858;

    font-size: 17px;
    font-weight: 500;
    text-decoration: none;

    clip-path: polygon(11% 0,
            90% 0,
            100% 26%,
            100% 100%,
            10% 100%,
            0 74%,
            0 0);

    transition:
        transform 0.3s ease,
        filter 0.3s ease,
        background 0.3s ease;
}

.explore-button::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;
    background: linear-gradient(180deg, #666666, #4b4b4b);

    clip-path: polygon(11% 0,
            90% 0,
            100% 26%,
            100% 100%,
            10% 100%,
            0 74%,
            0 0);
}

.explore-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, var(--webversa-red), #0f0f0f 48%, var(--webversa-red));
}

.explore-button:hover {
    transform: translateY(-4px);
    background: var(--webversa-red);
    filter:
        drop-shadow(0 0 8px rgba(237, 32, 42, 0.5)) drop-shadow(0 8px 15px rgba(0, 0, 0, 0.7));
}

.explore-button:active {
    transform: translateY(-1px) scale(0.97);
}

@media (max-width: 1200px) {
    .industry-solutions {
        padding: 70px 25px;
    }

    .solutions-container {
        grid-template-columns: minmax(480px, 1fr) minmax(420px, 0.9fr);
        gap: 45px;
    }

    .solutions-frame {
        min-height: 510px;
        padding: 45px 30px 40px 40px;
    }

    .frame-content {
        min-height: 410px;
    }

    .solutions-list {
        height: 312px;
    }

    .solution-item {
        min-height: 78px;
    }

    .details-features {
        column-gap: 35px;
    }
}

@media (max-width: 950px) {
    .industry-solutions {
        min-height: auto;
        padding: 60px 20px;
    }

    .solutions-container {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .solutions-left {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
    }

    .solutions-right {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
    }

    .details-title-wrapper,
    .details-description {
        text-align: left;
    }
}

@media (max-width: 650px) {
    .industry-solutions {
        padding: 45px 12px;
    }

    .solutions-left {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .solution-controls {
        order: 2;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .control-button {
        width: 95px;
        height: 48px;

        clip-path: polygon(12% 0,
                88% 0,
                100% 28%,
                100% 100%,
                12% 100%,
                0 72%,
                0 0);
    }

    .control-button::before {
        clip-path: polygon(12% 0,
                88% 0,
                100% 28%,
                100% 100%,
                12% 100%,
                0 72%,
                0 0);
    }

    .control-button:hover {
        transform: translateY(-3px);
    }

    .solutions-frame {
        order: 1;
        min-height: 480px;
        padding: 45px 25px 45px;
    }

    .frame-content {
        min-height: 385px;
    }

    .frame-heading {
        margin-bottom: 20px;
        padding: 0 12px;
        font-size: 17px;
    }

    .solutions-list {
        height: 280px;
    }

    .solution-item {
        min-height: 70px;
        padding: 14px 15px;
        font-size: 16px;
    }

    .details-title-wrapper {
        margin-bottom: 22px;
    }

    .details-title {
        font-size: 26px;
    }

    .details-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .details-features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 25px;
    }

    .detail-feature {
        padding-left: 3px;
        font-size: 14px;
    }

    .explore-button-wrapper {
        margin-top: 40px;
    }
}

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

    .industry-solutions *,
    .industry-solutions *::before,
    .industry-solutions *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 420px) {
    .solutions-frame {
        min-height: 445px;
        padding: 40px 19px;
    }

    .frame-content {
        min-height: 360px;
    }

    .frame-heading {
        font-size: 15px;
    }

    .solutions-list {
        height: 260px;
    }

    .solution-item {
        min-height: 65px;
        font-size: 14px;
    }

    .details-title {
        font-size: 23px;
    }
}

.industry-solutions {
    width: 100%;
    scroll-margin-top: 120px;
    border-top: 1px solid rgba(249, 249, 249, 0.07);
}

.industry-solutions,
.industry-solutions * {
    box-sizing: border-box;
}

.industry-solutions::before {
    -webkit-mask-image: radial-gradient(circle at center, var(--webversa-black), transparent 80%);
}

.control-button,
.explore-button {
    isolation: isolate;
    overflow: hidden;
}

.details-title {
    margin: 0;
    letter-spacing: -0.02em;
}

.solution-item:focus-visible,
.control-button:focus-visible,
.explore-button:focus-visible {
    outline: 2px solid var(--webversa-white);
    outline-offset: 4px;
}

.solution-item[aria-selected="true"] {
    color: var(--webversa-white);
}

@media (max-width: 650px) {
    .industry-solutions {
        scroll-margin-top: 90px;
    }
}

.industry-solutions {
    display: block !important;
}

.industry-solutions {
    width: 100%;
    overflow: clip;
}

.solutions-container,
.solutions-left,
.solutions-right,
.solutions-frame,
.details-panel {
    min-width: 0;
}

@media (max-width: 980px) {
    .solutions-container {
        grid-template-columns: 1fr;
        gap: 34px;
        width: min(100% - 28px, 760px);
    }

    .solutions-left,
    .solutions-right {
        width: 100%;
    }

    .solution-controls {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .solutions-container {
        width: calc(100% - 24px);
        gap: 24px;
    }

    .solutions-frame {
        min-height: 0;
        padding: 32px 16px;
    }

    .frame-content {
        min-height: 0;
    }

    .solutions-list {
        height: min(260px, 55vh);
    }

    .solution-item {
        min-height: 60px;
        padding: 12px;
        font-size: 14px;
    }

    .details-panel {
        padding-inline: 2px;
    }

    .details-title {
        font-size: clamp(22px, 8vw, 30px);
        overflow-wrap: anywhere;
    }

    .details-features {
        grid-template-columns: 1fr;
    }

    .solution-controls {
        gap: 12px;
    }

    .control-button {
        width: min(34vw, 104px);
        height: 48px;
    }

    .control-button span {
        font-size: 22px;
    }

    .control-button:hover,
    .control-button:active {
        transform: translateY(-2px);
    }
}

@media (max-width: 400px) {
    .control-button {
        width: min(32vw, 88px);
        height: 42px;
    }

    .control-button span {
        font-size: 18px;
    }
}

@media (min-width: 951px) {
    .industry-solutions .solutions-container {
        align-items: start;
    }

    .industry-solutions .solutions-left {
        align-items: start;
    }

    .industry-solutions .solution-controls {
        align-self: start;
        justify-content: flex-start;
        padding-top: 72px;
    }

    .industry-solutions .solutions-frame,
    .industry-solutions .solutions-right {
        align-self: start;
    }

    .industry-solutions .solutions-right {
        padding-top: 18px;
    }
}

@media (max-width: 950px) {
    .industry-solutions .solution-controls {
        padding-top: 0;
    }
}

#previousSolution.control-button,
#nextSolution.control-button {
    background: #090909 !important;
    border: 1px solid rgba(249, 249, 249, .12) !important;
}

#previousSolution.control-button:hover,
#previousSolution.control-button:focus-visible,
#nextSolution.control-button:hover,
#nextSolution.control-button:focus-visible {
    background: var(--webversa-red) !important;
}

.explore-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 52px;
    padding: 13px 32px !important;
    overflow: hidden !important;
    border: 1px solid rgba(249, 249, 249, .15) !important;
    color: var(--webversa-white) !important;
    background: #090909 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .46) !important;
    clip-path: polygon(11% 0, 90% 0, 100% 26%, 100% 100%, 10% 100%, 0 74%, 0 0) !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    transition: transform .32s ease, background .32s ease, box-shadow .32s ease !important;
}

.explore-button:hover,
.explore-button:focus-visible {
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red)) !important;
    box-shadow: 0 15px 32px rgba(0, 0, 0, .5), 0 0 27px rgba(237, 32, 42, .5) !important;
    transform: translateY(-3px) !important;
}

.wv-showcase-section {
    position: relative;
    width: 100%;
    min-height: 980px;
    padding: clamp(72px, 8vw, 112px) 0 58px;
    overflow: hidden;
    background: var(--webversa-black) !important;
    border-top: 1px solid rgba(249, 249, 249, 0.08);
    border-bottom: 1px solid rgba(249, 249, 249, 0.08);
    isolation: isolate;
}

.wv-showcase-section::before,
.wv-showcase-section::after {
    display: none !important;
    content: none !important;
}

.wv-showcase-container {
    width: min(1540px, calc(100% - 24px));
    margin-inline: auto;
}

.wv-showcase-heading {
    position: relative;
    z-index: 100;
    width: min(930px, 100%);
    margin: 0 auto 24px;
    text-align: center;
}

.wv-showcase-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--webversa-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.wv-showcase-kicker::before,
.wv-showcase-kicker::after {
    width: 31px;
    height: 1px;
    background: var(--webversa-red);
    content: "";
}

.wv-showcase-heading h2 {
    max-width: 900px;
    margin-inline: auto;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(42px, 5vw, 74px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.055em;
}

.wv-showcase-heading h2 span {
    color: var(--webversa-red);
}

.wv-showcase-heading p {
    max-width: 640px;
    margin: 20px auto 0;
    color: #d8d8dc;
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.7;
}

.wv-showcase-stage {
    position: relative;
    width: min(1080px, 100%);
    height: 700px;
    margin: 0 auto;
    overflow: visible;
    perspective: 1800px;
    user-select: none;
    touch-action: pan-y;
}

.wv-showcase-card {
    --wv-card-x: 0px;
    --wv-card-width: 200px;
    --wv-card-height: 620px;
    --wv-card-opacity: 1;
    --wv-card-brightness: .88;
    --wv-card-saturation: .90;
    --wv-card-scale: 1;

    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--wv-card-width);
    height: var(--wv-card-height);
    padding: 0;
    border: 0;
    outline: none;
    background: transparent !important;
    opacity: var(--wv-card-opacity);
    filter:
        brightness(var(--wv-card-brightness)) saturate(var(--wv-card-saturation));
    transform:
        translate(-50%, -50%) translate3d(var(--wv-card-x), 0, 0) scale(var(--wv-card-scale));
    cursor: pointer;
    transition:
        width .72s cubic-bezier(.2, .82, .22, 1),
        height .72s cubic-bezier(.2, .82, .22, 1),
        transform .72s cubic-bezier(.2, .82, .22, 1),
        opacity .4s ease,
        filter .5s ease;
    will-change: transform, width, height, filter;
}

.wv-showcase-card:hover:not(.active) {
    filter: brightness(1) saturate(1);
}

.wv-showcase-card:focus-visible {
    outline: 2px solid var(--webversa-white);
    outline-offset: 6px;
}

.wv-showcase-card-shape {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    padding: 1px;
    background: linear-gradient(145deg, rgba(237, 32, 42, .88), rgba(237, 32, 42, .92));
    clip-path: polygon(0 0, 73% 0, 100% 12%, 100% 100%, 32% 100%, 0 88%);
    filter: none;
    transition: background .4s ease, filter .4s ease;
}

.wv-showcase-card-image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #111111;
    background-image: var(--wv-card-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: inherit;
    transition: transform .75s cubic-bezier(.2, .82, .22, 1), filter .45s ease;
}

.wv-showcase-card:hover .wv-showcase-card-image {
    transform: scale(1.04);
}

.wv-showcase-card-image::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    content: "";
    transition: background .5s ease;
}

.wv-showcase-card.active .wv-showcase-card-image::before {
    background: transparent;
}

.wv-showcase-card-image::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .08;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(249, 249, 249, .025) 0 1px, transparent 1px 8px);
    content: "";
}

.wv-showcase-card-title {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    display: block;
    width: max-content;
    max-width: 520px;
    color: rgba(249, 249, 249, .76);
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .72);
    transform: translate(-50%, -50%) rotate(90deg);
    transition: opacity .3s ease, color .3s ease;
}

.wv-showcase-card:hover:not(.active) .wv-showcase-card-title {
    color: var(--webversa-white);
}

.wv-showcase-ribbon {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 46px;
    height: 59%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    background: linear-gradient(180deg, var(--webversa-red) 0%, var(--webversa-red) 68%, var(--webversa-red) 100%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 11%, 32% 0);
    transform: translateX(10px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .82, .22, 1);
}

.wv-showcase-ribbon span {
    display: block;
    width: max-content;
    color: var(--webversa-white);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(90deg);
}

.wv-showcase-card.active {
    cursor: default;
}

.wv-showcase-card.active .wv-showcase-card-shape {
    background: linear-gradient(145deg, var(--webversa-red), var(--webversa-red));
    filter: none;
}

.wv-showcase-card.active .wv-showcase-card-image {
    transform: scale(1.025);
}

.wv-showcase-card.active .wv-showcase-card-title {
    opacity: 0;
    pointer-events: none;
}

.wv-showcase-card.active .wv-showcase-ribbon {
    opacity: 1;
    transform: translateX(0);
}

.wv-showcase-actions {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: -2px;
}

.wv-showcase-beam {
    position: absolute;
    z-index: 5;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(249, 249, 249, .9));
}

.wv-showcase-beam:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--webversa-white));
    animation: wvShowcaseBeamTop 2s linear infinite;
}

.wv-showcase-beam:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--webversa-white));
    animation: wvShowcaseBeamRight 2s linear .5s infinite;
}

.wv-showcase-beam:nth-child(3) {
    right: -100%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, var(--webversa-white));
    animation: wvShowcaseBeamBottom 2s linear 1s infinite;
}

.wv-showcase-beam:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(0deg, transparent, var(--webversa-white));
    animation: wvShowcaseBeamLeft 2s linear 1.5s infinite;
}

@keyframes wvShowcaseBeamTop {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

@keyframes wvShowcaseBeamRight {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

@keyframes wvShowcaseBeamBottom {
    0% {
        right: -100%;
    }

    50%,
    100% {
        right: 100%;
    }
}

@keyframes wvShowcaseBeamLeft {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}

.wv-showcase-button-icon,
.wv-showcase-button-label {
    position: relative;
    z-index: 4;
}

@media (max-width: 1280px) {
    .wv-showcase-section {
        min-height: 930px;
    }

    .wv-showcase-stage {
        height: 660px;
    }
}

@media (max-width: 1000px) {
    .wv-showcase-section {
        min-height: 875px;
    }

    .wv-showcase-container {
        width: calc(100% - 14px);
    }

    .wv-showcase-stage {
        height: 610px;
    }
}

@media (max-width: 760px) {
    .wv-showcase-section {
        min-height: 800px;
        padding: 58px 0 42px;
    }

    .wv-showcase-heading {
        margin-bottom: 18px;
    }

    .wv-showcase-heading h2 {
        font-size: clamp(36px, 10vw, 52px);
    }

    .wv-showcase-heading p {
        max-width: 330px;
        margin-top: 17px;
    }

    .wv-showcase-stage {
        height: 545px;
    }

    .wv-showcase-card-title {
        font-size: 12px;
    }

    .wv-showcase-ribbon {
        width: 33px;
    }

    .wv-showcase-ribbon span {
        font-size: 11px;
    }
}

@media (max-width: 520px) {
    .wv-showcase-section {
        min-height: 720px;
        padding-top: 48px;
    }

    .wv-showcase-container {
        width: calc(100% - 8px);
    }

    .wv-showcase-kicker {
        gap: 8px;
        font-size: 9px;
    }

    .wv-showcase-kicker::before,
    .wv-showcase-kicker::after {
        width: 21px;
    }

    .wv-showcase-heading h2 {
        font-size: clamp(33px, 11vw, 46px);
    }

    .wv-showcase-heading p {
        max-width: 290px;
        font-size: 13px;
    }

    .wv-showcase-stage {
        height: 470px;
    }

    .wv-showcase-actions {
        gap: 8px;
    }
}

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

    .wv-showcase-section *,
    .wv-showcase-section *::before,
    .wv-showcase-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.wv-showcase-prev-button,
.wv-showcase-next-button,
.wv-showcase-explore-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid rgba(249, 249, 249, 0.16) !important;
    color: var(--webversa-white) !important;
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red));
    clip-path: polygon(10px 0,
            100% 0,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            0 100%,
            0 10px) !important;
    box-shadow: 0 0 14px rgba(237, 32, 42, 0.38) !important;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease !important;
}

.wv-showcase-prev-button,
.wv-showcase-next-button {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    font-size: 17px !important;
}

.wv-showcase-explore-button {
    min-width: 150px !important;
    padding: 12px 35px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    line-height: 1;
    text-transform: uppercase;
}

.wv-showcase-prev-button:hover,
.wv-showcase-prev-button:focus-visible,
.wv-showcase-next-button:hover,
.wv-showcase-next-button:focus-visible,
.wv-showcase-explore-button:hover,
.wv-showcase-explore-button:focus-visible {
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red));
    box-shadow: 0 0 30px rgba(237, 32, 42, 0.9) !important;
    transform: translateY(-2px) !important;
}

.wv-showcase-prev-button::before,
.wv-showcase-prev-button::after,
.wv-showcase-next-button::before,
.wv-showcase-next-button::after,
.wv-showcase-explore-button::before,
.wv-showcase-explore-button::after {
    display: none !important;
    content: none !important;
}

.wv-showcase-beam {
    position: absolute;
    z-index: 5;
    display: block !important;
    pointer-events: none;
    filter: none;
}

.wv-showcase-beam:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--webversa-white));
    animation: buttonTop 2s linear infinite;
}

.wv-showcase-beam:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--webversa-white));
    animation: buttonRight 2s linear 0.5s infinite;
}

.wv-showcase-beam:nth-child(3) {
    right: -100%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, var(--webversa-white));
    animation: buttonBottom 2s linear 1s infinite;
}

.wv-showcase-beam:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(0deg, transparent, var(--webversa-white));
    animation: buttonLeft 2s linear 1.5s infinite;
}

.wv-showcase-button-icon,
.wv-showcase-button-label {
    position: relative;
    z-index: 7;
}

@media (max-width: 760px) {

    .wv-showcase-prev-button,
    .wv-showcase-next-button {
        width: 41px !important;
        min-width: 41px !important;
        height: 41px !important;
        min-height: 41px !important;
        font-size: 15px !important;
    }

    .wv-showcase-explore-button {
        min-width: 120px !important;
        min-height: 41px !important;
        padding: 11px 20px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 520px) {

    .wv-showcase-prev-button,
    .wv-showcase-next-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .wv-showcase-explore-button {
        min-width: 102px !important;
        padding-inline: 14px !important;
    }
}

.wv-infra-industries-section {
    position: relative;
    width: 100%;
    min-height: 700px;
    overflow: hidden;
    isolation: isolate;

    background: var(--webversa-black);
}

.wv-infra-industries-section::before {
    content: "";
    display: none;
    position: absolute;
    top: -42px;
    left: 50%;
    z-index: 1;

    width: min(700px, 70vw);
    height: 58px;

    transform: translateX(-50%);

    border-radius: 50%;
    background: rgba(249, 249, 249, 0.85);
    filter: blur(24px);
    opacity: 0.85;

    pointer-events: none;
}

.wv-infra-industries-section::after {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.28) 0%,
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, 0.28) 100%),
        linear-gradient(180deg,
            transparent 70%,
            rgba(0, 0, 0, 0.35) 100%);

    pointer-events: none;
}

.wv-infra-industries-heading {
    position: relative;
    z-index: 8;

    width: min(900px, calc(100% - 40px));
    margin: 0 auto;
    padding-top: 33px;

    text-align: center;
}

.wv-infra-industries-heading h2 {
    color: #f7f7f7;

    font-size: clamp(32px, 2.4vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.wv-infra-industries-heading p {
    max-width: 750px;
    margin: 20px auto 0;

    color: rgba(249, 249, 249, 0.92);

    font-size: clamp(14px, 1.1vw, 18px);
    font-weight: 600;
    line-height: 1.6;
}

.wv-infra-circuit-container {
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 2;

    width: 100%;
    height: 125px;

    pointer-events: none;
}

.wv-infra-circuit-container svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.wv-infra-circuit-line {
    fill: none;

    stroke: rgba(190, 157, 159, 0.82);
    stroke-width: 1.25;

    vector-effect: non-scaling-stroke;

    filter:
        drop-shadow(0 0 2px rgba(249, 249, 249, 0.06));
}

.wv-infra-data-packet {
    fill: var(--webversa-red);
    stroke: rgba(255, 210, 210, 0.95);
    stroke-width: 0.55;
    vector-effect: non-scaling-stroke;

    filter:
        drop-shadow(0 0 3px rgba(237, 32, 42, 1)) drop-shadow(0 0 8px rgba(237, 32, 42, 0.85));
}

.wv-infra-data-packet.wv-infra-packet-soft {
    opacity: 0.58;
}

.wv-infra-data-packet.wv-infra-packet-bright {
    fill: var(--webversa-red);
    filter:
        drop-shadow(0 0 3px rgba(237, 32, 42, 0.95)) drop-shadow(0 0 9px rgba(237, 32, 42, 0.72));
}

.wv-infra-machine-stage {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 6;

    width: min(900px, 58vw);
    min-width: 580px;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    transform: translate3d(-50%, 0, 0);

    pointer-events: none;
    will-change: auto;
}

.wv-infra-machine-image {
    width: 100%;
    height: auto;
    max-height: 530px;

    object-fit: contain;
    object-position: center bottom;

    user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(0 28px 26px rgba(0, 0, 0, 0.74));


    transform: translateZ(0);
}

.wv-infra-machine-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 49%;
    z-index: -1;

    width: 33%;
    aspect-ratio: 1;
    transform: translate3d(-50%, -50%, 0) scale(0.94);
    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(237, 32, 42, 0.13) 0%,
            rgba(237, 32, 42, 0.045) 42%,
            transparent 72%);

    filter: blur(16px);
    opacity: 0.42;
    animation: serverActivity 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: opacity, transform;
}

@keyframes serverActivity {

    0%,
    100% {
        opacity: 0.34;
        transform: translate3d(-50%, -50%, 0) scale(0.94);
    }

    50% {
        opacity: 0.64;
        transform: translate3d(-50%, -50%, 0) scale(1.015);
    }
}

.wv-infra-image-placeholder {
    display: none;

    width: 700px;
    max-width: 75vw;
    height: 340px;

    place-items: center;

    padding: 30px;

    border: 1px dashed rgba(249, 249, 249, 0.22);

    background:
        linear-gradient(135deg,
            rgba(249, 249, 249, 0.025),
            rgba(249, 249, 249, 0.008));

    color: rgba(249, 249, 249, 0.55);

    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

.wv-infra-image-placeholder strong {
    color: var(--webversa-white);
}

.wv-infra-machine-stage.image-missing .wv-infra-machine-image {
    display: none;
}

.wv-infra-machine-stage.image-missing .wv-infra-image-placeholder {
    display: grid;
}

.wv-infra-particle {
    position: absolute;
    z-index: 2;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: rgba(237, 32, 42, 0.8);

    box-shadow:
        0 0 7px rgba(237, 32, 42, 0.7);

    opacity: 0;

    animation: particleMove 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.wv-infra-particle-one {
    left: 22%;
    bottom: 90px;
    animation-delay: 0s;
}

.wv-infra-particle-two {
    left: 67%;
    bottom: 65px;
    animation-delay: 1.4s;
}

.wv-infra-particle-three {
    left: 75%;
    bottom: 130px;
    animation-delay: 2.8s;
}

.wv-infra-particle-four {
    left: 32%;
    bottom: 60px;
    animation-delay: 4s;
}

@keyframes particleMove {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    25% {
        opacity: 0.8;
    }

    75% {
        opacity: 0.45;
    }

    100% {
        opacity: 0;
        transform: translateY(-95px);
    }
}

@media screen and (max-width: 1200px) {
    .wv-infra-industries-section {
        min-height: 680px;
    }

    .wv-infra-machine-stage {
        width: 750px;
        min-width: 0;
        bottom: 25px;
    }

    .wv-infra-machine-image {
        max-height: 500px;
    }
}

@media screen and (max-width: 992px) {
    .wv-infra-industries-section {
        min-height: 650px;
    }

    .wv-infra-industries-heading {
        padding-top: 38px;
    }

    .wv-infra-circuit-container {
        top: 335px;
    }

    .wv-infra-machine-stage {
        width: min(760px, 92vw);
    }
}

@media screen and (max-width: 768px) {
    .wv-infra-industries-section {
        min-height: 610px;
    }

    .wv-infra-industries-heading {
        width: calc(100% - 30px);
        padding-top: 38px;
    }

    .wv-infra-industries-heading h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .wv-infra-industries-heading p {
        max-width: 550px;
        margin-top: 15px;

        font-size: 14px;
    }

    .wv-infra-circuit-container {
        top: 310px;
        height: 110px;
    }

    .wv-infra-machine-stage {
        width: 105vw;
        bottom: 25px;
    }

    .wv-infra-machine-image {
        max-height: 445px;
    }
}

@media screen and (max-width: 576px) {
    .wv-infra-industries-section {
        min-height: 550px;
    }

    .wv-infra-industries-heading {
        width: calc(100% - 24px);
        padding-top: 42px;
    }

    .wv-infra-industries-heading h2 {
        font-size: 29px;
    }

    .wv-infra-industries-heading p {
        max-width: 390px;

        font-size: 13px;
        font-weight: 500;
        line-height: 1.6;
    }

    .wv-infra-circuit-container {
        top: 280px;
        height: 95px;
    }

    .wv-infra-machine-stage {
        width: 125vw;
        bottom: 18px;
    }

    .wv-infra-machine-image {
        max-height: 380px;
    }

    .wv-infra-particle {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    .wv-infra-industries-section {
        min-height: 520px;
    }

    .wv-infra-industries-heading h2 {
        font-size: 27px;
    }

    .wv-infra-industries-heading p {
        font-size: 12px;
    }

    .wv-infra-circuit-container {
        top: 270px;
    }

    .wv-infra-machine-stage {
        width: 137vw;
    }
}

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

    .wv-infra-machine-stage::before,
    .wv-infra-particle {
        animation: none;
    }

    .wv-infra-data-packet {
        display: none;
    }
}

.wv-infra-industries-section {
    width: 100%;
    overflow: hidden;
}

.projects-section {
    position: relative;
    isolation: isolate;
    padding: 100px 0 130px;
    overflow: hidden;
}

.projects-section::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(249, 249, 249, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249, 249, 249, 0.018) 1px, transparent 1px);
    background-size: 56px 56px;
    content: "";
    mask-image: linear-gradient(to bottom, transparent, var(--webversa-black) 14%, var(--webversa-black) 88%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--webversa-black) 14%, var(--webversa-black) 88%, transparent);
}

.projects-section::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(237, 32, 42, 0.025) 50%, rgba(0, 0, 0, 0));
    content: "";
    pointer-events: none;
}

.projects-heading {
    position: relative;
    z-index: 4;
    max-width: 820px;
    margin-inline: auto;
    padding-inline: 20px;
    text-align: center;
}

.projects-heading .section-tag {
    justify-content: center;
}

.projects-heading h2 {
    margin-bottom: 16px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 5.5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.projects-heading p {
    max-width: 720px;
    margin-inline: auto;
    color: var(--muted);
    font-size: 16px;
}

.projects-stage {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(520px, 900px) minmax(300px, 1fr);
    align-items: center;
    width: 100%;
    min-height: 750px;
    margin-top: 50px;
}

.projects-side {
    display: grid;
    align-content: center;
    gap: clamp(16px, 2.2vw, 32px);
    min-width: 0;
}

.project-row {
    position: relative;
    display: grid;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.projects-side-left .project-row {
    grid-template-columns: minmax(60px, 1fr) clamp(170px, 12vw, 210px);
}

.projects-side-right .project-row {
    grid-template-columns: clamp(170px, 12vw, 210px) minmax(60px, 1fr);
}

.project-connector {
    position: relative;
    display: block;
    width: 100%;
    height: 86px;
    overflow: visible;
    pointer-events: none;
}

.projects-side-left .project-connector {
    margin-right: -2px;
}

.projects-side-right .project-connector {
    margin-left: -2px;
}

.project-connector svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.project-connector polyline {
    fill: none;
    stroke: var(--webversa-red);
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter:
        drop-shadow(0 0 3px rgba(237, 32, 42, 0.95)) drop-shadow(0 0 10px rgba(237, 32, 42, 0.55));
    stroke-dasharray: 920;
    stroke-dashoffset: 920;
    opacity: 0.78;
    transition:
        stroke 0.35s ease,
        opacity 0.35s ease,
        filter 0.35s ease;
}

.projects-stage.is-visible .project-connector polyline {
    animation: drawProjectConnector 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.12s + var(--project-index, 1) * 0.08s);
}

.project-row.is-active .project-connector polyline,
.project-row:hover .project-connector polyline {
    stroke: var(--webversa-red);
    opacity: 1;
    filter:
        drop-shadow(0 0 4px rgba(237, 32, 42, 1)) drop-shadow(0 0 15px rgba(237, 32, 42, 0.9));
}

@keyframes drawProjectConnector {
    to {
        stroke-dashoffset: 0;
    }
}

.project-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 64px;
    padding: 6px 12px;
    overflow: hidden;
    border: 1px solid rgba(237, 32, 42, 0.78);
    outline: none;
    color: #111111;
    background: var(--webversa-white);
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
    box-shadow:
        0 0 0 rgba(237, 32, 42, 0),
        inset 0 0 0 1px rgba(249, 249, 249, 0.65);
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        filter 0.35s ease;
}

.projects-stage.is-visible .project-node {
    animation: projectNodeIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.18s + var(--project-index, 1) * 0.085s);
}

@keyframes projectNodeIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.project-node::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 20%, rgba(237, 32, 42, 0.16), transparent 80%);
    content: "";
    transform: translateX(-130%);
    transition: transform 0.7s ease;
}

.project-node::after {
    position: absolute;
    top: 0;
    width: 45%;
    height: 3px;
    background: var(--primary);
    box-shadow: 0 0 10px rgba(237, 32, 42, 0.85);
    content: "";
    opacity: 0;
    transition: opacity 0.3s ease;
}

.projects-side-left .project-node::after {
    right: 0;
}

.projects-side-right .project-node::after {
    left: 0;
}

.project-node:hover,
.project-node:focus-visible,
.project-node.active {
    border-color: var(--webversa-red);
    box-shadow:
        0 0 24px rgba(237, 32, 42, 0.34),
        0 12px 32px rgba(0, 0, 0, 0.42);
    filter: brightness(1.03);
    transform: translateY(-3px) scale(1.025);
}

.project-node:hover::before,
.project-node:focus-visible::before,
.project-node.active::before {
    transform: translateX(130%);
}

.project-node:hover::after,
.project-node:focus-visible::after,
.project-node.active::after {
    opacity: 1;
}

.project-node img {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: 92%;
    max-height: 42px;
    object-fit: contain;
}

.project-node-label {
    position: relative;
    z-index: 2;
    color: #111111;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(12px, 0.95vw, 15px);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

.projects-monitor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding-inline: clamp(8px, 1.2vw, 20px);
    opacity: 0;
    transform: translateY(28px) scale(0.94);
}

.projects-stage.is-visible .projects-monitor {
    animation: projectMonitorIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.16s forwards;
}

@keyframes projectMonitorIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.projects-monitor::before {
    position: absolute;
    top: 12%;
    left: 50%;
    z-index: -1;
    width: 76%;
    height: 58%;
    border-radius: 50%;
    background: rgba(237, 32, 42, 0.12);
    filter: blur(70px);
    content: "";
    transform: translateX(-50%);
}

.projects-monitor-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter:
        drop-shadow(0 28px 34px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 16px rgba(237, 32, 42, 0.08));
}

.projects-screen-content {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #020202;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #4c4c4c #080808;
}

.projects-screen-content::-webkit-scrollbar {
    width: 6px;
}

.projects-screen-content::-webkit-scrollbar-track {
    background: #080808;
}

.projects-screen-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
}

.project-display-image {
    display: block;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    transition:
        opacity 0.28s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.28s ease;
}

.project-display-image.is-changing {
    opacity: 0.25;
    transform: scale(1.018);
    filter: brightness(1.45) saturate(0.8);
}

@media (max-width: 1500px) {
    .projects-stage {
        grid-template-columns: minmax(255px, 1fr) minmax(500px, 780px) minmax(255px, 1fr);
    }

    .projects-side-left .project-row {
        grid-template-columns: minmax(35px, 1fr) 178px;
    }

    .projects-side-right .project-row {
        grid-template-columns: 178px minmax(35px, 1fr);
    }
}

@media (max-width: 1180px) {
    .projects-section {
        padding: 85px 0 100px;
    }

    .projects-stage {
        grid-template-columns: 1fr;
        gap: 30px;
        width: min(980px, calc(100% - 36px));
        min-height: 0;
        margin: 44px auto 0;
    }

    .projects-side {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
    }

    .projects-side-left {
        order: 1;
    }

    .projects-monitor {
        order: 2;
        width: min(900px, 100%);
        margin-inline: auto;
    }

    .projects-side-right {
        order: 3;
    }

    .project-row,
    .projects-side-left .project-row,
    .projects-side-right .project-row {
        display: block;
    }

    .project-connector {
        display: none;
    }

    .project-node {
        height: 60px;
    }
}

@media (max-width: 700px) {
    .projects-section {
        padding: 70px 0 82px;
    }

    .projects-heading {
        padding-inline: 14px;
    }

    .projects-heading h2 {
        font-size: clamp(34px, 11vw, 52px);
    }

    .projects-heading p {
        font-size: 14px;
    }

    .projects-stage {
        width: min(100% - 24px, 620px);
        margin-top: 34px;
    }

    .projects-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-node {
        height: 56px;
        padding-inline: 8px;
    }

    .project-node-label {
        font-size: 11px;
    }

    .projects-monitor {
        padding-inline: 0;
    }
}

.projects-stage {
    overflow: visible;
}

.projects-stage>.projects-side,
.projects-stage>.projects-monitor {
    position: relative;
    z-index: 4;
}

.project-connector {
    display: none !important;
}

.projects-side-left .project-row,
.projects-side-right .project-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.projects-side-left .project-row {
    justify-content: flex-end;
    padding-right: 1px;
}

.projects-side-right .project-row {
    justify-content: flex-start;
    padding-left: 1px;
}

.project-node {
    flex: 0 0 clamp(176px, 12vw, 218px);
    height: 68px;
    border: 1px solid rgba(237, 32, 42, 0.88);
    color: var(--webversa-white);
    box-shadow:
        inset 0 0 0 1px rgba(249, 249, 249, 0.035),
        0 14px 34px rgba(0, 0, 0, 0.38);
    clip-path: polygon(13px 0,
            100% 0,
            100% calc(100% - 13px),
            calc(100% - 13px) 100%,
            0 100%,
            0 13px);
}

.projects-side-left .project-node {
    clip-path: polygon(13px 0,
            100% 0,
            100% 100%,
            13px 100%,
            0 calc(100% - 13px),
            0 13px);
}

.projects-side-right .project-node {
    clip-path: polygon(0 0,
            calc(100% - 13px) 0,
            100% 13px,
            100% calc(100% - 13px),
            calc(100% - 13px) 100%,
            0 100%);
}

.project-node::after {
    top: auto;
    bottom: 0;
    width: 48%;
    height: 2px;
    opacity: 0.55;
}

.project-node img {
    max-height: 44px;
    border-radius: 3px;
}

.project-node-label {
    color: var(--webversa-white);
}

.project-node:hover,
.project-node:focus-visible,
.project-node.active {
    border-color: var(--webversa-red);
    box-shadow:
        inset 0 0 0 1px rgba(249, 249, 249, 0.045),
        0 0 24px rgba(237, 32, 42, 0.32),
        0 15px 38px rgba(0, 0, 0, 0.48);
}

.projects-connectors-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.project-wire-group {
    opacity: 0.78;
    transition: opacity 0.35s ease;
}

.project-wire-base,
.project-wire-glow,
.project-wire-flow {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-wire-glow {
    stroke: rgba(237, 32, 42, 0.22);
    stroke-width: 10;
    filter: blur(5px);
}

.project-wire-base {
    stroke: var(--webversa-red);
    stroke-width: 2.4;
    filter:
        drop-shadow(0 0 3px rgba(237, 32, 42, 0.98)) drop-shadow(0 0 9px rgba(237, 32, 42, 0.62));
    transition:
        stroke-dashoffset 1.25s cubic-bezier(0.22, 1, 0.36, 1),
        stroke 0.3s ease,
        stroke-width 0.3s ease,
        filter 0.3s ease;
    transition-delay: var(--wire-delay, 0s);
}

.project-wire-flow {
    stroke: rgba(255, 218, 225, 0.92);
    stroke-width: 1.15;
    stroke-dasharray: 5 24;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(237, 32, 42, 0.9));
    animation: projectWireEnergy 1.65s linear infinite;
    transition: opacity 0.35s ease;
}

@keyframes projectWireEnergy {
    to {
        stroke-dashoffset: -58;
    }
}

.projects-connectors-layer.is-ready .project-wire-base {
    stroke-dashoffset: 0 !important;
}

.projects-connectors-layer.is-ready .project-wire-flow {
    opacity: 0.28;
}

.project-wire-terminal {
    fill: var(--webversa-red);
    stroke: rgba(255, 232, 236, 0.85);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    filter:
        drop-shadow(0 0 4px var(--webversa-red)) drop-shadow(0 0 10px rgba(237, 32, 42, 0.85));
    transform-box: fill-box;
    transform-origin: center;
    transition:
        fill 0.3s ease,
        transform 0.3s ease,
        filter 0.3s ease;
}

.project-wire-monitor-terminal {
    fill: var(--webversa-white);
    stroke: var(--webversa-red);
    stroke-width: 1.5;
}

.project-wire-group.is-active,
.project-wire-group.is-hovering {
    opacity: 1;
}

.project-wire-group.is-active .project-wire-base,
.project-wire-group.is-hovering .project-wire-base {
    stroke: var(--webversa-red);
    stroke-width: 3.2;
    filter:
        drop-shadow(0 0 4px rgba(237, 32, 42, 1)) drop-shadow(0 0 15px rgba(237, 32, 42, 0.92));
}

.project-wire-group.is-active .project-wire-glow,
.project-wire-group.is-hovering .project-wire-glow {
    stroke: rgba(237, 32, 42, 0.36);
}

.project-wire-group.is-active .project-wire-flow,
.project-wire-group.is-hovering .project-wire-flow {
    opacity: 0.85;
}

.project-wire-group.is-active .project-wire-terminal,
.project-wire-group.is-hovering .project-wire-terminal {
    fill: var(--webversa-white);
    transform: scale(1.35) rotate(45deg);
    filter:
        drop-shadow(0 0 5px var(--webversa-white)) drop-shadow(0 0 14px var(--webversa-red));
}

.projects-monitor {
    z-index: 5 !important;
}

.projects-monitor::after {
    position: absolute;
    inset: 6% 3% 22%;
    z-index: -1;
    border: 1px solid rgba(237, 32, 42, 0.12);
    border-radius: 45%;
    box-shadow:
        0 0 60px rgba(237, 32, 42, 0.12),
        inset 0 0 55px rgba(237, 32, 42, 0.035);
    content: "";
    pointer-events: none;
}

@media (max-width: 1500px) {
    .project-node {
        flex-basis: 184px;
    }
}

@media (max-width: 1180px) {
    .projects-connectors-layer {
        display: none;
    }

    .project-node {
        width: 100%;
        flex-basis: auto;
    }

    .projects-side-left .project-row,
    .projects-side-right .project-row {
        display: block;
        padding: 0;
    }
}

.projects-section {
    padding: 92px 0 125px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 57%,
            rgba(237, 32, 42, 0.34) 0%,
            rgba(237, 32, 42, 0.17) 28%,
            rgba(0, 0, 0, 0) 58%),
        linear-gradient(180deg, #040404 0%, var(--webversa-black) 100%);
}

.projects-section::before {
    opacity: 0.22;
}

.projects-heading {
    margin-bottom: 18px;
}

.projects-stage {
    grid-template-columns:
        minmax(220px, 1fr) minmax(650px, 1000px) minmax(220px, 1fr);
    width: min(100%, 1800px);
    min-height: 720px;
    margin: 28px auto 0;
    padding-inline: clamp(24px, 4vw, 72px);
    column-gap: 0;
    overflow: visible;
}

.projects-side {
    grid-template-rows: repeat(4, 1fr);
    align-self: stretch;
    align-content: stretch;
    gap: 0;
    padding-block: 54px 92px;
}

.project-row,
.projects-side-left .project-row,
.projects-side-right .project-row {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
}

.projects-side-left .project-row {
    justify-content: flex-start;
}

.projects-side-right .project-row {
    justify-content: flex-end;
}

.project-node {
    flex: 0 0 clamp(178px, 12vw, 205px);
    width: clamp(178px, 12vw, 205px);
    height: 54px;
    padding: 8px 18px;
    border: 0;
    color: #101010;
    background: var(--webversa-white);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(249, 249, 249, 0.10);
    filter: none;
    isolation: isolate;
    overflow: visible;
}

.projects-side-left .project-node {
    clip-path: polygon(16px 0,
            100% 0,
            100% calc(100% - 16px),
            calc(100% - 16px) 100%,
            0 100%,
            0 16px);
}

.projects-side-right .project-node {
    clip-path: polygon(0 0,
            calc(100% - 16px) 0,
            100% 16px,
            100% 100%,
            16px 100%,
            0 calc(100% - 16px));
}

.project-node::before {
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(112deg,
            transparent 15%,
            rgba(237, 32, 42, 0.16) 48%,
            transparent 82%);
}

.project-node::after {
    display: none;
}

.project-node-label {
    color: #111111;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(12px, 0.92vw, 16px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

.project-node:hover,
.project-node:focus-visible,
.project-node.active {
    color: #080808;
    border: 0;
    background: var(--webversa-white);
    box-shadow:
        0 0 0 2px rgba(237, 32, 42, 0.90),
        0 0 24px rgba(237, 32, 42, 0.72),
        0 12px 30px rgba(0, 0, 0, 0.48);
    filter: none;
    transform: translateY(-2px) scale(1.025);
}

.project-node:hover .project-node-label,
.project-node:focus-visible .project-node-label,
.project-node.active .project-node-label {
    color: #111111;
}

.projects-monitor {
    z-index: 5 !important;
    align-self: center;
    padding-inline: 0;
    filter: none;
}

.projects-monitor::before,
.projects-monitor::after {
    display: none;
    content: none;
}

.projects-monitor-svg {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 670px;
    filter: none;
}

.projects-connectors-layer {
    z-index: 3;
}

.project-wire-group {
    opacity: 1;
}

.project-wire-glow {
    stroke: rgba(237, 32, 42, 0.34);
    stroke-width: 15;
    filter: blur(8px);
}

.project-wire-base {
    stroke: var(--webversa-red);
    stroke-width: 2.55;
    stroke-linecap: square;
    stroke-linejoin: miter;
    filter:
        drop-shadow(0 0 3px rgba(237, 32, 42, 1)) drop-shadow(0 0 10px rgba(237, 32, 42, 0.88)) drop-shadow(0 0 21px rgba(237, 32, 42, 0.42));
}

.project-wire-flow {
    stroke: rgba(255, 224, 230, 0.92);
    stroke-width: 0.85;
    stroke-dasharray: 4 30;
    opacity: 0.20;
}

.project-wire-terminal {
    display: none;
}

.project-wire-group.is-active .project-wire-base,
.project-wire-group.is-hovering .project-wire-base {
    stroke: var(--webversa-red);
    stroke-width: 3;
    filter:
        drop-shadow(0 0 4px rgba(237, 32, 42, 1)) drop-shadow(0 0 13px rgba(237, 32, 42, 1)) drop-shadow(0 0 27px rgba(237, 32, 42, 0.62));
}

.project-wire-group.is-active .project-wire-glow,
.project-wire-group.is-hovering .project-wire-glow {
    stroke: rgba(237, 32, 42, 0.48);
}

@media (max-width: 1450px) {
    .projects-stage {
        grid-template-columns:
            minmax(190px, 1fr) minmax(560px, 850px) minmax(190px, 1fr);
        padding-inline: 25px;
    }

    .project-node {
        flex-basis: 176px;
        width: 176px;
    }
}

@media (max-width: 1180px) {
    .projects-stage {
        display: grid;
        grid-template-columns: 1fr;
        width: min(100% - 32px, 850px);
        min-height: 0;
        padding: 0;
        row-gap: 28px;
    }

    .projects-monitor {
        order: 1;
    }

    .projects-side-left {
        order: 2;
    }

    .projects-side-right {
        order: 3;
    }

    .projects-side {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: none;
        align-self: auto;
        gap: 12px;
        padding: 0;
    }

    .project-node,
    .projects-side-left .project-node,
    .projects-side-right .project-node {
        width: 100%;
        height: 54px;
        flex-basis: auto;
        clip-path: polygon(12px 0,
                100% 0,
                100% calc(100% - 12px),
                calc(100% - 12px) 100%,
                0 100%,
                0 12px);
    }

    .projects-connectors-layer {
        display: none;
    }
}

@media (max-width: 700px) {
    .projects-stage {
        width: min(100% - 24px, 620px);
    }

    .projects-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-node {
        height: 52px;
    }

    .project-node-label {
        font-size: 11px;
    }
}

.projects-section::before,
.projects-section::after,
.industries-section::before,
.industries-section::after {
    border-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* Final responsive and integration fixes for this section */
.projects-section {
    width: 100%;
    overflow: clip;
}

.projects-stage,
.projects-monitor,
.projects-screen-content,
.projects-side {
    min-width: 0;
}

@media (max-width: 1180px) {
    .projects-stage {
        width: min(100% - 28px, 860px);
    }

    .projects-monitor {
        width: 100%;
    }

    .projects-side {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .projects-stage {
        width: calc(100% - 20px);
        row-gap: 18px;
    }

    .projects-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .project-node {
        min-width: 0;
        padding-inline: 8px;
    }

    .project-node-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .projects-monitor-svg {
        max-height: none;
    }
}

@media (max-width: 370px) {
    .projects-side {
        grid-template-columns: 1fr;
    }
}


.syh-contact-section,
.syh-contact-section * {
    box-sizing: border-box;
}

.syh-contact-section {
    --syh-red: var(--webversa-red);
    --syh-red-bright: var(--webversa-red);
    --syh-red-dark: var(--webversa-red);
    --syh-red-soft: rgba(237, 32, 42, 0.12);
    --syh-black: #050506;
    --syh-panel: #0f0f13;
    --syh-panel-light: #17171c;
    --syh-white: var(--webversa-white);
    --syh-muted: #a8a8b2;

    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 28px;

    color: var(--syh-white);
}

.syh-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
    align-items: stretch;
}

.syh-terminal {
    position: relative;
    min-width: 0;
    min-height: 500px;
    overflow: hidden;

    border: 1px solid rgba(237, 32, 42, 0.72);
    border-radius: 16px;

    background:
        radial-gradient(circle at 12% 8%,
            rgba(237, 32, 42, 0.09),
            transparent 34%),
        linear-gradient(145deg,
            rgba(18, 18, 22, 0.99),
            rgba(5, 5, 7, 0.99));

    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(249, 249, 249, 0.025) inset,
        0 0 34px rgba(237, 32, 42, 0.13);
}

.syh-terminal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(rgba(237, 32, 42, 0.018) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(237, 32, 42, 0.018) 1px,
            transparent 1px);

    background-size: 28px 28px;
}

.syh-terminal::after {
    content: "";
    position: absolute;
    inset: 46px 0 auto 0;
    height: 1px;
    pointer-events: none;

    background: linear-gradient(90deg,
            transparent,
            rgba(249, 249, 249, 0.13),
            transparent);
}

.syh-terminal__bar {
    position: relative;
    z-index: 2;

    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 16px 0 18px;

    color: var(--syh-white);
    background: linear-gradient(90deg,
            var(--syh-red),
            var(--syh-red-dark));

    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.syh-terminal__title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.syh-terminal__status {
    width: 8px;
    height: 8px;
    border-radius: 50%;

    background: var(--webversa-white);
    box-shadow: 0 0 10px rgba(249, 249, 249, 0.9);
}

.syh-terminal__actions {
    display: flex;
    align-items: center;
    gap: 9px;

    font-family: Arial, sans-serif;
    font-size: 18px;
}

.syh-terminal__body {
    position: relative;
    z-index: 2;

    min-height: 452px;
    padding: 25px 25px 50px;

    color: var(--syh-white);

    font-family: "Share Tech Mono", Consolas, monospace;
    font-size: clamp(0.9rem, 1.5vw, 1.04rem);
    line-height: 1.5;
}

.syh-terminal__intro {
    margin-bottom: 6px;
    font-weight: 700;
}

.syh-terminal__rule {
    max-width: 100%;
    margin-bottom: 24px;
    overflow: hidden;

    color: rgba(249, 249, 249, 0.56);
    white-space: nowrap;
}

.syh-terminal__history {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.syh-terminal__entry {
    margin-bottom: 17px;
}

.syh-terminal__entry strong {
    display: block;
    margin-bottom: 2px;

    color: var(--syh-red-bright);
    font-weight: 700;
}

.syh-terminal__prompt label {
    display: block;
    margin-bottom: 6px;

    color: var(--syh-red-bright);
    font-weight: 700;
}

.syh-terminal__input-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.syh-terminal__input-row>span {
    padding-top: 1px;

    color: var(--syh-red);
    font-weight: 700;
}

.syh-terminal__note {
    min-height: 23px;
    margin-top: 14px;

    color: var(--syh-red-bright);
    font-weight: 700;
}

.syh-terminal__note.is-success {
    color: var(--syh-white);
}

.syh-terminal__hint {
    position: absolute;
    right: 18px;
    bottom: 14px;

    color: rgba(249, 249, 249, 0.38);
    font-size: 12px;
}

@keyframes syhCursorBlink {
    50% {
        opacity: 0;
    }
}

.syh-qr-card {
    position: relative;
    isolation: isolate;
    min-height: 500px;
    overflow: hidden;

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

    padding: 31px 24px 23px;

    border: 1px solid rgba(237, 32, 42, 0.58);
    border-radius: 16px;

    background:
        linear-gradient(155deg,
            rgba(25, 25, 30, 0.98),
            rgba(7, 7, 9, 0.99));

    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(249, 249, 249, 0.025) inset,
        0 0 30px rgba(237, 32, 42, 0.1);
}

.syh-qr-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(rgba(237, 32, 42, 0.025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(237, 32, 42, 0.025) 1px,
            transparent 1px);

    background-size: 24px 24px;
}

.syh-qr-card::after {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;
    z-index: -1;

    width: 160px;
    height: 160px;
    border-radius: 50%;

    background: rgba(237, 32, 42, 0.17);
    filter: blur(55px);
}

.syh-qr-card__glow {
    position: absolute;
    bottom: -70px;
    left: 50%;
    z-index: -1;

    width: 220px;
    height: 150px;
    transform: translateX(-50%);

    border-radius: 50%;
    background: rgba(237, 32, 42, 0.15);
    filter: blur(55px);
}

.syh-qr-card__top {
    width: 100%;
    text-align: center;
}

.syh-qr-card__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 11px;
    padding: 6px 10px;

    border: 1px solid rgba(237, 32, 42, 0.45);
    border-radius: 999px;

    color: var(--syh-red-bright);
    background: rgba(237, 32, 42, 0.08);

    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.syh-qr-card h3 {
    margin: 0 0 9px;

    color: var(--syh-white);

    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.05;
}

.syh-qr-card p {
    margin: 0 auto;

    color: var(--syh-muted);

    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.55;
}

.syh-qr-frame {
    position: relative;
    width: 205px;
    height: 205px;
    margin: 27px auto 18px;
    padding: 12px;
}

.syh-qr-frame__inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    padding: 10px;

    border-radius: 10px;
    background: var(--webversa-white);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(237, 32, 42, 0.16);
}

.syh-qr-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.syh-qr-corner {
    position: absolute;
    z-index: 2;

    width: 31px;
    height: 31px;

    border-color: var(--syh-red);
    border-style: solid;
}

.syh-qr-corner--tl {
    top: 0;
    left: 0;
    border-width: 3px 0 0 3px;
}

.syh-qr-corner--tr {
    top: 0;
    right: 0;
    border-width: 3px 3px 0 0;
}

.syh-qr-corner--bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 3px 3px;
}

.syh-qr-corner--br {
    right: 0;
    bottom: 0;
    border-width: 0 3px 3px 0;
}

.syh-qr-scan-line {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;

    height: 2px;

    background: linear-gradient(90deg,
            transparent,
            var(--syh-red),
            transparent);

    box-shadow: 0 0 12px var(--syh-red);
    animation: syhQrScan 2.8s ease-in-out infinite;
}

@keyframes syhQrScan {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.2;
    }

    50% {
        transform: translateY(157px);
        opacity: 1;
    }
}

.syh-qr-card__url {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-bottom: 18px;

    color: rgba(249, 249, 249, 0.82);

    font-family: "Share Tech Mono", Consolas, monospace;
    font-size: 12px;
}

.syh-qr-card__url-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: var(--syh-red);
    box-shadow: 0 0 9px var(--syh-red);
}

.syh-qr-card__button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 15px;

    border: 1px solid var(--syh-red);
    border-radius: 8px;

    color: var(--webversa-white);
    background: linear-gradient(90deg,
            var(--syh-red),
            var(--syh-red-dark));

    box-shadow: 0 12px 28px rgba(237, 32, 42, 0.2);

    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.syh-qr-card__button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 16px 32px rgba(237, 32, 42, 0.28);
}

.syh-qr-card__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: auto;
    padding-top: 20px;

    color: rgba(249, 249, 249, 0.38);

    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.03em;
}

.syh-qr-card__secure span {
    color: var(--syh-red);
    font-size: 8px;
}

@media (max-width: 900px) {
    .syh-contact-layout {
        grid-template-columns: 1fr;
    }

    .syh-qr-card {
        min-height: auto;
    }

    .syh-qr-card__secure {
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .syh-contact-section {
        padding: 12px;
    }

    .syh-contact-layout {
        gap: 14px;
    }

    .syh-terminal,
    .syh-qr-card {
        border-radius: 11px;
    }

    .syh-terminal {
        min-height: 500px;
    }

    .syh-terminal__body {
        min-height: 452px;
        padding: 20px 16px 50px;
        font-size: 0.88rem;
    }

    .syh-terminal__rule {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .syh-qr-card {
        padding: 27px 19px 21px;
    }

    .syh-qr-frame {
        width: 195px;
        height: 195px;
    }

    @keyframes syhQrScan {

        0%,
        100% {
            transform: translateY(0);
            opacity: 0.2;
        }

        50% {
            transform: translateY(147px);
            opacity: 1;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .syh-qr-scan-line {
        animation: none;
    }
}

.wv-contact-wrap {
    border-top: 1px solid rgba(249, 249, 249, 0.07);
}

.wv-contact-wrap {
    width: min(1440px, 100%);
}

.wv-contact-heading {
    position: relative;
    z-index: 20;
    width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
    margin-inline: auto;
    text-align: center;
}

.wv-contact-heading .section-tag {
    justify-content: center;
}

.wv-contact-heading h2 {
    margin: 0;
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: clamp(32px, 4.2vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.wv-contact-heading p {
    max-width: 760px;
    margin: 18px auto 0;
    color: rgba(249, 249, 249, .72);
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.75;
}

.wv-contact-wrap {
    padding-top: clamp(72px, 8vw, 110px);
    padding-bottom: clamp(72px, 8vw, 110px);
}

.wv-contact-heading {
    margin-bottom: 34px;
}

.wv-contact-wrap .syh-contact-layout {
    width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
    margin-inline: auto;
}

.wv-contact-wrap .syh-contact-section {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .wv-contact-wrap * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    .wv-contact-wrap {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .wv-contact-wrap .syh-contact-layout {
        width: min(100% - 24px, 1180px);
    }
}

.wv-pro-services,
.industry-solutions,
.projects-section,
.syh-contact-section,
.wv-contact-wrap {
    padding-top: clamp(72px, 8vw, 112px);
}

.syh-contact-section {
    width: 100%;
    overflow: clip;
}

.syh-contact-layout,
.syh-terminal,
.syh-qr-card,
.syh-terminal__body,
.syh-terminal__input-row {
    min-width: 0;
}

.syh-terminal textarea {
    width: 100%;
    max-width: 100%;
    resize: none;
}

@media (max-width: 900px) {
    .syh-contact-layout {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 760px);
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .syh-contact-section {
        padding-inline: 0;
    }

    .syh-contact-layout {
        width: calc(100% - 20px);
    }

    .syh-terminal {
        min-height: 0;
    }

    .syh-terminal__body {
        min-height: 430px;
        padding: 18px 14px 48px;
    }

    .syh-terminal__title {
        min-width: 0;
        font-size: 13px;
    }

    .syh-terminal__actions {
        flex: 0 0 auto;
    }

    .syh-qr-card {
        min-height: 0;
        padding-inline: 16px;
    }

    .syh-qr-frame {
        width: min(195px, 66vw);
        height: auto;
        aspect-ratio: 1;
    }
}

.syh-qr-card__button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(249, 249, 249, .15) !important;
    color: var(--webversa-white) !important;
    background: #090909 !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .46) !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    transition: transform .32s ease, background .32s ease, box-shadow .32s ease !important;
}

.syh-qr-card__button:hover,
.syh-qr-card__button:focus-visible {
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red)) !important;
    box-shadow: 0 15px 32px rgba(0, 0, 0, .5), 0 0 26px rgba(237, 32, 42, .5) !important;
    transform: translateY(-3px) !important;
}

.wvf-footer,
.wvf-footer * {
    box-sizing: border-box;
}

.wvf-footer {
    --red: var(--primary, var(--webversa-red));
    --red2: var(--webversa-red);
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--webversa-black);
    color: var(--webversa-white);
}

.wvf-landmark-stage {
    position: relative;
    width: 100%;
    height: clamp(185px, 17vw, 320px);
    overflow: hidden;
    background: var(--webversa-black);
    isolation: isolate;
}

.wvf-moving-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: clamp(78px, 7.4vw, 138px);
    background-image: url("../Images/building-image.webp");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: auto 100%;
    animation: wvfSkylineMove 28s linear infinite;
    opacity: .92;
    pointer-events: none;
}

@keyframes wvfSkylineMove {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: -1200px;
    }
}

.wvf-quaid-img {
    position: absolute;
    left: clamp(0px, 1.2vw, 24px);
    bottom: 0;
    z-index: 3;
    display: block;
    width: clamp(175px, 14.5vw, 290px);
    max-height: 96%;
    height: auto;
    object-fit: contain;
    object-position: left bottom;
    pointer-events: none;
    user-select: none;
}

.wvf-london-img {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;
    display: block;
    width: clamp(430px, 35vw, 700px);
    max-height: 98%;
    height: auto;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
}

.wvf-statue-img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    width: clamp(205px, 17.5vw, 355px);
    max-height: 100%;
    height: auto;
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
    user-select: none;
}

.wvf-landmark-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: 12px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .75));
    pointer-events: none;
}

.wvf-footer-main {
    position: relative;
    z-index: 8;
    width: 100%;
    margin-top: -1px;
    background: linear-gradient(180deg, rgba(8, 8, 8, .97), var(--webversa-black) 58%);
}

.wvf-footer-inner {
    width: min(1740px, calc(100% - 64px));
    margin: 0 auto;
    padding: 30px 0 28px;
}

.wvf-footer-grid {
    display: grid;
    grid-template-columns:
        minmax(320px, 2.1fr) repeat(4, minmax(130px, .88fr)) minmax(210px, 1.12fr);
    gap: clamp(26px, 2.5vw, 52px);
    align-items: start;
}

.wvf-footer-grid>* {
    min-width: 0;
}

.wvf-brand {
    padding-top: 2px;
}

.wvf-brand p {
    max-width: 455px;
    margin: 0;
    color: var(--webversa-white);
    font-size: clamp(12px, .78vw, 14px);
    line-height: 1.68;
    font-weight: 600;
    text-transform: capitalize;
}

.wvf-contact-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--red);
    color: var(--webversa-white);
    text-decoration: none;
    font-size: 14px;
    transition: transform .2s ease, background .2s ease;
}

.wvf-col h3 {
    margin: 0 0 24px;
    color: var(--webversa-white);
    font-size: clamp(21px, 1.45vw, 28px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -.7px;
}

.wvf-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.wvf-links a {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    color: #ddd;
    text-decoration: none;
    font-size: clamp(11px, .68vw, 13px);
    line-height: 1.35;
    transition: color .2s ease, transform .2s ease;
    overflow-wrap: anywhere;
}

.wvf-links a:hover {
    color: var(--webversa-white);
    transform: translateX(2px);
}

.wvf-links a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--webversa-red);
}

.wvf-contact {
    display: grid;
    gap: 13px;
}

.wvf-contact a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: #eee;
    text-decoration: none;
    font-size: clamp(11px, .68vw, 13px);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wvf-contact a span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.wvf-bottom {
    position: relative;
    margin-top: 34px;
    padding-top: 17px;
    border-top: 1px solid rgba(249, 249, 249, .38);
}

.wvf-bottom p {
    margin: 0;
    color: var(--webversa-white);
    font-size: clamp(11px, .74vw, 14px);
    line-height: 1.5;
    font-weight: 600;
}

@media (max-width: 1280px) {
    .wvf-landmark-stage {
        height: clamp(210px, 21vw, 280px);
    }

    .wvf-quaid-img {
        width: 18vw;
        min-width: 160px;
        max-width: 235px;
    }

    .wvf-london-img {
        width: 43vw;
        min-width: 390px;
        max-width: 575px;
    }

    .wvf-statue-img {
        width: 21vw;
        min-width: 175px;
        max-width: 270px;
    }

    .wvf-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 40px;
    }

    .wvf-brand {
        grid-column: 1 / -1;
    }

    .wvf-brand p {
        max-width: 760px;
    }
}

@media (max-width: 820px) {
    .wvf-landmark-stage {
        height: clamp(165px, 29vw, 230px);
    }

    .wvf-moving-skyline {
        height: clamp(68px, 14vw, 105px);
        animation-duration: 32s;
    }

    .wvf-quaid-img {
        left: -1%;
        width: 26vw;
        min-width: 115px;
        max-width: 190px;
    }

    .wvf-london-img {
        width: 51vw;
        min-width: 260px;
        max-width: 430px;
    }

    .wvf-statue-img {
        right: -1%;
        width: 24vw;
        min-width: 105px;
        max-width: 180px;
    }

    .wvf-footer-inner {
        width: min(100% - 32px, 720px);
        padding-top: 27px;
    }

    .wvf-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 26px;
    }

    .wvf-brand {
        grid-column: 1 / -1;
    }

    .wvf-col h3 {
        margin-bottom: 17px;
    }

    .wvf-links {
        gap: 10px;
    }

    .wvf-bottom {
        margin-top: 30px;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .wvf-landmark-stage {
        height: 155px;
    }

    .wvf-moving-skyline {
        height: 67px;
        background-size: auto 100%;
    }

    .wvf-quaid-img {
        left: -8px;
        width: 29vw;
        min-width: 105px;
    }

    .wvf-london-img {
        width: 56vw;
        min-width: 220px;
    }

    .wvf-statue-img {
        right: -8px;
        width: 27vw;
        min-width: 100px;
    }

    .wvf-footer-inner {
        width: calc(100% - 28px);
        padding: 25px 0 24px;
    }

    .wvf-footer-grid {
        grid-template-columns: 1fr;
        gap: 29px;
    }

    .wvf-brand {
        grid-column: auto;
    }

    .wvf-brand p {
        max-width: 100%;
        font-size: 12px;
    }

    .wvf-col h3 {
        font-size: 21px;
        margin-bottom: 15px;
    }

    .wvf-links a,
    .wvf-contact a {
        font-size: 12px;
    }

    .wvf-bottom {
        margin-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wvf-moving-skyline {
        animation: none;
    }

    .wvf-links a {
        transition: none;
    }
}

.wvf-landmark-stage::before {
    content: "";
    position: absolute;
    left: -35%;
    bottom: 0;
    z-index: 6;
    width: 34%;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            rgba(237, 32, 42, .15),
            rgba(237, 32, 42, .95),
            rgba(249, 249, 249, .55),
            rgba(237, 32, 42, .15),
            transparent);
    filter: blur(.2px);
    opacity: 0;
    pointer-events: none;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-landmark-stage::before {
    animation: wvfFooterLightSweep 4.8s ease-in-out 1.05s infinite;
}

@keyframes wvfFooterLightSweep {
    0% {
        left: -35%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    55% {
        opacity: .75;
    }

    100% {
        left: 108%;
        opacity: 0;
    }
}

.wvf-footer.wvf-animate-ready .wvf-footer-grid>*,
.wvf-footer.wvf-animate-ready .wvf-bottom {
    opacity: 0;
    transform: translateY(26px);
}

.wvf-footer.wvf-animate-ready .wvf-quaid-img {
    opacity: 0;
    transform: translateX(-36px) scale(.985);
    filter: blur(4px);
}

.wvf-footer.wvf-animate-ready .wvf-london-img {
    opacity: 0;
    transform: translateX(-50%) translateY(24px) scale(.985);
    filter: blur(4px);
}

.wvf-footer.wvf-animate-ready .wvf-statue-img {
    opacity: 0;
    transform: translateX(36px) scale(.985);
    filter: blur(4px);
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-quaid-img {
    animation:
        wvfQuaidEnter .9s cubic-bezier(.2, .75, .25, 1) .05s forwards,
        wvfQuaidFloat 5.8s ease-in-out 1.1s infinite;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-london-img {
    animation:
        wvfLondonEnter 1s cubic-bezier(.2, .75, .25, 1) .16s forwards,
        wvfLondonFloat 6.4s ease-in-out 1.25s infinite;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-statue-img {
    animation:
        wvfStatueEnter .9s cubic-bezier(.2, .75, .25, 1) .28s forwards,
        wvfStatueFloat 6s ease-in-out 1.4s infinite;
}

@keyframes wvfQuaidEnter {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes wvfLondonEnter {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes wvfStatueEnter {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes wvfQuaidFloat {

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

    50% {
        transform: translateY(-4px);
    }
}

@keyframes wvfLondonFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes wvfStatueFloat {

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

    50% {
        transform: translateY(-4px);
    }
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-footer-grid>* {
    animation: wvfFooterColumnReveal .72s cubic-bezier(.2, .7, .2, 1) forwards;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-footer-grid>*:nth-child(1) {
    animation-delay: .36s;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-footer-grid>*:nth-child(2) {
    animation-delay: .44s;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-footer-grid>*:nth-child(3) {
    animation-delay: .52s;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-footer-grid>*:nth-child(4) {
    animation-delay: .60s;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-footer-grid>*:nth-child(5) {
    animation-delay: .68s;
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-footer-grid>*:nth-child(6) {
    animation-delay: .76s;
}

@keyframes wvfFooterColumnReveal {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wvf-footer.wvf-animate-ready.is-visible .wvf-bottom {
    animation: wvfFooterColumnReveal .72s cubic-bezier(.2, .7, .2, 1) .84s forwards;
}

.wvf-col h3 {
    position: relative;
}

.wvf-col h3::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--red2), rgba(237, 32, 42, 0));
    transition: width .5s ease;
}

.wvf-footer.is-visible .wvf-col h3::after {
    width: 34px;
}

.wvf-links a::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red2);
    opacity: 0;
    transform: translateY(-50%) scale(.4);
    transition: opacity .2s ease, transform .2s ease;
}

.wvf-links a:hover::before,
.wvf-links a:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.wvf-contact-icon {
    box-shadow: 0 0 0 rgba(237, 32, 42, 0);
    transition:
        transform .24s ease,
        background .24s ease,
        box-shadow .24s ease;
}

.wvf-contact a:hover .wvf-contact-icon,
.wvf-contact a:focus-visible .wvf-contact-icon {
    transform: rotate(-7deg) scale(1.06);
    background: var(--red2);
    box-shadow: 0 6px 18px rgba(237, 32, 42, .25);
}

.wvf-col h3 {
    transition: text-shadow .25s ease, color .25s ease;
}

.wvf-col:hover h3 {
    text-shadow: 0 0 18px rgba(237, 32, 42, .17);
}

.wvf-moving-skyline {
    will-change: background-position;
}

@media (max-width: 820px) {

    .wvf-footer.wvf-animate-ready.is-visible .wvf-quaid-img,
    .wvf-footer.wvf-animate-ready.is-visible .wvf-london-img,
    .wvf-footer.wvf-animate-ready.is-visible .wvf-statue-img {
        animation-duration: .7s, 7s;
    }

    .wvf-footer.wvf-animate-ready.is-visible .wvf-footer-grid>* {
        animation-duration: .55s;
    }
}

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

    .wvf-footer.wvf-animate-ready .wvf-footer-grid>*,
    .wvf-footer.wvf-animate-ready .wvf-bottom,
    .wvf-footer.wvf-animate-ready .wvf-quaid-img,
    .wvf-footer.wvf-animate-ready .wvf-london-img,
    .wvf-footer.wvf-animate-ready .wvf-statue-img {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    .wvf-footer.wvf-animate-ready .wvf-london-img {
        transform: translateX(-50%) !important;
    }

    .wvf-landmark-stage::before {
        display: none;
    }
}

.wvf-brand-logo {
    display: block;
    width: clamp(150px, 11vw, 205px);
    max-width: 100%;
    height: auto;
    margin: 0 0 16px;
    object-fit: contain;
    object-position: left center;
}

.wvf-links a:focus-visible,
.wvf-contact a:focus-visible {
    outline: 2px solid var(--red2);
    outline-offset: 4px;
}

.wvf-contact-link-label {
    color: rgba(249, 249, 249, .62);
    display: block;
    font-size: 10px;
    line-height: 1.25;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.wvf-contact-link-value {
    display: block;
    color: var(--webversa-white);
}

.wv-navbar-button-animation {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.wv-navbar-button-animation:focus-visible {
    outline: 2px solid var(--webversa-white);
    outline-offset: 4px;
}

.wv-section-heading {
    position: relative;
    z-index: 25;
    width: min(920px, calc(100% - 36px));
    margin: 0 auto clamp(34px, 4.5vw, 62px);
    text-align: center;
}

.wv-section-heading .wv-heading-kicker,
.wv-section-heading>.section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 12px;
    color: var(--webversa-red);
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.3;
    text-transform: uppercase;
}

.wv-section-heading .wv-heading-kicker::before,
.wv-section-heading .wv-heading-kicker::after {
    width: clamp(28px, 4vw, 54px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--webversa-red));
    content: "";
}

.wv-section-heading .wv-heading-kicker::after {
    background: linear-gradient(90deg, var(--webversa-red), transparent);
}

.wv-section-heading h2,
.projects-heading.wv-section-heading h2,
.wv-contact-heading.wv-section-heading h2 {
    margin: 0;
    color: var(--webversa-white);
    font-family: "Space Grotesk", sans-serif !important;
    font-size: clamp(30px, 4.15vw, 58px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.72);
}

.wv-section-heading p,
.projects-heading.wv-section-heading p,
.wv-contact-heading.wv-section-heading p {
    max-width: 760px;
    margin: 15px auto 0;
    color: rgba(249, 249, 249, 0.68);
    font-family: "Poppins", sans-serif;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.75;
}

.wv-pro-services>.wv-section-heading,
.industry-solutions>.wv-section-heading {
    flex: 0 0 auto;
}

.wv-section-heading {
    width: min(100% - (var(--fluid-page-gutter) * 2), 920px);
    margin-inline: auto;
}

.wv-section-heading h2,
.wv-section-heading p {
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .wv-section-heading {
        width: calc(100% - 28px);
    }

    .wv-section-heading h2 {
        font-size: clamp(28px, 10vw, 42px);
    }

    .wv-section-heading p {
        font-size: 14px;
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

html,
body {
    background: var(--webversa-black) !important;
}

main,
main>section {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-style: none !important;
    box-shadow: none !important;
}

main>section::before,
main>section::after {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

@media (max-width: 1120px) {

    .site-header,
    .navbar-area {
        isolation: isolate;
        overflow: visible !important;
    }

    .site-header {
        z-index: 5000 !important;
    }

    .center-navbar,
    .site-header.is-scrolled .center-navbar {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        z-index: 5002 !important;
        width: min(390px, 92vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 94px 24px 30px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        visibility: hidden;
        opacity: 0;
        background: #050505 !important;
        border: 0 !important;
        border-left: 1px solid rgba(249, 249, 249, 0.12) !important;
        box-shadow: -22px 0 65px rgba(0, 0, 0, 0.78) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        clip-path: none !important;
        transform: translate3d(104%, 0, 0) !important;
        transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility 0s linear .42s !important;
    }

    .center-navbar.show,
    .site-header.is-scrolled .center-navbar.show {
        visibility: visible;
        opacity: 1;
        transform: translate3d(0, 0, 0) !important;
        transition-delay: 0s !important;
    }

    .center-navbar::before,
    .center-navbar::after {
        display: none !important;
    }

    .menu-toggle,
    .site-header.is-scrolled .menu-toggle {
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 5004 !important;
    }

    .brand-logo,
    .site-header.is-scrolled .brand-logo,
    .site-header.is-logo-docked .brand-logo {
        z-index: 5003 !important;
    }

    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 4999 !important;
        display: block;
        background: rgba(0, 0, 0, 0.72) !important;
        border: 0 !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

@media (max-width: 480px) {

    .center-navbar,
    .site-header.is-scrolled .center-navbar {
        width: 100vw !important;
        padding-inline: 20px !important;
        border-left: 0 !important;
    }
}

.projects-section {
    overflow: hidden;
}

.projects-stage.is-visible .project-node,
.projects-stage.is-visible .projects-monitor {
    animation-fill-mode: both;
}

.project-node {
    will-change: transform, opacity;
}

.project-row:nth-child(3) .project-node {
    animation-delay: .42s !important;
}

.projects-screen-content.project-preview-enter {
    animation: projectPreviewEnter .7s cubic-bezier(.16, 1, .3, 1);
}

@keyframes projectPreviewEnter {
    0% {
        opacity: .35;
        transform: scale(.985) translateY(12px);
        filter: saturate(.7) brightness(1.3);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: saturate(1) brightness(1);
    }
}

@media (max-width: 1180px) {
    .projects-stage {
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .projects-side {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        gap: 12px !important;
        padding-block: 0 !important;
    }

    .project-node {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 700px) {
    .projects-side {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .projects-monitor {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-screen-content.project-preview-enter {
        animation: none !important;
    }
}

.wv-pro-services .wv-service-card {
    transition:
        transform .58s cubic-bezier(.16, 1, .3, 1),
        opacity .4s ease,
        filter .4s ease !important;
}

.wv-pro-services .wv-service-card.wv-active {
    z-index: 5;
    transform: translateY(-7px) scale(1.035);
}

.wv-pro-services .wv-service-card.wv-active .wv-tech-box {
    animation: premiumServiceActivate .72s cubic-bezier(.16, 1, .3, 1) both;
}

.wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
    animation: premiumServiceIcon .72s cubic-bezier(.16, 1, .3, 1) both;
}

.wv-pro-services .wv-service-card.wv-active .wv-circuit-connector {
    filter: drop-shadow(0 0 7px rgba(237, 32, 42, .72));
}

.wv-pro-services .wv-service-detail.wv-detail-refresh {
    animation: premiumServiceDetail .68s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes premiumServiceActivate {
    0% {
        opacity: .45;
        transform: translateY(10px) scale(.88) rotateX(12deg);
        filter: brightness(1.75) saturate(.65);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0);
        filter: brightness(1) saturate(1);
    }
}

@keyframes premiumServiceIcon {
    0% {
        opacity: 0;
        transform: scale(.55) rotate(-12deg);
    }

    65% {
        transform: scale(1.16) rotate(3deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes premiumServiceDetail {
    0% {
        opacity: .3;
        transform: translateY(18px) scale(.992);
        filter: brightness(1.28);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}

.premium-cta {
    position: relative !important;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 150px;
    min-height: 48px;
    padding: 12px 28px !important;
    overflow: hidden !important;
    border: 1px solid rgba(249, 249, 249, .14) !important;
    border-radius: 0 !important;
    color: var(--webversa-white) !important;
    background:
        linear-gradient(135deg, rgba(249, 249, 249, .08), transparent 38%),
        linear-gradient(115deg, var(--webversa-red) 0%, var(--webversa-red) 52%, var(--webversa-red) 100%) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .38),
        0 0 18px rgba(237, 32, 42, .26),
        inset 0 1px 0 rgba(249, 249, 249, .16) !important;
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px) !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    line-height: 1.2;
    text-transform: uppercase;
    transform: translateZ(0);
    transition:
        transform .42s cubic-bezier(.16, 1, .3, 1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .42s ease !important;
}

.premium-cta::before {
    position: absolute !important;
    inset: -80% -35% !important;
    z-index: -1 !important;
    width: 38% !important;
    height: 260% !important;
    border: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(249, 249, 249, .34), transparent) !important;
    box-shadow: none !important;
    content: "" !important;
    opacity: .5;
    pointer-events: none;
    transform: translateX(-260%) rotate(18deg) !important;
    transition: transform .85s cubic-bezier(.16, 1, .3, 1), opacity .35s ease !important;
}

.premium-cta::after {
    position: absolute !important;
    inset: 3px !important;
    z-index: -1 !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid rgba(249, 249, 249, .07) !important;
    background: linear-gradient(180deg, rgba(249, 249, 249, .045), transparent) !important;
    box-shadow: none !important;
    content: "" !important;
    opacity: 1 !important;
    pointer-events: none;
    transform: none !important;
}

.premium-cta:hover,
.premium-cta:focus-visible {
    border-color: rgba(249, 249, 249, .46) !important;
    background:
        linear-gradient(135deg, rgba(249, 249, 249, .13), transparent 40%),
        linear-gradient(115deg, var(--webversa-red) 0%, var(--webversa-red) 52%, var(--webversa-red) 100%) !important;
    box-shadow:
        0 17px 34px rgba(0, 0, 0, .46),
        0 0 36px rgba(237, 32, 42, .68),
        inset 0 1px 0 rgba(249, 249, 249, .28) !important;
    transform: translateY(-4px) scale(1.025) !important;
}

.premium-cta:hover::before,
.premium-cta:focus-visible::before {
    opacity: .9;
    transform: translateX(680%) rotate(18deg) !important;
}

.premium-cta:active {
    transform: translateY(-1px) scale(.985) !important;
}

.premium-moving-border> :not(.premium-cta-line) {
    position: relative;
    z-index: 3;
}

.premium-moving-border>.premium-cta-line {
    position: absolute !important;
    z-index: 8 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(249, 249, 249, .95));
}

.premium-moving-border>.premium-cta-line--top {
    top: 0 !important;
    left: -100%;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--webversa-white)) !important;
    animation: premiumCtaTop 2.4s linear infinite !important;
}

.premium-moving-border>.premium-cta-line--right {
    top: -100%;
    right: 0 !important;
    width: 2px !important;
    height: 100% !important;
    background: linear-gradient(180deg, transparent, var(--webversa-white)) !important;
    animation: premiumCtaRight 2.4s linear .6s infinite !important;
}

.premium-moving-border>.premium-cta-line--bottom {
    right: -100%;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(270deg, transparent, var(--webversa-white)) !important;
    animation: premiumCtaBottom 2.4s linear 1.2s infinite !important;
}

.premium-moving-border>.premium-cta-line--left {
    bottom: -100%;
    left: 0 !important;
    width: 2px !important;
    height: 100% !important;
    background: linear-gradient(0deg, transparent, var(--webversa-white)) !important;
    animation: premiumCtaLeft 2.4s linear 1.8s infinite !important;
}

@keyframes premiumCtaTop {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

@keyframes premiumCtaRight {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

@keyframes premiumCtaBottom {
    0% {
        right: -100%;
    }

    50%,
    100% {
        right: 100%;
    }
}

@keyframes premiumCtaLeft {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}

@media (max-width: 700px) {
    .premium-cta {
        min-height: 46px;
        padding: 11px 22px !important;
        font-size: 12px !important;
    }
}

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

    .wv-pro-services .wv-service-card.wv-active .wv-tech-box,
    .wv-pro-services .wv-service-card.wv-active .wv-chip-icon,
    .wv-pro-services .wv-service-detail.wv-detail-refresh,
    .premium-moving-border>.premium-cta-line {
        animation: none !important;
    }
}

.wv-scroll-tools {
    position: fixed;
    top: 50%;
    right: clamp(12px, 1.55vw, 28px);
    z-index: 3600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    height: min(72vh, 720px);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(18px, -48%, 0) scale(.96);
    transition:
        opacity .42s ease,
        transform .62s cubic-bezier(.16, 1, .3, 1);
}

.wv-scroll-tools.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, -50%, 0) scale(1);
}

.wv-scroll-progress {
    position: relative;
    flex: 1 1 auto;
    width: 8px;
    min-height: 180px;
    overflow: hidden;
    border: 1px solid rgba(249, 249, 249, .2);
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(249, 249, 249, .13), transparent 35%, rgba(249, 249, 249, .07)),
        #080808;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 14px rgba(249, 249, 249, .05),
        inset 0 0 7px rgba(249, 249, 249, .09);
}

.wv-scroll-progress::before {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1px;
    height: calc(100% - 4px);
    background: linear-gradient(to bottom, transparent, rgba(249, 249, 249, .4), transparent);
    content: "";
    opacity: .65;
}

.wv-scroll-progress__thumb {
    position: absolute;
    top: 0;
    left: -1px;
    width: 8px;
    height: clamp(68px, 9vh, 92px);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--webversa-red), var(--webversa-red));
    box-shadow:
        0 0 10px rgba(237, 32, 42, .62),
        inset 1px 0 0 rgba(249, 249, 249, .14);
    will-change: transform;
    transition: transform .12s linear;
}

.wv-scroll-progress__thumb::after {
    position: absolute;
    inset: 5px 2px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(249, 249, 249, .14), transparent 38%);
    content: "";
}

.wv-scroll-top-button.premium-cta {
    flex: 0 0 48px;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-color: rgba(249, 249, 249, .12) !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%) !important;
}

.wv-scroll-top-button i {
    position: relative;
    z-index: 5;
    font-size: 18px;
    filter: drop-shadow(0 0 5px rgba(249, 249, 249, .35));
    transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}

.wv-scroll-top-button:hover i,
.wv-scroll-top-button:focus-visible i {
    transform: translateY(-3px);
}

@media (max-width: 700px) {
    .wv-scroll-tools {
        right: 9px;
        height: min(56vh, 500px);
        gap: 10px;
    }

    .wv-scroll-progress {
        width: 6px;
        min-height: 150px;
    }

    .wv-scroll-progress__thumb {
        left: -1px;
        width: 6px;
        height: 62px;
    }

    .wv-scroll-top-button.premium-cta {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-height: 540px) {
    .wv-scroll-tools {
        height: 72vh;
    }

    .wv-scroll-progress__thumb {
        height: 52px;
    }
}

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

    .wv-scroll-tools,
    .wv-scroll-progress__thumb,
    .wv-scroll-top-button i {
        transition: none !important;
    }
}

.wv-scroll-top-button {
    position: absolute !important;
    right: 12px !important;
    bottom: 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(249, 249, 249, .16) !important;
    color: var(--webversa-white) !important;
    background: #080808 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45) !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%) !important;
    cursor: pointer;
    transition: transform .32s ease, background .32s ease, box-shadow .32s ease !important;
}

.wv-scroll-top-button:hover,
.wv-scroll-top-button:focus-visible {
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red)) !important;
    box-shadow: 0 0 24px rgba(237, 32, 42, .5) !important;
    transform: translateY(-3px) !important;
}

@media (max-width: 700px) {
    .wv-scroll-top-button {
        right: 9px !important;
        bottom: 6px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

.hero-section {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .64) 44%, rgba(0, 0, 0, .38) 72%, rgba(0, 0, 0, .58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .08) 58%, var(--webversa-black) 100%),
        url("../Images/robot-lady.webp") center center / cover no-repeat !important;
}

.hero-section .hero-content,
.hero-section .slider-container {
    position: relative;
    z-index: 3;
}

.premium-moving-border:not(.menu-toggle) {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    border-color: rgba(249, 249, 249, .16) !important;
    color: var(--webversa-white) !important;
    background:
        linear-gradient(135deg, rgba(249, 249, 249, .075), transparent 40%),
        linear-gradient(115deg, var(--webversa-red) 0%, var(--webversa-red) 52%, var(--webversa-red) 100%) !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .38),
        0 0 16px rgba(237, 32, 42, .24),
        inset 0 1px 0 rgba(249, 249, 249, .12) !important;
    transition:
        transform .38s cubic-bezier(.16, 1, .3, 1),
        border-color .3s ease,
        background .3s ease,
        box-shadow .38s ease !important;
}

.premium-moving-border:not(.menu-toggle):hover,
.premium-moving-border:not(.menu-toggle):focus-visible,
.premium-moving-border:not(.menu-toggle).active {
    border-color: rgba(249, 249, 249, .48) !important;
    color: var(--webversa-white) !important;
    background:
        linear-gradient(135deg, rgba(249, 249, 249, .14), transparent 42%),
        linear-gradient(115deg, var(--webversa-red) 0%, var(--webversa-red) 52%, var(--webversa-red) 100%) !important;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, .45),
        0 0 30px rgba(237, 32, 42, .58),
        inset 0 1px 0 rgba(249, 249, 249, .25) !important;
}

.premium-moving-border .project-node-label {
    color: inherit !important;
}

.premium-moving-border>.premium-cta-line {
    opacity: .95;
    filter:
        drop-shadow(0 0 4px rgba(249, 249, 249, 1)) drop-shadow(0 0 8px rgba(237, 32, 42, .85));
}

.wv-scroll-tools {
    top: 104px;
    right: clamp(5px, .75vw, 12px);
    bottom: 16px;
    height: auto;
    transform: translate3d(18px, 0, 0) scale(.98);
}

.wv-scroll-tools.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
}

.wv-scroll-progress {
    min-height: 220px;
}

.wv-scroll-top-button.premium-moving-border {
    border: 1px solid rgba(249, 249, 249, .2) !important;
}

@media (max-width: 900px) {
    .hero-section {
        background-position: 58% center !important;
    }

    .wv-scroll-tools {
        top: 88px;
        right: 6px;
        bottom: 10px;
        height: auto;
    }
}

@media (max-width: 560px) {
    .hero-section {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .68) 68%, var(--webversa-black) 100%),
            url("../Images/robot-lady.webp") 59% center / cover no-repeat !important;
    }

    .wv-scroll-tools {
        top: 82px;
        right: 4px;
        bottom: 8px;
    }
}

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.wv-scroll-tools {
    right: 6px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 48px;
    justify-items: center;
    width: 52px;
    gap: 12px;
}

.wv-scroll-progress {
    width: 8px;
    height: 100%;
    min-height: 0;
}

.wv-scroll-top-button.premium-cta {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 700px) {
    .wv-scroll-tools {
        right: 3px;
        grid-template-rows: minmax(0, 1fr) 44px;
        width: 48px;
        gap: 9px;
    }

    .wv-scroll-progress {
        width: 6px;
        min-height: 0;
    }
}

.hero-section {
    position: relative;
    isolation: isolate;
    min-height: clamp(640px, 78svh, 820px);
    padding: 142px 20px 168px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .36) 44%, rgba(0, 0, 0, .27) 70%, rgba(0, 0, 0, .48) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .14) 0%, transparent 48%, rgba(0, 0, 0, .52) 82%, var(--webversa-black) 100%),
        url("../Images/robot-lady-2.webp") center center / cover no-repeat !important;
}

.hero-section::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    clip-path: none !important;
    background-image:
        linear-gradient(rgba(249, 249, 249, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249, 249, 249, .11) 1px, transparent 1px) !important;
    background-size: 96px 96px !important;
    background-position: center !important;
    content: "";
    opacity: .24;
    pointer-events: none;
}

.hero-section::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    clip-path: none !important;
    background:
        radial-gradient(circle at 50% 48%, transparent 0%, rgba(0, 0, 0, .08) 44%, rgba(0, 0, 0, .5) 100%),
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .56) 88%, var(--webversa-black) 100%) !important;
    content: "";
    pointer-events: none;
}

.hero-section .hero-content {
    position: relative;
    z-index: 5;
    width: min(780px, calc(100% - 28px));
    transform: translateY(-12px);
}

.hero-section .code-window {
    width: min(750px, 100%);
    border: 1px solid rgba(249, 249, 249, .2);
    border-radius: 13px;
    background:
        linear-gradient(115deg, rgba(237, 32, 42, .42), rgba(13, 14, 24, .85) 62%),
        rgba(4, 4, 7, .78);
    box-shadow:
        0 25px 65px rgba(0, 0, 0, .72),
        0 0 38px rgba(237, 32, 42, .16),
        inset 0 1px 0 rgba(249, 249, 249, .1);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.hero-section .window-header {
    background: linear-gradient(90deg, rgba(249, 249, 249, .09), rgba(5, 5, 8, .55));
}

.hero-section .slider-container {
    position: absolute;
    left: -6%;
    bottom: 34px;
    z-index: 6;
    width: 112%;
    transform: rotate(-6deg);
    transform-origin: center;
}

.hero-section .slider {
    height: 92px;
    border-top: 1px solid rgba(249, 249, 249, .28);
    border-bottom: 2px solid rgba(237, 32, 42, .42);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(31, 31, 41, .7) 45%, rgba(0, 0, 0, .9)),
        rgba(0, 0, 0, .72);
    box-shadow:
        0 -14px 42px rgba(0, 0, 0, .45),
        0 20px 45px rgba(0, 0, 0, .74),
        inset 0 1px 0 rgba(249, 249, 249, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-section .slide {
    height: 90px;
}

.hero-section .slide i {
    color: rgba(249, 249, 249, .88);
    font-size: 42px;
    filter: drop-shadow(0 0 8px rgba(249, 249, 249, .2));
}

.wv-scroll-tools {
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 74px;
    height: 100dvh;
    transform: translate3d(16px, 0, 0);
}

.wv-scroll-tools.is-visible {
    transform: translate3d(0, 0, 0);
}

.wv-scroll-progress {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

.wv-scroll-top-button.premium-cta {
    position: absolute !important;
    right: 20px !important;
    bottom: 24px !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .hero-section {
        min-height: max(640px, 84svh);
        padding: 118px 16px 148px;
        background-position: 55% center !important;
    }

    .hero-section::before {
        background-size: 72px 72px !important;
    }

    .hero-section .hero-content {
        width: min(720px, calc(100% - 20px));
        transform: translateY(-4px);
    }

    .hero-section .slider-container {
        left: -9%;
        bottom: 30px;
        width: 118%;
        transform: rotate(-5deg);
    }
}

@media (max-width: 600px) {
    .hero-section {
        min-height: max(620px, 100svh);
        padding: 104px 12px 132px;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .26) 48%, rgba(0, 0, 0, .72) 84%, var(--webversa-black) 100%),
            url("../Images/robot-lady-2.webp") 51% center / cover no-repeat !important;
    }

    .hero-section::before {
        background-size: 54px 54px !important;
        opacity: .18;
    }

    .hero-section .hero-content {
        width: 100%;
        transform: translateY(-18px);
    }

    .hero-section .slider-container {
        left: -13%;
        bottom: 26px;
        width: 126%;
        transform: rotate(-4deg);
    }

    .hero-section .slider,
    .hero-section .slide {
        height: 72px;
    }

    .hero-section .slide i {
        font-size: 31px;
    }

    .wv-scroll-tools {
        width: 66px;
    }

    .wv-scroll-progress {
        width: 6px;
    }

    .wv-scroll-top-button.premium-cta {
        right: 15px !important;
        bottom: 16px !important;
    }
}

html,
body,
main {
    background: var(--webversa-black) !important;
}

main>section:not(.hero-section) {
    background-color: var(--webversa-black) !important;
}

.services-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--webversa-black);
    padding: 20px 0;
    border-top: 1px solid rgba(249, 249, 249, 0.08);
    border-bottom: 1px solid rgba(249, 249, 249, 0.08);
}

.services-marquee::before,
.services-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 5;
    width: 120px;
    height: 100%;
    pointer-events: none;
}

.services-marquee::before {
    left: 0;
    background: linear-gradient(to right,
            var(--webversa-black),
            transparent);
}

.services-marquee::after {
    right: 0;
    background: linear-gradient(to left,
            var(--webversa-black),
            transparent);
}

.services-marquee-track {
    display: flex;
    width: max-content;
    animation: servicesScroll 40s linear infinite;
    will-change: transform;
}

.services-marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.service-marquee-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    color: #f5f5f5;
    font-size: clamp(24px, 2.2vw, 42px);
    font-weight: 500;
    letter-spacing: -1px;
}

.service-marquee-item .highlight {
    color: var(--webversa-red);
    font-weight: 700;
}

.service-marquee-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 34px;
    color: var(--webversa-white);
    font-size: 10px;
    font-weight: 20;
}

@keyframes servicesScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.services-marquee:hover .services-marquee-track {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .services-marquee {
        padding: 22px 0;
    }

    .services-marquee-track {
        animation-duration: 20s;
    }

    .service-marquee-item {
        font-size: 24px;
        letter-spacing: -0.5px;
    }

    .service-marquee-separator {
        margin: 0 22px;
        font-size: 24px;
    }

    .services-marquee::before,
    .services-marquee::after {
        width: 50px;
    }
}

@media (max-width: 480px) {
    .services-marquee {
        padding: 18px 0;
    }

    .services-marquee-track {
        animation-duration: 17s;
    }

    .service-marquee-item {
        font-size: 20px;
    }

    .service-marquee-separator {
        margin: 0 18px;
        font-size: 20px;
    }
}

.projects-stage {
    --projects-monitor-shift: 25px;
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.projects-stage>.projects-monitor {
    position: relative;
    top: var(--projects-monitor-shift);
    z-index: 5 !important;
}

.projects-stage>.projects-side {
    position: relative;
    z-index: 4;
}

.projects-stage>.projects-connectors-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none;
}

.projects-connectors-layer .project-wire-group {
    opacity: 0.82;
    transition: opacity 0.3s ease;
}

.projects-connectors-layer .project-wire-glow,
.projects-connectors-layer .project-wire-base,
.projects-connectors-layer .project-wire-flow {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.projects-connectors-layer .project-wire-glow {
    stroke: rgba(237, 32, 42, 0.30);
    stroke-width: 13;
    filter: blur(6px);
}

.projects-connectors-layer .project-wire-base {
    stroke: var(--webversa-red);
    stroke-width: 2.7;
    filter:
        drop-shadow(0 0 3px rgba(237, 32, 42, 1)) drop-shadow(0 0 10px rgba(237, 32, 42, 0.90)) drop-shadow(0 0 22px rgba(237, 32, 42, 0.50));
}

.projects-connectors-layer .project-wire-flow {
    stroke: rgba(255, 238, 241, 0.92);
    stroke-width: 0.9;
    stroke-dasharray: 5 28;
    opacity: 0.22;
    filter: drop-shadow(0 0 5px rgba(237, 32, 42, 0.92));
    animation: stableProjectWireFlow 1.55s linear infinite;
}

@keyframes stableProjectWireFlow {
    to {
        stroke-dashoffset: -66;
    }
}

.projects-connectors-layer .project-wire-group.is-active,
.projects-connectors-layer .project-wire-group.is-hovering {
    opacity: 1;
}

.projects-connectors-layer .project-wire-group.is-active .project-wire-base,
.projects-connectors-layer .project-wire-group.is-hovering .project-wire-base {
    stroke: var(--webversa-red);
    stroke-width: 3.15;
    filter:
        drop-shadow(0 0 4px rgba(237, 32, 42, 1)) drop-shadow(0 0 14px rgba(237, 32, 42, 1)) drop-shadow(0 0 29px rgba(237, 32, 42, 0.68));
}

.projects-connectors-layer .project-wire-group.is-active .project-wire-glow,
.projects-connectors-layer .project-wire-group.is-hovering .project-wire-glow {
    stroke: rgba(237, 32, 42, 0.48);
}

.projects-connectors-layer .project-wire-group.is-active .project-wire-flow,
.projects-connectors-layer .project-wire-group.is-hovering .project-wire-flow {
    opacity: 0.88;
}

@media (max-width: 1180px) {
    .projects-stage {
        --projects-monitor-shift: 0px;
    }

    .projects-stage>.projects-monitor {
        top: 0;
        width: 100%;
        margin-inline: auto;
    }

    .projects-stage>.projects-connectors-layer {
        display: none !important;
    }

    .projects-side-left .project-row,
    .projects-side-right .project-row {
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 620px) {
    .projects-stage {
        width: calc(100% - 20px) !important;
        row-gap: 18px !important;
    }

    .projects-monitor-svg {
        width: 100%;
        height: auto;
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-connectors-layer .project-wire-flow {
        animation: none !important;
    }
}

:root {
    --layout-container: 1180px;
    --layout-gutter: clamp(16px, 4vw, 48px);
    --layout-section-space: clamp(72px, 8vw, 112px);
    --layout-section-space-mobile: clamp(58px, 15vw, 78px);
}

html {
    width: 100%;
    overflow-x: clip;
    scroll-padding-top: 112px;
}

body {
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    overflow-x: clip;
    color: var(--webversa-white);
    background: var(--webversa-black);
    font-family: "Poppins", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    display: block;
    width: 100%;
    overflow: clip;
}

main>section {
    width: 100%;
    max-width: none;
    scroll-margin-top: 112px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.wv-section-heading,
.projects-heading.wv-section-heading,
.wv-contact-heading.wv-section-heading {
    width: min(920px, calc(100% - (var(--layout-gutter) * 2)));
    margin: 0 auto clamp(34px, 4.4vw, 58px);
    padding-inline: 0;
}

.wv-section-heading h2,
.projects-heading.wv-section-heading h2,
.wv-contact-heading.wv-section-heading h2 {
    text-wrap: balance;
}

.wv-section-heading p,
.projects-heading.wv-section-heading p,
.wv-contact-heading.wv-section-heading p {
    text-wrap: pretty;
}

.services-section {
    min-height: 0 !important;
    padding: var(--layout-section-space) 0 !important;
    overflow: clip;
}

.services-section>.page-container.services-layout {
    width: min(var(--layout-container), calc(100% - (var(--layout-gutter) * 2))) !important;
    max-width: var(--layout-container) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

.services-layout {
    grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
}

.services-copy,
.services-visual {
    min-width: 0;
}

.services-copy h1 {
    max-width: 760px;
    margin-bottom: 20px;
    font-size: clamp(38px, 4.5vw, 62px);
    text-wrap: balance;
}

.services-copy .description {
    max-width: 720px;
    margin-bottom: 34px;
    color: rgba(249, 249, 249, .7);
}

.services-visual {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.flip-card {
    width: min(560px, 100%);
    margin-inline: auto;
}

.about-section {
    background:
        radial-gradient(circle at 18% 44%, rgba(237, 32, 42, .11), transparent 34%),
        linear-gradient(180deg, var(--webversa-black), #050505 50%, var(--webversa-black));
}

.about-section .overlay-frame {
    filter: saturate(.92) contrast(1.04);
}

.wv-pro-services,
.wv-showcase-section,
.industry-solutions,
.projects-section,
.syh-contact-section,
.wv-contact-wrap {
    min-height: 0 !important;
}

.wv-pro-services,
.wv-showcase-section,
.industry-solutions,
.projects-section,
.syh-contact-section {
    padding-top: var(--layout-section-space) !important;
    padding-bottom: var(--layout-section-space) !important;
}

.wv-services-viewport,
.wv-service-detail,
.wv-showcase-container,
.wv-infra-circuit-container,
.solutions-container,
.projects-stage,
.syh-contact-layout {
    min-width: 0;
}

.services-marquee {
    width: 100%;
    margin: 0;
    padding: clamp(20px, 2.4vw, 32px) 0;
    overflow: hidden;
    border-top: 1px solid rgba(249, 249, 249, .08);
    border-bottom: 1px solid rgba(249, 249, 249, .08);
}

.wv-section-button-animation {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
}

.wv-section-button-animation> :not(.wv-section-button-line) {
    position: relative;
    z-index: 3;
}

.wv-section-button-animation>.wv-section-button-line {
    position: absolute !important;
    z-index: 8 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 5px rgba(249, 249, 249, .88));
}

@keyframes wvButtonLineTop {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

@keyframes wvButtonLineRight {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

@keyframes wvButtonLineBottom {
    0% {
        right: -100%;
    }

    50%,
    100% {
        right: 100%;
    }
}

@keyframes wvButtonLineLeft {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}

.btn-connect-label,
.syh-qr-card__button,
.wv-scroll-top-button i {
    position: relative;
    z-index: 4;
}

@media (max-width: 980px) {
    .services-layout {
        grid-template-columns: 1fr;
        gap: clamp(28px, 7vw, 48px);
    }

    .services-copy {
        order: 1;
        width: min(100%, 760px);
        margin-inline: auto;
    }

    .services-visual {
        order: 2;
        width: min(100%, 620px);
        margin-inline: auto;
    }

    .cards-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    html {
        scroll-padding-top: 86px;
    }

    main>section {
        scroll-margin-top: 86px;
    }

    .services-section,
    .wv-pro-services,
    .wv-showcase-section,
    .industry-solutions,
    .projects-section,
    .syh-contact-section {
        padding-top: var(--layout-section-space-mobile) !important;
        padding-bottom: var(--layout-section-space-mobile) !important;
    }

    .wv-section-heading,
    .projects-heading.wv-section-heading,
    .wv-contact-heading.wv-section-heading {
        width: calc(100% - 28px);
        margin-bottom: 34px;
    }

    .services-section>.page-container.services-layout {
        width: calc(100% - 28px) !important;
    }

    .services-copy h1 {
        font-size: clamp(34px, 11vw, 46px);
    }

    .services-copy .description {
        font-size: 14px;
        line-height: 1.78;
    }

    .cards-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .box-inner {
        min-height: 100px;
    }

    .flip-card {
        max-width: 470px;
    }

    .services-marquee {
        padding: 18px 0;
    }

    .wv-scroll-tools {
        width: 48px !important;
    }
}

@media (max-width: 420px) {

    .services-section>.page-container.services-layout,
    .wv-section-heading,
    .projects-heading.wv-section-heading,
    .wv-contact-heading.wv-section-heading {
        width: calc(100% - 22px) !important;
    }

    .services-copy h1 {
        font-size: clamp(31px, 10.5vw, 40px);
    }
}

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

    .wv-section-button-animation>.wv-section-button-line,
    .services-marquee-track {
        animation: none !important;
    }
}

.wv-infra-industries-section {
    min-height: 700px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.wv-infra-industries-heading {
    padding-top: 33px;
}

.wv-infra-circuit-container {
    top: 350px;
    height: 125px;
}

.wv-infra-machine-stage {
    left: 50%;
    bottom: 20px;
    width: min(900px, 58vw);
    min-width: 580px;
    max-width: none;
    transform: translate3d(-50%, 0, 0);
}

.wv-infra-machine-image {
    width: 100%;
    height: auto;
    max-height: 530px;
    object-fit: contain;
    object-position: center bottom;
}

@media screen and (max-width: 1200px) {
    .wv-infra-industries-section {
        min-height: 680px !important;
    }

    .wv-infra-machine-stage {
        width: 750px;
        min-width: 0;
        bottom: 25px;
    }

    .wv-infra-machine-image {
        max-height: 500px;
    }
}

@media screen and (max-width: 992px) {
    .wv-infra-industries-section {
        min-height: 650px !important;
    }

    .wv-infra-industries-heading {
        padding-top: 38px;
    }

    .wv-infra-circuit-container {
        top: 335px;
    }

    .wv-infra-machine-stage {
        width: min(760px, 92vw);
    }
}

@media screen and (max-width: 768px) {
    .wv-infra-industries-section {
        min-height: 610px !important;
    }

    .wv-infra-industries-heading {
        width: calc(100% - 30px);
        padding-top: 38px;
    }

    .wv-infra-circuit-container {
        top: 310px;
        height: 110px;
    }

    .wv-infra-machine-stage {
        width: 105vw;
        min-width: 0;
        bottom: 25px;
    }

    .wv-infra-machine-image {
        max-height: 445px;
    }
}

@media screen and (max-width: 576px) {
    .wv-infra-industries-section {
        min-height: 550px !important;
    }

    .wv-infra-industries-heading {
        width: calc(100% - 24px);
        padding-top: 42px;
    }

    .wv-infra-circuit-container {
        top: 280px;
        height: 95px;
    }

    .wv-infra-machine-stage {
        width: 125vw;
        bottom: 18px;
    }

    .wv-infra-machine-image {
        max-height: 380px;
    }
}

@media screen and (max-width: 400px) {
    .wv-infra-industries-section {
        min-height: 520px !important;
    }

    .wv-infra-circuit-container {
        top: 270px;
    }

    .wv-infra-machine-stage {
        width: 137vw;
    }
}

.wv-scroll-top-button,
.wv-scroll-top-button.premium-cta,
.wv-scroll-top-button.premium-moving-border {
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 600px) {

    .wv-scroll-top-button,
    .wv-scroll-top-button.premium-cta,
    .wv-scroll-top-button.premium-moving-border {
        bottom: max(2px, env(safe-area-inset-bottom)) !important;
    }
}

.wv-scroll-tools .wv-scroll-top-button,
.wv-scroll-tools .wv-scroll-top-button.wv-section-button-animation {
    position: absolute !important;
    top: auto !important;
    right: 18px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    margin: 0 !important;
    transform: none;
}

.wv-scroll-tools .wv-scroll-top-button:hover,
.wv-scroll-tools .wv-scroll-top-button:focus-visible {
    transform: translateY(-3px) !important;
}

@media (max-width: 700px) {

    .wv-scroll-tools .wv-scroll-top-button,
    .wv-scroll-tools .wv-scroll-top-button.wv-section-button-animation {
        right: 12px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}

.contact-page-banner__inner {
    position: relative;
    z-index: 2;
    width: min(720px, calc(100% - 44px));
    margin-inline: auto;
    padding-top: 4px;
}

.contact-page-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-header.is-scrolled .brand-logo,
.site-header.is-logo-docked .brand-logo {
    position: fixed !important;
    top: calc(100vh - 81px) !important;
    top: calc(100dvh - 81px) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: 310px !important;
    height: 82px !important;
    margin: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
}

@media (max-width: 1120px) {

    .site-header.is-scrolled .brand-logo,
    .site-header.is-logo-docked .brand-logo {
        top: calc(100vh - 69px) !important;
        top: calc(100dvh - 69px) !important;
        width: 230px !important;
        height: 70px !important;
    }
}

@media (max-width: 700px) {

    .site-header.is-scrolled .brand-logo,
    .site-header.is-logo-docked .brand-logo {
        top: calc(100vh - 61px) !important;
        top: calc(100dvh - 61px) !important;
        width: 196px !important;
        height: 62px !important;
    }
}

.contact-section {
    position: relative;
    width: 100%;
    min-height: 680px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 70px 0 80px;

    background:
        radial-gradient(circle at -10% -20%,
            rgba(237, 32, 42, 0.34),
            transparent 33%),
        radial-gradient(circle at 110% 110%,
            rgba(237, 32, 42, 0.32),
            transparent 34%),
        #020202;
}

.contact-container {
    width: 100%;
    margin: 0 auto;
}

.contact-item {
    position: relative;

    width: var(--card-width);
    height: var(--card-height);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateY(30px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact-item.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1150px) {
    .contact-section {
        min-height: auto;
        padding: 70px 20px 115px;
    }
}

@media (max-width: 650px) {
    .contact-section {
        padding: 60px 18px 75px;
    }

    .contact-item {
        width: 100%;
        height: auto;

        display: grid;
        grid-template-columns: 145px 1fr;
        align-items: center;
        justify-content: initial;

        gap: 25px;
    }
}

@media (max-width: 390px) {
    .contact-item {
        grid-template-columns: 125px 1fr;
        gap: 16px;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .contact-item {
        opacity: 1;
        transform: none;
    }
}

.our-base-map-heading {
    width: min(900px, 100%);
    margin: clamp(48px, 6vw, 82px) auto 25px;
    padding: 0 18px;
    text-align: center;
}

.our-base-map-heading h2 {
    margin: 0;
    color: var(--webversa-white);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.our-base-map-heading p {
    max-width: 720px;
    margin: 13px auto 0;
    color: rgba(249, 249, 249, .70);
    font-family: "Poppins", sans-serif;
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.7;
}

#project-contact-form {
    scroll-margin-top: 110px;
    border-top: 1px solid rgba(249, 249, 249, .06);
}

#project-contact-form .wv-contact-heading {
    padding-top: clamp(58px, 7vw, 95px);
}

@media (max-width: 520px) {
    .our-base-map-heading {
        margin-top: 42px;
        margin-bottom: 18px;
        padding-inline: 4px;
    }
}

.wv-scroll-tools {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 6200 !important;

    display: block !important;
    width: 74px !important;
    height: 100vh !important;
    height: 100dvh !important;

    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(16px, 0, 0) !important;

    transition:
        opacity .34s ease,
        visibility .34s ease,
        transform .5s cubic-bezier(.16, 1, .3, 1) !important;
}

.wv-scroll-tools.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
}

.wv-scroll-tools .wv-scroll-progress {
    position: absolute !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 0 !important;
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 68px)) !important;
    left: auto !important;

    display: block !important;
    width: 8px !important;
    height: auto !important;
    min-height: 90px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    border: 1px solid rgba(249, 249, 249, .18) !important;
    border-radius: 999px 0 0 999px !important;
    background:
        linear-gradient(90deg, rgba(249, 249, 249, .11), transparent 55%),
        rgba(6, 6, 8, .93) !important;

    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .7),
        0 0 12px rgba(249, 249, 249, .035),
        inset 0 0 8px rgba(249, 249, 249, .075) !important;

    pointer-events: none !important;
}

.wv-scroll-tools .wv-scroll-progress::before {
    content: "" !important;
    position: absolute !important;
    top: 7px !important;
    bottom: 7px !important;
    left: 2px !important;
    width: 1px !important;
    height: auto !important;

    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(249, 249, 249, .40) 20%,
            rgba(249, 249, 249, .18) 80%,
            transparent 100%) !important;
    opacity: .75 !important;
}

.wv-scroll-tools .wv-scroll-progress__thumb {
    position: absolute !important;
    top: 0 !important;
    left: -1px !important;

    display: block !important;
    width: 8px !important;
    height: clamp(66px, 8.5vh, 90px) !important;

    border-radius: 999px 0 0 999px !important;
    background: linear-gradient(180deg, var(--webversa-red) 0%, var(--webversa-red) 42%, var(--webversa-red) 100%) !important;

    box-shadow:
        0 0 10px rgba(237, 32, 42, .72),
        0 0 22px rgba(237, 32, 42, .24),
        inset 1px 0 0 rgba(249, 249, 249, .22) !important;

    transform: translate3d(0, 0, 0);
    will-change: transform !important;
    transition: none !important;
}

.wv-scroll-tools .wv-scroll-progress__thumb::after {
    content: "" !important;
    position: absolute !important;
    inset: 5px 2px !important;
    border-radius: inherit !important;
    background: linear-gradient(180deg, rgba(249, 249, 249, .26), transparent 45%) !important;
}

.wv-scroll-tools .wv-scroll-top-button,
.wv-scroll-tools .wv-scroll-top-button.wv-section-button-animation {
    position: absolute !important;
    top: auto !important;
    right: 18px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    border: 1px solid rgba(249, 249, 249, .17) !important;
    border-radius: 0 !important;
    color: var(--webversa-white) !important;
    background:
        linear-gradient(135deg, rgba(249, 249, 249, .045), transparent 46%),
        #080808 !important;

    box-shadow:
        0 11px 26px rgba(0, 0, 0, .52),
        inset 0 1px 0 rgba(249, 249, 249, .06) !important;

    clip-path: polygon(0 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% 100%,
            0 100%) !important;

    cursor: pointer !important;
    pointer-events: auto !important;
    transform: none !important;

    transition:
        transform .30s ease,
        background .30s ease,
        box-shadow .30s ease !important;
}

.wv-scroll-tools .wv-scroll-top-button:hover,
.wv-scroll-tools .wv-scroll-top-button:focus-visible {
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red)) !important;
    box-shadow:
        0 0 25px rgba(237, 32, 42, .48),
        0 12px 28px rgba(0, 0, 0, .48) !important;
    transform: translateY(-3px) !important;
    outline: none !important;
}

.wv-scroll-tools .wv-scroll-top-button:focus-visible {
    outline: 2px solid rgba(249, 249, 249, .9) !important;
    outline-offset: 3px !important;
}

.wv-scroll-tools .wv-scroll-top-button i {
    position: relative !important;
    z-index: 12 !important;
    color: var(--webversa-white) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 5px rgba(249, 249, 249, .32)) !important;
}

.wv-scroll-tools .wv-scroll-top-button>.wv-section-button-line {
    z-index: 10 !important;
    opacity: .98 !important;
    filter:
        drop-shadow(0 0 4px rgba(249, 249, 249, .9)) drop-shadow(0 0 7px rgba(237, 32, 42, .52)) !important;
}

:root {
    --wv-polish-max: 1240px;
    --wv-polish-gutter: clamp(18px, 4vw, 50px);
    --wv-polish-section-y: clamp(76px, 8vw, 116px);
    --wv-polish-section-y-mobile: clamp(58px, 14vw, 78px);
}

html {
    scroll-padding-top: 112px;
}

main>section {
    position: relative;
    scroll-margin-top: 112px;
}

.wv-section-heading,
.projects-heading.wv-section-heading,
.wv-contact-heading.wv-section-heading {
    width: min(930px, calc(100% - (var(--wv-polish-gutter) * 2))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(34px, 4.2vw, 58px) !important;
}

.wv-section-heading h2,
.projects-heading h2,
.wv-contact-heading h2 {
    margin-top: 0 !important;
    text-wrap: balance;
}

.wv-section-heading p,
.projects-heading p,
.wv-contact-heading p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
}

#about.services-section,
#ai-solutions.services-section,
#services.wv-pro-services,
#industry-showcase.wv-showcase-section,
#industries.industry-solutions,
#projects.projects-section,
#contact.syh-contact-section,
#project-contact-form.syh-contact-section {
    padding-top: var(--wv-polish-section-y) !important;
    padding-bottom: var(--wv-polish-section-y) !important;
}

#infrastructure.wv-infra-industries-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.services-section>.page-container.services-layout,
.wv-showcase-container,
.solutions-container,
.syh-contact-layout,
.contact-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

.wv-pro-services,
.wv-showcase-section,
.industry-solutions,
.projects-section,
.syh-contact-section,
.contact-section {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
}

#capabilities.services-marquee {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.contact-section {
    padding-top: clamp(65px, 7vw, 96px) !important;
    padding-bottom: clamp(65px, 7vw, 96px) !important;
}

.our-base-map-heading {
    margin-top: clamp(52px, 6vw, 82px) !important;
}

.wv-scroll-reveal {
    --wv-reveal-x: 0px;
    --wv-reveal-y: 34px;
    --wv-reveal-scale: .985;
    --wv-reveal-delay: 0ms;

    opacity: 0;
    transform:
        translate3d(var(--wv-reveal-x), var(--wv-reveal-y), 0) scale(var(--wv-reveal-scale));

    filter: blur(3px);
    will-change: opacity, transform, filter;

    transition:
        opacity .68s cubic-bezier(.16, 1, .3, 1) var(--wv-reveal-delay),
        transform .78s cubic-bezier(.16, 1, .3, 1) var(--wv-reveal-delay),
        filter .62s ease var(--wv-reveal-delay);
}

.wv-scroll-reveal.wv-reveal-direction-up {
    --wv-reveal-y: -30px;
}

.wv-scroll-reveal.wv-reveal-left {
    --wv-reveal-x: -34px;
    --wv-reveal-y: 0px;
}

.wv-scroll-reveal.wv-reveal-right {
    --wv-reveal-x: 34px;
    --wv-reveal-y: 0px;
}

.wv-scroll-reveal.wv-reveal-fade {
    --wv-reveal-x: 0px;
    --wv-reveal-y: 0px;
    --wv-reveal-scale: .992;
}

.wv-scroll-reveal.wv-reveal-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.wv-scroll-reveal.wv-reveal-visible.wv-section-heading h2,
.wv-scroll-reveal.wv-reveal-visible.projects-heading h2,
.wv-scroll-reveal.wv-reveal-visible.wv-contact-heading h2 {
    text-shadow: 0 0 24px rgba(237, 32, 42, .08);
}

.wvf-footer-grid>.wv-scroll-reveal {
    transform-origin: center bottom;
}

@media (max-width: 900px) {
    .wv-scroll-tools {
        width: 58px !important;
    }

    .wv-scroll-tools .wv-scroll-progress {
        width: 7px !important;
        bottom: max(72px, calc(env(safe-area-inset-bottom) + 62px)) !important;
    }

    .wv-scroll-tools .wv-scroll-progress__thumb {
        width: 7px !important;
        height: 62px !important;
    }

    .wv-scroll-tools .wv-scroll-top-button,
    .wv-scroll-tools .wv-scroll-top-button.wv-section-button-animation {
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 700px) {
    html {
        scroll-padding-top: 86px;
    }

    main>section {
        scroll-margin-top: 86px;
    }

    #about.services-section,
    #ai-solutions.services-section,
    #services.wv-pro-services,
    #industry-showcase.wv-showcase-section,
    #industries.industry-solutions,
    #projects.projects-section,
    #contact.syh-contact-section,
    #project-contact-form.syh-contact-section {
        padding-top: var(--wv-polish-section-y-mobile) !important;
        padding-bottom: var(--wv-polish-section-y-mobile) !important;
    }

    .wv-section-heading,
    .projects-heading.wv-section-heading,
    .wv-contact-heading.wv-section-heading {
        width: calc(100% - 30px) !important;
        margin-bottom: 34px !important;
    }

    .wv-scroll-reveal {
        --wv-reveal-y: 24px;
        filter: blur(1.5px);
        transition-duration: .55s, .62s, .5s;
    }

    .wv-scroll-reveal.wv-reveal-direction-up {
        --wv-reveal-y: -22px;
    }
}

@media (max-width: 520px) {
    .wv-scroll-tools {
        width: 48px !important;
    }

    .wv-scroll-tools .wv-scroll-progress {
        width: 5px !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        bottom: max(62px, calc(env(safe-area-inset-bottom) + 54px)) !important;
    }

    .wv-scroll-tools .wv-scroll-progress__thumb {
        left: 0 !important;
        width: 5px !important;
        height: 50px !important;
    }

    .wv-scroll-tools .wv-scroll-top-button,
    .wv-scroll-tools .wv-scroll-top-button.wv-section-button-animation {
        right: 6px !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .wv-scroll-tools .wv-scroll-top-button i {
        font-size: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wv-scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .wv-scroll-tools,
    .wv-scroll-tools .wv-scroll-progress__thumb,
    .wv-scroll-tools .wv-scroll-top-button {
        transition: none !important;
    }
}

.clientele-hero-inner {
    position: relative;
    z-index: 2;
    width: min(890px, 100%);
    text-align: center
}

@keyframes clienteleArrow {
    50% {
        transform: translateY(5px)
    }
}

.clientele-featured-heading,
.clientele-projects-intro {
    text-align: center;
    max-width: 780px;
    margin: 0 auto clamp(42px, 5vw, 68px)
}

.clientele-featured-heading h2,
.clientele-projects-intro h2 {
    margin: 10px 0 12px;
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -.035em
}

.clientele-featured-heading p,
.clientele-projects-intro p {
    margin: 0;
    color: rgba(249, 249, 249, .62);
    line-height: 1.75
}

.clientele-monitor-wrap {
    position: relative;
    width: min(760px, 94vw);
    margin: 0 auto;
    padding: 20px 20px 0
}

.clientele-project {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
    align-items: center;
    gap: clamp(42px, 6vw, 88px);
    padding: 0 16px
}

.clientele-project::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: calc(clamp(70px, 8vw, 116px) / -2);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(249, 249, 249, .09), transparent)
}

.clientele-project:last-child::after {
    display: none
}

@media (max-width:900px) {
    .clientele-project {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 0
    }

    .clientele-project::after {
        bottom: -43px
    }
}

@media (max-width:600px) {
    .clientele-monitor-wrap {
        padding-left: 4px;
        padding-right: 4px
    }
}

.clientele-project {
    min-height: 390px;
}

@media (max-width: 900px) {
    .clientele-project {
        min-height: 0;
    }
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.projects-section {
    --wv-monitor-width: min(72vw, 1180px);
    position: relative;
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: clamp(86px, 7vw, 118px) 0 clamp(34px, 4vw, 58px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.projects-section .projects-heading {
    position: relative;
    z-index: 8;
    width: min(920px, calc(100% - 40px));
    margin: 0 auto clamp(12px, 2vh, 24px);
    padding: 0 12px;
    box-sizing: border-box;
    text-align: center;
}

.projects-section .projects-heading p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.projects-stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none !important;
    min-height: clamp(470px, 66svh, 800px);
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.projects-stage .projects-monitor {
    position: relative;
    z-index: 5;
    width: var(--wv-monitor-width) !important;
    max-width: 1180px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
}

.projects-stage .projects-monitor-svg {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.projects-stage .projects-connectors-layer,
.projects-stage .projects-side {
    pointer-events: none;
}

.wv-screen-circuit {
    position: absolute;
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.wv-screen-circuit path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wv-screen-circuit .wv-circuit-main {
    stroke: rgba(250, 250, 250, .98);
    stroke-width: 2.2;
}

.wv-screen-circuit .wv-circuit-mid {
    stroke: rgba(164, 168, 176, .96);
    stroke-width: 1.2;
}

.wv-screen-circuit .wv-circuit-thin {
    stroke: rgba(249, 249, 249, .46);
    stroke-width: .72;
}

.wv-screen-circuit .wv-circuit-node {
    fill: var(--webversa-white);
    filter: drop-shadow(0 0 4px rgba(249, 249, 249, .7));
}

@media (max-width: 1180px) {
    .projects-section {
        --wv-monitor-width: min(76vw, 940px);
    }

    .projects-stage {
        min-height: clamp(450px, 62svh, 700px);
    }
}

@media (max-width: 820px) {
    .projects-section {
        --wv-monitor-width: min(86vw, 700px);
        min-height: 100svh;
        padding-top: 84px;
    }

    .projects-section .projects-heading {
        width: min(96vw, 720px);
        margin-bottom: 8px;
    }

    .projects-stage {
        min-height: 56svh;
    }

    .wv-screen-circuit .wv-circuit-main {
        stroke-width: 1.75;
    }

    .wv-screen-circuit .wv-circuit-mid {
        stroke-width: 1;
    }

    .wv-screen-circuit .wv-circuit-thin {
        stroke-width: .6;
    }
}

@media (max-width: 560px) {
    .projects-section {
        --wv-monitor-width: 91vw;
        padding: 76px 0 24px;
    }

    .projects-section .projects-heading {
        width: calc(100% - 24px);
    }

    .projects-section .projects-heading p {
        font-size: 13px;
        line-height: 1.6;
    }

    .projects-stage {
        min-height: 51svh;
    }
}

.our-base-heading {
    margin-bottom: 32px;
    text-align: center;
}

.our-base-heading h2 {
    margin-bottom: 10px;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -1.4px;
}

.our-base-heading p {
    color: #f2f2f2;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.6;
    font-weight: 500;
}

.base-card {
    /* Exact position of the actual inner opening in chip-frame-clean.png */
    --panel-x: 52.71%;
    --panel-y: 49.44%;
    --panel-width: 72.57%;
    --panel-height: 71.77%;

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1;
    justify-self: center;
    cursor: pointer;
    outline: none;
    container-type: inline-size;
    transition: transform 0.3s ease;
}

.base-card h3 {
    width: 100%;
    margin: 0 0 9px;
    color: var(--webversa-white);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
}

.base-card:hover,
.base-card:focus-visible,
.base-card.is-active {
    transform: translateY(-4px);
}

.base-card:focus-visible {
    outline: 2px solid rgba(237, 32, 42, 0.9);
    outline-offset: 4px;
    border-radius: 24px;
}

@container (max-width: 325px) {
    .base-card h3 {
        margin-bottom: 7px;
        font-size: 16px;
    }
}

@media (max-width: 940px) {
    .base-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .our-base-heading {
        margin-bottom: 23px;
    }

    .base-card:last-child {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .base-card {
        transition: none;
    }
}

.our-base-map-wrap {
    width: min(1180px, 100%);
    margin: 30px auto 0;
    text-align: center;
}

@media (max-width: 620px) {
    .our-base-map-wrap {
        margin-top: 22px;
    }
}

:root {
    --brand-red: var(--webversa-red);
    --primary: var(--brand-red);
    --primary-dark: var(--brand-red);
    --primary-soft: var(--brand-red);
    --font-body: "Segoe UI", Arial, sans-serif;
    --font-heading: "Segoe UI", Arial, sans-serif;
    --section-space: clamp(64px, 6.5vw, 94px);
}

body {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.wv-section-heading h2,
.projects-heading h2 {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.wv-section-heading,
.projects-heading {
    margin-bottom: clamp(32px, 4vw, 56px);
}

@media (max-width: 600px) {
    :root {
        --section-space: 58px;
    }
}

.home-page #projects {
    min-height: auto;
    padding-block: clamp(76px, 7vw, 104px);
}

.home-page #projects .projects-heading {
    width: min(820px, calc(100% - 36px));
    margin: 0 auto clamp(28px, 4vw, 48px);
    padding: 0;
}

.home-page #projects .projects-stage {
    --projects-monitor-shift: 0px;
    width: min(1500px, 100%);
    min-height: 620px;
    margin: 0 auto !important;
    padding: 0 clamp(18px, 3vw, 48px) !important;
    grid-template-columns: minmax(190px, 1fr) minmax(0, 940px) minmax(190px, 1fr);
    align-items: center;
    overflow: hidden !important;
}

.home-page #projects .projects-monitor {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: min(100%, 940px) !important;
    max-width: 940px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform-origin: center center;
}

.home-page #projects .projects-monitor-svg {
    display: block;
    width: 100% !important;
    max-width: 940px !important;
    height: auto !important;
    margin: 0 auto;
}

.home-page #projects .projects-connectors-layer {
    display: none !important;
}

.home-page #projects .projects-side {
    position: relative;
    z-index: 7;
    pointer-events: auto;
}

@media (max-width: 1180px) {
    .home-page #projects .projects-stage {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 28px;
        padding-inline: clamp(16px, 4vw, 34px) !important;
    }

    .home-page #projects .projects-monitor {
        width: min(100%, 820px) !important;
        grid-row: 1;
    }

    .home-page #projects .projects-side {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        width: min(820px, 100%);
        margin-inline: auto;
    }

    .home-page #projects .projects-side-left {
        grid-row: 2;
    }

    .home-page #projects .projects-side-right {
        grid-row: 3;
    }

    .home-page #projects .project-row {
        display: block;
    }

    .home-page #projects .project-node {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .home-page #projects .projects-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page #projects .projects-monitor {
        width: 100% !important;
    }
}

.home-page #projects .wv-screen-circuit {
    z-index: 2;
}

.home-page #projects .projects-monitor {
    position: relative;
    z-index: 5 !important;
}

.home-page #projects .projects-side {
    z-index: 6 !important;
}

.home-page #projects .wv-screen-circuit .wv-circuit-main {
    stroke: var(--brand-red);
    stroke-width: 2.2;
    filter: drop-shadow(0 0 5px rgba(237, 32, 42, .42));
}

.home-page #projects .wv-screen-circuit .wv-circuit-mid {
    stroke: rgba(237, 32, 42, .7);
}

.home-page #projects .wv-screen-circuit .wv-circuit-thin {
    stroke: rgba(249, 249, 249, .55);
}

.client-project-button {
    position: relative;
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    border: 1px solid rgba(237, 32, 42, .55);
    border-radius: 8px;
    color: var(--webversa-white);
    background: linear-gradient(135deg, rgba(237, 32, 42, .12), rgba(249, 249, 249, .035));
    font: 700 clamp(11px, .9vw, 14px)/1.2 var(--font-heading);
    letter-spacing: .035em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.client-project-button:hover,
.client-project-button:focus-visible,
.client-project-button.active {
    border-color: var(--brand-red);
    background: var(--brand-red);
    box-shadow: 0 0 22px rgba(237, 32, 42, .32);
    transform: translateY(-2px);
}

@media (max-width: 1180px) {
    .home-page #projects .wv-screen-circuit {
        display: none;
    }
}

@media (max-width: 620px) {
    .client-project-button {
        min-height: 46px;
    }
}

.home-page #projects .wv-screen-circuit {
    display: none !important;
}

.home-page #projects .projects-connectors-layer {
    display: block !important;
    z-index: 3 !important;
}

.home-page #projects .projects-stage {
    width: 100%;
    max-width: 1740px !important;
    min-height: clamp(560px, 68vw, 720px);
    margin: 0 auto !important;
    padding: 0 clamp(28px, 2vw, 42px) !important;
    display: grid;
    grid-template-columns: minmax(205px, 1fr) minmax(640px, 1000px) minmax(205px, 1fr);
    align-items: center;
    column-gap: 0;
    overflow: hidden !important;
}

.home-page #projects .projects-monitor {
    grid-column: 2;
    width: min(100%, 1000px) !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    top: 0 !important;
    opacity: 1;
    transform: none !important;
    z-index: 5 !important;
}

.home-page #projects .projects-monitor-svg {
    width: 100% !important;
    height: auto !important;
    max-width: 1000px !important;
}

.home-page #projects .projects-side {
    display: grid;
    align-content: center;
    gap: clamp(34px, 4.6vw, 88px);
    z-index: 6 !important;
    pointer-events: auto;
}

.home-page #projects .projects-side-left {
    grid-column: 1;
}

.home-page #projects .projects-side-right {
    grid-column: 3;
}

.home-page #projects .project-row {
    display: block;
    width: 100%;
}

.home-page #projects .project-node {
    width: min(205px, 92%);
    height: 54px;
    min-height: 54px;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 0;
    color: #161616;
    background: var(--webversa-white);
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    box-shadow: none;
    font: 800 clamp(12px, .9vw, 15px)/1 var(--font-heading);
    letter-spacing: 0;
    opacity: 1;
    transform: none;
}

.home-page #projects .projects-side-left .project-node {
    margin-right: auto;
}

.home-page #projects .projects-side-right .project-node {
    margin-left: auto;
}

.home-page #projects .project-node:hover,
.home-page #projects .project-node:focus-visible,
.home-page #projects .project-node.active {
    color: #080808;
    background: var(--webversa-white);
    box-shadow: 0 0 0 2px var(--brand-red), 0 0 26px rgba(237, 32, 42, .28);
    transform: translateY(-2px);
}

.projects-connectors-layer .project-wire-base {
    stroke: var(--brand-red) !important;
    stroke-width: 2.4;
    filter: drop-shadow(0 0 4px rgba(237, 32, 42, 1)) drop-shadow(0 0 14px rgba(237, 32, 42, .88));
}

.projects-connectors-layer .project-wire-glow {
    stroke: rgba(237, 32, 42, .34) !important;
}

.slider-container {
    border-bottom: 1px solid rgba(237, 32, 42, .75);
    background: rgba(10, 10, 14, .94);
}

.slider-container .slide {
    opacity: .88;
}

@media (max-width: 1180px) {
    .home-page #projects .projects-stage {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 22px;
        padding-inline: clamp(16px, 4vw, 32px) !important;
    }

    .home-page #projects .projects-connectors-layer {
        display: none !important;
    }

    .home-page #projects .projects-monitor {
        grid-column: 1;
        grid-row: 1;
        width: min(100%, 860px) !important;
    }

    .home-page #projects .projects-side {
        grid-column: 1;
        width: min(860px, 100%);
        margin-inline: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .home-page #projects .projects-side-left {
        grid-row: 2;
    }

    .home-page #projects .projects-side-right {
        grid-row: 3;
    }

    .home-page #projects .project-node {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .home-page #projects .projects-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-page #projects {
    padding-top: clamp(88px, 8vh, 118px);
    padding-bottom: clamp(62px, 6vh, 88px);
}

.home-page #projects .projects-heading {
    margin-bottom: clamp(32px, 4vh, 46px);
}

.home-page #projects .projects-stage {
    min-height: clamp(580px, 66vh, 680px);
    grid-template-columns: minmax(220px, 1fr) minmax(620px, 920px) minmax(220px, 1fr);
    column-gap: clamp(24px, 2.2vw, 40px);
    padding-inline: clamp(34px, 3vw, 56px) !important;
}

.home-page #projects .projects-monitor,
.home-page #projects .projects-monitor-svg {
    width: min(100%, 920px) !important;
    max-width: 920px !important;
}

.home-page #projects .projects-side {
    gap: clamp(42px, 5.2vh, 60px);
}

.home-page #projects .project-node {
    width: min(220px, 100%);
    height: 58px;
    min-height: 58px;
    padding: 10px 18px;
    font-size: clamp(12px, .82vw, 14px);
    line-height: 1.08;
    white-space: normal;
}

@media (max-width: 1180px) {
    .home-page #projects {
        padding-block: 62px;
    }

    .home-page #projects .projects-heading {
        margin-bottom: 22px;
    }

    .home-page #projects .projects-stage {
        min-height: auto;
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 18px;
    }
}

@media (max-width: 620px) {
    .home-page #projects {
        padding-block: 52px;
    }

    .home-page #projects .projects-stage {
        width: calc(100% - 10px);
    }
}

#project-contact-form .syh-contact-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    gap: clamp(22px, 2.5vw, 34px);
    align-items: stretch;
}

#project-contact-form .syh-terminal__title {
    gap: 12px;
    color: rgba(249, 249, 249, .92);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .02em;
}

#project-contact-form .syh-terminal__history {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

#project-contact-form .syh-terminal__entry {
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(249, 249, 249, .06);
    border-radius: 10px;
    background: rgba(249, 249, 249, .025);
}

#project-contact-form .syh-terminal__entry strong {
    margin: 0 0 3px;
    color: rgba(249, 249, 249, .43);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#project-contact-form .syh-terminal__entry div {
    overflow: hidden;
    color: rgba(249, 249, 249, .82);
    font-size: 11px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#project-contact-form .syh-terminal__prompt {
    margin-top: auto;
}

#project-contact-form .syh-terminal__prompt label {
    margin: 0 0 9px;
    color: rgba(249, 249, 249, .88);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

#project-contact-form .syh-terminal__input-row {
    position: relative;
    align-items: flex-start;
    gap: 0;
    min-height: 58px;
    padding: 0 14px 0 47px;
    border: 1px solid rgba(249, 249, 249, .10);
    border-radius: 13px;
    background: rgba(249, 249, 249, .035);
    box-shadow: 0 1px 0 rgba(249, 249, 249, .025) inset;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

#project-contact-form .syh-terminal__input-row:focus-within {
    border-color: rgba(237, 32, 42, .72);
    background: rgba(237, 32, 42, .045);
    box-shadow: 0 0 0 3px rgba(237, 32, 42, .08), 0 0 22px rgba(237, 32, 42, .08);
}

#project-contact-form .syh-terminal textarea {
    min-height: 56px;
    padding: 16px 0 14px;
    border: 0;
    outline: 0;
    color: var(--webversa-white);
    background: transparent;
    caret-color: var(--brand-red);
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

#project-contact-form .syh-terminal textarea::placeholder {
    color: rgba(249, 249, 249, .25);
}

#project-contact-form .syh-terminal textarea[aria-invalid="true"] {
    color: #ffb4b8;
}

#project-contact-form .syh-terminal__note {
    min-height: 18px;
    margin: 0;
    color: rgba(249, 249, 249, .50);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.45;
}

#project-contact-form .syh-terminal__note.is-error {
    color: var(--webversa-red);
}

#project-contact-form .syh-terminal__note.is-success {
    color: rgba(249, 249, 249, .56);
}

#project-contact-form .syh-terminal__hint {
    position: static;
    margin-top: 4px;
    color: rgba(249, 249, 249, .27);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
}

#project-contact-form .syh-terminal__complete {
    grid-column: 1 / -1;
    min-height: 170px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px;
    border: 1px solid rgba(40, 200, 64, .16);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(40, 200, 64, .055), rgba(249, 249, 249, .02));
}

#project-contact-form .syh-terminal__complete-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(40, 200, 64, .24);
    border-radius: 50%;
    color: #53d866;
    background: rgba(40, 200, 64, .08);
    box-shadow: 0 0 22px rgba(40, 200, 64, .08);
}

#project-contact-form .syh-terminal__complete strong {
    display: block;
    margin-bottom: 7px;
    color: var(--webversa-white);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 650;
}

#project-contact-form .syh-terminal__complete p {
    max-width: 520px;
    margin: 0;
    color: rgba(249, 249, 249, .55);
    font-size: 12px;
    line-height: 1.65;
}

#project-contact-form .syh-qr-card {
    border: 1px solid rgba(249, 249, 249, .09);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgba(237, 32, 42, .10), transparent 36%),
        linear-gradient(160deg, rgba(18, 18, 22, .98), rgba(6, 6, 8, .99));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(249, 249, 249, .018) inset;
}

@media (max-width: 900px) {
    #project-contact-form .syh-contact-layout {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 760px);
    }
}

@media (max-width: 620px) {
    #project-contact-form .syh-terminal__history {
        grid-template-columns: 1fr;
    }

    #project-contact-form .syh-terminal__entry:nth-child(-n

        /**/
        +2) {
        display: none;
    }

    #project-contact-form .syh-terminal__complete {
        align-items: flex-start;
        padding: 18px;
    }
}


/* =========================================================
   PROJECT MONITOR — CURVED SCREEN / CLIPPING GLITCH FIX
   Keeps the webpage preview inside the real visible display area,
   removes the clipped scrollbar and avoids white edge artifacts.
   ========================================================= */
.home-page #projects .projects-monitor {
    isolation: isolate !important;
}

.home-page #projects .projects-monitor-svg {
    display: block !important;
    overflow: visible !important;
}

.home-page #projects .projects-screen-content {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: #020202 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.home-page #projects .projects-screen-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.home-page #projects .project-display-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: initial !important;
}

/* =========================================================
   PROJECT MONITOR — INITIAL LOAD PAINT STABILITY
   Prevents Chrome from keeping a stale foreignObject clip until zoom/resize.
   ========================================================= */
.home-page #projects .projects-monitor-svg,
.home-page #projects .projects-screen-content,
.home-page #projects .project-display-image {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.home-page #projects .projects-monitor-svg {
    transform: translateZ(0);
    will-change: transform;
}

.home-page #projects .projects-screen-content {
    contain: paint;
}

/* =========================================================
   PROJECT MONITOR — RELOAD-SAFE SVG CLIPPING
   Chrome can cache a foreignObject clip incorrectly on first paint.
   Keep the clip on an SVG group (not directly on foreignObject) and
   avoid compositor/paint containment that makes the stale clip persist.
   ========================================================= */
.home-page #projects .projects-monitor-svg {
    transform: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

.home-page #projects .projects-screen-clip {
    pointer-events: auto;
}

.home-page #projects .projects-screen-clip>foreignObject {
    overflow: hidden !important;
}

.home-page #projects .projects-screen-content {
    contain: none !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

.home-page #projects .project-display-image {
    transform: none;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

/* Hide only during the tiny first-paint correction so the user never
   sees the temporary incorrect clip. */
.home-page #projects .projects-monitor.is-monitor-stabilizing {
    visibility: hidden !important;
}

/* =========================================================
   FINAL OVERRIDE — PROJECT SCREEN MUST BE CORRECT ON RELOAD
   Keeps monitor, side chips and connector geometry in final layout
   from the very first browser paint (no zoom/resize required).
   ========================================================= */
html {
    scrollbar-gutter: stable;
}

.home-page #projects,
.home-page #projects .projects-stage,
.home-page #projects .projects-side,
.home-page #projects .project-row,
.home-page #projects .projects-monitor,
.home-page #projects .projects-connectors-layer {
    content-visibility: visible !important;
}

@media (min-width: 1181px) {
    .home-page #projects .projects-stage {
        position: relative !important;
        isolation: isolate !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        contain: none !important;
    }

    .home-page #projects .projects-monitor,
    .home-page #projects .projects-stage.is-visible .projects-monitor {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        top: 0 !important;
        left: auto !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
    }

    .home-page #projects .projects-monitor-svg {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        transform-origin: center center !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
    }

    .home-page #projects .project-node,
    .home-page #projects .projects-stage.is-visible .project-node {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        will-change: auto !important;
    }

    .home-page #projects .project-node:hover,
    .home-page #projects .project-node:focus-visible,
    .home-page #projects .project-node.active {
        transform: translateY(-2px) !important;
    }

    .home-page #projects .projects-side,
    .home-page #projects .project-row {
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        contain: none !important;
        will-change: auto !important;
    }

    .home-page #projects .projects-connectors-layer {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        transform-origin: 0 0 !important;
        contain: none !important;
        will-change: auto !important;
        pointer-events: none !important;
    }

    .home-page #projects .projects-connectors-layer .project-wire-group,
    .home-page #projects .projects-connectors-layer .project-wire-glow,
    .home-page #projects .projects-connectors-layer .project-wire-base,
    .home-page #projects .projects-connectors-layer .project-wire-flow {
        transform: none !important;
        transform-origin: 0 0 !important;
        vector-effect: non-scaling-stroke;
    }
}

@media (max-width: 1180px) {
    .home-page #projects .projects-connectors-layer {
        display: none !important;
    }

    .home-page #projects .projects-monitor,
    .home-page #projects .project-node {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =========================================================
   OUR SERVICES — CLEAN FINAL CHIP SYSTEM
   One chip image behind every service icon.
   Only the active service receives a centered inner fill.
   No extra red frame, glow or shadow layers.
   ========================================================= */
body .wv-pro-services .wv-service-card,
body .wv-pro-services .wv-service-card:hover,
body .wv-pro-services .wv-service-card:focus-visible,
body .wv-pro-services .wv-service-card.wv-active {
    filter: none !important;
    box-shadow: none !important;
}

body .wv-pro-services .wv-service-card .wv-tech-box,
body .wv-pro-services .wv-service-card:hover .wv-tech-box,
body .wv-pro-services .wv-service-card:focus-visible .wv-tech-box,
body .wv-pro-services .wv-service-card.wv-active .wv-tech-box {
    position: relative !important;
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    min-height: 104px !important;
    margin: 0 auto !important;
    display: grid !important;
    place-items: center !important;
    isolation: isolate !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Use the real image from Assets/Images/chip.webp on every logo. */
body .wv-pro-services .wv-service-card .wv-service-image,
body .wv-pro-services .wv-service-card:hover .wv-service-image,
body .wv-pro-services .wv-service-card:focus-visible .wv-service-image,
body .wv-pro-services .wv-service-card.wv-active .wv-service-image {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Old generated frame layer is not needed because chip.webp already contains it. */
body .wv-pro-services .wv-service-card .wv-tech-box::before,
body .wv-pro-services .wv-service-card:hover .wv-tech-box::before,
body .wv-pro-services .wv-service-card:focus-visible .wv-tech-box::before,
body .wv-pro-services .wv-service-card.wv-active .wv-tech-box::before {
    content: none !important;
    display: none !important;
}

/* Exact inner opening of chip.webp. */
body .wv-pro-services .wv-service-card .wv-tech-box::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 16.43% !important;
    top: 13.56% !important;
    width: 72.57% !important;
    height: 71.77% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    border: 0 !important;
    border-radius: 13px !important;
    clip-path: polygon(9% 0, 91% 0, 100% 9%, 100% 91%, 91% 100%, 9% 100%, 0 91%, 0 9%) !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: opacity .22s ease !important;
}

body .wv-pro-services .wv-service-card:not(.wv-active) .wv-tech-box::after,
body .wv-pro-services .wv-service-card:not(.wv-active):hover .wv-tech-box::after,
body .wv-pro-services .wv-service-card:not(.wv-active):focus-visible .wv-tech-box::after {
    opacity: 0 !important;
    background: transparent !important;
}

body .wv-pro-services .wv-service-card.wv-active .wv-tech-box::after {
    opacity: 1 !important;
    background: var(--webversa-red) !important;
}

body .wv-pro-services .wv-service-card .wv-chip-icon,
body .wv-pro-services .wv-service-card:hover .wv-chip-icon,
body .wv-pro-services .wv-service-card:focus-visible .wv-chip-icon,
body .wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
    position: relative !important;
    z-index: 3 !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    color: var(--webversa-white) !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
    pointer-events: none !important;
}

body .wv-pro-services .wv-service-title,
body .wv-pro-services .wv-service-card:hover .wv-service-title,
body .wv-pro-services .wv-service-card:focus-visible .wv-service-title,
body .wv-pro-services .wv-service-card.wv-active .wv-service-title,
body .wv-pro-services .wv-service-title::after,
body .wv-pro-services .wv-service-card:hover .wv-service-title::after,
body .wv-pro-services .wv-service-card:focus-visible .wv-service-title::after,
body .wv-pro-services .wv-service-card.wv-active .wv-service-title::after {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* =========================================================
   OUR SERVICES — FINAL CHIP FILL + SAFE ICON ANIMATION FIX
   - Active red fill stays inside the chip artwork.
   - Chip artwork is layered above the fill so its frame remains visible.
   - Only the white service icon animates; the chip frame itself stays stable.
   ========================================================= */
body #services.wv-pro-services .wv-tech-box {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
}

body #services.wv-pro-services .wv-service-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* The fill matches the actual inner opening of chip-services.webp. */
body #services.wv-pro-services .wv-tech-box::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 16.45% !important;
    top: 13.55% !important;
    width: 72.55% !important;
    height: 71.80% !important;
    z-index: 2 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(5.5% 0,
            94.5% 0,
            100% 5.5%,
            100% 94.5%,
            94.5% 100%,
            5.5% 100%,
            0 94.5%,
            0 5.5%) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: opacity .22s ease !important;
}

body #services.wv-pro-services .wv-service-card:not(.wv-active) .wv-tech-box::after,
body #services.wv-pro-services .wv-service-card:not(.wv-active):hover .wv-tech-box::after,
body #services.wv-pro-services .wv-service-card:not(.wv-active):focus-visible .wv-tech-box::after {
    opacity: 0 !important;
    background: transparent !important;
}

body #services.wv-pro-services .wv-service-card.wv-active .wv-tech-box::after {
    opacity: 1 !important;
    background: var(--webversa-red) !important;
}

/* Keep chip frame perfectly still. Animate only the white icon. */
body #services.wv-pro-services .wv-service-card.wv-active .wv-tech-box {
    animation: none !important;
    transform: none !important;
}

body #services.wv-pro-services .wv-chip-icon,
body #services.wv-pro-services .wv-service-card:hover .wv-chip-icon,
body #services.wv-pro-services .wv-service-card:focus-visible .wv-chip-icon,
body #services.wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
    position: relative !important;
    z-index: 4 !important;
    color: var(--webversa-white) !important;
    filter: none !important;
    text-shadow: none !important;
    pointer-events: none !important;
}

body #services.wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
    animation: wvServiceIconSafePop .46s cubic-bezier(.16, 1, .3, 1) both !important;
}

@keyframes wvServiceIconSafePop {
    0% {
        opacity: .25;
        transform: scale(.72);
    }

    62% {
        opacity: 1;
        transform: scale(1.10);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body #services.wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
        animation: none !important;
    }
}

/* ==========================================================================
   SECTION 04 — SHARED CONTACT TERMINAL
   ========================================================================== */

/* =========================================================
   WEBVERSA — SHARED PROJECT CONTACT COMPONENT
   Used by: index.html, clientele.html, contact.html
   ========================================================= */

.syh-contact-section,
.syh-contact-section * {
    box-sizing: border-box;
}

.syh-contact-section {
    --syh-red: var(--webversa-red);
    --syh-red-bright: var(--webversa-red);
    --syh-red-dark: var(--webversa-red);
    --syh-white: var(--webversa-white);
    --syh-muted: #a8a8b2;
    width: 100%;
    margin: 0;
    padding: clamp(72px, 8vw, 110px) 0;
    overflow: clip;
    color: var(--syh-white);
    background: var(--webversa-black);
    border-top: 1px solid rgba(249, 249, 249, .07);
}

.wv-contact-heading {
    position: relative;
    z-index: 20;
    width: min(920px, calc(100% - 36px));
    margin: 0 auto clamp(34px, 4.5vw, 62px);
    text-align: center;
}

.wv-contact-heading .section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 12px;
    color: var(--webversa-red);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.3;
    text-transform: uppercase;
}

.wv-contact-heading .section-tag::before {
    width: 30px;
    height: 2px;
    background: var(--webversa-red);
    content: "";
}

.wv-contact-heading h2 {
    margin: 0;
    color: var(--webversa-white);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: clamp(30px, 4.15vw, 58px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.08;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .72);
}

.wv-contact-heading p {
    max-width: 760px;
    margin: 15px auto 0;
    color: rgba(249, 249, 249, .68);
    font-family: "Poppins", sans-serif;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.75;
}

.syh-contact-layout {
    width: min(1180px, calc(100% - (clamp(18px, 4vw, 48px) * 2)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px;
    align-items: stretch;
}

.syh-terminal {
    position: relative;
    min-width: 0;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(237, 32, 42, .78);
    border-radius: 16px;
    background: var(--webversa-black);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .5), 0 0 34px rgba(237, 32, 42, .13);
}

.syh-terminal::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(237, 32, 42, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237, 32, 42, .018) 1px, transparent 1px);
    background-size: 28px 28px;
}

.syh-terminal::after {
    content: "";
    position: absolute;
    inset: 46px 0 auto 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(249, 249, 249, .13), transparent);
}

.syh-terminal__bar {
    position: relative;
    z-index: 2;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 18px;
    color: var(--webversa-white);
    background: linear-gradient(180deg, var(--webversa-red) 0%, var(--webversa-red) 100%);
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
}

.syh-terminal__title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.syh-terminal__status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--webversa-white);
    box-shadow: 0 0 10px rgba(249, 249, 249, .9);
}

.syh-terminal__actions {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: Arial, sans-serif;
    font-size: 18px;
}

.syh-terminal__body {
    position: relative;
    z-index: 2;
    min-height: 452px;
    padding: 25px 25px 50px;
    color: var(--webversa-white);
    background: var(--webversa-black);
    font-family: "Share Tech Mono", Consolas, monospace;
    font-size: clamp(.9rem, 1.5vw, 1.04rem);
    line-height: 1.5;
}

.syh-terminal__intro {
    margin-bottom: 6px;
    font-weight: 700;
}

.syh-terminal__rule {
    max-width: 100%;
    margin-bottom: 24px;
    overflow: hidden;
    color: rgba(249, 249, 249, .56);
    white-space: nowrap;
}

.syh-terminal__history {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.syh-terminal__entry {
    margin-bottom: 17px;
}

.syh-terminal__entry strong,
.syh-terminal__prompt label {
    display: block;
    margin-bottom: 4px;
    color: var(--syh-red-bright);
    font-weight: 700;
}

.syh-terminal__input-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}

.syh-terminal__input-row>span {
    padding-top: 1px;
    color: var(--syh-red);
    font-weight: 700;
}

#syhTerminalInput {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    max-height: 120px;
    resize: none;
    overflow: hidden;
    border: 0;
    outline: 0;
    padding: 0;
    color: var(--webversa-white);
    background: transparent;
    caret-color: var(--syh-red-bright);
    font: inherit;
    line-height: inherit;
}

#syhTerminalInput::selection {
    color: var(--webversa-white);
    background: rgba(237, 32, 42, .55);
}

.syh-terminal__note {
    min-height: 23px;
    margin-top: 14px;
    color: var(--syh-red-bright);
    font-weight: 700;
}

.syh-terminal__note.is-success {
    color: var(--webversa-white);
}

.syh-terminal__hint {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: rgba(249, 249, 249, .38);
    font-size: 12px;
}

.syh-type-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--syh-red-bright);
    animation: syhCursorBlink .75s steps(1) infinite;
}

@keyframes syhCursorBlink {
    50% {
        opacity: 0;
    }
}

.syh-qr-card--chip-only {
    min-width: 0;
    min-height: 500px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.syh-qr-card--chip-only::before,
.syh-qr-card--chip-only::after,
.syh-qr-card--chip-only .syh-qr-card__glow {
    display: none !important;
}

.syh-chip-stage {
    position: relative;
    isolation: isolate;
    width: min(100%, 380px);
    min-height: 430px;
    margin: 0 auto;
    padding: 0;
}

.syh-chip-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.syh-chip-qr-slot {
    position: absolute;
    top: 50%;
    left: 52.3%;
    z-index: 5;
    width: 200px;
    aspect-ratio: 1;
    margin: 0;
    padding: 8px;
    overflow: hidden;
    background: var(--webversa-white);
    transform: translate(-50%, -50%);
}

.syh-chip-qr-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.syh-chip-qr-slot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(237, 32, 42, 0), rgba(237, 32, 42, .06) 50%, rgba(237, 32, 42, 0));
    opacity: .55;
    animation: syhQrOverlayPulse 2.2s ease-in-out infinite;
}

.syh-chip-scan-line {
    position: absolute;
    top: 8px;
    right: 8px;
    left: 8px;
    z-index: 7;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(237, 32, 42, .3) 15%, var(--webversa-red) 50%, rgba(237, 32, 42, .3) 85%, transparent);
    box-shadow: 0 0 10px rgba(237, 32, 42, .95), 0 0 18px rgba(237, 32, 42, .55);
    animation: syhQrScanActive 2s linear infinite;
    pointer-events: none;
}

@keyframes syhQrScanActive {
    0% {
        transform: translateY(0);
        opacity: .25;
    }

    12%,
    88% {
        opacity: 1;
    }

    100% {
        transform: translateY(calc(100% + 165px));
        opacity: .25;
    }
}

@keyframes syhQrOverlayPulse {

    0%,
    100% {
        opacity: .18;
    }

    50% {
        opacity: .5;
    }
}

@media (max-width: 900px) {
    .syh-contact-layout {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 760px);
    }

    .syh-qr-card--chip-only {
        min-height: 380px;
    }

    .syh-chip-stage {
        width: min(340px, 82vw);
        min-height: 360px;
    }

    .syh-chip-qr-slot {
        width: 186px;
    }
}

@media (max-width: 600px) {
    .syh-contact-section {
        padding: 60px 0;
    }

    .wv-contact-heading {
        width: calc(100% - 28px);
    }

    .wv-contact-heading h2 {
        font-size: clamp(28px, 10vw, 42px);
    }

    .wv-contact-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .syh-contact-layout {
        width: calc(100% - 20px);
        gap: 14px;
    }

    .syh-terminal {
        min-height: 0;
        border-radius: 11px;
    }

    .syh-terminal__body {
        min-height: 430px;
        padding: 18px 14px 48px;
        font-size: .88rem;
    }

    .syh-terminal__rule {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .syh-terminal__title {
        min-width: 0;
        font-size: 13px;
    }

    .syh-chip-stage {
        width: min(300px, 86vw);
        min-height: 310px;
    }

    .syh-chip-qr-slot {
        width: min(178px, 52vw);
    }
}

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

    .syh-type-cursor,
    .syh-chip-scan-line,
    .syh-chip-qr-slot::after {
        animation: none !important;
    }
}

/* =========================================================
   WEBVERSA — UNIFIED CONTACT V2
   One visual + motion system for Home, Clientele and Contact.
   Loaded after every page stylesheet, so these rules intentionally
   own the final appearance of #contact.syh-contact-section.
   ========================================================= */

#contact.syh-contact-section {
    --syh-red: var(--webversa-red);
    --syh-red-bright: var(--webversa-red);
    --syh-red-deep: var(--webversa-red);
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: clamp(78px, 8vw, 118px) 0 !important;
    overflow: hidden;
    border-top: 1px solid rgba(249, 249, 249, .075);
    border-bottom: 1px solid rgba(249, 249, 249, .045);
    background:
        radial-gradient(circle at 12% 14%, rgba(237, 32, 42, .12), transparent 27%),
        radial-gradient(circle at 88% 82%, rgba(237, 32, 42, .08), transparent 30%),
        linear-gradient(180deg, #020202 0%, var(--webversa-black) 50%, #020202 100%);
}

#contact.syh-contact-section::before,
#contact.syh-contact-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

#contact.syh-contact-section::before {
    inset: 0;
    opacity: .34;
    background:
        linear-gradient(rgba(249, 249, 249, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249, 249, 249, .018) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--webversa-black) 16%, var(--webversa-black) 84%, transparent);
    mask-image: linear-gradient(to bottom, transparent, var(--webversa-black) 16%, var(--webversa-black) 84%, transparent);
}

#contact.syh-contact-section::after {
    top: 16%;
    left: 50%;
    width: min(980px, 86vw);
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(237, 32, 42, .10), transparent 66%);
    filter: blur(34px);
    transform: translateX(-50%);
    animation: syhSectionGlow 6.5s ease-in-out infinite;
}

#contact.syh-contact-section .wv-contact-heading {
    position: relative;
    z-index: 4;
    width: min(920px, calc(100% - 36px)) !important;
    margin: 0 auto clamp(38px, 4.7vw, 64px) !important;
    text-align: center;
}

#contact.syh-contact-section .wv-contact-heading .section-tag {
    color: var(--syh-red);
}

#contact.syh-contact-section .wv-contact-heading .section-tag::before {
    background: var(--syh-red);
    box-shadow: 0 0 12px rgba(237, 32, 42, .6);
    transform-origin: right center;
    animation: syhTagLinePulse 2.8s ease-in-out infinite;
}

#contact.syh-contact-section .wv-contact-heading h2 {
    margin: 0;
    color: var(--webversa-white);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: clamp(31px, 4.2vw, 58px);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -.038em;
    text-shadow: 0 10px 34px rgba(0, 0, 0, .65);
}

#contact.syh-contact-section .wv-contact-heading p {
    max-width: 760px;
    margin: 16px auto 0;
    color: rgba(249, 249, 249, .66);
    font-family: "Poppins", sans-serif;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.78;
}

#contact.syh-contact-section .syh-contact-layout {
    position: relative;
    z-index: 3;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 380px) !important;
    align-items: stretch !important;
    gap: clamp(22px, 2.5vw, 34px) !important;
    width: min(1180px, calc(100% - (clamp(18px, 4vw, 48px) * 2))) !important;
    margin: 0 auto !important;
}

#contact.syh-contact-section .syh-terminal {
    position: relative;
    min-width: 0;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(237, 32, 42, .76);
    border-radius: 16px;
    background: var(--webversa-black);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .54),
        0 0 0 1px rgba(249, 249, 249, .018) inset,
        0 0 32px rgba(237, 32, 42, .11);
    transform: translateZ(0);
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
    animation: syhTerminalGlow 4.8s ease-in-out infinite;
}

#contact.syh-contact-section .syh-terminal:hover,
#contact.syh-contact-section .syh-terminal:focus-within {
    border-color: rgba(237, 32, 42, .96);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, .58),
        0 0 0 1px rgba(249, 249, 249, .025) inset,
        0 0 44px rgba(237, 32, 42, .18);
    transform: translateY(-3px);
}

#contact.syh-contact-section .syh-terminal::before {
    background:
        linear-gradient(rgba(237, 32, 42, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237, 32, 42, .022) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: syhTerminalGrid 12s linear infinite;
}

#contact.syh-contact-section .syh-terminal__bar {
    height: 48px;
    background:
        linear-gradient(100deg, transparent 0 35%, rgba(249, 249, 249, .13) 46%, transparent 57%) 0 0 / 240% 100% no-repeat,
        linear-gradient(180deg, var(--webversa-red) 0%, var(--webversa-red) 100%);
    animation: syhBarSweep 5.2s ease-in-out infinite;
}

#contact.syh-contact-section .syh-terminal__status {
    animation: syhStatusPulse 1.9s ease-in-out infinite;
}

#contact.syh-contact-section .syh-terminal__body {
    min-height: 452px;
    padding: 25px 25px 50px;
    color: var(--webversa-white);
    background: rgba(0, 0, 0, .97);
    font-family: "Share Tech Mono", Consolas, monospace;
    font-size: clamp(.9rem, 1.5vw, 1.04rem);
    line-height: 1.5;
}

#contact.syh-contact-section .syh-terminal__history {
    display: block !important;
    margin-bottom: 0 !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#contact.syh-contact-section .syh-terminal__entry {
    display: block !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#contact.syh-contact-section .syh-terminal__entry strong,
#contact.syh-contact-section .syh-terminal__prompt label {
    display: block;
    margin: 0 0 4px;
    color: var(--syh-red-bright);
    font-family: "Share Tech Mono", Consolas, monospace;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

#contact.syh-contact-section .syh-terminal__entry div {
    overflow: visible;
    color: var(--webversa-white);
    font-size: inherit;
    line-height: inherit;
    text-overflow: clip;
    white-space: normal;
}

#contact.syh-contact-section .syh-terminal__prompt {
    margin-top: 0;
}

#contact.syh-contact-section .syh-terminal__input-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#contact.syh-contact-section .syh-terminal__input-row:focus-within {
    border: 0;
    background: transparent;
    box-shadow: none;
}

#contact.syh-contact-section #syhTerminalInput,
#contact.syh-contact-section .syh-terminal textarea {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    max-height: 120px;
    padding: 0;
    resize: none;
    overflow: hidden;
    border: 0;
    outline: 0;
    color: var(--webversa-white);
    background: transparent;
    caret-color: var(--syh-red-bright);
    font: inherit;
    line-height: inherit;
}

#contact.syh-contact-section .syh-terminal__note {
    min-height: 23px;
    margin-top: 14px;
    color: var(--syh-red-bright);
    font-family: "Share Tech Mono", Consolas, monospace;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.45;
}

#contact.syh-contact-section .syh-terminal__note.is-success {
    color: var(--webversa-white);
}

#contact.syh-contact-section .syh-terminal__hint {
    position: absolute;
    right: 18px;
    bottom: 14px;
    margin: 0;
    color: rgba(249, 249, 249, .38);
    font-family: "Share Tech Mono", Consolas, monospace;
    font-size: 12px;
}

#contact.syh-contact-section .syh-qr-card--chip-only {
    min-width: 0;
    min-height: 500px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#contact.syh-contact-section .syh-chip-stage {
    position: relative;
    isolation: isolate;
    width: min(100%, 380px);
    min-height: 430px;
    margin: 0 auto;
    filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .48));
    transform-origin: 50% 52%;
    animation: syhChipFloat 5.4s ease-in-out infinite;
    transition: filter .35s ease, transform .35s ease;
}

#contact.syh-contact-section .syh-qr-card--chip-only:hover .syh-chip-stage {
    filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .56)) drop-shadow(0 0 18px rgba(237, 32, 42, .14));
}

#contact.syh-contact-section .syh-chip-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#contact.syh-contact-section .syh-chip-qr-slot {
    top: 50%;
    left: 52.3%;
    width: 200px;
    padding: 8px;
    border: 1px solid rgba(237, 32, 42, .18);
    background: var(--webversa-white);
    box-shadow: 0 0 0 1px rgba(249, 249, 249, .55), 0 0 28px rgba(237, 32, 42, .13);
    transform: translate(-50%, -50%);
    animation: syhQrGlow 3.2s ease-in-out infinite;
}

/* Contact entrance motion: JS only adds the ready state after DOM is usable,
   so content never gets stuck invisible when scripts are unavailable. */
#contact.syh-contact-section.syh-contact-motion-ready .wv-contact-heading,
#contact.syh-contact-section.syh-contact-motion-ready .syh-terminal,
#contact.syh-contact-section.syh-contact-motion-ready .syh-qr-card--chip-only {
    opacity: 0;
    will-change: opacity, transform, filter;
}

#contact.syh-contact-section.syh-contact-motion-ready .wv-contact-heading {
    transform: translateY(24px);
    filter: blur(4px);
}

#contact.syh-contact-section.syh-contact-motion-ready .syh-terminal {
    transform: translate3d(-34px, 18px, 0) scale(.985);
    filter: blur(3px);
}

#contact.syh-contact-section.syh-contact-motion-ready .syh-qr-card--chip-only {
    transform: translate3d(34px, 18px, 0) scale(.985);
    filter: blur(3px);
}

#contact.syh-contact-section.syh-contact-motion-ready.syh-contact-visible .wv-contact-heading,
#contact.syh-contact-section.syh-contact-motion-ready.syh-contact-visible .syh-terminal,
#contact.syh-contact-section.syh-contact-motion-ready.syh-contact-visible .syh-qr-card--chip-only {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

#contact.syh-contact-section.syh-contact-motion-ready.syh-contact-visible .wv-contact-heading {
    transition: opacity .68s ease .04s, transform .78s cubic-bezier(.16, 1, .3, 1) .04s, filter .65s ease .04s;
}

#contact.syh-contact-section.syh-contact-motion-ready.syh-contact-visible .syh-terminal {
    transition: opacity .72s ease .14s, transform .88s cubic-bezier(.16, 1, .3, 1) .14s, filter .7s ease .14s, border-color .35s ease, box-shadow .35s ease;
}

#contact.syh-contact-section.syh-contact-motion-ready.syh-contact-visible .syh-qr-card--chip-only {
    transition: opacity .72s ease .24s, transform .9s cubic-bezier(.16, 1, .3, 1) .24s, filter .72s ease .24s;
}

@keyframes syhSectionGlow {

    0%,
    100% {
        opacity: .56;
        transform: translateX(-50%) scale(.96);
    }

    50% {
        opacity: .95;
        transform: translateX(-50%) scale(1.05);
    }
}

@keyframes syhTagLinePulse {

    0%,
    100% {
        opacity: .65;
        transform: scaleX(.72);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes syhTerminalGlow {

    0%,
    100% {
        box-shadow: 0 34px 90px rgba(0, 0, 0, .54), 0 0 0 1px rgba(249, 249, 249, .018) inset, 0 0 28px rgba(237, 32, 42, .09);
    }

    50% {
        box-shadow: 0 34px 90px rgba(0, 0, 0, .54), 0 0 0 1px rgba(249, 249, 249, .02) inset, 0 0 44px rgba(237, 32, 42, .15);
    }
}

@keyframes syhTerminalGrid {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 30px, 30px 0;
    }
}

@keyframes syhBarSweep {

    0%,
    18% {
        background-position: 130% 0, 0 0;
    }

    55%,
    100% {
        background-position: -130% 0, 0 0;
    }
}

@keyframes syhStatusPulse {

    0%,
    100% {
        opacity: .62;
        transform: scale(.86);
        box-shadow: 0 0 5px rgba(249, 249, 249, .45);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
        box-shadow: 0 0 14px rgba(249, 249, 249, .95);
    }
}

@keyframes syhChipFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-.25deg);
    }

    50% {
        transform: translate3d(0, -9px, 0) rotate(.25deg);
    }
}

@keyframes syhQrGlow {

    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(249, 249, 249, .5), 0 0 20px rgba(237, 32, 42, .10);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(249, 249, 249, .7), 0 0 34px rgba(237, 32, 42, .22);
    }
}

@media (max-width: 900px) {
    #contact.syh-contact-section .syh-contact-layout {
        grid-template-columns: 1fr !important;
        width: min(100% - 28px, 760px) !important;
    }

    #contact.syh-contact-section .syh-qr-card--chip-only {
        min-height: 380px;
    }

    #contact.syh-contact-section .syh-chip-stage {
        width: min(340px, 82vw);
        min-height: 360px;
    }

    #contact.syh-contact-section .syh-chip-qr-slot {
        width: 186px;
    }

    #contact.syh-contact-section.syh-contact-motion-ready .syh-terminal,
    #contact.syh-contact-section.syh-contact-motion-ready .syh-qr-card--chip-only {
        transform: translate3d(0, 24px, 0) scale(.99);
    }
}

@media (max-width: 600px) {
    #contact.syh-contact-section {
        padding: 64px 0 !important;
    }

    #contact.syh-contact-section .wv-contact-heading {
        width: calc(100% - 28px) !important;
        margin-bottom: 32px !important;
    }

    #contact.syh-contact-section .wv-contact-heading h2 {
        font-size: clamp(28px, 10vw, 42px);
    }

    #contact.syh-contact-section .syh-contact-layout {
        width: calc(100% - 20px) !important;
        gap: 16px !important;
    }

    #contact.syh-contact-section .syh-terminal {
        min-height: 0;
        border-radius: 12px;
    }

    #contact.syh-contact-section .syh-terminal__body {
        min-height: 430px;
        padding: 18px 14px 48px;
        font-size: .88rem;
    }

    #contact.syh-contact-section .syh-terminal__history {
        display: block !important;
    }

    #contact.syh-contact-section .syh-terminal__entry:nth-child(-n+2) {
        display: block !important;
    }

    #contact.syh-contact-section .syh-chip-stage {
        width: min(300px, 86vw);
        min-height: 310px;
    }

    #contact.syh-contact-section .syh-chip-qr-slot {
        width: min(178px, 52vw);
    }
}

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

    #contact.syh-contact-section,
    #contact.syh-contact-section *,
    #contact.syh-contact-section *::before,
    #contact.syh-contact-section *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    #contact.syh-contact-section.syh-contact-motion-ready .wv-contact-heading,
    #contact.syh-contact-section.syh-contact-motion-ready .syh-terminal,
    #contact.syh-contact-section.syh-contact-motion-ready .syh-qr-card--chip-only {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ==========================================================================
   SECTION 05 — SHARED MOTION SYSTEM
   ========================================================================== */

/* ==================================================
   WEBVERSA SHARED MOTION SYSTEM
   Scroll reveals + branded button motion
   Shared by every public page.
================================================== */

:root {
    --wv-motion-red: var(--webversa-red);
    --wv-motion-red-bright: var(--webversa-red);
    --wv-motion-ease: cubic-bezier(.16, 1, .3, 1);
    --wv-motion-soft: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------
   Section reveal system
   JS adds .wv-motion-enabled only after setup, so
   content never stays hidden when JavaScript fails.
---------------------------------------------- */
body.wv-motion-enabled .wv-section-motion {
    opacity: 1;
    transition: opacity .72s ease;
}

body.wv-motion-enabled .wv-section-motion:not(.wv-revealed) {
    opacity: .01;
}

body.wv-motion-enabled .wv-reveal-item {
    --wv-reveal-x: 0px;
    opacity: 0;
    translate: var(--wv-reveal-x) 30px;
    scale: .985;
    filter: blur(4px);
    transition:
        opacity .72s ease,
        translate .88s var(--wv-motion-ease),
        scale .88s var(--wv-motion-ease),
        filter .72s ease;
    transition-delay: var(--wv-motion-delay, 0ms);
    will-change: opacity, translate, scale, filter;
}

body.wv-motion-enabled .wv-section-motion.wv-motion-left .wv-reveal-item {
    --wv-reveal-x: -28px;
}

body.wv-motion-enabled .wv-section-motion.wv-motion-right .wv-reveal-item {
    --wv-reveal-x: 28px;
}

body.wv-motion-enabled .wv-section-motion.wv-motion-up .wv-reveal-item {
    --wv-reveal-x: 0px;
}

body.wv-motion-enabled .wv-section-motion.wv-revealed .wv-reveal-item {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
}

/* Section internals keep their native hover/transform styling; reveal uses CSS translate/scale longhands. */

/* ----------------------------------------------
   Branded animated buttons
---------------------------------------------- */
.wv-animated-button {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent;
}

.wv-motion-line {
    position: absolute;
    z-index: 4;
    display: block;
    pointer-events: none;
    opacity: .92;
}

.wv-motion-line--top,
.wv-motion-line--bottom {
    width: 58%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--webversa-white) 38%, var(--wv-motion-red-bright) 70%, transparent);
    filter: drop-shadow(0 0 5px rgba(237, 32, 42, .95));
}

.wv-motion-line--left,
.wv-motion-line--right {
    width: 2px;
    height: 58%;
    background: linear-gradient(180deg, transparent, var(--webversa-white) 38%, var(--wv-motion-red-bright) 70%, transparent);
    filter: drop-shadow(0 0 5px rgba(237, 32, 42, .95));
}

.wv-motion-line--top {
    top: 0;
    left: -62%;
    animation: wvButtonTop 2.35s linear infinite;
}

.wv-motion-line--right {
    top: -62%;
    right: 0;
    animation: wvButtonRight 2.35s linear .58s infinite;
}

.wv-motion-line--bottom {
    right: -62%;
    bottom: 0;
    animation: wvButtonBottom 2.35s linear 1.16s infinite;
}

.wv-motion-line--left {
    bottom: -62%;
    left: 0;
    animation: wvButtonLeft 2.35s linear 1.74s infinite;
}

/* Existing Connect buttons already contain their own four border spans. */
body.wv-motion-enabled .btn-connect .btn-border-line {
    opacity: .95;
    filter: drop-shadow(0 0 5px rgba(237, 32, 42, .9));
}

body.wv-motion-enabled .btn-connect .btn-border-top {
    animation-duration: 2.35s;
}

body.wv-motion-enabled .btn-connect .btn-border-right {
    animation-duration: 2.35s;
    animation-delay: .58s;
}

body.wv-motion-enabled .btn-connect .btn-border-bottom {
    animation-duration: 2.35s;
    animation-delay: 1.16s;
}

body.wv-motion-enabled .btn-connect .btn-border-left {
    animation-duration: 2.35s;
    animation-delay: 1.74s;
}

/* Gentle energy sweep without touching any existing ::before/::after styles. */
.wv-button-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(110deg, transparent 24%, rgba(249, 249, 249, .12) 45%, rgba(237, 32, 42, .14) 52%, transparent 72%);
    background-size: 240% 100%;
    background-position: 130% 0;
    pointer-events: none;
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .wv-animated-button:hover .wv-button-shine {
        opacity: 1;
        animation: wvButtonShine .78s var(--wv-motion-soft) both;
    }

    .wv-animated-button:hover {
        filter: drop-shadow(0 0 10px rgba(237, 32, 42, .22));
    }
}

.wv-animated-button:active {
    scale: .975;
}

.wv-animated-button:focus-visible {
    outline: 2px solid rgba(249, 249, 249, .92) !important;
    outline-offset: 4px;
}

/* Click/tap ripple generated by motion.js. */
.wv-click-ripple {
    position: absolute;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 1px solid rgba(249, 249, 249, .85);
    border-radius: 999px;
    background: rgba(237, 32, 42, .28);
    box-shadow: 0 0 18px rgba(237, 32, 42, .46);
    pointer-events: none;
    animation: wvButtonRipple .62s ease-out forwards;
}

/* List-selector buttons stay cleaner: subtle interaction instead of four continuous beams. */
.wv-button-micro {
    -webkit-tap-highlight-color: transparent;
    transition: filter .3s ease, translate .3s var(--wv-motion-ease), scale .3s var(--wv-motion-ease) !important;
}

.wv-button-micro:active {
    scale: .98;
}

.wv-button-micro.active,
.wv-button-micro.is-active {
    animation: wvMicroPulse 2.4s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
    .wv-button-micro:hover {
        translate: 3px 0;
        filter: drop-shadow(0 0 8px rgba(237, 32, 42, .22));
    }
}

/* Small controls receive motion without forcing the full edge treatment. */
.menu-toggle {
    transition: transform .35s var(--wv-motion-ease), border-color .35s ease, box-shadow .35s ease, background .35s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .menu-toggle:hover {
        transform: translateY(-2px) scale(1.03);
    }
}

@keyframes wvButtonTop {

    0%,
    8% {
        left: -62%;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    48%,
    100% {
        left: 108%;
        opacity: 0;
    }
}

@keyframes wvButtonRight {

    0%,
    8% {
        top: -62%;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    48%,
    100% {
        top: 108%;
        opacity: 0;
    }
}

@keyframes wvButtonBottom {

    0%,
    8% {
        right: -62%;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    48%,
    100% {
        right: 108%;
        opacity: 0;
    }
}

@keyframes wvButtonLeft {

    0%,
    8% {
        bottom: -62%;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    48%,
    100% {
        bottom: 108%;
        opacity: 0;
    }
}

@keyframes wvButtonShine {
    from {
        background-position: 130% 0;
    }

    to {
        background-position: -130% 0;
    }
}

@keyframes wvMicroPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(237, 32, 42, 0));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(237, 32, 42, .32));
    }
}

@keyframes wvButtonRipple {
    0% {
        opacity: .75;
        transform: scale(.2);
    }

    100% {
        opacity: 0;
        transform: scale(18);
    }
}

/* Mobile: preserve the animation language, reduce travel and blur. */
@media (max-width: 700px) {
    body.wv-motion-enabled .wv-reveal-item {
        translate: 0 20px;
        scale: .992;
        filter: blur(2px);
    }

    body.wv-motion-enabled .wv-section-motion.wv-revealed .wv-reveal-item {
        translate: 0 0;
        scale: 1;
        filter: blur(0);
    }

    .wv-motion-line--top,
    .wv-motion-line--bottom {
        width: 48%;
    }

    .wv-motion-line--left,
    .wv-motion-line--right {
        height: 48%;
    }
}

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

    body.wv-motion-enabled .wv-section-motion,
    body.wv-motion-enabled .wv-reveal-item,
    .wv-animated-button,
    .wv-button-shine,
    .wv-motion-line,
    .btn-connect .btn-border-line,
    .menu-toggle,
    .wv-button-micro {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    body.wv-motion-enabled .wv-section-motion,
    body.wv-motion-enabled .wv-reveal-item {
        opacity: 1 !important;
        translate: 0 0 !important;
        scale: 1 !important;
        filter: none !important;
    }

    .wv-click-ripple {
        display: none !important;
    }
}


/* ==================================================
   WEBVERSA BACK-TO-TOP — NAVBAR CONTACT MATCH
   Authoritative final override to prevent legacy CSS clashes.
================================================== */
.wv-scroll-tools {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 4900 !important;
    width: 68px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(12px, 0, 0) !important;
    transition: opacity .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .32s !important;
}

.wv-scroll-tools.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 0s !important;
}

.wv-scroll-tools .wv-scroll-progress {
    position: absolute !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 0 !important;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 70px)) !important;
    left: auto !important;
    width: 8px !important;
    min-height: 80px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px 0 0 999px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(249, 249, 249, .40) 20%, rgba(249, 249, 249, .18) 80%, transparent 100%) !important;
    opacity: .75 !important;
    pointer-events: none !important;
}

.wv-scroll-tools .wv-scroll-progress__thumb {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 8px !important;
    height: clamp(66px, 8.5vh, 90px) !important;
    border-radius: 999px 0 0 999px !important;
    background: linear-gradient(180deg, var(--webversa-red) 0%, var(--webversa-red) 42%, var(--webversa-red) 100%) !important;
    box-shadow: 0 0 10px rgba(237, 32, 42, .72), 0 0 22px rgba(237, 32, 42, .24), inset 1px 0 0 rgba(249, 249, 249, .22) !important;
    transform: translate3d(0, 0, 0);
    will-change: transform !important;
    transition: none !important;
}

.wv-scroll-tools .wv-scroll-top-button {
    position: absolute !important;
    right: 18px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid rgba(249, 249, 249, .16) !important;
    border-radius: 0 !important;
    color: var(--webversa-white) !important;
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(249, 249, 249, .08) !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0) !important;
    will-change: transform;
    transition: transform .32s ease, background .32s ease, box-shadow .32s ease !important;
}

.wv-scroll-tools .wv-scroll-top-button:hover,
.wv-scroll-tools .wv-scroll-top-button:focus-visible {
    background: var(--webversa-black) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(237, 32, 42, .48) !important;
    transform: translate3d(0, -3px, 0) !important;
}

.wv-scroll-tools .wv-scroll-top-button:focus-visible {
    outline: 2px solid var(--webversa-white) !important;
    outline-offset: 4px !important;
}

.wv-scroll-tools .wv-scroll-top-button i {
    position: relative !important;
    z-index: 4 !important;
    color: var(--webversa-white) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 5px rgba(249, 249, 249, .32)) !important;
}

/* Exact same four travelling border beams as the navbar Contact CTA. */
.wv-scroll-top-button .btn-border-line {
    position: absolute !important;
    z-index: 8 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: .95 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 5px rgba(237, 32, 42, .9)) !important;
}

.wv-scroll-top-button .btn-border-top {
    top: 0 !important;
    left: -100%;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--webversa-white)) !important;
    animation: buttonTop 2.35s linear infinite !important;
}

.wv-scroll-top-button .btn-border-right {
    top: -100%;
    right: 0 !important;
    width: 2px !important;
    height: 100% !important;
    background: linear-gradient(180deg, transparent, var(--webversa-white)) !important;
    animation: buttonRight 2.35s linear .58s infinite !important;
}

.wv-scroll-top-button .btn-border-bottom {
    right: -100%;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(270deg, transparent, var(--webversa-white)) !important;
    animation: buttonBottom 2.35s linear 1.16s infinite !important;
}

.wv-scroll-top-button .btn-border-left {
    bottom: -100%;
    left: 0 !important;
    width: 2px !important;
    height: 100% !important;
    background: linear-gradient(0deg, transparent, var(--webversa-white)) !important;
    animation: buttonLeft 2.35s linear 1.74s infinite !important;
}

@media (max-width: 900px) {
    .wv-scroll-tools {
        width: 58px !important;
    }

    .wv-scroll-tools .wv-scroll-progress {
        width: 7px !important;
        bottom: max(72px, calc(env(safe-area-inset-bottom) + 62px)) !important;
    }

    .wv-scroll-tools .wv-scroll-progress__thumb {
        width: 7px !important;
        height: 62px !important;
    }

    .wv-scroll-tools .wv-scroll-top-button {
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 520px) {
    .wv-scroll-tools {
        width: 48px !important;
    }

    .wv-scroll-tools .wv-scroll-progress {
        top: max(12px, env(safe-area-inset-top)) !important;
        bottom: max(62px, calc(env(safe-area-inset-bottom) + 54px)) !important;
        width: 5px !important;
    }

    .wv-scroll-tools .wv-scroll-progress__thumb {
        width: 5px !important;
        height: 50px !important;
    }

    .wv-scroll-tools .wv-scroll-top-button {
        right: 6px !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
    }

    .wv-scroll-tools .wv-scroll-top-button i {
        font-size: 15px !important;
    }
}

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

    .wv-scroll-tools,
    .wv-scroll-tools .wv-scroll-top-button,
    .wv-scroll-top-button .btn-border-line {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}


/* ----------------------------------------------
   Final page entrance polish
---------------------------------------------- */
body {
    animation: wvPageFadeIn .58s ease-out both;
}

body.wv-motion-enabled .wv-section-motion.wv-revealed .wv-reveal-item {
    animation: wvRevealSettle .72s var(--wv-motion-ease) both;
    animation-delay: var(--wv-motion-delay, 0ms);
}

@keyframes wvPageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes wvRevealSettle {
    0% {
        opacity: .2;
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

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

    body,
    body.wv-motion-enabled .wv-section-motion.wv-revealed .wv-reveal-item {
        animation: none !important;
    }
}

/* ==========================================================================
   SECTION 06 — GLOBAL BLACK / RED THEME
   ========================================================================== */

/* ==================================================
   WEBVERSA FINAL GLOBAL THEME
   Accent: var(--webversa-red)
   Background: var(--webversa-black)
================================================== */
:root {
    --primary: var(--webversa-red) !important;
    --primary-dark: var(--webversa-red) !important;
    --primary-soft: var(--webversa-red) !important;
    --brand-red: var(--webversa-red) !important;
    --red: var(--webversa-red) !important;
    --red-dark: var(--webversa-red) !important;
    --wv-motion-red: var(--webversa-red) !important;
    --wv-motion-red-bright: var(--webversa-red) !important;
}

html,
body,
main,
footer,
.site-footer {
    background-color: var(--webversa-black) !important;
}

/* Every real page section uses a pure black base. Internal cards,
   images and decorative pseudo-elements stay intact. */
section {
    background-color: var(--webversa-black) !important;
    background-image: none !important;
}

::selection {
    color: var(--webversa-white);
    background: var(--webversa-red);
}

/* Consistent accessible focus treatment without oversized glow. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline-color: var(--webversa-red) !important;
}

/* Keep accent shadows restrained and clean. */
.wv-service-card,
.project-node,
.solution-item,
.contact-item,
.base-card {
    --wv-clean-accent: var(--webversa-red);
}

/* ==========================================================================
   SECTION 07 — RESPONSIVE OVERRIDES
   ========================================================================== */

/* ============================================================
   WEBVERSA — FINAL RESPONSIVE OVERRIDES
   Loaded after page/theme styles so legacy fixed-width rules
   cannot create horizontal overflow on smaller viewports.
============================================================ */

:root {
    --wv-r-gutter: clamp(14px, 4vw, 44px);
    --wv-r-section: clamp(58px, 7vw, 96px);
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

main,
main>section,
.site-header,
.navbar-area,
.wvf-footer,
.wvf-footer-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
}

p,
li,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

.page-container,
.contact-page-shell,
.contact-container,
.our-base-container,
.wv-showcase-container,
.solutions-container,
.wv-contact-heading,
.wv-contact-wrap .syh-contact-layout,
.wvf-footer-inner {
    min-width: 0;
}

.page-container {
    width: min(1180px, calc(100% - (var(--wv-r-gutter) * 2))) !important;
    margin-inline: auto !important;
}

.wv-section-heading,
.projects-heading,
.wv-contact-heading {
    max-width: calc(100% - (var(--wv-r-gutter) * 2));
}

/* Prevent transforms/decorations from producing a page-wide scrollbar. */
.hero-section,
.services-section,
.wv-pro-services,
.services-marquee,
.wv-showcase-section,
.wv-infra-industries-section,
.industry-solutions,
.projects-section,
.syh-contact-section,
.wv-contact-wrap,
.contact-page-banner,
.contact-page-cta,
.contact-section,
.our-base-section,
.wvf-footer {
    max-width: 100%;
    overflow-x: clip;
}

/* ============================================================
   HEADER / NAVIGATION
============================================================ */

@media (min-width: 1121px) and (max-width: 1320px) {
    .brand-logo {
        left: 22px !important;
    }

    .brand-logo img {
        width: 176px !important;
    }

    .center-navbar {
        width: min(620px, 54vw) !important;
    }

    .nav-separator {
        margin-inline: 16px !important;
    }

    .nav-link {
        font-size: 14px !important;
    }

    .connect-wrapper {
        right: 22px !important;
    }

    .btn-connect {
        min-width: 126px !important;
        padding-inline: 22px !important;
    }
}

@media (max-width: 1120px) {
    :root {
        --header-height: 72px;
        --mobile-header-height: 72px;
    }

    .status-bar,
    .connect-wrapper {
        display: none !important;
    }

    .site-header,
    .navbar-area {
        height: 72px !important;
    }

    .site-header {
        background: rgba(0, 0, 0, .88) !important;
        border-bottom: 1px solid rgba(249, 249, 249, .08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .navbar-area {
        background: transparent !important;
    }

    .brand-logo {
        top: 10px !important;
        left: max(14px, env(safe-area-inset-left)) !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: 52px !important;
        transform: none !important;
    }

    .brand-logo img {
        width: 158px !important;
        height: 52px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    /* Keep the logo in the header on tablet/mobile instead of docking it
     at the bottom of the viewport after scroll. */
    .site-header.is-scrolled .brand-logo,
    .site-header.is-logo-docked .brand-logo {
        position: absolute !important;
        top: 10px !important;
        left: max(14px, env(safe-area-inset-left)) !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: 52px !important;
        transform: none !important;
    }

    .menu-toggle {
        display: block !important;
        position: absolute !important;
        top: 14px !important;
        right: max(14px, env(safe-area-inset-right)) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 9px !important;
        background: rgba(8, 8, 8, .96) !important;
        border-color: rgba(237, 32, 42, .55) !important;
    }

    .center-navbar {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        width: min(390px, 88vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 88px 18px 28px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background:
            radial-gradient(circle at 100% 0%, rgba(237, 32, 42, .14), transparent 30%),
            rgba(4, 4, 4, .985) !important;
        border-left: 1px solid rgba(237, 32, 42, .38);
        clip-path: none !important;
        transform: translate3d(100%, 0, 0) !important;
        box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
        transition: transform .34s ease, opacity .28s ease, visibility .28s ease !important;
    }

    .center-navbar.show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .nav-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: auto !important;
        padding: 0 !important;
    }

    .nav-item,
    .nav-link {
        width: 100% !important;
    }

    .nav-link {
        min-height: 54px;
        display: flex !important;
        align-items: center;
        padding: 14px 8px !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
        border-bottom: 1px solid rgba(249, 249, 249, .08) !important;
    }

    .nav-separator {
        display: none !important;
    }
}

/* ============================================================
   HOME — HERO / GENERAL CONTENT
============================================================ */

.hero-content,
.code-window-shell,
.code-window {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1120px) {
    .hero-section {
        min-height: max(620px, 100svh) !important;
        min-height: max(620px, 100dvh) !important;
        padding-inline: var(--wv-r-gutter) !important;
    }

    .services-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(30px, 6vw, 52px) !important;
    }

    .services-copy,
    .services-visual {
        width: min(760px, 100%) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    .cards-row {
        width: 100%;
    }

    .wv-service-detail,
    .wv-detail-panel,
    .wv-detail-content,
    .wv-detail-media,
    .wv-showcase-stage,
    .wv-infra-circuit-container,
    .solutions-frame,
    .details-panel,
    .projects-stage,
    .projects-monitor,
    .projects-monitor-svg {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {

    .wv-contact-wrap .syh-contact-layout,
    .syh-contact-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(760px, calc(100% - (var(--wv-r-gutter) * 2))) !important;
        margin-inline: auto !important;
    }

    .syh-terminal,
    .syh-qr-card {
        min-height: 0 !important;
        width: 100% !important;
    }

    .syh-qr-card--chip-only .syh-chip-stage {
        width: min(360px, 88vw) !important;
        min-height: 360px !important;
    }

    .solutions-container {
        width: min(900px, calc(100% - (var(--wv-r-gutter) * 2))) !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 700px) {
    :root {
        --wv-r-gutter: 14px;
        --wv-r-section: 58px;
        --header-height: 68px;
        --mobile-header-height: 68px;
    }

    .site-header,
    .navbar-area {
        height: 68px !important;
    }

    .brand-logo,
    .site-header.is-scrolled .brand-logo,
    .site-header.is-logo-docked .brand-logo {
        top: 9px !important;
        height: 48px !important;
    }

    .brand-logo img {
        width: 142px !important;
        height: 48px !important;
    }

    .menu-toggle {
        top: 12px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .center-navbar {
        width: min(340px, 92vw) !important;
        padding: 78px 15px 24px !important;
    }

    .nav-link {
        min-height: 52px;
        font-size: 16px !important;
    }

    .hero-section {
        min-height: max(590px, 100svh) !important;
        min-height: max(590px, 100dvh) !important;
        padding: 94px 12px 118px !important;
    }

    .code-window-shell {
        width: min(100%, 610px) !important;
    }

    .window-header {
        height: 42px !important;
        padding-inline: 12px !important;
    }

    .window-body {
        min-height: 90px !important;
        padding: 17px 12px !important;
        font-size: clamp(13px, 4vw, 16px) !important;
    }

    .line-number {
        flex-basis: 25px !important;
    }

    .slider-container {
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
    }

    .slider,
    .slide {
        height: 62px !important;
    }

    .slide {
        flex-basis: 78px !important;
    }

    .slide i {
        font-size: 28px !important;
    }

    .wv-section-heading,
    .projects-heading,
    .wv-contact-heading {
        width: calc(100% - 28px) !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .wv-section-heading h2,
    .projects-heading h2,
    .wv-contact-heading h2 {
        font-size: clamp(28px, 9vw, 42px) !important;
        line-height: 1.1 !important;
    }

    .wv-section-heading p,
    .projects-heading p,
    .wv-contact-heading p {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    .services-section,
    .wv-pro-services,
    .wv-showcase-section,
    .wv-infra-industries-section,
    .industry-solutions,
    .projects-section,
    .wv-contact-wrap {
        padding-top: var(--wv-r-section) !important;
        padding-bottom: var(--wv-r-section) !important;
    }

    .cards-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .box-inner {
        min-height: 94px !important;
        padding: 14px !important;
    }

    .wv-services-viewport {
        max-width: 100vw !important;
        padding-inline: 12px !important;
        scroll-padding-inline: 12px;
    }

    .wv-service-card {
        max-width: min(86vw, 340px) !important;
    }

    .wv-detail-panel {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .wv-detail-columns {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .wv-showcase-container,
    .solutions-container {
        width: calc(100% - 24px) !important;
    }

    .solutions-frame,
    .details-panel {
        width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .projects-stage {
        width: 100% !important;
        padding-inline: 12px !important;
        overflow: hidden !important;
    }

    .projects-monitor,
    .projects-monitor-svg {
        width: 100% !important;
        height: auto !important;
    }

    .projects-side {
        width: 100% !important;
    }

    .project-node,
    .client-project-button {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .syh-contact-section {
        padding-inline: 0 !important;
    }

    .wv-contact-wrap .syh-contact-layout,
    .syh-contact-layout {
        width: calc(100% - 24px) !important;
        gap: 14px !important;
    }

    .syh-terminal__bar {
        padding-inline: 12px !important;
        font-size: 12px !important;
    }

    .syh-terminal__body {
        padding: 18px 14px 48px !important;
        font-size: 13px !important;
    }

    .syh-terminal__input-row {
        gap: 6px !important;
    }

    .syh-terminal textarea,
    .syh-terminal input {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .syh-qr-card--chip-only .syh-chip-stage {
        width: min(300px, 84vw) !important;
        min-height: 310px !important;
    }

    .syh-chip-qr-slot {
        width: min(170px, 50vw) !important;
    }
}

/* ============================================================
   CLIENTELE / PROJECT DETAIL PAGE
============================================================ */

.clientele-page .projects-stage,
.clientele-page .project-detail-section .services-layout {
    min-width: 0;
}

@media (max-width: 1120px) {
    .clientele-page .projects-stage {
        width: min(960px, calc(100% - (var(--wv-r-gutter) * 2))) !important;
        margin-inline: auto !important;
    }

    .clientele-page .projects-monitor {
        width: min(840px, 100%) !important;
        margin-inline: auto !important;
    }

    .clientele-page .project-detail-section .services-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .clientele-page .project-detail-section .services-copy,
    .clientele-page .project-detail-section .services-visual {
        width: min(760px, 100%) !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 700px) {
    .clientele-page .projects-section {
        padding-inline: 0 !important;
    }

    .clientele-page .projects-stage {
        width: 100% !important;
        padding-inline: 10px !important;
    }

    .clientele-page .screen-support-line,
    .clientele-page .screen-support-full {
        display: none !important;
    }

    .clientele-page .project-detail-section {
        padding-inline: 0 !important;
    }

    .clientele-page .project-logo-plate {
        max-width: min(86vw, 360px) !important;
    }

    .clientele-page .project-action-button {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
}

/* ============================================================
   CONTACT PAGE
============================================================ */

.contact-page-main {
    min-width: 0;
}

.contact-page-shell {
    width: min(1180px, calc(100% - (var(--wv-r-gutter) * 2))) !important;
}

@media (max-width: 1120px) {
    .contact-page-main {
        padding-top: 72px !important;
    }

    .contact-page-banner__inner,
    .contact-page-cta__inner {
        width: min(760px, calc(100% - (var(--wv-r-gutter) * 2))) !important;
    }

    .contact-grid {
        max-width: 720px !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 700px) {
    .contact-page-main {
        padding-top: 68px !important;
    }

    .contact-page-banner {
        min-height: 210px !important;
    }

    .contact-page-banner__inner {
        width: calc(100% - 28px) !important;
    }

    .contact-page-banner__eyebrow {
        font-size: clamp(22px, 8vw, 30px) !important;
    }

    .contact-page-banner h1 {
        font-size: clamp(22px, 7vw, 30px) !important;
    }

    .contact-page-breadcrumb {
        flex-wrap: wrap;
        gap: 8px !important;
        font-size: 13px !important;
    }

    .contact-page-cta {
        min-height: 0 !important;
        padding: 56px 0 62px !important;
    }

    .contact-page-cta__inner {
        width: calc(100% - 28px) !important;
    }

    .contact-section {
        min-height: 0 !important;
        padding: 58px 14px 66px !important;
    }

    .contact-heading {
        margin-bottom: 40px !important;
        padding-inline: 0 !important;
    }

    .contact-grid {
        width: min(520px, 100%) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .contact-item {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 118px minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .hexagon-card {
        width: 118px !important;
        height: 130px !important;
    }

    .hexagon-content {
        gap: 8px !important;
    }

    .hexagon-content i,
    .hexagon-content .fa-location-dot,
    .hexagon-content .fa-whatsapp {
        font-size: 34px !important;
    }

    .hexagon-content span {
        font-size: 12px !important;
    }

    .contact-detail,
    .detail-top .contact-detail,
    .detail-bottom .contact-detail {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        white-space: normal !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    .side-circuit,
    .icon-connector,
    .detail-top .contact-detail::after,
    .detail-bottom .contact-detail::before {
        display: none !important;
    }

    .our-base-section {
        padding: 58px 14px 68px !important;
    }

    .base-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .base-card {
        width: min(340px, 92vw) !important;
        max-width: 100% !important;
    }

    .our-base-map-wrap,
    .our-base-map-image {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 400px) {
    .contact-item {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .hexagon-card {
        width: 96px !important;
        height: 106px !important;
    }

    .hexagon-content i,
    .hexagon-content .fa-location-dot,
    .hexagon-content .fa-whatsapp {
        font-size: 28px !important;
    }

    .hexagon-content span {
        font-size: 10px !important;
    }

    .contact-detail {
        font-size: 12px !important;
    }
}

/* ============================================================
   FOOTER / FLOATING CONTROLS
============================================================ */

.wvf-footer-inner {
    width: min(1740px, calc(100% - (var(--wv-r-gutter) * 2))) !important;
}

@media (max-width: 1000px) {
    .wvf-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 30px 24px !important;
    }

    .wvf-brand {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 600px) {
    .wvf-landmark-stage {
        height: 145px !important;
        overflow: hidden !important;
    }

    .wvf-footer-inner {
        width: calc(100% - 28px) !important;
        padding: 26px 0 22px !important;
    }

    .wvf-footer-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
    }

    .wvf-brand {
        grid-column: auto !important;
    }

    .wvf-col h3 {
        margin-bottom: 14px !important;
        font-size: 20px !important;
    }

    .wvf-bottom {
        margin-top: 26px !important;
        text-align: center !important;
    }

    .wv-scroll-tools {
        right: max(8px, env(safe-area-inset-right)) !important;
    }
}

/* Very narrow devices. */
@media (max-width: 360px) {
    :root {
        --wv-r-gutter: 10px;
    }

    .brand-logo img {
        width: 132px !important;
    }

    .center-navbar {
        width: 94vw !important;
    }

    .hero-section {
        padding-inline: 10px !important;
    }

    .wv-section-heading,
    .projects-heading,
    .wv-contact-heading {
        width: calc(100% - 20px) !important;
    }
}

/* Touch devices should not depend on hover to reveal essential content. */
@media (hover: none) and (pointer: coarse) {

    .project-node,
    .client-project-button,
    .base-card,
    .feature-box-wrapper,
    .wv-service-card {
        -webkit-tap-highlight-color: transparent;
    }
}

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

    .center-navbar,
    .menu-toggle span {
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   OUR SERVICES - MOBILE HORIZONTAL SWIPE ROW
   ========================================================== */
@media (max-width: 768px) {
    .wv-pro-services {
        overflow: hidden !important;
    }

    .wv-pro-services .wv-services-viewport {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 8px 14px 16px !important;
        margin: 0 !important;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 14px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        touch-action: pan-x;
        scrollbar-width: none;
    }

    .wv-pro-services .wv-services-viewport::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .wv-pro-services .wv-services-track {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: max-content !important;
        min-width: max-content !important;
        padding: 0 2px 4px !important;
        margin: 0 !important;
    }

    .wv-pro-services .wv-service-card,
    .wv-pro-services .wv-service-card.wv-short-connector {
        flex: 0 0 108px !important;
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        min-height: 134px !important;
        height: auto !important;
        padding: 2px 0 8px !important;
        scroll-snap-align: start;
    }

    .wv-pro-services .wv-tech-box {
        width: 82px !important;
        height: 82px !important;
        flex: 0 0 82px !important;
    }

    .wv-pro-services .wv-circuit-connector,
    .wv-pro-services .wv-service-card.wv-short-connector .wv-circuit-connector {
        display: none !important;
    }

    .wv-pro-services .wv-service-title {
        width: 104px !important;
        max-width: 104px !important;
        margin-top: 10px !important;
        padding-inline: 2px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center !important;
    }

    .wv-pro-services .wv-service-title::after {
        bottom: -6px !important;
    }

    .wv-pro-services .wv-service-detail {
        margin-top: 4px !important;
    }
}

@media (max-width: 480px) {
    .wv-pro-services .wv-services-viewport {
        padding-inline: 10px !important;
        scroll-padding-inline: 10px;
    }

    .wv-pro-services .wv-services-track {
        gap: 8px !important;
    }

    .wv-pro-services .wv-service-card,
    .wv-pro-services .wv-service-card.wv-short-connector {
        flex-basis: 96px !important;
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        min-height: 124px !important;
    }

    .wv-pro-services .wv-tech-box {
        width: 76px !important;
        height: 76px !important;
        flex-basis: 76px !important;
    }

    .wv-pro-services .wv-service-title {
        width: 94px !important;
        max-width: 94px !important;
        margin-top: 9px !important;
        font-size: 11.5px !important;
    }
}

/* ============================================================
   OUR SERVICES — MOBILE SINGLE-ROW SWIPE STRIP
   Keep every service icon in one horizontal row on small screens.
   The user can swipe/drag the strip instead of wrapping into rows.
============================================================ */
@media (max-width: 700px) {
    #services.wv-pro-services {
        overflow-x: clip !important;
    }

    #services .wv-services-viewport {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 5px 14px 15px !important;
        scroll-padding-inline: 14px !important;
        scroll-snap-type: x proximity !important;
        overscroll-behavior-inline: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        scrollbar-width: none !important;
        cursor: grab;
    }

    #services .wv-services-viewport:active {
        cursor: grabbing;
    }

    #services .wv-services-viewport::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #services .wv-services-track {
        display: flex !important;
        flex-flow: row nowrap !important;
        grid-template-columns: none !important;
        grid-auto-flow: unset !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 4px 0 0 !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    #services .wv-service-card {
        flex: 0 0 104px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        min-height: 142px !important;
        margin: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
    }

    #services .wv-tech-box {
        width: 64px !important;
        height: 64px !important;
        margin-inline: auto !important;
    }

    #services .wv-circuit-connector {
        height: 40px !important;
        transform: scaleX(.68) !important;
        transform-origin: top center !important;
    }

    #services .wv-service-card.wv-short-connector .wv-circuit-connector {
        height: 28px !important;
    }

    #services .wv-service-title {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 2px !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 420px) {
    #services .wv-services-viewport {
        padding-inline: 12px !important;
        scroll-padding-inline: 12px !important;
    }

    #services .wv-services-track {
        gap: 9px !important;
    }

    #services .wv-service-card {
        flex-basis: 92px !important;
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        min-height: 132px !important;
    }

    #services .wv-tech-box {
        width: 58px !important;
        height: 58px !important;
    }

    #services .wv-circuit-connector {
        height: 36px !important;
        transform: scaleX(.62) !important;
    }

    #services .wv-service-card.wv-short-connector .wv-circuit-connector {
        height: 25px !important;
    }

    #services .wv-service-title {
        font-size: 9px !important;
    }
}

/* =========================================================
   OUR SERVICES — SMALL SCREEN STABILITY PATCH
   Keep the swipe row clean: no compressed circuit graphics under chips.
   ========================================================= */
@media (max-width: 768px) {

    body #services.wv-pro-services .wv-circuit-connector,
    body #services.wv-pro-services .wv-service-card.wv-short-connector .wv-circuit-connector {
        display: none !important;
    }

    body #services.wv-pro-services .wv-service-card,
    body #services.wv-pro-services .wv-service-card.wv-short-connector {
        min-height: 112px !important;
    }

    body #services.wv-pro-services .wv-service-title {
        margin-top: 8px !important;
    }
}

/* ============================================================
   MOBILE DOCKED LOGO FIX
   Restore the original logo drop/dock animation on small screens.
   The normal header logo stays top-left; after scroll it moves to
   the bottom-center of the viewport, matching the desktop behavior.
============================================================ */
@media (max-width: 1120px) {

    body .site-header.is-scrolled .brand-logo,
    body .site-header.is-logo-docked .brand-logo {
        position: fixed !important;
        top: calc(100dvh - 80px) !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 230px !important;
        height: 70px !important;
        padding: 8px 34px 6px !important;
        margin: 0 !important;
        clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%) !important;
        transform: translate3d(-50%, 0, 0) !important;
        z-index: 5003 !important;
    }

    body .site-header.is-scrolled .brand-logo img,
    body .site-header.is-logo-docked .brand-logo img {
        width: 150px !important;
        height: 48px !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

@media (max-width: 700px) {

    body .site-header.is-scrolled .brand-logo,
    body .site-header.is-logo-docked .brand-logo {
        top: calc(100dvh - 70px) !important;
        width: 196px !important;
        height: 62px !important;
        padding: 7px 28px 5px !important;
    }

    body .site-header.is-scrolled .brand-logo img,
    body .site-header.is-logo-docked .brand-logo img {
        width: 132px !important;
        height: 42px !important;
    }
}

@media (max-width: 420px) {

    body .site-header.is-scrolled .brand-logo,
    body .site-header.is-logo-docked .brand-logo {
        top: calc(100dvh - 66px) !important;
        width: 184px !important;
        height: 58px !important;
        padding: 6px 26px 5px !important;
    }

    body .site-header.is-scrolled .brand-logo img,
    body .site-header.is-logo-docked .brand-logo img {
        width: 124px !important;
        height: 40px !important;
    }
}

/* ==========================================================================
   SECTION 08 — 404 / ERROR PAGE
   ========================================================================== */


/* ============================================================
   SECTION 08 — 404 / ERROR PAGE
   ============================================================ */
body.error-page .error-main {
    position: relative;
    padding: clamp(150px, 16vw, 210px) var(--wv-r-gutter, clamp(14px, 4vw, 44px)) clamp(70px, 8vw, 110px);
    overflow: hidden;
    background: var(--webversa-black) !important;
}

body.error-page .error-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

body.error-page .error-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
    align-items: center;
    gap: clamp(36px, 6vw, 78px);
}

body.error-page .error-copy {
    min-width: 0;
}

body.error-page .error-eyebrow {
    margin-bottom: 10px;
    color: var(--webversa-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

body.error-page .error-code {
    margin: 0;
    color: var(--webversa-white);
    font-size: clamp(112px, 17vw, 248px);
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: .78;
    text-shadow: 0 0 44px rgba(237, 32, 42, .18);
}

body.error-page .error-title {
    max-width: 760px;
    margin: clamp(30px, 4vw, 50px) 0 16px;
    color: var(--webversa-white);
    font-size: clamp(34px, 5vw, 68px);
    line-height: 1.02;
}

body.error-page .error-title span {
    color: var(--webversa-red);
}

body.error-page .error-desc {
    max-width: 680px;
    margin: 0;
    color: #a7a7a7;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.8;
}

body.error-page .error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

body.error-page .error-action {
    min-height: 46px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--webversa-red);
    background: var(--webversa-red);
    color: var(--webversa-white);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}

body.error-page .error-action--ghost {
    background: #070707;
    border-color: #303030;
}

@media (hover:hover) and (pointer:fine) {
    body.error-page .error-action:hover {
        transform: translateY(-2px);
        background: var(--webversa-white);
        border-color: var(--webversa-white);
        color: var(--webversa-black);
    }

    body.error-page .error-action--ghost:hover {
        border-color: var(--webversa-red);
        color: var(--webversa-red);
        background: #070707;
    }
}

body.error-page .error-console {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(237, 32, 42, .58);
    border-radius: 18px;
    background: #050505;
    box-shadow: 0 28px 80px rgba(237, 32, 42, .09);
}

body.error-page .error-console__head {
    min-height: 46px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--webversa-red);
    color: var(--webversa-white);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.error-page .error-dots {
    display: flex;
    gap: 6px;
}

body.error-page .error-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--webversa-white);
}

body.error-page .error-console__body {
    padding: clamp(22px, 4vw, 34px);
}

body.error-page .error-radar {
    width: 116px;
    height: 116px;
    margin: 0 auto 26px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #333;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 0 23%, #222 24% 25%, transparent 26% 48%, #222 49% 50%, transparent 51%);
}

body.error-page .error-radar::before,
body.error-page .error-radar::after {
    content: "";
    position: absolute;
    background: #292929;
}

body.error-page .error-radar::before {
    width: 1px;
    height: 100%;
    left: 50%;
}

body.error-page .error-radar::after {
    height: 1px;
    width: 100%;
    top: 50%;
}

body.error-page .error-radar__sweep {
    width: 50%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform-origin: 0 100%;
    border-left: 1px solid var(--webversa-red);
    background: linear-gradient(115deg, rgba(237, 32, 42, .18), transparent 62%);
    animation: errorRadarSweep 3s linear infinite;
}

body.error-page .error-radar__core {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--webversa-red);
    box-shadow: 0 0 18px rgba(237, 32, 42, .95);
    z-index: 2;
}

@keyframes errorRadarSweep {
    to {
        transform: rotate(360deg);
    }
}

body.error-page .error-label {
    margin: 0 0 7px;
    color: #777;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.error-page .error-route {
    margin: 0 0 24px;
    color: #f4f4f4;
    font-family: "Courier New", monospace;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

body.error-page .error-state-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body.error-page .error-state {
    min-width: 0;
    padding: 13px;
    border: 1px solid #1d1d1d;
    background: #090909;
}

body.error-page .error-state small {
    display: block;
    margin-bottom: 6px;
    color: #666;
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.error-page .error-state b {
    font-size: 11px;
}

body.error-page .error-state .is-error {
    color: var(--webversa-red);
}

body.error-page .error-terminal {
    margin-top: 20px;
    min-height: 94px;
    padding: 15px;
    border: 1px solid #1e1e1e;
    background: #020202;
    color: #bdbdbd;
    font-family: "Courier New", monospace;
    font-size: 10.5px;
    line-height: 1.7;
}

body.error-page .error-terminal p {
    margin: 0 0 4px;
}

body.error-page .error-terminal__prompt {
    color: var(--webversa-red);
}

body.error-page .error-cursor {
    display: inline-block;
    width: 7px;
    height: 12px;
    vertical-align: -2px;
    background: var(--webversa-red);
    animation: errorCursorBlink .8s steps(1) infinite;
}

@keyframes errorCursorBlink {
    50% {
        opacity: 0;
    }
}

body.error-page .error-quick {
    margin-top: clamp(46px, 6vw, 76px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.error-page .error-quick a {
    min-height: 78px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #1d1d1d;
    background: #050505;
    transition: transform .22s ease, border-color .22s ease;
}

body.error-page .error-quick__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(237, 32, 42, .34);
    background: rgba(237, 32, 42, .10);
    color: var(--webversa-red);
    font-size: 16px;
}

body.error-page .error-quick__copy b {
    display: block;
    margin-bottom: 4px;
    color: var(--webversa-white);
    font-size: 12px;
}

body.error-page .error-quick__copy span {
    display: block;
    color: #777;
    font-size: 10px;
    line-height: 1.45;
}

@media (hover:hover) and (pointer:fine) {
    body.error-page .error-quick a:hover {
        transform: translateY(-3px);
        border-color: rgba(237, 32, 42, .72);
    }
}

@media (max-width: 900px) {
    body.error-page .error-grid {
        grid-template-columns: 1fr;
        width: min(680px, 100%);
        margin-inline: auto;
        text-align: center;
    }

    body.error-page .error-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body.error-page .error-desc {
        margin-inline: auto;
    }

    body.error-page .error-actions {
        justify-content: center;
    }

    body.error-page .error-console {
        width: min(540px, 100%);
        margin-inline: auto;
        text-align: left;
    }

    body.error-page .error-quick {
        grid-template-columns: 1fr;
        width: min(680px, 100%);
        margin-inline: auto;
        margin-top: 48px;
    }
}

@media (max-width: 560px) {
    body.error-page .error-main {
        padding-top: 118px;
        padding-inline: 12px;
    }

    body.error-page .error-code {
        font-size: clamp(100px, 36vw, 150px);
    }

    body.error-page .error-title {
        margin-top: 28px;
        font-size: clamp(31px, 10vw, 43px);
    }

    body.error-page .error-desc {
        font-size: 12.5px;
        max-width: 94%;
    }

    body.error-page .error-actions {
        width: 100%;
        flex-direction: column;
    }

    body.error-page .error-action {
        width: 100%;
    }

    body.error-page .error-console {
        border-radius: 14px;
    }

    body.error-page .error-console__body {
        padding: 21px 16px;
    }

    body.error-page .error-state-grid {
        grid-template-columns: 1fr;
    }
}

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

    body.error-page .error-radar__sweep,
    body.error-page .error-cursor {
        animation: none !important;
    }
}

/* ==========================================================================
   SECTION 09 — FINAL GLOBAL CLEANUP
   ========================================================================== */


/* ============================================================
   SECTION 09 — FINAL GLOBAL BLACK BACKGROUND + CLEANUP
   Edit this section for site-wide final overrides.
   ============================================================ */
html,
body,
main,
main>section,
section,
.wvf-footer,
.wvf-footer-main,
.contact-page-main {
    background-color: var(--webversa-black) !important;
}

body {
    margin: 0;
    min-width: 0;
    min-height: 100vh;
    color: var(--webversa-white);
    background: var(--webversa-black) !important;
}

main {
    overflow: clip;
}

main>section {
    isolation: isolate;
}

/* Keep section containers pure black while allowing component art/cards. */
main>section {
    background-image: none !important;
}

/* Shared bottom system is identical on every public page. */
.syh-contact-section,
.wvf-footer {
    width: 100%;
    max-width: 100%;
}

/* Preserve existing service chip fixes after consolidation. */
#services.wv-pro-services .wv-service-image {
    background: transparent !important;
}


/* =========================================================
   WEBVERSA FINAL POLISH — BRAND + CONSISTENT SECTION RHYTHM
   ========================================================= */
html,
body {
    background: var(--webversa-black);
    color: var(--webversa-white);
}

/* Honeypot is intentionally inaccessible to normal visitors. */
.wv-contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove accidental outer gaps while keeping each section internally breathable. */
main>section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

main>section:not(.hero-section):not(.contact-page-banner):not(.error-main) {
    padding-top: clamp(58px, 6.5vw, 92px);
    padding-bottom: clamp(58px, 6.5vw, 92px);
}

/* Compact the shared contact/footer transition; this was one of the largest repeated gaps. */
.syh-contact-section.wv-contact-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: clamp(60px, 7vw, 96px) !important;
    padding-bottom: clamp(56px, 6vw, 88px) !important;
}

.wvf-footer {
    margin-top: 0 !important;
}

/* Keep headings from creating double-spacing against their parent section. */
.wv-section-heading,
.wv-contact-heading,
.contact-page-cta__inner> :last-child,
.contact-page-shell> :last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    main>section:not(.hero-section):not(.contact-page-banner):not(.error-main) {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .syh-contact-section.wv-contact-wrap {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

@media (max-width: 480px) {
    main>section:not(.hero-section):not(.contact-page-banner):not(.error-main) {
        padding-top: 38px;
        padding-bottom: 38px;
    }
}

/* ==========================================================================
   SECTION 10 — SHARED PAGE POLISH
   Final focused overrides only: About alignment, shared feature motion, footer
   readability, tighter spacing and the reusable Home back-to-top control.
   ========================================================================== */

:root {
    --wv-shared-ease: cubic-bezier(.16, 1, .3, 1);
    --section-space: clamp(36px, 4vw, 58px);
    --layout-section-space: clamp(36px, 4vw, 58px);
    --layout-section-space-mobile: clamp(30px, 7vw, 42px);
}

/* Keep headings on one family across all public pages. */
body:not(.error-page) h1,
body:not(.error-page) h2,
body:not(.error-page) h3,
body:not(.error-page) h4,
body:not(.error-page) h5,
body:not(.error-page) h6,
body:not(.error-page) .wv-heading-kicker,
body:not(.error-page) .section-tag,
body:not(.error-page) .our-base-map-kicker {
    font-family: var(--font-heading) !important;
}

/* Compact, repeatable section rhythm. */
main>section:not(.hero-section):not(.contact-page-banner):not(.error-main):not(.wv-infra-industries-section):not(.services-marquee) {
    margin-block: 0 !important;
}

.wv-section-heading,
.projects-heading.wv-section-heading,
.wv-contact-heading.wv-section-heading {
    margin-bottom: clamp(22px, 2.6vw, 34px) !important;
}

.syh-contact-section.wv-contact-wrap {
    padding-top: clamp(36px, 4vw, 58px) !important;
    padding-bottom: clamp(36px, 4vw, 58px) !important;
}

/* Footer text readability. */
.wvf-brand p {
    font-size: clamp(14px, .92vw, 16px) !important;
    line-height: 1.65 !important;
}

.wvf-links a,
.wvf-contact a {
    font-size: clamp(13px, .82vw, 15px) !important;
    line-height: 1.45 !important;
}

.wvf-contact-link-label {
    font-size: clamp(10px, .66vw, 11px) !important;
}

.wvf-contact-link-value {
    font-size: clamp(13px, .82vw, 15px) !important;
}

.wvf-bottom p {
    font-size: clamp(13px, .86vw, 15px) !important;
}

/* ABOUT: the shared image/card section must render exactly like Home even though
   About also carries contact-page layout classes for its banner. */
body.about-page-body #about.services-section {
    padding: var(--layout-section-space) 0 !important;
    overflow: clip !important;
}

body.about-page-body #about.services-section>.page-container.services-layout {
    width: min(var(--layout-container), calc(100% - (var(--layout-gutter) * 2))) !important;
    max-width: var(--layout-container) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
}

body.about-page-body #about .services-copy,
body.about-page-body #about .services-visual {
    min-width: 0;
}

body.about-page-body #about .services-visual {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    perspective: 1100px;
}

body.about-page-body #about .flip-card {
    width: min(560px, 100%);
    margin-inline: auto;
}

body.about-page-body #about .flip-card-inner {
    transition: transform .8s var(--wv-shared-ease) !important;
}

body.about-page-body #about .flip-card:hover .flip-card-inner,
body.about-page-body #about .flip-card:focus-within .flip-card-inner {
    transform: rotateY(180deg);
}

/* Same interactive card feel on Home and About. */
.wv-feature-motion-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .34s var(--wv-shared-ease), background .34s ease, filter .34s ease !important;
}

.wv-feature-motion-card::after {
    content: "";
    position: absolute;
    inset: -35% auto -35% -42%;
    width: 34%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(249, 249, 249, .20), transparent);
}

.wv-feature-motion-card:hover,
.wv-feature-motion-card:focus-within {
    transform: translateY(-5px);
    filter: drop-shadow(0 12px 24px rgba(237, 32, 42, .12));
}

.wv-feature-motion-card:hover::after,
.wv-feature-motion-card:focus-within::after {
    opacity: 1;
    animation: wvFeatureCardSweep .72s var(--wv-shared-ease) both;
}

.wv-feature-motion-card .icon-box {
    transition: transform .34s var(--wv-shared-ease), box-shadow .34s ease;
}

.wv-feature-motion-card:hover .icon-box,
.wv-feature-motion-card:focus-within .icon-box {
    transform: rotate(-5deg) scale(1.06);
    box-shadow: 0 0 24px rgba(237, 32, 42, .24);
}

@keyframes wvFeatureCardSweep {
    from {
        left: -42%;
    }

    to {
        left: 122%;
    }
}

/* ABOUT: technologies heading + lower paragraph are genuinely centered. */
body.about-page-body .technologies-section {
    width: 100%;
    overflow: hidden;
    padding: clamp(34px, 3.8vw, 54px) 0 !important;
    color: var(--webversa-white);
    background: var(--webversa-black) !important;
}

body.about-page-body .tech-heading {
    width: min(920px, calc(100% - 36px)) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    text-align: center !important;
}

body.about-page-body .tech-heading .wv-heading-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--webversa-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.3;
    text-transform: uppercase;
}

body.about-page-body .tech-heading .wv-heading-kicker::before,
body.about-page-body .tech-heading .wv-heading-kicker::after {
    width: clamp(28px, 4vw, 54px);
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--webversa-red));
}

body.about-page-body .tech-heading .wv-heading-kicker::after {
    background: linear-gradient(90deg, var(--webversa-red), transparent);
}

body.about-page-body .tech-heading h2 {
    margin: 0 !important;
    color: var(--webversa-white);
    font-size: clamp(30px, 4.15vw, 58px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-align: center !important;
}

body.about-page-body .tech-heading p {
    max-width: 760px;
    margin: 12px auto 0 !important;
    color: rgba(249, 249, 249, .72);
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 500;
    line-height: 1.7;
    text-align: center !important;
}

body.about-page-body .tech-marquee {
    position: relative;
    width: 100%;
    margin-top: clamp(24px, 3vw, 36px);
    overflow: hidden;
}

body.about-page-body .tech-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: moveTechLeftToRight 20s linear infinite;
}

body.about-page-body .tech-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(46px, 6vw, 96px);
    padding-right: clamp(46px, 6vw, 96px);
}

body.about-page-body .tech-description {
    width: min(980px, calc(100% - 38px)) !important;
    max-width: 980px !important;
    margin: clamp(24px, 3vw, 34px) auto 0 !important;
    padding-inline: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 10px !important;
}

body.about-page-body .tech-description .red-circle {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 5px 0 0 !important;
    border: 2px solid var(--webversa-red);
    border-radius: 50%;
}

body.about-page-body .tech-description p {
    width: min(880px, 100%);
    margin: 0 !important;
    color: rgba(249, 249, 249, .82);
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 500;
    line-height: 1.75;
    text-align: center !important;
    text-wrap: pretty;
}

body.about-page-body .about-base-section {
    padding-top: clamp(28px, 3.5vw, 46px) !important;
    padding-bottom: clamp(34px, 4vw, 56px) !important;
}

body.about-page-body .about-base-section .our-base-map-heading {
    margin: 0 auto 20px !important;
    text-align: center !important;
}

/* Contact page: remove the oversized empty space below the contact cards. */
body.contact-page-body:not(.about-page-body) .contact-section {
    min-height: 0 !important;
    padding-top: clamp(34px, 3.8vw, 50px) !important;
    padding-bottom: clamp(24px, 3vw, 36px) !important;
}

body.contact-page-body:not(.about-page-body) .contact-heading {
    margin-bottom: clamp(64px, 6vw, 82px) !important;
}

body.contact-page-body:not(.about-page-body) .contact-content {
    min-height: 285px !important;
}

body.contact-page-body:not(.about-page-body) .our-base-section {
    padding-top: clamp(24px, 3vw, 38px) !important;
}

body.contact-page-body:not(.about-page-body) .our-base-map-heading {
    margin-top: clamp(26px, 3vw, 40px) !important;
}

/* Reusable Home back-to-top control keeps one timing system everywhere. */
.wv-scroll-tools,
.wv-scroll-top-button,
.wv-animated-button,
.wv-reveal-item {
    --wv-shared-ease: cubic-bezier(.16, 1, .3, 1);
}

.wv-scroll-tools {
    transition-timing-function: var(--wv-shared-ease) !important;
}

@media (max-width: 980px) {
    body.about-page-body #about.services-section>.page-container.services-layout {
        grid-template-columns: 1fr;
        gap: clamp(28px, 7vw, 48px);
    }

    body.about-page-body #about .services-copy {
        order: 1;
        width: min(100%, 760px);
        margin-inline: auto;
    }

    body.about-page-body #about .services-visual {
        order: 2;
        width: min(100%, 620px);
        margin-inline: auto;
    }
}

@media (max-width: 700px) {

    .wv-section-heading,
    .projects-heading.wv-section-heading,
    .wv-contact-heading.wv-section-heading {
        margin-bottom: 28px !important;
    }

    body.about-page-body #about.services-section {
        padding: var(--layout-section-space-mobile) 0 !important;
    }

    body.about-page-body #about.services-section>.page-container.services-layout {
        width: calc(100% - 28px) !important;
    }

    body.about-page-body .technologies-section {
        padding: 32px 0 !important;
    }

    body.about-page-body .tech-heading {
        width: calc(100% - 28px) !important;
    }

    body.about-page-body .tech-marquee {
        margin-top: 24px;
    }

    body.about-page-body .tech-track {
        animation-duration: 16s;
    }

    body.about-page-body .tech-description {
        width: calc(100% - 28px) !important;
        gap: 8px !important;
        margin-top: 24px !important;
    }

    body.about-page-body .tech-description .red-circle {
        width: 13px;
        height: 13px;
        min-width: 13px;
    }

    .wvf-brand p,
    .wvf-links a,
    .wvf-contact a,
    .wvf-contact-link-value,
    .wvf-bottom p {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    body.contact-page-body:not(.about-page-body) .contact-section {
        padding-top: 34px !important;
        padding-bottom: 38px !important;
    }

    body.contact-page-body:not(.about-page-body) .contact-heading {
        margin-bottom: 38px !important;
    }
}

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

    body.about-page-body .tech-track,
    .wv-feature-motion-card::after {
        animation: none !important;
    }
}

/* ========================================================================
   WEBVERSA FINAL CONSISTENCY FIX — ABOUT TECHNOLOGIES / CARDS / BACK TO TOP
   ======================================================================== */

/* ------------------------------------------------------------------------
   ABOUT PAGE — Technology Stack continuous marquee + larger technology logos
   ------------------------------------------------------------------------ */
body.about-page-body .tech-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

body.about-page-body .tech-track {
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    transform: translate3d(-50%, 0, 0);
    animation: wvAboutTechnologyMarquee 24s linear infinite !important;
    will-change: transform;
}

body.about-page-body .tech-group {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: clamp(52px, 6.5vw, 104px) !important;
    padding-right: clamp(52px, 6.5vw, 104px) !important;
}

body.about-page-body .tech-item {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(76px, 7vw, 108px);
    min-width: clamp(76px, 7vw, 108px);
    height: clamp(76px, 7vw, 108px);
}

body.about-page-body .tech-item i {
    display: block;
    font-size: clamp(58px, 5.4vw, 82px) !important;
    line-height: 1 !important;
    transform: translateZ(0);
    transform-origin: center;
    opacity: .94;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .22));
    transition: transform .32s cubic-bezier(.16, 1, .3, 1), opacity .32s ease, filter .32s ease;
}

body.about-page-body .tech-item:hover i {
    transform: translate3d(0, -4px, 0) scale(1.10);
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(237, 32, 42, .20));
}

body.about-page-body .tech-marquee:hover .tech-track {
    animation-play-state: paused !important;
}

@keyframes wvAboutTechnologyMarquee {
    from {
        transform: translate3d(-50%, 0, 0);
    }

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

/* ------------------------------------------------------------------------
   ABOUT PAGE — make the two feature cards exactly use the Home card system
   ------------------------------------------------------------------------ */
body.about-page-body #about .cards-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}

body.about-page-body #about .feature-box-wrapper {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 1px !important;
    overflow: hidden !important;
    background: var(--primary) !important;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px) !important;
    transition: background .3s ease, transform .34s cubic-bezier(.16, 1, .3, 1), filter .34s ease !important;
}

body.about-page-body #about .feature-box-wrapper:hover,
body.about-page-body #about .feature-box-wrapper:focus-visible,
body.about-page-body #about .feature-box-wrapper:focus-within {
    background: var(--webversa-white) !important;
    transform: translateY(-4px) !important;
    filter: drop-shadow(0 12px 24px rgba(237, 32, 42, .12));
    outline: none;
}

body.about-page-body #about .box-inner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 108px !important;
    padding: 16px !important;
    background: var(--surface-soft) !important;
    clip-path: inherit !important;
}

body.about-page-body #about .icon-box {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    border: 1px solid rgba(249, 249, 249, .12) !important;
    border-radius: 50% !important;
    color: var(--webversa-white) !important;
    background: var(--primary-dark) !important;
    font-size: 19px !important;
}

body.about-page-body #about .box-text {
    min-width: 0 !important;
}

body.about-page-body #about .box-text h4 {
    margin: 0 0 4px !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
}

body.about-page-body #about .box-text p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* ------------------------------------------------------------------------
   GLOBAL — Back to Top must stay the same red Home style on every PHP page
   Higher specificity here intentionally defeats old page-specific rules.
   ------------------------------------------------------------------------ */
html body .wv-scroll-tools .wv-scroll-top-button,
html body .wv-scroll-tools .wv-scroll-top-button.wv-section-button-animation,
html body .wv-scroll-tools .wv-scroll-top-button.premium-cta,
html body .wv-scroll-tools .wv-scroll-top-button.premium-moving-border {
    position: absolute !important;
    top: auto !important;
    right: 18px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid rgba(249, 249, 249, .16) !important;
    border-radius: 0 !important;
    color: var(--webversa-white) !important;
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(249, 249, 249, .08) !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform .32s ease, background .32s ease, box-shadow .32s ease !important;
}

html body .wv-scroll-tools .wv-scroll-top-button:hover,
html body .wv-scroll-tools .wv-scroll-top-button:focus-visible {
    background: var(--webversa-black) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(237, 32, 42, .48) !important;
    transform: translate3d(0, -3px, 0) !important;
}

html body .wv-scroll-tools .wv-scroll-top-button i {
    position: relative !important;
    z-index: 12 !important;
    color: var(--webversa-white) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 5px rgba(249, 249, 249, .32)) !important;
}

@media (max-width: 900px) {

    html body .wv-scroll-tools .wv-scroll-top-button,
    html body .wv-scroll-tools .wv-scroll-top-button.wv-section-button-animation,
    html body .wv-scroll-tools .wv-scroll-top-button.premium-cta,
    html body .wv-scroll-tools .wv-scroll-top-button.premium-moving-border {
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 700px) {
    body.about-page-body #about .cards-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.about-page-body #about .box-inner {
        min-height: 100px !important;
        padding: 14px !important;
    }

    body.about-page-body .tech-group {
        gap: 42px !important;
        padding-right: 42px !important;
    }

    body.about-page-body .tech-item {
        width: 70px;
        min-width: 70px;
        height: 70px;
    }

    body.about-page-body .tech-item i {
        font-size: 50px !important;
    }

    body.about-page-body .tech-track {
        animation-duration: 18s !important;
    }
}

@media (max-width: 480px) {

    html body .wv-scroll-tools .wv-scroll-top-button,
    html body .wv-scroll-tools .wv-scroll-top-button.wv-section-button-animation,
    html body .wv-scroll-tools .wv-scroll-top-button.premium-cta,
    html body .wv-scroll-tools .wv-scroll-top-button.premium-moving-border {
        right: 6px !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
    }

    html body .wv-scroll-tools .wv-scroll-top-button i {
        font-size: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.about-page-body .tech-track {
        animation: none !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Final specificity lock: no legacy page-scoped rule may change Home button styling. */
html body #wvScrollTools #wvScrollTopButton {
    top: auto !important;
    right: 18px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border: 1px solid rgba(249, 249, 249, .16) !important;
    border-radius: 0 !important;
    color: var(--webversa-white) !important;
    background: linear-gradient(135deg, var(--webversa-red), var(--webversa-red) 58%, var(--webversa-red)) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(249, 249, 249, .08) !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

html body #wvScrollTools #wvScrollTopButton:hover,
html body #wvScrollTools #wvScrollTopButton:focus-visible {
    background: var(--webversa-black) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(237, 32, 42, .48) !important;
    transform: translate3d(0, -3px, 0) !important;
}

@media (max-width: 900px) {
    html body #wvScrollTools #wvScrollTopButton {
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 480px) {
    html body #wvScrollTools #wvScrollTopButton {
        right: 6px !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
    }
}


/* ==========================================================================
   SECTION 11 — FINAL ALIGNMENT + MOTION PERFORMANCE PASS
   Structural fixes are in the PHP templates; this layer only normalizes
   spacing/alignment and makes the existing motion system cheaper to render.
   ========================================================================== */

:root {
    --wv-page-max: 1180px;
    --wv-heading-max: 920px;
    --wv-layout-gap: clamp(28px, 4.6vw, 68px);
    --wv-smooth-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Prevent individual grid/flex children from forcing accidental horizontal
   drift while preserving full-width art sections. */
main,
main>section,
.page-container,
.services-layout,
.services-copy,
.services-visual,
.wv-services-viewport,
.wv-service-detail,
.solutions-container,
.projects-stage,
.syh-contact-layout,
.wvf-footer-grid {
    min-width: 0;
}

img,
video,
svg,
canvas {
    max-width: 100%;
}

/* One predictable centered heading system across normal content sections. */
.wv-section-heading,
.projects-heading.wv-section-heading,
.wv-contact-heading.wv-section-heading,
.tech-heading,
.our-base-map-heading {
    width: min(var(--wv-heading-max), calc(100% - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.wv-section-heading h1,
.wv-section-heading h2,
.wv-section-heading p,
.projects-heading h2,
.projects-heading p,
.wv-contact-heading h2,
.wv-contact-heading p,
.tech-heading h2,
.tech-heading p,
.our-base-map-heading h2,
.our-base-map-heading p {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Balanced two-column sections: copy and artwork share one vertical center. */
.services-section>.page-container.services-layout,
.services-layout {
    align-items: center !important;
    column-gap: var(--wv-layout-gap) !important;
}

.services-copy {
    align-self: center !important;
}

.services-visual {
    align-self: center !important;
    justify-self: center !important;
}

.services-copy> :first-child {
    margin-top: 0 !important;
}

.services-copy> :last-child {
    margin-bottom: 0 !important;
}

.cards-row {
    align-items: stretch !important;
}

.cards-row>.feature-box-wrapper,
.cards-row>article.feature-box-wrapper {
    height: 100%;
    min-width: 0;
}

.cards-row .box-inner {
    height: 100%;
}

/* Contact block uses the same visual baseline on all public pages. */
.syh-contact-layout {
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.syh-terminal,
.syh-qr-card {
    min-width: 0;
}

/* Repair the previously orphaned second support row on sectors.php. */
body.sectors-page-body .sector-support-section {
    width: 100%;
    overflow: clip;
}

body.sectors-page-body .sector-support-section>.services-layout {
    width: min(var(--layout-container, var(--wv-page-max)), calc(100% - 40px)) !important;
    max-width: var(--wv-page-max) !important;
    margin-inline: auto !important;
}

/* Services now has unique section IDs; keep both alternating rows balanced. */
body.services-page-body .services-intro-section,
body.services-page-body .services-closing-section {
    width: 100%;
    overflow: clip;
}

/* Lighter entrance motion: remove expensive blur and shorten the stagger.
   This keeps the premium feel without the previous laggy first scroll. */
body.wv-motion-enabled .wv-reveal-item {
    opacity: 0;
    translate: var(--wv-reveal-x) 22px;
    scale: .994;
    filter: none !important;
    transition:
        opacity .52s ease,
        translate .68s var(--wv-smooth-ease),
        scale .68s var(--wv-smooth-ease) !important;
    transition-delay: var(--wv-motion-delay, 0ms) !important;
    will-change: opacity, translate;
}

body.wv-motion-enabled .wv-section-motion.wv-motion-left .wv-reveal-item {
    --wv-reveal-x: -20px;
}

body.wv-motion-enabled .wv-section-motion.wv-motion-right .wv-reveal-item {
    --wv-reveal-x: 20px;
}

body.wv-motion-enabled .wv-section-motion.wv-revealed .wv-reveal-item {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: none !important;
    will-change: auto;
}

/* The extra settle animation duplicated the reveal transition. Disable that
   second pass so each element animates once rather than twice. */
body.wv-motion-enabled .wv-section-motion.wv-revealed .wv-reveal-item {
    animation: none !important;
}

/* Pause infinite decorative CSS animations outside the viewport. */
body.wv-motion-enabled .wv-motion-paused *,
body.wv-motion-enabled .wv-motion-paused *::before,
body.wv-motion-enabled .wv-motion-paused *::after {
    animation-play-state: paused !important;
}

/* GPU-friendly long marquees/continuously moving art. */
.tech-track,
.services-marquee-track,
.slider-track,
.slide-track {
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

@media (max-width: 980px) {

    .services-section>.page-container.services-layout,
    .services-layout {
        row-gap: clamp(26px, 6vw, 44px) !important;
    }

    .services-copy,
    .services-visual {
        width: min(100%, 760px) !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 700px) {

    .wv-section-heading,
    .projects-heading.wv-section-heading,
    .wv-contact-heading.wv-section-heading,
    .tech-heading,
    .our-base-map-heading {
        width: calc(100% - 28px) !important;
    }

    body.sectors-page-body .sector-support-section>.services-layout {
        width: calc(100% - 28px) !important;
    }

    body.wv-motion-enabled .wv-reveal-item {
        translate: 0 15px;
        scale: .997;
        transition-duration: .46s, .58s, .58s !important;
    }
}

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

    body.wv-motion-enabled .wv-motion-paused *,
    body.wv-motion-enabled .wv-motion-paused *::before,
    body.wv-motion-enabled .wv-motion-paused *::after {
        animation-play-state: paused !important;
    }
}

/* Off-screen reveal items must not start transition work while hidden. The
   activity observer removes this class before a section approaches view. */
body.wv-motion-enabled .wv-section-motion.wv-motion-paused,
body.wv-motion-enabled .wv-section-motion.wv-motion-paused .wv-reveal-item {
    transition: none !important;
}

/* ========================================================================== 
   SECTION 12 — SERVICES + SECTORS FINAL LAYOUT REPAIR
   Restores component spacing after the shared contact-page reset and keeps
   both interactive sections balanced at desktop, tablet and mobile widths.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SERVICES PAGE — interactive service rail + detail frame
   -------------------------------------------------------------------------- */
body.services-page-body .wv-pro-services .wv-service-detail {
    width: min(1180px, calc(100% - 40px)) !important;
    max-width: 1180px !important;
    margin: 34px auto 0 !important;
    grid-template-columns: 136px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

body.services-page-body .wv-pro-services .wv-detail-rail {
    width: 136px !important;
    min-width: 136px !important;
    min-height: 540px !important;
}

body.services-page-body .wv-pro-services .wv-detail-vertical-title {
    font-size: clamp(21px, 1.8vw, 25px) !important;
    line-height: 1 !important;
}

body.services-page-body .wv-pro-services .wv-detail-panel {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 540px !important;
}

body.services-page-body .wv-pro-services .wv-detail-content {
    width: min(790px, calc(100% - 150px)) !important;
    max-width: 790px !important;
    margin: 0 auto !important;
    padding: 108px 0 76px !important;
}

body.services-page-body .wv-pro-services .wv-detail-eyebrow {
    margin: 0 0 7px !important;
    font-size: clamp(12px, 1vw, 14px) !important;
    line-height: 1.3 !important;
}

body.services-page-body .wv-pro-services .wv-detail-heading {
    margin: 0 !important;
    font-size: clamp(29px, 2.55vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

body.services-page-body .wv-pro-services .wv-detail-copy-wide {
    margin: 17px 0 0 !important;
}

body.services-page-body .wv-pro-services .wv-detail-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px !important;
    margin: 16px 0 0 !important;
}

body.services-page-body .wv-pro-services .wv-detail-copy {
    margin: 0 !important;
    font-size: clamp(13.5px, 1.02vw, 15.5px) !important;
    line-height: 1.55 !important;
}

body.services-page-body .wv-pro-services .wv-detail-dropcap {
    margin-right: 3px !important;
}

body.services-page-body .wv-pro-services .wv-detail-button-wrap {
    margin: 24px 0 0 !important;
}

/* The white glyphs were visually heavy inside the chip artwork. */
body.services-page-body .wv-pro-services .wv-chip-icon,
body.services-page-body .wv-pro-services .wv-service-card:hover .wv-chip-icon,
body.services-page-body .wv-pro-services .wv-service-card:focus-visible .wv-chip-icon,
body.services-page-body .wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
    font-size: 20px !important;
}

body.services-page-body .wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
    transform: scale(1.03) !important;
}

@media (max-width: 1180px) and (min-width: 769px) {
    body.services-page-body .wv-pro-services .wv-service-detail {
        width: min(980px, calc(100% - 28px)) !important;
        grid-template-columns: 120px minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-rail {
        width: 120px !important;
        min-width: 120px !important;
        min-height: 510px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-panel {
        min-height: 510px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-content {
        width: min(690px, calc(100% - 108px)) !important;
        max-width: 690px !important;
        padding: 88px 0 62px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-heading {
        font-size: clamp(28px, 3vw, 34px) !important;
    }

    body.services-page-body .wv-pro-services .wv-chip-icon,
    body.services-page-body .wv-pro-services .wv-service-card:hover .wv-chip-icon,
    body.services-page-body .wv-pro-services .wv-service-card:focus-visible .wv-chip-icon,
    body.services-page-body .wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    body.services-page-body .wv-pro-services .wv-service-detail {
        width: calc(100% - 20px) !important;
        margin-top: 26px !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-rail {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-vertical-title {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        font-size: 19px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-panel {
        min-height: 520px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-content {
        width: calc(100% - 46px) !important;
        max-width: 680px !important;
        margin-inline: auto !important;
        padding: 72px 0 52px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-heading {
        font-size: clamp(26px, 7vw, 32px) !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-columns {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
        margin-top: 14px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-copy-wide {
        margin-top: 14px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-button-wrap {
        margin-top: 20px !important;
    }

    body.services-page-body .wv-pro-services .wv-chip-icon,
    body.services-page-body .wv-pro-services .wv-service-card:hover .wv-chip-icon,
    body.services-page-body .wv-pro-services .wv-service-card:focus-visible .wv-chip-icon,
    body.services-page-body .wv-pro-services .wv-service-card.wv-active .wv-chip-icon {
        font-size: clamp(13px, 2.7vw, 16px) !important;
    }
}

@media (max-width: 480px) {
    body.services-page-body .wv-pro-services .wv-detail-content {
        width: calc(100% - 34px) !important;
        padding: 60px 0 44px !important;
    }

    body.services-page-body .wv-pro-services .wv-detail-panel {
        min-height: 500px !important;
    }
}

/* --------------------------------------------------------------------------
   SECTORS PAGE — Industry Solutions selector + detail panel
   -------------------------------------------------------------------------- */
body.sectors-page-body .industry-solutions {
    min-height: auto !important;
    padding: 72px 0 86px !important;
}

body.sectors-page-body .industry-solutions .solutions-container {
    width: min(1180px, calc(100% - 64px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
    gap: 48px !important;
    align-items: start !important;
}

body.sectors-page-body .industry-solutions .solutions-left {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

body.sectors-page-body .industry-solutions .solution-controls {
    width: 50px !important;
    padding: 76px 0 0 !important;
    gap: 16px !important;
    align-self: start !important;
    justify-content: flex-start !important;
}

body.sectors-page-body .industry-solutions .control-button {
    width: 44px !important;
    height: 94px !important;
}

body.sectors-page-body .industry-solutions .control-button span {
    font-size: 28px !important;
}

body.sectors-page-body .industry-solutions .solutions-frame {
    width: 100% !important;
    min-height: 520px !important;
    padding: 48px 34px 40px 40px !important;
}

body.sectors-page-body .industry-solutions .frame-content {
    width: 100% !important;
    min-height: 430px !important;
}

body.sectors-page-body .industry-solutions .frame-heading {
    margin: 0 0 22px !important;
    padding: 0 16px !important;
    font-size: clamp(22px, 2.15vw, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance;
}

body.sectors-page-body .industry-solutions .solutions-list {
    height: 316px !important;
}

body.sectors-page-body .industry-solutions .solution-item {
    min-height: 76px !important;
    padding: 14px 18px !important;
    font-size: clamp(16px, 1.25vw, 19px) !important;
}

body.sectors-page-body .industry-solutions .solutions-right {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 0 0 !important;
}

body.sectors-page-body .industry-solutions .details-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
}

body.sectors-page-body .industry-solutions .details-title-wrapper {
    margin: 0 0 18px !important;
}

body.sectors-page-body .industry-solutions .details-title {
    margin: 0 !important;
    padding: 4px 10px 6px !important;
    max-width: 100% !important;
    font-size: clamp(28px, 2.55vw, 38px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    overflow-wrap: normal !important;
}

body.sectors-page-body .industry-solutions .details-description {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(14px, 1.15vw, 16px) !important;
    line-height: 1.65 !important;
}

body.sectors-page-body .industry-solutions .details-features {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 36px !important;
    row-gap: 18px !important;
    margin: 24px 0 0 !important;
}

body.sectors-page-body .industry-solutions .detail-feature {
    margin: 0 !important;
    font-size: clamp(13px, 1.02vw, 15px) !important;
    line-height: 1.6 !important;
}

body.sectors-page-body .industry-solutions .explore-button-wrapper {
    margin: 34px 0 0 !important;
    text-align: center !important;
}

@media (max-width: 1050px) {
    body.sectors-page-body .industry-solutions .solutions-container {
        width: min(820px, calc(100% - 40px)) !important;
        grid-template-columns: 1fr !important;
        gap: 44px !important;
    }

    body.sectors-page-body .industry-solutions .solutions-left,
    body.sectors-page-body .industry-solutions .solutions-right {
        max-width: 820px !important;
        margin-inline: auto !important;
    }

    body.sectors-page-body .industry-solutions .solutions-right {
        padding-top: 0 !important;
    }
}

@media (max-width: 700px) {
    body.sectors-page-body .industry-solutions {
        padding: 54px 0 64px !important;
    }

    body.sectors-page-body .industry-solutions .solutions-container {
        width: calc(100% - 28px) !important;
        gap: 30px !important;
    }

    body.sectors-page-body .industry-solutions .solutions-left {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    body.sectors-page-body .industry-solutions .solutions-frame {
        order: 1 !important;
        min-height: 470px !important;
        padding: 38px 22px 34px !important;
    }

    body.sectors-page-body .industry-solutions .frame-content {
        min-height: 390px !important;
    }

    body.sectors-page-body .industry-solutions .frame-heading {
        margin-bottom: 18px !important;
        padding-inline: 8px !important;
        font-size: clamp(19px, 5.4vw, 25px) !important;
    }

    body.sectors-page-body .industry-solutions .solutions-list {
        height: 280px !important;
    }

    body.sectors-page-body .industry-solutions .solution-controls {
        order: 2 !important;
        width: 100% !important;
        padding: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    body.sectors-page-body .industry-solutions .control-button {
        width: min(32vw, 100px) !important;
        height: 46px !important;
    }

    body.sectors-page-body .industry-solutions .control-button span {
        font-size: 21px !important;
    }

    body.sectors-page-body .industry-solutions .details-title {
        font-size: clamp(25px, 7.6vw, 32px) !important;
    }

    body.sectors-page-body .industry-solutions .details-features {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-top: 20px !important;
    }

    body.sectors-page-body .industry-solutions .explore-button-wrapper {
        margin-top: 28px !important;
    }
}

@media (max-width: 430px) {
    body.sectors-page-body .industry-solutions .solutions-frame {
        min-height: 430px !important;
        padding: 32px 17px 30px !important;
    }

    body.sectors-page-body .industry-solutions .frame-content {
        min-height: 360px !important;
    }

    body.sectors-page-body .industry-solutions .solutions-list {
        height: 254px !important;
    }

    body.sectors-page-body .industry-solutions .solution-item {
        min-height: 62px !important;
        padding: 11px 12px !important;
        font-size: 14px !important;
    }
}

/* Final ID-level lock: the global section rhythm uses #industries with
   !important, so keep the Sectors page's interactive block on its own rhythm. */
html body.sectors-page-body #industries.industry-solutions {
    padding-top: 72px !important;
    padding-bottom: 86px !important;
}

/* ========================================================================== 
   SECTION 13 — SHARED FEATURE VISUAL SIZE
   About Webversa is the visual reference. Home and Sectors now use the same
   artwork width/aspect ratio so the framed image never appears larger or
   smaller just because a page inherits a different layout wrapper.
   ========================================================================== */
:root {
    --wv-feature-visual-width: 560px;
    --wv-feature-visual-mobile-width: 440px;
    --wv-feature-visual-ratio: 11 / 7.2;
}

/* Home: About Webversa + AI-Powered Solutions.
   Sectors: About Webversa + the secondary support row. */
body.home-page #about .services-visual,
body.home-page #ai-solutions .services-visual,
body.sectors-page-body #about .services-visual,
body.sectors-page-body #sector-support .services-visual {
    width: 100% !important;
    max-width: var(--wv-feature-visual-width) !important;
    height: auto !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: center !important;
    overflow: visible !important;
}

body.home-page #about .flip-card,
body.home-page #ai-solutions .flip-card,
body.sectors-page-body #about .flip-card,
body.sectors-page-body #sector-support .flip-card {
    width: 100% !important;
    max-width: var(--wv-feature-visual-width) !important;
    height: auto !important;
    aspect-ratio: var(--wv-feature-visual-ratio) !important;
    margin-inline: auto !important;
}

/* Keep the artwork itself locked to the same frame geometry on every page. */
body.home-page #about .flip-card-inner,
body.home-page #ai-solutions .flip-card-inner,
body.sectors-page-body #about .flip-card-inner,
body.sectors-page-body #sector-support .flip-card-inner {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 700px) {

    body.home-page #about .services-visual,
    body.home-page #ai-solutions .services-visual,
    body.sectors-page-body #about .services-visual,
    body.sectors-page-body #sector-support .services-visual,
    body.home-page #about .flip-card,
    body.home-page #ai-solutions .flip-card,
    body.sectors-page-body #about .flip-card,
    body.sectors-page-body #sector-support .flip-card {
        max-width: var(--wv-feature-visual-mobile-width) !important;
    }
}

/* SECTION 13 — FINAL SITE SPACING + SERVICES CENTERING */
/* Final low-risk normalization layer. It intentionally targets the shared
   public-page components instead of overriding individual artwork geometry. */

:root {
    --wv-section-space: clamp(72px, 7vw, 108px);
    --wv-section-space-mobile: clamp(54px, 11vw, 72px);
    --wv-content-gutter: clamp(16px, 3.2vw, 32px);
}

/* Keep page headings and their supporting copy visually centered. */
body.services-page-body #services.wv-pro-services > .wv-section-heading,
body.services-page-body #services .wv-section-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(920px, calc(100% - (2 * var(--wv-content-gutter)))) !important;
    max-width: 920px !important;
    margin: 0 auto 38px !important;
    padding-inline: 0 !important;
    text-align: center !important;
}

body.services-page-body #services .wv-section-heading .wv-heading-kicker,
body.services-page-body #services .wv-section-heading h2,
body.services-page-body #services .wv-section-heading p {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body.services-page-body #services .wv-section-heading p {
    max-width: 700px !important;
}

/* Give the services page a consistent section rhythm without touching the
   decorative dimensions inside cards/details. */
body.services-page-body .services-intro-section,
body.services-page-body .services-closing-section {
    padding-top: var(--wv-section-space) !important;
    padding-bottom: var(--wv-section-space) !important;
    margin: 0 !important;
}

body.services-page-body #services.wv-pro-services {
    padding-top: var(--wv-section-space) !important;
    padding-bottom: var(--wv-section-space) !important;
    margin: 0 !important;
}

body.services-page-body #technologies.technologies-section {
    padding-top: var(--wv-section-space) !important;
    padding-bottom: var(--wv-section-space) !important;
}

/* Shared two-column blocks: predictable width, centered content, no side drift. */
body.contact-page-body .services-section > .page-container.services-layout {
    width: min(1180px, calc(100% - (2 * var(--wv-content-gutter)))) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
}

/* Prevent inherited paragraph margins from producing uneven vertical gaps. */
body.contact-page-body .services-copy > .description + .description {
    margin-top: 18px !important;
}

/* Service selector stays centered as a component on wide screens. */
body.services-page-body #services .wv-services-viewport {
    width: min(100%, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 700px) {
    body.services-page-body .services-intro-section,
    body.services-page-body .services-closing-section,
    body.services-page-body #services.wv-pro-services,
    body.services-page-body #technologies.technologies-section {
        padding-top: var(--wv-section-space-mobile) !important;
        padding-bottom: var(--wv-section-space-mobile) !important;
    }

    body.services-page-body #services.wv-pro-services > .wv-section-heading,
    body.services-page-body #services .wv-section-heading {
        margin-bottom: 28px !important;
    }
}

/* ============================================================
   SERVICES PAGE — HIDE HORIZONTAL SCROLLBAR
   Keeps the services row horizontally scrollable without showing
   the browser's grey scrollbar/track under the service cards.
   ============================================================ */
body.services-page-body #services .wv-services-viewport {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

body.services-page-body #services .wv-services-viewport::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}


/* ========================================================================== 
   WV SEO AUTHORITY V2 — visible, useful search + trust content
   ========================================================================== */
.wv-seo-authority,
.wv-seo-faq {
    position: relative;
    padding: clamp(72px, 8vw, 112px) clamp(18px, 4vw, 54px);
    background: #080808;
    color: #f7f7f7;
    overflow: hidden;
}

.wv-seo-authority::before,
.wv-seo-faq::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(237,32,42,.10), transparent 38%);
}

.wv-seo-authority__inner,
.wv-seo-faq__inner {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.wv-seo-authority__eyebrow,
.wv-seo-faq__eyebrow {
    margin: 0 0 14px;
    color: #ed202a;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    font-weight: 700;
}

.wv-seo-authority h1,
.wv-seo-faq h2 {
    max-width: 900px;
    margin: 0 auto 20px;
    text-align: center;
    color: #fff;
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.wv-seo-authority__lead {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
    color: rgba(255,255,255,.72);
    font-size: clamp(15px, 1.55vw, 18px);
    line-height: 1.8;
}

.wv-seo-authority__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.wv-seo-authority__grid article {
    min-height: 280px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.wv-seo-authority__grid i {
    margin-bottom: 22px;
    color: #ed202a;
    font-size: 24px;
}

.wv-seo-authority__grid h2 {
    margin: 0 0 13px;
    text-align: left;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
}

.wv-seo-authority__grid p {
    margin: 0 0 22px;
    color: rgba(255,255,255,.66);
    line-height: 1.7;
    font-size: 14px;
}

.wv-seo-authority__grid a {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid #ed202a;
    padding-bottom: 3px;
}

.wv-seo-authority__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
    margin: 36px auto 0;
    padding: 22px 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.78);
    font-size: 13px;
}

.wv-seo-authority__trust i { color: #ed202a; margin-right: 7px; }

.wv-seo-authority__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.wv-seo-authority__actions a {
    min-width: 190px;
    padding: 13px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.wv-seo-authority__primary { background: #ed202a; border: 1px solid #ed202a; color: #fff; }
.wv-seo-authority__secondary { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; }
.wv-seo-authority__actions a:hover { transform: translateY(-2px); }

.wv-seo-faq { padding-top: clamp(64px, 7vw, 96px); }
.wv-seo-faq h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 34px; }
.wv-seo-faq__grid { width: min(900px,100%); margin: 0 auto; display: grid; gap: 12px; }
.wv-seo-faq details { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.025); }
.wv-seo-faq summary { cursor: pointer; padding: 20px 22px; color: #fff; font-weight: 700; line-height: 1.4; list-style: none; }
.wv-seo-faq summary::-webkit-details-marker { display: none; }
.wv-seo-faq summary::after { content: "+"; float: right; color: #ed202a; font-size: 22px; line-height: 1; }
.wv-seo-faq details[open] summary::after { content: "–"; }
.wv-seo-faq details p { margin: 0; padding: 0 22px 21px; color: rgba(255,255,255,.68); line-height: 1.75; font-size: 14px; }

@media (max-width: 860px) {
    .wv-seo-authority__grid { grid-template-columns: 1fr; }
    .wv-seo-authority__grid article { min-height: 0; }
}

@media (max-width: 520px) {
    .wv-seo-authority,
    .wv-seo-faq { padding-inline: 16px; }
    .wv-seo-authority__grid article { padding: 24px 20px; }
    .wv-seo-authority__trust { align-items: flex-start; flex-direction: column; gap: 13px; }
    .wv-seo-authority__actions { flex-direction: column; }
    .wv-seo-authority__actions a { width: 100%; }
}