/* === TOKENS (Mission Control v0.2) === */
  .x-site {
    --x-bg: #0b1120;
    --x-surface: #131b2e;
    --x-surface-2: #1e293b;
    --x-text: #e2e8f0;
    --x-muted: #94a3b8;
    --x-line: #334155;
    /* Lighter line for tech feel */
    --x-accent: #00e5ff;
    /* Safety Cyan */
    --x-accent-2: #ff6b35;
    /* Safety Orange */
    --x-accent-alpha: rgba(0, 229, 255, 0.15);

    --x-ff-head: 'Inter', system-ui, sans-serif;
    --x-ff-body: 'Inter', system-ui, sans-serif;
    --x-ff-mono: 'JetBrains Mono', monospace;

    --x-fs-1: clamp(1.8rem, 3.5vw, 2.75rem);
    --x-fs-2: clamp(1.75rem, 3.5vw, 2.25rem);
    --x-fs-3: 1.25rem;
    --x-fs-4: 1rem;
    --x-fs-5: 0.875rem;
    --x-fs-6: 0.75rem;

    --x-lh-tight: 1.1;
    --x-lh-base: 1.5;

    --x-sp-1: 4px;
    --x-sp-2: 8px;
    --x-sp-3: 12px;
    --x-sp-4: 16px;
    --x-sp-5: 24px;
    --x-sp-6: 32px;
    --x-sp-7: 48px;
    --x-sp-8: 64px;
    --x-sp-9: 96px;

    --x-r-1: 0px;
    /* Sharp technical corners */
    --x-r-2: 2px;
    --x-r-3: 4px;

    --x-container: 1200px;
    --x-container-wide: 1320px;

    box-sizing: border-box;
    font-family: var(--x-ff-body);
    color: var(--x-text);
    background: var(--x-bg);
    line-height: var(--x-lh-base);
    -webkit-font-smoothing: antialiased;
  }

  .x-site *,
  .x-site *::before,
  .x-site *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
  }

  .x-site img {
    max-width: 100%;
    display: block;
  }

  .x-site a {
    color: var(--x-accent);
    text-decoration: none;
    transition: opacity .2s;
  }

  .x-site a:hover {
    opacity: 0.8;
    text-decoration: none;
  }

  /* === LAYOUT & UTILS === */
  .x-site .x-wrap {
    max-width: var(--x-container);
    margin: 0 auto;
    padding: 0 var(--x-sp-5);
    position: relative;
    z-index: 2;
  }

  .x-site .x-section {
    padding: var(--x-sp-9) 0;
    border-bottom: 1px solid var(--x-line);
    position: relative;
  }

  /* Technical grid background for sections */
  .x-site .x-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
  }

  .x-site .x-section__head {
    margin-bottom: var(--x-sp-7);
    position: relative;
    z-index: 2;
  }

  .x-site .x-section__label {
    font-family: var(--x-ff-mono);
    font-size: var(--x-fs-6);
    color: var(--x-accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--x-sp-2);
    display: inline-block;
    padding: 2px 6px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.2);
  }

  .x-site .x-h2 {
    font-family: var(--x-ff-head);
    font-size: var(--x-fs-2);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--x-text);
    margin-bottom: var(--x-sp-4);
  }

  .x-site .x-lead {
    font-size: var(--x-fs-4);
    color: var(--x-muted);
    max-width: 760px;
    line-height: 1.6;
  }

  /* === BUTTONS === */
  .x-site .x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--x-sp-2);
    font-family: var(--x-ff-mono);
    /* Technical font for actions */
    font-size: var(--x-fs-5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--x-sp-3) var(--x-sp-5);
    border-radius: var(--x-r-2);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }

  .x-site .x-btn:focus-visible {
    outline: 2px solid var(--x-accent);
    outline-offset: 4px;
  }

  .x-site .x-btn--primary {
    background: var(--x-accent);
    color: #000;
    /* High contrast on Cyan */
    border-color: var(--x-accent);
  }

  .x-site .x-btn--primary:hover {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 15px var(--x-accent);
  }

  .x-site .x-btn--secondary {
    background: transparent;
    color: var(--x-accent);
    border-color: var(--x-accent);
  }

  .x-site .x-btn--secondary:hover {
    background: var(--x-accent-alpha);
    box-shadow: 0 0 10px var(--x-accent-alpha);
  }

  .x-site .x-btn--tertiary {
    background: transparent;
    color: var(--x-muted);
    border: 1px solid transparent;
    padding: var(--x-sp-2) 0;
    font-size: var(--x-fs-6);
  }

  .x-site .x-btn--tertiary:hover {
    color: var(--x-accent);
    text-decoration: none;
  }

  /* Special Demo Button (Yellow/Red -> Cyan/Black) */
  .x-site .x-btn--demo {
    background: #facc15;
    color: #b91c1c;
    border-color: #facc15;
  }

  .x-site .x-btn--demo:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 15px var(--x-accent);
  }

  /* === HEADER === */
  .x-site .x-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 72px;
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
  }

  .x-site .x-header__glass {
    position: absolute;
    inset: 8px 24px auto;
    height: 56px;
    background: rgba(11, 17, 32, .78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 229, 255, .06);
    border-radius: 16px;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, .35),
      inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: all .4s cubic-bezier(.16, 1, .3, 1);
  }

  .x-site .x-header--sticky {
    height: 60px;
  }

  .x-site .x-header--sticky .x-header__glass {
    inset: 0 0 auto;
    height: 60px;
    border-radius: 0;
    background: rgba(11, 17, 32, .95);
    border-color: rgba(51, 65, 85, .3);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .4);
  }

  .x-site .x-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--x-container-wide);
    margin: 0 auto;
    padding: 0 48px;
    z-index: 2;
  }

  /* Logo */
  .x-site .x-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--x-ff-head);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
  }

  .x-site .x-logo__mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 229, 255, .15), rgba(0, 229, 255, .06));
    border: 1px solid rgba(0, 229, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .3s;
  }

  .x-site .x-logo__mark svg {
    width: 16px;
    height: 16px;
    stroke: var(--x-accent);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .x-site .x-logo:hover .x-logo__mark {
    background: linear-gradient(135deg, rgba(0, 229, 255, .25), rgba(0, 229, 255, .12));
    box-shadow: 0 0 12px rgba(0, 229, 255, .2);
    transform: scale(1.05);
  }

  .x-site .x-logo__text {
    display: inline;
  }

  .x-site .x-logo__text > span {
    background: linear-gradient(135deg, #fff 30%, var(--x-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Navigation */
  .x-site .x-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
  }

  .x-site .x-nav__item {
    font-family: var(--x-ff-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(226, 232, 240, .7);
    letter-spacing: 0.02em;
    padding: 8px 14px;
    border-radius: 8px;
    position: relative;
    transition: all .25s;
    text-decoration: none;
  }

  .x-site .x-nav__item::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--x-accent), #22d3ee);
    border-radius: 1px;
    transition: all .3s cubic-bezier(.16, 1, .3, 1);
    transform: translateX(-50%);
  }

  .x-site .x-nav__item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04);
  }

  .x-site .x-nav__item:hover::after {
    width: 60%;
  }

  .x-site .x-nav__item--active {
    color: var(--x-accent);
  }

  .x-site .x-nav__item--active::after {
    width: 60%;
    box-shadow: 0 0 8px rgba(0, 229, 255, .3);
  }

  /* Header CTA */
  .x-site .x-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--x-ff-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: #b91c1c;
    background: #facc15;
    border: 1px solid #facc15;
    border-radius: 10px;
    padding: 9px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: all .25s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    flex-shrink: 0;
    letter-spacing: .01em;
  }

  .x-site .x-header__cta::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 13px;
    background: #facc15;
    opacity: 0;
    z-index: -1;
    transition: opacity .3s;
    filter: blur(8px);
  }

  .x-site .x-header__cta:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 15px var(--x-accent);
  }

  .x-site .x-header__cta:hover::before {
    opacity: .4;
  }

  .x-site .x-header__cta svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Scroll progress */
  .x-site .x-header__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--x-accent), #22d3ee, var(--x-accent));
    border-radius: 1px;
    transition: width .1s linear;
    z-index: 3;
  }

  .x-site .x-header--sticky .x-header__progress {
    bottom: 0;
    border-radius: 0;
  }

  /* Burger */
  .x-site .x-burger {
    display: none;
    background: none;
    border: 1px solid rgba(51, 65, 85, .4);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    color: var(--x-text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all .25s;
  }

  .x-site .x-burger:hover {
    border-color: var(--x-accent);
    color: var(--x-accent);
  }

  .x-site .x-burger svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }

  @media(max-width:900px) {
    .x-site .x-header__glass {
      inset: 0;
      border-radius: 0;
    }

    .x-site .x-header__inner {
      padding: 0 20px;
    }

    .x-site .x-nav {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(11, 17, 32, .97);
      backdrop-filter: blur(24px);
      z-index: 50;
      padding: 80px 24px 40px;
    }

    .x-site .x-header--menu-open .x-nav {
      display: flex;
    }

    .x-site .x-header--menu-open .x-nav li {
      animation: navFadeIn .35s ease both;
    }

    .x-site .x-header--menu-open .x-nav li:nth-child(1) {
      animation-delay: .05s;
    }

    .x-site .x-header--menu-open .x-nav li:nth-child(2) {
      animation-delay: .1s;
    }

    .x-site .x-header--menu-open .x-nav li:nth-child(3) {
      animation-delay: .15s;
    }

    .x-site .x-header--menu-open .x-nav li:nth-child(4) {
      animation-delay: .2s;
    }

    .x-site .x-header--menu-open .x-nav li:nth-child(5) {
      animation-delay: .25s;
    }

    @keyframes navFadeIn {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

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

    .x-site .x-nav__item {
      font-size: 1.1rem;
      padding: 14px 24px;
    }

    .x-site .x-burger {
      display: flex;
    }

    .x-site .x-header__cta {
      display: none;
    }

    .x-site .x-header--menu-open .x-header__cta {
      display: inline-flex;
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 51;
      font-size: .9rem;
      padding: 12px 28px;
      animation: navFadeIn .35s ease .3s both;
    }
  }

  /* === HERO === */
  .x-site .x-hero {
    padding-top: 140px;
    padding-bottom: var(--x-sp-8);
    background: radial-gradient(ellipse at 50% 20%, rgba(0, 229, 255, 0.04), transparent 65%);
  }

  .x-site .x-hero__grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: var(--x-sp-8);
    align-items: stretch;
  }

  .x-site .x-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--x-ff-mono);
    font-size: 11px;
    color: var(--x-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-bottom: var(--x-sp-5);
    padding: 6px 16px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.06);
  }

  .x-site .x-hero h1 {
    font-family: var(--x-ff-head);
    font-size: var(--x-fs-1);
    font-weight: 700;
    line-height: var(--x-lh-tight);
    margin-bottom: var(--x-sp-5);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  }

  .x-site .x-hero__sub {
    font-size: var(--x-fs-3);
    color: var(--x-muted);
    margin-bottom: var(--x-sp-7);
    max-width: 580px;
    font-weight: 300;
    line-height: 1.65;
  }

  .x-site .x-hero__bullets li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: var(--x-text);
    font-size: var(--x-fs-5);
    list-style: none !important;
    line-height: 1.55;
  }

  /* Glowing square marker */
  .x-site .x-hero__bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 7px;
    height: 7px;
    background: var(--x-accent);
    box-shadow: 0 0 10px var(--x-accent), 0 0 3px var(--x-accent);
    border-radius: 1px;
  }

  .x-site .x-hero__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: var(--x-sp-6);
  }

  .x-site .x-hero__ctas {
    display: flex;
    gap: var(--x-sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--x-sp-5);
  }

  .x-site .x-hero__micro {
    font-family: var(--x-ff-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--x-muted);
    opacity: 0.65;
    letter-spacing: 0.05em;
  }

  /* Role Switcher — capsule tabs */
  .x-site .x-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--x-sp-6);
    padding: 4px;
    background: rgba(11, 17, 32, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.4);
    border-radius: 10px;
  }

  .x-site .x-tab {
    font-family: var(--x-ff-mono);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 10px 18px;
    background: transparent;
    color: var(--x-muted);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.25s, background 0.25s, box-shadow 0.25s;
  }

  .x-site .x-tab:hover {
    color: var(--x-text);
    background: rgba(0, 229, 255, 0.04);
  }

  .x-site .x-tab--active {
    color: var(--x-accent);
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.08);
  }

  .x-site .x-tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
  }

  .x-site .x-tab-panel--active {
    display: block;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }

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

  /* Hero Visual */
  .x-site .x-hero__visual {
    position: relative;
    background: rgba(19, 27, 46, 0.3);
    border: 1px solid var(--x-line);
    min-height: 400px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 10px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  @media (min-width: 1200px) {
    .x-site .x-hero__visual {
      min-height: 520px;
    }
  }

  /* Scanline effect entirely inside the visual block */
  .x-site .x-hero__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 229, 255, 0) 0%, rgba(0, 229, 255, 0.05) 50%, rgba(0, 229, 255, 0) 100%);
    background-size: 100% 200%;
    animation: visual-scanline 6s linear infinite;
    z-index: 5;
  }

  @keyframes visual-scanline {
    from {
      background-position: 0 -100%;
    }

    to {
      background-position: 0 200%;
    }
  }

  /* Corner Brackets */
  .x-site .x-hero__visual::before {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
      linear-gradient(to right, var(--x-accent) 2px, transparent 2px) 0 0,
      linear-gradient(to bottom, var(--x-accent) 2px, transparent 2px) 0 0,
      linear-gradient(to left, var(--x-accent) 2px, transparent 2px) 100% 0,
      linear-gradient(to bottom, var(--x-accent) 2px, transparent 2px) 100% 0,
      linear-gradient(to right, var(--x-accent) 2px, transparent 2px) 0 100%,
      linear-gradient(to top, var(--x-accent) 2px, transparent 2px) 0 100%,
      linear-gradient(to left, var(--x-accent) 2px, transparent 2px) 100% 100%,
      linear-gradient(to top, var(--x-accent) 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    opacity: 0.7;
    z-index: 2;
  }

  .x-site .x-radar {
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    border: 1px solid rgba(0, 229, 255, 0.1);
    background: radial-gradient(circle, transparent 60%, rgba(0, 229, 255, 0.05) 61%, transparent 62%);
    z-index: 1;
  }

  .x-site .x-radar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 229, 255, 0.15) 80deg, transparent 80deg);
    animation: radar-spin 4s linear infinite;
  }

  @keyframes radar-spin {
    from {
      transform: rotate(0deg);
    }

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

  .x-site .x-hotspot {
    width: 24px;
    height: 24px;
    border: 1px solid var(--x-accent);
    border-radius: 50%;
    background: var(--x-surface);
    color: var(--x-accent);
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--x-ff-mono);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
    transition: all .2s;
    z-index: 10;
  }

  .x-site .x-hotspot:hover,
  .x-site .x-hotspot:focus,
  .x-site .x-hotspot[aria-expanded="true"] {
    background: var(--x-accent);
    color: #000;
    box-shadow: 0 0 15px var(--x-accent);
  }

  .x-site .x-hotspot::after {
    content: attr(data-n);
  }

  .x-site .x-hotspot__tip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0) scale(0.9);
    width: max-content;
    max-width: 260px;
    background: var(--x-surface-2);
    border: 1px solid var(--x-accent);
    padding: 10px 14px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    text-align: left;
    margin-bottom: 12px;
  }

  .x-site .x-hotspot__tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--x-accent) transparent transparent transparent;
  }

  .x-site .x-hotspot__tip strong {
    display: block;
    color: var(--x-accent);
    font-family: var(--x-ff-mono);
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
  }

  .x-site .x-hotspot__tip span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--x-text);
  }

  .x-site .x-hotspot[aria-expanded="true"] .x-hotspot__tip,
  .x-site .x-hotspot:hover .x-hotspot__tip,
  .x-site .x-hotspot:focus .x-hotspot__tip {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
  }

  /* === CARDS (Mission Control) === */
  .x-site .x-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--x-sp-5);
  }

  .x-site .x-card {
    background: var(--x-surface);
    border: 1px solid var(--x-line);
    padding: var(--x-sp-5);
    position: relative;
    transition: all .2s;
  }

  .x-site .x-card:hover {
    border-color: var(--x-muted);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }

  .x-site .x-card__title {
    font-family: var(--x-ff-head);
    font-size: var(--x-fs-4);
    font-weight: 700;
    color: var(--x-text);
    margin-bottom: var(--x-sp-3);
    display: flex;
    align-items: center;
    gap: var(--x-sp-2);
  }

  .x-site .x-card__text {
    font-size: var(--x-fs-5);
    color: var(--x-muted);
    line-height: 1.5;
  }

  /* Corner bracket decoration for cards */
  .x-site .x-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 0;
    border-color: transparent var(--x-accent) transparent transparent;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .x-site .x-card:hover::after {
    opacity: 1;
  }

  /* === COMPONENTS === */
  /* Accordion (Premium Redesign v2) */
  .x-site .x-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: acc-counter;
  }

  .x-site .x-acc-item {
    background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
    border: 1px solid rgba(51, 65, 85, 0.45);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    counter-increment: acc-counter;
  }

  .x-site .x-acc-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, 0.2);
  }

  .x-site .x-acc-item--open {
    border-color: rgba(0, 229, 255, 0.35);
    box-shadow: 0 6px 28px rgba(0, 229, 255, 0.06), 0 0 0 1px rgba(0, 229, 255, 0.08);
    transform: translateY(0);
  }

  .x-site .x-acc-item__head {
    width: 100%;
    text-align: left;
    padding: 18px 24px;
    font-family: var(--x-ff-head);
    font-size: 1rem;
    font-weight: 700;
    background: transparent;
    border: none;
    color: var(--x-muted);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: color 0.3s, background 0.3s;
    position: relative;
  }

  .x-site .x-acc-item__head::before {
    content: counter(acc-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    font-family: var(--x-ff-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--x-accent);
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.18);
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
  }

  .x-site .x-acc-item__head::after {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--x-accent);
    border-bottom: 2px solid var(--x-accent);
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
    opacity: 0.5;
    flex-shrink: 0;
    margin-left: auto;
  }

  .x-site .x-acc-item__head:hover {
    background: rgba(0, 229, 255, 0.02);
    color: #fff;
  }

  .x-site .x-acc-item__head:hover::before {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.3);
  }

  .x-site .x-acc-item__head:hover::after {
    opacity: 1;
  }

  .x-site .x-acc-item--open .x-acc-item__head {
    color: #fff;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.06), transparent);
  }

  .x-site .x-acc-item--open .x-acc-item__head::before {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.15);
  }

  .x-site .x-acc-item--open .x-acc-item__head::after {
    transform: rotate(-135deg);
    opacity: 1;
  }

  .x-site .x-acc-item__body {
    display: none;
    padding: 0 24px 22px 72px;
    background: transparent;
  }

  .x-site .x-acc-item--open .x-acc-item__body {
    display: block;
    animation: acc-fade-in 0.45s ease forwards;
  }

  .x-site .x-acc-body-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .x-site .x-acc-body-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .x-site .x-acc-body-row__label {
    font-size: 11px;
    font-family: var(--x-ff-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--x-accent);
    font-weight: 700;
  }

  .x-site .x-acc-body-row__value {
    color: var(--x-text);
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .x-site .x-acc-body-row__value a {
    color: var(--x-accent);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 229, 255, 0.3);
    transition: border-color 0.2s;
  }

  .x-site .x-acc-body-row__value a:hover {
    border-bottom-color: var(--x-accent);
  }

  @keyframes acc-fade-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

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

  /* === AUTONOMY SWITCHER (v0.6 Redesign) === */
  .x-site .x-autonomy-switcher {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: var(--x-sp-7) auto var(--x-sp-6);
    max-width: 800px;
    padding: 0;
  }



  .x-site .x-auto-btn {
    position: relative;
    z-index: 3;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    outline: none;
    flex: 1;
  }

  .x-site .x-auto-btn__ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--x-surface);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }

  .x-site .x-auto-btn__ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed var(--x-accent);
    opacity: 0;
    transform: rotate(0deg);
    transition: all 0.4s ease;
  }

  .x-site .x-auto-btn--active .x-auto-btn__ring {
    border-color: var(--x-accent);
    background: rgba(0, 229, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3), inset 0 0 10px rgba(0, 229, 255, 0.2);
    transform: scale(1.1);
  }

  .x-site .x-auto-btn--active .x-auto-btn__ring::before {
    opacity: 1;
    animation: auto-spin 10s linear infinite;
  }

  @keyframes auto-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .x-site .x-auto-btn__text {
    font-family: var(--x-ff-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--x-muted);
    transition: color 0.3s ease;
  }

  .x-site .x-auto-btn--active .x-auto-btn__text {
    color: var(--x-accent);
    text-shadow: 0 0 8px var(--x-accent);
  }

  .x-site .x-auto-btn__label {
    font-family: var(--x-ff-head);
    font-size: var(--x-fs-5);
    font-weight: 600;
    color: var(--x-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    text-align: center;
  }

  .x-site .x-auto-btn--active .x-auto-btn__label {
    color: var(--x-text);
  }

  .x-site .x-auto-btn:hover .x-auto-btn__ring {
    border-color: rgba(0, 229, 255, 0.5);
    transform: scale(1.05);
  }

  .x-site .x-auto-btn:hover .x-auto-btn__text {
    color: #fff;
  }

  .x-site .x-auto-panel {
    display: none;
    animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .x-site .x-auto-panel--active {
    display: block;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(15px);
    }

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

  .x-site .x-auto-panel__inner {
    position: relative;
    background: rgba(19, 27, 46, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 16px;
    padding: var(--x-sp-7);
    overflow: hidden;
    min-height: 280px;
  }

  .x-site .x-auto-panel__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--x-accent), transparent);
    opacity: 0.5;
  }

  .x-site .x-auto-panel__bg-level {
    position: absolute;
    top: -30px;
    right: 20px;
    font-family: var(--x-ff-mono);
    font-size: 12rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 229, 255, 0.03);
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }

  .x-site .x-auto-panel__content {
    position: relative;
    z-index: 1;
    max-width: 850px;
  }

  .x-site .x-auto-panel__title {
    font-size: var(--x-fs-3);
    font-weight: 700;
    margin-bottom: var(--x-sp-4);
    color: var(--x-text);
  }

  @media(max-width: 768px) {
    .x-site .x-autonomy-switcher {
      flex-direction: column;
      gap: 16px;
      padding: 0;
      margin-bottom: var(--x-sp-6);
    }

    .x-site .x-auto-track,
    .x-site .x-auto-progress {
      display: none;
    }

    .x-site .x-auto-btn {
      flex-direction: row;
      justify-content: flex-start;
      padding: 12px 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      background: rgba(19, 27, 46, 0.3);
    }

    .x-site .x-auto-btn__ring {
      width: 32px;
      height: 32px;
    }

    .x-site .x-auto-btn__text {
      font-size: 1rem;
    }

    .x-site .x-auto-btn--active {
      border-color: rgba(0, 229, 255, 0.3);
      background: rgba(0, 229, 255, 0.05);
    }

    .x-site .x-auto-panel__inner {
      padding: var(--x-sp-5);
    }

    .x-site .x-auto-panel__bg-level {
      font-size: 6rem;
      top: 10px;
      right: 10px;
    }
  }

  .x-site .x-card__text,
  .x-site .x-hero__bullets,
  .x-site .x-step__chips,
  .x-site .x-auto-panel__content>p,
  .x-site .x-auto-panel__content>a {
    position: relative;
    z-index: 1;
  }

  /* Drawer */
  .x-site .x-drawer {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
  }

  .x-site .x-drawer--open {
    opacity: 1;
    pointer-events: auto;
  }

  .x-site .x-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
  }

  .x-site .x-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 480px;
    max-width: 100%;
    background: var(--x-bg);
    border-left: 1px solid var(--x-line);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: var(--x-sp-6);
    overflow-y: auto;
    padding-top: 80px;
  }

  .x-site .x-drawer--open .x-drawer__panel {
    transform: translateX(0);
  }

  .x-site .x-drawer__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: 1px solid var(--x-line);
    width: 40px;
    height: 40px;
    color: var(--x-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .x-site .x-drawer__close:hover {
    border-color: var(--x-accent);
    color: var(--x-accent);
  }

  /* === v0.3 VISUALS (FUI) === */
  @keyframes scanline {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: translateY(100vh);
    }
  }

  .x-site .x-scanline {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 999;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--x-accent), transparent);
    opacity: 0.3;
    animation: scanline 4s linear infinite;
  }

  /* Glitch Effect on Hover for Headings */
  .x-site .x-glitch:hover {
    position: relative;
    animation: glitch-anim 0.3s infinite;
  }

  @keyframes glitch-anim {
    0% {
      transform: translate(0);
    }

    20% {
      transform: translate(-2px, 2px);
    }

    40% {
      transform: translate(-2px, -2px);
    }

    60% {
      transform: translate(2px, 2px);
    }

    80% {
      transform: translate(2px, -2px);
    }

    100% {
      transform: translate(0);
    }
  }

  /* Dashboard Grid Background */
  .x-site .x-dash-grid {
    background-image:
      linear-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 229, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid var(--x-accent-alpha);
  }

  /* Radar Animation */
  @keyframes radar-spin {
    from {
      transform: rotate(0deg);
    }

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

  .x-site .x-radar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 229, 255, 0.2) 60deg, transparent 60deg);
    animation: radar-spin 4s linear infinite;
    position: absolute;
    inset: 0;
  }

  /* Bar Chart Animation */
  @keyframes grow-bar {
    from {
      height: 0;
    }

    to {
      height: var(--h);
    }
  }

  .x-site .x-bar {
    width: 8px;
    background: var(--x-accent);
    bottom: 0;
    position: absolute;
    animation: grow-bar 1s ease-out forwards;
    opacity: 0.8;
  }

  .x-site .x-bar:nth-child(2) {
    background: var(--x-muted);
  }

  /* Responsive Mobile */
  @media(max-width:768px) {
    .x-site .x-hero__grid {
      grid-template-columns: 1fr;
    }

    .x-site .x-stepper {
      flex-direction: column;
    }

    .x-site .x-drawer__panel {
      width: 100%;
    }

    .x-site .x-h2 {
      font-size: 1.75rem;
    }
  }

  @media(prefers-reduced-motion:reduce) {
    .x-site * {
      animation: none !important;
      transition: none !important;
    }
  }


  /* === PATCH v0.3: missing component styles (trust badges, drawer docs, chips, self-check, contacts, form steps) === */
  .x-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--x-sp-4)
  }

  /* === TRUST STRIP (Premium v2 — Animated Badges) === */
  .x-trust {
    padding: var(--x-sp-5) 0;
    border-top: 1px solid var(--x-line);
    border-bottom: 1px solid var(--x-line);
    background:
      linear-gradient(90deg, rgba(19, 27, 46, .4), rgba(0, 229, 255, .04) 50%, rgba(19, 27, 46, .4)),
      radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, 0.06), transparent 70%);
    position: relative;
    overflow: hidden;
  }

  /* Ambient shimmer line across the strip */
  .x-trust::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--x-accent), transparent);
    animation: trustShimmer 6s ease-in-out infinite;
  }

  @keyframes trustShimmer {
    0%, 100% { left: -60%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
  }

  .x-trust__row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }

  /* --- Badge base --- */
  .x-badge {
    --b-color: #00e5ff; /* default fallback */
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 14px;
    border: 1px solid color-mix(in srgb, var(--b-color) 20%, transparent);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(19, 27, 46, 0.7), rgba(11, 17, 32, 0.85));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--x-text);
    font-size: 13px;
    font-family: var(--x-ff-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    isolation: isolate;
    transition:
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.4s ease,
      box-shadow 0.4s ease,
      background 0.4s ease,
      opacity 0.4s ease;

    /* Staggered entrance */
    opacity: 0;
    animation: badgeEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               badgeFloat 4s ease-in-out infinite;
    animation-delay: calc(var(--badge-i, 0) * 0.12s), calc(0.8s + var(--badge-i, 0) * 0.12s);
  }

  /* Per-badge colors */
  .x-badge:nth-child(1) { --badge-i: 0; --b-color: #10b981; } /* Security → Emerald */
  .x-badge:nth-child(2) { --badge-i: 1; --b-color: #f59e0b; } /* Safety → Amber */
  .x-badge:nth-child(3) { --badge-i: 2; --b-color: #06b6d4; } /* Integration → Cyan */
  .x-badge:nth-child(4) { --badge-i: 3; --b-color: #a855f7; } /* Compliance → Violet */
  .x-badge:nth-child(5) { --badge-i: 4; --b-color: #f43f5e; } /* Procurement → Rose */

  /* Entrance animation */
  @keyframes badgeEnter {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.92);
      filter: blur(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  /* Subtle idle float */
  @keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }

  /* --- Sweep shine (idle) --- */
  .x-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      105deg,
      transparent 35%,
      color-mix(in srgb, var(--b-color) 12%, transparent) 45%,
      rgba(255, 255, 255, 0.06) 50%,
      color-mix(in srgb, var(--b-color) 12%, transparent) 55%,
      transparent 65%
    );
    background-size: 250% 100%;
    animation: badgeSweep 5s ease-in-out infinite;
    animation-delay: calc(var(--badge-i, 0) * 0.6s);
    pointer-events: none;
  }

  @keyframes badgeSweep {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: -50% 0; }
  }

  /* --- Conic gradient border layer (visible on hover) --- */
  .x-badge::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    padding: 1px;
    background: conic-gradient(
      from var(--badge-angle, 0deg),
      color-mix(in srgb, var(--b-color) 60%, transparent),
      color-mix(in srgb, var(--b-color) 20%, transparent),
      color-mix(in srgb, var(--b-color) 5%, transparent),
      color-mix(in srgb, var(--b-color) 20%, transparent),
      color-mix(in srgb, var(--b-color) 60%, transparent)
    );
    -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.4s ease;
    pointer-events: none;
    z-index: -1;
    animation: badgeBorderSpin 3s linear infinite;
  }

  @keyframes badgeBorderSpin {
    to { --badge-angle: 360deg; }
  }

  /* Register custom property for conic gradient animation */
  @property --badge-angle {
    syntax: '';
    initial-value: 0deg;
    inherits: false;
  }

  /* --- Hover state --- */
  .x-badge:hover {
    opacity: 1;
    border-color: color-mix(in srgb, var(--b-color) 55%, transparent);
    color: #fff;
    background: linear-gradient(135deg, rgba(19, 27, 46, 0.9), color-mix(in srgb, var(--b-color) 8%, transparent));
    box-shadow:
      0 6px 30px color-mix(in srgb, var(--b-color) 20%, transparent),
      0 0 40px color-mix(in srgb, var(--b-color) 10%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(-5px) scale(1.03);
    animation-name: none;
  }

  .x-badge:hover::after {
    opacity: 1;
  }

  .x-badge:hover::before {
    animation-play-state: paused;
    background-position: -50% 0;
    opacity: 0.5;
  }

  /* --- Active/Click --- */
  .x-badge:active {
    transform: translateY(0px) scale(0.97);
    box-shadow:
      0 2px 12px color-mix(in srgb, var(--b-color) 35%, transparent),
      inset 0 2px 8px color-mix(in srgb, var(--b-color) 15%, transparent);
    transition-duration: 0.1s;
  }

  .x-badge:focus-visible {
    outline: 2px solid var(--x-accent);
    outline-offset: 3px;
  }

  /* --- Icon orb --- */
  .x-badge__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--b-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--b-color) 25%, transparent);
    color: var(--b-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--b-color) 15%, transparent);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    z-index: 2;
  }

  /* Icon orb radar pulse */
  .x-badge__icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--b-color) 35%, transparent);
    opacity: 0;
    animation: iconRadar 3s ease-out infinite;
    animation-delay: calc(var(--badge-i, 0) * 0.5s);
    pointer-events: none;
  }

  @keyframes iconRadar {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    15% {
      opacity: 0.6;
    }
    100% {
      opacity: 0;
      transform: scale(1.8);
      border-width: 0px;
    }
  }

  /* Icon hover */
  .x-badge:hover .x-badge__icon {
    background: var(--b-color);
    color: #0b1120;
    border-color: transparent;
    box-shadow: 0 0 20px color-mix(in srgb, var(--b-color) 55%, transparent), 0 0 6px #fff;
    transform: scale(1.12) rotate(-6deg);
  }

  .x-badge:hover .x-badge__icon::before {
    animation: none;
    opacity: 0;
  }

  /* --- Mobile responsive --- */
  @media (max-width: 520px) {
    .x-trust__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .x-badge {
      padding: 10px 12px;
      font-size: 11px;
      gap: 8px;
      border-radius: 10px;
      justify-content: flex-start;
    }

    .x-badge__icon {
      width: 26px;
      height: 26px;
      border-radius: 8px;
    }

    /* Last badge spans full width if odd count */
    .x-badge:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      justify-content: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .x-badge,
    .x-badge::before,
    .x-badge::after,
    .x-badge__icon::before {
      animation: none !important;
    }

    .x-badge {
      opacity: 1;
    }
  }

  .x-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px dashed var(--x-line);
    border-radius: 999px;
    color: var(--x-muted);
    font-size: var(--x-fs-6);
    background: rgba(11, 17, 32, .25)
  }

  .x-step__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: var(--x-sp-3)
  }

  .x-selfcheck {
    border: 1px solid var(--x-line);
    background: rgba(19, 27, 46, .35);
    padding: var(--x-sp-5);
    border-radius: var(--x-r-3)
  }



  .x-selfcheck__result {
    margin-top: var(--x-sp-3);
    padding: var(--x-sp-3);
    border-left: 2px solid var(--x-accent);
    background: rgba(0, 229, 255, .06);
    color: var(--x-text);
    font-size: var(--x-fs-5)
  }

  .x-contacts {
    padding: var(--x-sp-8) 0
  }

  .x-contacts__row {
    margin-top: var(--x-sp-5);
    display: flex;
    gap: var(--x-sp-4);
    justify-content: center;
    flex-wrap: wrap
  }

  .x-contacts__item {
    padding: var(--x-sp-3) var(--x-sp-4);
    border: 1px solid var(--x-line);
    border-radius: var(--x-r-2);
    background: rgba(19, 27, 46, .45);
    font-family: var(--x-ff-mono);
    font-size: var(--x-fs-5)
  }

  .x-form-cta {
    padding: var(--x-sp-8) 0
  }

  .x-form-cta__steps {
    margin-top: var(--x-sp-5);
    display: flex;
    gap: var(--x-sp-4);
    justify-content: center;
    flex-wrap: wrap
  }

  .x-form-cta__step {
    padding: var(--x-sp-3) var(--x-sp-4);
    border: 1px solid var(--x-line);
    border-radius: var(--x-r-2);
    background: rgba(19, 27, 46, .45);
    font-size: var(--x-fs-5);
    min-width: 180px
  }

  .x-form-cta__step strong {
    display: block;
    font-family: var(--x-ff-mono);
    color: var(--x-accent);
    margin-bottom: 4px
  }

  .x-drawer__title {
    font-size: var(--x-fs-3);
    margin: 0 0 var(--x-sp-2);
    letter-spacing: .02em
  }

  .x-drawer__docs {
    list-style: none;
    padding: 0;
    margin: var(--x-sp-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--x-sp-3)
  }

  .x-drawer__doc {
    display: flex;
    align-items: center;
    gap: var(--x-sp-3);
    padding: var(--x-sp-3);
    border: 1px solid var(--x-line);
    border-radius: var(--x-r-2);
    background: rgba(19, 27, 46, .45)
  }

  .x-drawer__doc-icon {
    width: 28px;
    min-width: 28px;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .x-drawer__doc .x-btn {
    flex-shrink: 0;
    white-space: nowrap
  }

  .x-drawer__doc-name {
    font-weight: 600
  }

  .x-drawer__doc-desc {
    margin-top: 2px;
    color: var(--x-muted);
    font-size: var(--x-fs-6)
  }

  .x-doc-link {
    color: var(--x-text)
  }

  @media(max-width:768px) {
    .x-form-cta__step {
      min-width: unset;
      width: 100%
    }
  }

  /* === NEW DYNAMIC HOTSPOTS === */
  .x-site .x-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
  }

  .x-site .x-hotspot {
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 12px;
    outline: none;
    width: max-content;
    /* initial state for entry animation */
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Target predefined spots for the 5 dynamic items */
  .x-site .x-hotspot:nth-child(1) {
    top: 12%;
    left: 20px;
    --h-delay: 0.1s;
    animation-delay: 0.1s;
  }

  .x-site .x-hotspot:nth-child(2) {
    top: 31%;
    left: 20px;
    --h-delay: 0.2s;
    animation-delay: 0.2s;
  }

  .x-site .x-hotspot:nth-child(3) {
    top: 50%;
    left: 20px;
    --h-delay: 0.3s;
    animation-delay: 0.3s;
  }

  .x-site .x-hotspot:nth-child(4) {
    top: 69%;
    left: 20px;
    --h-delay: 0.4s;
    animation-delay: 0.4s;
  }

  .x-site .x-hotspot:nth-child(5) {
    top: 88%;
    left: 20px;
    --h-delay: 0.5s;
    animation-delay: 0.5s;
  }

  @keyframes fade-up-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

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

  .x-site .x-hotspot::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 229, 255, 0.8) 50%, transparent 50%);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    animation: dash-flow 1.5s linear infinite;
    opacity: 0.3;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    transform-origin: left;
    transform: scaleX(0);
    animation: dash-flow 1.5s linear infinite, draw-line 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--h-delay, 0s) + 0.5s) forwards;
  }

  /* Only invert direction, keep the draw-line animation intact */
  .x-site .x-hotspot:nth-child(even)::before {
    animation: dash-flow-reverse 1.5s linear infinite, draw-line 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--h-delay, 0s) + 0.5s) forwards;
  }

  @keyframes draw-line {
    from {
      transform: scaleX(0);
      opacity: 0;
    }

    to {
      transform: scaleX(1);
      opacity: 0.3;
    }
  }

  @keyframes dash-flow {
    from {
      background-position: 0 0;
    }

    to {
      background-position: -20px 0;
    }
  }

  @keyframes dash-flow-reverse {
    from {
      background-position: 0 0;
    }

    to {
      background-position: 20px 0;
    }
  }

  .x-site .x-hotspot__beacon {
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 229, 255, 0.6);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2), inset 0 0 8px rgba(0, 229, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    background: rgba(19, 27, 46, 0.8);
    z-index: 2;
  }

  .x-site .x-hotspot__beacon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--x-accent);
    opacity: 0;
    transform: scale(0.5);
    animation: radar-ring 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }

  /* Stagger radar rings slightly based on nth-child */
  .x-site .x-hotspot:nth-child(2) .x-hotspot__beacon::before {
    animation-delay: 0.5s;
  }

  .x-site .x-hotspot:nth-child(3) .x-hotspot__beacon::before {
    animation-delay: 1.0s;
  }

  .x-site .x-hotspot:nth-child(4) .x-hotspot__beacon::before {
    animation-delay: 1.5s;
  }

  .x-site .x-hotspot:nth-child(5) .x-hotspot__beacon::before {
    animation-delay: 2.0s;
  }

  @keyframes radar-ring {
    0% {
      opacity: 0;
      transform: scale(0.5);
      border-width: 2px;
    }

    20% {
      opacity: 0.6;
      transform: scale(1.2);
    }

    100% {
      opacity: 0;
      transform: scale(3.5);
      border-width: 0px;
    }
  }

  .x-site .x-hotspot__beacon::after {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--x-accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--x-accent);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .x-site .x-hotspot__callout {
    background: linear-gradient(135deg, rgba(19, 27, 46, 0.95), rgba(11, 17, 32, 0.98));
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-left: 3px solid var(--x-accent);
    padding: 14px 18px;
    border-radius: 6px;
    backdrop-filter: blur(10px);
    max-width: 320px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left center;
    opacity: 0;
    transform: translateX(-10px) scale(0.95);
    animation: callout-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--h-delay, 0s) + 0.6s) forwards;
    position: relative;
    overflow: hidden;
  }

  /* Sleek shine effect on the callout */
  .x-site .x-hotspot__callout::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.1), transparent);
    transform: skewX(-20deg);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes callout-enter {
    from {
      opacity: 0;
      transform: translateX(-10px) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }

  .x-site .x-hotspot__key {
    font-family: var(--x-ff-mono);
    color: var(--x-accent);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Tech purely decorative dot next to KEY */
  .x-site .x-hotspot__key::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--x-accent);
    border-radius: 1px;
    box-shadow: 0 0 6px var(--x-accent);
  }

  .x-site .x-hotspot__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--x-text);
    opacity: 0.85;
    transition: opacity 0.3s ease;
  }

  /* === HOVER & ACTIVE STATES === */
  .x-site .x-hotspot:hover .x-hotspot__callout,
  .x-site .x-hotspot:focus .x-hotspot__callout,
  .x-site .x-hotspot.is-active .x-hotspot__callout {
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 229, 255, 0.1);
    transform: translateX(5px) scale(1.02);
  }

  .x-site .x-hotspot:hover .x-hotspot__callout::after,
  .x-site .x-hotspot:focus .x-hotspot__callout::after,
  .x-site .x-hotspot.is-active .x-hotspot__callout::after {
    left: 200%;
    transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .x-site .x-hotspot:hover .x-hotspot__text,
  .x-site .x-hotspot:focus .x-hotspot__text,
  .x-site .x-hotspot.is-active .x-hotspot__text {
    opacity: 1;
  }

  .x-site .x-hotspot:hover .x-hotspot__beacon,
  .x-site .x-hotspot:focus .x-hotspot__beacon,
  .x-site .x-hotspot.is-active .x-hotspot__beacon {
    background: rgba(0, 229, 255, 0.15);
    border-color: var(--x-accent);
    transform: scale(1.3);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
  }

  /* Intensify beacon center on hover */
  .x-site .x-hotspot:hover .x-hotspot__beacon::after,
  .x-site .x-hotspot:focus .x-hotspot__beacon::after,
  .x-site .x-hotspot.is-active .x-hotspot__beacon::after {
    transform: scale(1.5);
    background: #fff;
    box-shadow: 0 0 15px var(--x-accent), 0 0 5px #fff;
  }

  .x-site .x-hotspot:hover::before,
  .x-site .x-hotspot:focus::before,
  .x-site .x-hotspot.is-active::before {
    opacity: 0.8;
    background-image: linear-gradient(to right, rgba(0, 229, 255, 1) 50%, transparent 50%);
    width: 80px;
    transform: scaleX(1) !important;
  }

  /* Mobile Interactivity */
  @media(max-width:768px) {
    .x-site .x-hotspot::before {
      display: none;
    }

    .x-site .x-hotspot {
      flex-direction: column !important;
      position: absolute;
    }

    .x-site .x-hotspot:nth-child(1) {
      top: 12%;
      left: 20%;
    }

    .x-site .x-hotspot:nth-child(2) {
      top: 31%;
      left: 35%;
    }

    .x-site .x-hotspot:nth-child(3) {
      top: 50%;
      left: 50%;
    }

    .x-site .x-hotspot:nth-child(4) {
      top: 69%;
      left: 35%;
    }

    .x-site .x-hotspot:nth-child(5) {
      top: 88%;
      left: 20%;
    }

    .x-site .x-hotspot__callout {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      margin-top: 10px;
      opacity: 0;
      pointer-events: none;
      width: max-content;
      max-width: 260px;
      z-index: 100;
      text-align: left !important;
    }

    .x-site .x-hotspot.is-active .x-hotspot__callout {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
  }

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

    .x-site .x-hotspot::before,
    .x-site .x-hotspot__beacon::after {
      animation: none !important;
    }
  }

  /* === ARCHITECTURE 2x2 CARDS (v0.5 Premium AI UI) === */
  .x-site .x-arch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  @media(max-width: 768px) {
    .x-site .x-arch-grid {
      grid-template-columns: 1fr;
    }
  }

  .x-site .x-arch-card {
    position: relative;
    background: rgba(19, 27, 46, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 229, 255, 0.1);
    border-radius: 12px;
    padding: var(--x-sp-6);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .x-site .x-arch-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.4), transparent, transparent, rgba(0, 229, 255, 0.1));
    -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.4s ease;
    pointer-events: none;
  }

  .x-site .x-arch-card:hover {
    transform: translateY(-6px);
    background: rgba(19, 27, 46, 0.8);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 255, 0.15);
    border-color: transparent;
  }

  .x-site .x-arch-card:hover::before {
    opacity: 1;
  }

  .x-site .x-arch-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid rgba(0, 229, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--x-sp-4);
    color: var(--x-accent);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
    transition: all 0.4s ease;
    flex-shrink: 0;
  }

  .x-site .x-arch-card:hover .x-arch-card__icon {
    background: var(--x-accent);
    color: #000;
    box-shadow: 0 0 20px var(--x-accent);
    transform: scale(1.05) rotate(-3deg);
  }

  .x-site .x-arch-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.05), transparent);
    transform: skewX(-20deg);
    transition: none;
  }

  .x-site .x-arch-card:hover::after {
    left: 200%;
    transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .x-site .x-arch-card__title {
    font-family: var(--x-ff-head);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--x-text);
    margin-bottom: var(--x-sp-3);
    transition: color 0.3s ease;
  }

  .x-site .x-arch-card:hover .x-arch-card__title {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }

      /* === HERO BLOCK (Premium v2 — scoped overrides) === */

      /* --- H1 gradient text --- */
      .x-hero h1 {
        background: linear-gradient(135deg, #ffffff 30%, var(--x-accent) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      /* --- Eyebrow pulse dot --- */
      .x-hero .x-hero__eyebrow::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #10b981;
        box-shadow: 0 0 8px #10b981;
        animation: hero-pulse 2s ease-in-out infinite;
        margin-right: 6px;
        flex-shrink: 0;
      }

      @keyframes hero-pulse {

        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }

        50% {
          opacity: 0.4;
          transform: scale(0.7);
        }
      }

      /* --- Visual panel top glow --- */
      .x-hero .x-hero__visual {
        border-top: 2px solid rgba(0, 229, 255, 0.25);
        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 10px 40px rgba(0, 0, 0, 0.4), 0 -4px 20px rgba(0, 229, 255, 0.06);
      }

      /* --- Per-role tab active colors --- */
      /* COO: Red */
      .x-hero .x-tab[data-panel="coo"].x-tab--active {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.08);
      }

      /* Agro: Green */
      .x-hero .x-tab[data-panel="agro"].x-tab--active {
        color: #10b981;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.2);
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.08);
      }

      /* Zoo: Amber */
      .x-hero .x-tab[data-panel="zoo"].x-tab--active {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.08);
      }

      /* Mech: Cyan (default) */
      /* Eng: Purple */
      .x-hero .x-tab[data-panel="eng"].x-tab--active {
        color: #a855f7;
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.2);
        box-shadow: 0 0 12px rgba(168, 85, 247, 0.08);
      }

      /* IT: Silver */
      .x-hero .x-tab[data-panel="it"].x-tab--active {
        color: #94a3b8;
        background: rgba(148, 163, 184, 0.08);
        border: 1px solid rgba(148, 163, 184, 0.2);
        box-shadow: 0 0 12px rgba(148, 163, 184, 0.08);
      }

      /* --- Per-role hotspot callout left-border colors --- */
      .x-hero[data-active-role="coo"] .x-hotspot__callout {
        border-left-color: #ef4444;
      }

      .x-hero[data-active-role="coo"] .x-hotspot__key {
        color: #ef4444;
      }

      .x-hero[data-active-role="coo"] .x-hotspot__key::before {
        background: #ef4444;
        box-shadow: 0 0 6px #ef4444;
      }

      .x-hero[data-active-role="coo"] .x-hotspot__beacon {
        border-color: rgba(239, 68, 68, 0.6);
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.2), inset 0 0 8px rgba(239, 68, 68, 0.2);
      }

      .x-hero[data-active-role="coo"] .x-hotspot__beacon::after {
        background: #ef4444;
        box-shadow: 0 0 12px #ef4444;
      }

      .x-hero[data-active-role="coo"] .x-hotspot__beacon::before {
        border-color: #ef4444;
      }

      .x-hero[data-active-role="agro"] .x-hotspot__callout {
        border-left-color: #10b981;
      }

      .x-hero[data-active-role="agro"] .x-hotspot__key {
        color: #10b981;
      }

      .x-hero[data-active-role="agro"] .x-hotspot__key::before {
        background: #10b981;
        box-shadow: 0 0 6px #10b981;
      }

      .x-hero[data-active-role="agro"] .x-hotspot__beacon {
        border-color: rgba(16, 185, 129, 0.6);
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.2), inset 0 0 8px rgba(16, 185, 129, 0.2);
      }

      .x-hero[data-active-role="agro"] .x-hotspot__beacon::after {
        background: #10b981;
        box-shadow: 0 0 12px #10b981;
      }

      .x-hero[data-active-role="agro"] .x-hotspot__beacon::before {
        border-color: #10b981;
      }

      .x-hero[data-active-role="zoo"] .x-hotspot__callout {
        border-left-color: #f59e0b;
      }

      .x-hero[data-active-role="zoo"] .x-hotspot__key {
        color: #f59e0b;
      }

      .x-hero[data-active-role="zoo"] .x-hotspot__key::before {
        background: #f59e0b;
        box-shadow: 0 0 6px #f59e0b;
      }

      .x-hero[data-active-role="zoo"] .x-hotspot__beacon {
        border-color: rgba(245, 158, 11, 0.6);
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.2), inset 0 0 8px rgba(245, 158, 11, 0.2);
      }

      .x-hero[data-active-role="zoo"] .x-hotspot__beacon::after {
        background: #f59e0b;
        box-shadow: 0 0 12px #f59e0b;
      }

      .x-hero[data-active-role="zoo"] .x-hotspot__beacon::before {
        border-color: #f59e0b;
      }

      /* mech = default cyan, no override needed */

      .x-hero[data-active-role="eng"] .x-hotspot__callout {
        border-left-color: #a855f7;
      }

      .x-hero[data-active-role="eng"] .x-hotspot__key {
        color: #a855f7;
      }

      .x-hero[data-active-role="eng"] .x-hotspot__key::before {
        background: #a855f7;
        box-shadow: 0 0 6px #a855f7;
      }

      .x-hero[data-active-role="eng"] .x-hotspot__beacon {
        border-color: rgba(168, 85, 247, 0.6);
        box-shadow: 0 0 15px rgba(168, 85, 247, 0.2), inset 0 0 8px rgba(168, 85, 247, 0.2);
      }

      .x-hero[data-active-role="eng"] .x-hotspot__beacon::after {
        background: #a855f7;
        box-shadow: 0 0 12px #a855f7;
      }

      .x-hero[data-active-role="eng"] .x-hotspot__beacon::before {
        border-color: #a855f7;
      }

      .x-hero[data-active-role="it"] .x-hotspot__callout {
        border-left-color: #94a3b8;
      }

      .x-hero[data-active-role="it"] .x-hotspot__key {
        color: #94a3b8;
      }

      .x-hero[data-active-role="it"] .x-hotspot__key::before {
        background: #94a3b8;
        box-shadow: 0 0 6px #94a3b8;
      }

      .x-hero[data-active-role="it"] .x-hotspot__beacon {
        border-color: rgba(148, 163, 184, 0.6);
        box-shadow: 0 0 15px rgba(148, 163, 184, 0.2), inset 0 0 8px rgba(148, 163, 184, 0.2);
      }

      .x-hero[data-active-role="it"] .x-hotspot__beacon::after {
        background: #94a3b8;
        box-shadow: 0 0 12px #94a3b8;
      }

      .x-hero[data-active-role="it"] .x-hotspot__beacon::before {
        border-color: #94a3b8;
      }

      /* --- Per-role hotspot dashed line color --- */
      .x-hero[data-active-role="coo"] .x-hotspot::before {
        background-image: linear-gradient(to right, rgba(239, 68, 68, 0.8) 50%, transparent 50%);
      }

      .x-hero[data-active-role="agro"] .x-hotspot::before {
        background-image: linear-gradient(to right, rgba(16, 185, 129, 0.8) 50%, transparent 50%);
      }

      .x-hero[data-active-role="zoo"] .x-hotspot::before {
        background-image: linear-gradient(to right, rgba(245, 158, 11, 0.8) 50%, transparent 50%);
      }

      .x-hero[data-active-role="eng"] .x-hotspot::before {
        background-image: linear-gradient(to right, rgba(168, 85, 247, 0.8) 50%, transparent 50%);
      }

      .x-hero[data-active-role="it"] .x-hotspot::before {
        background-image: linear-gradient(to right, rgba(148, 163, 184, 0.8) 50%, transparent 50%);
      }

      /* --- Per-role hover/active callout border --- */
      .x-hero[data-active-role="coo"] .x-hotspot:hover .x-hotspot__callout,
      .x-hero[data-active-role="coo"] .x-hotspot.is-active .x-hotspot__callout {
        border-color: rgba(239, 68, 68, 0.6);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.1);
      }

      .x-hero[data-active-role="agro"] .x-hotspot:hover .x-hotspot__callout,
      .x-hero[data-active-role="agro"] .x-hotspot.is-active .x-hotspot__callout {
        border-color: rgba(16, 185, 129, 0.6);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.1);
      }

      .x-hero[data-active-role="zoo"] .x-hotspot:hover .x-hotspot__callout,
      .x-hero[data-active-role="zoo"] .x-hotspot.is-active .x-hotspot__callout {
        border-color: rgba(245, 158, 11, 0.6);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.1);
      }

      .x-hero[data-active-role="eng"] .x-hotspot:hover .x-hotspot__callout,
      .x-hero[data-active-role="eng"] .x-hotspot.is-active .x-hotspot__callout {
        border-color: rgba(168, 85, 247, 0.6);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.1);
      }

      .x-hero[data-active-role="it"] .x-hotspot:hover .x-hotspot__callout,
      .x-hero[data-active-role="it"] .x-hotspot.is-active .x-hotspot__callout {
        border-color: rgba(148, 163, 184, 0.6);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(148, 163, 184, 0.1);
      }

      /* --- Per-role bullet colors in tab panels --- */
      #panel-coo .x-hero__bullets li::before {
        background: #ef4444;
        box-shadow: 0 0 10px #ef4444, 0 0 3px #ef4444;
      }

      #panel-agro .x-hero__bullets li::before {
        background: #10b981;
        box-shadow: 0 0 10px #10b981, 0 0 3px #10b981;
      }

      #panel-zoo .x-hero__bullets li::before {
        background: #f59e0b;
        box-shadow: 0 0 10px #f59e0b, 0 0 3px #f59e0b;
      }

      #panel-eng .x-hero__bullets li::before {
        background: #a855f7;
        box-shadow: 0 0 10px #a855f7, 0 0 3px #a855f7;
      }

      #panel-it .x-hero__bullets li::before {
        background: #94a3b8;
        box-shadow: 0 0 10px #94a3b8, 0 0 3px #94a3b8;
      }

      /* === HERO HEADLINE — Pain pills, loss accent, value lines === */

      /* Pain-point row */
      .x-hero .x-hero__pain-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: var(--x-sp-3);
      }

      .x-hero .x-hero__pain-pill {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: var(--x-ff-mono);
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #fca5a5;
        background:
          linear-gradient(rgba(239, 68, 68, 0.10), rgba(239, 68, 68, 0.10)),
          linear-gradient(105deg, transparent 40%, rgba(239, 68, 68, 0.12) 50%, transparent 60%);
        background-size: 100% 100%, 250% 100%;
        border: 1px solid rgba(239, 68, 68, 0.35);
        border-radius: 24px;
        padding: 11px 20px 11px 15px;
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.08), inset 0 0 12px rgba(239, 68, 68, 0.04);
        position: relative;
        overflow: hidden;
        animation:
          painSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both,
          painSweep 4s ease-in-out infinite;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
          box-shadow 0.35s ease,
          border-color 0.35s ease;
      }

      .x-hero .x-hero__pain-pill:nth-child(1) {
        animation-delay: 0s, 1s;
      }

      .x-hero .x-hero__pain-pill:nth-child(2) {
        animation-delay: 0.15s, 1.8s;
      }

      .x-hero .x-hero__pain-pill:nth-child(3) {
        animation-delay: 0.3s, 2.6s;
      }

      .x-hero .x-hero__pain-pill:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 6px 24px rgba(239, 68, 68, 0.18), 0 0 20px rgba(239, 68, 68, 0.12), inset 0 0 14px rgba(239, 68, 68, 0.06);
        border-color: rgba(239, 68, 68, 0.6);
      }

      /* Glow ring on hover */
      .x-hero .x-hero__pain-pill::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 24px;
        background: conic-gradient(from 0deg, transparent 0%, rgba(239, 68, 68, 0.3) 25%, transparent 50%);
        opacity: 0;
        animation: painBorderSpin 3s linear infinite;
        transition: opacity 0.4s ease;
        z-index: -1;
      }

      .x-hero .x-hero__pain-pill:hover::after {
        opacity: 1;
      }

      @keyframes painSlideIn {
        from {
          opacity: 0;
          transform: translateX(-28px);
          filter: blur(6px);
        }

        to {
          opacity: 1;
          transform: translateX(0);
          filter: blur(0);
        }
      }

      @keyframes painSweep {

        0%,
        100% {
          background-position: 0% 0%, -100% 0%;
        }

        50% {
          background-position: 0% 0%, 200% 0%;
        }
      }

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

      .x-hero .x-hero__pain-pill svg {
        width: 20px;
        height: 20px;
        stroke: #ef4444;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
        filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
        animation: painIconPulse 2.5s ease-in-out infinite;
      }

      .x-hero .x-hero__pain-pill:nth-child(1) svg {
        animation-delay: 0s;
      }

      .x-hero .x-hero__pain-pill:nth-child(2) svg {
        animation-delay: 0.8s;
      }

      .x-hero .x-hero__pain-pill:nth-child(3) svg {
        animation-delay: 1.6s;
      }

      @keyframes painIconPulse {

        0%,
        100% {
          transform: scale(1);
          filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
        }

        50% {
          transform: scale(1.18);
          filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.8));
        }
      }

      /* H1 loss accent */
      .x-hero .x-hero__loss {
        background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 800;
        animation: heroPulseGlow 3s ease-in-out infinite;
        filter: drop-shadow(0 0 18px rgba(239, 68, 68, 0.25));
      }

      @keyframes heroPulseGlow {

        0%,
        100% {
          filter: drop-shadow(0 0 18px rgba(239, 68, 68, 0.25));
        }

        50% {
          filter: drop-shadow(0 0 28px rgba(239, 68, 68, 0.45));
        }
      }

      /* H1 first line — smaller */
      .x-hero h1 {
        font-size: clamp(1.1rem, 2vw, 1.45rem);
      }

      .x-hero .x-hero__h1-first {
        display: block;
        font-size: 0.5em;
        font-weight: 500;
        letter-spacing: 0.01em;
        -webkit-text-fill-color: var(--x-muted);
      }

      .x-hero .x-hero__h1-first .x-hero__loss {
        font-weight: 800;
        font-size: 1.3em;
      }

      /* H1 second line — pushed down */
      .x-hero .x-hero__h1-sub {
        display: block;
        margin-top: var(--x-sp-3);
        -webkit-text-fill-color: var(--x-accent);
        font-weight: 600;
        font-size: 1.15em;
        letter-spacing: -0.01em;
      }

      /* Value-proposition lines */
      .x-hero .x-hero__value-lines {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: var(--x-sp-7);
        max-width: 620px;
      }

      .x-hero .x-hero__vl {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 0.92rem;
        color: var(--x-muted);
        line-height: 1.65;
        animation: heroFadeUp 0.5s ease both;
      }

      .x-hero .x-hero__vl:nth-child(1) {
        animation-delay: 0.35s;
      }

      .x-hero .x-hero__vl:nth-child(2) {
        animation-delay: 0.45s;
      }

      .x-hero .x-hero__vl:nth-child(3) {
        animation-delay: 0.55s;
      }

      .x-hero .x-hero__vl:nth-child(4) {
        animation-delay: 0.65s;
      }

      .x-hero .x-hero__vl svg {
        width: 18px;
        height: 18px;
        min-width: 18px;
        stroke: var(--x-accent);
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        margin-top: 3px;
        filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.3));
      }

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

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

      @media(max-width: 600px) {
        .x-hero .x-hero__pain-row {
          gap: 6px;
        }

        .x-hero .x-hero__pain-pill {
          font-size: 10px;
          padding: 5px 10px 5px 8px;
        }

        .x-hero .x-hero__value-lines {
          gap: 10px;
        }

        .x-hero .x-hero__vl {
          font-size: 0.84rem;
        }
      }

      /* === OPERATIONAL MODEL (Premium v2 — scoped overrides) === */

      /* --- Scroll-reveal --- */
      #x-model .mdl-anim {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-model .mdl-anim--visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* --- Step 1: Green (#10b981) — Планирование --- */
      #x-model .x-acc-item:nth-child(1) .x-acc-item__head::before {
        color: #10b981;
        border-color: rgba(16, 185, 129, 0.2);
        background: rgba(16, 185, 129, 0.06);
      }

      #x-model .x-acc-item:nth-child(1).x-acc-item--open {
        border-color: rgba(16, 185, 129, 0.35);
        box-shadow: 0 6px 28px rgba(16, 185, 129, 0.06), 0 0 0 1px rgba(16, 185, 129, 0.08);
      }

      #x-model .x-acc-item:nth-child(1):hover {
        border-color: rgba(16, 185, 129, 0.2);
      }

      #x-model .x-acc-item:nth-child(1).x-acc-item--open .x-acc-item__head {
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.06), transparent);
      }

      #x-model .x-acc-item:nth-child(1).x-acc-item--open .x-acc-item__head::before {
        background: rgba(16, 185, 129, 0.15);
        border-color: rgba(16, 185, 129, 0.4);
        box-shadow: 0 0 14px rgba(16, 185, 129, 0.15);
      }

      #x-model .x-acc-item:nth-child(1) .x-acc-item__head::after {
        border-color: #10b981;
      }

      #x-model .x-acc-item:nth-child(1) .x-acc-body-row__label {
        color: #10b981;
      }

      #x-model .x-acc-item:nth-child(1) .x-doc-link {
        color: #10b981;
        border-bottom-color: rgba(16, 185, 129, 0.3);
      }

      #x-model .x-acc-item:nth-child(1) .x-doc-link:hover {
        border-bottom-color: #10b981;
      }

      #x-model .x-acc-item:nth-child(1):hover .x-acc-item__head::before {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.3);
      }

      /* --- Step 2: Cyan (default — no overrides needed) --- */

      /* --- Step 3: Amber (#f59e0b) — Исполнение --- */
      #x-model .x-acc-item:nth-child(3) .x-acc-item__head::before {
        color: #f59e0b;
        border-color: rgba(245, 158, 11, 0.2);
        background: rgba(245, 158, 11, 0.06);
      }

      #x-model .x-acc-item:nth-child(3).x-acc-item--open {
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 6px 28px rgba(245, 158, 11, 0.06), 0 0 0 1px rgba(245, 158, 11, 0.08);
      }

      #x-model .x-acc-item:nth-child(3):hover {
        border-color: rgba(245, 158, 11, 0.2);
      }

      #x-model .x-acc-item:nth-child(3).x-acc-item--open .x-acc-item__head {
        background: linear-gradient(90deg, rgba(245, 158, 11, 0.06), transparent);
      }

      #x-model .x-acc-item:nth-child(3).x-acc-item--open .x-acc-item__head::before {
        background: rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.4);
        box-shadow: 0 0 14px rgba(245, 158, 11, 0.15);
      }

      #x-model .x-acc-item:nth-child(3) .x-acc-item__head::after {
        border-color: #f59e0b;
      }

      #x-model .x-acc-item:nth-child(3) .x-acc-body-row__label {
        color: #f59e0b;
      }

      #x-model .x-acc-item:nth-child(3) .x-doc-link {
        color: #f59e0b;
        border-bottom-color: rgba(245, 158, 11, 0.3);
      }

      #x-model .x-acc-item:nth-child(3) .x-doc-link:hover {
        border-bottom-color: #f59e0b;
      }

      #x-model .x-acc-item:nth-child(3):hover .x-acc-item__head::before {
        background: rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.3);
      }

      /* --- Step 4: Purple (#a855f7) — Интеграция --- */
      #x-model .x-acc-item:nth-child(4) .x-acc-item__head::before {
        color: #a855f7;
        border-color: rgba(168, 85, 247, 0.2);
        background: rgba(168, 85, 247, 0.06);
      }

      #x-model .x-acc-item:nth-child(4).x-acc-item--open {
        border-color: rgba(168, 85, 247, 0.35);
        box-shadow: 0 6px 28px rgba(168, 85, 247, 0.06), 0 0 0 1px rgba(168, 85, 247, 0.08);
      }

      #x-model .x-acc-item:nth-child(4):hover {
        border-color: rgba(168, 85, 247, 0.2);
      }

      #x-model .x-acc-item:nth-child(4).x-acc-item--open .x-acc-item__head {
        background: linear-gradient(90deg, rgba(168, 85, 247, 0.06), transparent);
      }

      #x-model .x-acc-item:nth-child(4).x-acc-item--open .x-acc-item__head::before {
        background: rgba(168, 85, 247, 0.15);
        border-color: rgba(168, 85, 247, 0.4);
        box-shadow: 0 0 14px rgba(168, 85, 247, 0.15);
      }

      #x-model .x-acc-item:nth-child(4) .x-acc-item__head::after {
        border-color: #a855f7;
      }

      #x-model .x-acc-item:nth-child(4) .x-acc-body-row__label {
        color: #a855f7;
      }

      #x-model .x-acc-item:nth-child(4) .x-doc-link {
        color: #a855f7;
        border-bottom-color: rgba(168, 85, 247, 0.3);
      }

      #x-model .x-acc-item:nth-child(4) .x-doc-link:hover {
        border-bottom-color: #a855f7;
      }

      #x-model .x-acc-item:nth-child(4):hover .x-acc-item__head::before {
        background: rgba(168, 85, 247, 0.1);
        border-color: rgba(168, 85, 247, 0.3);
      }

      /* --- Step 5: Red (#ef4444) — Документация --- */
      #x-model .x-acc-item:nth-child(5) .x-acc-item__head::before {
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.2);
        background: rgba(239, 68, 68, 0.06);
      }

      #x-model .x-acc-item:nth-child(5).x-acc-item--open {
        border-color: rgba(239, 68, 68, 0.35);
        box-shadow: 0 6px 28px rgba(239, 68, 68, 0.06), 0 0 0 1px rgba(239, 68, 68, 0.08);
      }

      #x-model .x-acc-item:nth-child(5):hover {
        border-color: rgba(239, 68, 68, 0.2);
      }

      #x-model .x-acc-item:nth-child(5).x-acc-item--open .x-acc-item__head {
        background: linear-gradient(90deg, rgba(239, 68, 68, 0.06), transparent);
      }

      #x-model .x-acc-item:nth-child(5).x-acc-item--open .x-acc-item__head::before {
        background: rgba(239, 68, 68, 0.15);
        border-color: rgba(239, 68, 68, 0.4);
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.15);
      }

      #x-model .x-acc-item:nth-child(5) .x-acc-item__head::after {
        border-color: #ef4444;
      }

      #x-model .x-acc-item:nth-child(5) .x-acc-body-row__label {
        color: #ef4444;
      }

      #x-model .x-acc-item:nth-child(5) .x-doc-link {
        color: #ef4444;
        border-bottom-color: rgba(239, 68, 68, 0.3);
      }

      #x-model .x-acc-item:nth-child(5) .x-doc-link:hover {
        border-bottom-color: #ef4444;
      }

      #x-model .x-acc-item:nth-child(5):hover .x-acc-item__head::before {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.3);
      }

      /* === ARCHITECTURE BLOCK (Premium v2 — scoped overrides) === */

      /* --- Scroll-reveal --- */
      #x-platform .pla-anim {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-platform .pla-anim--visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* --- Per-layer card top accents --- */
      #x-platform .x-arch-card {
        border-top: 2px solid transparent;
      }

      #x-platform .x-arch-card--layer1 {
        border-top-color: rgba(16, 185, 129, 0.4);
      }

      #x-platform .x-arch-card--layer2 {
        border-top-color: rgba(0, 229, 255, 0.4);
      }

      #x-platform .x-arch-card--layer3 {
        border-top-color: rgba(245, 158, 11, 0.4);
      }

      #x-platform .x-arch-card--layer4 {
        border-top-color: rgba(168, 85, 247, 0.4);
      }

      /* --- Per-layer icon colors --- */
      #x-platform .x-arch-card--layer1 .x-arch-card__icon {
        background: rgba(16, 185, 129, 0.06);
        border-color: rgba(16, 185, 129, 0.25);
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.08);
      }

      #x-platform .x-arch-card--layer2 .x-arch-card__icon {
        background: rgba(0, 229, 255, 0.06);
        border-color: rgba(0, 229, 255, 0.25);
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.08);
      }

      #x-platform .x-arch-card--layer3 .x-arch-card__icon {
        background: rgba(245, 158, 11, 0.06);
        border-color: rgba(245, 158, 11, 0.25);
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.08);
      }

      #x-platform .x-arch-card--layer4 .x-arch-card__icon {
        background: rgba(168, 85, 247, 0.06);
        border-color: rgba(168, 85, 247, 0.25);
        box-shadow: 0 0 10px rgba(168, 85, 247, 0.08);
      }

      /* --- Per-layer hover glow --- */
      #x-platform .x-arch-card--layer1:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(16, 185, 129, 0.12);
        border-top-color: #10b981;
      }

      #x-platform .x-arch-card--layer1:hover .x-arch-card__icon {
        background: #10b981;
        color: #000;
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
      }

      #x-platform .x-arch-card--layer2:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 255, 0.15);
        border-top-color: var(--x-accent);
      }

      #x-platform .x-arch-card--layer2:hover .x-arch-card__icon {
        background: var(--x-accent);
        color: #000;
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
      }

      #x-platform .x-arch-card--layer3:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 158, 11, 0.12);
        border-top-color: #f59e0b;
      }

      #x-platform .x-arch-card--layer3:hover .x-arch-card__icon {
        background: #f59e0b;
        color: #000;
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
      }

      #x-platform .x-arch-card--layer4:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(168, 85, 247, 0.12);
        border-top-color: #a855f7;
      }

      #x-platform .x-arch-card--layer4:hover .x-arch-card__icon {
        background: #a855f7;
        color: #000;
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
      }

      /* --- Per-layer bullet markers --- */
      #x-platform .x-arch-card--layer1 .x-hero__bullets li::before {
        background: #10b981;
        box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
      }

      #x-platform .x-arch-card--layer2 .x-hero__bullets li::before {
        background: var(--x-accent);
        box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
      }

      #x-platform .x-arch-card--layer3 .x-hero__bullets li::before {
        background: #f59e0b;
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
      }

      #x-platform .x-arch-card--layer4 .x-hero__bullets li::before {
        background: #a855f7;
        box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
      }

      /* --- Layer badge --- */
      #x-platform .x-arch-badge {
        font-family: var(--x-ff-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: 8px;
      }

      #x-platform .x-arch-card--layer1 .x-arch-badge {
        color: #10b981;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.2);
      }

      #x-platform .x-arch-card--layer2 .x-arch-badge {
        color: var(--x-accent);
        background: rgba(0, 229, 255, 0.08);
        border: 1px solid rgba(0, 229, 255, 0.2);
      }

      #x-platform .x-arch-card--layer3 .x-arch-badge {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }

      #x-platform .x-arch-card--layer4 .x-arch-badge {
        color: #a855f7;
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.2);
      }

      /* --- Enhanced selfcheck callout --- */
      #x-platform .x-pla-callout {
        margin-top: var(--x-sp-6);
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(16, 185, 129, 0.15);
        border-left: 3px solid #10b981;
        border-radius: 14px;
        padding: 24px 26px;
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      #x-platform .x-pla-callout:hover {
        border-color: rgba(16, 185, 129, 0.3);
        box-shadow: 0 4px 20px rgba(16, 185, 129, 0.06);
      }

      #x-platform .x-pla-callout__title {
        font-family: var(--x-ff-head);
        font-size: var(--x-fs-4);
        font-weight: 700;
        color: #10b981;
        margin-bottom: var(--x-sp-3);
      }

      #x-platform .x-pla-callout__text {
        color: var(--x-text);
        font-size: 0.88rem;
        line-height: 1.7;
      }

      /* === AUTONOMY LEVELS (Premium v2 — scoped overrides) === */

      /* --- Animated connecting line between buttons --- */
      #x-autonomy .x-autonomy-switcher {
        position: relative;
      }

      #x-autonomy .x-autonomy-switcher::before {
        content: '';
        position: absolute;
        top: 24px;
        left: calc(12.5% + 24px);
        right: calc(12.5% + 24px);
        height: 1px;
        background-image: linear-gradient(to right, rgba(0, 229, 255, 0.5) 50%, transparent 50%);
        background-size: 10px 1px;
        background-repeat: repeat-x;
        z-index: 0;
        animation: aut-dash-flow 1.5s linear infinite;
      }

      @keyframes aut-dash-flow {
        from {
          background-position: 0 0;
        }

        to {
          background-position: -20px 0;
        }
      }

      @media(max-width: 768px) {
        #x-autonomy .x-autonomy-switcher::before {
          display: none;
        }
      }

      /* --- Per-level button ring colors --- */
      /* A1: Green */
      #x-autonomy .x-auto-btn[data-level="1"].x-auto-btn--active .x-auto-btn__ring {
        border-color: #10b981;
        background: rgba(16, 185, 129, 0.1);
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), inset 0 0 10px rgba(16, 185, 129, 0.2);
      }

      #x-autonomy .x-auto-btn[data-level="1"].x-auto-btn--active .x-auto-btn__ring::before {
        border-color: #10b981;
      }

      #x-autonomy .x-auto-btn[data-level="1"].x-auto-btn--active .x-auto-btn__text {
        color: #10b981;
        text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
      }

      #x-autonomy .x-auto-btn[data-level="1"].x-auto-btn--active .x-auto-btn__label {
        color: #10b981;
      }

      #x-autonomy .x-auto-btn[data-level="1"]:hover .x-auto-btn__ring {
        border-color: rgba(16, 185, 129, 0.5);
      }

      /* A2: Cyan (default accent — keep as-is) */

      /* A3: Amber */
      #x-autonomy .x-auto-btn[data-level="3"].x-auto-btn--active .x-auto-btn__ring {
        border-color: #f59e0b;
        background: rgba(245, 158, 11, 0.1);
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 0 10px rgba(245, 158, 11, 0.2);
      }

      #x-autonomy .x-auto-btn[data-level="3"].x-auto-btn--active .x-auto-btn__ring::before {
        border-color: #f59e0b;
      }

      #x-autonomy .x-auto-btn[data-level="3"].x-auto-btn--active .x-auto-btn__text {
        color: #f59e0b;
        text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
      }

      #x-autonomy .x-auto-btn[data-level="3"].x-auto-btn--active .x-auto-btn__label {
        color: #f59e0b;
      }

      #x-autonomy .x-auto-btn[data-level="3"]:hover .x-auto-btn__ring {
        border-color: rgba(245, 158, 11, 0.5);
      }

      /* A4: Purple */
      #x-autonomy .x-auto-btn[data-level="4"].x-auto-btn--active .x-auto-btn__ring {
        border-color: #a855f7;
        background: rgba(168, 85, 247, 0.1);
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 10px rgba(168, 85, 247, 0.2);
      }

      #x-autonomy .x-auto-btn[data-level="4"].x-auto-btn--active .x-auto-btn__ring::before {
        border-color: #a855f7;
      }

      #x-autonomy .x-auto-btn[data-level="4"].x-auto-btn--active .x-auto-btn__text {
        color: #a855f7;
        text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
      }

      #x-autonomy .x-auto-btn[data-level="4"].x-auto-btn--active .x-auto-btn__label {
        color: #a855f7;
      }

      #x-autonomy .x-auto-btn[data-level="4"]:hover .x-auto-btn__ring {
        border-color: rgba(168, 85, 247, 0.5);
      }

      /* --- Per-level panel top line (3px colored gradient) --- */
      #x-autonomy .x-auto-panel__inner::before {
        height: 3px !important;
      }

      #x-autonomy #auto-panel-1 .x-auto-panel__inner {
        border-color: rgba(16, 185, 129, 0.2);
      }

      #x-autonomy #auto-panel-1 .x-auto-panel__inner::before {
        background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
      }

      #x-autonomy #auto-panel-2 .x-auto-panel__inner {
        border-color: rgba(0, 229, 255, 0.2);
      }

      #x-autonomy #auto-panel-2 .x-auto-panel__inner::before {
        background: linear-gradient(90deg, transparent, var(--x-accent), transparent) !important;
      }

      #x-autonomy #auto-panel-3 .x-auto-panel__inner {
        border-color: rgba(245, 158, 11, 0.2);
      }

      #x-autonomy #auto-panel-3 .x-auto-panel__inner::before {
        background: linear-gradient(90deg, transparent, #f59e0b, transparent) !important;
      }

      #x-autonomy #auto-panel-4 .x-auto-panel__inner {
        border-color: rgba(168, 85, 247, 0.2);
      }

      #x-autonomy #auto-panel-4 .x-auto-panel__inner::before {
        background: linear-gradient(90deg, transparent, #a855f7, transparent) !important;
      }

      /* --- Per-level watermark tint --- */
      #x-autonomy #auto-panel-1 .x-auto-panel__bg-level {
        color: rgba(16, 185, 129, 0.04);
      }

      #x-autonomy #auto-panel-2 .x-auto-panel__bg-level {
        color: rgba(0, 229, 255, 0.04);
      }

      #x-autonomy #auto-panel-3 .x-auto-panel__bg-level {
        color: rgba(245, 158, 11, 0.04);
      }

      #x-autonomy #auto-panel-4 .x-auto-panel__bg-level {
        color: rgba(168, 85, 247, 0.04);
      }

      /* --- Per-level panel title color --- */
      #x-autonomy #auto-panel-1 .x-auto-panel__title {
        color: #10b981;
      }

      #x-autonomy #auto-panel-2 .x-auto-panel__title {
        color: var(--x-accent);
      }

      #x-autonomy #auto-panel-3 .x-auto-panel__title {
        color: #f59e0b;
      }

      #x-autonomy #auto-panel-4 .x-auto-panel__title {
        color: #a855f7;
      }

      /* --- Per-level bullet colors --- */
      #x-autonomy #auto-panel-1 .x-hero__bullets li::before {
        background: #10b981;
        box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
      }

      #x-autonomy #auto-panel-2 .x-hero__bullets li::before {
        background: var(--x-accent);
        box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
      }

      #x-autonomy #auto-panel-3 .x-hero__bullets li::before {
        background: #f59e0b;
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
      }

      #x-autonomy #auto-panel-4 .x-hero__bullets li::before {
        background: #a855f7;
        box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
      }

      /* --- Per-level chip colors --- */
      #x-autonomy #auto-panel-1 .x-chip {
        border-color: rgba(16, 185, 129, 0.25);
        color: #10b981;
      }

      #x-autonomy #auto-panel-2 .x-chip {
        border-color: rgba(0, 229, 255, 0.25);
        color: var(--x-accent);
      }

      #x-autonomy #auto-panel-3 .x-chip {
        border-color: rgba(245, 158, 11, 0.25);
        color: #f59e0b;
      }

      #x-autonomy #auto-panel-4 .x-chip {
        border-color: rgba(168, 85, 247, 0.25);
        color: #a855f7;
      }

      /* --- Mobile adjustments --- */
      @media(max-width: 768px) {
        #x-autonomy .x-auto-btn[data-level="1"].x-auto-btn--active {
          border-color: rgba(16, 185, 129, 0.3);
          background: rgba(16, 185, 129, 0.05);
        }

        #x-autonomy .x-auto-btn[data-level="3"].x-auto-btn--active {
          border-color: rgba(245, 158, 11, 0.3);
          background: rgba(245, 158, 11, 0.05);
        }

        #x-autonomy .x-auto-btn[data-level="4"].x-auto-btn--active {
          border-color: rgba(168, 85, 247, 0.3);
          background: rgba(168, 85, 247, 0.05);
        }
      }

      /* === COMMAND CENTER (Premium v2) === */

      /* --- Scenario Picker --- */
      #x-command .x-scen-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: var(--x-sp-7);
        justify-content: center;
      }

      #x-command .x-scen-btn {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 12px;
        padding: 12px 20px 12px 16px;
        color: var(--x-muted);
        font-size: 0.85rem;
        font-family: var(--x-ff-mono);
        font-weight: 600;
        cursor: pointer;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-left: 3px solid transparent;
      }

      #x-command .x-scen-btn svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.3s;
      }

      #x-command .x-scen-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
        transform: translateX(-100%) skewX(-15deg);
        transition: transform 0.6s ease;
      }

      #x-command .x-scen-btn:hover {
        color: #fff;
        transform: translateY(-2px);
      }

      #x-command .x-scen-btn:hover::before {
        transform: translateX(100%) skewX(-15deg);
      }

      /* --- Per-scenario accent colors --- */
      /* Scenario 1: Срыв окна (Red) */
      #x-command .x-scen-btn[data-scen="1"] svg {
        stroke: #ef4444;
      }

      #x-command .x-scen-btn[data-scen="1"]:hover,
      #x-command .x-scen-btn[data-scen="1"].x-scen-btn--active {
        border-left-color: #ef4444;
        border-color: rgba(239, 68, 68, 0.4);
      }

      #x-command .x-scen-btn[data-scen="1"].x-scen-btn--active {
        background: rgba(239, 68, 68, 0.06);
        color: #fff;
        box-shadow: 0 0 18px rgba(239, 68, 68, 0.12), inset 0 0 8px rgba(239, 68, 68, 0.06);
      }

      /* Scenario 2: Отклонение техники (Amber) */
      #x-command .x-scen-btn[data-scen="2"] svg {
        stroke: #f59e0b;
      }

      #x-command .x-scen-btn[data-scen="2"]:hover,
      #x-command .x-scen-btn[data-scen="2"].x-scen-btn--active {
        border-left-color: #f59e0b;
        border-color: rgba(245, 158, 11, 0.4);
      }

      #x-command .x-scen-btn[data-scen="2"].x-scen-btn--active {
        background: rgba(245, 158, 11, 0.06);
        color: #fff;
        box-shadow: 0 0 18px rgba(245, 158, 11, 0.12), inset 0 0 8px rgba(245, 158, 11, 0.06);
      }

      /* Scenario 3: Логистика (Blue) */
      #x-command .x-scen-btn[data-scen="3"] svg {
        stroke: #3b82f6;
      }

      #x-command .x-scen-btn[data-scen="3"]:hover,
      #x-command .x-scen-btn[data-scen="3"].x-scen-btn--active {
        border-left-color: #3b82f6;
        border-color: rgba(59, 130, 246, 0.4);
      }

      #x-command .x-scen-btn[data-scen="3"].x-scen-btn--active {
        background: rgba(59, 130, 246, 0.06);
        color: #fff;
        box-shadow: 0 0 18px rgba(59, 130, 246, 0.12), inset 0 0 8px rgba(59, 130, 246, 0.06);
      }

      /* Scenario 4: Комплаенс (Purple) */
      #x-command .x-scen-btn[data-scen="4"] svg {
        stroke: #a855f7;
      }

      #x-command .x-scen-btn[data-scen="4"]:hover,
      #x-command .x-scen-btn[data-scen="4"].x-scen-btn--active {
        border-left-color: #a855f7;
        border-color: rgba(168, 85, 247, 0.4);
      }

      #x-command .x-scen-btn[data-scen="4"].x-scen-btn--active {
        background: rgba(168, 85, 247, 0.06);
        color: #fff;
        box-shadow: 0 0 18px rgba(168, 85, 247, 0.12), inset 0 0 8px rgba(168, 85, 247, 0.06);
      }

      /* --- Panel --- */
      #x-command .x-scen-panel {
        display: none;
      }

      #x-command .x-scen-panel--active {
        display: block;
      }

      /* Premium Glass Container */
      #x-command .x-scen-panel__inner {
        position: relative;
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.78));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 16px;
        padding: var(--x-sp-7);
        overflow: hidden;
      }

      #x-command .x-scen-panel__inner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        opacity: 0.6;
      }

      /* Per-scenario top accent on glass container */
      #x-command #scen-panel-1 .x-scen-panel__inner::before {
        background: linear-gradient(90deg, transparent, #ef4444, transparent);
      }

      #x-command #scen-panel-2 .x-scen-panel__inner::before {
        background: linear-gradient(90deg, transparent, #f59e0b, transparent);
      }

      #x-command #scen-panel-3 .x-scen-panel__inner::before {
        background: linear-gradient(90deg, transparent, #3b82f6, transparent);
      }

      #x-command #scen-panel-4 .x-scen-panel__inner::before {
        background: linear-gradient(90deg, transparent, #a855f7, transparent);
      }

      /* --- Scenario Title inside panel --- */
      #x-command .x-scen-panel__title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--x-ff-head);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: var(--x-sp-5);
        padding-left: 14px;
        position: relative;
      }

      #x-command .x-scen-panel__title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 3px;
        height: calc(100% - 4px);
        border-radius: 2px;
      }

      #x-command #scen-panel-1 .x-scen-panel__title::before {
        background: #ef4444;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
      }

      #x-command #scen-panel-2 .x-scen-panel__title::before {
        background: #f59e0b;
        box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
      }

      #x-command #scen-panel-3 .x-scen-panel__title::before {
        background: #3b82f6;
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
      }

      #x-command #scen-panel-4 .x-scen-panel__title::before {
        background: #a855f7;
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
      }

      #x-command .x-scen-panel__title-badge {
        font-family: var(--x-ff-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 4px;
      }

      #x-command #scen-panel-1 .x-scen-panel__title-badge {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
      }

      #x-command #scen-panel-2 .x-scen-panel__title-badge {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }

      #x-command #scen-panel-3 .x-scen-panel__title-badge {
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.2);
      }

      #x-command #scen-panel-4 .x-scen-panel__title-badge {
        color: #a855f7;
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.2);
      }

      /* --- Stepper --- */
      #x-command .x-stepper-wrap {
        position: relative;
      }

      #x-command .x-stepper-line {
        position: absolute;
        top: 24px;
        left: 32px;
        right: 32px;
        height: 1px;
        background-image: linear-gradient(to right, rgba(0, 229, 255, 0.6) 50%, transparent 50%);
        background-size: 10px 1px;
        background-repeat: repeat-x;
        z-index: 0;
        opacity: 0.4;
      }

      #x-command .x-scen-panel--active .x-stepper-line {
        animation: dash-flow 1.5s linear infinite;
      }

      /* Per-scenario dashed lines */
      #x-command #scen-panel-1 .x-stepper-line {
        background-image: linear-gradient(to right, rgba(239, 68, 68, 0.6) 50%, transparent 50%);
      }

      #x-command #scen-panel-2 .x-stepper-line {
        background-image: linear-gradient(to right, rgba(245, 158, 11, 0.6) 50%, transparent 50%);
      }

      #x-command #scen-panel-3 .x-stepper-line {
        background-image: linear-gradient(to right, rgba(59, 130, 246, 0.6) 50%, transparent 50%);
      }

      #x-command #scen-panel-4 .x-stepper-line {
        background-image: linear-gradient(to right, rgba(168, 85, 247, 0.6) 50%, transparent 50%);
      }

      @keyframes dash-flow {
        from {
          background-position: 0 0;
        }

        to {
          background-position: -20px 0;
        }
      }

      @media(max-width: 768px) {
        #x-command .x-stepper-line {
          top: 32px;
          left: 24px;
          right: auto;
          bottom: 32px;
          width: 1px;
          height: auto;
          background-image: linear-gradient(to bottom, rgba(0, 229, 255, 0.6) 50%, transparent 50%);
          background-size: 1px 10px;
          background-repeat: repeat-y;
        }

        #x-command #scen-panel-1 .x-stepper-line {
          background-image: linear-gradient(to bottom, rgba(239, 68, 68, 0.6) 50%, transparent 50%);
        }

        #x-command #scen-panel-2 .x-stepper-line {
          background-image: linear-gradient(to bottom, rgba(245, 158, 11, 0.6) 50%, transparent 50%);
        }

        #x-command #scen-panel-3 .x-stepper-line {
          background-image: linear-gradient(to bottom, rgba(59, 130, 246, 0.6) 50%, transparent 50%);
        }

        #x-command #scen-panel-4 .x-stepper-line {
          background-image: linear-gradient(to bottom, rgba(168, 85, 247, 0.6) 50%, transparent 50%);
        }

        #x-command .x-scen-panel--active .x-stepper-line {
          animation: dash-flow-y 1.5s linear infinite;
        }

        @keyframes dash-flow-y {
          from {
            background-position: 0 0;
          }

          to {
            background-position: 0 -20px;
          }
        }

        #x-command .x-scen-panel__inner {
          padding: var(--x-sp-5);
        }
      }

      #x-command .x-stepper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--x-sp-5);
        position: relative;
        z-index: 1;
      }

      @media(min-width: 769px) {
        #x-command .x-stepper {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      #x-command .x-step {
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translateY(20px);
      }

      @media(max-width: 768px) {
        #x-command .x-step {
          flex-direction: row;
          gap: var(--x-sp-4);
        }
      }

      /* Stagger Animation */
      #x-command .x-scen-panel--active .x-step {
        animation: cmd-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      #x-command .x-scen-panel--active .x-step:nth-child(1) {
        animation-delay: 0.1s;
      }

      #x-command .x-scen-panel--active .x-step:nth-child(2) {
        animation-delay: 0.25s;
      }

      #x-command .x-scen-panel--active .x-step:nth-child(3) {
        animation-delay: 0.4s;
      }

      #x-command .x-scen-panel--active .x-step:nth-child(4) {
        animation-delay: 0.55s;
      }

      @keyframes cmd-fade-up {
        from {
          opacity: 0;
          transform: translateY(20px);
        }

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

      /* --- Step Nodes --- */
      #x-command .x-step__num {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--x-bg);
        border: 1px solid rgba(0, 229, 255, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--x-ff-head);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--x-accent);
        margin-bottom: var(--x-sp-4);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        flex-shrink: 0;
        position: relative;
        box-shadow: 0 0 15px rgba(0, 229, 255, 0.1), inset 0 0 8px rgba(0, 229, 255, 0.1);
      }

      #x-command .x-step__num::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1px dashed var(--x-accent);
        opacity: 0.3;
        transition: all 1s linear;
      }

      #x-command .x-scen-panel--active .x-step__num::before {
        animation: auto-spin 10s linear infinite;
      }

      /* Per-scenario step accent colors */
      #x-command #scen-panel-1 .x-step__num {
        border-color: rgba(239, 68, 68, 0.4);
        color: #ef4444;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.1), inset 0 0 8px rgba(239, 68, 68, 0.1);
      }

      #x-command #scen-panel-1 .x-step__num::before {
        border-color: #ef4444;
      }

      #x-command #scen-panel-2 .x-step__num {
        border-color: rgba(245, 158, 11, 0.4);
        color: #f59e0b;
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.1), inset 0 0 8px rgba(245, 158, 11, 0.1);
      }

      #x-command #scen-panel-2 .x-step__num::before {
        border-color: #f59e0b;
      }

      #x-command #scen-panel-3 .x-step__num {
        border-color: rgba(59, 130, 246, 0.4);
        color: #3b82f6;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.1), inset 0 0 8px rgba(59, 130, 246, 0.1);
      }

      #x-command #scen-panel-3 .x-step__num::before {
        border-color: #3b82f6;
      }

      #x-command #scen-panel-4 .x-step__num {
        border-color: rgba(168, 85, 247, 0.4);
        color: #a855f7;
        box-shadow: 0 0 15px rgba(168, 85, 247, 0.1), inset 0 0 8px rgba(168, 85, 247, 0.1);
      }

      #x-command #scen-panel-4 .x-step__num::before {
        border-color: #a855f7;
      }

      #x-command .x-step:hover .x-step__num {
        color: #fff;
        transform: scale(1.1);
      }

      #x-command #scen-panel-1 .x-step:hover .x-step__num {
        border-color: #ef4444;
        background: rgba(239, 68, 68, 0.15);
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), inset 0 0 10px rgba(239, 68, 68, 0.2);
      }

      #x-command #scen-panel-2 .x-step:hover .x-step__num {
        border-color: #f59e0b;
        background: rgba(245, 158, 11, 0.15);
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 0 10px rgba(245, 158, 11, 0.2);
      }

      #x-command #scen-panel-3 .x-step:hover .x-step__num {
        border-color: #3b82f6;
        background: rgba(59, 130, 246, 0.15);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), inset 0 0 10px rgba(59, 130, 246, 0.2);
      }

      #x-command #scen-panel-4 .x-step:hover .x-step__num {
        border-color: #a855f7;
        background: rgba(168, 85, 247, 0.15);
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 10px rgba(168, 85, 247, 0.2);
      }

      #x-command .x-step:hover .x-step__num::before {
        opacity: 0.8;
      }

      #x-command .x-step__title {
        font-family: var(--x-ff-head);
        font-size: var(--x-fs-5);
        font-weight: 700;
        color: var(--x-text);
        margin-bottom: var(--x-sp-2);
        transition: color 0.3s ease;
      }

      #x-command .x-step:hover .x-step__title {
        color: #fff;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
      }

      #x-command .x-step__text {
        font-size: var(--x-fs-6);
        color: var(--x-muted);
        line-height: 1.5;
      }

      .x-int-modes {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--x-sp-5);
        margin-bottom: var(--x-sp-8);
      }

      @media(min-width: 768px) {
        .x-int-modes {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      .x-int-mode {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.7), rgba(11, 17, 32, 0.85));
        border: 1px solid rgba(51, 65, 85, 0.5);
        border-radius: 12px;
        padding: 28px 24px 24px;
        position: relative;
        overflow: hidden;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
      }

      .x-int-mode:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 229, 255, 0.35);
        box-shadow: 0 8px 32px rgba(0, 229, 255, 0.08), 0 0 0 1px rgba(0, 229, 255, 0.1);
      }

      .x-int-mode::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--x-accent), rgba(0, 229, 255, 0.2));
        opacity: 0.4;
        transition: opacity 0.35s;
      }

      .x-int-mode:hover::before {
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
      }

      .x-int-mode__icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 24px;
        line-height: 1;
        transition: box-shadow 0.35s, background 0.35s;
      }

      .x-int-mode--read .x-int-mode__icon {
        background: rgba(0, 229, 255, 0.08);
        border: 1px solid rgba(0, 229, 255, 0.2);
      }

      .x-int-mode--read:hover .x-int-mode__icon {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.25);
        background: rgba(0, 229, 255, 0.12);
      }

      .x-int-mode--sync .x-int-mode__icon {
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.25);
      }

      .x-int-mode--sync:hover .x-int-mode__icon {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.25);
        background: rgba(168, 85, 247, 0.12);
      }

      .x-int-mode--sync::before {
        background: linear-gradient(90deg, #a855f7, rgba(168, 85, 247, 0.2));
      }

      .x-int-mode--write .x-int-mode__icon {
        background: rgba(255, 107, 53, 0.08);
        border: 1px solid rgba(255, 107, 53, 0.25);
      }

      .x-int-mode--write:hover .x-int-mode__icon {
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.25);
        background: rgba(255, 107, 53, 0.12);
      }

      .x-int-mode--write::before {
        background: linear-gradient(90deg, #ff6b35, rgba(255, 107, 53, 0.2));
      }

      .x-int-mode__badge {
        display: inline-block;
        font-family: var(--x-ff-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 4px;
        margin-bottom: 10px;
      }

      .x-int-mode--read .x-int-mode__badge {
        color: #00e5ff;
        background: rgba(0, 229, 255, 0.08);
        border: 1px solid rgba(0, 229, 255, 0.15);
      }

      .x-int-mode--sync .x-int-mode__badge {
        color: #a855f7;
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.15);
      }

      .x-int-mode--write .x-int-mode__badge {
        color: #ff6b35;
        background: rgba(255, 107, 53, 0.08);
        border: 1px solid rgba(255, 107, 53, 0.15);
      }

      .x-int-mode__title {
        color: #fff;
        font-family: var(--x-ff-head);
        font-weight: 700;
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 8px;
      }

      .x-int-mode__text {
        color: var(--x-muted);
        font-size: var(--x-fs-6);
        line-height: 1.6;
      }

        /* === Scoped: Integration Cards === */
        .x-int-cards {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: var(--x-sp-4);
          margin-bottom: var(--x-sp-8);
        }

        .x-int-card {
          background: linear-gradient(165deg, rgba(19, 27, 46, 0.65), rgba(11, 17, 32, 0.8));
          border: 1px solid rgba(51, 65, 85, 0.4);
          border-radius: 12px;
          padding: 22px 20px 20px;
          position: relative;
          overflow: hidden;
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
        }

        .x-int-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 2px;
          opacity: 0.5;
          transition: opacity 0.3s;
        }

        .x-int-card:hover {
          transform: translateY(-3px);
          border-color: rgba(0, 229, 255, 0.3);
          box-shadow: 0 6px 24px rgba(0, 229, 255, 0.06);
        }

        .x-int-card:hover::before {
          opacity: 1;
        }

        .x-int-card--erp::before {
          background: linear-gradient(90deg, #00e5ff, transparent);
        }

        .x-int-card--tel::before {
          background: linear-gradient(90deg, #a855f7, transparent);
        }

        .x-int-card--iot::before {
          background: linear-gradient(90deg, #22c55e, transparent);
        }

        .x-int-card--bi::before {
          background: linear-gradient(90deg, #f59e0b, transparent);
        }

        .x-int-card--api::before {
          background: linear-gradient(90deg, #ff6b35, transparent);
        }

        .x-int-card__icon {
          font-size: 28px;
          line-height: 1;
          margin-bottom: 14px;
          display: block;
        }

        .x-int-card__title {
          color: #fff;
          font-family: var(--x-ff-head);
          font-weight: 700;
          font-size: 0.95rem;
          margin-bottom: 6px;
        }

        .x-int-card__text {
          color: var(--x-muted);
          font-size: var(--x-fs-6);
          line-height: 1.55;
        }

        /* === Scoped: Stepper v2 === */
        .x-int-steps {
          margin-top: var(--x-sp-7);
          margin-bottom: var(--x-sp-7);
          position: relative;
        }

        .x-int-step {
          display: flex;
          align-items: flex-start;
          gap: 20px;
          padding: 24px;
          background: linear-gradient(165deg, rgba(19, 27, 46, 0.5), rgba(11, 17, 32, 0.7));
          border: 1px solid rgba(51, 65, 85, 0.4);
          border-radius: 12px;
          margin-bottom: var(--x-sp-4);
          position: relative;
          transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .x-int-step:hover {
          border-color: rgba(0, 229, 255, 0.3);
          box-shadow: 0 6px 24px rgba(0, 229, 255, 0.06);
          transform: translateY(-2px);
        }

        .x-int-step__num {
          width: 48px;
          height: 48px;
          flex-shrink: 0;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: var(--x-ff-mono);
          font-weight: 700;
          font-size: 1.1rem;
          color: var(--x-accent);
          background: rgba(0, 229, 255, 0.08);
          border: 1px solid rgba(0, 229, 255, 0.25);
          box-shadow: 0 0 16px rgba(0, 229, 255, 0.1);
          transition: box-shadow 0.3s, background 0.3s;
        }

        .x-int-step:hover .x-int-step__num {
          box-shadow: 0 0 24px rgba(0, 229, 255, 0.2);
          background: rgba(0, 229, 255, 0.14);
        }

        .x-int-step__body h4 {
          color: #fff;
          font-family: var(--x-ff-head);
          font-weight: 700;
          font-size: 1rem;
          margin-bottom: 6px;
        }

        .x-int-step__time {
          display: inline-block;
          font-family: var(--x-ff-mono);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.05em;
          color: var(--x-accent);
          background: rgba(0, 229, 255, 0.06);
          border: 1px solid rgba(0, 229, 255, 0.15);
          padding: 2px 10px;
          border-radius: 4px;
          margin-bottom: 8px;
        }

        .x-int-step__text {
          color: var(--x-muted);
          font-size: var(--x-fs-6);
          line-height: 1.55;
        }

      .x-calc-wrap {
        background: rgba(19, 27, 46, 0.5);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(0, 229, 255, 0.15);
        border-radius: 16px;
        padding: var(--x-sp-6);
        margin-top: var(--x-sp-8);
      }

      .x-calc-head {
        display: flex;
        align-items: center;
        gap: var(--x-sp-3);
        margin-bottom: var(--x-sp-5);
        border-bottom: 1px solid var(--x-line);
        padding-bottom: var(--x-sp-4);
      }

      .x-calc-head svg {
        color: var(--x-accent);
      }

      .x-calc-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--x-sp-6);
      }

      @media(min-width: 992px) {
        .x-calc-grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      .x-calc-form {
        display: flex;
        flex-direction: column;
        gap: var(--x-sp-3);
      }

      .x-calc-check {
        display: flex;
        align-items: center;
        gap: var(--x-sp-3);
        cursor: pointer;
        padding: var(--x-sp-3);
        border: 1px dashed var(--x-line);
        border-radius: var(--x-r-2);
        transition: all 0.2s;
        background: rgba(19, 27, 46, 0.2);
      }

      .x-calc-check:hover {
        border-color: rgba(0, 229, 255, 0.4);
        background: rgba(0, 229, 255, 0.05);
      }

      .x-calc-check input {
        appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid var(--x-muted);
        border-radius: 4px;
        position: relative;
        cursor: pointer;
        outline: none;
        transition: all 0.2s;
        flex-shrink: 0;
      }

      .x-calc-check input:checked {
        border-color: var(--x-accent);
        background-color: var(--x-accent);
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
      }

      .x-calc-check input:checked::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 6px;
        width: 4px;
        height: 10px;
        border: solid var(--x-bg);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      .x-calc-check span {
        color: var(--x-text);
        font-size: var(--x-fs-6);
        line-height: 1.3;
      }

      .x-calc-out {
        background: linear-gradient(170deg, rgba(15, 22, 37, 0.95), rgba(11, 17, 32, 0.98));
        border: 1px solid rgba(51, 65, 85, 0.5);
        border-radius: 14px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .x-calc-out__level {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--x-ff-mono);
        color: var(--x-accent);
        font-size: 1rem;
        font-weight: 700;
        padding: 8px 16px;
        background: rgba(0, 229, 255, 0.08);
        border-radius: 8px;
        border-left: 3px solid var(--x-accent);
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.08);
        align-self: flex-start;
        margin-bottom: 12px;
      }

      .x-calc-out__title {
        color: #fff;
        font-family: var(--x-ff-head);
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(51, 65, 85, 0.5);
      }

      .x-calc-out__metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 16px;
      }

      .x-calc-metric {
        background: rgba(19, 27, 46, 0.5);
        border: 1px solid rgba(51, 65, 85, 0.4);
        border-radius: 10px;
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .x-calc-metric__label {
        font-size: 11px;
        font-family: var(--x-ff-mono);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--x-muted);
      }

      .x-calc-metric__value {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--x-text);
        font-family: var(--x-ff-mono);
        line-height: 1.4;
      }

      .x-calc-out__rows {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .x-calc-out__row {
        padding: 14px 0;
        border-bottom: 1px solid rgba(51, 65, 85, 0.35);
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .x-calc-out__row:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .x-calc-out__row-label {
        font-size: 11px;
        font-family: var(--x-ff-mono);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--x-accent);
        font-weight: 700;
      }

      .x-calc-out__row-value {
        color: var(--x-text);
        font-size: 0.9rem;
        line-height: 1.6;
      }

      /* === COMPLIANCE BLOCK (Premium v2) === */

      /* --- Animations --- */
      @keyframes comp-reveal {
        from {
          opacity: 0;
          transform: translateY(28px);
        }

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

      @keyframes comp-border-pulse {

        0%,
        100% {
          border-left-color: rgba(0, 229, 255, 0.8);
          box-shadow: -4px 0 20px rgba(0, 229, 255, 0.08);
        }

        50% {
          border-left-color: rgba(0, 229, 255, 0.35);
          box-shadow: -4px 0 10px rgba(0, 229, 255, 0.02);
        }
      }

      @keyframes comp-glow-dot {

        0%,
        100% {
          box-shadow: 0 0 6px var(--x-accent), 0 0 12px rgba(0, 229, 255, 0.2);
        }

        50% {
          box-shadow: 0 0 3px var(--x-accent), 0 0 6px rgba(0, 229, 255, 0.08);
        }
      }

      @keyframes comp-arrow-drift {
        0% {
          transform: translateX(0);
          opacity: 0.5;
        }

        50% {
          transform: translateX(3px);
          opacity: 1;
        }

        100% {
          transform: translateX(0);
          opacity: 0.5;
        }
      }

      /* --- Reveal helper --- */
      #x-compliance .comp-anim {
        opacity: 0;
        transform: translateY(28px);
      }

      #x-compliance .comp-anim--visible {
        animation: comp-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      /* --- Feature Cards 2×2 --- */
      #x-compliance .x-comp-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: var(--x-sp-8);
      }

      @media(max-width:768px) {
        #x-compliance .x-comp-features {
          grid-template-columns: 1fr;
        }
      }

      #x-compliance .x-comp-feat {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.6), rgba(11, 17, 32, 0.82));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 14px;
        padding: 28px 26px 24px;
        position: relative;
        overflow: hidden;
        transition: border-color 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
      }

      #x-compliance .x-comp-feat::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--x-accent), rgba(0, 229, 255, 0.15));
        opacity: 0.35;
        transition: opacity 0.35s;
      }

      #x-compliance .x-comp-feat:hover {
        border-color: rgba(0, 229, 255, 0.35);
        transform: translateY(-4px);
        box-shadow: 0 8px 32px rgba(0, 229, 255, 0.08), 0 0 0 1px rgba(0, 229, 255, 0.1);
      }

      #x-compliance .x-comp-feat:hover::before {
        opacity: 1;
        box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
      }

      #x-compliance .x-comp-feat__icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        transition: box-shadow 0.35s, background 0.35s;
      }

      #x-compliance .x-comp-feat__icon svg {
        width: 26px;
        height: 26px;
      }

      /* Color variants */
      #x-compliance .x-comp-feat--ai .x-comp-feat__icon {
        background: rgba(0, 229, 255, 0.08);
        border: 1px solid rgba(0, 229, 255, 0.2);
      }

      #x-compliance .x-comp-feat--ai:hover .x-comp-feat__icon {
        box-shadow: 0 0 22px rgba(0, 229, 255, 0.25);
        background: rgba(0, 229, 255, 0.14);
      }

      #x-compliance .x-comp-feat--valid .x-comp-feat__icon {
        background: rgba(34, 197, 94, 0.08);
        border: 1px solid rgba(34, 197, 94, 0.2);
      }

      #x-compliance .x-comp-feat--valid:hover .x-comp-feat__icon {
        box-shadow: 0 0 22px rgba(34, 197, 94, 0.25);
        background: rgba(34, 197, 94, 0.14);
      }

      #x-compliance .x-comp-feat--valid::before {
        background: linear-gradient(90deg, #22c55e, rgba(34, 197, 94, 0.15));
      }

      #x-compliance .x-comp-feat--audit .x-comp-feat__icon {
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.2);
      }

      #x-compliance .x-comp-feat--audit:hover .x-comp-feat__icon {
        box-shadow: 0 0 22px rgba(168, 85, 247, 0.25);
        background: rgba(168, 85, 247, 0.14);
      }

      #x-compliance .x-comp-feat--audit::before {
        background: linear-gradient(90deg, #a855f7, rgba(168, 85, 247, 0.15));
      }

      #x-compliance .x-comp-feat--roles .x-comp-feat__icon {
        background: rgba(251, 191, 36, 0.08);
        border: 1px solid rgba(251, 191, 36, 0.2);
      }

      #x-compliance .x-comp-feat--roles:hover .x-comp-feat__icon {
        box-shadow: 0 0 22px rgba(251, 191, 36, 0.25);
        background: rgba(251, 191, 36, 0.14);
      }

      #x-compliance .x-comp-feat--roles::before {
        background: linear-gradient(90deg, #fbbf24, rgba(251, 191, 36, 0.15));
      }

      #x-compliance .x-comp-feat__title {
        font-family: var(--x-ff-head);
        font-size: 1.05rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
        transition: text-shadow 0.3s;
      }

      #x-compliance .x-comp-feat:hover .x-comp-feat__title {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
      }

      #x-compliance .x-comp-feat__text {
        color: var(--x-muted);
        font-size: 0.88rem;
        line-height: 1.65;
      }

      #x-compliance .x-comp-feat__text strong {
        color: var(--x-text);
        font-weight: 600;
      }

      /* --- Mercury Callout --- */
      #x-compliance .x-comp-mercury {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.65), rgba(11, 17, 32, 0.85));
        border: 1px solid rgba(0, 229, 255, 0.2);
        border-left: 4px solid var(--x-accent);
        border-radius: 14px;
        padding: 30px 30px;
        margin-bottom: var(--x-sp-8);
        position: relative;
        overflow: hidden;
        animation: comp-border-pulse 3s ease-in-out infinite;
      }

      #x-compliance .x-comp-mercury::after {
        content: '';
        position: absolute;
        top: -60%;
        right: -15%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(0, 229, 255, 0.04) 0%, transparent 70%);
        pointer-events: none;
      }

      #x-compliance .x-comp-mercury__head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
      }

      #x-compliance .x-comp-mercury__badge {
        font-family: var(--x-ff-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--x-accent);
        font-weight: 700;
        padding: 5px 14px;
        background: rgba(0, 229, 255, 0.08);
        border: 1px solid rgba(0, 229, 255, 0.2);
        border-radius: 6px;
        transition: background 0.3s, box-shadow 0.3s;
      }

      #x-compliance .x-comp-mercury:hover .x-comp-mercury__badge {
        background: rgba(0, 229, 255, 0.14);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
      }

      #x-compliance .x-comp-mercury__status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--x-ff-mono);
        font-size: 11px;
        color: #22c55e;
        margin-left: auto;
      }

      #x-compliance .x-comp-mercury__status-dot {
        width: 7px;
        height: 7px;
        background: #22c55e;
        border-radius: 50%;
        animation: comp-glow-dot 2s ease-in-out infinite;
      }

      #x-compliance .x-comp-mercury__title {
        font-family: var(--x-ff-head);
        font-size: 1.15rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
      }

      #x-compliance .x-comp-mercury__list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
        z-index: 1;
      }

      #x-compliance .x-comp-mercury__list li {
        color: var(--x-text);
        font-size: 0.9rem;
        line-height: 1.6;
        padding-left: 22px;
        position: relative;
      }

      #x-compliance .x-comp-mercury__list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        width: 8px;
        height: 8px;
        background: var(--x-accent);
        border-radius: 2px;
        box-shadow: 0 0 8px var(--x-accent);
        transform: rotate(45deg);
      }

      /* --- Artifacts Grid --- */
      #x-compliance .x-comp-artifacts {
        margin-bottom: var(--x-sp-8);
      }

      #x-compliance .x-comp-artifacts__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
      }

      @media(max-width:768px) {
        #x-compliance .x-comp-artifacts__grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      @media(max-width:480px) {
        #x-compliance .x-comp-artifacts__grid {
          grid-template-columns: 1fr;
        }
      }

      #x-compliance .x-comp-artifact {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.4);
        border-radius: 12px;
        padding: 22px 18px 20px;
        text-align: center;
        transition: border-color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
        position: relative;
        overflow: hidden;
      }

      #x-compliance .x-comp-artifact:hover {
        border-color: rgba(0, 229, 255, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 6px 24px rgba(0, 229, 255, 0.06);
      }

      #x-compliance .x-comp-artifact__num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-family: var(--x-ff-mono);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--x-accent);
        background: rgba(0, 229, 255, 0.06);
        border: 1px solid rgba(0, 229, 255, 0.2);
        margin-bottom: 14px;
      }

      #x-compliance .x-comp-artifact__icon {
        font-size: 26px;
        line-height: 1;
        display: block;
        margin-bottom: 12px;
      }

      #x-compliance .x-comp-artifact__name {
        font-family: var(--x-ff-head);
        font-size: 0.92rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 6px;
        display: block;
      }

      #x-compliance .x-comp-artifact__desc {
        font-size: 0.82rem;
        color: var(--x-muted);
        line-height: 1.5;
        display: block;
      }

      /* --- Scenario Timeline --- */
      #x-compliance .x-comp-scenarios {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-bottom: var(--x-sp-8);
        position: relative;
      }

      @media(max-width:768px) {
        #x-compliance .x-comp-scenarios {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        #x-compliance .x-comp-scenario__arrow {
          display: none;
        }
      }

      #x-compliance .x-comp-scenario {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.78));
        border: 1px solid rgba(51, 65, 85, 0.4);
        border-radius: 14px;
        padding: 24px 22px 22px;
        position: relative;
        transition: border-color 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
        margin: 0 6px;
      }

      #x-compliance .x-comp-scenario:first-child {
        margin-left: 0;
      }

      #x-compliance .x-comp-scenario:last-child {
        margin-right: 0;
      }

      #x-compliance .x-comp-scenario:hover {
        border-color: rgba(0, 229, 255, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 6px 24px rgba(0, 229, 255, 0.06);
      }

      #x-compliance .x-comp-scenario__num {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--x-ff-mono);
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--x-accent);
        background: rgba(0, 229, 255, 0.06);
        border: 1px solid rgba(0, 229, 255, 0.25);
        margin-bottom: 14px;
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.08);
      }

      #x-compliance .x-comp-scenario:hover .x-comp-scenario__num {
        background: rgba(0, 229, 255, 0.12);
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.18);
      }

      #x-compliance .x-comp-scenario__title {
        font-family: var(--x-ff-head);
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      #x-compliance .x-comp-scenario__title span {
        font-size: 1.1em;
      }

      #x-compliance .x-comp-scenario__flow {
        font-size: 0.85rem;
        color: var(--x-muted);
        line-height: 1.65;
      }

      #x-compliance .x-comp-scenario__flow .x-arr {
        color: var(--x-accent);
        font-weight: 700;
        opacity: 0.7;
        margin: 0 2px;
        display: inline-block;
        animation: comp-arrow-drift 2.5s ease-in-out infinite;
      }

      #x-compliance .x-comp-scenario__flow .x-arr:nth-child(2) {
        animation-delay: 0.3s;
      }

      #x-compliance .x-comp-scenario__flow .x-arr:nth-child(4) {
        animation-delay: 0.6s;
      }

      #x-compliance .x-comp-scenario__flow .x-arr:nth-child(6) {
        animation-delay: 0.9s;
      }

      /* Connecting arrows between scenario cards */
      #x-compliance .x-comp-scenario__arrow {
        position: absolute;
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--x-accent);
        font-size: 18px;
        opacity: 0.45;
        z-index: 2;
        animation: comp-arrow-drift 2s ease-in-out infinite;
      }

      /* --- Sub-headings --- */
      #x-compliance .x-comp-subhead {
        font-family: var(--x-ff-head);
        font-size: 1.15rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: var(--x-sp-5);
        padding-left: 16px;
        position: relative;
      }

      #x-compliance .x-comp-subhead::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 4px;
        height: calc(100% - 4px);
        background: var(--x-accent);
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
      }

      /* --- CTA area --- */
      #x-compliance .x-comp-cta {
        text-align: center;
        margin-top: var(--x-sp-4);
      }

      #x-compliance .x-comp-cta .x-hero__micro {
        margin-top: var(--x-sp-3);
      }

      /* === SECURITY BLOCK (Premium v2) === */

      /* --- Animations --- */
      @keyframes sec-reveal {
        from {
          opacity: 0;
          transform: translateY(28px);
        }

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

      @keyframes sec-shield-pulse {

        0%,
        100% {
          box-shadow: 0 0 18px rgba(34, 197, 94, 0.12);
        }

        50% {
          box-shadow: 0 0 8px rgba(34, 197, 94, 0.04);
        }
      }

      /* --- Reveal helper --- */
      #x-security .sec-anim {
        opacity: 0;
        transform: translateY(28px);
      }

      #x-security .sec-anim--visible {
        animation: sec-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }

      /* --- Card grids --- */
      #x-security .x-sec-cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
        margin-bottom: var(--x-sp-8);
      }

      #x-security .x-sec-cards--duo {
        grid-template-columns: 1fr 1fr;
      }

      @media(max-width:768px) {

        #x-security .x-sec-cards,
        #x-security .x-sec-cards--duo {
          grid-template-columns: 1fr;
        }
      }

      /* --- Base card --- */
      #x-security .x-sec-card {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.6), rgba(11, 17, 32, 0.82));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 14px;
        padding: 28px 26px 24px;
        position: relative;
        overflow: hidden;
        transition: border-color 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
      }

      #x-security .x-sec-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        opacity: 0.35;
        transition: opacity 0.35s;
      }

      #x-security .x-sec-card:hover {
        transform: translateY(-4px);
      }

      #x-security .x-sec-card:hover::before {
        opacity: 1;
      }

      /* --- Card icon --- */
      #x-security .x-sec-card__icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        transition: box-shadow 0.35s, background 0.35s;
      }

      #x-security .x-sec-card__icon svg {
        width: 26px;
        height: 26px;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      /* --- Color: Emerald (Защита данных) --- */
      #x-security .x-sec-card--shield::before {
        background: linear-gradient(90deg, #22c55e, rgba(34, 197, 94, 0.15));
      }

      #x-security .x-sec-card--shield .x-sec-card__icon {
        background: rgba(34, 197, 94, 0.08);
        border: 1px solid rgba(34, 197, 94, 0.2);
      }

      #x-security .x-sec-card--shield .x-sec-card__icon svg {
        stroke: #22c55e;
      }

      #x-security .x-sec-card--shield:hover {
        border-color: rgba(34, 197, 94, 0.35);
        box-shadow: 0 8px 32px rgba(34, 197, 94, 0.08), 0 0 0 1px rgba(34, 197, 94, 0.1);
      }

      #x-security .x-sec-card--shield:hover .x-sec-card__icon {
        box-shadow: 0 0 22px rgba(34, 197, 94, 0.25);
        background: rgba(34, 197, 94, 0.14);
      }

      /* --- Color: Cyan (Доступы) --- */
      #x-security .x-sec-card--access::before {
        background: linear-gradient(90deg, #00e5ff, rgba(0, 229, 255, 0.15));
      }

      #x-security .x-sec-card--access .x-sec-card__icon {
        background: rgba(0, 229, 255, 0.08);
        border: 1px solid rgba(0, 229, 255, 0.2);
      }

      #x-security .x-sec-card--access .x-sec-card__icon svg {
        stroke: #00e5ff;
      }

      #x-security .x-sec-card--access:hover {
        border-color: rgba(0, 229, 255, 0.35);
        box-shadow: 0 8px 32px rgba(0, 229, 255, 0.08), 0 0 0 1px rgba(0, 229, 255, 0.1);
      }

      #x-security .x-sec-card--access:hover .x-sec-card__icon {
        box-shadow: 0 0 22px rgba(0, 229, 255, 0.25);
        background: rgba(0, 229, 255, 0.14);
      }

      /* --- Color: Purple (Аудит) --- */
      #x-security .x-sec-card--audit::before {
        background: linear-gradient(90deg, #a855f7, rgba(168, 85, 247, 0.15));
      }

      #x-security .x-sec-card--audit .x-sec-card__icon {
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.2);
      }

      #x-security .x-sec-card--audit .x-sec-card__icon svg {
        stroke: #a855f7;
      }

      #x-security .x-sec-card--audit:hover {
        border-color: rgba(168, 85, 247, 0.35);
        box-shadow: 0 8px 32px rgba(168, 85, 247, 0.08), 0 0 0 1px rgba(168, 85, 247, 0.1);
      }

      #x-security .x-sec-card--audit:hover .x-sec-card__icon {
        box-shadow: 0 0 22px rgba(168, 85, 247, 0.25);
        background: rgba(168, 85, 247, 0.14);
      }

      /* --- Color: Amber (Границы) --- */
      #x-security .x-sec-card--boundary::before {
        background: linear-gradient(90deg, #f59e0b, rgba(245, 158, 11, 0.15));
      }

      #x-security .x-sec-card--boundary .x-sec-card__icon {
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }

      #x-security .x-sec-card--boundary .x-sec-card__icon svg {
        stroke: #f59e0b;
      }

      #x-security .x-sec-card--boundary:hover {
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 8px 32px rgba(245, 158, 11, 0.08), 0 0 0 1px rgba(245, 158, 11, 0.1);
      }

      #x-security .x-sec-card--boundary:hover .x-sec-card__icon {
        box-shadow: 0 0 22px rgba(245, 158, 11, 0.25);
        background: rgba(245, 158, 11, 0.14);
      }

      /* --- Color: Orange (Fail-safe) --- */
      #x-security .x-sec-card--failsafe::before {
        background: linear-gradient(90deg, #f97316, rgba(249, 115, 22, 0.15));
      }

      #x-security .x-sec-card--failsafe .x-sec-card__icon {
        background: rgba(249, 115, 22, 0.08);
        border: 1px solid rgba(249, 115, 22, 0.2);
      }

      #x-security .x-sec-card--failsafe .x-sec-card__icon svg {
        stroke: #f97316;
      }

      #x-security .x-sec-card--failsafe:hover {
        border-color: rgba(249, 115, 22, 0.35);
        box-shadow: 0 8px 32px rgba(249, 115, 22, 0.08), 0 0 0 1px rgba(249, 115, 22, 0.1);
      }

      #x-security .x-sec-card--failsafe:hover .x-sec-card__icon {
        box-shadow: 0 0 22px rgba(249, 115, 22, 0.25);
        background: rgba(249, 115, 22, 0.14);
      }

      /* --- Card text --- */
      #x-security .x-sec-card__title {
        font-family: var(--x-ff-head);
        font-size: 1.05rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
        transition: text-shadow 0.3s;
      }

      #x-security .x-sec-card:hover .x-sec-card__title {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
      }

      #x-security .x-sec-card__text {
        color: var(--x-muted);
        font-size: 0.88rem;
        line-height: 1.65;
      }

      /* --- Sub-headings (accent bar) --- */
      #x-security .x-sec-subhead {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--x-ff-head);
        font-size: 1.15rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: var(--x-sp-5);
        padding-left: 16px;
        position: relative;
      }

      #x-security .x-sec-subhead::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 4px;
        height: calc(100% - 4px);
        border-radius: 2px;
      }

      #x-security .x-sec-subhead--infosec::before {
        background: #22c55e;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
      }

      #x-security .x-sec-subhead--safety::before {
        background: #f59e0b;
        box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
      }

      #x-security .x-sec-subhead--artifacts::before {
        background: var(--x-accent);
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
      }

      #x-security .x-sec-subhead__badge {
        font-family: var(--x-ff-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 5px;
      }

      #x-security .x-sec-subhead--infosec .x-sec-subhead__badge {
        color: #22c55e;
        background: rgba(34, 197, 94, 0.08);
        border: 1px solid rgba(34, 197, 94, 0.2);
      }

      #x-security .x-sec-subhead--safety .x-sec-subhead__badge {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }

      /* --- Artifacts grid --- */
      #x-security .x-sec-artifacts {
        margin-bottom: var(--x-sp-8);
      }

      #x-security .x-sec-artifacts__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }

      @media(max-width:768px) {
        #x-security .x-sec-artifacts__grid {
          grid-template-columns: 1fr;
        }
      }

      #x-security .x-sec-artifact {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.4);
        border-radius: 12px;
        padding: 22px 20px 20px;
        text-align: center;
        transition: border-color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
        position: relative;
      }

      #x-security .x-sec-artifact:hover {
        border-color: rgba(0, 229, 255, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 6px 24px rgba(0, 229, 255, 0.06);
      }

      #x-security .x-sec-artifact__check {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(34, 197, 94, 0.08);
        border: 1px solid rgba(34, 197, 94, 0.25);
        margin-bottom: 14px;
        animation: sec-shield-pulse 3s ease-in-out infinite;
      }

      #x-security .x-sec-artifact__check svg {
        width: 18px;
        height: 18px;
        stroke: #22c55e;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      #x-security .x-sec-artifact__name {
        font-family: var(--x-ff-head);
        font-size: 0.92rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 6px;
        display: block;
      }

      #x-security .x-sec-artifact__desc {
        font-size: 0.82rem;
        color: var(--x-muted);
        line-height: 1.5;
        display: block;
      }

      /* --- CTA area --- */
      #x-security .x-sec-cta {
        text-align: center;
        margin-top: var(--x-sp-4);
      }

      #x-security .x-sec-cta__micro {
        font-family: var(--x-ff-mono);
        font-size: 11px;
        text-transform: uppercase;
        color: var(--x-muted);
        opacity: 0.65;
        letter-spacing: 0.05em;
        margin-top: var(--x-sp-3);
      }

      /* === PILOT BLOCK (Premium v2) === */

      /* --- Scroll-reveal --- */
      #x-pilot .pil-anim {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-pilot .pil-anim--visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* --- Sub-headings with colored accent bars --- */
      #x-pilot .x-pil-subhead {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--x-ff-head);
        font-size: 1.1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: var(--x-sp-5);
        padding-left: 14px;
        position: relative;
      }

      #x-pilot .x-pil-subhead::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 3px;
        height: calc(100% - 4px);
        border-radius: 2px;
      }

      #x-pilot .x-pil-subhead svg {
        display: none;
      }

      #x-pilot .x-pil-subhead__badge {
        font-family: var(--x-ff-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 4px;
      }

      /* Green: Process */
      #x-pilot .x-pil-subhead--process::before {
        background: #10b981;
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
      }

      #x-pilot .x-pil-subhead--process .x-pil-subhead__badge {
        color: #10b981;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.2);
      }

      /* Amber: DoD */
      #x-pilot .x-pil-subhead--dod::before {
        background: #f59e0b;
        box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
      }

      #x-pilot .x-pil-subhead--dod .x-pil-subhead__badge {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }

      /* Blue: Metrics */
      #x-pilot .x-pil-subhead--metrics::before {
        background: #3b82f6;
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
      }

      #x-pilot .x-pil-subhead--metrics .x-pil-subhead__badge {
        color: #3b82f6;
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.2);
      }

      /* Purple: Artifacts */
      #x-pilot .x-pil-subhead--artifacts::before {
        background: #a855f7;
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
      }

      #x-pilot .x-pil-subhead--artifacts .x-pil-subhead__badge {
        color: #a855f7;
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.2);
      }

      /* --- Stepper --- */
      #x-pilot .x-pil-stepper {
        display: flex;
        align-items: flex-start;
        gap: 0;
        margin-bottom: var(--x-sp-7);
        position: relative;
      }

      #x-pilot .x-pil-step {
        flex: 1;
        text-align: center;
        position: relative;
      }

      #x-pilot .x-pil-step__num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        font-family: var(--x-ff-mono);
        font-size: 15px;
        font-weight: 700;
        margin: 0 auto 10px;
        position: relative;
        z-index: 1;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Phase colors for stepper nodes */
      #x-pilot .x-pil-step:nth-child(1) .x-pil-step__num {
        color: #10b981;
        border: 1.5px solid rgba(16, 185, 129, 0.35);
        background: rgba(16, 185, 129, 0.06);
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.08);
      }

      #x-pilot .x-pil-step:nth-child(2) .x-pil-step__num {
        color: var(--x-accent);
        border: 1.5px solid rgba(0, 229, 255, 0.35);
        background: rgba(0, 229, 255, 0.06);
        box-shadow: 0 0 12px rgba(0, 229, 255, 0.08);
      }

      #x-pilot .x-pil-step:nth-child(3) .x-pil-step__num {
        color: #f59e0b;
        border: 1.5px solid rgba(245, 158, 11, 0.35);
        background: rgba(245, 158, 11, 0.06);
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.08);
      }

      #x-pilot .x-pil-step:nth-child(4) .x-pil-step__num {
        color: #10b981;
        border: 1.5px solid rgba(16, 185, 129, 0.35);
        background: rgba(16, 185, 129, 0.06);
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.08);
      }

      /* Stepper hover */
      #x-pilot .x-pil-step:hover .x-pil-step__num {
        transform: scale(1.1);
      }

      #x-pilot .x-pil-step:nth-child(1):hover .x-pil-step__num {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
        background: rgba(16, 185, 129, 0.12);
      }

      #x-pilot .x-pil-step:nth-child(2):hover .x-pil-step__num {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.25);
        background: rgba(0, 229, 255, 0.12);
      }

      #x-pilot .x-pil-step:nth-child(3):hover .x-pil-step__num {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.25);
        background: rgba(245, 158, 11, 0.12);
      }

      #x-pilot .x-pil-step:nth-child(4):hover .x-pil-step__num {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
        background: rgba(16, 185, 129, 0.12);
      }

      #x-pilot .x-pil-step__title {
        font-family: var(--x-ff-head);
        font-size: 0.85rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 4px;
        transition: text-shadow 0.3s;
      }

      #x-pilot .x-pil-step:hover .x-pil-step__title {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
      }

      #x-pilot .x-pil-step__sub {
        font-size: 0.75rem;
        color: var(--x-muted);
      }

      /* Animated connecting line */
      #x-pilot .x-pil-step+.x-pil-step::before {
        content: '';
        position: absolute;
        top: 21px;
        left: -50%;
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to right, rgba(0, 229, 255, 0.5) 50%, transparent 50%);
        background-size: 10px 1px;
        background-repeat: repeat-x;
        z-index: 0;
        animation: pil-dash-flow 1.5s linear infinite;
      }

      @keyframes pil-dash-flow {
        from {
          background-position: 0 0;
        }

        to {
          background-position: -20px 0;
        }
      }

      @media(max-width:600px) {
        #x-pilot .x-pil-stepper {
          flex-direction: column;
          gap: 16px;
        }

        #x-pilot .x-pil-step {
          text-align: left;
          display: flex;
          align-items: center;
          gap: 14px;
        }

        #x-pilot .x-pil-step__num {
          margin: 0;
          flex-shrink: 0;
        }

        #x-pilot .x-pil-step+.x-pil-step::before {
          display: none;
        }
      }

      /* --- Criteria Card --- */
      #x-pilot .x-pil-card {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-left: 3px solid #f59e0b;
        border-radius: 14px;
        padding: 24px 26px;
        margin-bottom: var(--x-sp-5);
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      #x-pilot .x-pil-card:hover {
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 4px 20px rgba(245, 158, 11, 0.06);
      }

      #x-pilot .x-pil-card__title {
        font-family: var(--x-ff-head);
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
      }

      #x-pilot .x-pil-card__text {
        color: var(--x-muted);
        font-size: 0.88rem;
        line-height: 1.65;
      }

      #x-pilot .x-pil-card__list {
        list-style: none;
        padding: 0;
        margin: 8px 0 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      #x-pilot .x-pil-card__list li {
        color: var(--x-text);
        font-size: 0.88rem;
        line-height: 1.55;
        padding-left: 18px;
        position: relative;
      }

      #x-pilot .x-pil-card__list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        width: 6px;
        height: 6px;
        background: #f59e0b;
        border-radius: 1px;
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
      }

      /* --- Measurement callout --- */
      #x-pilot .x-pil-measure {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.6), rgba(11, 17, 32, 0.8));
        border: 1px solid rgba(59, 130, 246, 0.15);
        border-left: 3px solid #3b82f6;
        border-radius: 14px;
        padding: 24px 26px;
        margin-bottom: var(--x-sp-7);
        box-shadow: 0 0 16px rgba(59, 130, 246, 0.04);
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      #x-pilot .x-pil-measure:hover {
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.06);
      }

      #x-pilot .x-pil-measure__text {
        color: var(--x-text);
        font-size: 0.88rem;
        line-height: 1.7;
      }

      #x-pilot .x-pil-measure__text strong {
        color: #fff;
        font-weight: 600;
      }

      /* --- Artifacts grid --- */
      #x-pilot .x-pil-artifacts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: var(--x-sp-7);
      }

      @media(max-width:768px) {
        #x-pilot .x-pil-artifacts {
          grid-template-columns: 1fr;
        }
      }

      #x-pilot .x-pil-artifact {
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.5), rgba(11, 17, 32, 0.7));
        border: 1px solid rgba(51, 65, 85, 0.4);
        border-top: 2px solid rgba(168, 85, 247, 0.3);
        border-radius: 12px;
        padding: 18px 20px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      }

      #x-pilot .x-pil-artifact:hover {
        border-color: rgba(168, 85, 247, 0.35);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(168, 85, 247, 0.06);
      }

      #x-pilot .x-pil-artifact__check {
        flex-shrink: 0;
        margin-top: 2px;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.25);
      }

      #x-pilot .x-pil-artifact__check svg {
        width: 12px;
        height: 12px;
        stroke: #a855f7;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      #x-pilot .x-pil-artifact__body {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      #x-pilot .x-pil-artifact__name {
        font-family: var(--x-ff-head);
        font-size: 0.88rem;
        font-weight: 700;
        color: #fff;
      }

      #x-pilot .x-pil-artifact__desc {
        font-size: 0.82rem;
        color: var(--x-muted);
        line-height: 1.5;
      }

      /* --- CTA --- */
      #x-pilot .x-pil-cta {
        text-align: center;
        margin-bottom: var(--x-sp-5);
      }

      #x-pilot .x-pil-cta__micro {
        font-family: var(--x-ff-mono);
        font-size: 11px;
        text-transform: uppercase;
        color: var(--x-muted);
        opacity: 0.65;
        letter-spacing: 0.05em;
        margin-top: var(--x-sp-3);
      }

      /* --- Footer note --- */
      #x-pilot .x-pil-note {
        font-family: var(--x-ff-mono);
        font-size: 12px;
        color: var(--x-muted);
        opacity: 0.55;
        text-align: center;
        border-top: 1px solid rgba(51, 65, 85, 0.3);
        padding-top: var(--x-sp-4);
      }

      /* === PROCUREMENT PACK (Premium v2 — scoped overrides) === */

      /* --- Sub-headings --- */
      #x-procurement .x-proc-subhead {
        font-family: var(--x-ff-head);
        font-size: var(--x-fs-3);
        font-weight: 700;
        color: var(--x-text);
        margin: var(--x-sp-7) 0 var(--x-sp-5);
        display: flex;
        align-items: center;
        gap: 12px;
      }

      #x-procurement .x-proc-subhead::before {
        content: '';
        display: block;
        width: 4px;
        height: 24px;
        border-radius: 2px;
        background: var(--x-accent);
        flex-shrink: 0;
      }

      /* --- Document cards grid --- */
      #x-procurement .x-proc-docs {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      /* --- Document card --- */
      #x-procurement .x-proc-doc {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 16px;
        align-items: start;
        padding: 20px 24px;
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-procurement .x-proc-doc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        border-radius: 14px 0 0 14px;
      }

      #x-procurement .x-proc-doc:hover {
        transform: translateY(-2px);
      }

      /* --- Number circle --- */
      #x-procurement .x-proc-doc__num {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-family: var(--x-ff-mono);
        font-size: 16px;
        font-weight: 700;
        transition: box-shadow 0.35s, transform 0.35s;
      }

      /* --- Title + badge --- */
      #x-procurement .x-proc-doc__title {
        font-family: var(--x-ff-head);
        font-size: 1rem;
        font-weight: 700;
        color: var(--x-text);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      #x-procurement .x-proc-doc__badge {
        font-family: var(--x-ff-mono);
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 4px;
        white-space: nowrap;
      }

      #x-procurement .x-proc-doc__text {
        font-size: var(--x-fs-5);
        color: var(--x-muted);
        line-height: 1.55;
      }

      /* --- Doc 1: Cyan --- */
      #x-procurement .x-proc-doc--1::before {
        background: #00e5ff;
      }

      #x-procurement .x-proc-doc--1 .x-proc-doc__num {
        color: #00e5ff;
        background: rgba(0, 229, 255, 0.06);
        border: 1px solid rgba(0, 229, 255, 0.2);
      }

      #x-procurement .x-proc-doc--1 .x-proc-doc__badge {
        color: #00e5ff;
        background: rgba(0, 229, 255, 0.08);
        border: 1px solid rgba(0, 229, 255, 0.2);
      }

      #x-procurement .x-proc-doc--1:hover {
        border-color: rgba(0, 229, 255, 0.3);
        box-shadow: 0 6px 28px rgba(0, 229, 255, 0.06);
      }

      #x-procurement .x-proc-doc--1:hover .x-proc-doc__num {
        box-shadow: 0 0 16px rgba(0, 229, 255, 0.15);
      }

      /* --- Doc 2: Green --- */
      #x-procurement .x-proc-doc--2::before {
        background: #10b981;
      }

      #x-procurement .x-proc-doc--2 .x-proc-doc__num {
        color: #10b981;
        background: rgba(16, 185, 129, 0.06);
        border: 1px solid rgba(16, 185, 129, 0.2);
      }

      #x-procurement .x-proc-doc--2 .x-proc-doc__badge {
        color: #10b981;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.2);
      }

      #x-procurement .x-proc-doc--2:hover {
        border-color: rgba(16, 185, 129, 0.3);
        box-shadow: 0 6px 28px rgba(16, 185, 129, 0.06);
      }

      #x-procurement .x-proc-doc--2:hover .x-proc-doc__num {
        box-shadow: 0 0 16px rgba(16, 185, 129, 0.15);
      }

      /* --- Doc 3: Amber --- */
      #x-procurement .x-proc-doc--3::before {
        background: #f59e0b;
      }

      #x-procurement .x-proc-doc--3 .x-proc-doc__num {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.06);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }

      #x-procurement .x-proc-doc--3 .x-proc-doc__badge {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }

      #x-procurement .x-proc-doc--3:hover {
        border-color: rgba(245, 158, 11, 0.3);
        box-shadow: 0 6px 28px rgba(245, 158, 11, 0.06);
      }

      #x-procurement .x-proc-doc--3:hover .x-proc-doc__num {
        box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
      }

      /* --- Doc 4: Purple --- */
      #x-procurement .x-proc-doc--4::before {
        background: #a855f7;
      }

      #x-procurement .x-proc-doc--4 .x-proc-doc__num {
        color: #a855f7;
        background: rgba(168, 85, 247, 0.06);
        border: 1px solid rgba(168, 85, 247, 0.2);
      }

      #x-procurement .x-proc-doc--4 .x-proc-doc__badge {
        color: #a855f7;
        background: rgba(168, 85, 247, 0.08);
        border: 1px solid rgba(168, 85, 247, 0.2);
      }

      #x-procurement .x-proc-doc--4:hover {
        border-color: rgba(168, 85, 247, 0.3);
        box-shadow: 0 6px 28px rgba(168, 85, 247, 0.06);
      }

      #x-procurement .x-proc-doc--4:hover .x-proc-doc__num {
        box-shadow: 0 0 16px rgba(168, 85, 247, 0.15);
      }

      /* --- Doc 5: Red --- */
      #x-procurement .x-proc-doc--5::before {
        background: #ef4444;
      }

      #x-procurement .x-proc-doc--5 .x-proc-doc__num {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.06);
        border: 1px solid rgba(239, 68, 68, 0.2);
      }

      #x-procurement .x-proc-doc--5 .x-proc-doc__badge {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
      }

      #x-procurement .x-proc-doc--5:hover {
        border-color: rgba(239, 68, 68, 0.3);
        box-shadow: 0 6px 28px rgba(239, 68, 68, 0.06);
      }

      #x-procurement .x-proc-doc--5:hover .x-proc-doc__num {
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.15);
      }

      /* --- Outcomes list --- */
      #x-procurement .x-proc-outcomes {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      #x-procurement .x-proc-outcomes li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        font-size: var(--x-fs-5);
        color: var(--x-text);
        line-height: 1.55;
      }

      #x-procurement .x-proc-outcomes li::before {
        content: '✓';
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 700;
        color: #10b981;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.25);
        margin-top: 1px;
      }

      /* --- CTA area --- */
      #x-procurement .x-proc-cta {
        text-align: center;
        margin-top: var(--x-sp-7);
        padding-top: var(--x-sp-6);
        border-top: 1px solid rgba(51, 65, 85, 0.3);
      }

      #x-procurement .x-proc-cta__micro {
        margin-top: var(--x-sp-3);
        font-family: var(--x-ff-mono);
        font-size: 11px;
        color: var(--x-muted);
        opacity: 0.65;
        letter-spacing: 0.04em;
      }

      #x-procurement .x-proc-cta__link {
        display: inline-block;
        margin-top: var(--x-sp-4);
        font-family: var(--x-ff-mono);
        font-size: 12px;
        color: var(--x-accent);
        text-decoration: none;
        border-bottom: 1px dashed rgba(0, 229, 255, 0.3);
        transition: border-color 0.2s, color 0.2s;
        letter-spacing: 0.02em;
      }

      #x-procurement .x-proc-cta__link:hover {
        border-bottom-color: var(--x-accent);
        color: #fff;
      }

      /* --- Scroll-reveal --- */
      #x-procurement .proc-anim {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-procurement .proc-anim--visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* === FINAL CTA (Premium v2 — scoped overrides) === */

      /* --- Lead --- */
      #x-request-demo .x-cta-lead {
        font-size: var(--x-fs-5);
        color: var(--x-muted);
        text-align: center;
        max-width: 680px;
        margin: 0 auto var(--x-sp-7);
        line-height: 1.6;
      }

      /* --- CTA cards grid --- */
      #x-request-demo .x-cta-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--x-sp-5);
        margin-bottom: var(--x-sp-4);
      }

      @media (max-width: 768px) {
        #x-request-demo .x-cta-cards {
          grid-template-columns: 1fr;
        }
      }

      /* --- CTA card base --- */
      #x-request-demo .x-cta-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--x-sp-6) var(--x-sp-5);
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-request-demo .x-cta-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 14px 14px 0 0;
      }

      #x-request-demo .x-cta-card:hover {
        transform: translateY(-4px);
      }

      /* --- Card icon --- */
      #x-request-demo .x-cta-card__icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--x-sp-4);
        transition: box-shadow 0.35s, transform 0.35s;
      }

      #x-request-demo .x-cta-card__icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.5;
        fill: none;
        stroke: currentColor;
      }

      /* --- Card meta --- */
      #x-request-demo .x-cta-card__desc {
        font-size: var(--x-fs-6);
        color: var(--x-muted);
        line-height: 1.5;
        margin-top: var(--x-sp-3);
        max-width: 340px;
      }

      #x-request-demo .x-cta-card .x-btn {
        margin-top: var(--x-sp-4);
      }

      /* --- Demo card: Cyan --- */
      #x-request-demo .x-cta-card--demo::before {
        background: linear-gradient(90deg, rgba(0, 229, 255, 0.6), rgba(0, 229, 255, 0.1));
      }

      #x-request-demo .x-cta-card--demo .x-cta-card__icon {
        color: #00e5ff;
        background: rgba(0, 229, 255, 0.06);
        border: 1px solid rgba(0, 229, 255, 0.2);
      }

      #x-request-demo .x-cta-card--demo:hover {
        border-color: rgba(0, 229, 255, 0.35);
        box-shadow: 0 6px 28px rgba(0, 229, 255, 0.06), 0 0 0 1px rgba(0, 229, 255, 0.08);
      }

      #x-request-demo .x-cta-card--demo:hover .x-cta-card__icon {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
        transform: scale(1.05);
      }

      /* --- Docs card: Green --- */
      #x-request-demo .x-cta-card--docs::before {
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.1));
      }

      #x-request-demo .x-cta-card--docs .x-cta-card__icon {
        color: #10b981;
        background: rgba(16, 185, 129, 0.06);
        border: 1px solid rgba(16, 185, 129, 0.2);
      }

      #x-request-demo .x-cta-card--docs:hover {
        border-color: rgba(16, 185, 129, 0.35);
        box-shadow: 0 6px 28px rgba(16, 185, 129, 0.06), 0 0 0 1px rgba(16, 185, 129, 0.08);
      }

      #x-request-demo .x-cta-card--docs:hover .x-cta-card__icon {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
        transform: scale(1.05);
      }

      /* --- Secondary link --- */
      #x-request-demo .x-cta-alt {
        text-align: center;
        margin-bottom: var(--x-sp-7);
      }

      #x-request-demo .x-cta-alt a {
        font-family: var(--x-ff-mono);
        font-size: 12px;
        color: var(--x-accent);
        text-decoration: none;
        border-bottom: 1px dashed rgba(0, 229, 255, 0.3);
        transition: border-color 0.2s, color 0.2s;
      }

      #x-request-demo .x-cta-alt a:hover {
        border-bottom-color: var(--x-accent);
        color: #fff;
      }

      /* --- Stepper sub-heading --- */
      #x-request-demo .x-cta-subhead {
        font-family: var(--x-ff-head);
        font-size: var(--x-fs-3);
        font-weight: 700;
        color: var(--x-text);
        text-align: center;
        margin-bottom: var(--x-sp-6);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }

      /* --- Stepper --- */
      #x-request-demo .x-cta-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--x-sp-5);
        margin-bottom: var(--x-sp-6);
      }

      @media (max-width: 768px) {
        #x-request-demo .x-cta-steps {
          grid-template-columns: 1fr;
        }
      }

      #x-request-demo .x-cta-step {
        padding: var(--x-sp-5) var(--x-sp-4);
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 14px;
        position: relative;
        overflow: hidden;
        transition: border-color 0.35s, box-shadow 0.35s;
      }

      #x-request-demo .x-cta-step::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 14px 14px 0 0;
      }

      #x-request-demo .x-cta-step__num {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: var(--x-sp-3);
      }

      #x-request-demo .x-cta-step__num strong {
        font-family: var(--x-ff-mono);
        font-size: 20px;
        font-weight: 700;
      }

      #x-request-demo .x-cta-step__num svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.5;
        fill: none;
        stroke: currentColor;
      }

      #x-request-demo .x-cta-step__title {
        font-family: var(--x-ff-head);
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--x-text);
        margin-bottom: 6px;
      }

      #x-request-demo .x-cta-step__text {
        font-size: var(--x-fs-6);
        color: var(--x-muted);
        line-height: 1.5;
      }

      #x-request-demo .x-cta-step__list {
        list-style: none;
        padding: 0;
        margin: 6px 0 0;
        font-size: var(--x-fs-6);
        color: var(--x-muted);
        line-height: 1.6;
      }

      #x-request-demo .x-cta-step__list li::before {
        content: '→ ';
        color: #00e5ff;
      }

      /* Step 1: Green */
      #x-request-demo .x-cta-step--1::before {
        background: #10b981;
      }

      #x-request-demo .x-cta-step--1 .x-cta-step__num {
        color: #10b981;
      }

      /* Step 2: Amber */
      #x-request-demo .x-cta-step--2::before {
        background: #f59e0b;
      }

      #x-request-demo .x-cta-step--2 .x-cta-step__num {
        color: #f59e0b;
      }

      /* Step 3: Cyan */
      #x-request-demo .x-cta-step--3::before {
        background: #00e5ff;
      }

      #x-request-demo .x-cta-step--3 .x-cta-step__num {
        color: #00e5ff;
      }

      /* --- Guarantees --- */
      #x-request-demo .x-cta-guarantee {
        text-align: center;
        font-family: var(--x-ff-mono);
        font-size: 11px;
        color: var(--x-muted);
        opacity: 0.6;
        letter-spacing: 0.04em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      #x-request-demo .x-cta-guarantee svg {
        width: 14px;
        height: 14px;
        stroke-width: 1.5;
        fill: none;
        stroke: currentColor;
        opacity: 0.5;
        flex-shrink: 0;
      }

      /* --- Scroll-reveal --- */
      #x-request-demo .cta-anim {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-request-demo .cta-anim--visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* === CONTACTS (Premium v2 — scoped overrides) === */

      /* --- Card grid --- */
      #recCONTACTS .x-contacts__row {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        gap: var(--x-sp-5);
        margin-top: var(--x-sp-6);
      }

      @media (max-width: 768px) {
        #recCONTACTS .x-contacts__row {
          grid-template-columns: 1fr;
        }
      }

      /* --- Card base --- */
      #recCONTACTS .x-contacts__card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--x-sp-6) var(--x-sp-5);
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 14px;
        overflow: hidden;
        transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #recCONTACTS .x-contacts__card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 14px 14px 0 0;
      }

      /* --- Icon circle --- */
      #recCONTACTS .x-contacts__icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--x-sp-4);
        transition: box-shadow 0.35s, transform 0.35s;
      }

      #recCONTACTS .x-contacts__icon svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.5;
        fill: none;
        stroke: currentColor;
      }

      /* --- Label --- */
      #recCONTACTS .x-contacts__label {
        font-family: var(--x-ff-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-bottom: 8px;
      }

      /* --- Value --- */
      #recCONTACTS .x-contacts__value {
        font-size: var(--x-fs-4);
        font-weight: 600;
        color: var(--x-text);
        text-decoration: none;
        transition: color 0.3s;
      }

      #recCONTACTS a.x-contacts__value:hover {
        text-decoration: none;
      }

      /* --- Email: Cyan --- */
      #recCONTACTS .x-contacts__card--email::before {
        background: linear-gradient(90deg, rgba(0, 229, 255, 0.6), rgba(0, 229, 255, 0.1));
      }

      #recCONTACTS .x-contacts__card--email .x-contacts__icon {
        color: #00e5ff;
        background: rgba(0, 229, 255, 0.06);
        border: 1px solid rgba(0, 229, 255, 0.2);
      }

      #recCONTACTS .x-contacts__card--email .x-contacts__label {
        color: #00e5ff;
      }

      #recCONTACTS .x-contacts__card--email:hover {
        border-color: rgba(0, 229, 255, 0.35);
        box-shadow: 0 6px 28px rgba(0, 229, 255, 0.06), 0 0 0 1px rgba(0, 229, 255, 0.08);
        transform: translateY(-4px);
      }

      #recCONTACTS .x-contacts__card--email:hover .x-contacts__icon {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
        transform: scale(1.05);
      }

      #recCONTACTS .x-contacts__card--email:hover .x-contacts__value {
        color: #00e5ff;
      }

      /* --- Phone: Green --- */
      #recCONTACTS .x-contacts__card--phone::before {
        background: linear-gradient(90deg, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.1));
      }

      #recCONTACTS .x-contacts__card--phone .x-contacts__icon {
        color: #10b981;
        background: rgba(16, 185, 129, 0.06);
        border: 1px solid rgba(16, 185, 129, 0.2);
      }

      #recCONTACTS .x-contacts__card--phone .x-contacts__label {
        color: #10b981;
      }

      #recCONTACTS .x-contacts__card--phone:hover {
        border-color: rgba(16, 185, 129, 0.35);
        box-shadow: 0 6px 28px rgba(16, 185, 129, 0.06), 0 0 0 1px rgba(16, 185, 129, 0.08);
        transform: translateY(-4px);
      }

      #recCONTACTS .x-contacts__card--phone:hover .x-contacts__icon {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
        transform: scale(1.05);
      }

      #recCONTACTS .x-contacts__card--phone:hover .x-contacts__value {
        color: #10b981;
      }

      /* --- Location: Amber --- */
      #recCONTACTS .x-contacts__card--loc::before {
        background: linear-gradient(90deg, rgba(245, 158, 11, 0.6), rgba(245, 158, 11, 0.1));
      }

      #recCONTACTS .x-contacts__card--loc .x-contacts__icon {
        color: #f59e0b;
        background: rgba(245, 158, 11, 0.06);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }

      #recCONTACTS .x-contacts__card--loc .x-contacts__label {
        color: #f59e0b;
      }

      #recCONTACTS .x-contacts__card--loc:hover {
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 6px 28px rgba(245, 158, 11, 0.06), 0 0 0 1px rgba(245, 158, 11, 0.08);
        transform: translateY(-4px);
      }

      #recCONTACTS .x-contacts__card--loc:hover .x-contacts__icon {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
        transform: scale(1.05);
      }

      #recCONTACTS .x-contacts__card--loc:hover .x-contacts__value {
        color: #f59e0b;
      }

      /* --- Footer --- */
      #recCONTACTS .x-contacts__footer {
        margin-top: var(--x-sp-7);
        padding-top: var(--x-sp-5);
        border-top: 1px solid rgba(51, 65, 85, 0.3);
        text-align: center;
        font-family: var(--x-ff-mono);
        font-size: 11px;
        color: var(--x-muted);
        opacity: 0.6;
        letter-spacing: 0.04em;
      }

      /* --- Scroll-reveal --- */
      #recCONTACTS .ct-anim {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #recCONTACTS .ct-anim--visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* === PARTNERS (Premium v2 — scoped overrides) === */

      #x-partners .x-partners__grid {
        display: flex;
        justify-content: center;
        margin-top: var(--x-sp-6);
      }

      #x-partners .x-partner-card {
        display: flex;
        align-items: center;
        gap: var(--x-sp-5);
        max-width: 720px;
        width: 100%;
        padding: var(--x-sp-6);
        background: linear-gradient(165deg, rgba(19, 27, 46, 0.55), rgba(11, 17, 32, 0.75));
        border: 1px solid rgba(51, 65, 85, 0.45);
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        color: inherit;
        transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-partners .x-partner-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 14px 14px 0 0;
        background: linear-gradient(90deg, rgba(14, 165, 233, 0.6), rgba(14, 165, 233, 0.1));
      }

      #x-partners .x-partner-card:hover {
        border-color: rgba(14, 165, 233, 0.35);
        box-shadow: 0 6px 28px rgba(14, 165, 233, 0.06), 0 0 0 1px rgba(14, 165, 233, 0.08);
        transform: translateY(-4px);
      }

      @media (max-width: 640px) {
        #x-partners .x-partner-card {
          flex-direction: column;
          text-align: center;
        }
      }

      /* --- Logo --- */
      #x-partners .x-partner-card__logo {
        width: 72px;
        height: 72px;
        flex-shrink: 0;
        border-radius: 14px;
        background: rgba(14, 165, 233, 0.06);
        border: 1px solid rgba(14, 165, 233, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--x-ff-head);
        font-size: 32px;
        font-weight: 700;
        color: #0ea5e9;
        transition: box-shadow 0.35s, transform 0.35s;
      }

      #x-partners .x-partner-card:hover .x-partner-card__logo {
        box-shadow: 0 0 20px rgba(14, 165, 233, 0.15);
        transform: scale(1.05);
      }

      /* --- Info --- */
      #x-partners .x-partner-card__name {
        font-family: var(--x-ff-head);
        font-size: var(--x-fs-3);
        font-weight: 700;
        color: var(--x-text);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      #x-partners .x-partner-card__name svg {
        width: 16px;
        height: 16px;
        stroke-width: 1.5;
        fill: none;
        stroke: #0ea5e9;
        opacity: 0.6;
        transition: opacity 0.3s;
      }

      #x-partners .x-partner-card:hover .x-partner-card__name svg {
        opacity: 1;
      }

      #x-partners .x-partner-card__tag {
        font-family: var(--x-ff-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        color: #0ea5e9;
        margin-bottom: 6px;
      }

      #x-partners .x-partner-card__text {
        font-size: var(--x-fs-5);
        color: var(--x-muted);
        line-height: 1.55;
      }

      /* --- Scroll-reveal --- */
      #x-partners .prt-anim {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #x-partners .prt-anim--visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* === LEFT-SLIDE DRAWER === */
      .x-drawer-demo {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 210;
        pointer-events: none;
        opacity: 0;
        transition: opacity .25s;
      }

      .x-drawer-demo--open {
        opacity: 1;
        pointer-events: auto;
      }

      .x-drawer-demo__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.82);
        backdrop-filter: blur(4px);
      }

      .x-drawer-demo__panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 640px;
        max-width: 100%;
        background: linear-gradient(180deg, #0d1526 0%, #0b1120 40%, #091018 100%);
        border-right: 1px solid rgba(0, 229, 255, .08);
        transform: translateX(-100%);
        transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        padding: 32px 28px 40px;
        box-shadow: 20px 0 60px rgba(0, 0, 0, .5);
      }

      .x-drawer-demo--open .x-drawer-demo__panel {
        transform: translateX(0);
      }

      .x-drawer-demo__close {
        position: absolute;
        top: 16px;
        right: 16px;
        background: rgba(19, 27, 46, .6);
        border: 1px solid rgba(51, 65, 85, .5);
        border-radius: 8px;
        width: 38px;
        height: 38px;
        color: #94a3b8;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: all .25s cubic-bezier(.16, 1, .3, 1);
        z-index: 2;
        backdrop-filter: blur(8px);
      }

      .x-drawer-demo__close:hover {
        border-color: #00e5ff;
        color: #00e5ff;
        background: rgba(0, 229, 255, .06);
        box-shadow: 0 0 12px rgba(0, 229, 255, .15);
        transform: scale(1.05);
      }

      /* === FORM TOKENS === */
      .x-form-wrap {
        --f-bg: #0b1120;
        --f-surface: #131b2e;
        --f-surface-2: #1a2340;
        --f-text: #e2e8f0;
        --f-muted: #94a3b8;
        --f-line: #334155;
        --f-accent: #00e5ff;
        --f-error: #ef4444;
        --f-success: #10b981;
        --f-ff-head: 'Inter', system-ui, sans-serif;
        --f-ff-body: 'Inter', system-ui, sans-serif;
        --f-ff-mono: 'JetBrains Mono', monospace;
        --f-radius: 10px;
        --f-radius-sm: 6px;
        font-family: var(--f-ff-body);
        color: var(--f-text);
        box-sizing: border-box;
        max-width: 100%;
      }

      .x-form-wrap *,
      .x-form-wrap *::before,
      .x-form-wrap *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      /* === FORM CONTAINER === */
      .x-form {
        position: relative;
        background: linear-gradient(170deg, rgba(19, 27, 46, .7), rgba(11, 17, 32, .9));
        border: 1px solid rgba(51, 65, 85, .4);
        border-radius: 18px;
        padding: 32px 28px 28px;
        overflow: hidden;
        backdrop-filter: blur(16px);
        box-shadow: 0 4px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .03);
      }

      .x-form::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 5%, var(--f-accent) 35%, #22d3ee 65%, transparent 95%);
        opacity: 0.7;
      }

      /* === HEADER === */
      .x-form__header {
        text-align: center;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(51, 65, 85, .4);
      }

      .x-form__badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--f-ff-mono);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--f-accent);
        background: rgba(0, 229, 255, .06);
        border: 1px solid rgba(0, 229, 255, .2);
        border-radius: 6px;
        padding: 5px 16px;
        margin-bottom: 14px;
        position: relative;
        overflow: hidden;
      }

      .x-form__badge::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 200%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .08), transparent);
        animation: badgeSheen 3s ease-in-out infinite;
      }

      @keyframes badgeSheen {

        0%,
        100% {
          transform: translateX(-50%);
        }

        50% {
          transform: translateX(50%);
        }
      }

      .x-form__title {
        font-family: var(--f-ff-head);
        font-size: clamp(1.2rem, 2.4vw, 1.5rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.25;
        margin-bottom: 10px;
        background: linear-gradient(135deg, #fff 60%, var(--f-accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .x-form__subtitle {
        font-size: 0.82rem;
        color: var(--f-muted);
        line-height: 1.6;
        max-width: 480px;
        margin: 0 auto;
      }

      /* === STEPPER === */
      .x-form__stepper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 24px;
        padding: 0 20px;
      }

      .x-form__step-dot {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--f-ff-mono);
        font-size: 13px;
        font-weight: 700;
        border: 2px solid rgba(255, 255, 255, .1);
        background: var(--f-surface);
        color: var(--f-muted);
        transition: all .4s cubic-bezier(.16, 1, .3, 1);
        flex-shrink: 0;
        position: relative;
      }

      .x-form__step-dot--active {
        border-color: var(--f-accent);
        background: rgba(0, 229, 255, .12);
        color: var(--f-accent);
        box-shadow: 0 0 16px rgba(0, 229, 255, .25), 0 0 4px rgba(0, 229, 255, .4);
        transform: scale(1.08);
      }

      .x-form__step-dot--done {
        border-color: var(--f-success);
        background: rgba(16, 185, 129, .15);
        color: var(--f-success);
        box-shadow: 0 0 10px rgba(16, 185, 129, .2);
      }

      .x-form__step-line {
        width: 52px;
        height: 2px;
        background: rgba(255, 255, 255, .06);
        transition: background .4s;
        border-radius: 1px;
        position: relative;
      }

      .x-form__step-line--done {
        background: linear-gradient(90deg, rgba(16, 185, 129, .5), rgba(0, 229, 255, .3));
      }

      /* === PAGES === */
      .x-form__page {
        display: none;
        animation: formFadeIn .35s ease;
      }

      .x-form__page--active {
        display: block;
      }

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

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

      .x-form__page-label {
        font-family: var(--f-ff-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--f-accent);
        margin-bottom: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .x-form__page-label::before {
        content: '';
        width: 16px;
        height: 1px;
        background: var(--f-accent);
        opacity: .5;
      }

      /* === ROWS === */
      .x-form__row {
        margin-bottom: 16px;
      }

      .x-form__row--grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      @media(max-width: 600px) {
        .x-form__row--grid2 {
          grid-template-columns: 1fr;
        }
      }

      .x-form__row--hidden {
        display: none;
      }

      /* === LABELS === */
      .x-form__label {
        display: block;
        font-size: .78rem;
        font-weight: 600;
        color: var(--f-text);
        margin-bottom: 5px;
        line-height: 1.3;
      }

      .x-form__label-req {
        color: var(--f-accent);
        font-weight: 400;
        margin-left: 2px;
      }

      .x-form__label-hint {
        display: block;
        font-size: 10px;
        color: var(--f-muted);
        font-weight: 400;
        margin-top: 2px;
        line-height: 1.4;
      }

      /* === INPUTS === */
      .x-form__input,
      .x-form__select,
      .x-form__textarea {
        width: 100%;
        font-family: var(--f-ff-body);
        font-size: .85rem;
        color: var(--f-text);
        background: var(--f-surface);
        border: 1px solid rgba(51, 65, 85, .5);
        border-radius: 8px;
        padding: 11px 14px;
        outline: none;
        transition: border-color .25s, box-shadow .25s, background .25s, transform .2s;
        -webkit-appearance: none;
        appearance: none;
      }

      .x-form__input::placeholder,
      .x-form__textarea::placeholder {
        color: rgba(148, 163, 184, .45);
        font-style: italic;
      }

      .x-form__input:hover,
      .x-form__select:hover,
      .x-form__textarea:hover {
        border-color: rgba(0, 229, 255, .3);
        background: var(--f-surface-2);
      }

      .x-form__input:focus,
      .x-form__select:focus,
      .x-form__textarea:focus {
        border-color: var(--f-accent);
        box-shadow: 0 0 0 3px rgba(0, 229, 255, .1), 0 0 16px rgba(0, 229, 255, .08);
        background: var(--f-surface-2);
      }

      .x-form__input--error,
      .x-form__select--error {
        border-color: var(--f-error) !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important;
        animation: formShake .4s ease-in-out;
      }

      @keyframes formShake {

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

        20% {
          transform: translateX(-4px);
        }

        40% {
          transform: translateX(4px);
        }

        60% {
          transform: translateX(-3px);
        }

        80% {
          transform: translateX(2px);
        }
      }

      .x-form__error-msg {
        font-size: 11px;
        color: var(--f-error);
        margin-top: 4px;
        display: none;
        line-height: 1.3;
      }

      .x-form__error-msg--visible {
        display: block;
      }

      .x-form__select {
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
      }

      .x-form__textarea {
        resize: vertical;
        min-height: 72px;
      }

      /* === ROLES === */
      .x-form__roles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      @media(max-width: 600px) {
        .x-form__roles {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .x-form__role {
        position: relative;
        cursor: pointer;
      }

      .x-form__role input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .x-form__role-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px 8px 14px;
        background: var(--f-surface);
        border: 1px solid rgba(51, 65, 85, .4);
        border-radius: 12px;
        text-align: center;
        transition: all .3s cubic-bezier(.16, 1, .3, 1);
        position: relative;
        overflow: hidden;
      }

      .x-form__role-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--f-accent);
        opacity: 0;
        transition: opacity .3s;
      }

      .x-form__role-card:hover {
        border-color: rgba(0, 229, 255, .35);
        background: var(--f-surface-2);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
      }

      .x-form__role-card:hover::before {
        opacity: 0.4;
      }

      .x-form__role input:checked+.x-form__role-card {
        border-color: var(--f-accent);
        background: rgba(0, 229, 255, .06);
        box-shadow: 0 0 20px rgba(0, 229, 255, .12), inset 0 0 12px rgba(0, 229, 255, .04);
        transform: translateY(-2px);
      }

      .x-form__role input:checked+.x-form__role-card::before {
        opacity: 0.8;
      }

      .x-form__role-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 229, 255, .06);
        border: 1px solid rgba(0, 229, 255, .1);
        transition: all .3s;
      }

      .x-form__role-icon svg {
        width: 20px;
        height: 20px;
        stroke: var(--f-accent);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke .3s;
      }

      .x-form__role input:checked+.x-form__role-card .x-form__role-icon {
        background: rgba(0, 229, 255, .12);
        border-color: rgba(0, 229, 255, .3);
        box-shadow: 0 0 12px rgba(0, 229, 255, .15);
        transform: scale(1.08);
      }

      .x-form__role-name {
        font-size: 11px;
        font-weight: 600;
        color: var(--f-text);
        line-height: 1.25;
        transition: color .3s;
      }

      .x-form__role input:checked+.x-form__role-card .x-form__role-name {
        color: #fff;
      }

      /* === FORMAT CARDS === */
      .x-form__formats {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .x-form__format {
        position: relative;
        cursor: pointer;
      }

      .x-form__format input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      .x-form__format-card {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
        background: var(--f-surface);
        border: 1px solid rgba(51, 65, 85, .45);
        border-radius: var(--f-radius);
        transition: all .3s cubic-bezier(.16, 1, .3, 1);
      }

      .x-form__format-card:hover {
        border-color: rgba(0, 229, 255, .3);
        background: var(--f-surface-2);
      }

      .x-form__format input:checked+.x-form__format-card {
        border-color: var(--f-accent);
        background: rgba(0, 229, 255, .05);
        box-shadow: 0 0 14px rgba(0, 229, 255, .08);
      }

      .x-form__format-radio {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(148, 163, 184, .4);
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 1px;
        transition: all .25s;
        position: relative;
      }

      .x-form__format input:checked+.x-form__format-card .x-form__format-radio {
        border-color: var(--f-accent);
      }

      .x-form__format input:checked+.x-form__format-card .x-form__format-radio::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 8px;
        height: 8px;
        background: var(--f-accent);
        border-radius: 50%;
        box-shadow: 0 0 6px var(--f-accent);
      }

      .x-form__format-body {
        flex: 1;
      }

      .x-form__format-title {
        font-size: .82rem;
        font-weight: 700;
        color: var(--f-text);
        margin-bottom: 2px;
      }

      .x-form__format-desc {
        font-size: 10px;
        color: var(--f-muted);
        line-height: 1.45;
      }

      .x-form__format-time {
        font-family: var(--f-ff-mono);
        font-size: 10px;
        font-weight: 700;
        color: var(--f-accent);
        background: rgba(0, 229, 255, .06);
        border: 1px solid rgba(0, 229, 255, .15);
        padding: 2px 7px;
        border-radius: 4px;
        margin-top: 5px;
        display: inline-block;
      }

      /* === CHECKBOXES === */
      .x-form__check {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        cursor: pointer;
        margin-bottom: 8px;
      }

      .x-form__check input {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(148, 163, 184, .4);
        border-radius: 4px;
        flex-shrink: 0;
        margin-top: 1px;
        cursor: pointer;
        transition: all .2s;
        position: relative;
      }

      .x-form__check input:checked {
        border-color: var(--f-accent);
        background: var(--f-accent);
        box-shadow: 0 0 8px rgba(0, 229, 255, .3);
      }

      .x-form__check input:checked::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 4px;
        width: 4px;
        height: 8px;
        border: solid #0b1120;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      .x-form__check-text {
        font-size: .78rem;
        color: var(--f-muted);
        line-height: 1.45;
      }

      .x-form__check-text a {
        color: var(--f-accent);
        text-decoration: none;
        border-bottom: 1px dashed rgba(0, 229, 255, .3);
      }

      /* === ACTIONS === */
      .x-form__actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid rgba(51, 65, 85, .3);
      }

      .x-form__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-family: var(--f-ff-mono);
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: 11px 24px;
        border-radius: 8px;
        cursor: pointer;
        transition: all .25s cubic-bezier(.16, 1, .3, 1);
        border: 1px solid transparent;
      }

      .x-form__btn--next {
        background: linear-gradient(135deg, var(--f-accent), #22d3ee);
        color: #000;
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(0, 229, 255, .2);
      }

      .x-form__btn--next:hover {
        background: #fff;
        border-color: #fff;
        box-shadow: 0 0 20px rgba(0, 229, 255, .5);
        transform: translateY(-1px);
      }

      .x-form__btn--back {
        background: transparent;
        color: var(--f-muted);
        border: none;
        padding-left: 0;
      }

      .x-form__btn--back:hover {
        color: var(--f-accent);
      }

      .x-form__btn--submit {
        background: linear-gradient(135deg, #facc15, #fbbf24);
        color: #b91c1c;
        border-color: transparent;
        font-size: .82rem;
        padding: 13px 32px;
        box-shadow: 0 2px 12px rgba(250, 204, 21, .2);
      }

      .x-form__btn--submit:hover {
        background: #fff;
        color: #000;
        border-color: #fff;
        box-shadow: 0 0 24px rgba(250, 204, 21, .5);
        transform: translateY(-1px);
      }

      .x-form__btn svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      /* === TRUST === */
      .x-form__trust {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 14px;
        padding: 12px;
        background: rgba(19, 27, 46, .4);
        border-radius: var(--f-radius);
        border: 1px dashed rgba(51, 65, 85, .35);
      }

      .x-form__trust-item {
        font-size: 10px;
        color: var(--f-muted);
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .x-form__trust-item svg {
        width: 12px;
        height: 12px;
        stroke: var(--f-success);
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
      }

      /* === SUCCESS === */
      .x-form__success {
        display: none;
        text-align: center;
        padding: 28px 16px;
        animation: formFadeIn .5s ease;
      }

      .x-form__success--visible {
        display: block;
      }

      .x-form__success-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(16, 185, 129, .1);
        border: 2px solid rgba(16, 185, 129, .3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        box-shadow: 0 0 20px rgba(16, 185, 129, .15);
      }

      .x-form__success-icon svg {
        width: 24px;
        height: 24px;
        stroke: var(--f-success);
        fill: none;
        stroke-width: 2;
      }

      .x-form__success h3 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
      }

      .x-form__success p {
        font-size: .82rem;
        color: var(--f-muted);
        line-height: 1.6;
        max-width: 400px;
        margin: 0 auto;
      }

      .x-form__success-detail {
        margin-top: 16px;
        padding: 14px;
        background: var(--f-surface);
        border: 1px solid rgba(51, 65, 85, .4);
        border-radius: var(--f-radius);
        text-align: left;
        font-size: .78rem;
        color: var(--f-muted);
        line-height: 1.55;
      }

      .x-form__success-detail strong {
        color: var(--f-text);
      }

/* === MOBILE FIX: hide hero interactive visual on smartphones === */
@media (max-width: 520px) {
  .x-site .x-hero__visual {
    display: none !important;
  }

  .x-site .x-hero {
    padding-bottom: var(--x-sp-6);
  }

  .x-site .x-hero__grid {
    gap: var(--x-sp-5);
  }
}