/* Nelix legacy stylesheet.
   Extracted verbatim from the inline <style> block in base.html so it can be
   cached. Superseded progressively by nx-tokens.css + nx-system.css; rules are
   removed from here as each page moves onto the design system. */

/* Add to nav-cta section in header */
        .nav-cta {
          display: flex;
          align-items: center;
          gap: var(--spacing-sm);
        }

        /* ============================================================
            RESET & BASE STYLES
            ============================================================ */
        *,
        *::before,
        *::after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        html {
          scroll-behavior: smooth;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        body {
          font-family: var(--nx-font);
          font-size: var(--fs-base);
          line-height: var(--lh-normal);
          color: var(--gray-800);
          background-color: var(--white);
          min-height: 100vh;
          display: flex;
          flex-direction: column;
        }

        main {
          flex: 1;
        }

        /* ============================================================
            TOAST NOTIFICATION SYSTEM
            ============================================================ */
        .toast-container {
          position: fixed;
          top: calc(var(--header-height) + 20px);
          left: 50%;
          transform: translateX(-50%);
          z-index: var(--z-toast);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12px;
          pointer-events: none;
          max-width: 90%;
          width: 440px;
        }

        body.has-announcement .toast-container {
          top: calc(var(--header-height) + var(--announcement-height) + 20px);
        }

        .toast {
          display: flex;
          align-items: flex-start;
          gap: var(--spacing-md);
          padding: var(--spacing-lg) var(--spacing-xl);
          background: var(--white);
          border-radius: var(--radius-xl);
          box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.05);
          min-width: 340px;
          max-width: 100%;
          pointer-events: auto;
          position: relative;
          overflow: hidden;
          transform: translateY(-100%) scale(0.95);
          opacity: 0;
          animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .toast.removing {
          animation: toastSlideOut 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
        }

        @keyframes toastSlideIn {
          0% {
            transform: translateY(-100%) scale(0.95);
            opacity: 0;
          }
          100% {
            transform: translateY(0) scale(1);
            opacity: 1;
          }
        }

        @keyframes toastSlideOut {
          0% {
            transform: translateY(0) scale(1);
            opacity: 1;
          }
          100% {
            transform: translateY(-30px) scale(0.9);
            opacity: 0;
          }
        }

        .toast::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;
          border-radius: var(--radius-xl) 0 0 var(--radius-xl);
        }

        .toast-success::before {
          background: linear-gradient(180deg, var(--success), var(--success-light));
        }

        .toast-danger::before,
        .toast-error::before {
          background: linear-gradient(180deg, var(--danger), var(--danger-light));
        }

        .toast-warning::before {
          background: linear-gradient(180deg, var(--warning), var(--warning-light));
        }

        .toast-info::before {
          background: linear-gradient(180deg, var(--info), var(--info-light));
        }

        .toast-icon {
          width: 44px;
          height: 44px;
          border-radius: var(--radius-lg);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          flex-shrink: 0;
        }

        .toast-success .toast-icon {
          background: rgba(199, 173, 252, 0.12);
          color: var(--success);
        }

        .toast-danger .toast-icon,
        .toast-error .toast-icon {
          background: rgba(244, 67, 54, 0.12);
          color: var(--danger);
        }

        .toast-warning .toast-icon {
          background: rgba(255, 174, 45, 0.12);
          color: var(--warning);
        }

        .toast-info .toast-icon {
          background: rgba(114, 51, 247, 0.12);
          color: var(--info);
        }

        .toast-content {
          flex: 1;
          min-width: 0;
          padding-top: 2px;
        }

        .toast-title {
          font-size: var(--fs-sm);
          font-weight: var(--fw-semibold);
          color: var(--gray-900);
          margin-bottom: 2px;
        }

        .toast-message {
          font-size: var(--fs-sm);
          color: var(--gray-600);
          line-height: var(--lh-snug);
          word-wrap: break-word;
        }

        .toast-close {
          position: absolute;
          top: 12px;
          right: 12px;
          background: none;
          border: none;
          color: var(--gray-400);
          cursor: pointer;
          padding: 4px;
          border-radius: var(--radius-sm);
          transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
          opacity: 0;
          font-size: 12px;
        }

        .toast:hover .toast-close {
          opacity: 1;
        }

        .toast-close:hover {
          background: var(--gray-100);
          color: var(--gray-700);
        }

        .toast-progress {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 3px;
          background: var(--gray-100);
          width: 100%;
          border-radius: 0 0 var(--radius-xl) var(--radius-xl);
          overflow: hidden;
        }

        .toast-progress-bar {
          height: 100%;
          transform-origin: left center;
          transition: transform linear;
        }

        .toast-success .toast-progress-bar {
          background: var(--success);
        }

        .toast-danger .toast-progress-bar,
        .toast-error .toast-progress-bar {
          background: var(--danger);
        }

        .toast-warning .toast-progress-bar {
          background: var(--warning);
        }

        .toast-info .toast-progress-bar {
          background: var(--info);
        }

        @media (max-width: 575px) {
          .toast-container {
            width: calc(100% - 24px);
            left: 12px;
            right: 12px;
            transform: none;
          }

          .toast {
            min-width: auto;
            width: 100%;
          }
        }

        /* ============================================================
            ANNOUNCEMENT BAR
            ============================================================ */
        .announcement-bar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: var(--announcement-height);
          background: var(--gradient-primary);
          color: var(--white);
          z-index: var(--z-announcement);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 var(--spacing-xl);
          font-size: var(--fs-sm);
          font-weight: var(--fw-medium);
        }

        .announcement-bar.type-info {
          background: linear-gradient(
            135deg,
            var(--info) 0%,
            var(--info-dark) 100%
          );
        }

        .announcement-bar.type-success {
          background: linear-gradient(
            135deg,
            var(--success) 0%,
            var(--success-dark) 100%
          );
        }

        .announcement-bar.type-warning {
          background: linear-gradient(
            135deg,
            var(--warning) 0%,
            var(--warning-dark) 100%
          );
        }

        .announcement-bar.type-danger {
          background: linear-gradient(
            135deg,
            var(--danger) 0%,
            var(--danger-dark) 100%
          );
        }

        .announcement-content {
          display: flex;
          align-items: center;
          gap: var(--spacing-md);
          max-width: var(--container-max-width);
          width: 100%;
          justify-content: center;
        }

        .announcement-icon {
          font-size: var(--fs-base);
        }

        .announcement-text {
          display: flex;
          align-items: center;
          gap: var(--spacing-sm);
        }

        .announcement-text strong {
          font-weight: var(--fw-semibold);
        }

        .announcement-link {
          display: inline-flex;
          align-items: center;
          gap: var(--spacing-xs);
          background: rgba(255, 255, 255, 0.2);
          color: var(--white);
          padding: var(--spacing-xs) var(--spacing-md);
          border-radius: var(--radius-full);
          font-size: var(--fs-xs);
          font-weight: var(--fw-semibold);
          text-decoration: none;
          transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
        }

        .announcement-link:hover {
          background: rgba(255, 255, 255, 0.3);
          color: var(--white);
        }

        .announcement-close {
          position: absolute;
          right: var(--spacing-lg);
          background: none;
          border: none;
          color: var(--white);
          opacity: 0.7;
          cursor: pointer;
          padding: var(--spacing-xs);
          font-size: var(--fs-base);
          transition: opacity var(--transition-base);
        }

        .announcement-close:hover {
          opacity: 1;
        }

        /* Adjust header when announcement is visible */
        body.has-announcement .site-header {
          top: var(--announcement-height);
        }

        body.has-announcement main {
          margin-top: calc(var(--header-height) + var(--announcement-height));
        }

        @media (max-width: 767px) {
          .announcement-bar {
            padding: 0 var(--spacing-md);
            height: auto;
            min-height: var(--announcement-height);
            padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm)
              var(--spacing-md);
          }

          .announcement-content {
            flex-wrap: wrap;
            gap: var(--spacing-sm);
          }

          .announcement-text {
            flex-wrap: wrap;
            text-align: center;
            justify-content: center;
          }
        }

        /* ============================================================
            MAINTENANCE MODE OVERLAY
            ============================================================ */
        .maintenance-overlay {
          position: fixed;
          inset: 0;
          background: var(--dark-primary);
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: var(--spacing-xl);
        }

        .maintenance-content {
          max-width: 500px;
        }

        .maintenance-icon {
          position: relative;
          display: inline-block;
          font-size: 80px;
          color: var(--nx-azure);
          margin-bottom: var(--spacing-xl);
        }

        /* The pulse is a scaling ring on ::after rather than an animated
           box-shadow spread on the icon itself, so only transform and opacity
           are animated. Font Awesome owns ::before for the glyph. */
        .maintenance-icon::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 1em;
          height: 1em;
          border: 2px solid var(--nx-azure);
          border-radius: 50%;
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.4;
          animation: nxRingPulse 2s infinite;
          pointer-events: none;
        }

        .maintenance-content h1 {
          color: var(--white);
          font-size: var(--fs-4xl);
          margin-bottom: var(--spacing-md);
        }

        .maintenance-content p {
          color: var(--gray-400);
          font-size: var(--fs-lg);
          line-height: var(--lh-relaxed);
        }

        /* ============================================================
            TYPOGRAPHY
            ============================================================ */
        /* Bare-element typography is a DEFAULT, not a rule to be fought.
           Wrapped in :where() so it carries zero specificity: any component
           class, on any sheet, now wins without having to escalate. Before
           this, `h1..h6` and `p` beat every class-level colour that relied on
           inheritance, which is what painted `.na-h2` white on a white band
           and the footer copyright at 3.24:1. The declarations themselves are
           unchanged, so every page that has no component class still renders
           exactly as it did. */
        :where(h1, h2, h3, h4, h5, h6) {
          font-family: var(--nx-font);
          font-weight: var(--fw-bold);
          line-height: var(--lh-tight);
          color: var(--dark-primary);
          margin-bottom: var(--spacing-md);
        }

        :where(h1) {
          font-size: var(--fs-5xl);
        }
        :where(h2) {
          font-size: var(--fs-4xl);
        }
        :where(h3) {
          font-size: var(--fs-3xl);
        }
        :where(h4) {
          font-size: var(--fs-2xl);
        }
        :where(h5) {
          font-size: var(--fs-xl);
        }
        :where(h6) {
          font-size: var(--fs-lg);
        }

        :where(p) {
          margin-bottom: var(--spacing-md);
          color: var(--gray-700);
        }

        a {
          color: var(--nx-azure);
          text-decoration: none;
          transition: color var(--transition-base);
        }

        a:hover {
          color: var(--nx-azure-deep);
        }

        /* ============================================================
            HEADER / NAVIGATION
            ============================================================ */
        .site-header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: var(--header-height);
          background: color-mix(in srgb, var(--dark-primary) 82%, transparent);
          -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
          z-index: var(--z-fixed);
          transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
          border-bottom: 1px solid var(--dark-border);
        }

        .site-header.scrolled {
          background: color-mix(in srgb, var(--dark-primary) 92%, transparent);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
        }

        .header-container {
          max-width: var(--container-max-width);
          margin: 0 auto;
          padding: 0 var(--spacing-lg);
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .logo {
          display: flex;
          align-items: center;
          gap: var(--spacing-sm);
          font-family: var(--nx-font);
          font-size: var(--fs-xl);
          font-weight: var(--fw-bold);
          color: var(--white);
          text-decoration: none;
        }

        .logo img {
          height: 40px;
          width: auto;
        }

        .logo-text {
          background: var(--gradient-primary);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .main-nav {
          display: flex;
          align-items: center;
          gap: var(--spacing-xl);
        }

        .nav-links {
          display: flex;
          align-items: center;
          gap: var(--spacing-lg);
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .nav-link {
          color: var(--gray-300);
          font-size: var(--fs-sm);
          font-weight: var(--fw-medium);
          text-decoration: none;
          padding: var(--spacing-sm) var(--spacing-md);
          border-radius: var(--radius-md);
          transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
          position: relative;
        }

        .nav-link:hover,
        .nav-link.active {
          color: var(--nx-azure);
        }

        .nav-link.active::after {
          content: "";
          position: absolute;
          bottom: -4px;
          left: 50%;
          transform: translateX(-50%);
          width: 20px;
          height: 2px;
          background: var(--nx-azure);
          border-radius: var(--radius-full);
        }

        /* =============================================
          DROPDOWN — STRIPE-STYLE MORPH ANIMATION
          ============================================= */
        .nav-dropdown {
          position: static;
        }

        .nav-dropdown-trigger {
          color: var(--gray-300);
          font-size: var(--fs-lg);
          font-weight: var(--fw-medium);
          text-decoration: none;
          padding: var(--spacing-sm) var(--spacing-md);
          border-radius: var(--radius-md);
          transition: color 0.2s ease;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 5px;
          background: none;
          border: none;
          font-family: inherit;
          position: relative;
        }

        .nav-dropdown-trigger:hover,
        .nav-dropdown-trigger.parent-active {
          color: var(--nx-azure);
        }

        .nav-dropdown-trigger .dd-chev {
          font-size: 8px;
          transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
          opacity: 0.35;
          margin-left: 2px;
        }

        .nav-dropdown.is-active .dd-chev {
          transform: rotate(180deg);
          opacity: 1;
          color: var(--nx-azure);
        }

        .nav-dropdown-trigger.parent-active::after {
          content: "";
          position: absolute;
          bottom: -4px;
          left: 50%;
          transform: translateX(-50%);
          width: 20px;
          height: 2px;
          background: var(--nx-azure);
          border-radius: var(--radius-full);
        }

        /* ---------- Stripe morph container ---------- */
        .dd-stripe-bg {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          height: 0;
          pointer-events: none;
          overflow: visible;
          z-index: 1100;
        }

        .dd-stripe-wrapper {
          position: absolute;
          top: 8px;
          left: 0;
          width: 100%;
          pointer-events: none;
        }

        .dd-stripe-card {
          position: absolute;
          background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--dark-secondary) 98%, white) 0%,
            var(--dark-secondary) 100%
          );
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 14px;
          box-shadow:
            0 60px 120px -25px rgba(0, 0, 0, 0.55),
            0 30px 60px -15px rgba(0, 0, 0, 0.35),
            0 0 1px 0 rgba(255, 255, 255, 0.08) inset;
          overflow: hidden;

          /* Morph animation properties.
             Only opacity and transform transition. The earlier rule also
             transitioned width, height and left, which the contract's motion
             rules forbid; the JS still sets those properties, so the panel
             resizes and repositions in one step instead of easing. Nothing
             renders this component today — no #ddStripeCard, .dd-pane or
             .nav-dropdown markup exists since the redesign replaced the nav —
             so the change is not observable. Rebuild it with a FLIP transform
             if the morphing dropdown ever comes back. */
          width: 280px;
          opacity: 0;
          left: 0;
          transform: translateY(-8px) scale(0.97);
          transform-origin: top center;
          transition:
            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
          pointer-events: none;
        }

        .dd-stripe-card.is-visible {
          opacity: 1;
          transform: translateY(0) scale(1);
          pointer-events: auto;
        }

        /* The glow accent at top */
        .dd-stripe-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 20%;
          right: 20%;
          height: 1px;
          background: linear-gradient(
            90deg,
            transparent 0%,
            var(--nx-azure) 50%,
            transparent 100%
          );
          opacity: 0.5;
        }

        /* Top shine gradient */
        .dd-stripe-card::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 80px;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 100%
          );
          pointer-events: none;
        }

        /* ---------- Content panes ---------- */
        .dd-pane {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          padding: 8px;
          opacity: 0;
          transform: translateX(12px);
          transition:
            opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.28s cubic-bezier(0.76, 0, 0.24, 1);
          pointer-events: none;
        }

        .dd-pane.is-active {
          opacity: 1;
          transform: translateX(0);
          pointer-events: auto;
          position: relative;
        }

        /* When switching right-to-left */
        .dd-pane.exit-left {
          opacity: 0;
          transform: translateX(-12px);
        }

        /* ---------- Dropdown links ---------- */
        .dd-link {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 11px 14px;
          color: var(--gray-400);
          font-size: 13.5px;
          font-weight: 500;
          text-decoration: none;
          border-radius: 10px;
          transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
          position: relative;
        }

        .dd-link:hover {
          color: var(--white);
          background: rgba(255, 255, 255, 0.05);
        }

        .dd-link.active {
          color: var(--nx-azure);
        }

        .dd-icon {
          width: 34px;
          height: 34px;
          border-radius: 9px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.06);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          font-size: 13px;
          color: var(--nx-azure);
          transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dd-link:hover .dd-icon {
          background: rgba(114, 51, 247, 0.12);
          border-color: rgba(114, 51, 247, 0.25);
          transform: translateY(-1px) scale(1.06);
          box-shadow: 0 4px 12px rgba(114, 51, 247, 0.15);
        }

        .dd-link-text {
          display: flex;
          flex-direction: column;
          gap: 1px;
        }

        .dd-link-title {
          font-size: 13.5px;
          font-weight: 500;
          color: inherit;
          line-height: 1.3;
        }

        .dd-link-desc {
          font-size: 11px;
          color: var(--text-muted);
          font-weight: 400;
          line-height: 1.3;
          transition: color 0.15s ease;
        }

        .dd-link:hover .dd-link-desc {
          color: var(--gray-500);
        }

        .dd-sep {
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
          margin: 4px 14px;
        }

        /* Staggered entry for each link */
        .dd-pane .dd-link {
          opacity: 0;
          transform: translateY(-6px);
          transition:
            color 0.15s ease,
            background 0.15s ease,
            opacity 0.22s ease,
            transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dd-pane.is-active .dd-link:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.03s; }
        .dd-pane.is-active .dd-link:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.06s; }
        .dd-pane.is-active .dd-link:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.09s; }
        .dd-pane.is-active .dd-link:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
        .dd-pane.is-active .dd-link:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
        .dd-pane.is-active .dd-sep { opacity: 1; transition-delay: 0.09s; }

        .dd-sep {
          opacity: 0;
          transition: opacity 0.2s ease;
        }


        /* =============================================
          MOBILE TOGGLE BUTTON
          ============================================= */
        .mobile-menu-toggle {
          display: none;
          background: transparent;
          border: none;
          color: var(--white);
          font-size: var(--fs-xl);
          cursor: pointer;
          padding: var(--spacing-sm);
        }


        /* =============================================
          MOBILE NAV — GROUPED 2-COL GRID
          ============================================= */
        @media (max-width: 991px) {
          .mobile-menu-toggle {
            display: block;
          }

          /* Full-screen slide-in */
          .main-nav {
            position: fixed;
            top: var(--header-height);
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--dark-primary);
            flex-direction: column;
            padding: 0;
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
            overflow-y: auto;
            z-index: 1090;
            -webkit-overflow-scrolling: touch;
          }

          body.has-announcement .main-nav {
            top: calc(var(--header-height) + var(--announcement-height));
          }

          .main-nav.active {
            transform: translateX(0);
          }

          /* Hide all desktop nav elements */
          .nav-links { display: none !important; }
          .nav-cta { display: none !important; }
          .dd-stripe-bg { display: none !important; }

          /* ===== MOBILE SECTIONS ===== */
          .mobile-nav-sections {
            display: flex;
            flex-direction: column;
            padding: 20px 16px;
            gap: 12px;
          }

          /* Each group card */
          .mob-group {
            background: var(--dark-secondary);
            border: 1px solid var(--dark-border);
            border-radius: 14px;
            overflow: hidden;
          }

          .mob-group-label {
            font-family: var(--nx-font);
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-muted);
            padding: 14px 16px 6px;
          }

          /* 2-column grid inside each group */
          .mob-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: var(--dark-border);
            border-top: 1px solid var(--dark-border);
          }

          .mob-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 20px 12px;
            background: var(--dark-secondary);
            color: var(--gray-400);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            text-align: center;
            transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
          }

          .mob-item:active {
            background: var(--dark-tertiary);
            transform: scale(0.97);
          }

          .mob-item.active {
            color: var(--nx-azure);
            background: color-mix(in srgb, var(--nx-azure) 6%, var(--dark-secondary));
          }

          .mob-item i {
            font-size: 18px;
            color: var(--nx-azure);
            opacity: 0.6;
            transition: opacity 0.2s;
          }

          .mob-item.active i,
          .mob-item:active i {
            opacity: 1;
          }

          /* Standalone full-width links (Home, Contact) */
          .mob-single-link {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 18px;
            color: var(--gray-300);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
            background: var(--dark-secondary);
            border: 1px solid var(--dark-border);
            border-radius: 14px;
          }

          .mob-single-link:active {
            background: var(--dark-tertiary);
            transform: scale(0.98);
          }

          .mob-single-link.active {
            color: var(--nx-azure);
            border-color: color-mix(in srgb, var(--nx-azure) 25%, transparent);
          }

          .mob-single-link i {
            width: 22px;
            text-align: center;
            color: var(--nx-azure);
            font-size: 15px;
            opacity: 0.7;
          }

          /* Mobile CTA */
          .mob-cta-wrap {
            padding: 8px 16px 32px;
          }

          .mob-cta-wrap .btn {
            width: 100%;
            justify-content: center;
          }

          /* Stagger entrance */
          .mobile-nav-sections > * {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
          }

          .main-nav.active .mobile-nav-sections > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.06s; }
          .main-nav.active .mobile-nav-sections > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
          .main-nav.active .mobile-nav-sections > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
          .main-nav.active .mobile-nav-sections > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
        }

        /* Desktop: hide mobile-only elements */
        @media (min-width: 992px) {
          .mobile-nav-sections,
          .mob-cta-wrap {
            display: none !important;
          }
        }
        @media (min-width: 992px) {
          body.has-announcement .main-nav {
            top: calc(var(--header-height) + var(--announcement-height));
          }

          .main-nav.active {
            transform: translateX(0);
          }

          .nav-links {
            /* flex-direction: column; */
            width: 100%;
            gap: var(--spacing-sm);
          }

          .nav-link {
            display: block;
            width: 100%;
            padding: var(--spacing-md);
            font-size: var(--fs-lg);
          }
        }

        /* ============================================================
            BUTTONS
            ============================================================ */
        /* line-height and vertical-align used to come from Bootstrap's .btn and
           are what set the control's height; they are declared here now so the
           button measures the same without it. */
        .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: var(--spacing-sm);
          padding: var(--spacing-sm) var(--spacing-lg);
          font-family: var(--nx-font);
          font-size: var(--fs-sm);
          font-weight: var(--fw-semibold);
          line-height: 1.5;
          vertical-align: middle;
          text-decoration: none;
          border-radius: var(--radius-md);
          border: 2px solid transparent;
          cursor: pointer;
          transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
          white-space: nowrap;
        }

        /* A few of the longest labels ("Resend Verification Email") are wider
           than the column they sit in at 320px, and nowrap pushes them past the
           viewport edge. Let those wrap at the narrowest supported width only —
           every label already fits on one line from 361px up, so nothing above
           this breakpoint changes. */
        @media (max-width: 360px) {
          .btn {
            max-width: 100%;
            white-space: normal;
          }
        }

        .btn:focus {
          outline: none;
          box-shadow: 0 0 0 3px rgba(114, 51, 247, 0.3);
        }

        .btn-primary {
          background: var(--gradient-primary);
          color: var(--white);
          border-color: var(--nx-azure);
        }

        .btn-primary:hover {
          background: var(--nx-azure-deep);
          border-color: var(--nx-azure-deep);
          color: var(--white);
          box-shadow: var(--shadow-accent);
          transform: translateY(-2px);
        }

        .btn-secondary {
          background: transparent;
          color: var(--nx-azure);
          border-color: var(--nx-azure);
        }

        .btn-secondary:hover {
          background: var(--nx-azure);
          border-color: var(--nx-azure);
          color: var(--white);
        }

        .btn-dark {
          background: var(--dark-primary);
          color: var(--white);
          border-color: var(--dark-primary);
        }

        .btn-dark:hover {
          background: var(--dark-secondary);
          border-color: var(--dark-secondary);
          color: var(--white);
        }

        /* The error pages' secondary action carries .btn-outline, for which
           nothing here declared a colour — it was picking up whatever the
           element inherited. Bootstrap's .btn set it to near-black, which on
           the error pages' dark ground rendered the label almost invisible.
           Declaring it makes the colour intentional and independent of whether
           the control is an <a> or a <button>. Border is deliberately left
           alone: these buttons are borderless today. */
        .btn-outline {
          background: transparent;
          color: var(--nx-azure);
        }

        .btn-outline-gold {
          background: transparent;
          color: var(--nx-azure);
          border-color: var(--nx-azure);
        }

        .btn-outline-gold:hover {
          background: var(--nx-azure);
          color: var(--white);
        }

        .btn-outline-light {
          background: transparent;
          color: var(--white);
          border-color: rgba(255, 255, 255, 0.3);
        }

        .btn-outline-light:hover {
          background: var(--white);
          color: var(--dark-primary);
          border-color: var(--white);
        }

        .btn-lg {
          padding: var(--spacing-md) var(--spacing-xl);
          font-size: var(--fs-base);
        }

        .btn-sm {
          padding: var(--spacing-xs) var(--spacing-md);
          font-size: var(--fs-xs);
        }

        .btn-block {
          display: flex;
          width: 100%;
        }

        .btn-icon {
          padding: var(--spacing-sm);
          width: 40px;
          height: 40px;
        }

        /* ============================================================
            FORMS
            ============================================================ */
        .form-group {
          margin-bottom: var(--spacing-lg);
        }

        .form-label {
          display: block;
          margin-bottom: var(--spacing-sm);
          font-size: var(--fs-sm);
          font-weight: var(--fw-medium);
          color: var(--gray-700);
        }

        .form-label.required::after {
          content: " *";
          color: var(--danger);
        }

        /* display, line-height and appearance came from Bootstrap's .form-control
           and are what give the field its height; declared here now. */
        .form-control,
        .form-input,
        .form-select,
        .form-textarea {
          display: block;
          width: 100%;
          padding: var(--spacing-sm) var(--spacing-md);
          font-family: var(--nx-font);
          font-size: var(--fs-base);
          line-height: 1.5;
          color: var(--gray-800);
          background: var(--white);
          appearance: none;
          border: 1px solid var(--gray-300);
          border-radius: var(--radius-md);
          transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
        }

        /* Bootstrap was the only thing setting a placeholder colour on these
           fields; without a rule here the browser default applies, which
           differs between engines. Pinned to the neutral ramp so every browser
           agrees and the value is a token rather than a UA accident. */
        .form-control::placeholder,
        .form-input::placeholder,
        .form-textarea::placeholder {
          color: var(--gray-700);
          opacity: 1;
        }

        .form-control:focus,
        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
          outline: none;
          border-color: var(--nx-azure);
          box-shadow: 0 0 0 3px rgba(114, 51, 247, 0.15);
        }

        .form-control.is-invalid,
        .form-input.is-invalid {
          border-color: var(--danger);
        }

        .form-control.is-invalid:focus {
          box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.15);
        }

        .form-textarea {
          min-height: 120px;
          resize: vertical;
        }

        .form-help {
          display: block;
          margin-top: var(--spacing-xs);
          font-size: var(--fs-xs);
          color: var(--gray-500);
        }

        .form-error,
        .invalid-feedback {
          display: block;
          margin-top: var(--spacing-xs);
          font-size: var(--fs-xs);
          color: var(--danger);
        }

        /* Checkbox row — the sign-in "remember me" control. Bootstrap's float
           and negative margin are kept verbatim rather than rebuilt as flex,
           because that is what positions the box and the label relative to each
           other and the two are one pixel-comparison away from the old build. */
        .form-check {
          display: block;
          min-height: 1.5rem;
          padding-left: 1.5em;
          margin-bottom: 0.125rem;
        }

        /* Drawn rather than native, matching the box Bootstrap used to render
           here so the sign-in form is pixel-identical: 1em square, hairline
           border, 0.25em radius, azure with a white tick once checked. */
        .form-check-input {
          float: left;
          appearance: none;
          -webkit-appearance: none;
          width: 1em;
          height: 1em;
          margin-top: 0.25em;
          margin-left: -1.5em;
          vertical-align: top;
          background: var(--white) no-repeat center/0.7em auto;
          border: 1px solid var(--gray-300);
          border-radius: 0.25em;
          cursor: pointer;
          print-color-adjust: exact;
        }

        .form-check-input[type="radio"] {
          border-radius: 50%;
        }

        .form-check-input:checked {
          background-color: var(--primary-accent);
          border-color: var(--primary-accent);
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        }

        .form-check-input:focus-visible {
          outline: 2px solid var(--primary-accent);
          outline-offset: 2px;
        }

        .form-check-label {
          margin: 0;
          color: var(--gray-700);
          cursor: pointer;
        }

        .custom-select-wrapper {
          position: relative;
        }

        /* Chevron drawn from two borders rather than a Font Awesome glyph, so
           the select needs no icon font. Rotated 45deg, then nudged up by half
           its own height to sit optically centred. */
        .custom-select-wrapper::after {
          content: "";
          position: absolute;
          right: var(--spacing-md);
          top: 50%;
          width: 0.5em;
          height: 0.5em;
          border-right: 2px solid var(--gray-500);
          border-bottom: 2px solid var(--gray-500);
          transform: translateY(-70%) rotate(45deg);
          pointer-events: none;
        }

        .custom-select-wrapper .form-select {
          appearance: none;
          padding-right: var(--spacing-2xl);
        }

        /* File Drop Zone */
        .file-drop-zone {
          position: relative;
          padding: var(--spacing-2xl);
          border: 2px dashed var(--gray-300);
          border-radius: var(--radius-lg);
          text-align: center;
          cursor: pointer;
          transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
          background: var(--gray-50);
        }

        .file-drop-zone:hover,
        .file-drop-zone.dragover {
          border-color: var(--nx-azure);
          background: var(--primary-accent-surface);
        }

        .file-drop-zone input[type="file"] {
          position: absolute;
          inset: 0;
          opacity: 0;
          cursor: pointer;
        }

        .file-drop-zone-icon {
          font-size: var(--fs-4xl);
          color: var(--nx-azure);
          margin-bottom: var(--spacing-md);
        }

        .file-drop-zone-text {
          font-size: var(--fs-base);
          color: var(--gray-700);
          margin-bottom: var(--spacing-xs);
        }

        .file-drop-zone-hint {
          font-size: var(--fs-xs);
          color: var(--gray-500);
        }

        /* ============================================================
            CARDS
            ============================================================ */
        .card {
          background: var(--white);
          border-radius: var(--radius-xl);
          box-shadow: var(--shadow-md);
          border: 1px solid var(--gray-200);
          overflow: hidden;
          transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
        }

        .card:hover {
          box-shadow: var(--shadow-lg);
          transform: translateY(-4px);
        }

        .card-header {
          padding: var(--spacing-lg);
          border-bottom: 1px solid var(--gray-200);
          background: var(--gray-50);
        }

        .card-body {
          padding: var(--spacing-lg);
        }

        .card-footer {
          padding: var(--spacing-lg);
          border-top: 1px solid var(--gray-200);
          background: var(--gray-50);
        }

        .card-title {
          font-size: var(--fs-xl);
          margin-bottom: var(--spacing-sm);
        }

        /* Dark Card Variant */
        .card-dark {
          background: var(--dark-secondary);
          border-color: var(--dark-border);
          color: var(--white);
        }

        .card-dark .card-header {
          background: var(--dark-primary);
          border-color: var(--dark-border);
        }

        .card-dark .card-title {
          color: var(--white);
        }

        .card-dark p {
          color: var(--gray-400);
        }

        /* Feature Card */
        .feature-card {
          background: var(--white);
          padding: var(--spacing-xl);
          border-radius: var(--radius-xl);
          text-align: center;
          transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
          border: 1px solid var(--gray-200);
        }

        .feature-card:hover {
          transform: translateY(-8px);
          box-shadow: var(--shadow-xl);
          border-color: var(--nx-azure);
        }

        .feature-icon {
          width: 70px;
          height: 70px;
          background: var(--gradient-primary);
          border-radius: var(--radius-lg);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto var(--spacing-lg);
          font-size: var(--fs-2xl);
          color: var(--white);
        }

        .feature-card:hover .feature-icon {
          box-shadow: var(--shadow-accent);
        }

        /* ============================================================
            BADGES
            ============================================================ */
        .badge {
          display: inline-flex;
          align-items: center;
          padding: var(--spacing-xs) var(--spacing-sm);
          font-size: var(--fs-xs);
          font-weight: var(--fw-semibold);
          border-radius: var(--radius-full);
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .badge-primary {
          background: var(--primary-accent-surface);
          color: var(--primary-accent-on-surface);
        }

        .badge-success {
          background: rgba(199, 173, 252, 0.15);
          color: var(--success-dark);
        }

        .badge-warning {
          background: rgba(255, 174, 45, 0.15);
          color: var(--warning-dark);
        }

        .badge-danger {
          background: rgba(244, 67, 54, 0.15);
          color: var(--danger-dark);
        }

        .badge-info {
          background: rgba(114, 51, 247, 0.15);
          color: var(--info-dark);
        }

        .badge-dark {
          background: var(--dark-primary);
          color: var(--white);
        }

        .badge-gold {
          background: var(--gradient-primary);
          color: var(--white);
        }

        /* ============================================================
            ALERTS
            ============================================================ */
        .alert {
          padding: var(--spacing-md) var(--spacing-lg);
          border-radius: var(--radius-md);
          margin-bottom: var(--spacing-lg);
          display: flex;
          align-items: flex-start;
          gap: var(--spacing-md);
        }

        .alert i {
          font-size: var(--fs-lg);
          margin-top: 2px;
        }

        .alert-success {
          background: rgba(199, 173, 252, 0.1);
          border-left: 4px solid var(--success);
          color: var(--success-dark);
        }

        .alert-warning {
          background: rgba(255, 174, 45, 0.1);
          border-left: 4px solid var(--warning);
          color: var(--warning-dark);
        }

        .alert-danger {
          background: rgba(244, 67, 54, 0.1);
          border-left: 4px solid var(--danger);
          color: var(--danger-dark);
        }

        .alert-info {
          background: rgba(114, 51, 247, 0.1);
          border-left: 4px solid var(--info);
          color: var(--info-dark);
        }

        .alert-gold {
          background: var(--primary-accent-surface);
          border-left: 4px solid var(--nx-azure);
          color: var(--primary-accent-on-surface);
        }

        /* ============================================================
            SECTIONS
            ============================================================ */
        .section {
          padding: var(--spacing-4xl) 0;
        }

        .section-dark {
          background: var(--dark-primary);
          color: var(--white);
        }

        .section-dark h1,
        .section-dark h2,
        .section-dark h3 {
          color: var(--white);
        }

        .section-dark p {
          color: var(--gray-400);
        }

        .section-gold {
          background: var(--gradient-primary);
          color: var(--white);
        }

        .section-light {
          background: var(--nx-navy-deep);
        }

        .section-header {
          text-align: center;
          max-width: 800px;
          margin: 0 auto var(--spacing-3xl);
        }

        .section-title {
          font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
          margin-bottom: var(--spacing-md);
        }

        .section-title-gold {
          background: var(--gradient-primary);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .section-subtitle {
          font-size: var(--fs-lg);
          color: var(--gray-600);
          max-width: 600px;
          margin: 0 auto;
        }

        .section-dark .section-subtitle {
          color: var(--gray-400);
        }

        /* Gold accent line */
        .gold-line {
          width: 60px;
          height: 4px;
          background: var(--gradient-primary);
          border-radius: var(--radius-full);
          margin: var(--spacing-md) auto;
        }

        /* ============================================================
            FOOTER — Premium semiconductor-grade layout
            ============================================================ */
        .nx-footer {
          --nx-ft-ease: cubic-bezier(0.16, 1, 0.3, 1);
          --nx-ft-border: color-mix(in srgb, var(--nx-azure) 18%, var(--dark-border));
          --nx-ft-glow: color-mix(in srgb, var(--nx-azure) 22%, transparent);
          --nx-ft-surface: color-mix(in srgb, var(--dark-secondary) 55%, var(--dark-primary));
          position: relative;
          isolation: isolate;
          overflow: hidden;
          background: var(--dark-primary);
          color: var(--gray-400);
          padding: 0 0 40px;
          margin-top: auto;
        }

        .footer-container {
          max-width: var(--container-max-width);
          margin: 0 auto;
          padding: 0 var(--spacing-lg);
        }

        /* PCB trace divider */
        .nx-footer__trace-bar {
          position: relative;
          height: 3px;
          background: linear-gradient(
            90deg,
            transparent,
            color-mix(in srgb, var(--nx-azure) 35%, transparent) 18%,
            color-mix(in srgb, var(--nx-azure) 55%, transparent) 50%,
            color-mix(in srgb, var(--nx-azure) 35%, transparent) 82%,
            transparent
          );
          overflow: hidden;
        }

        .nx-footer__trace-bar::before {
          content: "";
          position: absolute;
          inset: 0;
          background: repeating-linear-gradient(
            90deg,
            transparent 0 14px,
            color-mix(in srgb, var(--nx-azure) 25%, transparent) 14px 15px
          );
          opacity: 0.45;
        }

        .nx-footer__trace-pulse {
          position: absolute;
          top: 50%;
          width: 80px;
          height: 2px;
          transform: translateY(-50%);
          background: linear-gradient(
            90deg,
            transparent,
            var(--nx-azure),
            color-mix(in srgb, var(--nx-azure) 70%, #fff),
            var(--nx-azure),
            transparent
          );
          box-shadow: 0 0 16px var(--nx-ft-glow);
          animation: nxFooterPulse 4.5s linear infinite;
        }

        .nx-footer__trace-pulse--alt {
          animation-delay: -2.2s;
          animation-duration: 6s;
          opacity: 0.65;
        }

        @keyframes nxFooterPulse {
          0% { transform: translateX(-90px); opacity: 0; }
          8% { opacity: 1; }
          92% { opacity: 1; }
          100% { transform: translateX(calc(100vw + 90px)); opacity: 0; }
        }

        /* Immersive background */
        .nx-footer__bg {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 0;
        }

        .nx-footer__wafer {
          position: absolute;
          inset: 0;
          opacity: 0.35;
          background-image:
            radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--nx-azure) 8%, transparent) 0%, transparent 42%),
            linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
          background-size: 100% 100%, 72px 72px, 72px 72px;
          -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 20%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 95% 85% at 50% 20%, #000 25%, transparent 78%);
        }

        .nx-footer__circuit {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          opacity: 0.55;
        }

        .nx-footer__glow {
          position: absolute;
          top: 8%;
          left: 50%;
          width: min(920px, 90vw);
          height: 420px;
          transform: translateX(-50%);
          background: radial-gradient(
            ellipse at center,
            color-mix(in srgb, var(--nx-azure) 11%, transparent) 0%,
            transparent 68%
          );
          filter: blur(40px);
        }

        .nx-footer__particles span {
          position: absolute;
          width: 3px;
          height: 3px;
          border-radius: 50%;
          background: color-mix(in srgb, var(--nx-azure) 70%, #fff);
          box-shadow: 0 0 10px var(--nx-ft-glow);
          animation: nxFooterFloat 8s ease-in-out infinite;
        }

        .nx-footer__particles span:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
        .nx-footer__particles span:nth-child(2) { top: 34%; left: 78%; animation-delay: -1.4s; }
        .nx-footer__particles span:nth-child(3) { top: 62%; left: 22%; animation-delay: -2.8s; }
        .nx-footer__particles span:nth-child(4) { top: 48%; left: 56%; animation-delay: -0.8s; }
        .nx-footer__particles span:nth-child(5) { top: 72%; left: 84%; animation-delay: -3.6s; }
        .nx-footer__particles span:nth-child(6) { top: 28%; left: 44%; animation-delay: -2.1s; }

        @keyframes nxFooterFloat {
          0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.35; }
          50% { transform: translate3d(0, -14px, 0); opacity: 0.85; }
        }

        .nx-footer__inner {
          position: relative;
          z-index: 1;
          padding: 96px 0 0;
        }

        .nx-footer__main {
          display: grid;
          grid-template-columns: minmax(280px, 1.55fr) repeat(4, minmax(130px, 1fr));
          gap: clamp(32px, 4vw, 56px);
          margin-bottom: 72px;
        }

        .nx-footer-brand__logo {
          display: inline-flex;
          margin-bottom: 28px;
        }

        .nx-footer-brand__logo img {
          height: 34px;
          width: auto;
        }

        .nx-footer-brand__desc {
          color: var(--nx-text-muted);
          font-size: 14.5px;
          line-height: 1.75;
          max-width: 38ch;
          margin: 0 0 28px;
        }

        .nx-footer-meta {
          list-style: none;
          padding: 0;
          margin: 0 0 32px;
          display: grid;
          gap: 14px;
        }

        .nx-footer-meta li {
          display: grid;
          grid-template-columns: 118px 1fr;
          gap: 12px;
          align-items: start;
          font-size: 13px;
          line-height: 1.5;
        }

        .nx-footer-meta__label {
          color: var(--nx-azure);
          font-family: var(--nx-font);
          font-size: 10px;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          padding-top: 2px;
        }

        .nx-footer-meta__value {
          color: var(--nx-text-body);
        }

        .nx-footer-meta a {
          color: var(--nx-text-body);
          transition: color 0.3s var(--nx-ft-ease);
        }

        .nx-footer-meta a:hover {
          color: var(--nx-azure);
        }

        .nx-footer-social {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
        }

        .nx-footer-social__btn {
          --nx-social-size: 46px;
          position: relative;
          width: var(--nx-social-size);
          height: var(--nx-social-size);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 12px;
          color: var(--nx-text-body);
          background: var(--nx-ft-surface);
          border: 1px solid var(--nx-ft-border);
          transition:
            transform 0.4s var(--nx-ft-ease),
            color 0.35s var(--nx-ft-ease),
            box-shadow 0.35s var(--nx-ft-ease),
            border-color 0.35s var(--nx-ft-ease);
          overflow: hidden;
        }

        .nx-footer-social__btn::before {
          content: "";
          position: absolute;
          inset: -1px;
          border-radius: inherit;
          padding: 1px;
          background: linear-gradient(
            135deg,
            transparent 30%,
            color-mix(in srgb, var(--nx-azure) 80%, #fff) 50%,
            transparent 70%
          );
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          opacity: 0;
          transition: opacity 0.35s var(--nx-ft-ease);
        }

        .nx-footer-social__btn i {
          font-size: 17px;
          transition: transform 0.35s var(--nx-ft-ease);
        }

        .nx-footer-social__btn:hover,
        .nx-footer-social__btn:focus-visible {
          color: #fff;
          transform: translateY(-4px) scale(1.06);
          border-color: color-mix(in srgb, var(--nx-azure) 55%, transparent);
          box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.35),
            0 0 24px var(--nx-ft-glow);
        }

        .nx-footer-social__btn:hover::before,
        .nx-footer-social__btn:focus-visible::before {
          opacity: 1;
        }

        .nx-footer-social__btn:hover i,
        .nx-footer-social__btn:focus-visible i {
          transform: scale(1.12);
        }

        .nx-footer-col__title {
          color: var(--nx-text);
          font-family: var(--nx-font);
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          margin: 0 0 22px;
          padding-bottom: 12px;
          border-bottom: 1px solid var(--dark-border);
        }

        .nx-footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
          display: grid;
          gap: 12px;
        }

        .nx-footer-link {
          position: relative;
          display: inline-block;
          color: var(--nx-text-muted);
          font-size: 13.5px;
          line-height: 1.45;
          transition: color 0.3s var(--nx-ft-ease);
        }

        .nx-footer-link::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -3px;
          width: 100%;
          height: 1px;
          background: linear-gradient(90deg, var(--nx-azure), color-mix(in srgb, var(--nx-azure) 40%, transparent));
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 0.35s var(--nx-ft-ease);
        }

        .nx-footer-link:hover,
        .nx-footer-link:focus-visible {
          color: var(--nx-text);
        }

        .nx-footer-link:hover::after,
        .nx-footer-link:focus-visible::after {
          transform: scaleX(1);
        }

        /* Newsletter */
        .nx-footer__newsletter {
          padding: 36px 40px;
          margin-bottom: 56px;
          border: 1px solid var(--nx-ft-border);
          border-radius: 16px;
          background:
            linear-gradient(135deg, color-mix(in srgb, var(--nx-azure) 5%, transparent), transparent 55%),
            var(--nx-ft-surface);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .nx-footer__newsletter-grid {
          display: grid;
          grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.2fr);
          gap: 32px;
          align-items: center;
        }

        .nx-footer__newsletter-title {
          color: var(--nx-text);
          font-family: var(--nx-font);
          font-size: clamp(22px, 2.5vw, 28px);
          font-weight: 500;
          margin: 0 0 10px;
        }

        .nx-footer__newsletter-desc {
          margin: 0;
          color: var(--nx-text-muted);
          font-size: 14px;
          line-height: 1.65;
          max-width: 52ch;
        }

        .nx-footer__newsletter-form {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
        }

        .nx-footer__newsletter-input {
          flex: 1 1 220px;
          min-height: 52px;
          padding: 0 18px;
          border-radius: 12px;
          border: 1px solid var(--dark-border);
          background: color-mix(in srgb, var(--dark-primary) 80%, transparent);
          color: var(--nx-text);
          font-size: 14px;
          transition:
            border-color 0.3s var(--nx-ft-ease),
            box-shadow 0.3s var(--nx-ft-ease);
        }

        .nx-footer__newsletter-input::placeholder {
          color: var(--nx-text-faint);
        }

        .nx-footer__newsletter-input:focus {
          outline: none;
          border-color: color-mix(in srgb, var(--nx-azure) 55%, transparent);
          box-shadow:
            0 0 0 3px color-mix(in srgb, var(--nx-azure) 18%, transparent),
            0 0 28px var(--nx-ft-glow);
        }

        .nx-footer__newsletter-btn {
          position: relative;
          min-height: 52px;
          padding: 0 28px;
          border: none;
          border-radius: 12px;
          cursor: pointer;
          color: #fff;
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          background: linear-gradient(135deg, var(--nx-azure), var(--nx-azure-deep));
          overflow: hidden;
          transition:
            transform 0.35s var(--nx-ft-ease),
            box-shadow 0.35s var(--nx-ft-ease);
        }

        .nx-footer__newsletter-btn::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
          transform: translateX(-120%);
          transition: transform 0.6s var(--nx-ft-ease);
        }

        .nx-footer__newsletter-btn:hover,
        .nx-footer__newsletter-btn:focus-visible {
          transform: translateY(-2px);
          box-shadow: 0 12px 32px color-mix(in srgb, var(--nx-azure) 35%, transparent);
        }

        .nx-footer__newsletter-btn:hover::after,
        .nx-footer__newsletter-btn:focus-visible::after {
          transform: translateX(120%);
        }

        /* Trust bar */
        .nx-footer__trust {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          justify-content: center;
          margin-bottom: 48px;
          padding: 0 8px;
        }

        .nx-footer-trust__chip {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 11px 16px;
          border-radius: 999px;
          border: 1px solid var(--dark-border);
          background: color-mix(in srgb, var(--dark-secondary) 65%, transparent);
          color: var(--nx-text-body);
          font-size: 12px;
          letter-spacing: 0.02em;
          transition:
            transform 0.35s var(--nx-ft-ease),
            border-color 0.35s var(--nx-ft-ease),
            color 0.35s var(--nx-ft-ease),
            box-shadow 0.35s var(--nx-ft-ease);
        }

        .nx-footer-trust__chip i {
          color: var(--nx-azure);
          font-size: 13px;
          transition: transform 0.35s var(--nx-ft-ease);
        }

        .nx-footer-trust__chip:hover {
          transform: translateY(-3px);
          border-color: var(--nx-ft-border);
          color: var(--nx-text);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        }

        .nx-footer-trust__chip:hover i {
          transform: scale(1.15) rotate(-4deg);
        }

        /* Bottom bar */
        .nx-footer__bottom {
          padding-top: 28px;
          border-top: 1px solid var(--dark-border);
        }

        .nx-footer__bottom-rule {
          height: 1px;
          margin-bottom: 28px;
          background: linear-gradient(
            90deg,
            transparent,
            color-mix(in srgb, var(--nx-azure) 35%, transparent) 20%,
            color-mix(in srgb, var(--nx-azure) 35%, transparent) 80%,
            transparent
          );
          opacity: 0.7;
        }

        .nx-footer__bottom-grid {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
        }

        .nx-footer__copyright {
          margin: 0;
          color: var(--nx-text-faint);
          font-size: 13px;
          line-height: 1.6;
        }

        .nx-footer__copyright strong {
          display: block;
          color: var(--nx-text-body);
          font-weight: 500;
          margin-bottom: 4px;
        }

        .nx-footer__legal {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;
          gap: 8px 20px;
        }

        .nx-footer__legal a {
          color: var(--nx-text-faint);
          font-size: 12.5px;
          transition: color 0.3s var(--nx-ft-ease);
        }

        .nx-footer__legal a:hover,
        .nx-footer__legal a:focus-visible {
          color: var(--nx-azure);
        }

        .nx-footer__precision {
          flex-basis: 100%;
          width: 100%;
          text-align: center;
          margin-top: 8px;
          color: var(--nx-text-faint);
          font-size: 11.5px;
          letter-spacing: 0.04em;
        }

        @media (max-width: 1199px) {
          .nx-footer__main {
            grid-template-columns: repeat(3, minmax(0, 1fr));
          }

          .nx-footer-brand {
            grid-column: 1 / -1;
          }
        }

        @media (max-width: 991px) {
          .nx-footer__inner { padding-top: 72px; }
          .nx-footer__main {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 40px 32px;
            margin-bottom: 56px;
          }
          .nx-footer__newsletter { padding: 28px 24px; }
          .nx-footer__newsletter-grid { grid-template-columns: 1fr; }
          .nx-footer__bottom-grid {
            flex-direction: column;
            text-align: center;
          }
          .nx-footer__legal { justify-content: center; }
        }

        @media (max-width: 575px) {
          .nx-footer__main { grid-template-columns: 1fr; }
          .nx-footer-meta li { grid-template-columns: 1fr; gap: 4px; }
          .nx-footer__newsletter-form { flex-direction: column; }
          .nx-footer__newsletter-btn { width: 100%; }
          .nx-footer__trust { justify-content: flex-start; }
        }

        @media (prefers-reduced-motion: reduce) {
          .nx-footer__trace-pulse,
          .nx-footer__particles span,
          .nx-footer-social__btn,
          .nx-footer-link,
          .nx-footer-trust__chip,
          .nx-footer__newsletter-btn {
            animation: none !important;
            transition: none !important;
          }
        }

        /* ============================================================
            NELIX DESIGN SYSTEM (nx-*) — shared page components
            Premium semiconductor aesthetic. Used by all public pages.
            ============================================================ */
        .nx-page {
          font-family: var(--nx-font);
          background: var(--nx-abyss);
          color: var(--nx-text);
          overflow-x: clip;
        }

        .nx-page h1, .nx-page h2, .nx-page h3, .nx-page h4 {
          font-family: var(--nx-font);
          color: var(--nx-text);
        }

        .nx-mono { font-family: var(--nx-font); }

        /* ---------- Sections ---------- */
        .nx-section {
          padding: 140px 0;
          border-top: 1px solid var(--dark-border);
          position: relative;
        }

        .nx-section--alt { background: var(--nx-navy-deep); }
        .nx-section--flush { padding-top: 96px; }

        /* Die-grid backdrop */
        .nx-grid::after {
          content: '';
          position: absolute;
          inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
          background-size: 64px 64px;
          -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 75%);
          pointer-events: none;
          z-index: 0;
        }

        .nx-section > .container { position: relative; z-index: 1; }

        /* ---------- Page hero ---------- */
        .nx-hero {
          position: relative;
          padding: 150px 0 110px;
          overflow: hidden;
        }

        .nx-hero::before {
          content: '';
          position: absolute;
          inset: 0;
          background:
            radial-gradient(ellipse 55% 45% at 75% 20%, var(--nx-glow-a18) 0%, transparent 55%),
            radial-gradient(ellipse 40% 35% at 10% 100%, var(--nx-glow-a06) 0%, transparent 60%);
          pointer-events: none;
        }

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

        /* ---------- Typography ---------- */
        .nx-label {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          font-family: var(--nx-font);
          font-size: 11px;
          font-weight: 500;
          letter-spacing: 2.5px;
          text-transform: uppercase;
          color: var(--nx-azure);
          margin-bottom: 20px;
        }

        .nx-label::before {
          content: '';
          width: 28px;
          height: 1px;
          background: var(--nx-azure);
          opacity: 0.6;
        }

        .nx-label--center::before { display: none; }

        .nx-title {
          font-size: clamp(32px, 4.4vw, 52px);
          font-weight: 500;
          letter-spacing: -0.03em;
          line-height: 1.08;
          color: var(--nx-text);
          max-width: 760px;
          margin-bottom: 0;
        }

        .nx-title--hero { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.03; }

        .nx-title span, .nx-gradient-text {
          background: linear-gradient(105deg, var(--nx-azure) 20%, var(--nx-azure-soft) 80%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
        }

        .nx-lead {
          font-size: 17.5px;
          color: var(--nx-text-muted);
          line-height: 1.8;
          max-width: 640px;
          margin: 24px 0 0;
        }

        .nx-head { margin-bottom: 72px; }
        .nx-head--center { text-align: center; }
        .nx-head--center .nx-label { justify-content: center; }
        .nx-head--center .nx-label::before { display: none; }
        .nx-head--center .nx-title, .nx-head--center .nx-lead { margin-left: auto; margin-right: auto; }

        /* ---------- Buttons ---------- */
        .nx-btn,
        .nx-btn-ghost {
          position: relative;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-family: var(--nx-font);
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          padding: 17px 30px;
          text-decoration: none;
          transition: color 0.25s var(--nx-ease), background-color 0.25s var(--nx-ease), border-color 0.25s var(--nx-ease), opacity 0.25s var(--nx-ease), transform 0.25s var(--nx-ease), box-shadow 0.25s var(--nx-ease);
          cursor: pointer;
          white-space: nowrap;
          border: 1px solid var(--nx-azure);
        }

        .nx-btn {
          background: var(--nx-azure);
          color: var(--dark-primary);
        }

        .nx-btn::after {
          content: '\2192';
          transition: transform 0.25s var(--nx-ease);
        }

        .nx-btn:hover {
          background: transparent;
          color: var(--nx-azure);
          box-shadow: 0 0 28px var(--nx-glow-a18), inset 0 0 14px var(--nx-glow-a06);
        }

        .nx-btn:hover::after { transform: translateX(4px); }

        .nx-btn-ghost {
          background: transparent;
          color: var(--nx-text);
          border-color: var(--nx-line-strong);
        }

        .nx-btn-ghost:hover {
          border-color: var(--nx-azure);
          color: var(--nx-azure);
          background: var(--nx-glow-a06);
        }

        /* ---------- Cards — engineering panel system ---------- */
        .nx-card {
          position: relative;
          background:
            linear-gradient(165deg, color-mix(in srgb, var(--dark-secondary) 94%, white) 0%, var(--dark-secondary) 42%, color-mix(in srgb, var(--dark-primary) 35%, var(--dark-secondary)) 100%);
          border: 1px solid var(--dark-border);
          display: flex;
          flex-direction: column;
          overflow: hidden;
          isolation: isolate;
          transition: transform 0.45s var(--nx-ease), box-shadow 0.45s var(--nx-ease), border-color 0.45s var(--nx-ease);
          box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-azure) 18%, transparent);
        }

        .nx-card::before {
          content: '';
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 3;
          opacity: 0.45;
          transition: opacity 0.45s var(--nx-ease);
          background:
            linear-gradient(var(--nx-azure), var(--nx-azure)) top left / 14px 1px no-repeat,
            linear-gradient(var(--nx-azure), var(--nx-azure)) top left / 1px 14px no-repeat,
            linear-gradient(var(--nx-azure), var(--nx-azure)) bottom right / 14px 1px no-repeat,
            linear-gradient(var(--nx-azure), var(--nx-azure)) bottom right / 1px 14px no-repeat;
        }

        .nx-card::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--nx-azure), color-mix(in srgb, var(--nx-azure) 25%, transparent) 55%, transparent);
          transform: scaleX(0.35);
          transform-origin: left;
          transition: transform 0.45s var(--nx-ease);
          z-index: 4;
        }

        .nx-card:hover {
          transform: translateY(-5px);
          border-color: color-mix(in srgb, var(--nx-azure) 42%, var(--dark-border));
          box-shadow:
            0 28px 56px rgba(0, 0, 0, 0.42),
            0 0 0 1px var(--nx-glow-a06),
            inset 0 1px 0 color-mix(in srgb, var(--nx-azure) 35%, transparent);
        }

        .nx-card:hover::before { opacity: 0.85; }
        .nx-card:hover::after { transform: scaleX(1); }

        .nx-card-body {
          position: relative;
          z-index: 2;
          padding: 34px 30px 28px;
          flex: 1;
          display: flex;
          flex-direction: column;
          min-width: 0;
        }

        .nx-card h3,
        .nx-card-title {
          font-size: clamp(17px, 1.6vw, 20px);
          font-weight: 500;
          letter-spacing: -0.02em;
          color: var(--nx-text);
          margin-bottom: 12px;
          line-height: 1.35;
        }

        .nx-card-title a {
          color: inherit;
          text-decoration: none;
          transition: color 0.25s var(--nx-ease);
        }

        .nx-card-title a:hover { color: var(--nx-azure); }

        .nx-card p,
        .nx-card-excerpt {
          font-size: 14.5px;
          color: var(--nx-text-muted);
          line-height: 1.7;
          margin-bottom: 0;
        }

        .nx-card-excerpt {
          flex: 1;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 18px;
        }

        .nx-card-meta {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 10px;
          margin-bottom: 14px;
          font-family: var(--nx-font);
          font-size: 10px;
          letter-spacing: 1.4px;
          text-transform: uppercase;
          color: var(--nx-azure);
        }

        .nx-card-meta span[data-muted] {
          color: var(--nx-text-faint);
        }

        .nx-card-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          margin-top: auto;
          padding-top: 18px;
          border-top: 1px solid var(--dark-border);
        }

        .nx-card-action {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-family: var(--nx-font);
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          text-decoration: none;
          color: var(--nx-azure);
          /* The 4px nudge on hover is done by translateX on the child span/i
             below. Widening `gap` as well animated a layout property to produce
             the same movement twice. */
          transition: color 0.25s var(--nx-ease);
        }

        .nx-card-action span,
        .nx-card-action i {
          transition: transform 0.25s var(--nx-ease);
        }

        .nx-card-action:hover {
          color: color-mix(in srgb, var(--nx-azure) 85%, white);
        }

        .nx-card-action:hover span,
        .nx-card-action:hover i { transform: translateX(4px); }

        /* Media cards (blog, resources, related articles) */
        .nx-card--media .nx-card-media,
        .nx-card--media .res-card-media,
        .nx-card--media .related-card-media,
        .nx-card--media .blog-image-nelix {
          display: block;
          position: relative;
          height: 210px;
          overflow: hidden;
          border-bottom: 1px solid var(--dark-border);
          background: var(--dark-primary);
          flex-shrink: 0;
        }

        .nx-card--media .nx-card-media::before,
        .nx-card--media .res-card-media::before,
        .nx-card--media .related-card-media::before,
        .nx-card--media .blog-image-nelix::before {
          content: '';
          position: absolute;
          inset: 0;
          z-index: 1;
          pointer-events: none;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 38%, transparent 62%, rgba(0, 0, 0, 0.55) 100%);
          transition: opacity 0.45s var(--nx-ease);
        }

        .nx-card--media .nx-card-media img,
        .nx-card--media .res-card-media img,
        .nx-card--media .related-card-media img,
        .nx-card--media .blog-image-nelix img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: saturate(0.88) contrast(1.02);
          transition: transform 0.65s var(--nx-ease), filter 0.45s var(--nx-ease);
        }

        .nx-card--media:hover .nx-card-media img,
        .nx-card--media:hover .res-card-media img,
        .nx-card--media:hover .related-card-media img,
        .nx-card--media:hover .blog-image-nelix img {
          transform: scale(1.05);
          filter: saturate(1) contrast(1.04);
        }

        .nx-card--media .nx-card-media .nx-tag--accent,
        .nx-card--media .res-card-media .nx-tag--accent {
          position: absolute;
          top: 14px;
          left: 14px;
          z-index: 2;
          background: color-mix(in srgb, var(--dark-primary) 88%, transparent);
          backdrop-filter: blur(8px);
        }

        .nx-card--media .res-card-media .res-card-placeholder,
        .nx-card--media .related-card-media .placeholder-icon {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--nx-azure);
          opacity: 0.35;
          font-size: 2rem;
          background:
            radial-gradient(circle at 50% 45%, var(--nx-glow-a06) 0%, transparent 70%),
            var(--dark-primary);
        }

        .nx-card--media .res-card-placeholder i,
        .nx-card--media .related-card-media .placeholder-icon i,
        .nx-card--media .blog-image-nelix > i {
          position: static;
          inset: auto;
          background: none;
          opacity: 1;
          font-size: inherit;
        }

        .nx-icon-box {
          position: relative;
          width: 48px;
          height: 48px;
          border: 1px solid color-mix(in srgb, var(--nx-azure) 35%, var(--nx-line-strong));
          background:
            radial-gradient(circle at 35% 30%, var(--nx-glow-a06) 0%, transparent 58%),
            color-mix(in srgb, var(--dark-primary) 55%, transparent);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 24px;
          color: var(--nx-azure);
          font-size: 18px;
          flex-shrink: 0;
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-azure) 8%, transparent);
          transition: background 0.45s var(--nx-ease), color 0.45s var(--nx-ease), border-color 0.45s var(--nx-ease), box-shadow 0.45s var(--nx-ease);
        }

        .nx-card:hover .nx-icon-box,
        .nx-card--elevated:hover .nx-icon-box {
          background: var(--nx-azure);
          color: var(--dark-primary);
          border-color: var(--nx-azure);
          box-shadow: 0 0 22px color-mix(in srgb, var(--nx-azure) 35%, transparent);
        }

        .nx-card--elevated .nx-icon-box::before {
          content: '';
          position: absolute;
          inset: -8px;
          border: 1px dashed color-mix(in srgb, var(--nx-azure) 22%, transparent);
          opacity: 0;
          transition: opacity 0.45s var(--nx-ease);
          pointer-events: none;
        }

        .nx-card--elevated:hover .nx-icon-box::before {
          opacity: 1;
          animation: nxIconRingSpin 14s linear infinite;
        }

        @keyframes nxIconRingSpin {
          to { transform: rotate(360deg); }
        }

        /* Elevated cards — watermark index, glow, signal-style lists */
        .nx-card--elevated {
          background:
            linear-gradient(168deg, color-mix(in srgb, var(--dark-secondary) 96%, white) 0%, var(--dark-secondary) 50%, color-mix(in srgb, var(--dark-primary) 72%, var(--dark-secondary)) 100%);
        }

        .nx-card--elevated::before {
          opacity: 0.55;
        }

        .nx-card--elevated:hover::before {
          opacity: 0.9;
        }

        .nx-card-wm {
          position: absolute;
          top: 10px;
          right: 14px;
          z-index: 1;
          font-family: var(--nx-font);
          font-size: clamp(2.4rem, 4vw, 3.2rem);
          font-weight: 500;
          line-height: 1;
          letter-spacing: -0.05em;
          color: color-mix(in srgb, var(--nx-azure) 11%, var(--nx-line-strong));
          pointer-events: none;
          transition: color 0.45s var(--nx-ease);
        }

        .nx-card--elevated:hover .nx-card-wm {
          color: color-mix(in srgb, var(--nx-azure) 30%, var(--nx-line-strong));
        }

        .nx-card--elevated .nx-card-body {
          padding-top: 30px;
        }

        .nx-card--elevated .partner-benefits li,
        .nx-card--elevated .tech-card-tags .nx-tag,
        .nx-card--elevated .uc-tags .nx-tag,
        .nx-card--elevated .sdk-list li {
          border-style: solid;
          background: color-mix(in srgb, var(--dark-primary) 45%, transparent);
          transition: border-color 0.35s ease, color 0.35s ease;
        }

        .nx-card--elevated:hover .partner-benefits li,
        .nx-card--elevated:hover .sdk-list li {
          border-color: color-mix(in srgb, var(--nx-azure) 22%, var(--nx-line-strong));
        }

        .nx-card--elevated .partner-benefits li::before {
          background: var(--nx-azure);
          box-shadow: 0 0 6px color-mix(in srgb, var(--nx-azure) 50%, transparent);
        }

        .nx-card--elevated .sdk-list li::before {
          background: var(--nx-azure);
          box-shadow: 0 0 6px color-mix(in srgb, var(--nx-azure) 50%, transparent);
        }

        @media (prefers-reduced-motion: reduce) {
          .nx-card--elevated:hover .nx-icon-box::before {
            animation: none;
            opacity: 0.5;
          }
        }

        /* 3D tilt (JS adds transform; this sets perspective/child pop) */
        [data-tilt] { transform-style: preserve-3d; will-change: transform; }
        [data-tilt]:hover { transition: none; }
        [data-tilt] .nx-card-body { transform: translateZ(18px); }

        /* ---------- Forms — secure inquiry panels ---------- */
        .nx-form-panel {
          position: relative;
          background:
            linear-gradient(165deg, color-mix(in srgb, var(--dark-secondary) 94%, white) 0%, var(--dark-secondary) 42%, color-mix(in srgb, var(--dark-primary) 35%, var(--dark-secondary)) 100%);
          border: 1px solid var(--dark-border);
          overflow: hidden;
          isolation: isolate;
          box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-azure) 18%, transparent);
        }

        .nx-form-panel::before {
          content: '';
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 3;
          opacity: 0.42;
          background:
            linear-gradient(var(--nx-azure), var(--nx-azure)) top left / 14px 1px no-repeat,
            linear-gradient(var(--nx-azure), var(--nx-azure)) top left / 1px 14px no-repeat,
            linear-gradient(var(--nx-azure), var(--nx-azure)) bottom right / 14px 1px no-repeat,
            linear-gradient(var(--nx-azure), var(--nx-azure)) bottom right / 1px 14px no-repeat;
        }

        .nx-form-panel::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--nx-azure), color-mix(in srgb, var(--nx-azure) 25%, transparent) 55%, transparent);
          transform: scaleX(0.45);
          transform-origin: left;
          z-index: 4;
        }

        .nx-form-head {
          position: relative;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          padding: 18px 32px;
          border-bottom: 1px solid var(--dark-border);
          background: color-mix(in srgb, var(--dark-primary) 58%, transparent);
          font-family: var(--nx-font);
          font-size: 10px;
          letter-spacing: 1.6px;
          text-transform: uppercase;
          color: var(--nx-text-faint);
        }

        .nx-form-head__status {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: var(--nx-azure);
        }

        .nx-form-body {
          position: relative;
          z-index: 2;
          padding: 36px 32px 32px;
        }

        .nx-form-title {
          font-size: clamp(22px, 2.2vw, 26px);
          font-weight: 500;
          letter-spacing: -0.02em;
          color: var(--nx-text);
          margin-bottom: 8px;
        }

        .nx-form-lead {
          font-size: 14.5px;
          line-height: 1.65;
          color: var(--nx-text-muted);
          margin-bottom: 32px;
        }

        .nx-form-alert {
          display: none;
          align-items: flex-start;
          gap: 12px;
          padding: 16px 18px;
          margin-bottom: 24px;
          border: 1px solid color-mix(in srgb, #ff6b6b 35%, transparent);
          background: color-mix(in srgb, #ff6b6b 8%, var(--dark-primary));
          font-size: 14px;
          color: var(--nx-text-muted);
        }

        .nx-form-alert.show { display: flex; }
        .nx-form-alert i { color: #ff6b6b; margin-top: 2px; }
        .nx-form-alert p { margin: 0; }

        .nx-form { display: block; }

        .nx-field { margin-bottom: 22px; }

        .nx-field:focus-within .nx-label { color: var(--nx-azure); }

        .nx-label {
          display: block;
          font-family: var(--nx-font);
          font-size: 10px;
          font-weight: 500;
          letter-spacing: 1.4px;
          text-transform: uppercase;
          color: var(--nx-text-muted);
          margin-bottom: 10px;
          transition: color 0.25s var(--nx-ease);
        }

        .nx-label.required::after {
          content: " *";
          color: var(--nx-azure);
        }

        .nx-input,
        .nx-select,
        .nx-textarea {
          width: 100%;
          /* background-color / background-image longhands — never the
             background shorthand — so .nx-select chevron repeat/position
             survive hover and focus. */
          background-color: var(--dark-primary);
          background-image:
            linear-gradient(180deg, color-mix(in srgb, var(--dark-primary) 92%, black) 0%, var(--dark-primary) 100%);
          background-repeat: no-repeat;
          border: 1px solid var(--nx-line-strong);
          border-radius: 0;
          color: var(--nx-text);
          font-family: var(--nx-font);
          font-size: 14.5px;
          line-height: 1.5;
          padding: 14px 16px;
          transition: border-color 0.25s var(--nx-ease), box-shadow 0.25s var(--nx-ease), background-color 0.25s var(--nx-ease);
          box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
        }

        .nx-input::placeholder,
        .nx-textarea::placeholder { color: var(--nx-text-faint); }

        .nx-input:hover,
        .nx-select:hover,
        .nx-textarea:hover {
          border-color: color-mix(in srgb, var(--nx-azure) 28%, var(--nx-line-strong));
        }

        .nx-input:focus,
        .nx-select:focus,
        .nx-textarea:focus {
          outline: none;
          border-color: color-mix(in srgb, var(--nx-azure) 65%, var(--nx-line-strong));
          background-color: color-mix(in srgb, var(--dark-primary) 88%, var(--dark-secondary));
          background-image: none;
          box-shadow:
            inset 3px 0 0 var(--nx-azure),
            0 0 0 3px var(--nx-glow-a06),
            0 0 24px var(--nx-glow-a18);
        }

        .nx-select {
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cc883b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
            linear-gradient(180deg, color-mix(in srgb, var(--dark-primary) 92%, black) 0%, var(--dark-primary) 100%);
          background-repeat: no-repeat, no-repeat;
          background-position: right 16px center, 0 0;
          background-size: 14px 14px, auto;
          padding-right: 44px;
          padding-inline-end: 44px;
          cursor: pointer;
        }

        .nx-select:hover,
        .nx-select:focus {
          background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cc883b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 16px center;
          background-size: 14px 14px;
        }

        .nx-select option {
          background: var(--dark-secondary);
          color: var(--nx-text);
        }

        .nx-textarea {
          resize: vertical;
          min-height: 140px;
        }

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

        .nx-form-row .nx-field { margin-bottom: 22px; }

        .nx-form-help {
          display: block;
          margin-top: 8px;
          font-size: 12px;
          color: var(--nx-text-faint);
        }

        .nx-page .nx-input.is-invalid,
        .nx-page .nx-select.is-invalid,
        .nx-page .nx-textarea.is-invalid {
          border-color: color-mix(in srgb, #ff6b6b 70%, var(--nx-line-strong));
          box-shadow:
            inset 3px 0 0 #ff6b6b,
            0 0 0 3px color-mix(in srgb, #ff6b6b 12%, transparent);
        }

        .nx-page .invalid-feedback {
          display: block;
          margin-top: 8px;
          font-family: var(--nx-font);
          font-size: 11px;
          letter-spacing: 0.4px;
          color: #ff8a8a;
        }

        .nx-form-actions {
          margin-top: 8px;
          padding-top: 24px;
          border-top: 1px solid var(--dark-border);
        }

        .nx-form-submit {
          width: 100%;
          justify-content: center;
          border: none;
          cursor: pointer;
        }

        .nx-form-submit:disabled {
          opacity: 0.55;
          cursor: not-allowed;
        }

        @media (max-width: 767px) {
          .nx-form-body { padding: 28px 22px 24px; }
          .nx-form-head { padding: 16px 22px; }
          .nx-form-row { grid-template-columns: 1fr; gap: 0; }
        }

        /* ---------- Tags / chips ---------- */
        .nx-tag {
          display: inline-block;
          font-family: var(--nx-font);
          font-size: 10px;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: var(--nx-text-faint);
          border: 1px solid var(--nx-line-strong);
          padding: 5px 12px;
        }

        .nx-tag--accent {
          color: var(--nx-azure);
          border-color: color-mix(in srgb, var(--nx-azure) 35%, transparent);
          background: var(--nx-glow-a06);
        }

        /* ---------- Spec table ---------- */
        .nx-specs {
          width: 100%;
          border: 1px solid var(--dark-border);
          border-collapse: collapse;
          font-size: 14px;
        }

        .nx-specs tr { border-bottom: 1px solid var(--dark-border); }
        .nx-specs tr:last-child { border-bottom: none; }
        .nx-specs tr:hover { background: var(--nx-glow-a06); }

        .nx-specs td {
          padding: 14px 18px;
          color: var(--nx-text-muted);
          line-height: 1.5;
        }

        .nx-specs td:first-child {
          font-family: var(--nx-font);
          font-size: 11px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: var(--nx-text-faint);
          width: 40%;
          border-right: 1px solid var(--dark-border);
        }

        .nx-specs td:last-child { color: var(--nx-text); }

        /* ---------- Stat counters ---------- */
        .nx-stats {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          border: 1px solid var(--dark-border);
        }

        .nx-stat {
          padding: 32px 24px;
          border-left: 1px solid var(--dark-border);
          transition: background 0.3s;
        }

        .nx-stat:first-child { border-left: none; }
        .nx-stat:hover { background: var(--nx-glow-a06); }

        .nx-stat-value {
          font-family: var(--nx-font);
          font-size: 30px;
          font-weight: 500;
          color: var(--nx-azure);
          line-height: 1.15;
          margin-bottom: 8px;
          letter-spacing: -0.01em;
        }

        .nx-stat-label {
          font-family: var(--nx-font);
          font-size: 10px;
          color: var(--nx-text-faint);
          text-transform: uppercase;
          letter-spacing: 1.8px;
        }

        /* ---------- Spec rail (premium metrics strip) ---------- */
        .spec-rail {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          border: 1px solid var(--dark-border);
          background:
            radial-gradient(ellipse 90% 80% at 50% 0%, var(--nx-glow-a06) 0%, transparent 70%),
            var(--dark-secondary);
          position: relative;
        }

        .spec-rail::before,
        .spec-rail::after {
          content: '';
          position: absolute;
          width: 22px;
          height: 22px;
          border-color: color-mix(in srgb, var(--nx-azure) 45%, transparent);
          border-style: solid;
          pointer-events: none;
          z-index: 1;
        }

        .spec-rail::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
        .spec-rail::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

        .spec-rail__cell {
          position: relative;
          padding: 28px 20px 24px;
          border-left: 1px solid var(--dark-border);
          min-height: 104px;
          transition: background 0.3s, border-color 0.3s;
        }

        .spec-rail__cell:first-child { border-left: none; }

        .spec-rail__cell:hover {
          background: var(--nx-glow-a06);
        }

        .spec-rail__cell:hover .spec-rail__value {
          color: color-mix(in srgb, var(--nx-azure) 88%, white);
        }

        .spec-rail__index {
          position: absolute;
          top: 10px;
          right: 12px;
          font-family: var(--nx-font);
          font-size: 9px;
          letter-spacing: 1px;
          color: color-mix(in srgb, var(--nx-azure) 40%, var(--nx-text-faint));
        }

        .spec-rail__value {
          font-family: var(--nx-font);
          font-size: clamp(1rem, 2.2vw, 1.55rem);
          font-weight: 500;
          color: var(--nx-azure);
          line-height: 1.2;
          margin-bottom: 10px;
          letter-spacing: -0.01em;
          text-wrap: balance;
          word-break: break-word;
          padding-right: 1.5rem;
        }

        .spec-rail__label {
          font-family: var(--nx-font);
          font-size: clamp(8px, 1vw, 10px);
          color: var(--nx-text-faint);
          text-transform: uppercase;
          letter-spacing: 1.2px;
          line-height: 1.45;
          text-wrap: balance;
          max-width: 16ch;
        }

        @media (max-width: 991px) {
          .spec-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
          .spec-rail__cell:nth-child(odd) { border-left: none; }
          .spec-rail__cell:nth-child(n+3) { border-top: 1px solid var(--dark-border); }
        }

        @media (max-width: 575px) {
          .spec-rail { grid-template-columns: 1fr; }
          .spec-rail__cell { border-left: none; border-top: 1px solid var(--dark-border); }
          .spec-rail__cell:first-child { border-top: none; }
          .spec-rail__label { max-width: none; }
        }

        /* ---------- Diagram nodes & flows ---------- */
        .nx-node {
          position: relative;
          background: var(--dark-secondary);
          border: 1px solid var(--nx-line-strong);
          padding: 18px 20px;
          text-align: center;
          transition: border-color 0.3s, box-shadow 0.3s;
        }

        .nx-node:hover {
          border-color: color-mix(in srgb, var(--nx-azure) 50%, var(--nx-line-strong));
          box-shadow: 0 0 24px var(--nx-glow-a18);
        }

        .nx-node-title {
          font-family: var(--nx-font);
          font-size: 12px;
          font-weight: 500;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: var(--nx-text);
        }

        .nx-node-sub {
          font-family: var(--nx-font);
          font-size: 10px;
          letter-spacing: 1px;
          color: var(--nx-text-faint);
          margin-top: 6px;
          text-transform: uppercase;
        }

        .nx-node--accent {
          border-color: color-mix(in srgb, var(--nx-azure) 45%, var(--nx-line-strong));
          background: var(--nx-glow-a06);
        }

        .nx-node--accent .nx-node-title { color: var(--nx-azure); }

        /* SVG diagram helpers */
        .nx-svg-trace {
          stroke: color-mix(in srgb, var(--nx-azure) 45%, transparent);
          stroke-width: 1.5;
          fill: none;
        }

        .nx-svg-trace--dim { stroke: var(--nx-line-strong); }

        .nx-svg-dash {
          stroke-dasharray: 6 8;
          animation: nxDashFlow 1.6s linear infinite;
        }

        @keyframes nxDashFlow {
          to { stroke-dashoffset: -28; }
        }

        .nx-svg-pulse { fill: var(--nx-azure); }

        .nx-svg-label {
          font-family: var(--nx-font);
          font-size: 10px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          fill: var(--nx-text-faint);
        }

        /* Blinking status dot */
        .nx-beacon {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: var(--nx-azure);
          box-shadow: 0 0 12px var(--nx-glow-a28);
          animation: nxBeacon 2.4s ease-in-out infinite;
        }

        @keyframes nxBeacon {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }

        /* ---------- Boot sequence ---------- */
        .nx-boot {
          font-family: var(--nx-font);
          font-size: 13px;
          line-height: 2.1;
          background: var(--dark-primary);
          border: 1px solid var(--dark-border);
          padding: 28px 32px;
          color: var(--nx-text-muted);
        }

        .nx-boot-line {
          display: flex;
          align-items: baseline;
          gap: 12px;
          opacity: 0;
          transform: translateX(-8px);
          transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .nx-boot-line.on { opacity: 1; transform: translateX(0); }

        .nx-boot-line .ok { color: var(--nx-azure); }
        .nx-boot-line .addr { color: var(--nx-text-faint); font-size: 11px; }

        /* ---------- Marquee-safe scan line ---------- */
        .nx-scan {
          position: relative;
          overflow: hidden;
        }

        .nx-scan::before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          width: 120px;
          background: linear-gradient(90deg, transparent, var(--nx-glow-a06), transparent);
          animation: nxScan 5s linear infinite;
          pointer-events: none;
          z-index: 1;
        }

        @keyframes nxScan {
          from { transform: translateX(-140px); }
          to { transform: translateX(100vw); }
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 991px) {
          .nx-section { padding: 96px 0; }
          .nx-hero { padding: 110px 0 80px; }
          .nx-stats { grid-template-columns: repeat(2, 1fr); }
          .nx-stat:nth-child(odd) { border-left: none; }
          .nx-stat:nth-child(n+3) { border-top: 1px solid var(--dark-border); }
        }

        @media (max-width: 767px) {
          .nx-section { padding: 80px 0; }
          .nx-head { margin-bottom: 48px; }
          .nx-card-body { padding: 32px 24px; }
        }

        @media (prefers-reduced-motion: reduce) {
          *, *::before, *::after {
            animation-duration: 1ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 1ms !important;
            scroll-behavior: auto !important;
          }
          .nx-svg-dash, .nx-beacon, .nx-scan::before, .nx-footer__trace-pulse, .toast, .animate-fade-in { animation: none !important; }
          /* Decorative ring only — the icon it surrounds stays visible, so
             resolving the ring to hidden is its finished state, not a blank. */
          .maintenance-icon::after { animation: none !important; opacity: 0; }
          .nx-card, .nx-btn, .nx-btn-ghost, .nav-menu, .modal { transition: none !important; }
          .reveal {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
          }
        }

        /* ============================================================
            SCROLL REVEAL UTILITIES (shared)
            ============================================================ */
        .reveal {
          opacity: 0;
          transform: translateY(28px);
          transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
          will-change: opacity, transform;
        }

        .reveal.revealed {
          opacity: 1;
          transform: translateY(0);
        }

        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }

        @media (prefers-reduced-motion: reduce) {
          .reveal {
            opacity: 1;
            transform: none;
            transition: none;
          }
        }

        /* ============================================================
            UTILITIES
            ============================================================ */
        .text-gold {
          color: var(--nx-azure) !important;
        }

        .text-dark {
          color: var(--dark-primary) !important;
        }

        .text-white {
          color: var(--white) !important;
        }

        .text-muted {
          color: var(--gray-500) !important;
        }

        /* Auth pages use .text-primary on the inline "Sign up"/"Sign in" links.
           Bootstrap used to supply it; it resolves to the contract azure. */
        .text-primary {
          color: var(--primary-accent) !important;
        }

        .bg-gold {
          background-color: var(--nx-azure) !important;
        }

        .bg-dark {
          background-color: var(--dark-primary) !important;
        }

        .bg-gradient-gold {
          background: var(--gradient-primary) !important;
        }

        .bg-gradient-dark {
          background: var(--gradient-dark) !important;
        }

        /* Spacing utilities */
        .mb-0 {
          margin-bottom: 0 !important;
        }
        .mb-1 {
          margin-bottom: var(--spacing-xs) !important;
        }
        .mb-2 {
          margin-bottom: var(--spacing-sm) !important;
        }
        .mb-3 {
          margin-bottom: var(--spacing-md) !important;
        }
        .mb-4 {
          margin-bottom: var(--spacing-lg) !important;
        }
        .mb-5 {
          margin-bottom: var(--spacing-xl) !important;
        }

        .mt-0 {
          margin-top: 0 !important;
        }
        .mt-1 {
          margin-top: var(--spacing-xs) !important;
        }
        .mt-2 {
          margin-top: var(--spacing-sm) !important;
        }
        .mt-3 {
          margin-top: var(--spacing-md) !important;
        }
        .mt-4 {
          margin-top: var(--spacing-lg) !important;
        }
        .mt-5 {
          margin-top: var(--spacing-xl) !important;
        }

        .py-5 {
          padding-top: var(--spacing-3xl) !important;
          padding-bottom: var(--spacing-3xl) !important;
        }

        /* Display utilities */
        .d-none {
          display: none !important;
        }
        .d-block {
          display: block !important;
        }
        .d-flex {
          display: flex !important;
        }
        .d-grid {
          display: grid !important;
        }

        .flex-column {
          flex-direction: column !important;
        }
        /* The error pages stack their two action buttons below ~420px. */
        .flex-wrap {
          flex-wrap: wrap !important;
        }
        .align-items-center {
          align-items: center !important;
        }
        .justify-content-center {
          justify-content: center !important;
        }
        .justify-content-between {
          justify-content: space-between !important;
        }

        .gap-1 {
          gap: var(--spacing-xs) !important;
        }
        .gap-2 {
          gap: var(--spacing-sm) !important;
        }
        .gap-3 {
          gap: var(--spacing-md) !important;
        }
        .gap-4 {
          gap: var(--spacing-lg) !important;
        }

        .text-center {
          text-align: center !important;
        }
        .text-start {
          text-align: left !important;
        }
        .text-end {
          text-align: right !important;
        }

        /* Container */
        .container {
          width: 100%;
          max-width: var(--container-max-width);
          margin-left: auto;
          margin-right: auto;
          padding-left: var(--spacing-lg);
          padding-right: var(--spacing-lg);
        }

        /* Grid */
        .row {
          display: flex;
          flex-wrap: wrap;
          margin-left: calc(var(--spacing-md) * -1);
          margin-right: calc(var(--spacing-md) * -1);
        }

        .row > * {
          padding-left: var(--spacing-md);
          padding-right: var(--spacing-md);
        }

        .g-4 {
          --bs-gutter-x: var(--spacing-lg);
          --bs-gutter-y: var(--spacing-lg);
        }
        .g-5 {
          --bs-gutter-x: var(--spacing-xl);
          --bs-gutter-y: var(--spacing-xl);
        }

        /* Columns */
        .col {
          flex: 1 0 0%;
        }
        .col-12 {
          flex: 0 0 100%;
          max-width: 100%;
        }
        .col-md-6 {
          flex: 0 0 50%;
          max-width: 50%;
        }
        .col-lg-4 {
          flex: 0 0 33.333333%;
          max-width: 33.333333%;
        }
        .col-lg-6 {
          flex: 0 0 50%;
          max-width: 50%;
        }
        .col-lg-8 {
          flex: 0 0 66.666667%;
          max-width: 66.666667%;
        }

        @media (max-width: 991px) {
          .col-lg-4,
          .col-lg-6,
          .col-lg-8 {
            flex: 0 0 100%;
            max-width: 100%;
          }
        }

        @media (max-width: 767px) {
          .col-md-6 {
            flex: 0 0 100%;
            max-width: 100%;
          }
        }

        /* ============================================================
            ANIMATIONS
            ============================================================ */
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes nxRingPulse {
          from {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.4;
          }
          to {
            transform: translate(-50%, -50%) scale(1.6);
            opacity: 0;
          }
        }

        .animate-fade-in {
          animation: fadeIn 0.6s ease forwards;
        }

        /* ============================================================
            RESPONSIVE ADJUSTMENTS
            ============================================================ */
        @media (max-width: 767px) {
          :root {
            --fs-5xl: 2.5rem;
            --fs-4xl: 2rem;
            --fs-3xl: 1.5rem;
          }

          .section {
            padding: var(--spacing-3xl) 0;
          }
        }

        @media (max-width: 575px) {
          .container {
            padding-left: var(--spacing-md);
            padding-right: var(--spacing-md);
          }
        }

        /* Print styles */
        @media print {
          .site-header,
          .site-footer,
          .btn,
          .no-print,
          .announcement-bar,
          .toast-container {
            display: none !important;
          }

          body {
            color: black;
            background: white;
          }
        }

      .hero-badge {
          background: color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
          border: 1px solid color-mix(in srgb, var(--nx-azure) 30%, transparent) !important;
        }

        .hero::before {
          background: radial-gradient(
            ellipse at 70% 50%,
            color-mix(in srgb, var(--nx-azure) 15%, transparent) 0%,
            transparent 60%
          ) !important;
        }

        /* ===========================================
        THEME-AWARE COMPONENT STYLES
        Add these to your base.html or global CSS
        =========================================== */

        /* Icon backgrounds - Benefits, Office, Solutions */
        .benefit-icon,
        .office-icon,
        .solution-icon {
            background: color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
            color: var(--nx-azure) !important;
        }

        /* Chip specification box */
        .chip-spec {
            background: color-mix(in srgb, var(--nx-azure) 10%, transparent) !important;
            border: 1px solid color-mix(in srgb, var(--nx-azure) 20%, transparent) !important;
            border-radius: var(--radius-md) !important;
        }

        /* Chip diagram radial glow */
        .chip-diagram::before {
            background: radial-gradient(
                ellipse at center,
                color-mix(in srgb, var(--nx-azure) 10%, transparent) 0%,
                transparent 70%
            ) !important;
        }

        /* Case study image radial glow */
        .case-study-image::before {
            background: radial-gradient(
                ellipse at center,
                color-mix(in srgb, var(--nx-azure) 15%, transparent) 0%,
                transparent 70%
            ) !important;
        }

        /* ===========================================
            ADDITIONAL COMMON PATTERNS
            Other elements you may want to update
            =========================================== */

        /* Hero section elements */
        .hero::before {
            background: radial-gradient(
                ellipse at 70% 50%,
                color-mix(in srgb, var(--nx-azure) 15%, transparent) 0%,
                transparent 60%
            ) !important;
        }

        .hero-badge {
            background: color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
            border: 1px solid color-mix(in srgb, var(--nx-azure) 30%, transparent) !important;
        }

        /* About page hero glow */
        .about-hero::before {
            background: radial-gradient(
                ellipse,
                color-mix(in srgb, var(--nx-azure) 10%, transparent) 0%,
                transparent 70%
            ) !important;
        }

        /* Feature cards hover glow */
        .feature-card:hover {
            box-shadow: 0 10px 40px color-mix(in srgb, var(--nx-azure) 20%, transparent) !important;
        }

        /* Technology cards */
        .tech-card::before {
            background: radial-gradient(
                ellipse at top right,
                color-mix(in srgb, var(--nx-azure) 8%, transparent) 0%,
                transparent 60%
            ) !important;
        }

        /* Stats/metric backgrounds */
        .stat-item,
        .metric-card {
            background: color-mix(in srgb, var(--nx-azure) 5%, transparent) !important;
            border: 1px solid color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
        }

        /* Tag/badge backgrounds */
        .tag,
        .category-tag,
        .skill-tag {
            background: color-mix(in srgb, var(--nx-azure) 12%, transparent) !important;
            color: var(--nx-azure) !important;
        }

        /* Timeline dots/lines */
        .timeline::before {
            background: var(--gradient-primary) !important;
        }

        .timeline-dot {
            background: var(--nx-azure) !important;
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-azure) 20%, transparent) !important;
        }

        /* Partner/logo card hover */
        .partner-card:hover,
        .logo-card:hover {
            border-color: var(--nx-azure) !important;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
        }

        /* Form focus states */
        .form-control:focus,
        .form-input:focus {
            border-color: var(--nx-azure) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
        }

        /* Button hover glow */
        .btn-primary:hover {
            box-shadow: 0 8px 24px color-mix(in srgb, var(--nx-azure) 40%, transparent) !important;
        }

        /* Navigation active indicator */
        .nav-link.active::after {
            background: var(--nx-azure) !important;
        }

        /* Social icon hover */
        .footer-social a:hover,
        .social-link:hover {
            background: var(--nx-azure) !important;
            box-shadow: 0 4px 12px color-mix(in srgb, var(--nx-azure) 30%, transparent) !important;
        }

        /* Alert/notice gold variant */
        .alert-gold {
            background: color-mix(in srgb, var(--nx-azure) 10%, transparent) !important;
            border-left: 4px solid var(--nx-azure) !important;
        }

        /* Badge primary variant */
        .badge-primary {
            background: color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
            color: var(--nx-azure-deep) !important;
        }

        /* Mission card icon */
        .mission-icon {
            background: var(--gradient-primary) !important;
        }

        .mission-card:hover .mission-icon {
            box-shadow: 0 8px 24px color-mix(in srgb, var(--nx-azure) 40%, transparent) !important;
        }

        /* Team card hover */
        .team-card:hover {
            box-shadow: 0 12px 32px color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
        }

        /* Team social hover */
        .team-social a:hover {
            background: var(--nx-azure) !important;
            color: var(--white) !important;
        }

        /* Job card accent */
        .job-card::before {
            background: var(--gradient-primary) !important;
        }

        /* Contact form card */
        .contact-card:hover {
            border-color: var(--nx-azure) !important;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--nx-azure) 12%, transparent) !important;
        }

        /* Use case card */
        .use-case-card:hover {
            border-color: var(--nx-azure) !important;
            box-shadow: 0 12px 32px color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
        }

        /* Partnership type badge */
        .partnership-badge {
            background: color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
            color: var(--nx-azure) !important;
        }

        /* Search box input */
        .search-box input {
            border: 2px solid color-mix(in srgb, var(--nx-azure) 30%, transparent) !important;
            background: rgba(255, 255, 255, 0.1) !important;
            color: var(--white) !important;
        }

        .search-box input:focus {
            border-color: var(--nx-azure) !important;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-azure) 15%, transparent) !important;
        }

        /* Resources hero pattern - SVG doesn't support CSS variables directly,
            so we use a CSS-based pattern alternative */
        .resources-hero::before {
            background-image:
                linear-gradient(
                    color-mix(in srgb, var(--nx-azure) 3%, transparent) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    color-mix(in srgb, var(--nx-azure) 3%, transparent) 1px,
                    transparent 1px
                ) !important;
            background-size: 40px 40px !important;
        }

        /* Alternative: Dotted pattern */
        .resources-hero-dots::before {
            background-image: radial-gradient(
                color-mix(in srgb, var(--nx-azure) 8%, transparent) 1px,
                transparent 1px
            ) !important;
            background-size: 20px 20px !important;
        }

        /* Alternative: Diagonal lines pattern */
        .resources-hero-diagonal::before {
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                color-mix(in srgb, var(--nx-azure) 3%, transparent) 10px,
                color-mix(in srgb, var(--nx-azure) 3%, transparent) 11px
            ) !important;
        }

        /* Hero section radial glows */
        .usecases-hero::before,
        .contact-hero::before,
        .partnerships-hero::before,
        .tech-hero::before,
        .about-hero::before,
        .resources-hero::before {
            background: radial-gradient(
                ellipse at center,
                color-mix(in srgb, var(--nx-azure) 12%, transparent) 0%,
                transparent 70%
            ) !important;
        }

        @media (max-width: 991px) {
            .main-nav.active {
                transform: translateX(0);
                height: 100vh;
            }
            .main-nav {
                transform: translateX(-100%);
                height: 100vh;
            }
        }
        textarea {
          resize: none !important;
        }

        .btn-nelix-primary:hover {
          background: var(--primary-accent-dim) !important;
          color: #ffffff !important;
        }

        .footer-address__label {
          color: var(--gray-500) !important;
          font-size: 14px !important;
        }