/* ============================================================
   Xvising - Integrations Page
   WordPress theme stylesheet for page-integration.php
   ============================================================ */
:root  {
        --ix-gold: #ffd700;
        --ix-gold-2: #fff2a8;
        --ix-cyan: #63f5ff;
        --ix-blue: #70a7ff;
        --ix-green: #78ffb2;
        --ix-purple: #b66cff;
        --ix-red: #ff4f6d;
        --ix-bg: #05060a;
        --ix-panel: rgba(8,
        12,
        21,
        0.78);
        --ix-panel-2: rgba(11,
        16,
        28,
        0.92);
        --ix-border: rgba(255,
        215,
        0,
        0.23);
        --ix-border-cyan: rgba(99,
        245,
        255,
        0.21);
        --ix-text: #eef3ff;
        --ix-muted: #aab3cb;
        --ix-line: rgba(255,
        255,
        255,
        0.09);
        --ix-gold-grad: linear-gradient(135deg,
        #d4af37 0%,
        #ffd700 36%,
        #fff2a8 74%,
        #ffffff 100%);
        --ix-cyber-grad: linear-gradient(135deg,
        #63f5ff 0%,
        #ffffff 40%,
        #ffd700 72%,
        #78ffb2 100%);
        --ix-system-grad: linear-gradient(135deg,
        #63f5ff 0%,
        #70a7ff 34%,
        #78ffb2 68%,
        #ffd700 100%);
        --ix-shadow: 0 34px 120px rgba(0,
        0,
        0,
        0.72);
        --ix-radius-xl: 36px;
        --ix-radius-lg: 26px;
        --ix-radius-md: 18px;
        --mx: 50%;
        --my: 50%;
      }
      html  {
        scroll-behavior: smooth;
      }
      body  {
        min-height: 100vh;
        background-color: var(--ix-bg);
        overflow-x: hidden;
      }
      body.xvising-integration-shell .xv-global-shell-top  {
        position: relative;
        z-index: 3200;
        min-height: 0;
      }
      body.xvising-integration-shell .xv-global-shell-top .hero  {
        display: none !important;
      }
      body.xvising-integration-shell #site-header.site-header  {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3300;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      body.xvising-integration-shell #site-header .navigation-menu  {
        display: block !important;
      }
      body.admin-bar.xvising-integration-shell #site-header.site-header  {
        top: 32px;
      }
      @media (max-width: 782px)  {
        body.admin-bar.xvising-integration-shell #site-header.site-header  {
          top: 46px;
        }
      }
      .ix-page  {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        z-index: 1;
        color: var(--ix-text);
        margin-top: 0;
      }
      .ix-page::before  {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -4;
        pointer-events: none;
        background: radial-gradient(920px 520px at 12% 14%,
        rgba(99,
        245,
        255,
        0.10),
        transparent 62%),
        radial-gradient(860px 620px at 88% 12%,
        rgba(120,
        255,
        178,
        0.08),
        transparent 62%),
        radial-gradient(900px 660px at 50% 104%,
        rgba(255,
        215,
        0,
        0.10),
        transparent 62%),
        linear-gradient(180deg,
        #05060a 0%,
        #080a12 50%,
        #05060a 100%);
      }
      .ix-page::after  {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -3;
        pointer-events: none;
        opacity: 0.34;
        background: linear-gradient(rgba(99,
        245,
        255,
        0.045) 1px,
        transparent 1px),
        linear-gradient(90deg,
        rgba(255,
        215,
        0,
        0.035) 1px,
        transparent 1px);
        background-size: 76px 76px;
        -webkit-mask-image: radial-gradient(circle at 50% 24%,
        #000 0%,
        transparent 76%);
        mask-image: radial-gradient(circle at 50% 24%,
        #000 0%,
        transparent 76%);
      }
      .ix-noise  {
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        opacity: 0.075;
        background-image: repeating-radial-gradient(circle at 20% 30%,
        rgba(255,
        255,
        255,
        .6) 0 1px,
        transparent 1px 7px);
        mix-blend-mode: screen;
      }
      .ix-container  {
        width: min(1180px,
        calc(100% - 36px));
        margin-inline: auto;
      }
      .ix-section  {
        position: relative;
        padding: 114px 0;
      }
      .ix-eyebrow  {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 18px;
        color: var(--ix-cyan);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        text-shadow: 0 0 18px rgba(99,
        245,
        255,
        .35);
      }
      .ix-eyebrow::before,
      .ix-eyebrow::after  {
        content: "";
        width: 34px;
        height: 1px;
        background: linear-gradient(90deg,
        transparent,
        var(--ix-cyan));
        box-shadow: 0 0 14px rgba(99,
        245,
        255,
        0.62);
      }
      .ix-eyebrow::after  {
        background: linear-gradient(90deg,
        var(--ix-gold),
        transparent);
        box-shadow: 0 0 14px rgba(255,
        215,
        0,
        0.55);
      }
      .ix-title  {
        margin: 0;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: clamp(30px,
        4.7vw,
        66px);
        line-height: 1.02;
        letter-spacing: -0.05em;
        color: transparent;
        background: var(--ix-gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
        filter: drop-shadow(0 0 24px rgba(255,
        215,
        0,
        .13)) drop-shadow(0 0 20px rgba(99,
        245,
        255,
        .07));
      }
      .ix-copy  {
        max-width: 790px;
        margin: 18px 0 0;
        color: var(--ix-muted);
        font-size: clamp(15px,
        1.55vw,
        18px);
        line-height: 1.82;
      }
      .ix-copy strong  {
        color: #fff5b8;
        font-weight: 800;
      }
      .ix-reveal  {
        opacity: 0;
        transform: translate3d(0,
        34px,
        0) scale(0.985);
        filter: blur(10px);
        transition: opacity 0.85s cubic-bezier(.16,
        .84,
        .2,
        1),
        transform 0.85s cubic-bezier(.16,
        .84,
        .2,
        1),
        filter 0.85s ease;
      }
      .ix-reveal.is-visible  {
        opacity: 1;
        transform: translate3d(0,
        0,
        0) scale(1);
        filter: blur(0);
      }
      .ix-hero  {
        position: relative;
        min-height: 100vh;
        padding: 172px 0 94px;
        display: grid;
        place-items: center;
      }
      body.xvising-integration-shell .ix-hero  {
        min-height: calc(100vh - var(--header-h, 64px));
      }
      .ix-hero-orbits  {
        position: absolute;
        inset: -18% -14% auto;
        height: 112vh;
        pointer-events: none;
        z-index: -1;
        opacity: 0.86;
      }
      .ix-orbit  {
        position: absolute;
        left: 50%;
        top: 42%;
        width: var(--size);
        height: var(--size);
        border: 1px dashed rgba(255,
        215,
        0,
        0.17);
        border-radius: 50%;
        transform: translate(-50%,
        -50%) rotate(var(--rot));
        animation: ixOrbitSpin var(--speed) linear infinite;
        box-shadow: inset 0 0 52px rgba(99,
        245,
        255,
        0.035),
        0 0 40px rgba(120,
        255,
        178,
        0.035);
      }
      .ix-orbit::before  {
        content: "";
        position: absolute;
        left: 50%;
        top: -4px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--dot);
        box-shadow: 0 0 12px var(--dot),
        0 0 32px var(--dot);
      }
      .ix-orbit.o1  {
        --size: 58vmin;
        --rot: 0deg;
        --speed: 24s;
        --dot: #63f5ff;
      }
      .ix-orbit.o2  {
        --size: 88vmin;
        --rot: 18deg;
        --speed: 40s;
        --dot: #ffd700;
        opacity: 0.66;
      }
      .ix-orbit.o3  {
        --size: 124vmin;
        --rot: -12deg;
        --speed: 64s;
        --dot: #78ffb2;
        opacity: 0.44;
      }
      @keyframes ixOrbitSpin  {
        to  {
          transform: translate(-50%, -50%) rotate(calc(var(--rot) + 360deg));
        }
      }
      .ix-hero-grid  {
        display: grid;
        grid-template-columns: minmax(0,
        1.02fr) minmax(390px,
        0.98fr);
        gap: 46px;
        align-items: center;
      }
      .ix-kicker  {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        margin-bottom: 24px;
        border: 1px solid rgba(99,
        245,
        255,
        0.22);
        border-radius: 999px;
        background: linear-gradient(180deg,
        rgba(99,
        245,
        255,
        0.11),
        rgba(255,
        215,
        0,
        0.04)),
        rgba(6,
        10,
        18,
        0.64);
        color: #dffcff;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.17em;
        text-transform: uppercase;
        box-shadow: 0 0 30px rgba(99,
        245,
        255,
        0.08);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
      }
      .ix-kicker-dot  {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: var(--ix-cyan);
        box-shadow: 0 0 0 6px rgba(99,
        245,
        255,
        0.10),
        0 0 18px rgba(99,
        245,
        255,
        0.95);
        animation: ixPulse 1.75s ease-in-out infinite;
      }
      @keyframes ixPulse  {
        0%,
        100%  {
          transform: scale(0.86);
          opacity: 0.74;
        }
        50%  {
          transform: scale(1.08);
          opacity: 1;
        }
      }
      .ix-hero h1  {
        margin: 0;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: clamp(40px,
        7vw,
        92px);
        line-height: 0.94;
        letter-spacing: -0.058em;
        color: #fff;
      }
      .ix-gradient-text  {
        display: inline-block;
        color: transparent;
        background: linear-gradient(120deg,
        #ffffff 0%,
        #fff4a3 18%,
        #ffd700 38%,
        #63f5ff 66%,
        #78ffb2 100%);
        -webkit-background-clip: text;
        background-clip: text;
        filter: drop-shadow(0 0 18px rgba(255,
        215,
        0,
        0.13)) drop-shadow(0 0 20px rgba(120,
        255,
        178,
        0.10));
      }
      .ix-hero-lead  {
        max-width: 740px;
        margin: 26px 0 0;
        color: #cfd6eb;
        font-size: clamp(17px,
        1.75vw,
        22px);
        line-height: 1.72;
      }
      .ix-hero-lead strong  {
        color: #fff5b8;
        font-weight: 900;
      }
      .ix-actions  {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 34px;
      }
      .ix-action  {
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        padding: 0 24px;
        border: 1px solid rgba(255,
        215,
        0,
        0.42);
        border-radius: 16px;
        color: #1a1200;
        background: var(--ix-gold-grad);
        text-decoration: none;
        font-weight: 900;
        letter-spacing: 0.02em;
        box-shadow: 0 18px 54px rgba(255,
        215,
        0,
        0.17),
        inset 0 1px 0 rgba(255,
        255,
        255,
        0.62);
        transform: translateZ(0);
        transition: transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
        isolation: isolate;
        cursor: pointer;
      }
      .ix-action.secondary  {
        color: var(--ix-text);
        background: radial-gradient(240px 90px at 50% 0%,
        rgba(99,
        245,
        255,
        0.16),
        transparent 70%),
        linear-gradient(180deg,
        rgba(255,
        255,
        255,
        0.07),
        rgba(255,
        255,
        255,
        0.025));
        border-color: rgba(99,
        245,
        255,
        0.25);
        box-shadow: 0 18px 54px rgba(0,
        0,
        0,
        0.44),
        0 0 30px rgba(99,
        245,
        255,
        0.08),
        inset 0 1px 0 rgba(255,
        255,
        255,
        0.14);
      }
      .ix-action::before  {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(110deg,
        transparent 0%,
        rgba(255,
        255,
        255,
        0.58) 48%,
        transparent 56%);
        transform: translateX(-120%);
        transition: transform 0.75s cubic-bezier(.16,
        .84,
        .2,
        1);
      }
      .ix-action:hover  {
        transform: translateY(-3px);
        filter: saturate(1.14) contrast(1.04);
        box-shadow: 0 26px 76px rgba(255,
        215,
        0,
        0.23),
        0 0 32px rgba(99,
        245,
        255,
        0.10),
        inset 0 1px 0 rgba(255,
        255,
        255,
        0.68);
      }
      .ix-action.secondary:hover  {
        box-shadow: 0 26px 76px rgba(0,
        0,
        0,
        0.58),
        0 0 42px rgba(99,
        245,
        255,
        0.16),
        inset 0 1px 0 rgba(255,
        255,
        255,
        0.18);
      }
      .ix-action:hover::before  {
        transform: translateX(120%);
      }
      .ix-action:active  {
        transform: translateY(0) scale(0.985);
      }
      .ix-action .ix-ripple  {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient(circle,
        rgba(255,
        255,
        255,
        .72),
        transparent 70%);
        transform: translate(-50%,
        -50%) scale(0);
        animation: ixRipple 0.68s ease-out forwards;
        mix-blend-mode: screen;
      }
      @keyframes ixRipple  {
        to  {
          opacity: 0;
          transform: translate(-50%, -50%) scale(18);
        }
      }
      .ix-proof-grid  {
        display: grid;
        grid-template-columns: repeat(3,
        minmax(0,
        1fr));
        gap: 14px;
        margin-top: 32px;
        max-width: 730px;
      }
      .ix-proof  {
        position: relative;
        overflow: hidden;
        min-height: 102px;
        padding: 17px 16px;
        border: 1px solid rgba(255,
        215,
        0,
        0.18);
        border-radius: 18px;
        background: linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .055),
        rgba(255,
        255,
        255,
        .022)),
        rgba(5,
        8,
        14,
        0.68);
        box-shadow: 0 18px 48px rgba(0,
        0,
        0,
        .32);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }
      .ix-proof::after  {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(240px 90px at var(--mx) var(--my),
        rgba(99,
        245,
        255,
        0.13),
        transparent 66%);
        opacity: 0;
        transition: opacity .25s ease;
      }
      .ix-proof:hover::after  {
        opacity: 1;
      }
      .ix-proof strong  {
        position: relative;
        z-index: 1;
        display: block;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: clamp(19px,
        2.45vw,
        28px);
        color: transparent;
        background: var(--ix-cyber-grad);
        -webkit-background-clip: text;
        background-clip: text;
      }
      .ix-proof span  {
        position: relative;
        z-index: 1;
        display: block;
        margin-top: 6px;
        color: var(--ix-muted);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
      }
      .ix-visual  {
        position: relative;
        min-height: 650px;
        perspective: 1200px;
      }
      .ix-visual-shell  {
        position: sticky;
        top: 96px;
        transform-style: preserve-3d;
      }
      .ix-console  {
        position: relative;
        min-height: 590px;
        border-radius: 34px;
        background: linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .07),
        rgba(255,
        255,
        255,
        .025)),
        radial-gradient(520px 420px at 50% 18%,
        rgba(99,
        245,
        255,
        .12),
        transparent 68%),
        radial-gradient(400px 360px at 76% 72%,
        rgba(120,
        255,
        178,
        .10),
        transparent 62%),
        rgba(5,
        8,
        16,
        0.78);
        border: 1px solid rgba(255,
        215,
        0,
        0.19);
        box-shadow: var(--ix-shadow),
        inset 0 1px 0 rgba(255,
        255,
        255,
        .12);
        overflow: hidden;
        transform: rotateX(2deg) rotateY(-5deg);
        transition: transform .22s ease,
        box-shadow .22s ease;
      }
      .ix-console:hover  {
        box-shadow: 0 42px 130px rgba(0,
        0,
        0,
        0.72),
        0 0 60px rgba(99,
        245,
        255,
        .10),
        inset 0 1px 0 rgba(255,
        255,
        255,
        .16);
      }
      .ix-console::before  {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(99,
        245,
        255,
        .055) 1px,
        transparent 1px),
        linear-gradient(90deg,
        rgba(255,
        215,
        0,
        .04) 1px,
        transparent 1px);
        background-size: 26px 26px;
        -webkit-mask-image: linear-gradient(180deg,
        #000 0%,
        transparent 88%);
        mask-image: linear-gradient(180deg,
        #000 0%,
        transparent 88%);
        opacity: 0.84;
      }
      .ix-console::after  {
        content: "";
        position: absolute;
        inset: -45%;
        background: conic-gradient( from 0deg,
        transparent 0deg,
        rgba(99,
        245,
        255,
        .12) 74deg,
        transparent 118deg,
        rgba(255,
        215,
        0,
        .10) 190deg,
        rgba(120,
        255,
        178,
        .10) 238deg,
        transparent 310deg );
        animation: ixConicSweep 9s linear infinite;
        opacity: 0.55;
        mix-blend-mode: screen;
      }
      @keyframes ixConicSweep  {
        to  {
          transform: rotate(360deg);
        }
      }
      .ix-console-topbar  {
        position: relative;
        z-index: 2;
        height: 58px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255,
        255,
        255,
        .09);
        background: rgba(4,
        7,
        13,
        0.55);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
      }
      .ix-window-dots  {
        display: inline-flex;
        gap: 8px;
      }
      .ix-window-dots span  {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: rgba(255,
        255,
        255,
        .28);
        box-shadow: 0 0 12px rgba(255,
        255,
        255,
        .12);
      }
      .ix-window-dots span:nth-child(1)  {
        background: #ff4f6d;
      }
      .ix-window-dots span:nth-child(2)  {
        background: #ffd700;
      }
      .ix-window-dots span:nth-child(3)  {
        background: #63f5ff;
      }
      .ix-live-tag  {
        color: var(--ix-cyan);
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: 11px;
        letter-spacing: .22em;
        text-transform: uppercase;
        text-shadow: 0 0 14px rgba(99,
        245,
        255,
        .6);
      }
      .ix-console-grid  {
        position: relative;
        z-index: 2;
        min-height: 532px;
        padding: 26px;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 22px;
      }
      .ix-bridge-map  {
        position: relative;
        width: min(360px,
        72vw);
        height: min(340px,
        72vw);
        margin: 0 auto;
      }
      .ix-bridge-svg  {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0 8px rgba(99,
        245,
        255,
        .22)) drop-shadow(0 0 16px rgba(255,
        215,
        0,
        .10));
        opacity: .92;
      }
      .ix-bridge-svg path  {
        stroke-dasharray: 9 10;
        animation: ixDash 7s linear infinite;
      }
      @keyframes ixDash  {
        to  {
          stroke-dashoffset: -190;
        }
      }
      .ix-hub  {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 3;
        width: 104px;
        height: 104px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        transform: translate(-50%,
        -50%);
        color: #080a12;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-weight: 900;
        letter-spacing: -.05em;
        background: radial-gradient(circle at 34% 28%,
        #ffffff,
        #fff4a3 18%,
        #ffd700 42%,
        #63f5ff 100%);
        box-shadow: 0 0 40px rgba(255,
        215,
        0,
        .42),
        0 0 58px rgba(99,
        245,
        255,
        .28);
        animation: ixCoreBreathe 2.8s ease-in-out infinite;
      }
      .ix-hub::before,
      .ix-hub::after  {
        content: "";
        position: absolute;
        inset: -18px;
        border-radius: 50%;
        border: 1px dashed rgba(99,
        245,
        255,
        .36);
        animation: ixMiniSpin 12s linear infinite;
      }
      .ix-hub::after  {
        inset: -32px;
        border-color: rgba(255,
        215,
        0,
        .24);
        animation-duration: 18s;
        animation-direction: reverse;
      }
      @keyframes ixMiniSpin  {
        to  {
          transform: rotate(360deg);
        }
      }
      @keyframes ixCoreBreathe  {
        0%,
        100%  {
          transform: translate(-50%, -50%) scale(.94);
          filter: saturate(1);
        }
        50%  {
          transform: translate(-50%, -50%) scale(1.06);
          filter: saturate(1.25);
        }
      }
      .ix-node  {
        position: absolute;
        z-index: 2;
        width: 104px;
        min-height: 54px;
        display: grid;
        place-items: center;
        padding: 8px;
        border: 1px solid rgba(255,
        255,
        255,
        .13);
        border-radius: 17px;
        color: #fff;
        background: radial-gradient(130px 80px at 50% 0%,
        rgba(99,
        245,
        255,
        .16),
        transparent 72%),
        rgba(8,
        12,
        20,
        .74);
        box-shadow: 0 14px 42px rgba(0,
        0,
        0,
        .38),
        0 0 18px rgba(99,
        245,
        255,
        .08);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-align: center;
        cursor: pointer;
        transition: transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
      }
      .ix-node:hover,
      .ix-node.is-active  {
        transform: translateY(-4px) scale(1.04);
        border-color: rgba(255,
        215,
        0,
        .42);
        box-shadow: 0 22px 56px rgba(0,
        0,
        0,
        .48),
        0 0 30px rgba(255,
        215,
        0,
        .14),
        0 0 34px rgba(99,
        245,
        255,
        .12);
      }
      .ix-node.n1  {
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
      }
      .ix-node.n1:hover,
      .ix-node.n1.is-active  {
        transform: translateX(-50%) translateY(-4px) scale(1.04);
      }
      .ix-node.n2  {
        top: 108px;
        right: 0;
      }
      .ix-node.n3  {
        bottom: 20px;
        right: 34px;
      }
      .ix-node.n4  {
        bottom: 20px;
        left: 34px;
      }
      .ix-node.n5  {
        top: 108px;
        left: 0;
      }
      .ix-terminal  {
        position: relative;
        min-height: 164px;
        padding: 18px;
        border: 1px solid rgba(99,
        245,
        255,
        .15);
        border-radius: 20px;
        background: linear-gradient(180deg,
        rgba(0,
        0,
        0,
        .20),
        rgba(255,
        255,
        255,
        .025)),
        rgba(4,
        7,
        13,
        .62);
        overflow: hidden;
      }
      .ix-terminal::before  {
        content: "";
        position: absolute;
        left: -40%;
        top: 0;
        width: 40%;
        height: 100%;
        background: linear-gradient(90deg,
        transparent,
        rgba(255,
        255,
        255,
        .16),
        transparent);
        transform: skewX(-20deg);
        animation: ixPanelScan 4.6s ease-in-out infinite;
      }
      @keyframes ixPanelScan  {
        0%,
        36%  {
          left: -60%;
        }
        72%,
        100%  {
          left: 124%;
        }
      }
      .ix-terminal-line  {
        position: relative;
        z-index: 1;
        display: flex;
        gap: 10px;
        align-items: flex-start;
        color: #dce8ff;
        font-size: 12px;
        line-height: 1.62;
        margin: 0 0 9px;
      }
      .ix-terminal-line:last-child  {
        margin-bottom: 0;
      }
      .ix-terminal-line code  {
        color: var(--ix-gold);
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: 11px;
        letter-spacing: .08em;
      }
      .ix-typing  {
        color: var(--ix-cyan);
        text-shadow: 0 0 14px rgba(99,
        245,
        255,
        .42);
      }
      .ix-console-footer  {
        display: grid;
        grid-template-columns: repeat(3,
        minmax(0,
        1fr));
        gap: 10px;
      }
      .ix-mini-stat  {
        padding: 13px;
        border: 1px solid rgba(255,
        255,
        255,
        .09);
        border-radius: 16px;
        background: rgba(0,
        0,
        0,
        .18);
      }
      .ix-mini-stat span  {
        display: block;
        color: var(--ix-muted);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .ix-mini-stat strong  {
        display: block;
        margin-top: 7px;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        color: transparent;
        background: var(--ix-cyber-grad);
        -webkit-background-clip: text;
        background-clip: text;
        font-size: 16px;
      }
      .ix-split  {
        display: grid;
        grid-template-columns: minmax(0,
        0.84fr) minmax(360px,
        1.16fr);
        gap: 34px;
        align-items: start;
      }
      .ix-sticky  {
        position: sticky;
        top: 112px;
      }
      .ix-pill-row  {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
      }
      .ix-pill  {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 11px;
        border: 1px solid rgba(99,
        245,
        255,
        .18);
        border-radius: 999px;
        color: #dffcff;
        background: rgba(99,
        245,
        255,
        .055);
        font-size: 12px;
        font-weight: 900;
      }
      .ix-pill::before  {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--ix-gold);
        box-shadow: 0 0 12px rgba(255,
        215,
        0,
        .72);
      }
      .ix-card-grid  {
        display: grid;
        grid-template-columns: repeat(2,
        minmax(0,
        1fr));
        gap: 16px;
      }
      .ix-card  {
        --tilt-x: 0deg;
        --tilt-y: 0deg;
        position: relative;
        min-height: 252px;
        padding: 24px;
        border: 1px solid rgba(255,
        255,
        255,
        .10);
        border-radius: 24px;
        background: radial-gradient(420px 180px at var(--mx) var(--my),
        rgba(99,
        245,
        255,
        .13),
        transparent 62%),
        linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .065),
        rgba(255,
        255,
        255,
        .025)),
        rgba(7,
        10,
        18,
        0.72);
        box-shadow: 0 22px 70px rgba(0,
        0,
        0,
        .38);
        overflow: hidden;
        transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
        transition: transform .14s ease,
        border-color .22s ease,
        box-shadow .22s ease;
        will-change: transform;
      }
      .ix-card:hover  {
        border-color: rgba(255,
        215,
        0,
        .34);
        box-shadow: 0 34px 92px rgba(0,
        0,
        0,
        .52),
        0 0 36px rgba(99,
        245,
        255,
        .10);
      }
      .ix-card::before  {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg,
        rgba(255,
        215,
        0,
        .36),
        rgba(99,
        245,
        255,
        .22),
        rgba(120,
        255,
        178,
        .18),
        transparent 76%);
        -webkit-mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
      }
      .ix-card::after  {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -70px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: radial-gradient(circle,
        rgba(120,
        255,
        178,
        .14),
        transparent 66%);
        filter: blur(2px);
      }
      .ix-card-top  {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 18px;
        color: var(--ix-cyan);
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: 12px;
        letter-spacing: .18em;
        text-transform: uppercase;
      }
      .ix-card-icon  {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        color: var(--ix-gold);
        background: radial-gradient(circle at 50% 0%,
        rgba(255,
        215,
        0,
        .26),
        transparent 70%),
        rgba(255,
        255,
        255,
        .055);
        border: 1px solid rgba(255,
        215,
        0,
        .18);
        box-shadow: inset 0 1px 0 rgba(255,
        255,
        255,
        .10);
        font-weight: 900;
      }
      .ix-card h3  {
        position: relative;
        z-index: 1;
        margin: 0;
        color: #fff;
        font-size: 20px;
        line-height: 1.24;
      }
      .ix-card p  {
        position: relative;
        z-index: 1;
        margin: 12px 0 0;
        color: var(--ix-muted);
        line-height: 1.75;
        font-size: 14px;
      }
      .ix-blueprint-shell  {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0,
        1fr) minmax(320px,
        .86fr);
        gap: 28px;
        padding: clamp(24px,
        4vw,
        44px);
        border-radius: var(--ix-radius-xl);
        border: 1px solid rgba(255,
        215,
        0,
        .22);
        background: radial-gradient(800px 360px at 18% 10%,
        rgba(255,
        215,
        0,
        .13),
        transparent 68%),
        radial-gradient(720px 420px at 92% 82%,
        rgba(99,
        245,
        255,
        .12),
        transparent 64%),
        radial-gradient(640px 380px at 50% 50%,
        rgba(120,
        255,
        178,
        .08),
        transparent 70%),
        linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .06),
        rgba(255,
        255,
        255,
        .025)),
        rgba(4,
        8,
        15,
        0.82);
        box-shadow: var(--ix-shadow);
      }
      .ix-blueprint-shell::before  {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
        transparent,
        rgba(255,
        255,
        255,
        .08),
        transparent);
        transform: translateX(-120%) skewX(-18deg);
        animation: ixBigSweep 7s ease-in-out infinite;
        pointer-events: none;
      }
      @keyframes ixBigSweep  {
        0%,
        32%  {
          transform: translateX(-120%) skewX(-18deg);
        }
        68%,
        100%  {
          transform: translateX(120%) skewX(-18deg);
        }
      }
      .ix-blueprint-copy  {
        position: relative;
        z-index: 1;
      }
      .ix-blueprint-copy h2  {
        margin: 0;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: clamp(30px,
        5vw,
        70px);
        line-height: 1;
        letter-spacing: -0.052em;
        color: transparent;
        background: var(--ix-gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
      }
      .ix-blueprint-copy p  {
        margin: 18px 0 0;
        color: #cfd6eb;
        line-height: 1.82;
        font-size: 16px;
        max-width: 780px;
      }
      .ix-blueprint-copy strong  {
        color: #fff5bd;
      }
      .ix-sync-card  {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 18px;
        align-content: center;
        padding: 24px;
        border-radius: 26px;
        border: 1px solid rgba(99,
        245,
        255,
        .18);
        background: linear-gradient(180deg,
        rgba(0,
        0,
        0,
        .20),
        rgba(255,
        255,
        255,
        .035));
        box-shadow: inset 0 1px 0 rgba(255,
        255,
        255,
        .10);
      }
      .ix-sync-ring  {
        --p: 86;
        position: relative;
        width: 188px;
        height: 188px;
        margin: 0 auto;
        border-radius: 50%;
        background: conic-gradient(var(--ix-cyan) calc(var(--p) * 1%),
        rgba(255,
        255,
        255,
        .08) 0),
        radial-gradient(circle,
        rgba(255,
        215,
        0,
        .15),
        rgba(4,
        7,
        13,
        .95) 60%);
        box-shadow: 0 0 40px rgba(99,
        245,
        255,
        .12),
        inset 0 0 0 1px rgba(255,
        255,
        255,
        .08);
        display: grid;
        place-items: center;
      }
      .ix-sync-ring::before  {
        content: "";
        position: absolute;
        inset: 15px;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 0%,
        rgba(255,
        255,
        255,
        .12),
        transparent 60%),
        #070a12;
        box-shadow: inset 0 0 34px rgba(0,
        0,
        0,
        .78);
      }
      .ix-sync-ring strong  {
        position: relative;
        z-index: 1;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: 40px;
        color: transparent;
        background: var(--ix-gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
      }
      .ix-sync-ring span  {
        position: relative;
        z-index: 1;
        margin-top: -28px;
        color: var(--ix-muted);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .16em;
        text-transform: uppercase;
      }
      .ix-deliverables  {
        display: grid;
        gap: 10px;
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .ix-deliverables li  {
        position: relative;
        padding: 12px 12px 12px 38px;
        border-radius: 15px;
        border: 1px solid rgba(255,
        255,
        255,
        .09);
        background: rgba(0,
        0,
        0,
        .18);
        color: #dfe8ff;
        line-height: 1.55;
        font-size: 13px;
      }
      .ix-deliverables li::before  {
        content: "\2713";
        position: absolute;
        left: 14px;
        top: 11px;
        color: var(--ix-cyan);
        font-weight: 900;
        text-shadow: 0 0 14px rgba(99,
        245,
        255,
        .62);
      }
      .ix-lab  {
        display: grid;
        grid-template-columns: 300px minmax(0,
        1fr);
        gap: 20px;
        margin-top: 34px;
      }
      .ix-lab-tabs  {
        display: grid;
        gap: 12px;
      }
      .ix-lab-tab  {
        position: relative;
        overflow: hidden;
        min-height: 82px;
        padding: 16px 16px 16px 18px;
        border: 1px solid rgba(255,
        255,
        255,
        .10);
        border-radius: 18px;
        color: #fff;
        text-align: left;
        background: linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .055),
        rgba(255,
        255,
        255,
        .025)),
        rgba(5,
        8,
        14,
        .70);
        cursor: pointer;
        transition: transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
      }
      .ix-lab-tab::before  {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        bottom: 16px;
        width: 3px;
        border-radius: 999px;
        background: var(--ix-cyan);
        opacity: 0;
        box-shadow: 0 0 16px rgba(99,
        245,
        255,
        .7);
        transition: opacity .2s ease;
      }
      .ix-lab-tab:hover,
      .ix-lab-tab.is-active  {
        border-color: rgba(255,
        215,
        0,
        .32);
        transform: translateX(4px);
        box-shadow: 0 18px 48px rgba(0,
        0,
        0,
        .38),
        0 0 30px rgba(99,
        245,
        255,
        .08);
      }
      .ix-lab-tab.is-active::before  {
        opacity: 1;
      }
      .ix-lab-tab strong  {
        display: block;
        font-size: 14px;
        letter-spacing: .04em;
        text-transform: uppercase;
      }
      .ix-lab-tab span  {
        display: block;
        margin-top: 7px;
        color: var(--ix-muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .ix-lab-panel  {
        position: relative;
        overflow: hidden;
        min-height: 454px;
        padding: clamp(24px,
        3vw,
        36px);
        border-radius: 28px;
        border: 1px solid rgba(99,
        245,
        255,
        .18);
        background: radial-gradient(600px 260px at var(--mx) var(--my),
        rgba(99,
        245,
        255,
        .11),
        transparent 66%),
        linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .06),
        rgba(255,
        255,
        255,
        .025)),
        rgba(7,
        10,
        18,
        0.76);
        box-shadow: var(--ix-shadow);
      }
      .ix-lab-panel::before  {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(99,
        245,
        255,
        .055) 1px,
        transparent 1px),
        linear-gradient(90deg,
        rgba(255,
        215,
        0,
        .035) 1px,
        transparent 1px);
        background-size: 34px 34px;
        opacity: .55;
        -webkit-mask-image: linear-gradient(180deg,
        #000,
        transparent);
        mask-image: linear-gradient(180deg,
        #000,
        transparent);
      }
      .ix-lab-panel-content  {
        position: relative;
        z-index: 1;
        transition: opacity .2s ease,
        transform .2s ease;
      }
      .ix-lab-panel h3  {
        margin: 0;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        color: transparent;
        background: var(--ix-cyber-grad);
        -webkit-background-clip: text;
        background-clip: text;
        font-size: clamp(24px,
        3vw,
        42px);
        line-height: 1.08;
      }
      .ix-lab-panel p  {
        margin: 16px 0 0;
        color: #cfd6eb;
        line-height: 1.78;
        max-width: 780px;
      }
      .ix-lab-list  {
        display: grid;
        grid-template-columns: repeat(2,
        minmax(0,
        1fr));
        gap: 12px;
        margin-top: 26px;
        padding: 0;
        list-style: none;
      }
      .ix-lab-list li  {
        position: relative;
        min-height: 74px;
        padding: 15px 15px 15px 42px;
        border-radius: 16px;
        border: 1px solid rgba(255,
        255,
        255,
        .09);
        background: rgba(0,
        0,
        0,
        .18);
        color: #dfe8ff;
        line-height: 1.55;
        font-size: 13px;
      }
      .ix-lab-list li::before  {
        content: "";
        position: absolute;
        left: 17px;
        top: 22px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--ix-gold);
        box-shadow: 0 0 15px rgba(255,
        215,
        0,
        .66);
      }
      .ix-sample  {
        margin-top: 24px;
        padding: 18px;
        border-radius: 18px;
        border: 1px solid rgba(99,
        245,
        255,
        .14);
        background: linear-gradient(180deg,
        rgba(0,
        0,
        0,
        .18),
        rgba(255,
        255,
        255,
        .026));
        color: #dce8ff;
        font-size: 13px;
        line-height: 1.72;
        overflow: hidden;
      }
      .ix-sample strong  {
        color: var(--ix-cyan);
      }
      .ix-process-grid  {
        display: grid;
        grid-template-columns: repeat(4,
        minmax(0,
        1fr));
        gap: 15px;
        margin-top: 34px;
      }
      .ix-process  {
        position: relative;
        overflow: hidden;
        min-height: 262px;
        padding: 22px;
        border-radius: 24px;
        border: 1px solid rgba(255,
        255,
        255,
        .10);
        background: linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .055),
        rgba(255,
        255,
        255,
        .025)),
        rgba(6,
        9,
        16,
        0.76);
        box-shadow: 0 20px 62px rgba(0,
        0,
        0,
        .38);
      }
      .ix-process::before  {
        content: attr(data-step);
        position: absolute;
        right: 16px;
        top: 12px;
        color: rgba(255,
        255,
        255,
        .055);
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: 72px;
        font-weight: 900;
        line-height: 1;
      }
      .ix-process::after  {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg,
        var(--ix-gold),
        var(--ix-cyan),
        var(--ix-green),
        transparent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .42s cubic-bezier(.16,
        .84,
        .2,
        1);
      }
      .ix-process:hover::after  {
        transform: scaleX(1);
      }
      .ix-process h3  {
        position: relative;
        z-index: 1;
        margin: 0;
        color: #fff;
        font-size: 18px;
        line-height: 1.3;
      }
      .ix-process p  {
        position: relative;
        z-index: 1;
        margin: 14px 0 0;
        color: var(--ix-muted);
        line-height: 1.75;
        font-size: 13px;
      }
      .ix-value-grid  {
        display: grid;
        grid-template-columns: minmax(0,
        1fr) minmax(320px,
        .78fr);
        gap: 24px;
        align-items: stretch;
        margin-top: 34px;
      }
      .ix-value-card,
      .ix-trust-card  {
        position: relative;
        overflow: hidden;
        padding: clamp(24px,
        3vw,
        36px);
        border-radius: var(--ix-radius-xl);
        border: 1px solid rgba(255,
        215,
        0,
        .20);
        background: radial-gradient(520px 240px at 0% 0%,
        rgba(255,
        215,
        0,
        .13),
        transparent 66%),
        radial-gradient(520px 260px at 100% 100%,
        rgba(99,
        245,
        255,
        .11),
        transparent 64%),
        linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .06),
        rgba(255,
        255,
        255,
        .025)),
        rgba(7,
        10,
        18,
        0.78);
        box-shadow: var(--ix-shadow);
      }
      .ix-value-card h3,
      .ix-trust-card h3  {
        margin: 0;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        color: #fff;
        font-size: clamp(24px,
        3vw,
        42px);
        line-height: 1.1;
      }
      .ix-value-card h3 span  {
        color: transparent;
        background: var(--ix-gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
      }
      .ix-value-card p,
      .ix-trust-card p  {
        margin: 16px 0 0;
        color: #cfd6eb;
        line-height: 1.82;
      }
      .ix-trust-list  {
        margin: 22px 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 12px;
      }
      .ix-trust-list li  {
        position: relative;
        padding: 13px 14px 13px 42px;
        border: 1px solid rgba(255,
        255,
        255,
        .09);
        border-radius: 16px;
        background: rgba(0,
        0,
        0,
        .16);
        color: #e4ebff;
        line-height: 1.55;
        font-size: 14px;
      }
      .ix-trust-list li::before  {
        content: "\2726";
        position: absolute;
        left: 15px;
        top: 12px;
        color: var(--ix-cyan);
        text-shadow: 0 0 14px rgba(99,
        245,
        255,
        .62);
        font-weight: 900;
      }
      .ix-final  {
        padding-bottom: 134px;
      }
      .ix-final-shell  {
        position: relative;
        overflow: hidden;
        text-align: center;
        padding: clamp(36px,
        6vw,
        78px) clamp(20px,
        5vw,
        72px);
        border-radius: 38px;
        border: 1px solid rgba(255,
        215,
        0,
        .24);
        background: radial-gradient(900px 360px at 50% 0%,
        rgba(255,
        215,
        0,
        .18),
        transparent 66%),
        radial-gradient(800px 440px at 50% 100%,
        rgba(99,
        245,
        255,
        .13),
        transparent 70%),
        radial-gradient(720px 420px at 80% 50%,
        rgba(120,
        255,
        178,
        .09),
        transparent 72%),
        linear-gradient(180deg,
        rgba(255,
        255,
        255,
        .07),
        rgba(255,
        255,
        255,
        .025)),
        rgba(5,
        8,
        14,
        .84);
        box-shadow: var(--ix-shadow);
      }
      .ix-final-shell::before  {
        content: "";
        position: absolute;
        inset: -2px;
        background: conic-gradient(from 180deg,
        transparent,
        rgba(255,
        215,
        0,
        .24),
        transparent,
        rgba(99,
        245,
        255,
        .18),
        rgba(120,
        255,
        178,
        .14),
        transparent);
        animation: ixConicSweep 10s linear infinite;
        opacity: .48;
        z-index: 0;
      }
      .ix-final-content  {
        position: relative;
        z-index: 1;
      }
      .ix-final h2  {
        max-width: 980px;
        margin: 0 auto;
        font-family: "Orbitron",
        system-ui,
        sans-serif;
        font-size: clamp(31px,
        5vw,
        74px);
        line-height: 1.02;
        letter-spacing: -0.052em;
        color: transparent;
        background: var(--ix-gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
      }
      .ix-final p  {
        max-width: 840px;
        margin: 20px auto 0;
        color: #d5dcf3;
        line-height: 1.8;
        font-size: clamp(15px,
        1.6vw,
        19px);
      }
      .ix-final-actions  {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 30px;
      }
      @media (max-width: 1080px)  {
        .ix-page  {
          margin-top: 126px;
        }
        .ix-hero-grid,
        .ix-split,
        .ix-blueprint-shell,
        .ix-value-grid  {
          grid-template-columns: 1fr;
        }
        .ix-visual  {
          min-height: auto;
        }
        .ix-visual-shell,
        .ix-sticky  {
          position: relative;
          top: auto;
        }
        .ix-console  {
          transform: none;
        }
        .ix-lab  {
          grid-template-columns: 1fr;
        }
        .ix-lab-tabs  {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .ix-process-grid  {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 720px)  {
        .ix-page  {
          margin-top: 112px;
        }
        .ix-container  {
          width: min(100% - 28px, 1180px);
        }
        
        body.xvising-integration-shell .ix-hero  {
          padding-top: 108px;
        }
        .ix-proof-grid,
        .ix-card-grid,
        .ix-console-footer,
        .ix-lab-list,
        .ix-process-grid,
        .ix-lab-tabs  {
          grid-template-columns: 1fr;
        }
        .ix-section  {
          padding: 82px 0;
        }
        .ix-console  {
          min-height: 540px;
        }
        .ix-console-grid  {
          padding: 18px;
        }
        .ix-kicker  {
          letter-spacing: .10em;
          font-size: 10px;
        }
        .ix-action  {
          width: 100%;
        }
        .ix-node  {
          width: 88px;
          font-size: 10px;
        }
        .ix-bridge-map  {
          height: 318px;
        }
      }
      @media (prefers-reduced-motion: reduce)  {
        *,
        *::before,
        *::after  {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.001ms !important;
        }
        .ix-reveal  {
          opacity: 1;
          transform: none;
          filter: none;
        }
      }