.hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(32px, 6vw, 86px);
      align-items: center;
      min-height: calc(100vh - 76px);
      padding: clamp(48px, 9vh, 92px) var(--pad) clamp(54px, 7vh, 78px);
      overflow: hidden;
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: clamp(20px, 4vw, 56px) var(--pad);
      z-index: -2;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background:
        linear-gradient(to right, var(--grid-x) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-y) 1px, transparent 1px),
        linear-gradient(to right, transparent 0 49.85%, oklch(72% 0.13 196 / 0.18) 50%, transparent 50.15%),
        linear-gradient(to bottom, transparent 0 49.85%, oklch(78% 0.115 145 / 0.14) 50%, transparent 50.15%);
      background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
      mask-image: radial-gradient(circle at 68% 42%, black, transparent 72%);
      opacity: .9;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: clamp(20px, 4vw, 56px) var(--pad);
      z-index: -1;
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 72% 38%, oklch(72% 0.13 196 / 0.2), transparent 30%),
        radial-gradient(circle at 34% 64%, oklch(78% 0.115 145 / 0.12), transparent 26%);
      pointer-events: none;
    }

    .hero > * {
      position: relative;
      z-index: 1;
    }

    .hero > .reveal {
      max-width: 880px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      color: var(--accent);
      font-size: 13px;
      font-weight: 690;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--accent);
    }

    h1 {
      max-width: 880px;
      margin: 22px 0 24px;
      font-size: clamp(42px, 7vw, 92px);
      line-height: 0.98;
      letter-spacing: -0.045em;
      font-weight: 760;
    }

    .hero-copy {
      max-width: 560px;
      margin: 0;
      color: var(--soft);
      font-size: clamp(17px, 1.7vw, 21px);
      line-height: 1.8;
    }

    .section {
      padding: clamp(64px, 10vw, 132px) var(--pad);
      border-top: 1px solid var(--line-soft);
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(180px, .38fr) minmax(0, .62fr);
      gap: clamp(24px, 6vw, 78px);
      align-items: start;
      margin-bottom: clamp(30px, 5vw, 58px);
    }

    .kicker {
      margin: 0;
      color: var(--accent);
      font-size: 13px;
      font-weight: 720;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .section h2 {
      margin: 0;
      max-width: 820px;
      font-size: clamp(30px, 4.8vw, 62px);
      line-height: 1.08;
      letter-spacing: -0.04em;
      font-weight: 720;
    }

    .section-head p:not(.kicker) {
      max-width: 760px;
      margin: 22px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.85;
    }

    .capability-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 12px;
    }

    .capability {
      position: relative;
      min-height: 238px;
      padding: clamp(22px, 3vw, 32px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card-bg);
      overflow: hidden;
      transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
    }

    .capability:hover {
      transform: translateY(-4px);
      border-color: oklch(72% 0.13 196 / 0.55);
      background: var(--card-hover-bg);
    }

    .capability.large {
      grid-column: span 7;
    }

    .capability.medium {
      grid-column: span 5;
    }

    .capability.small {
      grid-column: span 4;
      min-height: 212px;
    }

    .capability::after {
      content: "";
      position: absolute;
      right: -40px;
      top: -40px;
      width: 150px;
      height: 150px;
      border: 1px solid oklch(80% 0.08 196 / 0.18);
      border-radius: 50%;
    }

    .capability code {
      display: inline-block;
      margin-bottom: 22px;
      color: var(--accent);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 13px;
    }

    .glyph {
      position: absolute;
      right: clamp(22px, 3vw, 32px);
      top: clamp(18px, 2.6vw, 28px);
      color: oklch(90% 0.03 205 / 0.72);
      font-size: clamp(38px, 5vw, 70px);
      line-height: 1;
      font-weight: 300;
      pointer-events: none;
    }

    .capability h3 {
      position: relative;
      max-width: 520px;
      margin: 0 0 14px;
      font-size: clamp(22px, 2.2vw, 31px);
      line-height: 1.18;
      letter-spacing: -0.025em;
    }

    .capability p {
      position: relative;
      max-width: 620px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .terms {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }

    .term {
      display: inline-flex;
      align-items: center;
      min-height: 29px;
      padding: 0 10px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      color: var(--soft);
      font-size: 12px;
      background: var(--chip-bg);
    }

    .system-band {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(260px, .42fr);
      gap: clamp(26px, 5vw, 70px);
      align-items: stretch;
    }

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

    .stack-row {
      display: grid;
      grid-template-columns: 100px minmax(0, 1fr);
      gap: clamp(18px, 3vw, 38px);
      padding: clamp(22px, 3.4vw, 34px) 0;
      border-bottom: 1px solid var(--line-soft);
    }

    .stack-row span {
      color: var(--accent);
      font-size: 12px;
      font-weight: 760;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .stack-row h3 {
      margin: 0 0 8px;
      font-size: clamp(20px, 2.4vw, 32px);
      line-height: 1.2;
      letter-spacing: -0.025em;
    }

    .stack-row p {
      max-width: 720px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .formula {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
    }

    .formula b {
      color: var(--text);
      font-weight: 650;
    }

    .terminal {
      align-self: start;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--terminal-bg);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .terminal-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 13px 15px;
      border-bottom: 1px solid var(--line-soft);
      background: var(--terminal-bar-bg);
    }

    .terminal-bar i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: oklch(65% 0.08 30);
    }

    .terminal-bar i:nth-child(2) {
      background: var(--warn);
    }

    .terminal-bar i:nth-child(3) {
      background: var(--accent-2);
    }

    .terminal pre {
      position: relative;
      min-height: 302px;
      margin: 0;
      padding: clamp(20px, 3vw, 30px);
      white-space: pre-wrap;
      word-break: break-word;
      color: oklch(82% 0.03 180);
      font: 13px/1.85 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    }

    .terminal pre.is-typing::after {
      content: "";
      display: inline-block;
      width: 8px;
      height: 1.2em;
      margin-left: 3px;
      vertical-align: -0.2em;
      background: var(--accent);
      box-shadow: 0 0 14px var(--accent);
      animation: terminalCursor .8s steps(2, start) infinite;
    }

    .terminal b {
      color: var(--text);
      font-weight: 700;
    }

    @keyframes terminalCursor {
      50% { opacity: 0; }
    }

    .process {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--surface-bg);
    }

    .process-step {
      min-height: 196px;
      padding: clamp(22px, 3vw, 30px);
      border-right: 1px solid var(--line-soft);
    }

    .process-step:last-child {
      border-right: 0;
    }

    .process-step span {
      display: block;
      margin-bottom: 42px;
      color: var(--accent);
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      font-size: 13px;
    }

    .process-step h3 {
      margin: 0 0 12px;
      font-size: 21px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .process-step p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .cases {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .case {
      min-height: 218px;
      padding: clamp(22px, 3vw, 30px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--case-bg);
    }

    .case h3 {
      margin: 0 0 14px;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.025em;
    }

    .case p {
      margin: 0 0 22px;
      color: var(--muted);
      font-size: 15px;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      color: var(--soft);
      font-size: 12px;
      background: var(--chip-bg);
    }

    #contact {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(22px, 4vw, 42px);
      align-items: start;
      padding-bottom: clamp(52px, 8vw, 96px);
    }

    #contact h2 {
      max-width: 860px;
    }

    .contact {
      padding: clamp(22px, 3vw, 30px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-bg);
      box-shadow: var(--shadow);
    }

    .contact p {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 14px;
    }

    .contact-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
      grid-template-areas:
        "email wechat"
        "qq wechat";
      gap: 12px clamp(18px, 3vw, 32px);
    }

    .contact-item {
      min-width: 0;
      padding: clamp(16px, 2vw, 22px);
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: var(--chip-bg);
    }

    .contact-item:nth-child(1) {
      grid-area: email;
    }

    .contact-item:nth-child(2) {
      grid-area: qq;
    }

    .contact-item:nth-child(3) {
      grid-area: wechat;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
    }

    .contact-item span {
      display: block;
      color: var(--muted);
      font-size: 13px;
    }

    .contact-item a,
    .contact-item strong {
      display: inline-block;
      margin-top: 8px;
      padding: 0;
      border: 0;
      color: var(--text);
      font-size: clamp(16px, 1.6vw, 20px);
      font-weight: 680;
      word-break: break-all;
    }

    .wechat-qr {
      width: min(100%, 178px);
      margin-top: 16px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      background: white;
    }


    @media (max-width: 980px) {
      .hero,
      .section-head,
      .system-band,
      #contact {
        grid-template-columns: 1fr;
      }

      .hero {
        min-height: auto;
      }

      .capability.large,
      .capability.medium,
      .capability.small {
        grid-column: span 6;
      }

      .process,
      .cases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .process-step:nth-child(2) {
        border-right: 0;
      }

      .process-step {
        border-bottom: 1px solid var(--line-soft);
      }

      .process-step:nth-child(3),
      .process-step:nth-child(4) {
        border-bottom: 0;
      }
    }

    @media (max-width: 680px) {
      h1 {
        font-size: clamp(40px, 15vw, 62px);
        letter-spacing: -0.04em;
      }

      .hero-copy,
      .section-head p:not(.kicker) {
        font-size: 16px;
      }

      .process,
      .cases,
      .contact-list {
        grid-template-columns: 1fr;
        grid-template-areas:
          "email"
          "qq"
          "wechat";
      }

      .contact-item,
      .contact-item:first-child,
      .contact-item:last-child {
        padding: 16px;
      }

      .wechat-qr {
        width: min(100%, 176px);
      }

      .capability.large,
      .capability.medium,
      .capability.small {
        grid-column: span 12;
        min-height: auto;
      }

      .stack-row {
        grid-template-columns: 1fr;
      }

      .process-step,
      .process-step:nth-child(2),
      .process-step:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
      }

      .process-step:last-child {
        border-bottom: 0;
      }

    }