:root {
      --canvas: #f4f7fb;
      --paper: #ffffff;
      --ink: #0e1730;
      --ink-2: #1d2945;
      --copy: #46536c;
      --muted: #72809a;
      --line: #d8e0ed;
      --line-blue: rgba(83, 101, 246, 0.24);
      /* Токены для network-atlas.css (портальные имена); без --paper-2 фон
       * панели глобуса становится невалидным и просвечивает. */
      --paper-2: #eef3ff;
      --paper-3: #e6edff;
      --line-strong: #bcc9df;
      --sky: #75d8ff;
      --blue: #5365f6;
      --blue-deep: #3548dc;
      --blue-soft: #dce2ff;
      --violet: #a06ff2;
      --cyan: #71d9ff;
      --mint: #63dfb3;
      --orange: #ffbf72;
      --night: #0c1428;
      --display: "Unbounded", "Arial Black", sans-serif;
      --body: "Inter Tight", "Segoe UI", Arial, sans-serif;
      --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
      --shadow: 0 32px 90px rgba(27, 40, 76, 0.12);
    }

    * { box-sizing: border-box; }

    html {
      overflow-x: clip;
      scroll-behavior: smooth;
      scroll-padding-top: 96px;
    }

    body {
      margin: 0;
      min-width: 320px;
      overflow-x: clip;
      color: var(--ink);
      background: var(--canvas);
      font-family: var(--body);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      opacity: 0.34;
      background-image: radial-gradient(rgba(14, 23, 48, 0.14) 0.55px, transparent 0.55px);
      background-size: 20px 20px;
      mask-image: linear-gradient(to bottom, #000 0%, transparent 54%);
    }

    body::after {
      content: "";
      position: absolute;
      top: -310px;
      left: 50%;
      z-index: -4;
      width: min(1280px, 100%);
      height: 820px;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 48%, rgba(113, 217, 255, 0.46), transparent 30%),
        radial-gradient(circle at 72% 26%, rgba(160, 111, 242, 0.4), transparent 31%),
        radial-gradient(circle at 49% 45%, rgba(83, 101, 246, 0.28), transparent 43%);
      filter: blur(42px);
      transform: translateX(-50%);
    }

    a { color: inherit; }
    button, input, summary, a { font: inherit; -webkit-tap-highlight-color: transparent; }
    button { color: inherit; }
    h1, h2, h3, p { margin-top: 0; }
    img, svg, canvas { display: block; }
    [hidden] { display: none !important; }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      clip-path: inset(50%);
    }

    .shell {
      width: min(1260px, calc(100% - 48px));
      margin-inline: auto;
    }

    .topbar-wrap {
      position: sticky;
      top: 0;
      z-index: 50;
      padding-top: 18px;
    }

    .topbar {
      display: flex;
      min-height: 66px;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px 0 21px;
      border-radius: 21px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 14px 42px rgba(25, 37, 70, 0.07);
      backdrop-filter: blur(22px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      font-family: var(--display);
      font-size: 23px;
      font-weight: 900;
      letter-spacing: -0.035em;
      text-decoration: none;
    }

    .brand-dot { color: var(--blue); }

    .nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav a {
      position: relative;
      display: inline-flex;
      min-height: 40px;
      align-items: center;
      padding: 0 13px;
      border-radius: 12px;
      color: var(--copy);
      background: rgba(255, 255, 255, 0.42);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transition: color 180ms ease, transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }

    .nav a:not(.nav-action)::after {
      content: none;
    }

    .nav a:not(.nav-action):hover {
      border-color: var(--blue);
      color: var(--ink);
      background: rgba(220, 226, 255, 0.62);
      transform: translateY(-1px);
    }

    .nav .route-link {
      display: inline-grid;
      grid-template-columns: auto auto;
      align-items: center;
      gap: 7px;
      line-height: 1;
    }

    .route-index {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 7px;
      font-weight: 500;
      line-height: 1;
    }

    .nav .route-link[aria-current="page"] {
      border-color: var(--blue);
      color: var(--ink);
      background: rgba(220, 226, 255, 0.72);
    }

    .nav .nav-action {
      gap: 4px;
      padding: 12px 17px;
      border-radius: 13px;
      color: var(--paper);
      background: var(--ink);
      box-shadow: 0 8px 20px rgba(14, 23, 48, 0.16);
    }

    /* Desktop shows "открыть бота", narrow screens show just "бот". */
    .nav-action-short { display: none; }

    .nav .nav-action:hover {
      color: var(--paper);
      background: var(--blue);
      transform: translateY(-1px);
    }

    .theme-toggle {
      display: inline-flex;
      min-height: 40px;
      align-items: center;
      gap: 8px;
      padding: 0 11px;
      border-radius: 12px;
      cursor: pointer;
      color: var(--copy);
      background: rgba(255, 255, 255, 0.5);
      font-size: 11px;
      font-weight: 750;
      transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .theme-toggle:hover {
      border-color: var(--blue);
      color: var(--ink);
      transform: translateY(-1px);
    }

    .theme-icon {
      position: relative;
      display: inline-flex;
      width: 29px;
      height: 17px;
      align-items: center;
      padding: 2px;
      border-radius: 999px;
      background: var(--blue-soft);
    }

    .theme-icon i {
      width: 13px;
      height: 13px;
      border: 3px solid var(--blue);
      border-radius: 50%;
      background: var(--paper);
      box-shadow: 0 2px 6px rgba(37, 50, 90, 0.18);
      transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease, background 180ms ease;
    }

    html[data-theme="dark"] .theme-icon i {
      border-color: var(--cyan);
      background: var(--night);
      transform: translateX(12px);
    }

    .hero {
      padding: 96px 0 70px;
    }

    .hero-head {
      max-width: 990px;
      margin: 0 auto 66px;
      text-align: center;
      animation: enter 720ms cubic-bezier(0.2, 0.74, 0.2, 1) both;
    }
    .eyebrow,
    .section-label,
    .panel-label,
    .micro-label,
    .fact-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.01em;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 27px;
      color: var(--copy);
    }

    .pulse {
      position: relative;
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 6px rgba(83, 101, 246, 0.12);
    }

    .pulse::after {
      content: "";
      position: absolute;
      inset: -8px;
      border: 1px solid var(--blue);
      border-radius: inherit;
      animation: pulse-ring 2.8s ease-out infinite;
    }

    h1 {
      margin-bottom: 30px;
      font-family: var(--display);
      font-size: clamp(64px, 7.6vw, 112px);
      font-weight: 900;
      line-height: 0.8;
      letter-spacing: -0.045em;
    }

    .hero-line { display: block; }

    .hero-line-accent {
      color: transparent;
      background: linear-gradient(102deg, var(--blue) 12%, #6b75ff 48%, var(--violet) 92%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .lead {
      max-width: 700px;
      margin: 0 auto;
      color: var(--ink-2);
      font-size: clamp(18px, 1.65vw, 21px);
      line-height: 1.56;
      letter-spacing: -0.025em;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 36px;
    }

    .button {
      display: inline-flex;
      min-height: 58px;
      align-items: center;
      justify-content: center;
      gap: 13px;
      padding: 0 24px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.82);
      font-size: 15px;
      font-weight: 800;
      text-decoration: none;
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    .button-primary {
      border-color: var(--blue);
      color: var(--paper);
      background: var(--blue);
      box-shadow: 0 17px 38px rgba(83, 101, 246, 0.28);
    }

    .button:hover {
      border-color: var(--blue);
      transform: translateY(-3px);
    }

    .button-primary:hover {
      background: var(--blue-deep);
      box-shadow: 0 22px 48px rgba(83, 101, 246, 0.34);
    }

    .arrow {
      font-family: var(--mono);
      font-size: 18px;
      line-height: 1;
    }

    .globe-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
      min-height: 720px;
      overflow: hidden;
      border-radius: 45px;
      background:
        linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
        radial-gradient(circle at 31% 47%, rgba(83, 101, 246, 0.2), transparent 33%),
        radial-gradient(circle at 76% 18%, rgba(160, 111, 242, 0.14), transparent 27%),
        #edf3ff;
      box-shadow: 0 42px 110px rgba(34, 47, 89, 0.16);
      isolation: isolate;
      animation: enter 820ms 80ms cubic-bezier(0.2, 0.74, 0.2, 1) both;
    }

    .globe-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.42;
      background-image:
        linear-gradient(rgba(83, 101, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83, 101, 246, 0.1) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at 34% 50%, #000, transparent 75%);
    }

    .panel-label {
      margin-bottom: 52px;
      color: var(--blue-deep);
    }

    .globe-stage {
      position: relative;
      z-index: 2;
      display: grid;
      min-width: 0;
      min-height: 720px;
      place-items: center;
      padding: 34px 18px 26px;
    }

    .globe-stage-head {
      position: absolute;
      top: 28px;
      left: 30px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .globe-stage-head strong,
    .globe-stage-head span {
      display: inline-flex;
      min-height: 31px;
      align-items: center;
      padding: 0 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 600;
      backdrop-filter: blur(14px);
    }

    .globe-stage-head strong { gap: 8px; color: var(--copy); }
    .globe-stage-head strong::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 5px rgba(99, 223, 179, 0.13);
    }

    .globe-stage-head span { color: var(--blue-deep); }

    .globe-wrap {
      position: relative;
      width: min(100%, 670px);
      aspect-ratio: 1;
    }

    #network-globe {
      width: 100%;
      height: 100%;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    #network-globe:active { cursor: grabbing; }

    .drag-hint {
      position: absolute;
      bottom: 2%;
      left: 50%;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 13px;
      border-radius: 999px;
      color: var(--copy);
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 12px 28px rgba(34, 47, 83, 0.09);
      backdrop-filter: blur(14px);
      font-family: var(--mono);
      font-size: 10px;
      pointer-events: none;
      transform: translateX(-50%);
    }

    .drag-hint::before {
      content: "↔";
      color: var(--blue);
      font-size: 15px;
    }

    .globe-caption {
      position: absolute;
      right: 24px;
      bottom: 26px;
      z-index: 5;
      max-width: 230px;
      margin: 0;
      color: var(--copy);
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
      text-align: right;
    }

    .route-console {
      position: relative;
      z-index: 4;
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding: 38px;
      border-left: 1px solid rgba(196, 207, 232, 0.88);
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(24px);
    }

    .route-console .panel-label { margin-bottom: 24px; }

    .route-console h2 {
      margin-bottom: 13px;
      font-family: var(--display);
      font-size: clamp(35px, 3.8vw, 51px);
      line-height: 0.92;
      letter-spacing: -0.03em;
    }

    .route-intro {
      margin-bottom: 26px;
      color: var(--copy);
      font-size: 14px;
      line-height: 1.55;
    }

    .route-switcher {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin-bottom: 20px;
    }

    .network-route {
      min-width: 0;
      min-height: 52px;
      padding: 8px 7px;
      border-radius: 13px;
      cursor: pointer;
      color: var(--copy);
      background: rgba(244, 247, 251, 0.76);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .network-route:hover { border-color: var(--blue); color: var(--ink); transform: translateY(-1px); }
    .network-route.is-active {
      border-color: var(--blue);
      color: #fff;
      background: var(--blue);
      box-shadow: 0 10px 24px rgba(83, 101, 246, 0.22);
    }

    .network-route small {
      display: block;
      min-height: 14px;
      margin-top: 4px;
      overflow: hidden;
      color: inherit;
      font-size: 8px;
      font-weight: 500;
      opacity: 0.76;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .route-schema {
      padding: 19px;
      border-radius: 20px;
      background: #0d1730;
      color: #fff;
    }

    .route-schema-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 17px;
    }

    .route-schema-head span { color: #96a5c3; font-family: var(--mono); font-size: 8px; }
    .route-schema-head strong { font-size: 13px; }

    .route-steps {
      display: flex;
      min-height: 58px;
      align-items: center;
      gap: 7px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .route-steps::-webkit-scrollbar { display: none; }

    .route-step {
      display: grid;
      min-width: 62px;
      min-height: 52px;
      place-items: center;
      padding: 8px 7px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      text-align: center;
    }

    .route-step b { color: var(--cyan); font-family: var(--mono); font-size: 9px; }
    .route-step small { color: #d8e1f4; font-size: 8px; line-height: 1.25; }
    .route-step-arrow { flex: 0 0 auto; color: #7185ff; font-family: var(--mono); font-size: 13px; }
    .route-description { min-height: 42px; margin: 15px 0 0; color: #b8c5dd; font-size: 11px; line-height: 1.5; }

    .latency-panel {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: end;
      margin-top: auto;
      padding-top: 24px;
    }

    .latency-result span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--mono); font-size: 8px; }
    .latency-result strong { display: block; font-family: var(--display); font-size: 22px; letter-spacing: -0.05em; }
    .latency-result small { display: block; margin-top: 5px; color: var(--copy); font-size: 10px; line-height: 1.35; }

    .latency-button {
      min-height: 48px;
      padding: 0 15px;
      border: 0;
      border-radius: 14px;
      cursor: pointer;
      color: #fff;
      background: var(--ink);
      font-size: 11px;
      font-weight: 800;
      transition: transform 180ms ease, background 180ms ease;
    }

    .latency-button:hover { background: var(--blue); transform: translateY(-1px); }
    .latency-button:disabled { cursor: wait; opacity: 0.7; transform: none; }

    .latency-note {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.45;
    }

    .fact-rail {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 15px;
      overflow: hidden;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.68);
    }

    .fact {
      min-height: 122px;
      padding: 24px;
      border-right: 1px solid var(--line);
    }

    .fact:last-child { border-right: 0; }

    .fact strong {
      display: block;
      margin-bottom: 7px;
      font-family: var(--display);
      font-size: clamp(25px, 2.7vw, 36px);
      letter-spacing: -0.06em;
    }

    .fact-label {
      color: var(--copy);
      line-height: 1.4;
    }

    .section {
      position: relative;
      padding: 138px 0;
    }

    .section-head {
      display: grid;
      grid-template-columns: 0.72fr 1.28fr;
      gap: 60px;
      align-items: end;
      margin-bottom: 66px;
    }

    .section-label {
      margin-bottom: 3px;
      color: var(--copy);
    }

    .section-title {
      max-width: 900px;
      margin-bottom: 0;
      font-family: var(--display);
      font-size: clamp(50px, 6.2vw, 88px);
      font-weight: 900;
      line-height: 0.9;
      letter-spacing: -0.035em;
    }

    .section-title .accent { color: var(--blue); }

    .truth-section { border-top: 1px solid var(--line); }

    .truth-grid {
      display: grid;
      grid-template-columns: 0.78fr 1.22fr;
      min-height: 720px;
      overflow: hidden;
      border-radius: 40px;
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .truth-copy {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 52px;
      border-right: 1px solid var(--line);
      background:
        radial-gradient(circle at 5% 95%, rgba(113, 217, 255, 0.2), transparent 28%),
        var(--paper);
    }

    .truth-copy h2 {
      max-width: 480px;
      margin-bottom: 24px;
      font-family: var(--display);
      font-size: clamp(50px, 5.7vw, 78px);
      line-height: 0.89;
      letter-spacing: -0.078em;
    }

    .truth-copy p:not(.section-label) {
      max-width: 410px;
      margin-bottom: 0;
      color: var(--ink-2);
      font-size: 17px;
      line-height: 1.6;
    }

    .truth-points {
      display: grid;
      gap: 12px;
      margin-top: 36px;
    }

    .truth-point {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 13px;
      align-items: start;
      color: var(--copy);
      font-size: 14px;
      line-height: 1.5;
    }

    .truth-point b {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border: 1px solid var(--blue-soft);
      border-radius: 11px;
      color: var(--blue-deep);
      background: #f5f6ff;
      font-family: var(--mono);
      font-size: 10px;
    }

    .bot-lab {
      position: relative;
      display: grid;
      min-height: 0;
      place-items: center;
      overflow: hidden;
      padding: 42px;
      background:
        radial-gradient(circle at 48% 40%, rgba(83, 101, 246, 0.2), transparent 30%),
        radial-gradient(circle at 72% 74%, rgba(160, 111, 242, 0.16), transparent 28%),
        #f3f5ff;
    }

    .bot-lab::before,
    .bot-lab::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      border: 1px solid rgba(83, 101, 246, 0.12);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .bot-lab::before {
      width: 540px;
      height: 540px;
      box-shadow: 0 0 0 72px rgba(83, 101, 246, 0.018), 0 0 0 144px rgba(83, 101, 246, 0.014);
    }

    .bot-lab::after { width: 330px; height: 330px; }

    .bot-demo {
      position: relative;
      z-index: 3;
      width: min(430px, 100%);
      overflow: hidden;
      border-radius: 31px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 35px 90px rgba(37, 50, 90, 0.2);
      backdrop-filter: blur(20px);
    }

    .bot-demo-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 17px;
      border-bottom: 1px solid var(--line);
    }

    .bot-identity {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .bot-avatar {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 15px;
      color: var(--paper);
      background: var(--blue);
      font-family: var(--display);
      font-size: 16px;
      letter-spacing: -0.07em;
    }

    .bot-name {
      display: grid;
      gap: 3px;
      font-size: 13px;
    }

    .bot-name span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 500;
    }

    .demo-badge {
      padding: 7px 9px;
      border-radius: 999px;
      color: var(--copy);
      font-family: var(--mono);
      font-size: 8px;
    }

    .demo-mode {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      padding: 12px 14px 0;
    }

    .mode-button {
      min-height: 38px;
      padding: 0 10px;
      border-radius: 12px;
      cursor: pointer;
      color: var(--copy);
      background: #f7f8fc;
      font-size: 11px;
      font-weight: 750;
    }

    .mode-button[aria-pressed="true"] {
      border-color: var(--blue);
      color: var(--paper);
      background: var(--blue);
    }

    .bot-screen {
      min-height: 0;
      padding: 20px 16px 16px;
    }

    .screen-view {
      animation: screen-in 240ms ease both;
    }

    .bot-message {
      margin-bottom: 16px;
      padding: 15px;
      border-radius: 18px 18px 18px 6px;
      color: var(--ink-2);
      background: var(--canvas);
      font-size: 13px;
      line-height: 1.52;
    }

    .bot-message strong {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
    }

    .bot-buttons {
      display: grid;
      gap: 8px;
    }

    .bot-button {
      min-height: 46px;
      padding: 0 14px;
      border: 1px solid var(--blue-soft);
      border-radius: 13px;
      cursor: pointer;
      color: var(--blue-deep);
      background: #f4f6ff;
      font-size: 12px;
      font-weight: 750;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .bot-button:hover {
      border-color: var(--blue);
      background: #ecefff;
      transform: translateY(-1px);
    }

    .bot-button-primary {
      color: var(--paper);
      background: var(--blue);
      border-color: var(--blue);
    }

    .bot-button-primary:hover { background: var(--blue-deep); }

    .bot-button-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .plan-list {
      display: grid;
      gap: 7px;
      margin-bottom: 9px;
    }

    .plan-option {
      display: flex;
      min-height: 42px;
      align-items: center;
      justify-content: space-between;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--ink-2);
      background: var(--paper);
      font-size: 11px;
      font-weight: 700;
    }

    .plan-option span:last-child { color: var(--blue-deep); }
    .bot-back { margin-top: 9px; color: var(--copy); background: transparent; }

    .bot-stage-shell {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      width: min(570px, 100%);
      overflow: hidden;
      border-radius: 34px;
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 42px 105px rgba(37, 50, 90, 0.24);
      backdrop-filter: blur(24px);
    }

    .bot-route-rail {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      min-width: 0;
      align-items: center;
      gap: 18px;
      padding: 15px 20px;
      color: var(--paper);
      background:
        radial-gradient(circle at 10% 100%, rgba(113, 217, 255, 0.23), transparent 40%),
        linear-gradient(105deg, #17234a, #0c1428 68%);
    }

    .rail-kicker {
      display: block;
      margin-bottom: 7px;
      color: #96a5c3;
      font-family: var(--mono);
      font-size: 8px;
    }

    .bot-route-rail > div strong {
      font-family: var(--display);
      font-size: 19px;
      letter-spacing: -0.06em;
    }

    .bot-route-rail ol {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .bot-route-rail li {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 5px;
      align-items: center;
      min-height: 34px;
      padding: 6px 7px;
      border: 1px solid transparent;
      border-radius: 12px;
      color: #8795b1;
      transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .bot-route-rail li.is-current {
      border-color: rgba(255, 255, 255, 0.14);
      color: var(--paper);
      background: rgba(255, 255, 255, 0.08);
    }

    .bot-route-rail li b {
      font-family: var(--mono);
      font-size: 8px;
      font-weight: 500;
    }

    .bot-route-rail li span { overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

    .bot-route-rail > p {
      display: grid;
      gap: 5px;
      margin: 0;
      color: #8998b7;
      font-family: var(--mono);
      font-size: 8px;
    }

    .bot-route-rail code { color: var(--mint); font-size: 13px; }

    .bot-stage-shell .bot-demo {
      width: 100%;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background:
        linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
        radial-gradient(circle at 80% 12%, var(--blue-soft), transparent 38%);
    }

    .bot-stage-shell .bot-demo-top { min-height: 76px; padding: 15px 20px; }
    .bot-stage-shell .demo-mode { padding: 14px 19px 0; }
    .bot-stage-shell .bot-screen { min-height: 0; padding: 24px 20px 20px; }

    .bot-stage-shell .bot-message {
      position: relative;
      margin-right: 34px;
      padding: 18px;
      border: 1px solid rgba(216, 224, 237, 0.85);
      background: linear-gradient(135deg, #f7f9fd, #eef2ff);
      box-shadow: 0 10px 28px rgba(27, 40, 76, 0.06);
    }

    .bot-stage-shell .bot-message::after {
      content: "получено";
      position: absolute;
      right: 14px;
      bottom: 8px;
      color: #8b97ad;
      font-family: var(--mono);
      font-size: 7px;
    }

    .bot-stage-shell .bot-button { min-height: 50px; border-radius: 15px; }

    .apps-section {
      overflow: hidden;
      color: var(--paper);
      background: var(--night);
    }

    .apps-section::before {
      content: "";
      position: absolute;
      top: -380px;
      right: -260px;
      width: 900px;
      height: 900px;
      border: 1px solid rgba(113, 217, 255, 0.12);
      border-radius: 50%;
      box-shadow: 0 0 0 95px rgba(83, 101, 246, 0.018), 0 0 0 190px rgba(99, 223, 179, 0.014);
    }

    .hub-board {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      min-height: 540px;
      margin-bottom: 15px;
      overflow: hidden;
      border-radius: 32px;
      background:
        radial-gradient(circle at 23% 48%, rgba(83, 101, 246, 0.17), transparent 38%),
        rgba(255, 255, 255, 0.035);
    }

    .hub-map {
      position: relative;
      min-height: 540px;
      overflow: hidden;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      background-image:
        linear-gradient(rgba(113, 217, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(113, 217, 255, 0.055) 1px, transparent 1px);
      background-size: 38px 38px;
    }

    .hub-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      fill: none;
      stroke: rgba(113, 217, 255, 0.42);
      stroke-width: 1.5;
      stroke-dasharray: 6 9;
      vector-effect: non-scaling-stroke;
      animation: signal-dash 18s linear infinite;
    }

    .hub-lines .double-line {
      stroke: rgba(160, 111, 242, 0.72);
      stroke-width: 2.2;
      stroke-dasharray: 3 7;
    }

    .hub-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      border: 1px solid rgba(113, 217, 255, 0.13);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .hub-ring-one { width: 300px; height: 300px; }
    .hub-ring-two { width: 450px; height: 450px; }

    .hub-core {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 3;
      display: grid;
      width: 148px;
      height: 148px;
      place-content: center;
      border: 1px solid rgba(113, 217, 255, 0.45);
      border-radius: 50%;
      text-align: center;
      background: radial-gradient(circle, rgba(83, 101, 246, 0.42), rgba(21, 34, 70, 0.93));
      box-shadow: 0 0 0 12px rgba(83, 101, 246, 0.07), 0 0 70px rgba(83, 101, 246, 0.24);
      transform: translate(-50%, -50%);
    }

    .hub-core small {
      color: #9eabc5;
      font-family: var(--mono);
      font-size: 8px;
    }

    .hub-core strong {
      margin-top: 5px;
      font-family: var(--display);
      font-size: 20px;
      letter-spacing: -0.06em;
    }

    .hub-node {
      position: absolute;
      z-index: 4;
      display: grid;
      min-width: 112px;
      grid-template-columns: 10px auto;
      align-items: center;
      gap: 3px 8px;
      padding: 11px 13px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 14px;
      background: rgba(12, 20, 40, 0.78);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(14px);
    }

    .hub-node i {
      grid-row: 1 / 3;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 6px rgba(99, 223, 179, 0.1);
      animation: node-pulse 2.6s ease-in-out infinite;
    }

    .hub-node b { font-family: var(--display); font-size: 18px; letter-spacing: -0.05em; }
    .hub-node small { grid-column: 2; color: #91a0bd; font-family: var(--mono); font-size: 7px; }
    .node-nl { top: 14%; left: 5%; }
    .node-de { top: 13%; right: 5%; }
    .node-fi { right: 6%; bottom: 13%; }
    .node-ru { bottom: 13%; left: 6%; }
    .node-de i { background: var(--cyan); }
    .node-fi i { background: var(--violet); }
    .node-ru i { background: var(--blue); }

    .hub-ledger {
      display: flex;
      min-width: 0;
      flex-direction: column;
      justify-content: space-between;
      padding: 38px;
      background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), transparent);
    }

    .hub-ledger .panel-label { margin-bottom: 45px; color: #9daac3; }
    .hub-ledger h3 { margin-bottom: 34px; font-family: var(--display); font-size: clamp(38px, 4.3vw, 58px); line-height: .9; letter-spacing: -.03em; }
    .hub-ledger h3 span { color: var(--cyan); }

    .protocol-stack { display: grid; gap: 8px; }

    .protocol-stack > div {
      display: grid;
      grid-template-columns: 32px max-content minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-height: 54px;
      padding: 10px 12px;
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.035);
    }

    .protocol-stack b { color: #75839f; font-family: var(--mono); font-size: 8px; }
    .protocol-stack strong { font-size: 13px; white-space: nowrap; }
    .protocol-stack span { min-width: 0; color: #9faac0; font-size: 10px; line-height: 1.35; }
    .protocol-stack .protocol-double { border-color: rgba(160, 111, 242, 0.35); background: rgba(160, 111, 242, 0.08); }
    .protocol-double strong { color: #cdb2ff; }

    .apps-head {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.18fr 0.82fr;
      gap: 70px;
      align-items: end;
      margin-bottom: 70px;
    }

    .apps-head .section-label { color: #aab5ca; }

    .apps-copy {
      max-width: 430px;
      margin: 0 0 3px auto;
      color: #c2cada;
      font-size: 17px;
      line-height: 1.6;
    }

    .app-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }

    .app-card {
      position: relative;
      display: flex;
      min-height: 480px;
      overflow: hidden;
      flex-direction: column;
      justify-content: space-between;
      padding: 34px;
      border-radius: 30px;
      background: rgba(255, 255, 255, 0.045);
      transition: border-color 220ms ease, transform 220ms ease;
    }

    .app-card:hover {
      border-color: rgba(113, 217, 255, 0.36);
      transform: translateY(-5px);
    }

    .app-card-primary {
      background:
        radial-gradient(circle at 82% 12%, rgba(83, 101, 246, 0.34), transparent 36%),
        rgba(255, 255, 255, 0.045);
    }

    .app-card-secondary {
      background:
        radial-gradient(circle at 82% 12%, rgba(99, 223, 179, 0.23), transparent 36%),
        rgba(255, 255, 255, 0.045);
    }

    .app-orbit {
      position: absolute;
      top: -100px;
      right: -80px;
      width: 310px;
      height: 310px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      box-shadow: 0 0 0 48px rgba(255, 255, 255, 0.025), 0 0 0 96px rgba(255, 255, 255, 0.016);
      animation: orbit 18s linear infinite;
    }

    .app-orbit::before,
    .app-orbit::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      background: var(--paper);
    }

    .app-orbit::before { top: 58px; left: 10px; width: 13px; height: 13px; }
    .app-orbit::after { right: 26px; bottom: 52px; width: 8px; height: 8px; }

    .app-card .panel-label {
      position: relative;
      z-index: 2;
      margin-bottom: 0;
      color: #aab5ca;
    }

    .app-card h3 {
      position: relative;
      z-index: 2;
      margin-bottom: 17px;
      font-family: var(--display);
      font-size: clamp(46px, 5.3vw, 72px);
      line-height: 0.9;
      letter-spacing: -0.078em;
    }

    .app-card p:not(.panel-label) {
      position: relative;
      z-index: 2;
      max-width: 470px;
      margin-bottom: 22px;
      color: #c4ccdb;
      font-size: 16px;
      line-height: 1.55;
    }

    .app-actions {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .app-actions span {
      padding: 8px 10px;
      border-radius: 10px;
      color: #dce2ee;
      background: rgba(255, 255, 255, 0.04);
      font-family: var(--mono);
      font-size: 9px;
    }

    .price-section { padding-bottom: 80px; }

    .price-stage {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      overflow: hidden;
      border-radius: 40px;
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .price-copy {
      display: flex;
      min-height: 650px;
      flex-direction: column;
      justify-content: space-between;
      padding: 52px;
      border-right: 1px solid var(--line);
      background:
        radial-gradient(circle at 15% 90%, rgba(160, 111, 242, 0.18), transparent 30%),
        var(--paper);
    }

    .price-copy h2 {
      max-width: 500px;
      margin-bottom: 24px;
      font-family: var(--display);
      font-size: clamp(50px, 5.8vw, 78px);
      line-height: 0.89;
      letter-spacing: -0.078em;
    }

    .price-copy p:not(.section-label) {
      max-width: 410px;
      margin-bottom: 0;
      color: var(--ink-2);
      font-size: 16px;
      line-height: 1.6;
    }

    .ready-plans {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 30px;
    }

    .ready-plans span {
      padding: 9px 11px;
      border-radius: 11px;
      color: var(--copy);
      background: rgba(255, 255, 255, 0.76);
      font-family: var(--mono);
      font-size: 9px;
    }

    .calculator {
      display: grid;
      align-content: center;
      gap: 34px;
      min-height: 650px;
      padding: 58px;
      background:
        radial-gradient(circle at 75% 20%, rgba(113, 217, 255, 0.25), transparent 31%),
        #f6f8ff;
    }

    .calc-row {
      display: grid;
      gap: 15px;
    }

    .calc-top {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
    }

    .calc-top label {
      color: var(--ink-2);
      font-size: 15px;
      font-weight: 750;
    }

    .calc-value {
      font-family: var(--display);
      font-size: 34px;
      letter-spacing: -0.06em;
    }

    input[type="range"] {
      width: 100%;
      height: 6px;
      margin: 8px 0;
      appearance: none;
      border-radius: 999px;
      outline: none;
      background: linear-gradient(90deg, var(--blue) var(--fill, 0%), var(--blue-soft) var(--fill, 0%));
    }

    input[type="range"]::-webkit-slider-thumb {
      width: 25px;
      height: 25px;
      appearance: none;
      border: 5px solid var(--paper);
      border-radius: 50%;
      cursor: grab;
      background: var(--blue);
      box-shadow: 0 4px 15px rgba(83, 101, 246, 0.35);
    }

    input[type="range"]::-moz-range-thumb {
      width: 15px;
      height: 15px;
      border: 5px solid var(--paper);
      border-radius: 50%;
      cursor: grab;
      background: var(--blue);
      box-shadow: 0 4px 15px rgba(83, 101, 246, 0.35);
    }

    .calc-result {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding-top: 5px;
    }

    .result-card {
      min-height: 130px;
      padding: 20px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.84);
    }

    .result-card strong {
      display: block;
      margin-top: 12px;
      font-family: var(--display);
      font-size: clamp(30px, 3.2vw, 43px);
      letter-spacing: -0.065em;
    }

    .result-card-primary {
      color: var(--paper);
      background: var(--blue);
      border-color: var(--blue);
    }

    .result-card-primary .micro-label { color: rgba(255, 255, 255, 0.7); }
    .micro-label { color: var(--copy); }

    .calc-note {
      margin-bottom: 0;
      color: var(--copy);
      font-size: 13px;
      line-height: 1.5;
    }

    .payment-board {
      display: grid;
      grid-template-columns: 0.7fr 1.3fr;
      gap: 1px;
      margin-top: 15px;
      overflow: hidden;
      border-radius: 30px;
      background: var(--line);
    }

    .payment-intro {
      display: flex;
      min-height: 330px;
      flex-direction: column;
      justify-content: space-between;
      padding: 34px;
      background:
        radial-gradient(circle at 85% 15%, rgba(99, 223, 179, 0.24), transparent 34%),
        var(--paper);
    }

    .payment-intro h3 {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(38px, 4vw, 55px);
      line-height: .92;
      letter-spacing: -.025em;
    }

    .payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }

    .payment-methods article {
      display: flex;
      min-height: 164px;
      flex-direction: column;
      justify-content: space-between;
      padding: 25px;
      background: #f8faff;
      transition: background 180ms ease, transform 180ms ease;
    }

    .payment-methods article:hover { background: var(--paper); }
    .payment-methods article > span { color: var(--blue); font-family: var(--mono); font-size: 9px; }
    .payment-methods strong { font-family: var(--display); font-size: 23px; letter-spacing: -.055em; }
    .payment-methods small { color: var(--copy); font-size: 11px; }

    .extras {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      padding: 0 0 130px;
    }

    .extra-card {
      position: relative;
      min-height: 330px;
      overflow: hidden;
      padding: 32px;
      border-radius: 29px;
      background: var(--paper);
    }

    .extra-card-referral {
      background:
        radial-gradient(circle at 88% 12%, rgba(99, 223, 179, 0.32), transparent 34%),
        var(--paper);
    }

    .extra-card-promo {
      background:
        radial-gradient(circle at 88% 12%, rgba(160, 111, 242, 0.24), transparent 34%),
        var(--paper);
    }

    .extra-number {
      position: absolute;
      top: 22px;
      right: 28px;
      color: rgba(83, 101, 246, 0.11);
      font-family: var(--display);
      font-size: 88px;
      letter-spacing: -0.035em;
    }

    .extra-card .panel-label {
      margin-bottom: 106px;
      color: var(--blue-deep);
    }

    .extra-card h3 {
      margin-bottom: 14px;
      font-family: var(--display);
      font-size: clamp(34px, 4vw, 50px);
      line-height: 0.95;
      letter-spacing: -0.068em;
    }

    .extra-card p:last-child {
      max-width: 480px;
      margin-bottom: 0;
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.55;
    }

    .faq-section {
      padding-top: 46px;
      border-top: 1px solid var(--line);
    }

    .faq-wrap {
      display: grid;
      grid-template-columns: 0.76fr 1.24fr;
      gap: 78px;
      align-items: start;
    }

    .faq-intro {
      position: sticky;
      top: 112px;
    }

    .faq-intro h2 {
      margin: 22px 0 24px;
      font-family: var(--display);
      font-size: clamp(50px, 5.8vw, 78px);
      line-height: 0.89;
      letter-spacing: -0.078em;
    }

    .faq-intro p:last-child {
      max-width: 370px;
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.6;
    }

    .faq-list { border-top: 1px solid var(--line); }
    details { border-bottom: 1px solid var(--line); }

    summary {
      position: relative;
      padding: 30px 58px 30px 0;
      cursor: pointer;
      list-style: none;
      font-family: var(--display);
      font-size: clamp(22px, 2.5vw, 31px);
      line-height: 1.15;
      letter-spacing: -0.045em;
    }

    summary::-webkit-details-marker { display: none; }

    summary::after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 0;
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--blue-deep);
      font-family: var(--body);
      font-size: 22px;
      font-weight: 400;
      transform: translateY(-50%);
      transition: transform 220ms ease, background 220ms ease;
    }

    details[open] summary::after {
      background: var(--blue-soft);
      transform: translateY(-50%) rotate(45deg);
    }

    details p {
      max-width: 650px;
      margin-bottom: 0;
      padding: 0 58px 30px 0;
      color: var(--ink-2);
      font-size: 16px;
      line-height: 1.65;
    }

    .cta-section { padding: 74px 0 38px; }

    .cta {
      position: relative;
      display: flex;
      min-height: 560px;
      overflow: hidden;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      padding: 65px;
      border-radius: 44px;
      color: var(--paper);
      background:
        radial-gradient(circle at 84% 16%, rgba(160, 111, 242, 0.45), transparent 34%),
        radial-gradient(circle at 70% 95%, rgba(99, 223, 179, 0.2), transparent 34%),
        var(--blue);
      box-shadow: 0 42px 96px rgba(83, 101, 246, 0.29);
    }

    .cta::before {
      content: "";
      position: absolute;
      right: -190px;
      bottom: -390px;
      width: 650px;
      height: 650px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      box-shadow: 0 0 0 72px rgba(255, 255, 255, 0.035), 0 0 0 144px rgba(255, 255, 255, 0.025);
    }

    .cta::after {
      content: "deytt.";
      position: absolute;
      right: 46px;
      bottom: 28px;
      color: rgba(255, 255, 255, 0.1);
      font-family: var(--display);
      font-size: clamp(94px, 16vw, 220px);
      letter-spacing: -0.1em;
      white-space: nowrap;
    }

    .cta .panel-label {
      position: relative;
      z-index: 2;
      margin-bottom: 0;
      color: rgba(255, 255, 255, 0.72);
    }

    .cta-main { position: relative; z-index: 2; }

    .cta h2 {
      max-width: 930px;
      margin-bottom: 36px;
      font-family: var(--display);
      font-size: clamp(64px, 8.1vw, 114px);
      font-weight: 900;
      line-height: 0.81;
      letter-spacing: -0.04em;
    }

    .cta .button {
      position: relative;
      z-index: 3;
      border-color: var(--paper);
      color: var(--ink);
      background: var(--paper);
      box-shadow: none;
    }

    .footer {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      min-height: 126px;
      align-items: center;
      gap: 24px;
      color: var(--copy);
      font-size: 13px;
    }

    .footer p { margin-bottom: 0; text-align: center; }
    .footer-links { display: flex; justify-content: flex-end; gap: 8px; }
    .footer a { text-decoration: none; }

    .footer-links a {
      display: inline-flex;
      min-height: 38px;
      align-items: center;
      padding: 0 13px;
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.52);
      font-size: 12px;
      font-weight: 750;
      transition: color 180ms ease, transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }

    .footer-links a:hover {
      border-color: var(--blue);
      color: var(--ink);
      background: var(--blue-soft);
      box-shadow: 0 8px 18px rgba(83, 101, 246, 0.14);
      transform: translateY(-1px);
    }

    .route-section { padding-top: 34px; }

    .route-board {
      display: grid;
      grid-template-columns: 1.06fr 0.94fr;
      gap: 16px;
    }

    .route-card {
      position: relative;
      display: flex;
      min-height: 430px;
      overflow: hidden;
      flex-direction: column;
      justify-content: space-between;
      padding: 42px;
      border-radius: 34px;
      text-decoration: none;
      isolation: isolate;
      transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease, box-shadow 220ms ease;
    }

    .route-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      pointer-events: none;
    }

    .route-card::after {
      content: attr(data-mark);
      position: absolute;
      right: 26px;
      bottom: -42px;
      z-index: -1;
      color: rgba(83, 101, 246, 0.08);
      font-family: var(--display);
      font-size: 210px;
      line-height: 1;
      letter-spacing: -0.12em;
    }

    .route-card:hover {
      border-color: var(--blue);
      box-shadow: 0 28px 72px rgba(35, 49, 99, 0.14);
      transform: translateY(-4px);
    }

    .route-card-tariffs::before {
      background:
        radial-gradient(circle at 82% 22%, rgba(113, 217, 255, 0.3), transparent 31%),
        linear-gradient(145deg, #fff, #edf1ff);
    }

    .route-card-info::before {
      background:
        radial-gradient(circle at 10% 88%, rgba(99, 223, 179, 0.2), transparent 31%),
        linear-gradient(145deg, #fff, #f4f8ff);
    }

    .route-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      color: var(--copy);
      font-family: var(--mono);
      font-size: 10px;
    }

    .route-card-top b { color: var(--blue); font-weight: 700; }

    .route-card h2 {
      max-width: 610px;
      margin-bottom: 18px;
      font-family: var(--display);
      font-size: clamp(46px, 5.8vw, 78px);
      line-height: 0.88;
      letter-spacing: -0.078em;
    }

    .route-card p {
      max-width: 520px;
      margin-bottom: 24px;
      color: var(--copy);
      font-size: 16px;
      line-height: 1.6;
    }

    .route-card-tags { display: flex; flex-wrap: wrap; gap: 7px; }

    .route-card-tags span {
      padding: 8px 10px;
      border-radius: 10px;
      color: var(--copy);
      background: rgba(255, 255, 255, 0.58);
      font-family: var(--mono);
      font-size: 9px;
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --canvas: #070b14;
      --ink: #f3f6ff;
      --ink-2: #cbd3e2;
      --copy: #9ca9bf;
      --muted: #78869f;
      --line: #27334a;
      --line-blue: rgba(113, 137, 255, 0.34);
      --paper-2: #111d32;
      --paper-3: #172440;
      --line-strong: #3a4b6d;
      --sky: #76dcff;
      --blue: #6d7cff;
      --blue-deep: #91a0ff;
      --blue-soft: #273263;
      --night: #050916;
      --shadow: 0 34px 100px rgba(0, 0, 0, 0.34);
    }

    body,
    .topbar,
    .button,
    .globe-panel,
    .route-console,
    .network-route,
    .fact-rail,
    .truth-grid,
    .truth-copy,
    .bot-lab,
    .bot-stage-shell,
    .bot-demo,
    .price-stage,
    .price-copy,
    .calculator,
    .payment-intro,
    .payment-methods article,
    .extra-card {
      transition: color 260ms ease, background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
    }

    html[data-theme="dark"] body::before {
      opacity: 0.22;
      background-image: radial-gradient(rgba(174, 190, 225, 0.18) 0.55px, transparent 0.55px);
    }

    html[data-theme="dark"] body::after {
      opacity: 0.5;
      background:
        radial-gradient(circle at 18% 48%, rgba(63, 163, 203, 0.28), transparent 30%),
        radial-gradient(circle at 72% 26%, rgba(111, 70, 190, 0.28), transparent 31%),
        radial-gradient(circle at 49% 45%, rgba(57, 73, 190, 0.22), transparent 43%);
    }

    html[data-theme="dark"] .topbar {
      border-color: rgba(73, 88, 118, 0.66);
      background: rgba(10, 16, 30, 0.8);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    }

    html[data-theme="dark"] .nav a:not(.nav-action):hover,
    html[data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.045); }
    html[data-theme="dark"] .theme-toggle:hover { background: rgba(109, 124, 255, 0.13); }
    html[data-theme="dark"] .nav .nav-action { color: #fff; background: var(--blue); }
    html[data-theme="dark"] .nav .route-link[aria-current="page"] { background: rgba(109, 124, 255, 0.12); }
    html[data-theme="dark"] .footer-links a { border-color: #2c3a56; color: #b9c5da; background: #111a2c; }
    html[data-theme="dark"] .footer-links a:hover { border-color: var(--blue); color: #fff; background: #1b294a; }
    html[data-theme="dark"] .button:not(.button-primary) { background: rgba(14, 23, 41, 0.88); }

    html[data-theme="dark"] .globe-panel {
      border-color: #2a3854;
      background:
        radial-gradient(circle at 50% 49%, rgba(83, 101, 246, 0.2), transparent 31%),
        radial-gradient(circle at 76% 18%, rgba(160, 111, 242, 0.14), transparent 27%),
        radial-gradient(circle at 24% 82%, rgba(99, 223, 179, 0.1), transparent 28%),
        #0b1221;
      box-shadow: 0 42px 110px rgba(0, 0, 0, 0.38);
    }

    html[data-theme="dark"] .route-console,
    html[data-theme="dark"] .drag-hint,
    html[data-theme="dark"] .globe-stage-head strong,
    html[data-theme="dark"] .globe-stage-head span,
    html[data-theme="dark"] .fact-rail {
      border-color: #2b3851;
      background: rgba(14, 23, 41, 0.84);
    }

    html[data-theme="dark"] .route-console { border-left-color: #2a3854; }
    html[data-theme="dark"] .network-route { border-color: #2b3851; background: #111a2c; }
    html[data-theme="dark"] .network-route:hover { border-color: var(--blue); color: #fff; }
    html[data-theme="dark"] .network-route.is-active { border-color: var(--blue); color: #fff; background: var(--blue); }
    html[data-theme="dark"] .latency-button { color: var(--night); background: #fff; }
    html[data-theme="dark"] .latency-button:hover { color: #fff; background: var(--blue); }

    html[data-theme="dark"] .truth-grid,
    html[data-theme="dark"] .price-stage,
    html[data-theme="dark"] .extra-card { background: #0f1728; }

    html[data-theme="dark"] .truth-copy,
    html[data-theme="dark"] .price-copy {
      background:
        radial-gradient(circle at 8% 92%, rgba(83, 101, 246, 0.13), transparent 31%),
        #0f1728;
    }

    html[data-theme="dark"] .truth-point b { background: #151f36; }
    html[data-theme="dark"] .bot-lab { background: radial-gradient(circle at 48% 40%, rgba(83, 101, 246, 0.14), transparent 34%), #0b1221; }
    html[data-theme="dark"] .bot-stage-shell { border-color: #2c3954; background: rgba(10, 17, 31, 0.9); }
    html[data-theme="dark"] .bot-stage-shell .bot-demo { background: linear-gradient(rgba(14, 22, 38, .96), rgba(14, 22, 38, .96)); }
    html[data-theme="dark"] .mode-button { border-color: #2c3952; background: #111a2c; }
    html[data-theme="dark"] .bot-stage-shell .bot-message { border-color: #2a3750; background: linear-gradient(135deg, #111b2d, #17203b); }
    html[data-theme="dark"] .bot-button { border-color: #31406c; background: #141e36; }
    html[data-theme="dark"] .bot-button:hover { background: #1b294a; }
    html[data-theme="dark"] .bot-button-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
    html[data-theme="dark"] .plan-option { border-color: #2a3750; background: #10192b; }
    html[data-theme="dark"] .ready-plans span {
      border-color: #2d3b58;
      color: #b9c5dc;
      background: #151f36;
    }

    html[data-theme="dark"] .calculator {
      background:
        radial-gradient(circle at 75% 20%, rgba(73, 170, 206, 0.13), transparent 31%),
        #0b1323;
    }

    html[data-theme="dark"] .result-card { border-color: #2b3851; background: rgba(17, 26, 44, 0.92); }
    html[data-theme="dark"] .result-card-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
    html[data-theme="dark"] .payment-intro { background: radial-gradient(circle at 85% 15%, rgba(99, 223, 179, 0.11), transparent 34%), #0f1728; }
    html[data-theme="dark"] .payment-methods article { background: #0b1323; }
    html[data-theme="dark"] .payment-methods article:hover { background: #121d31; }
    html[data-theme="dark"] .extra-card-referral { background: radial-gradient(circle at 88% 12%, rgba(99, 223, 179, 0.14), transparent 34%), #0f1728; }
    html[data-theme="dark"] .extra-card-promo { background: radial-gradient(circle at 88% 12%, rgba(160, 111, 242, 0.13), transparent 34%), #0f1728; }
    html[data-theme="dark"] .cta .button { border-color: #fff; color: #0e1730; background: #fff; }
    html[data-theme="dark"] .route-card { border-color: #2a3854; }
    html[data-theme="dark"] .route-card-tariffs::before {
      background: radial-gradient(circle at 82% 22%, rgba(72, 183, 224, 0.16), transparent 31%), #0d1729;
    }
    html[data-theme="dark"] .route-card-info::before {
      background: radial-gradient(circle at 10% 88%, rgba(99, 223, 179, 0.11), transparent 31%), #101a2d;
    }
    html[data-theme="dark"] .route-card::after { color: rgba(124, 140, 255, 0.09); }
    html[data-theme="dark"] .route-card-tags span {
      border-color: #2c3a56;
      color: #b9c5da;
      background: rgba(18, 29, 50, 0.92);
    }

    .button:focus-visible,
    .brand:focus-visible,
    .nav a:focus-visible,
    .theme-toggle:focus-visible,
    .network-route:focus-visible,
    .latency-button:focus-visible,
    .mode-button:focus-visible,
    .bot-button:focus-visible,
    input:focus-visible,
    summary:focus-visible,
    .footer a:focus-visible,
    #network-globe:focus-visible {
      outline: 3px solid var(--blue-soft);
      outline-offset: 4px;
    }

    @keyframes enter {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pulse-ring {
      0% { opacity: 0.65; transform: scale(0.4); }
      78%, 100% { opacity: 0; transform: scale(1.55); }
    }

    @keyframes screen-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

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

    @keyframes signal-dash { to { stroke-dashoffset: -120; } }

    @keyframes node-pulse {
      0%, 100% { transform: scale(0.9); box-shadow: 0 0 0 5px rgba(99, 223, 179, 0.08); }
      50% { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(99, 223, 179, 0.02); }
    }

    @media (max-width: 1060px) {
      .globe-panel {
        grid-template-columns: 1fr;
      }

      .globe-stage {
        min-height: 650px;
      }

      .route-console { min-height: 590px; border-top: 1px solid var(--line); border-left: 0; }
      html[data-theme="dark"] .route-console { border-top-color: #2a3854; border-left: 0; }
      .panel-label { margin-bottom: 32px; }
      .fact-rail { grid-template-columns: repeat(2, 1fr); }
      .fact:nth-child(2) { border-right: 0; }
      .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .truth-grid, .price-stage { grid-template-columns: 1fr; }
      .truth-copy, .price-copy { min-height: 470px; border-right: 0; border-bottom: 1px solid var(--line); }
      .bot-lab { min-height: 0; }
      .bot-stage-shell { width: min(570px, 100%); }
      .apps-head { grid-template-columns: 1fr; gap: 30px; }
      .apps-copy { margin-left: 0; }
      .hub-board { grid-template-columns: 1fr; }
      .hub-map { min-height: 500px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
      .payment-board { grid-template-columns: 1fr; }
      .faq-wrap { grid-template-columns: 1fr; gap: 48px; }
      .faq-intro { position: static; }
      .route-board { grid-template-columns: 1fr; }
      .route-card { min-height: 360px; }
    }

    @media (max-width: 760px) {
      .shell { width: min(100% - 28px, 1260px); }
      .topbar-wrap { padding-top: 10px; }
      .topbar { min-height: 58px; border-radius: 17px; }
      .topbar { padding-left: 15px; }
      .nav { gap: 3px; }
      .nav a:not(.nav-action) { display: none; }
      .nav a.route-link { display: inline-grid; gap: 0; padding: 9px 7px; font-size: 10px; }
      .route-index { display: none; }
      .nav .nav-action { padding: 10px 13px; }
      .nav-action-wide { display: none; }
      .nav-action-short { display: inline; }
      .theme-toggle { min-height: 38px; padding: 0 6px; }
      .theme-label { display: none; }
      .hero { padding: 72px 0 60px; }
      .hero-head { margin-bottom: 47px; text-align: center; }
      .eyebrow { font-size: 10px; }
      h1 { font-size: clamp(50px, 14.5vw, 66px); line-height: 0.9; }
      .lead { margin-left: 0; font-size: 17px; }
      .actions { display: grid; justify-content: center; }
      .button { width: 100%; }
      .globe-panel { min-height: auto; border-radius: 30px; }
      .globe-stage { min-height: 430px; padding: 43px 4px 30px; }
      .globe-wrap { width: 100%; }
      .panel-label { margin-bottom: 30px; }
      .globe-stage-head { top: 14px; left: 14px; gap: 6px; }
      .globe-stage-head span { display: none; }
      .globe-caption { right: 13px; bottom: 14px; max-width: 175px; font-size: 7px; }
      .drag-hint { bottom: 1%; padding: 8px 10px; font-size: 8px; }
      .route-console { min-height: 610px; padding: 28px 20px; }
      .route-console h2 { font-size: clamp(42px, 13vw, 58px); }
      .route-switcher { grid-template-columns: repeat(3, 1fr); }
      .route-schema { padding: 16px; }
      .route-step { min-width: 56px; }
      .latency-panel { grid-template-columns: 1fr; }
      .latency-button { width: 100%; }
      .fact-rail { grid-template-columns: 1fr 1fr; border-radius: 20px; }
      .fact { min-height: 108px; padding: 19px; }
      .fact strong { font-size: 28px; }
      .fact:nth-child(2) { border-right: 0; }
      .section { padding: 96px 0; }
      .section-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 46px; }
      .section-title { font-size: clamp(49px, 15.4vw, 68px); }
      .truth-grid, .price-stage { border-radius: 29px; }
      .truth-copy, .price-copy { min-height: 490px; padding: 33px 27px; }
      .truth-copy h2, .price-copy h2 { font-size: clamp(49px, 14.7vw, 65px); }
      .truth-copy p:not(.section-label), .price-copy p:not(.section-label) { font-size: 15px; }
      .bot-lab { min-height: 0; padding: 26px 14px; }
      .bot-stage-shell { grid-template-columns: 1fr; border-radius: 25px; }
      .bot-route-rail { grid-template-columns: 1fr; min-height: 0; gap: 10px; padding: 16px; }
      .bot-route-rail > div { display: flex; align-items: baseline; justify-content: space-between; }
      .bot-route-rail > div::after { content: "путь внутри telegram"; color: #96a5c3; font-family: var(--mono); font-size: 8px; }
      .bot-route-rail > p { display: none; }
      .bot-route-rail ol { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
      .bot-route-rail li { grid-template-columns: 1fr; gap: 3px; min-height: 58px; text-align: center; }
      .bot-route-rail li b { font-size: 7px; }
      .bot-route-rail li span { font-size: 9px; }
      .bot-demo { border-radius: 0; }
      .bot-screen { min-height: 0; }
      .apps-head { grid-template-columns: 1fr; gap: 26px; margin-bottom: 46px; }
      .apps-copy { font-size: 15px; }
      .hub-board { border-radius: 24px; }
      .hub-map { min-height: 410px; }
      .hub-ring-one { width: 230px; height: 230px; }
      .hub-ring-two { width: 340px; height: 340px; }
      .hub-core { width: 118px; height: 118px; }
      .hub-core strong { font-size: 17px; }
      .hub-node { min-width: 94px; padding: 9px; }
      .hub-node b { font-size: 15px; }
      .node-nl { top: 11%; left: 3%; }
      .node-de { top: 11%; right: 3%; }
      .node-fi { right: 4%; bottom: 10%; }
      .node-ru { bottom: 10%; left: 4%; }
      .hub-ledger { padding: 28px 22px; }
      .hub-ledger .panel-label { margin-bottom: 35px; }
      .protocol-stack > div { grid-template-columns: 28px max-content minmax(0, 1fr); gap: 7px; }
      .app-grid { grid-template-columns: 1fr; }
      .app-card { min-height: 410px; padding: 26px; border-radius: 24px; }
      .app-card h3 { font-size: 51px; }
      .calculator { min-height: 610px; padding: 34px 25px; }
      .calc-result { grid-template-columns: 1fr; }
      .result-card { min-height: 116px; }
      .payment-intro { min-height: 280px; padding: 27px; }
      .payment-methods { grid-template-columns: 1fr; }
      .payment-methods article { min-height: 142px; padding: 22px; }
      .extras { grid-template-columns: 1fr; padding-bottom: 96px; }
      .extra-card { min-height: 300px; padding: 26px; border-radius: 24px; }
      .extra-card .panel-label { margin-bottom: 90px; }
      .faq-section { padding-top: 20px; }
      .faq-intro h2 { font-size: clamp(50px, 15vw, 66px); }
      summary { padding-block: 25px; font-size: 23px; }
      details p { padding-right: 16px; font-size: 15px; }
      .cta-section { padding-top: 34px; padding-bottom: 22px; }
      .cta { min-height: 540px; padding: 34px 27px; border-radius: 29px; }
      .cta h2 { font-size: clamp(42px, 13vw, 84px); }
      .cta::after { right: 20px; bottom: 26px; font-size: 92px; }
      .footer { grid-template-columns: 1fr; align-content: center; gap: 14px; padding: 28px 0; }
      .footer p { text-align: left; }
      .footer-links { justify-content: flex-start; }
      .route-section { padding-top: 12px; }
      .route-card { min-height: 340px; padding: 27px; border-radius: 25px; }
      .route-card h2 { font-size: clamp(44px, 13.6vw, 62px); }
      .route-card::after { right: 16px; bottom: -24px; font-size: 140px; }
    }

    /* ≤430px: brand + 4 links + theme + CTA cannot share one 360px row.
     * Stack the topbar into two centered rows. */
    @media (max-width: 430px) {
      .topbar { flex-direction: column; align-items: center; gap: 7px; min-height: 0; padding: 12px 10px 10px; }
      .brand { font-size: 20px; }
      .nav { gap: 2px; }
      .nav a.route-link { padding: 8px 6px; font-size: 10px; }
      .nav .nav-action { padding: 8px 10px; font-size: 11px; }
      .theme-toggle { min-height: 36px; padding: 0 6px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }