:root {
        --bg: #f5f4fb;
        --fg: #0b1030;
        --muted: #555b7a;
        --card: rgba(255, 255, 255, 0.7);
        --line: rgba(11, 16, 48, 0.12);
        --a: #2b3bff;
        --b: #8a2be2;
        --c: #ff2d87;
        --grad: linear-gradient(110deg, #2b3bff, #8a2be2 50%, #ff2d87);
        --glow: 0.35;
        box-sizing: border-box;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        color-scheme: light;
      }
      html {
        scroll-padding-top: env(safe-area-inset-top, 0px);
      }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
          --bg: #070a1f;
          --fg: #f2f3ff;
          --muted: #9aa0c7;
          --card: rgba(20, 24, 60, 0.6);
          --line: rgba(255, 255, 255, 0.12);
          --glow: 0.55;
          color-scheme: dark;
        }
      }
      :root[data-theme="dark"] {
        --bg: #070a1f;
        --fg: #f2f3ff;
        --muted: #9aa0c7;
        --card: rgba(20, 24, 60, 0.6);
        --line: rgba(255, 255, 255, 0.12);
        --glow: 0.55;
        color-scheme: dark;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        overflow-x: hidden;
      }
      /* Override Bootstrap body defaults to maintain our custom theme */
      body {
        background-color: var(--bg) !important;
        color: var(--fg) !important;
        font-family:
          Inter,
          system-ui,
          -apple-system,
          "Segoe UI",
          Arial,
          sans-serif;
        -webkit-font-smoothing: antialiased;
        transition:
          background-color 0.3s ease,
          color 0.3s ease;
      }
      a {
        color: inherit;
        text-decoration: none;
      }

      /* --- Hero Section --- */
      .hero {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        isolation: isolate;
        display: flex;
        flex-direction: column;
      }
      .grid-bg {
        position: absolute;
        inset: 0;
        z-index: -2;
        background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
        mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
        opacity: 0.6;
      }
      .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: var(--glow);
        z-index: -1;
        will-change: transform;
      }
      .o1 {
        width: 480px;
        height: 480px;
        background: var(--a);
        top: -120px;
        left: -100px;
      }
      .o2 {
        width: 420px;
        height: 420px;
        background: var(--c);
        right: -80px;
        top: 120px;
      }
      .o3 {
        width: 360px;
        height: 360px;
        background: var(--b);
        bottom: -140px;
        left: 38%;
      }
    /* ====== Nav Start ====== */
      nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1240px;
        width: 100%;
        margin: 0 auto;
        padding: 22px 24px;
        z-index: 10;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        font-size: 22px;
        letter-spacing: 0.5px;
      }
      /* SoftBlock SVG Logo */
      .logo svg {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--grad);
        padding: 6px;
        color: #fff;
      }
      .links {
        display: flex;
        gap: 30px;
        font-size: 14.5px;
        font-weight: 500;
        color: var(--muted);
      }
      .links a {
        position: relative;
        padding: 4px 0;
        transition: color 0.2s;
      }
      .links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        height: 2px;
        width: 0;
        background: var(--grad);
        transition: width 0.3s;
      }
      .links a:hover {
        color: var(--fg);
      }
      .links a:hover::after {
        width: 100%;
      }
      .nav-r {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .btn-custom {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 22px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 14.5px;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--fg);
        cursor: pointer;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
        text-decoration: none;
      }
      .btn-custom.p {
        background: var(--grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 10px 30px -10px var(--b);
      }
      .btn-custom:hover {
        transform: translateY(-2px);
        color: inherit;
      }
      .btn-custom.p:hover {
        color: #fff;
      }
      .icon-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
      }
/* ====== Nav End ====== */


      .wrap {
        max-width: 1240px;
        margin: 0 auto;
        padding: 56px 24px 40px;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 48px;
        align-items: center;
        flex: 1;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 7px 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        font-size: 13px;
        color: var(--muted);
        background: var(--card);
        backdrop-filter: blur(10px);
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #19d38a;
        box-shadow: 0 0 0 0 #19d38a;
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        70% {
          box-shadow: 0 0 0 9px transparent;
        }
        100% {
          box-shadow: 0 0 0 0 transparent;
        }
      }
      h1 {
        /* font-size: clamp(40px, 6vw, 76px); */
        line-height: 1.05;
        letter-spacing: -2px;
        font-weight: 800;
        margin: 22px 0;
      }
      .ln {
        display: block;
        overflow: hidden;
        padding-bottom: 0.08em;
      }
      .ln span {
        display: block;
      }
      .g {
        background: var(--grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .lead-text {
        font-size: clamp(16px, 1.5vw, 19px);
        line-height: 1.65;
        color: var(--muted);
        max-width: 560px;
      }
      .cta {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 30px;
      }
      .stats {
        display: flex;
        flex-wrap: wrap;
        gap: 36px;
        margin-top: 44px;
        padding-top: 26px;
        border-top: 1px solid var(--line);
      }
      .stats b {
        display: block;
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -1px;
      }
      .stats span {
        font-size: 13px;
        color: var(--muted);
      }
      .vis {
        position: relative;
        height: 520px;
      }
      /* =====================================================================
         CARD SYSTEM
         1) Tokens  2) Base  3) Modifier: .interactive  4) Card parts  5) Section layouts
         Hero cards (.tech-window, .tech-node) use only the BASE.
         ===================================================================== */

      /* 1) TOKENS - change card size / shadow here */
      :root {
        --card-radius: 22px;
        --card-pad: 22px;
        --card-blur: 18px;
        --card-shadow: 0 30px 60px -30px rgba(20, 20, 80, 0.25);
        --card-shadow-hover: 0 20px 40px -20px rgba(138, 43, 226, 0.4);
        --card-ease: 0.4s ease;
      }

      /* 2) BASE - common look of every card */
      .glass-card {
        position: relative;
        overflow: hidden;
        padding: var(--card-pad);
        border: 1px solid var(--line);
        border-radius: var(--card-radius);
        background: var(--card);
        color: var(--fg);
        box-shadow: var(--card-shadow);
        backdrop-filter: blur(var(--card-blur));
        -webkit-backdrop-filter: blur(var(--card-blur));
      }

      /* 3) MODIFIER .interactive - hover lift + spotlight + bottom line */
      .glass-card.interactive {
        transition:
          transform var(--card-ease),
          box-shadow var(--card-ease),
          border-color var(--card-ease);
      }
      .glass-card.interactive > * {
        position: relative;
        z-index: 1;
      }
      .glass-card.interactive::before {
        /* light that follows the mouse (--mx / --my are set by JS) */
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(138, 43, 226, 0.18), transparent 60%);
        opacity: 0;
        transition: opacity var(--card-ease);
      }
      .glass-card.interactive::after {
        /* gradient line that grows on hover */
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 0;
        background: var(--grad);
        transition: width 0.5s ease;
      }
      .glass-card.interactive:hover {
        transform: translateY(-5px);
        border-color: var(--b);
        box-shadow: var(--card-shadow-hover);
      }
      .glass-card.interactive:hover::before {
        opacity: 1;
      }
      .glass-card.interactive:hover::after {
        width: 100%;
      }

      /* 4) CARD PARTS - elements inside a card */
      .glass-card h4 {
        margin: 0 0 4px;
        font-size: 13px;
        color: var(--muted);
        font-weight: 500;
      }
      .glass-card .v {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -1px;
      }
      .glass-card .industry-icon {
        transition:
          transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.4s,
          color 0.4s,
          box-shadow 0.4s;
      }
      .glass-card.interactive:hover .industry-icon {
        background: var(--grad);
        color: #fff;
        transform: rotate(-8deg) scale(1.12);
        box-shadow: 0 10px 24px -8px var(--b);
      }

      /* 5) SECTION LAYOUTS */

      /* INDUSTRY CARDS: all cards same size (4 per row on XL, 3 on LG, 2 on SM) */
      #industries .glass-card {
        min-height: 242px;
      }

      /* TEAM CARDS: all cards same size */
      #team .row {
        display: flex;
        justify-content: center;
        align-items: stretch;
        row-gap: 28px;
      }
      #team .row > [class*="col-"] {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        display: flex;
      }
      #team .glass-card {
        width: 100%;
        height: 100%;
        min-height: 420px;
        padding: 28px 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      @media (max-width: 991px) {
        #team .row > [class*="col-"] {
          flex: 0 0 50%;
          max-width: 50%;
        }
      }
      @media (max-width: 575px) {
        #team .row > [class*="col-"] {
          flex: 0 0 100%;
          max-width: 100%;
        }
        #team .glass-card {
          min-height: auto;
        }
      }

      .chip {
        display: inline-block;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(25, 211, 138, 0.15);
        color: #12b574;
        font-weight: 600;
        margin-left: 8px;
        vertical-align: middle;
      }
      svg.chart-svg {
        display: block;
        width: 100%;
        height: auto;
      }
      .ring {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .ring svg {
        width: 70px;
        flex: none;
      }
      .bars {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        height: 70px;
        margin-top: 10px;
      }
      .bars i {
        flex: 1;
        border-radius: 6px;
        background: var(--grad);
        transform-origin: bottom;
        height: var(--h);
      }

      /* --- Marquee --- */
      .marq {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        overflow: hidden;
        white-space: nowrap;
        background: var(--card);
        backdrop-filter: blur(10px);
      }
      .track {
        display: inline-flex;
        gap: 56px;
        padding: 18px 0;
        animation: m 35s linear infinite;
        font-weight: 600;
        color: var(--muted);
        font-size: 15px;
      }
      .track span::before {
        content: "✦";
        margin-right: 14px;
        color: var(--b);
      }
      @keyframes m {
        to {
          transform: translateX(-50%);
        }
      }

      /* --- New Sections (Bootstrap Overrides & Enhancements) --- */
      .section-padding {
        padding: 100px 0;
      }
      .section-title {
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 800;
        letter-spacing: -1px;
        margin-bottom: 1rem;
      }
      .section-subtitle {
        color: var(--muted);
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto 4rem auto;
      }
      .industry-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: rgba(43, 59, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.2rem;
        color: var(--a);
      }
      .industry-icon svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
      }
      .team-img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 1.5rem;
        border: 4px solid transparent;
        background:
          linear-gradient(var(--card), var(--card)) padding-box,
          var(--grad) border-box;
      }
      .team-role {
        color: var(--c);
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 1rem;
      }
      .team-desc {
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.6;
      }

      /* Corporate scroll pop-up header */
      .scroll-header {
        position: fixed;
        z-index: 1000;
        top: 14px;
        left: 50%;
        width: min(1220px, calc(100% - 28px));
        transform: translate(-50%, -140%);
        opacity: 0;
        pointer-events: none;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: color-mix(in srgb, var(--bg) 78%, white 22%);
        box-shadow: 0 18px 55px rgba(20, 20, 70, 0.15);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
      }
      .scroll-header.is-visible {
        pointer-events: auto;
      }
      .scroll-header nav {
        max-width: none;
        padding: 9px 18px;
      }
      .scroll-header .logo img {
        height: 48px !important;
      }
      .scroll-header .logo {
        font-size: 19px;
      }
      .scroll-header .links {
        gap: clamp(12px, 2vw, 25px);
      }
      .scroll-header .btn-custom {
        padding: 10px 17px;
      }
      .scroll-header .icon-btn {
        width: 38px;
        height: 38px;
        padding: 0;
      }
      /* GSAP animated software architecture illustration */
      .software-visual {
        perspective: 1100px;
        isolation: isolate;
      }
      .software-visual:before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        top: 82px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(138, 43, 226, 0.18), rgba(255, 45, 135, 0.07) 45%, transparent 72%);
        filter: blur(10px);
        z-index: -2;
      }
      .visual-orbit {
        position: absolute;
        border: 1px solid rgba(138, 43, 226, 0.18);
        border-radius: 50%;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%) rotate(-20deg);
        pointer-events: none;
      }
      .orbit-one {
        width: 430px;
        height: 245px;
      }
      .orbit-two {
        width: 360px;
        height: 440px;
        transform: translate(-50%, -50%) rotate(48deg);
        border-color: rgba(255, 45, 135, 0.15);
      }
      .connection-map {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        z-index: -1;
      }
      .wire {
        stroke: url(#wireGradient);
        stroke-width: 1.5;
        stroke-dasharray: 6 7;
        opacity: 0.58;
      }
      .wire-node {
        fill: var(--c);
        filter: drop-shadow(0 0 7px rgba(255, 45, 135, 0.65));
      }
      .tech-window {
        position: absolute;
        z-index: 2;
        width: min(410px, 78%);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotateX(3deg) rotateY(-5deg);
        padding: 0;
        overflow: hidden;
        border-radius: 19px;
        background: color-mix(in srgb, var(--card) 88%, white 12%);
        box-shadow:
          0 28px 75px rgba(43, 30, 100, 0.18),
          0 0 0 1px rgba(255, 255, 255, 0.45) inset;
      }
      .window-top {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        font-size: 10px;
        color: var(--muted);
      }
      .window-dots {
        display: flex;
        gap: 5px;
      }
      .window-dots i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ff668f;
      }
      .window-dots i:nth-child(2) {
        background: #ffca63;
      }
      .window-dots i:nth-child(3) {
        background: #4dd7a3;
      }
      .window-status {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 5px;
        color: #13ad79;
        font-weight: 700;
      }
      .window-status b,
      .status-dot,
      .caption-pulse {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #19d38a;
        display: inline-block;
        box-shadow: 0 0 0 4px rgba(25, 211, 138, 0.12);
      }
      .code-content {
        padding: 22px 17px 18px;
        font:
          11px/2.2 ui-monospace,
          SFMono-Regular,
          Consolas,
          monospace;
      }
      .code-line {
        white-space: nowrap;
        color: var(--fg);
      }
      .code-line > span {
        display: inline-block;
        width: 25px;
        color: #9ca0b9;
        user-select: none;
      }
      .code-line.indent {
        padding-left: 20px;
      }
      .syntax-purple {
        color: #8a2be2;
        font-style: normal;
      }
      .syntax-pink {
        color: #ff2d87;
        font-style: normal;
      }
      .syntax-blue {
        color: #2b70e8;
        font-style: normal;
      }
      .code-output {
        margin-top: 8px;
        padding: 5px 8px;
        border-radius: 7px;
        background: rgba(25, 211, 138, 0.09);
        font-size: 10px;
        color: var(--muted);
      }
      .code-output .status-dot {
        margin: 0 8px 0 0;
      }
      .cursor {
        display: inline-block;
        width: 5px;
        height: 12px;
        background: var(--c);
        vertical-align: middle;
        margin-left: 3px;
        animation: cursorBlink 1s steps(2) infinite;
      }
      @keyframes cursorBlink {
        50% {
          opacity: 0;
        }
      }
      .window-footer {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 16px;
        border-top: 1px solid var(--line);
        font-size: 10px;
        color: var(--muted);
      }
      .window-footer i {
        color: #16b982;
        margin-right: 5px;
      }
      .tech-node {
        position: absolute;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 14px;
        min-width: 150px;
        box-shadow: 0 16px 38px rgba(20, 20, 80, 0.12);
      }
      .tech-node strong {
        display: block;
        font-size: 11px;
        white-space: nowrap;
      }
      .tech-node small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
        white-space: nowrap;
      }
      .node-icon {
        width: 33px;
        height: 33px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(91, 53, 255, 0.11);
        color: var(--a);
        font-size: 16px;
      }
      .node-cloud {
        left: -1%;
        top: 13%;
      }
      .node-api {
        right: -1%;
        top: 20%;
      }
      .node-data {
        left: 0;
        bottom: 16%;
      }
      .node-ai {
        right: -2%;
        bottom: 12%;
        min-width: 175px;
      }
      .node-cloud .node-icon {
        background: rgba(25, 211, 138, 0.13);
        color: #12b574;
      }
      .node-data .node-icon {
        background: rgba(255, 45, 135, 0.11);
        color: var(--c);
      }
      .ai-spark {
        display: grid;
        place-items: center;
        width: 33px;
        height: 33px;
        border-radius: 10px;
        color: #fff;
        background: var(--grad);
        font-size: 20px;
      }
      .mini-bars {
        display: flex;
        align-items: flex-end;
        gap: 2px;
        height: 22px;
        margin-left: auto;
      }
      .mini-bars i {
        width: 3px;
        height: 45%;
        border-radius: 3px;
        background: var(--grad);
      }
      .mini-bars i:nth-child(2) {
        height: 70%;
      }
      .mini-bars i:nth-child(3) {
        height: 55%;
      }
      .mini-bars i:nth-child(4) {
        height: 100%;
      }
      .mini-bars i:nth-child(5) {
        height: 78%;
      }
      .node-pulse {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #19d38a;
      }
      .visual-caption {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.02em;
      }
      .caption-pulse {
        margin-right: 7px;
      }
      .caption-divider {
        margin: 0 9px;
        color: var(--c);
      }
      /* Chat assistant UI */
      .chat-widget {
        z-index: 1100;
      }
      .chat-toggle {
        border: 0;
        background: var(--grad);
        box-shadow: 0 12px 34px rgba(91, 53, 255, 0.35);
        transition:
          transform 0.25s,
          box-shadow 0.25s;
      }
      .chat-toggle:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 16px 38px rgba(91, 53, 255, 0.42);
      }
      .chat-box {
        width: min(365px, calc(100vw - 30px));
        height: min(500px, calc(100dvh - 120px));
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: var(--bg);
        box-shadow: 0 24px 75px rgba(15, 18, 55, 0.24);
      }
      .chat-box.d-none {
        display: none !important;
      }
      .chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 17px 18px;
        color: #fff;
        background: var(--grad);
        font-weight: 700;
      }
      .chat-header .btn-close {
        filter: invert(1);
        opacity: 0.9;
      }
      .chat-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        background: linear-gradient(150deg, rgba(138, 43, 226, 0.05), transparent 65%);
      }
      .chat-message {
        max-width: 88%;
        width: fit-content;
        margin: 0 0 11px;
        padding: 11px 13px;
        border: 1px solid var(--line);
        border-radius: 14px 14px 14px 4px;
        background: var(--card);
        color: var(--fg);
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
      }
      .chat-message.user {
        margin-left: auto;
        border-color: transparent;
        border-radius: 14px 14px 4px 14px;
        background: var(--grad);
        color: #fff;
      }
      .chat-input {
        display: flex;
        gap: 8px;
        padding: 12px;
        border-top: 1px solid var(--line);
        background: var(--card);
      }
      .chat-input .form-control {
        min-width: 0;
        border-radius: 12px;
        border-color: var(--line);
        background: var(--bg);
        color: var(--fg);
        font-size: 13px;
        box-shadow: none;
      }
      .chat-input button {
        flex: 0 0 42px;
        border: 0;
        border-radius: 12px;
        background: var(--grad);
        color: white;
      }
      @media (max-width: 900px) {
        .scroll-header .links {
          display: none;
        }
        .scroll-header .nav-r .btn-custom:not(.icon-btn):not(.p) {
          display: none;
        }
        .node-cloud {
          left: -2%;
        }
        .node-api {
          right: -2%;
        }
      }
      @media (max-width: 600px) {
        .scroll-header {
          top: 8px;
          width: calc(100% - 16px);
          border-radius: 16px;
        }
        .scroll-header nav {
          padding: 7px 10px;
        }
        .scroll-header .logo img {
          height: 40px !important;
        }
        .scroll-header .logo {
          gap: 7px;
          font-size: 16px;
        }
        .scroll-header .btn-custom.p {
          padding: 9px 12px;
          font-size: 12px;
        }
        .software-visual {
          height: 410px;
        }
        .tech-window {
          width: 78%;
          top: 48%;
        }
        .node-cloud {
          top: 5%;
          left: 0;
        }
        .node-api {
          top: 12%;
          right: 0;
        }
        .node-data {
          bottom: 9%;
          left: 0;
        }
        .node-ai {
          bottom: 5%;
          right: 0;
          min-width: 155px;
        }
        .tech-node {
          padding: 9px 10px;
          min-width: 130px;
          gap: 7px;
        }
        .node-icon,
        .ai-spark {
          width: 28px;
          height: 28px;
          font-size: 14px;
        }
        .tech-node strong {
          font-size: 10px;
        }
        .tech-node small {
          font-size: 8px;
        }
        .visual-caption {
          font-size: 9px;
          bottom: -2px;
        }
      }

      @media (max-width: 900px) {
        .links {
          display: none;
        }
        .wrap {
          grid-template-columns: 1fr;
          padding-top: 30px;
        }
        .vis {
          height: 460px;
        }
        .nav-r .btn-custom:not(.icon-btn):not(.p) {
          display: none;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
        }
      }