/* ============ Design tokens: blueprint on white paper ============ */
    :root {
      --paper: #eef3f6;
      --sheet: #ffffff;
      --ink: #16222e;
      --ink-soft: #52616f;
      --ink-faint: #93a1ad;
      --grid: rgba(29, 95, 191, 0.07);
      --line: #d5dee6;
      --line-blue: #b9cde8;
      --blue: #1d5fbf;
      --blue-deep: #123d7d;
      --blue-wash: #e8f0fb;
      --orange: #e8641f;
      --orange-wash: #fdeadd;
      --green: #218a5b;
      --red: #d64545;
      --font-body: "Noto Sans SC", sans-serif;
      --font-mono: "JetBrains Mono", monospace;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.8;
      overflow-x: hidden;
    }

    /* drafting grid over the whole page */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
      z-index: 0;
    }

    ::selection { background: var(--blue); color: #fff; }

    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { font-family: inherit; }

    .wrap {
      max-width: 1220px;
      margin: 0 auto;
      padding: 0 28px;
      position: relative;
      z-index: 1;
    }

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

    /* ============ Scroll reveal ============ */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.is-in { opacity: 1; transform: none; }

    /* ============ Corner tick marks (registration marks) ============ */
    .ticks { position: relative; }
    .ticks::before, .ticks::after,
    .ticks > .tk::before, .ticks > .tk::after {
      content: "";
      position: absolute;
      width: 14px; height: 14px;
      border-color: var(--blue);
      border-style: solid;
      border-width: 0;
      opacity: 0.75;
      pointer-events: none;
      z-index: 3;
    }
    .ticks::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
    .ticks::after { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
    .ticks > .tk::before { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
    .ticks > .tk::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

    /* ============ Top bar ============ */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line-blue);
    }
    .topbar__inner {
      display: flex;
      align-items: center;
      gap: 26px;
      height: 62px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      font-weight: 900;
      font-size: 20px;
      letter-spacing: 0.04em;
    }
    .brand__mark {
      width: 36px; height: 36px;
      border: 1.5px dashed var(--blue);
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--blue-wash);
      overflow: hidden;
    }
    .brand__mark img { width: 27px; height: 27px; object-fit: contain; display: block; }
    .brand__sheet {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 400;
      color: var(--blue);
      border: 1px solid var(--line-blue);
      background: var(--blue-wash);
      padding: 2px 8px;
      border-radius: 3px;
      letter-spacing: 0.14em;
    }

    .main-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
    .main-nav a {
      font-size: 14px;
      padding: 6px 16px;
      color: var(--ink-soft);
      border-radius: 4px;
      transition: color 0.2s, background 0.2s;
      font-weight: 500;
    }
    .main-nav a .no {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--ink-faint);
      margin-right: 6px;
    }
    .main-nav a:hover { color: var(--blue); background: var(--blue-wash); }
    .main-nav a.is-active { color: var(--blue); font-weight: 700; }
    .main-nav a.is-active .no { color: var(--orange); }

    .topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

    .lang-switch { position: relative; }
    .lang-switch__btn {
      display: flex; align-items: center; gap: 7px;
      background: transparent;
      border: 1px solid var(--line);
      color: var(--ink-soft);
      font-size: 12.5px;
      font-family: var(--font-mono);
      cursor: pointer;
      padding: 7px 13px;
      border-radius: 4px;
      transition: border-color 0.2s, color 0.2s;
    }
    .lang-switch__btn:hover { border-color: var(--blue); color: var(--blue); }
    .lang-switch__menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 142px;
      background: var(--sheet);
      border: 1px solid var(--line-blue);
      border-radius: 6px;
      box-shadow: 0 12px 28px rgba(18, 61, 125, 0.14);
      padding: 6px;
      display: none;
      z-index: 60;
    }
    .lang-switch__menu.is-open { display: block; }
    .lang-switch__menu li { border-radius: 4px; overflow: hidden; }
    .lang-switch__menu li > a,
    .lang-switch__menu li.is-current {
      padding: 8px 12px;
      font-size: 13px;
      color: var(--ink-soft);
      cursor: pointer;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-decoration: none;
    }
    .lang-switch__menu li > a:hover { background: var(--blue-wash); color: var(--ink); }
    .lang-switch__menu li.is-current { color: var(--blue); font-weight: 700; }
    .lang-switch__menu li.is-current::after { content: "✓"; font-size: 11px; }

    .nav-burger {
      display: none;
      background: var(--sheet);
      border: 1px solid var(--line);
      color: var(--ink);
      width: 38px; height: 38px;
      border-radius: 6px;
      font-size: 15px;
      cursor: pointer;
    }

    /* ============ Hero: the drawing sheet ============ */
    .hero { padding: 46px 0 0; }
    .sheet {
      background: var(--sheet);
      border: 1.5px solid var(--blue);
      box-shadow: 0 24px 60px rgba(18, 61, 125, 0.12);
      position: relative;
      background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    /* inner frame like a drawing border */
    .sheet::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid var(--line-blue);
      pointer-events: none;
    }
    .sheet__body {
      display: grid;
      grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
      gap: 30px;
      padding: 58px 54px 34px;
      align-items: center;
      position: relative;
    }

    .sheet__label {
      position: absolute;
      top: 22px; left: 54px; right: 170px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.28em;
      color: var(--blue);
      line-height: 1.5;
    }
    .sheet__label i { margin-right: 8px; }
    .sheet__rev {
      position: absolute;
      top: 22px; right: 54px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-faint);
      letter-spacing: 0.14em;
    }
    .sheet__rev b { color: var(--orange); font-weight: 600; }

    .hero h1 {
      font-weight: 900;
      font-size: clamp(34px, 4.6vw, 56px);
      line-height: 1.35;
      letter-spacing: 0.01em;
    }
    .hero h1 .hl {
      color: var(--blue);
      position: relative;
      white-space: normal;
      padding-bottom: 34px;
      display: inline-block;
    }
    /* dimension line under the highlighted phrase, with the actual rule
       verdicts it resolves to written into the gap — like a real drawing
       callout, not a blank decoration */
    .hero h1 .hl::before, .hero h1 .hl::after {
      content: "";
      position: absolute;
      bottom: 14px;
      width: 1.5px; height: 9px;
      background: var(--blue);
      opacity: 0.7;
    }
    .hero h1 .hl::before { left: 2px; }
    .hero h1 .hl::after { right: 2px; }
    .hero h1 .hl .dim {
      position: absolute;
      left: 2px; right: 2px; bottom: 18px;
      height: 1.5px;
      background: var(--blue);
      opacity: 0.7;
    }
    .hero h1 .hl .dim__tag {
      position: absolute;
      left: 50%; bottom: -2px;
      transform: translateX(-50%);
      white-space: normal;
      max-width: min(440px, 84vw);
      text-align: center;
      font-family: var(--font-mono);
      font-weight: 400;
      font-size: 12.5px;
      letter-spacing: 0.06em;
      color: var(--ink-soft);
      background: var(--sheet);
      padding: 0 12px;
    }
    .hero h1 .hl .dim__tag b { color: var(--green); font-weight: 600; }
    .hero h1 .hl .dim__tag i { color: var(--orange); font-weight: 600; font-style: normal; }
    .hero h1 .hl .dim__tag u { color: var(--red); font-weight: 600; text-decoration: none; }

    .hero__sub {
      margin-top: 24px;
      color: var(--ink-soft);
      font-size: 16px;
      max-width: 460px;
    }
    .hero__sub strong { color: var(--ink); }

    .hero__cta {
      margin-top: 36px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 700;
      padding: 14px 28px;
      border-radius: 6px;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s;
    }
    .btn--primary {
      background: var(--blue);
      color: #fff;
      box-shadow: 0 10px 24px rgba(29, 95, 191, 0.3);
    }
    .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(29, 95, 191, 0.38); background: var(--blue-deep); }
    .btn--ghost {
      background: var(--sheet);
      color: var(--ink);
      border-color: var(--line);
    }
    .btn--ghost:hover { transform: translateY(-3px); border-color: var(--blue); color: var(--blue); }

    .hero__note {
      margin-top: 20px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--ink-faint);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hero__note i { color: var(--green); }

    /* ---- Topology diagram ---- */
    .diagram { position: relative; min-width: 0; }
    .diagram__scroll { overflow-x: visible; min-width: 0; }
    .diagram svg { width: 100%; height: auto; display: block; }
    .diagram__hint { display: none; }
    .diagram__fig {
      margin-top: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink-faint);
      text-align: center;
      letter-spacing: 0.1em;
    }
    .diagram__fig b { color: var(--blue); font-weight: 600; }

    /* animated flowing dashes */
    .flow {
      stroke-dasharray: 7 6;
      animation: dashflow 1.1s linear infinite;
    }
    @keyframes dashflow { to { stroke-dashoffset: -13; } }
    .blink-x { animation: blinkx 1.6s steps(2) infinite; }
    @keyframes blinkx { 50% { opacity: 0.25; } }

    /* ---- Title block (drawing footer table) ---- */
    .titleblock {
      display: grid;
      grid-template-columns: 2fr 1.2fr 1fr 1.2fr 1.2fr 1fr;
      border-top: 1.5px solid var(--blue);
      position: relative;
      z-index: 1;
      background: var(--sheet);
    }
    .titleblock > div {
      padding: 10px 18px 12px;
      border-right: 1px solid var(--line-blue);
    }
    .titleblock > div:last-child { border-right: none; }
    .titleblock dt {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.2em;
      color: var(--ink-faint);
    }
    .titleblock dd {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
      font-family: var(--font-mono);
    }
    .titleblock dd a { color: var(--blue); border-bottom: 1px dashed var(--line-blue); }
    .titleblock dd a:hover { border-color: var(--blue); }
    .titleblock .stamp-cell { display: flex; align-items: center; justify-content: center; }
    .titleblock .ok-stamp {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      color: var(--green);
      border: 1.5px solid var(--green);
      border-radius: 4px;
      padding: 3px 10px;
      transform: rotate(-6deg);
      opacity: 0.85;
    }

    /* ============ Legend strip: protocols ============ */
    .legend-strip {
      margin-top: 26px;
      border-top: 1px solid var(--line-blue);
      border-bottom: 1px solid var(--line-blue);
      background: var(--sheet);
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .legend-strip__tag {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 20px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      color: #fff;
      background: var(--blue);
      z-index: 2;
    }
    .legend-strip__tag-text { white-space: nowrap; }
    .legend-strip__track {
      display: flex;
      align-items: center;
      white-space: nowrap;
      animation: roll 30s linear infinite;
      padding: 13px 0;
    }
    .legend-strip__track span {
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--ink-soft);
      padding: 0 26px;
      position: relative;
    }
    .legend-strip__track span::before {
      content: "▸";
      color: var(--orange);
      margin-right: 10px;
      font-size: 10px;
    }
    @keyframes roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ============ Section heads: drawing captions ============ */
    .sec-head { margin-bottom: 44px; }
    .sec-head__tag {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.28em;
      color: var(--blue);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .sec-head__tag::after {
      content: "";
      width: 90px; height: 1px;
      background: var(--blue);
      position: relative;
    }
    .sec-head h2 {
      font-weight: 900;
      font-size: clamp(26px, 3.2vw, 38px);
      letter-spacing: 0.01em;
      line-height: 1.4;
    }
    .sec-head p { color: var(--ink-soft); font-size: 14.5px; max-width: 620px; margin-top: 8px; }

    /* ============ Features: detail figures ============ */
    .features { padding: 96px 0 30px; }
    .fig-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .fig {
      background: var(--sheet);
      border: 1px solid var(--line);
      padding: 26px 26px 28px;
      position: relative;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    }
    .fig:hover {
      border-color: var(--blue);
      transform: translateY(-4px);
      box-shadow: 0 16px 34px rgba(18, 61, 125, 0.12);
    }
    .fig__no {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.18em;
      color: var(--orange);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .fig__no::after { content: ""; flex: 1; height: 1px; background: var(--line); }
    .fig__icon {
      width: 44px; height: 44px;
      border: 1.5px dashed var(--blue);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--blue);
      font-size: 16px;
      margin-bottom: 16px;
      background: var(--blue-wash);
      position: relative;
    }
    /* crosshair ticks on the icon circle */
    .fig__icon::before, .fig__icon::after {
      content: "";
      position: absolute;
      background: var(--blue);
      opacity: 0.5;
    }
    .fig__icon::before { width: 1px; height: 7px; top: -10px; left: 50%; box-shadow: 0 61px 0 var(--blue); }
    .fig__icon::after { width: 7px; height: 1px; left: -10px; top: 50%; box-shadow: 61px 0 0 var(--blue); }
    .fig h3 { font-size: 18.5px; font-weight: 900; margin-bottom: 8px; }
    .fig p { font-size: 13.5px; color: var(--ink-soft); }

    .fig--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
    .fig--wide .yaml {
      font-family: var(--font-mono);
      font-size: 11.5px;
      line-height: 2;
      background: var(--blue-deep);
      color: #cfe0f5;
      padding: 18px 20px;
      border-radius: 6px;
      box-shadow: 0 12px 26px rgba(18, 61, 125, 0.28);
    }
    .fig--wide .yaml .k { color: #8fc1ff; }
    .fig--wide .yaml .v { color: #ffc38a; }
    .fig--wide .yaml .c { color: #6d89ad; }

    .fig .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
    .fig .chips span {
      font-family: var(--font-mono);
      font-size: 10.5px;
      border: 1px solid var(--line);
      border-radius: 3px;
      padding: 2px 9px;
      color: var(--ink-soft);
      background: var(--paper);
    }
    .fig .chips span.hl { border-color: var(--orange); color: var(--orange); background: var(--orange-wash); }

    .fig .bars {
      position: absolute;
      right: 24px; top: 54px;
      display: flex;
      align-items: flex-end;
      gap: 5px;
      height: 38px;
    }
    .fig .bars i {
      width: 7px;
      background: linear-gradient(180deg, var(--blue), var(--blue-wash));
      border-radius: 2px 2px 0 0;
      animation: bar-bob 2.4s ease-in-out infinite;
    }
    .fig .bars i:nth-child(1) { height: 40%; }
    .fig .bars i:nth-child(2) { height: 64%; animation-delay: 0.2s; }
    .fig .bars i:nth-child(3) { height: 48%; animation-delay: 0.4s; }
    .fig .bars i:nth-child(4) { height: 90%; animation-delay: 0.6s; }
    .fig .bars i:nth-child(5) { height: 100%; animation-delay: 0.8s; }
    @keyframes bar-bob { 50% { transform: scaleY(0.78); transform-origin: bottom; } }

    /* ============ Platforms: BOM table ============ */
    .platforms { padding: 96px 0; }
    .bom {
      background: var(--sheet);
      border: 1.5px solid var(--blue);
      position: relative;
    }
    .bom__head, .bom-row {
      display: grid;
      grid-template-columns: 68px 64px 1.35fr 1fr 0.9fr 64px;
      align-items: center;
      gap: 18px;
    }
    .bom__head {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      color: var(--blue);
      border-bottom: 1.5px solid var(--blue);
      padding: 12px 22px;
      background: var(--blue-wash);
    }
    .bom-row {
      padding: 20px 22px;
      border-bottom: 1px solid var(--line);
      transition: background 0.2s;
      position: relative;
    }
    .bom-row:last-child { border-bottom: none; }
    .bom-row:hover { background: var(--blue-wash); }
    .bom-row__idx {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--ink-faint);
      font-weight: 600;
    }
    .bom-row:hover .bom-row__idx { color: var(--orange); }
    .bom-row__icon {
      width: 46px; height: 46px;
      border: 1px solid var(--line);
      border-radius: 8px;
      display: grid;
      place-items: center;
      font-size: 20px;
      color: var(--ink);
      background: var(--paper);
      transition: all 0.22s;
    }
    .bom-row:hover .bom-row__icon {
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
      transform: rotate(-5deg) scale(1.05);
    }
    .bom-row__name { font-weight: 900; font-size: 18px; }
    .bom-row__name small {
      display: block;
      font-weight: 400;
      font-size: 12.5px;
      color: var(--ink-soft);
    }
    .bom-row__spec, .bom-row__ver {
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--ink-soft);
      line-height: 1.9;
    }
    .bom-row__spec b { color: var(--blue); font-weight: 600; }
    .bom-row__ver { color: var(--green); }
    .bom-row__go {
      width: 42px; height: 42px;
      border-radius: 50%;
      border: 1.5px solid var(--line);
      display: grid;
      place-items: center;
      font-size: 13px;
      color: var(--ink-soft);
      background: var(--sheet);
      transition: all 0.22s;
      justify-self: end;
    }
    .bom-row:hover .bom-row__go {
      background: var(--orange);
      border-color: var(--orange);
      color: #fff;
      transform: rotate(-45deg);
    }
    .bom__foot {
      border-top: 1px solid var(--line-blue);
      padding: 10px 22px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--ink-faint);
      letter-spacing: 0.08em;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    .bom__foot i { color: var(--green); margin-right: 6px; }

    /* ============ Trust: acceptance data ============ */
    .trust { padding: 20px 0 96px; }
    .trust__board {
      background: var(--sheet);
      border: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
      position: relative;
      overflow: visible;
    }
    .trust__lead { padding: 44px 40px; }
    .trust__lead h2 {
      font-weight: 900;
      font-size: 25px;
      line-height: 1.55;
    }
    .trust__lead h2 span { color: var(--blue); }
    .trust__lead p { color: var(--ink-soft); font-size: 13.5px; margin-top: 12px; max-width: 300px; }
    .trust__lead a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--blue);
      border-bottom: 1px dashed var(--line-blue);
      padding-bottom: 3px;
    }
    .trust__lead a:hover { border-color: var(--blue); }
    .stat {
      padding: 44px 30px;
      border-left: 1px dashed var(--line-blue);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .stat__num {
      font-family: var(--font-mono);
      font-size: clamp(32px, 3.6vw, 44px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.15;
    }
    .stat__num em { font-style: normal; color: var(--orange); font-size: 0.55em; margin-left: 2px; }
    .stat__label {
      margin-top: 12px;
      font-size: 13px;
      color: var(--ink-soft);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .stat__label i { color: var(--blue); font-size: 11px; }

    /* round inspection stamp overlapping the board */
    .trust__stamp {
      position: absolute;
      top: -30px; right: 34px;
      width: 92px; height: 92px;
      border: 2.5px solid var(--red);
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-align: center;
      font-weight: 900;
      font-size: 15px;
      line-height: 1.3;
      color: var(--red);
      transform: rotate(10deg);
      background: rgba(255,255,255,0.82);
      opacity: 0.9;
      z-index: 3;
    }
    .trust__stamp::before {
      content: "";
      position: absolute;
      inset: 5px;
      border: 1px solid var(--red);
      border-radius: 50%;
    }
    .trust__stamp small {
      display: block;
      font-family: var(--font-mono);
      font-size: 7.5px;
      letter-spacing: 0.18em;
      font-weight: 400;
    }

    /* ============ Maintenance pledge CTA panel ============ */
    .gh-cta { padding: 0 0 110px; }
    .gh-cta__box {
      border: 1.5px dashed var(--blue);
      background: var(--sheet);
      padding: 52px 46px;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 46px;
      align-items: center;
      position: relative;
    }
    .gh-cta__box::before {
      content: "维护承诺 · MAINTENANCE PLEDGE";
      position: absolute;
      top: -11px; left: 34px;
      background: var(--paper);
      padding: 0 14px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.22em;
      color: var(--blue);
    }
    .gh-cta__box h2 {
      font-weight: 900;
      font-size: clamp(24px, 2.8vw, 33px);
      line-height: 1.5;
    }
    .gh-cta__box h2 mark {
      background: linear-gradient(transparent 60%, var(--orange-wash) 60%);
      color: var(--orange);
    }
    .gh-cta__box > div > p { color: var(--ink-soft); margin-top: 14px; max-width: 460px; font-size: 14.5px; }

    .code-card {
      background: var(--blue-deep);
      color: #cfe0f5;
      padding: 22px 24px;
      font-family: var(--font-mono);
      font-size: 12.5px;
      line-height: 2.15;
      position: relative;
      overflow-x: auto;
      border-radius: 8px;
      box-shadow: 0 18px 40px rgba(18, 61, 125, 0.32);
    }
    .code-card .cm { color: #6d89ad; }
    .code-card .pr { color: #ffc38a; font-weight: 600; }
    .code-card .st { color: #8fc1ff; }

    /* ============ Footer ============ */
    .site-foot {
      border-top: 1.5px solid var(--blue);
      background: var(--sheet);
      padding: 62px 0 0;
      position: relative;
      z-index: 1;
    }
    .foot-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
      gap: 44px;
      padding-bottom: 50px;
    }
    .foot-brand p {
      color: var(--ink-soft);
      font-size: 13.5px;
      margin-top: 16px;
      max-width: 300px;
    }
    .foot-col h4 {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.26em;
      color: var(--blue);
      margin-bottom: 18px;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .foot-col h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
    .foot-col ul li { margin-bottom: 11px; }
    .foot-col ul a {
      font-size: 14px;
      color: var(--ink-soft);
      transition: color 0.2s, padding-left 0.2s;
    }
    .foot-col ul a:hover { color: var(--blue); padding-left: 6px; }
    .foot-col ul a i { font-size: 11px; margin-right: 8px; color: var(--ink-faint); }

    .foot-langs { display: flex; flex-wrap: wrap; gap: 8px; }
    .foot-langs span {
      font-family: var(--font-mono);
      font-size: 11.5px;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 5px 13px;
      color: var(--ink-soft);
      cursor: pointer;
      transition: all 0.2s;
      background: var(--paper);
    }
    .foot-langs span:hover, .foot-langs span.on {
      color: #fff;
      background: var(--blue);
      border-color: var(--blue);
    }

    .foot-word {
      font-weight: 900;
      font-size: clamp(70px, 12.5vw, 172px);
      line-height: 1;
      text-align: center;
      color: transparent;
      -webkit-text-stroke: 1px var(--line-blue);
      user-select: none;
      letter-spacing: 0.08em;
      transform: translateY(8px);
    }

    .foot-base {
      border-top: 1px solid var(--line);
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--ink-faint);
    }
    .foot-base a { color: var(--ink-soft); }
    .foot-base a:hover { color: var(--blue); }

    /* ============ Responsive ============ */
    @media (max-width: 1024px) {
      .sheet__body { grid-template-columns: 1fr; gap: 44px; padding: 64px 36px 30px; }
      .sheet__label { left: 36px; right: 150px; }
      .sheet__rev { right: 36px; }
      .hero__sub { max-width: 620px; }
      .titleblock { grid-template-columns: 1.6fr 1fr 1fr; }
      .titleblock > div:nth-child(n+4) { border-top: 1px solid var(--line-blue); }
      .fig-grid { grid-template-columns: 1fr 1fr; }
      .fig--wide { grid-column: span 2; }
      .trust__board { grid-template-columns: 1fr 1fr; }
      .trust__lead { grid-column: span 2; border-bottom: 1px dashed var(--line-blue); }
      .stat:nth-child(2) { border-left: none; }
      .gh-cta__box { grid-template-columns: 1fr; padding: 44px 30px; }
      .foot-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 720px) {
      .wrap { padding: 0 18px; }
      .brand__sheet { display: none; }
      .hero h1 { font-size: clamp(28px, 7.2vw, 40px); }
      .hero h1 .hl { padding-bottom: 56px; }
      .hero h1 .hl .dim__tag { font-size: 10.5px; padding: 0 8px; letter-spacing: 0.02em; max-width: 80vw; line-height: 1.5; }
      .main-nav {
        display: none;
        position: absolute;
        top: 62px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--sheet);
        border-bottom: 1.5px solid var(--blue);
        padding: 10px 20px 18px;
        margin-left: 0;
      }
      .main-nav.is-open { display: flex; }
      .main-nav a { padding: 12px 8px; font-size: 16px; }
      .nav-burger { display: block; }

      .hero { padding-top: 22px; }
      .sheet__body { padding: 52px 22px 26px; }
      /* Put the download CTA right under the headline so it's visible
         without scrolling on phones, ahead of the longer description. */
      .hero__col { display: flex; flex-direction: column; }
      .hero__col h1 { order: 1; }
      .hero__col .hero__cta { order: 2; margin-top: 20px; }
      .hero__col .hero__sub { order: 3; margin-top: 18px; }
      .hero__col .hero__note { order: 4; margin-top: 14px; }
      .sheet__label { left: 22px; right: 118px; top: 18px; font-size: 9.5px; letter-spacing: 0.16em; }
      .sheet__rev { right: 22px; top: 18px; }
      .titleblock { grid-template-columns: 1fr 1fr; }
      .titleblock > div:nth-child(n+3) { border-top: 1px solid var(--line-blue); }

      .fig-grid { grid-template-columns: 1fr; }
      .fig--wide { grid-column: auto; grid-template-columns: 1fr; }

      .diagram__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .diagram svg { width: 600px; max-width: none; }

      /* The legend label is decorative (aria-hidden) — on phones drop the
         text and keep only the icon so the scrolling protocol list (the
         actual content) isn't squeezed into a sliver. */
      .legend-strip__tag { padding: 0 14px; }
      .legend-strip__tag-text { display: none; }
      .legend-strip__track span { padding: 0 18px; font-size: 11.5px; }
      .diagram__hint {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        margin-top: 10px; font-size: 12px; color: var(--ink-faint);
      }

      .bom__head { display: none; }
      .bom__head + .bom-row { border-top: none; }
      .bom-row { grid-template-columns: 46px 1fr 42px; padding: 18px 16px; }
      .bom-row__idx, .bom-row__spec, .bom-row__ver { display: none; }

      .trust__board { grid-template-columns: 1fr; }
      .trust__lead { grid-column: auto; }
      .stat { border-left: none; border-top: 1px dashed var(--line-blue); padding: 26px 30px; }
      .trust__stamp { top: -26px; right: 16px; width: 78px; height: 78px; font-size: 13px; }

      .foot-grid { grid-template-columns: 1fr; gap: 32px; }
      .foot-base { justify-content: center; text-align: center; }
    }

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