/* Extracted verbatim from the final option-a.html; homepage-only cascade. */

/* option-a style layer 0 */
:root {
      --black: #0b1220;
      --charcoal: #101c31;
      --surface: #18304f;
      --white: #f8fbff;
      --muted: #a9b9cc;
      --line: rgba(201, 220, 255, 0.18);
      --blue: #175cd3;
      --blue-deep: #0d3f9e;
      --teal: #52d6c5;
      --page: 1600px;
      --pad: clamp(22px, 3.6vw, 58px);
      --sans: "Arial Black", "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
      --body: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--black);
      scroll-behavior: smooth;
    }

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

    a {
      color: inherit;
      text-decoration: none;
    }

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

    .page {
      width: min(100%, var(--page));
      min-height: 100vh;
      margin: 0 auto;
      border-inline: 1px solid var(--line);
      background: var(--black);
    }

    .topbar {
      height: 76px;
      padding: 0 var(--pad);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      border-bottom: 1px solid var(--line);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      width: max-content;
    }

    .brand-signal {
      position: relative;
      width: 28px;
      height: 28px;
      flex: 0 0 auto;
      border: 7px solid var(--blue);
      border-radius: 50%;
    }

    .brand-signal::after {
      content: "";
      position: absolute;
      inset: -13px;
      border: 1px solid rgba(23, 92, 211, 0.68);
      border-radius: 50%;
      animation: pulse 2.2s ease-out infinite;
    }

    .brand-copy {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .brand-copy strong {
      font-family: var(--sans);
      font-size: 19px;
      letter-spacing: -0.04em;
    }

    .brand-copy span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 34px;
      color: #d2d4d8;
      font-size: 13px;
      font-weight: 700;
    }

    .nav a {
      position: relative;
      padding: 9px 0;
    }

    .nav a::after {
      content: "";
      position: absolute;
      right: 100%;
      bottom: 3px;
      left: 0;
      height: 2px;
      background: var(--blue);
      transition: right 180ms ease;
    }

    .nav a:hover::after,
    .nav a:focus-visible::after {
      right: 0;
    }

    .header-cta {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .header-cta::after {
      content: "↗";
      font-size: 17px;
    }

    .ticker {
      height: 44px;
      overflow: hidden;
      color: var(--white);
      background: var(--blue);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .ticker-track {
      width: max-content;
      height: 100%;
      display: flex;
      align-items: center;
      animation: ticker 24s linear infinite;
    }

    .ticker-track span {
      display: inline-flex;
      align-items: center;
      gap: 24px;
      padding-right: 24px;
    }

    .ticker-track span::after {
      content: "●";
      font-family: var(--body);
      font-size: 8px;
    }

    .hero {
      position: relative;
      min-height: 652px;
      padding: 42px var(--pad) 34px;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.82fr);
      gap: clamp(42px, 5vw, 84px);
      align-items: stretch;
      overflow: hidden;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    .kicker {
      margin: 0 0 25px;
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .kicker::before {
      content: "LIVE";
      padding: 5px 8px;
      color: var(--white);
      background: var(--blue);
      font-size: 10px;
      letter-spacing: 0.12em;
    }

    h1 {
      max-width: 870px;
      margin: 0;
      font-family: var(--sans);
      font-size: clamp(62px, 5.6vw, 90px);
      font-weight: 950;
      line-height: 0.96;
      letter-spacing: -0.072em;
    }

    h1 .hit {
      position: relative;
      display: inline-block;
      margin-top: 3px;
      color: var(--blue);
    }

    h1 .hit::after {
      content: "";
      position: absolute;
      right: -35px;
      bottom: 9px;
      width: 24px;
      height: 24px;
      background: var(--blue);
      border-radius: 50%;
      box-shadow: 0 0 0 8px rgba(23, 92, 211, 0.18);
    }

    .promise {
      max-width: 690px;
      margin: 28px 0 0;
      color: #c7c9cd;
      font-size: 16px;
      font-weight: 650;
      line-height: 1.7;
    }

    .promise strong {
      color: var(--white);
      font-weight: 850;
    }

    .actions {
      margin-top: 31px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .button {
      min-height: 53px;
      padding: 0 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 26px;
      border: 1px solid var(--white);
      font-size: 14px;
      font-weight: 850;
      transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .button::after {
      content: "→";
      font-size: 19px;
    }

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

    .button-primary:hover,
    .button-primary:focus-visible {
      color: var(--white);
      background: #277fe0;
      border-color: #277fe0;
      transform: translate(3px, -3px);
    }

    .button-secondary:hover,
    .button-secondary:focus-visible {
      color: var(--black);
      background: var(--white);
      transform: translate(3px, -3px);
    }

    .start-panel {
      position: relative;
      min-width: 0;
      min-height: 506px;
      align-self: center;
      padding: 28px 30px 26px;
      overflow: hidden;
      color: var(--white);
      background: var(--blue);
      box-shadow: -16px 16px 0 #07172c;
      transform: rotate(1.2deg);
      transition: transform 420ms cubic-bezier(.2,.72,.2,1);
    }

    .start-panel:hover {
      transform: rotate(0deg) translate(-4px, -4px);
    }

    .start-panel::after {
      content: "01";
      position: absolute;
      right: -18px;
      bottom: -44px;
      color: rgba(255,255,255,.1);
      font-family: var(--sans);
      font-size: 230px;
      line-height: 1;
      letter-spacing: -.08em;
      pointer-events: none;
    }

    .start-panel-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,.36);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .start-budget {
      position: relative;
      z-index: 1;
      padding: 24px 0 20px;
    }

    .start-budget > span {
      display: block;
      margin-bottom: 5px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .start-budget strong {
      display: flex;
      align-items: flex-end;
      gap: 12px;
      font-family: var(--sans);
      font-size: clamp(84px, 7.6vw, 122px);
      line-height: .9;
      letter-spacing: -.075em;
    }

    .start-budget em {
      padding-bottom: 12px;
      font-family: var(--body);
      font-size: 20px;
      font-style: normal;
      letter-spacing: 0;
    }

    .start-steps {
      position: relative;
      z-index: 1;
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(255,255,255,.36);
    }

    .start-steps li {
      min-height: 64px;
      display: grid;
      grid-template-columns: 34px 1fr;
      column-gap: 10px;
      align-content: center;
      border-bottom: 1px solid rgba(255,255,255,.28);
    }

    .start-steps span {
      grid-row: 1 / span 2;
      color: #c9dcff;
      font-size: 10px;
      font-weight: 850;
    }

    .start-steps strong {
      font-size: 15px;
    }

    .start-steps small {
      margin-top: 3px;
      color: #d9e7ff;
      font-size: 10px;
    }

    .start-panel-cta {
      position: relative;
      z-index: 1;
      min-height: 52px;
      margin-top: 22px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--blue);
      background: var(--white);
      font-size: 13px;
      font-weight: 850;
      transition: color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .start-panel-cta:hover,
    .start-panel-cta:focus-visible {
      color: var(--black);
      background: #d9e7ff;
      transform: translate(3px, -3px);
    }

    .proof-rail {
      position: relative;
      z-index: 2;
      min-height: 204px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--charcoal);
    }

    .case-strip {
      position: relative;
      min-width: 0;
      min-height: 204px;
      overflow: hidden;
      padding: 25px 26px 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-right: 1px solid var(--line);
      background: var(--charcoal);
    }

    .case-strip::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--blue);
      transform: scaleX(0.18);
      transform-origin: left;
      transition: transform 260ms ease;
    }

    .case-strip:hover::before,
    .case-strip:focus-visible::before {
      transform: scaleX(1);
    }

    .case-strip:last-child {
      border-right: 0;
    }

    .case-copy {
      min-width: 0;
      min-height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .case-no {
      color: var(--blue);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .case-copy strong {
      display: block;
      max-width: 360px;
      margin-bottom: 7px;
      font-family: var(--sans);
      font-size: clamp(24px, 2vw, 34px);
      line-height: 1.05;
      letter-spacing: -0.05em;
    }

    .case-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .case-arrow {
      position: absolute;
      right: 15px;
      bottom: 13px;
      color: var(--blue);
      font-size: 22px;
      transition: transform 180ms ease;
    }

    .case-strip:hover .case-arrow,
    .case-strip:focus-visible .case-arrow {
      transform: translate(4px, -4px);
    }

    .more-proof {
      padding: 70px var(--pad) 78px;
      display: grid;
      grid-template-columns: 0.7fr 1.3fr;
      gap: 70px;
      background: var(--white);
      color: var(--black);
    }

    .more-proof h2 {
      margin: 0;
      font-family: var(--sans);
      font-size: clamp(40px, 4vw, 66px);
      line-height: 0.98;
      letter-spacing: -0.065em;
    }

    .more-proof h2 span {
      color: var(--blue);
    }

    .case-ledger {
      border-top: 2px solid var(--black);
    }

    .ledger-row {
      min-height: 76px;
      display: grid;
      grid-template-columns: 48px minmax(180px, 0.8fr) minmax(220px, 1fr) 32px;
      gap: 18px;
      align-items: center;
      border-bottom: 1px solid #cbd5e1;
      transition: color 180ms ease, padding 180ms ease, background 180ms ease;
    }

    .ledger-row:hover,
    .ledger-row:focus-visible {
      padding-inline: 12px;
      color: var(--blue);
      background: #edf4ff;
    }

    .ledger-row > span {
      color: var(--blue);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.1em;
    }

    .ledger-row strong {
      font-family: var(--sans);
      font-size: 20px;
      letter-spacing: -0.035em;
    }

    .ledger-row em {
      color: #65748a;
      font-size: 13px;
      font-style: normal;
      line-height: 1.5;
    }

    .ledger-row b {
      color: var(--blue);
      font-size: 21px;
      text-align: right;
    }

    :focus-visible {
      outline: 3px solid rgba(23, 92, 211, 0.56);
      outline-offset: 3px;
    }

    @keyframes pulse {
      0% {
        opacity: 0.65;
        transform: scale(0.62);
      }
      80%,
      100% {
        opacity: 0;
        transform: scale(1.28);
      }
    }

    @keyframes ticker {
      to {
        transform: translateX(-50%);
      }
    }

    @keyframes breathe {
      0%,
      100% {
        transform: scale(0.96);
      }
      50% {
        transform: scale(1.03);
      }
    }

    @media (max-width: 1180px) {
      .topbar {
        grid-template-columns: 1fr auto;
      }

      .nav {
        display: none;
      }

      .hero {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 0.78fr);
        gap: 40px;
      }

      h1 {
        font-size: clamp(58px, 6.2vw, 74px);
      }

      .case-copy {
        min-height: 142px;
      }
    }

    @media (max-width: 880px) {
      .page {
        border-inline: 0;
      }

      .topbar {
        height: 70px;
      }

      .ticker {
        height: 40px;
      }

      .hero {
        min-height: auto;
        grid-template-columns: 1fr;
        padding-top: 45px;
        padding-bottom: 56px;
      }

      .start-panel {
        width: min(92%, 620px);
        min-height: 480px;
        justify-self: center;
        transform: none;
      }

      .proof-rail {
        grid-template-columns: 1fr;
      }

      .case-strip {
        min-height: 190px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .case-strip:last-child {
        border-bottom: 0;
      }

      .more-proof {
        grid-template-columns: 1fr;
        gap: 38px;
      }

      .ledger-row {
        grid-template-columns: 42px 0.85fr 1fr 28px;
      }
    }

    @media (max-width: 560px) {
      :root {
        --pad: 20px;
      }

      .brand-copy {
        display: block;
      }

      .brand-copy strong {
        display: block;
        font-size: 17px;
      }

      .brand-copy span {
        display: none;
      }

      .header-cta span {
        display: none;
      }

      .header-cta::before {
        content: "项目诊断";
      }

      .hero {
        padding-top: 36px;
      }

      h1 {
        font-size: clamp(47px, 14vw, 66px);
        line-height: 1;
      }

      h1 .hit::after {
        display: none;
      }

      .promise {
        font-size: 15px;
      }

      .actions {
        align-items: stretch;
      }

      .button {
        width: 100%;
        justify-content: space-between;
      }

      .start-panel {
        width: calc(100% - 8px);
        min-height: auto;
        padding: 22px 20px 20px;
        box-shadow: -8px 8px 0 #07172c;
      }

      .start-panel::after {
        right: -8px;
        bottom: -24px;
        font-size: 150px;
      }

      .start-budget strong {
        font-size: 76px;
      }

      .start-budget em {
        padding-bottom: 7px;
        font-size: 16px;
      }

      .start-steps li {
        min-height: 60px;
      }

      .case-copy strong {
        font-size: 24px;
      }

      .ledger-row {
        min-height: 98px;
        grid-template-columns: 36px minmax(0, 1fr) 24px;
        gap: 12px;
      }

      .ledger-row em {
        grid-column: 2 / 3;
      }

      .ledger-row b {
        grid-column: 3;
        grid-row: 1 / span 2;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }

      .ticker-track {
        transform: none;
      }
    }

/* option-a style layer 1 */
/* 现代可信 B2B 方向：保留原有内容与结构，仅重塑视觉语言 */
    :root {
      --black: #11213a;
      --charcoal: #f4f7fb;
      --surface: #eef4fc;
      --white: #ffffff;
      --muted: #64748b;
      --line: #dce4ef;
      --blue: #175cd3;
      --blue-deep: #1148a6;
      --page: 1600px;
      --pad: clamp(22px, 4.2vw, 68px);
      --sans: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
      --body: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
    }

    html {
      background: #edf2f8;
    }

    body {
      color: var(--black);
      background: #edf2f8;
    }

    .page {
      border-inline: 1px solid #e1e8f1;
      background: var(--white);
      box-shadow: 0 0 60px rgba(30, 64, 105, 0.06);
    }

    .topbar {
      height: 74px;
      border-bottom-color: var(--line);
      background: rgba(255, 255, 255, 0.96);
    }

    .brand {
      gap: 12px;
    }

    .brand-signal {
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(145deg, #2f77e5, var(--blue-deep));
      box-shadow: 0 5px 14px rgba(23, 92, 211, 0.18);
    }

    .brand-signal::before,
    .brand-signal::after {
      content: "";
      position: absolute;
      border: 0;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.96);
      animation: none;
    }

    .brand-signal::before {
      top: 8px;
      left: 8px;
      width: 6px;
      height: 14px;
    }

    .brand-signal::after {
      inset: auto 8px 8px auto;
      width: 6px;
      height: 9px;
    }

    .brand-copy strong {
      color: var(--black);
      font-size: 18px;
      font-weight: 760;
      letter-spacing: -0.025em;
    }

    .brand-copy span {
      color: #76859a;
      font-weight: 600;
    }

    .nav {
      color: #475569;
      font-weight: 620;
    }

    .nav a::after {
      bottom: 1px;
      height: 1px;
    }

    .header-cta {
      min-height: 38px;
      padding: 0 15px;
      border: 1px solid #cad7e8;
      border-radius: 7px;
      color: var(--blue-deep);
      background: #fff;
      font-weight: 720;
      letter-spacing: 0.025em;
      text-transform: none;
      transition: border-color 180ms ease, background 180ms ease;
    }

    .header-cta:hover,
    .header-cta:focus-visible {
      border-color: #a9c3eb;
      background: #f5f8fd;
    }

    .header-cta::after {
      font-size: 15px;
    }

    .ticker {
      height: auto;
      overflow: visible;
      color: #4d5f76;
      background: #f7f9fc;
      border-bottom: 1px solid var(--line);
      font-family: var(--body);
      font-size: 12px;
      font-weight: 650;
      letter-spacing: 0;
      white-space: normal;
    }

    .ticker-track {
      width: auto;
      min-height: 48px;
      padding-inline: var(--pad);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      animation: none;
    }

    .ticker-track span {
      min-width: 0;
      gap: 10px;
      padding: 0 18px;
      justify-content: center;
      border-right: 1px solid var(--line);
      text-align: center;
    }

    .ticker-track span:first-child {
      padding-left: 0;
    }

    .ticker-track span:nth-child(4) {
      padding-right: 0;
      border-right: 0;
    }

    .ticker-track span:nth-child(n + 5) {
      display: none;
    }

    .ticker-track span::before {
      content: "";
      width: 5px;
      height: 5px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: #70a3e8;
    }

    .ticker-track span::after {
      display: none;
    }

    .hero {
      min-height: 660px;
      padding-top: 74px;
      padding-bottom: 74px;
      grid-template-columns: minmax(0, 1.08fr) minmax(410px, 0.74fr);
      gap: clamp(50px, 6vw, 96px);
      background:
        radial-gradient(circle at 88% 8%, rgba(97, 151, 229, 0.14), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    }

    .kicker {
      margin-bottom: 22px;
      gap: 0;
      color: #4e6e9e;
      font-size: 11px;
      font-weight: 720;
      letter-spacing: 0.085em;
    }

    .kicker::before {
      display: none;
    }

    h1 {
      max-width: 800px;
      color: var(--black);
      font-size: clamp(56px, 4.65vw, 74px);
      font-weight: 740;
      line-height: 1.08;
      letter-spacing: -0.052em;
    }

    h1 .hit {
      margin-top: 5px;
      color: var(--blue);
    }

    h1 .hit::after {
      display: none;
    }

    .promise {
      max-width: 650px;
      margin-top: 27px;
      color: #617086;
      font-size: 15px;
      font-weight: 520;
      line-height: 1.75;
    }

    .promise strong {
      color: #233d61;
      font-weight: 720;
    }

    .actions {
      margin-top: 32px;
      gap: 11px;
    }

    .button {
      min-height: 49px;
      padding: 0 19px;
      gap: 20px;
      border-color: #c7d3e3;
      border-radius: 7px;
      color: #243a59;
      background: #fff;
      font-size: 13px;
      font-weight: 680;
      box-shadow: none;
      transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }

    .button-primary {
      color: #fff;
      border-color: var(--blue);
      background: var(--blue);
      box-shadow: 0 8px 22px rgba(23, 92, 211, 0.17);
    }

    .button-primary:hover,
    .button-primary:focus-visible {
      color: #fff;
      border-color: var(--blue-deep);
      background: var(--blue-deep);
      box-shadow: 0 10px 26px rgba(23, 92, 211, 0.22);
      transform: none;
    }

    .button-secondary:hover,
    .button-secondary:focus-visible {
      color: #1b365d;
      border-color: #aabed9;
      background: #f7faff;
      transform: none;
    }

    .start-panel {
      min-height: 498px;
      padding: 30px 32px 28px;
      color: var(--black);
      border: 1px solid #d6e0ec;
      border-radius: 14px;
      background:
        radial-gradient(circle at 100% 0%, rgba(23, 92, 211, 0.12), transparent 36%),
        linear-gradient(145deg, #ffffff 0%, #f4f8fd 100%);
      box-shadow: 0 24px 60px rgba(46, 78, 117, 0.11);
      transform: none;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    .start-panel:hover {
      border-color: #bed0e6;
      box-shadow: 0 26px 62px rgba(46, 78, 117, 0.13);
      transform: none;
    }

    .start-panel::before {
      content: "";
      position: absolute;
      top: 0;
      right: 34px;
      left: 34px;
      height: 3px;
      border-radius: 0 0 3px 3px;
      background: linear-gradient(90deg, var(--blue), #73a8ef);
    }

    .start-panel::after {
      display: none;
    }

    .start-panel-head {
      padding-bottom: 17px;
      color: #6a7890;
      border-bottom-color: #d8e1ed;
      font-size: 9px;
      font-weight: 720;
      letter-spacing: 0.1em;
    }

    .start-budget {
      padding: 28px 0 25px;
    }

    .start-budget > span {
      margin-bottom: 9px;
      color: #56657a;
      font-size: 11px;
      font-weight: 650;
    }

    .start-budget strong {
      color: var(--blue);
      font-size: clamp(70px, 5.7vw, 92px);
      font-weight: 720;
      line-height: 0.96;
      letter-spacing: -0.06em;
    }

    .start-budget em {
      padding-bottom: 8px;
      color: #4e6078;
      font-size: 16px;
      font-weight: 620;
    }

    .start-steps {
      border-top-color: #d8e1ed;
    }

    .start-steps li {
      min-height: 66px;
      grid-template-columns: 33px 1fr;
      border-bottom-color: #dde5ef;
    }

    .start-steps span {
      color: var(--blue);
      font-weight: 740;
    }

    .start-steps strong {
      color: #1a2f4d;
      font-size: 14px;
      font-weight: 680;
    }

    .start-steps small {
      color: #718096;
      font-size: 10px;
      line-height: 1.45;
    }

    .start-panel-cta {
      min-height: 48px;
      margin-top: 22px;
      border: 1px solid #c7d5e6;
      border-radius: 7px;
      color: var(--blue-deep);
      background: #fff;
      font-size: 12px;
      font-weight: 680;
      transition: border-color 180ms ease, background 180ms ease;
    }

    .start-panel-cta:hover,
    .start-panel-cta:focus-visible {
      color: var(--blue-deep);
      border-color: #a9c3e5;
      background: #f5f9ff;
      transform: none;
    }

    .proof-rail {
      min-height: 0;
      padding: 0 var(--pad) 76px;
      gap: 16px;
      border: 0;
      background: #fbfdff;
    }

    .case-strip {
      min-height: 188px;
      padding: 24px 24px 21px;
      color: var(--black);
      border: 1px solid #dbe3ed;
      border-radius: 11px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(45, 72, 105, 0.045);
      transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    }

    .case-strip:hover,
    .case-strip:focus-visible {
      border-color: #b7c9df;
      box-shadow: 0 12px 30px rgba(45, 72, 105, 0.08);
      transform: translateY(-2px);
    }

    .case-strip::before {
      top: 23px;
      left: 24px;
      width: 25px;
      height: 2px;
      border-radius: 2px;
      transform: none;
      transition: width 180ms ease;
    }

    .case-strip:hover::before,
    .case-strip:focus-visible::before {
      width: 42px;
      transform: none;
    }

    .case-strip:last-child {
      border-right: 1px solid #dbe3ed;
    }

    .case-copy {
      min-height: 141px;
    }

    .case-no {
      padding-left: 38px;
      color: #597297;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.075em;
    }

    .case-copy strong {
      margin-bottom: 8px;
      color: #172b47;
      font-size: clamp(21px, 1.65vw, 27px);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.025em;
    }

    .case-copy p {
      color: #6d7b8e;
      font-size: 11px;
    }

    .case-arrow {
      right: 20px;
      bottom: 17px;
      color: #6280a8;
      font-size: 18px;
    }

    .case-strip:hover .case-arrow,
    .case-strip:focus-visible .case-arrow {
      color: var(--blue);
      transform: none;
    }

    .more-proof {
      padding-top: 84px;
      padding-bottom: 90px;
      grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
      gap: clamp(50px, 6vw, 92px);
      border-top: 1px solid #e2e8f0;
      color: var(--black);
      background: #f4f7fb;
    }

    .more-proof h2 {
      color: #172b47;
      font-size: clamp(40px, 3.45vw, 55px);
      font-weight: 710;
      line-height: 1.08;
      letter-spacing: -0.045em;
    }

    .case-ledger {
      overflow: hidden;
      border: 1px solid #d7e0eb;
      border-top: 1px solid #d7e0eb;
      border-radius: 11px;
      background: #fff;
      box-shadow: 0 10px 32px rgba(45, 72, 105, 0.05);
    }

    .ledger-row {
      min-height: 80px;
      padding-inline: 20px;
      grid-template-columns: 36px minmax(140px, 0.8fr) minmax(210px, 1fr) 26px;
      gap: 16px;
      border-bottom-color: #e2e8f0;
      transition: color 180ms ease, background 180ms ease;
    }

    .ledger-row:last-child {
      border-bottom: 0;
    }

    .ledger-row:hover,
    .ledger-row:focus-visible {
      padding-inline: 20px;
      color: var(--blue);
      background: #f6f9fd;
    }

    .ledger-row > span {
      color: #6c83a2;
      font-size: 10px;
      font-weight: 720;
    }

    .ledger-row strong {
      color: #1d3555;
      font-size: 17px;
      font-weight: 680;
      letter-spacing: -0.02em;
    }

    .ledger-row em {
      color: #6f7e92;
      font-size: 12px;
    }

    .ledger-row b {
      color: #7088a8;
      font-size: 17px;
    }

    @media (max-width: 1180px) {
      .hero {
        grid-template-columns: minmax(0, 1fr) minmax(370px, 0.76fr);
        gap: 46px;
      }

      h1 {
        font-size: clamp(52px, 5.5vw, 67px);
      }
    }

    @media (max-width: 880px) {
      .ticker-track {
        padding: 0;
        grid-template-columns: repeat(2, 1fr);
      }

      .ticker-track span {
        min-height: 42px;
        border-bottom: 1px solid var(--line);
      }

      .ticker-track span:nth-child(2) {
        border-right: 0;
      }

      .ticker-track span:nth-child(3),
      .ticker-track span:nth-child(4) {
        border-bottom: 0;
      }

      .hero {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 58px;
        padding-bottom: 58px;
      }

      .start-panel {
        width: min(100%, 650px);
      }

      .proof-rail {
        padding-bottom: 64px;
        grid-template-columns: 1fr;
      }

      .case-strip {
        min-height: 170px;
        border-right: 1px solid #dbe3ed;
        border-bottom: 1px solid #dbe3ed;
      }

      .case-copy {
        min-height: 124px;
      }

      .more-proof {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 560px) {
      .topbar {
        height: 66px;
      }

      .brand-signal {
        width: 28px;
        height: 28px;
      }

      .header-cta {
        min-height: 36px;
      }

      .ticker-track {
        grid-template-columns: 1fr;
      }

      .ticker-track span {
        min-height: 38px;
        padding: 0 var(--pad);
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        text-align: left;
      }

      .ticker-track span:nth-child(3) {
        border-bottom: 1px solid var(--line);
      }

      .hero {
        padding-top: 48px;
        padding-bottom: 50px;
        gap: 42px;
      }

      h1 {
        font-size: clamp(43px, 12.2vw, 58px);
        line-height: 1.08;
        letter-spacing: -0.045em;
      }

      h1 .hit {
        display: inline;
      }

      .promise {
        font-size: 14px;
      }

      .start-panel {
        width: 100%;
        padding: 26px 21px 22px;
        border-radius: 11px;
        box-shadow: 0 16px 40px rgba(46, 78, 117, 0.1);
      }

      .start-budget strong {
        font-size: 68px;
      }

      .proof-rail {
        padding-bottom: 52px;
      }

      .more-proof {
        padding-top: 64px;
        padding-bottom: 68px;
      }

      .more-proof h2 {
        font-size: 40px;
      }

      .ledger-row {
        min-height: 98px;
        padding-inline: 14px;
        grid-template-columns: 30px minmax(0, 1fr) 22px;
        gap: 10px;
      }

      .ledger-row:hover,
      .ledger-row:focus-visible {
        padding-inline: 14px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .case-strip:hover,
      .case-strip:focus-visible {
        transform: none;
      }
    }

/* option-a style layer 2 */
/* 完整首页扩展区 */
    .section-shell {
      padding: 108px var(--pad);
    }

    .section-heading {
      display: grid;
      grid-template-columns: minmax(190px, 0.58fr) minmax(0, 1.42fr);
      gap: clamp(44px, 7vw, 110px);
      align-items: start;
    }

    .eyebrow {
      margin: 0;
      color: #52709b;
      font-size: 10px;
      font-weight: 760;
      letter-spacing: 0.12em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .eyebrow-light {
      color: #92b8ee;
    }

    .heading-index {
      display: block;
      margin-top: 26px;
      color: #d7e2ef;
      font-size: clamp(58px, 5.4vw, 82px);
      font-weight: 680;
      line-height: 1;
      letter-spacing: -0.065em;
    }

    .section-heading h2,
    .solutions-stage h2,
    .case-intro h2,
    .fit-section h2,
    .faq-section h2,
    .contact-section h2 {
      margin: 0;
      font-family: var(--sans);
      font-size: clamp(40px, 3.6vw, 57px);
      font-weight: 710;
      line-height: 1.1;
      letter-spacing: -0.048em;
    }

    .section-heading > div:last-child > p,
    .solutions-stage-head > p,
    .case-intro > p,
    .fit-intro > p,
    .faq-heading > p,
    .contact-copy > p {
      max-width: 720px;
      margin: 23px 0 0;
      color: #68778b;
      font-size: 15px;
      line-height: 1.8;
    }

    .services-section {
      border-top: 1px solid #e1e8f1;
      background: #fff;
    }

    .service-grid {
      margin-top: 74px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid #d8e1ec;
      border-bottom: 1px solid #d8e1ec;
    }

    .service-card {
      min-height: 388px;
      padding: 31px 28px 28px;
      border-right: 1px solid #d8e1ec;
      background: #fff;
      transition: background 180ms ease;
    }

    .service-card:last-child {
      border-right: 0;
    }

    .service-card:hover {
      background: #f8faff;
    }

    .service-no {
      display: inline-flex;
      min-width: 31px;
      min-height: 24px;
      align-items: center;
      justify-content: center;
      border: 1px solid #cbd8e8;
      border-radius: 5px;
      color: var(--blue);
      font-size: 9px;
      font-weight: 760;
    }

    .service-card h3 {
      margin: 58px 0 14px;
      color: #182f4d;
      font-size: 22px;
      font-weight: 710;
      letter-spacing: -0.025em;
    }

    .service-card p {
      min-height: 94px;
      margin: 0;
      color: #6b798c;
      font-size: 13px;
      line-height: 1.75;
    }

    .service-card ul {
      margin: 27px 0 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid #e2e8f0;
    }

    .service-card li {
      position: relative;
      padding: 11px 0 0 15px;
      color: #455b78;
      font-size: 11px;
      line-height: 1.55;
    }

    .service-card li::before {
      content: "";
      position: absolute;
      top: 18px;
      left: 0;
      width: 5px;
      height: 1px;
      background: var(--blue);
    }

    .scope-note {
      min-height: 74px;
      padding: 0 22px;
      display: grid;
      grid-template-columns: 0.7fr 1.35fr auto;
      gap: 24px;
      align-items: center;
      border: 1px solid #d8e2ed;
      border-top: 0;
      color: #425776;
      background: #f7faff;
    }

    .scope-note > span {
      color: #64748b;
      font-size: 11px;
      font-weight: 650;
    }

    .scope-note strong {
      color: #1c3555;
      font-size: 13px;
      font-weight: 680;
    }

    .scope-note a {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 700;
    }

    .solutions-stage {
      padding: 106px var(--pad) 112px;
      color: #fff;
      background: #102440;
    }

    .solutions-stage-head {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.62fr);
      gap: clamp(60px, 9vw, 150px);
      align-items: end;
    }

    .solutions-stage h2 {
      margin-top: 24px;
      color: #fff;
    }

    .solutions-stage-head > p {
      margin: 0 0 3px;
      color: #aab8ca;
    }

    .solution-list {
      margin-top: 67px;
      border-top: 1px solid rgba(210, 226, 247, 0.24);
    }

    .solution-row {
      min-height: 118px;
      display: grid;
      grid-template-columns: 95px minmax(230px, 0.72fr) minmax(300px, 1fr) 115px;
      gap: 25px;
      align-items: center;
      border-bottom: 1px solid rgba(210, 226, 247, 0.2);
      transition: background 180ms ease, padding 180ms ease;
    }

    .solution-row:hover,
    .solution-row:focus-visible {
      padding-inline: 18px;
      background: rgba(255, 255, 255, 0.045);
    }

    .solution-tag {
      width: max-content;
      padding: 6px 8px;
      border: 1px solid rgba(154, 191, 240, 0.42);
      border-radius: 5px;
      color: #a9c8ef;
      font-size: 9px;
      font-weight: 720;
      letter-spacing: 0.08em;
    }

    .solution-main {
      min-width: 0;
    }

    .solution-main strong,
    .solution-main em {
      display: block;
    }

    .solution-main strong {
      color: #fff;
      font-size: 21px;
      font-weight: 680;
      letter-spacing: -0.025em;
    }

    .solution-main em {
      margin-top: 6px;
      color: #8195ae;
      font-size: 10px;
      font-style: normal;
    }

    .solution-desc {
      color: #aebcce;
      font-size: 12px;
      line-height: 1.7;
    }

    .solution-link {
      justify-self: end;
      color: #9fc3f1;
      font-size: 11px;
      font-weight: 660;
    }

    .solution-link b {
      margin-left: 8px;
      font-size: 14px;
    }

    .solution-featured {
      position: relative;
    }

    .solution-featured::before {
      content: "";
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: 0;
      width: 3px;
      background: #4a91ec;
    }

    .case-intro {
      padding: 108px var(--pad) 62px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(330px, 0.56fr);
      gap: clamp(60px, 9vw, 150px);
      align-items: end;
      background: #fbfdff;
    }

    .case-intro h2 {
      margin-top: 24px;
      color: #172d49;
    }

    .case-intro > p {
      margin: 0 0 4px;
    }

    .process-section {
      background: #fff;
    }

    .compact-heading {
      padding-bottom: 66px;
      border-bottom: 1px solid #dce4ee;
    }

    .process-steps {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .process-steps li {
      min-height: 134px;
      display: grid;
      grid-template-columns: 66px minmax(0, 1fr) 120px;
      gap: 30px;
      align-items: center;
      border-bottom: 1px solid #dde5ef;
    }

    .process-no {
      color: #7090b9;
      font-size: 11px;
      font-weight: 740;
      letter-spacing: 0.08em;
    }

    .process-steps h3 {
      margin: 0;
      color: #172f4e;
      font-size: 21px;
      font-weight: 690;
      letter-spacing: -0.025em;
    }

    .process-steps p {
      max-width: 690px;
      margin: 10px 0 0;
      color: #6a788b;
      font-size: 12px;
      line-height: 1.7;
    }

    .process-steps em {
      justify-self: end;
      padding: 7px 10px;
      border: 1px solid #ced9e7;
      border-radius: 5px;
      color: #526a8b;
      font-size: 10px;
      font-style: normal;
      font-weight: 660;
    }

    .process-summary {
      margin-top: 48px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid #d8e2ee;
      border-radius: 10px;
      background: #f7faff;
    }

    .process-summary > div {
      min-height: 92px;
      padding: 21px 23px;
      border-right: 1px solid #d8e2ee;
    }

    .process-summary > div:last-child {
      border-right: 0;
    }

    .process-summary span,
    .process-summary strong {
      display: block;
    }

    .process-summary span {
      color: #738299;
      font-size: 10px;
    }

    .process-summary strong {
      margin-top: 10px;
      color: #1b3658;
      font-size: 13px;
      font-weight: 680;
    }

    .fit-section {
      padding: 108px var(--pad) 112px;
      display: grid;
      grid-template-columns: minmax(280px, 0.64fr) minmax(0, 1.36fr);
      gap: clamp(60px, 8vw, 128px);
      border-top: 1px solid #e0e7f0;
      background: #f4f7fb;
    }

    .fit-intro h2 {
      margin-top: 24px;
      color: #172d49;
    }

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

    .fit-card {
      overflow: hidden;
      border: 1px solid #d7e0eb;
      border-radius: 11px;
      background: #fff;
    }

    .fit-label {
      min-height: 49px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dce4ee;
      color: #355679;
      background: #f9fbfd;
      font-size: 11px;
      font-weight: 720;
    }

    .fit-positive .fit-label {
      color: #185fc1;
      background: #f1f7ff;
    }

    .fit-card ul {
      margin: 0;
      padding: 0 20px;
      list-style: none;
    }

    .fit-card li {
      padding: 21px 0;
      border-bottom: 1px solid #e2e8f0;
    }

    .fit-card li:last-child {
      border-bottom: 0;
    }

    .fit-card strong,
    .fit-card li span {
      display: block;
    }

    .fit-card strong {
      color: #203a5a;
      font-size: 13px;
      font-weight: 680;
    }

    .fit-card li span {
      margin-top: 7px;
      color: #718096;
      font-size: 11px;
      line-height: 1.65;
    }

    .faq-section {
      display: grid;
      grid-template-columns: minmax(280px, 0.66fr) minmax(0, 1.34fr);
      gap: clamp(60px, 8vw, 130px);
      background: #fff;
    }

    .faq-heading {
      position: sticky;
      top: 30px;
      align-self: start;
    }

    .faq-heading h2 {
      margin-top: 24px;
      color: #172d49;
    }

    .faq-list {
      border-top: 1px solid #cfdae8;
    }

    .faq-list details {
      border-bottom: 1px solid #d9e2ed;
    }

    .faq-list summary {
      min-height: 78px;
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 14px;
      align-items: center;
      color: #1b3555;
      font-size: 15px;
      font-weight: 660;
      line-height: 1.5;
      cursor: pointer;
      list-style: none;
    }

    .faq-list summary::-webkit-details-marker {
      display: none;
    }

    .faq-list summary::after {
      content: "+";
      grid-column: 3;
      color: #6682a5;
      font-size: 20px;
      font-weight: 450;
    }

    .faq-list details[open] summary::after {
      content: "−";
    }

    .faq-list summary span {
      color: #7790b0;
      font-size: 10px;
      font-weight: 720;
    }

    .faq-list details > p {
      margin: -6px 0 26px 54px;
      padding-right: 48px;
      color: #6b798d;
      font-size: 12px;
      line-height: 1.8;
    }

    .contact-section {
      padding: 105px var(--pad) 110px;
      display: grid;
      grid-template-columns: minmax(0, 0.88fr) minmax(430px, 0.74fr);
      gap: clamp(70px, 9vw, 150px);
      color: #fff;
      background:
        radial-gradient(circle at 88% 12%, rgba(94, 157, 239, 0.3), transparent 28%),
        #1356b8;
    }

    .contact-section h2 {
      margin-top: 24px;
      color: #fff;
    }

    .contact-copy > p {
      color: #c9dcf7;
    }

    .contact-copy ul {
      margin: 34px 0 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid rgba(255, 255, 255, 0.24);
    }

    .contact-copy li {
      position: relative;
      padding: 14px 0 0 18px;
      color: #dce9fb;
      font-size: 11px;
    }

    .contact-copy li::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 0;
      width: 6px;
      height: 2px;
      background: #98c4ff;
    }

    .diagnosis-form {
      padding: 31px;
      border: 1px solid rgba(255, 255, 255, 0.32);
      border-radius: 13px;
      color: #1b3555;
      background: #fff;
      box-shadow: 0 28px 70px rgba(7, 38, 82, 0.2);
    }

    .diagnosis-form label,
    .diagnosis-form label > span {
      display: block;
    }

    .diagnosis-form label > span {
      margin-bottom: 8px;
      color: #4e6078;
      font-size: 10px;
      font-weight: 680;
    }

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

    .diagnosis-form > label,
    .diagnosis-form > .form-row + label,
    .diagnosis-form label + label {
      margin-top: 17px;
    }

    .diagnosis-form .form-row:first-child label,
    .diagnosis-form .form-row label:first-child {
      margin-top: 0;
    }

    .diagnosis-form input,
    .diagnosis-form select,
    .diagnosis-form textarea {
      width: 100%;
      border: 1px solid #ced9e6;
      border-radius: 6px;
      color: #233b5a;
      background: #f9fbfd;
      font: inherit;
      font-size: 12px;
      outline: none;
    }

    .diagnosis-form input,
    .diagnosis-form select {
      height: 43px;
      padding: 0 12px;
    }

    .diagnosis-form textarea {
      min-height: 103px;
      padding: 11px 12px;
      line-height: 1.65;
      resize: vertical;
    }

    .diagnosis-form input:focus,
    .diagnosis-form select:focus,
    .diagnosis-form textarea:focus {
      border-color: #6f9fde;
      box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.1);
    }

    .diagnosis-form button {
      width: 100%;
      min-height: 49px;
      margin-top: 19px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 0;
      border-radius: 6px;
      color: #fff;
      background: var(--blue);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .diagnosis-form button:hover,
    .diagnosis-form button:focus-visible {
      background: var(--blue-deep);
    }

    .diagnosis-form small {
      display: block;
      margin-top: 11px;
      color: #8895a7;
      font-size: 9px;
      line-height: 1.55;
    }

    .site-footer {
      padding: 66px var(--pad) 27px;
      display: grid;
      grid-template-columns: minmax(280px, 0.86fr) minmax(440px, 1.14fr);
      gap: 70px;
      color: #dbe7f6;
      background: #0b1a2e;
    }

    .footer-logo .brand-copy strong {
      color: #fff;
    }

    .footer-logo .brand-copy span {
      color: #8192a9;
    }

    .footer-brand > p {
      max-width: 360px;
      margin: 25px 0 0;
      color: #8293a9;
      font-size: 12px;
      line-height: 1.75;
    }

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

    .footer-links > div {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .footer-links span {
      margin-bottom: 6px;
      color: #677b95;
      font-size: 9px;
      font-weight: 720;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .footer-links a {
      width: max-content;
      color: #bdccdd;
      font-size: 11px;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: #fff;
    }

    .footer-bottom {
      min-height: 58px;
      grid-column: 1 / -1;
      margin-top: 13px;
      padding-top: 21px;
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 20px;
      border-top: 1px solid rgba(202, 221, 244, 0.15);
      color: #687b93;
      font-size: 9px;
    }

    .footer-bottom a {
      color: #9eafc4;
    }

    @media (max-width: 1120px) {
      .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .service-card:nth-child(2) {
        border-right: 0;
      }

      .service-card:nth-child(-n + 2) {
        border-bottom: 1px solid #d8e1ec;
      }

      .solution-row {
        grid-template-columns: 90px minmax(210px, 0.8fr) minmax(260px, 1fr) 100px;
      }

      .fit-section,
      .faq-section {
        grid-template-columns: minmax(250px, 0.6fr) minmax(0, 1.4fr);
        gap: 60px;
      }

      .contact-section {
        grid-template-columns: minmax(0, 0.75fr) minmax(410px, 0.85fr);
        gap: 60px;
      }
    }

    @media (max-width: 880px) {
      .section-shell,
      .solutions-stage,
      .case-intro,
      .fit-section,
      .contact-section {
        padding-top: 82px;
        padding-bottom: 84px;
      }

      .section-heading,
      .solutions-stage-head,
      .case-intro,
      .fit-section,
      .faq-section,
      .contact-section {
        grid-template-columns: 1fr;
        gap: 42px;
      }

      .heading-index {
        display: none;
      }

      .section-heading > div:last-child > p {
        margin-top: 18px;
      }

      .service-grid {
        margin-top: 55px;
      }

      .scope-note {
        grid-template-columns: 1fr;
        gap: 9px;
        padding-top: 19px;
        padding-bottom: 19px;
      }

      .scope-note a {
        margin-top: 5px;
      }

      .solutions-stage-head > p,
      .case-intro > p {
        margin: 0;
      }

      .solution-row {
        min-height: 146px;
        padding: 20px 0;
        grid-template-columns: 90px 1fr auto;
        gap: 10px 18px;
      }

      .solution-desc {
        grid-column: 2 / 4;
      }

      .solution-link {
        grid-column: 3;
        grid-row: 1;
      }

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

      .process-summary > div:nth-child(2) {
        border-right: 0;
      }

      .process-summary > div:nth-child(-n + 2) {
        border-bottom: 1px solid #d8e2ee;
      }

      .fit-columns {
        gap: 13px;
      }

      .faq-heading {
        position: static;
      }

      .site-footer {
        grid-template-columns: 1fr;
        gap: 48px;
      }
    }

    @media (max-width: 620px) {
      .section-shell,
      .solutions-stage,
      .case-intro,
      .fit-section,
      .contact-section {
        padding-top: 68px;
        padding-bottom: 70px;
      }

      .section-heading h2,
      .solutions-stage h2,
      .case-intro h2,
      .fit-section h2,
      .faq-section h2,
      .contact-section h2 {
        font-size: 37px;
        line-height: 1.13;
      }

      .service-grid {
        grid-template-columns: 1fr;
      }

      .service-card {
        min-height: auto;
        padding: 26px 22px 25px;
        border-right: 0;
        border-bottom: 1px solid #d8e1ec;
      }

      .service-card:nth-child(3) {
        border-bottom: 1px solid #d8e1ec;
      }

      .service-card:last-child {
        border-bottom: 0;
      }

      .service-card h3 {
        margin-top: 35px;
      }

      .service-card p {
        min-height: 0;
      }

      .solution-row {
        min-height: 0;
        padding: 25px 0;
        grid-template-columns: 1fr auto;
        gap: 11px 15px;
      }

      .solution-tag {
        grid-column: 1;
      }

      .solution-main {
        grid-column: 1 / -1;
      }

      .solution-desc {
        grid-column: 1 / -1;
      }

      .solution-link {
        grid-column: 2;
        grid-row: 1;
      }

      .solution-row:hover,
      .solution-row:focus-visible {
        padding-inline: 0;
      }

      .solution-featured::before {
        display: none;
      }

      .process-steps li {
        padding: 25px 0;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
      }

      .process-steps em {
        grid-column: 2;
        justify-self: start;
      }

      .process-summary {
        grid-template-columns: 1fr;
      }

      .process-summary > div,
      .process-summary > div:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #d8e2ee;
      }

      .process-summary > div:last-child {
        border-bottom: 0;
      }

      .fit-columns,
      .form-row,
      .footer-links {
        grid-template-columns: 1fr;
      }

      .faq-list summary {
        min-height: 72px;
        grid-template-columns: 28px 1fr;
        gap: 8px;
        font-size: 14px;
      }

      .faq-list details > p {
        margin-left: 36px;
        padding-right: 10px;
      }

      .contact-section {
        gap: 48px;
      }

      .diagnosis-form {
        padding: 24px 20px;
      }

      .diagnosis-form .form-row label + label {
        margin-top: 17px;
      }

      .site-footer {
        padding-top: 52px;
      }

      .footer-links {
        gap: 30px;
      }

      .footer-bottom {
        grid-template-columns: 1fr auto;
      }

      .footer-bottom span:nth-child(2) {
        display: none;
      }
    }

/* option-a style layer 3 */
/* DJI / Insta360 启发的产品发布级现代视觉 */
    :root {
      --page: 1920px;
      --pad: clamp(22px, 5vw, 92px);
      --blue: #1265e8;
      --blue-deep: #0846a9;
      --black: #101318;
      --muted: #697386;
      --line: #e3e7ed;
    }

    html,
    body {
      background: #fff;
    }

    .page {
      position: relative;
      width: 100%;
      max-width: none;
      overflow: hidden;
      border: 0;
      box-shadow: none;
      background: #fff;
    }

    .topbar {
      position: absolute;
      z-index: 20;
      top: 0;
      right: 0;
      left: 0;
      width: 100%;
      height: 72px;
      padding-inline: var(--pad);
      border: 0;
      background: rgba(250, 252, 255, 0.82);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .brand-signal {
      width: 29px;
      height: 29px;
      border-radius: 8px;
      background: #1265e8;
      box-shadow: none;
    }

    .brand-copy strong {
      color: #0e1725;
      font-size: 18px;
      font-weight: 740;
    }

    .brand-copy span {
      color: #718096;
      font-size: 10px;
    }

    .nav {
      gap: 38px;
      color: #29384d;
      font-size: 12px;
      font-weight: 610;
    }

    .nav a::after {
      display: none;
    }

    .nav a:hover,
    .nav a:focus-visible {
      color: var(--blue);
    }

    .header-cta {
      min-height: 38px;
      padding: 0 16px;
      border: 0;
      border-radius: 999px;
      color: #fff;
      background: #111827;
      font-size: 11px;
      font-weight: 650;
    }

    .header-cta:hover,
    .header-cta:focus-visible {
      color: #fff;
      border: 0;
      background: var(--blue);
    }

    .ticker {
      display: none;
    }

    .hero {
      min-height: 1060px;
      padding: 128px var(--pad) 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      color: #101318;
      background:
        radial-gradient(circle at 50% 62%, rgba(65, 139, 241, 0.17), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3fa 70%, #e6edf6 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 72px;
      right: 0;
      left: 0;
      height: 1px;
      background: rgba(18, 38, 65, 0.08);
    }

    .hero-copy {
      z-index: 3;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
    }

    .kicker {
      margin: 0 0 18px;
      color: #5c7392;
      font-size: 10px;
      font-weight: 680;
      letter-spacing: 0.14em;
    }

    h1 {
      max-width: 1080px;
      color: #101318;
      font-size: clamp(62px, 5.7vw, 92px);
      font-weight: 710;
      line-height: 1.02;
      letter-spacing: -0.065em;
    }

    h1 .hit {
      color: #101318;
    }

    .promise {
      max-width: none;
      margin-top: 24px;
      color: #657184;
      font-size: 14px;
      font-weight: 470;
    }

    .promise strong {
      color: #1b2d45;
      font-weight: 650;
    }

    .actions {
      margin-top: 28px;
      justify-content: center;
    }

    .button {
      min-height: 44px;
      padding-inline: 20px;
      gap: 18px;
      border-radius: 999px;
      font-size: 12px;
    }

    .button-primary {
      box-shadow: none;
    }

    .button-secondary {
      border-color: #c8d1dd;
      background: rgba(255, 255, 255, 0.58);
    }

    .product-stage {
      position: relative;
      z-index: 2;
      width: min(100%, 1250px);
      height: 610px;
      margin-top: 54px;
    }

    .stage-glow {
      position: absolute;
      top: 9%;
      left: 50%;
      width: 72%;
      height: 62%;
      border-radius: 50%;
      background: rgba(36, 119, 238, 0.22);
      filter: blur(80px);
      transform: translateX(-50%);
    }

    .system-window {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 50%;
      width: min(100%, 1100px);
      height: 510px;
      overflow: hidden;
      border: 1px solid rgba(108, 129, 157, 0.35);
      border-radius: 18px;
      background: #f9fbfe;
      box-shadow:
        0 42px 100px rgba(40, 71, 110, 0.23),
        0 4px 18px rgba(40, 71, 110, 0.1);
      transform: translateX(-50%);
    }

    .system-bar {
      height: 52px;
      padding: 0 19px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      border-bottom: 1px solid #e3e8ef;
      color: #6d7d91;
      background: rgba(255, 255, 255, 0.94);
      font-size: 9px;
      font-weight: 650;
      letter-spacing: 0.04em;
    }

    .system-brand {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #26405f;
    }

    .system-brand i {
      width: 17px;
      height: 17px;
      border-radius: 5px;
      background: var(--blue);
      box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.08);
    }

    .system-context {
      padding: 6px 10px;
      border-radius: 999px;
      color: #47617f;
      background: #f0f4f9;
    }

    .system-user {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .system-user i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #24b47e;
    }

    .system-body {
      height: calc(100% - 52px);
      display: grid;
      grid-template-columns: 66px 1fr;
    }

    .system-side {
      padding-top: 27px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      border-right: 1px solid #e4e9f0;
      background: #f3f6fa;
    }

    .system-side span {
      width: 18px;
      height: 18px;
      border: 1px solid #bdc9d8;
      border-radius: 5px;
    }

    .system-side .side-active {
      border-color: var(--blue);
      background: var(--blue);
      box-shadow: 0 7px 16px rgba(18, 101, 232, 0.22);
    }

    .system-content {
      padding: 29px 31px 31px;
    }

    .system-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .system-heading span,
    .system-heading small,
    .system-heading strong {
      display: block;
    }

    .system-heading small {
      color: #8390a1;
      font-size: 9px;
    }

    .system-heading strong {
      margin-top: 7px;
      color: #172e4b;
      font-size: 17px;
      font-weight: 690;
    }

    .system-heading b {
      color: #8795a7;
      font-size: 9px;
      font-weight: 580;
    }

    .system-metrics {
      margin-top: 22px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .system-metrics > div {
      min-height: 105px;
      padding: 17px;
      border: 1px solid #e1e7ef;
      border-radius: 10px;
      background: #fff;
    }

    .system-metrics small,
    .system-metrics strong,
    .system-metrics span {
      display: block;
    }

    .system-metrics small {
      color: #8391a3;
      font-size: 8px;
    }

    .system-metrics strong {
      margin-top: 10px;
      color: #183251;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.04em;
    }

    .system-metrics span {
      margin-top: 5px;
      color: #95a1b1;
      font-size: 8px;
    }

    .system-metrics .metric-blue {
      border-color: #1265e8;
      color: #fff;
      background: #1265e8;
      box-shadow: 0 15px 30px rgba(18, 101, 232, 0.2);
    }

    .system-metrics .metric-blue small,
    .system-metrics .metric-blue span {
      color: #cfe1fb;
    }

    .system-metrics .metric-blue strong {
      color: #fff;
    }

    .system-panels {
      margin-top: 13px;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
      gap: 12px;
    }

    .flow-panel,
    .activity-panel {
      min-height: 185px;
      padding: 17px;
      border: 1px solid #e1e7ef;
      border-radius: 10px;
      background: #fff;
    }

    .panel-title {
      display: flex;
      justify-content: space-between;
      color: #253f5e;
      font-size: 9px;
      font-weight: 650;
    }

    .panel-title small {
      color: #24a06b;
      font-size: 7px;
      letter-spacing: 0.12em;
    }

    .flow-line {
      position: relative;
      margin-top: 27px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .flow-line::before {
      content: "";
      position: absolute;
      top: 13px;
      right: 12%;
      left: 12%;
      height: 1px;
      background: #cdd8e6;
    }

    .flow-line > span {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .flow-line i,
    .flow-line b,
    .flow-line em {
      display: block;
      font-style: normal;
    }

    .flow-line i {
      width: 27px;
      height: 27px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #bbcaDC;
      border-radius: 50%;
      color: #526b89;
      background: #fff;
      font-size: 7px;
    }

    .flow-line > span:nth-child(-n + 2) i {
      border-color: var(--blue);
      color: #fff;
      background: var(--blue);
    }

    .flow-line b {
      margin-top: 11px;
      color: #344d69;
      font-size: 8px;
      font-weight: 630;
    }

    .flow-line em {
      margin-top: 5px;
      color: #96a1b0;
      font-size: 7px;
    }

    .activity-panel ul {
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .activity-panel li {
      padding: 9px 0;
      display: grid;
      grid-template-columns: 9px 1fr;
      gap: 8px;
      align-items: center;
      border-bottom: 1px solid #edf1f5;
    }

    .activity-panel li:last-child {
      border-bottom: 0;
    }

    .activity-panel li > i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #77a9ea;
    }

    .activity-panel li span,
    .activity-panel li b,
    .activity-panel li small {
      display: block;
    }

    .activity-panel li b {
      color: #3e556f;
      font-size: 8px;
      font-weight: 620;
    }

    .activity-panel li small {
      margin-top: 3px;
      color: #9aa5b3;
      font-size: 7px;
    }

    .budget-float {
      position: absolute;
      z-index: 3;
      bottom: 39px;
      left: 0;
      width: 235px;
      padding: 20px 22px;
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 14px;
      color: #20354f;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 20px 45px rgba(50, 79, 116, 0.14);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .budget-float > span,
    .budget-float strong,
    .budget-float small {
      display: block;
    }

    .budget-float > span {
      color: #6e7e91;
      font-size: 9px;
      font-weight: 650;
    }

    .budget-float strong {
      margin-top: 6px;
      color: var(--blue);
      font-size: 33px;
      font-weight: 720;
      letter-spacing: -0.05em;
    }

    .budget-float em {
      font-size: 11px;
      font-style: normal;
      letter-spacing: 0;
    }

    .budget-float small {
      margin-top: 6px;
      color: #8190a3;
      font-size: 8px;
    }

    .stage-caption {
      position: absolute;
      z-index: 3;
      right: 0;
      bottom: 51px;
      text-align: right;
    }

    .stage-caption span,
    .stage-caption strong {
      display: block;
    }

    .stage-caption span {
      color: #77879a;
      font-size: 9px;
    }

    .stage-caption strong {
      margin-top: 6px;
      color: #243a56;
      font-size: 12px;
      font-weight: 650;
    }

    .hero-facts {
      width: min(100%, 1100px);
      min-height: 70px;
      margin-top: auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(78, 104, 136, 0.2);
    }

    .hero-facts span {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      border-right: 1px solid rgba(78, 104, 136, 0.2);
      color: #53657a;
      font-size: 10px;
    }

    .hero-facts span:last-child {
      border-right: 0;
    }

    .hero-facts b {
      color: #8292a5;
      font-size: 8px;
    }

    .services-section {
      padding-top: 138px;
      padding-bottom: 145px;
      border: 0;
    }

    .section-heading {
      grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1.58fr);
      gap: clamp(50px, 9vw, 170px);
    }

    .section-heading h2,
    .solutions-stage h2,
    .case-intro h2,
    .fit-section h2,
    .faq-section h2,
    .contact-section h2 {
      font-size: clamp(48px, 4.4vw, 72px);
      font-weight: 690;
      line-height: 1.07;
      letter-spacing: -0.058em;
    }

    .section-heading > div:last-child > p,
    .solutions-stage-head > p,
    .case-intro > p,
    .fit-intro > p,
    .faq-heading > p,
    .contact-copy > p {
      font-size: 14px;
      line-height: 1.85;
    }

    .heading-index {
      color: #e8edf3;
    }

    .service-grid {
      margin-top: 86px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      border: 0;
    }

    .service-card {
      position: relative;
      min-height: 430px;
      overflow: hidden;
      padding: 38px 40px;
      border: 0 !important;
      border-radius: 20px;
      background:
        radial-gradient(circle at 86% 12%, rgba(99, 157, 237, 0.15), transparent 30%),
        #f5f7fa;
    }

    .service-card::after {
      content: "";
      position: absolute;
      right: -45px;
      bottom: -70px;
      width: 245px;
      height: 245px;
      border: 1px solid rgba(104, 139, 183, 0.22);
      border-radius: 48px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(221, 232, 246, 0.45));
      box-shadow:
        -28px -24px 0 rgba(255, 255, 255, 0.55),
        -29px -25px 0 1px rgba(104, 139, 183, 0.13);
      transform: rotate(-12deg);
    }

    .service-card:nth-child(2)::after {
      border-radius: 50%;
      transform: none;
    }

    .service-card:nth-child(3) {
      color: #fff;
      background:
        radial-gradient(circle at 90% 10%, rgba(71, 137, 233, 0.35), transparent 31%),
        #111b2a;
    }

    .service-card:nth-child(3) h3 {
      color: #fff;
    }

    .service-card:nth-child(3) p,
    .service-card:nth-child(3) li {
      color: #aebcd0;
    }

    .service-card:nth-child(3) ul {
      border-top-color: rgba(255, 255, 255, 0.15);
    }

    .service-card:nth-child(4) {
      background:
        radial-gradient(circle at 84% 15%, rgba(96, 171, 255, 0.28), transparent 31%),
        #eaf3ff;
    }

    .service-card h3,
    .service-card p,
    .service-card ul,
    .service-no {
      position: relative;
      z-index: 2;
    }

    .service-card h3 {
      margin-top: 76px;
      font-size: 31px;
      font-weight: 680;
    }

    .service-card p {
      max-width: 430px;
      min-height: 0;
      font-size: 13px;
    }

    .service-card ul {
      max-width: 350px;
      margin-top: 34px;
    }

    .scope-note {
      min-height: 88px;
      margin-top: 16px;
      border: 0;
      border-radius: 16px;
      background: #f5f7fa;
    }

    .solutions-stage {
      padding-top: 135px;
      padding-bottom: 145px;
      background: #080b10;
    }

    .solutions-stage-head {
      grid-template-columns: 1fr;
      gap: 0;
      justify-items: center;
      text-align: center;
    }

    .solutions-stage-head > p {
      max-width: 650px;
      margin-top: 26px;
      color: #8f9bad;
    }

    .solution-list {
      margin-top: 78px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      border: 0;
    }

    .solution-row {
      position: relative;
      min-height: 360px;
      overflow: hidden;
      padding: 39px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0;
      border: 0;
      border-radius: 22px;
      background:
        radial-gradient(circle at 88% 74%, rgba(55, 128, 239, 0.29), transparent 30%),
        #141923;
    }

    .solution-row::after {
      content: "";
      position: absolute;
      right: -32px;
      bottom: -70px;
      width: 58%;
      height: 230px;
      border: 1px solid rgba(142, 174, 218, 0.2);
      border-radius: 18px 18px 0 0;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 34px 34px,
        rgba(117, 160, 221, 0.08);
      box-shadow: -20px -22px 45px rgba(0, 0, 0, 0.2);
      transform: perspective(650px) rotateX(4deg) rotateY(-10deg);
    }

    .solution-row:nth-child(3) {
      color: #10223a;
      background:
        radial-gradient(circle at 86% 72%, rgba(51, 123, 226, 0.19), transparent 34%),
        #f1f4f8;
    }

    .solution-row:nth-child(3) .solution-main strong {
      color: #142a47;
    }

    .solution-row:nth-child(3) .solution-main em,
    .solution-row:nth-child(3) .solution-desc {
      color: #68788e;
    }

    .solution-row:nth-child(3) .solution-tag {
      border-color: #bfd0e6;
      color: #3b668f;
    }

    .solution-row:nth-child(3) .solution-link {
      color: var(--blue);
    }

    .solution-row:hover,
    .solution-row:focus-visible {
      padding: 39px;
      background-color: inherit;
    }

    .solution-featured {
      min-height: 515px;
      grid-column: 1 / -1;
      padding: 52px;
      background:
        radial-gradient(circle at 69% 64%, rgba(47, 133, 255, 0.55), transparent 29%),
        linear-gradient(125deg, #132139 0%, #0c111a 58%, #102443 100%);
    }

    .solution-featured::before {
      display: none;
    }

    .solution-featured::after {
      right: 5%;
      bottom: -55px;
      width: 52%;
      height: 390px;
      border-color: rgba(156, 195, 248, 0.3);
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(145deg, rgba(87, 151, 239, 0.2), rgba(11, 22, 38, 0.5));
    }

    .solution-tag,
    .solution-main,
    .solution-desc,
    .solution-link {
      position: relative;
      z-index: 2;
    }

    .solution-main {
      margin-top: 33px;
    }

    .solution-main strong {
      font-size: 31px;
      font-weight: 680;
    }

    .solution-main em {
      margin-top: 8px;
    }

    .solution-desc {
      max-width: 420px;
      margin-top: 22px;
      font-size: 12px;
    }

    .solution-link {
      margin-top: auto;
      justify-self: auto;
    }

    .case-intro {
      padding-top: 135px;
      padding-bottom: 66px;
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      background: #fff;
    }

    .case-intro > p {
      max-width: 650px;
      margin: 24px 0 0;
    }

    .proof-rail {
      padding: 0 var(--pad) 120px;
      gap: 16px;
      background: #fff;
    }

    .case-strip {
      min-height: 420px;
      padding: 36px;
      border: 0 !important;
      border-radius: 20px;
      background:
        radial-gradient(circle at 78% 33%, rgba(75, 148, 244, 0.26), transparent 27%),
        #eef4fb;
      box-shadow: none;
    }

    .case-strip:nth-child(2) {
      color: #fff;
      background:
        radial-gradient(circle at 72% 34%, rgba(32, 117, 234, 0.45), transparent 26%),
        #101a2a;
    }

    .case-strip:nth-child(2) .case-copy strong {
      color: #fff;
    }

    .case-strip:nth-child(2) .case-copy p,
    .case-strip:nth-child(2) .case-no {
      color: #aebed2;
    }

    .case-strip:nth-child(3) {
      background:
        radial-gradient(circle at 70% 31%, rgba(29, 111, 229, 0.36), transparent 25%),
        #dfeafb;
    }

    .case-strip::after {
      content: "";
      position: absolute;
      top: 83px;
      right: -22px;
      width: 72%;
      height: 210px;
      border: 1px solid rgba(89, 126, 176, 0.22);
      border-radius: 16px;
      background:
        linear-gradient(90deg, rgba(89, 126, 176, 0.11) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(rgba(89, 126, 176, 0.11) 1px, transparent 1px) 0 0 / 28px 28px,
        rgba(255, 255, 255, 0.34);
      transform: rotate(-6deg);
    }

    .case-strip::before {
      display: none;
    }

    .case-copy {
      z-index: 2;
      min-height: 100%;
    }

    .case-no {
      padding: 0;
    }

    .case-copy strong {
      font-size: 27px;
    }

    .case-arrow {
      z-index: 3;
    }

    .more-proof {
      padding-top: 125px;
      padding-bottom: 130px;
      background: #f4f6f8;
    }

    .more-proof h2 {
      font-size: clamp(46px, 4vw, 66px);
    }

    .case-ledger {
      border: 0;
      border-radius: 18px;
      box-shadow: none;
    }

    .process-section {
      padding-top: 135px;
      padding-bottom: 140px;
    }

    .process-summary {
      border: 0;
      border-radius: 16px;
      background: #f4f6f8;
    }

    .fit-section {
      padding-top: 135px;
      padding-bottom: 140px;
      background: #0d1118;
    }

    .fit-intro h2 {
      color: #fff;
    }

    .fit-intro > p {
      color: #8997aa;
    }

    .fit-card {
      border: 0;
      border-radius: 18px;
      background: #171d27;
    }

    .fit-label,
    .fit-positive .fit-label {
      border-bottom-color: rgba(255, 255, 255, 0.09);
      color: #a9c7ef;
      background: transparent;
    }

    .fit-card li {
      border-bottom-color: rgba(255, 255, 255, 0.09);
    }

    .fit-card strong {
      color: #f0f4f9;
    }

    .fit-card li span {
      color: #8997aa;
    }

    .faq-section {
      padding-top: 135px;
      padding-bottom: 140px;
    }

    .contact-section {
      margin: 0 16px 16px;
      padding-top: 120px;
      padding-bottom: 125px;
      border-radius: 24px;
      background:
        radial-gradient(circle at 85% 14%, rgba(104, 175, 255, 0.35), transparent 28%),
        #0d5fd4;
    }

    .diagnosis-form {
      border: 0;
      border-radius: 18px;
      box-shadow: 0 35px 90px rgba(4, 35, 78, 0.24);
    }

    .site-footer {
      padding-top: 80px;
      background: #fff;
      color: #263b55;
    }

    .footer-logo .brand-copy strong {
      color: #14263e;
    }

    .footer-logo .brand-copy span,
    .footer-brand > p,
    .footer-links span,
    .footer-bottom {
      color: #8190a3;
    }

    .footer-links a {
      color: #52657e;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: var(--blue);
    }

    .footer-bottom {
      border-top-color: #e2e7ee;
    }

    @media (max-width: 1080px) {
      .hero {
        min-height: 980px;
      }

      .product-stage {
        height: 550px;
      }

      .system-window {
        width: 94%;
      }

      .budget-float {
        left: 1%;
      }

      .stage-caption {
        right: 1%;
      }

      .solution-featured::after {
        right: -2%;
      }
    }

    @media (max-width: 880px) {
      .topbar {
        position: absolute;
      }

      .hero {
        min-height: 930px;
        padding-top: 118px;
      }

      h1 {
        font-size: clamp(54px, 9vw, 74px);
      }

      .product-stage {
        height: 525px;
        margin-top: 48px;
      }

      .system-window {
        height: 455px;
      }

      .system-panels {
        grid-template-columns: 1fr;
      }

      .activity-panel {
        display: none;
      }

      .budget-float {
        bottom: 7px;
      }

      .stage-caption {
        bottom: 20px;
      }

      .service-grid,
      .solution-list {
        grid-template-columns: 1fr;
      }

      .solution-featured {
        grid-column: 1;
      }

      .solution-featured::after {
        width: 62%;
      }

      .proof-rail {
        grid-template-columns: 1fr;
      }

      .case-strip {
        min-height: 360px;
      }
    }

    @media (max-width: 620px) {
      :root {
        --pad: 20px;
      }

      .topbar {
        height: 64px;
      }

      .header-cta {
        min-height: 34px;
      }

      .hero {
        min-height: 820px;
        padding-top: 102px;
      }

      .hero::before {
        top: 64px;
      }

      .kicker {
        font-size: 8px;
      }

      h1 {
        font-size: clamp(43px, 12vw, 56px);
        line-height: 1.04;
      }

      .promise {
        max-width: 330px;
        font-size: 12px;
        line-height: 1.65;
      }

      .product-stage {
        height: 425px;
        margin-top: 38px;
      }

      .stage-glow {
        width: 100%;
      }

      .system-window {
        width: 100%;
        height: 350px;
        border-radius: 13px;
      }

      .system-bar {
        height: 42px;
        padding-inline: 12px;
        grid-template-columns: 1fr auto;
      }

      .system-context {
        display: none;
      }

      .system-body {
        height: calc(100% - 42px);
        grid-template-columns: 40px 1fr;
      }

      .system-side {
        gap: 16px;
      }

      .system-side span {
        width: 14px;
        height: 14px;
      }

      .system-content {
        padding: 18px 14px;
      }

      .system-heading strong {
        font-size: 13px;
      }

      .system-heading b {
        display: none;
      }

      .system-metrics {
        gap: 6px;
      }

      .system-metrics > div {
        min-height: 82px;
        padding: 10px 8px;
      }

      .system-metrics strong {
        font-size: 20px;
      }

      .system-metrics span {
        display: none;
      }

      .flow-panel {
        min-height: 143px;
        padding: 12px 8px;
      }

      .flow-line {
        margin-top: 20px;
      }

      .flow-line b {
        font-size: 7px;
      }

      .budget-float {
        bottom: 5px;
        left: 0;
        width: 180px;
        padding: 14px 15px;
        border-radius: 11px;
      }

      .budget-float strong {
        font-size: 27px;
      }

      .stage-caption {
        display: none;
      }

      .hero-facts {
        min-height: 58px;
      }

      .hero-facts span {
        padding: 0 7px;
        gap: 0;
        text-align: center;
        font-size: 8px;
      }

      .hero-facts b {
        display: none;
      }

      .services-section,
      .solutions-stage,
      .case-intro,
      .process-section,
      .fit-section,
      .faq-section {
        padding-top: 92px;
        padding-bottom: 96px;
      }

      .section-heading h2,
      .solutions-stage h2,
      .case-intro h2,
      .fit-section h2,
      .faq-section h2,
      .contact-section h2 {
        font-size: 39px;
      }

      .service-grid {
        gap: 12px;
      }

      .service-card {
        min-height: 390px;
        padding: 28px 25px;
      }

      .service-card h3 {
        margin-top: 63px;
        font-size: 27px;
      }

      .scope-note {
        border-radius: 13px;
      }

      .solution-row,
      .solution-featured {
        min-height: 420px;
        padding: 28px;
        border-radius: 17px;
      }

      .solution-row:hover,
      .solution-row:focus-visible {
        padding: 28px;
      }

      .solution-featured::after,
      .solution-row::after {
        right: -23%;
        width: 90%;
      }

      .solution-main strong {
        font-size: 27px;
      }

      .case-intro {
        padding-bottom: 48px;
      }

      .proof-rail {
        padding-bottom: 90px;
      }

      .case-strip {
        min-height: 330px;
        border-radius: 17px;
      }

      .more-proof {
        padding-top: 92px;
        padding-bottom: 96px;
      }

      .contact-section {
        margin: 0 8px 8px;
        padding-top: 88px;
        padding-bottom: 92px;
        border-radius: 19px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        scroll-behavior: auto !important;
      }
    }

/* Extracted verbatim from the final option-a.html; homepage-only cascade. */

/* option-a style layer 4 */
/* 几何运动场：图形参与滚动节奏，不承担图片占位 */
    .motion-scene {
      position: relative;
      isolation: isolate;
      overflow: clip;
    }

    .motion-scene > *:not(.motion-geometry) {
      position: relative;
      z-index: 2;
    }

    .motion-geometry {
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .geo {
      position: absolute;
      display: block;
      will-change: transform;
      transform: translate3d(0, 0, 0);
      transform-origin: center;
    }

    .geo-disc,
    .geo-core {
      border-radius: 50%;
    }

    .geo-square {
      border-radius: 22%;
    }

    .geo-capsule {
      border-radius: 999px;
    }

    .services-section {
      background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.95), transparent 32%),
        linear-gradient(145deg, #edf3fa 0%, #f7f9fc 48%, #e9f1fb 100%);
    }

    .geo-light-disc {
      top: 6%;
      right: -8%;
      width: clamp(300px, 36vw, 640px);
      aspect-ratio: 1;
      background:
        radial-gradient(circle at 36% 31%, rgba(255, 255, 255, 0.96) 0 8%, transparent 9%),
        linear-gradient(140deg, rgba(80, 155, 255, 0.88), rgba(35, 92, 212, 0.13));
      box-shadow: 0 60px 130px rgba(37, 102, 195, 0.18);
      opacity: 0.72;
    }

    .geo-light-square {
      bottom: 8%;
      left: -5%;
      width: clamp(180px, 22vw, 360px);
      aspect-ratio: 1;
      background: linear-gradient(145deg, rgba(107, 78, 235, 0.22), rgba(79, 157, 244, 0.05));
      transform: rotate(24deg);
      box-shadow: 35px 45px 95px rgba(74, 76, 177, 0.09);
    }

    .geo-light-capsule {
      top: 43%;
      left: 43%;
      width: clamp(150px, 18vw, 280px);
      height: clamp(58px, 7vw, 105px);
      background: linear-gradient(90deg, rgba(36, 112, 230, 0.15), rgba(255, 255, 255, 0.6));
      transform: rotate(-18deg);
      opacity: 0.75;
    }

    .geo-light-core {
      top: 19%;
      left: 7%;
      width: clamp(28px, 3.2vw, 52px);
      aspect-ratio: 1;
      background: #1968e7;
      box-shadow:
        0 0 0 18px rgba(25, 104, 231, 0.08),
        0 20px 50px rgba(25, 104, 231, 0.25);
    }

    .services-section .section-heading {
      min-height: 380px;
      align-items: center;
    }

    .services-section .section-heading > div:last-child {
      max-width: 910px;
    }

    .services-section .heading-index {
      color: rgba(47, 96, 160, 0.12);
    }

    .service-grid {
      position: relative;
      z-index: 3;
      margin-top: 48px;
      gap: 18px;
    }

    .service-card {
      min-height: 360px;
      padding: 37px 39px;
      border: 0;
      border-radius: 26px;
      background: rgba(255, 255, 255, 0.7);
      box-shadow:
        0 22px 55px rgba(55, 86, 126, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      transition: transform 320ms cubic-bezier(.2,.72,.2,1), background 240ms ease, box-shadow 240ms ease;
    }

    .service-card::after {
      display: none;
    }

    .service-card:nth-child(2) {
      background: rgba(236, 245, 255, 0.76);
    }

    .service-card:nth-child(3) {
      color: #fff;
      background: rgba(18, 31, 51, 0.91);
      box-shadow: 0 28px 65px rgba(18, 31, 51, 0.16);
    }

    .service-card:nth-child(4) {
      background: rgba(221, 237, 255, 0.8);
    }

    .service-card:hover,
    .service-card:focus-within {
      background: rgba(255, 255, 255, 0.9);
      box-shadow:
        0 35px 80px rgba(55, 86, 126, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
      transform: translateY(-7px) scale(1.008);
    }

    .service-card:nth-child(3):hover,
    .service-card:nth-child(3):focus-within {
      background: rgba(21, 39, 65, 0.96);
    }

    .service-card h3 {
      margin-top: 56px;
    }

    .service-card ul {
      border: 0;
    }

    .service-card li::before {
      top: 16px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .scope-note {
      position: relative;
      z-index: 3;
      margin-top: 18px;
      border: 0;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.68);
      box-shadow: 0 18px 45px rgba(55, 86, 126, 0.06);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .solutions-stage {
      background:
        radial-gradient(circle at 72% 18%, rgba(45, 99, 184, 0.16), transparent 27%),
        linear-gradient(145deg, #070a0f 0%, #0b111c 52%, #080b11 100%);
    }

    .geo-dark-disc {
      top: 10%;
      left: -13%;
      width: clamp(360px, 43vw, 760px);
      aspect-ratio: 1;
      background: linear-gradient(145deg, rgba(45, 124, 242, 0.9), rgba(16, 42, 89, 0.14));
      box-shadow: 0 80px 180px rgba(16, 85, 205, 0.24);
      opacity: 0.68;
    }

    .geo-dark-square {
      top: 38%;
      right: -5%;
      width: clamp(210px, 26vw, 430px);
      aspect-ratio: 1;
      background: linear-gradient(145deg, rgba(87, 62, 220, 0.68), rgba(24, 102, 224, 0.1));
      box-shadow: -45px 60px 140px rgba(55, 45, 184, 0.16);
      transform: rotate(31deg);
      opacity: 0.65;
    }

    .geo-dark-capsule {
      bottom: 13%;
      left: 29%;
      width: clamp(180px, 23vw, 380px);
      height: clamp(70px, 8vw, 125px);
      background: linear-gradient(90deg, rgba(42, 112, 230, 0.48), rgba(99, 65, 212, 0.16));
      transform: rotate(14deg);
      filter: blur(0.2px);
    }

    .geo-dark-core {
      top: 23%;
      right: 12%;
      width: clamp(34px, 4vw, 62px);
      aspect-ratio: 1;
      background: #2d7df0;
      box-shadow:
        0 0 0 23px rgba(45, 125, 240, 0.09),
        0 30px 70px rgba(45, 125, 240, 0.35);
    }

    .solutions-stage-head {
      position: relative;
      z-index: 3;
      min-height: 410px;
      align-content: center;
    }

    .solution-list {
      position: relative;
      z-index: 3;
      margin-top: 32px;
      gap: 18px;
    }

    .solution-row,
    .solution-featured {
      min-height: 330px;
      padding: 40px;
      border: 0;
      border-radius: 27px;
      background: rgba(255, 255, 255, 0.065);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      transition: transform 340ms cubic-bezier(.2,.72,.2,1), background 240ms ease;
    }

    .solution-featured {
      min-height: 385px;
      background: rgba(26, 51, 91, 0.48);
    }

    .solution-row:nth-child(3) {
      color: #fff;
      background: rgba(255, 255, 255, 0.085);
    }

    .solution-row::after,
    .solution-featured::after {
      display: none;
    }

    .solution-row:hover,
    .solution-row:focus-visible,
    .solution-featured:hover,
    .solution-featured:focus-visible {
      padding: 40px;
      background: rgba(255, 255, 255, 0.12);
      transform: translateY(-7px);
    }

    .solution-main strong,
    .solution-row:nth-child(3) .solution-main strong {
      color: #fff;
    }

    .solution-main em,
    .solution-desc,
    .solution-row:nth-child(3) .solution-main em,
    .solution-row:nth-child(3) .solution-desc {
      color: #aebdd0;
    }

    .solution-tag,
    .solution-row:nth-child(3) .solution-tag {
      border: 0;
      color: #b9d5fa;
      background: rgba(72, 139, 239, 0.17);
    }

    .solution-link,
    .solution-row:nth-child(3) .solution-link {
      color: #91bff8;
    }

    .motion-ready .service-card,
    .motion-ready .solution-row {
      opacity: 0;
      transform: translateY(42px) scale(0.975);
    }

    .motion-ready .service-card.is-visible,
    .motion-ready .solution-row.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      transition:
        opacity 700ms cubic-bezier(.2,.72,.2,1),
        transform 800ms cubic-bezier(.2,.72,.2,1),
        background 240ms ease,
        box-shadow 240ms ease;
    }

    .motion-ready .service-card.is-visible:hover,
    .motion-ready .service-card.is-visible:focus-within,
    .motion-ready .solution-row.is-visible:hover,
    .motion-ready .solution-row.is-visible:focus-visible {
      transform: translateY(-7px) scale(1.008);
    }

    .motion-ready .service-card:nth-child(2),
    .motion-ready .solution-row:nth-child(2) {
      transition-delay: 80ms;
    }

    .motion-ready .service-card:nth-child(3),
    .motion-ready .solution-row:nth-child(3) {
      transition-delay: 140ms;
    }

    .motion-ready .service-card:nth-child(4),
    .motion-ready .solution-row:nth-child(4) {
      transition-delay: 200ms;
    }

    @media (max-width: 760px) {
      .motion-geometry {
        opacity: 0.62;
      }

      .geo-light-disc {
        top: 4%;
        right: -42%;
      }

      .geo-light-square {
        bottom: 19%;
        left: -30%;
      }

      .geo-light-capsule,
      .geo-dark-capsule {
        display: none;
      }

      .geo-dark-disc {
        top: 3%;
        left: -65%;
      }

      .geo-dark-square {
        top: 55%;
        right: -42%;
      }

      .services-section .section-heading,
      .solutions-stage-head {
        min-height: 330px;
      }

      .service-card,
      .solution-row,
      .solution-featured {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }

      .service-card:hover,
      .service-card:focus-within,
      .solution-row:hover,
      .solution-row:focus-visible {
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .geo {
        transform: none !important;
      }

      .service-card,
      .solution-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

/* option-a style layer 5 */
/* 全页统一：几何元素既是视觉识别，也是交互反馈 */
    .product-stage {
      display: none;
    }

    .hero {
      min-height: 940px;
      padding-bottom: 34px;
      background:
        radial-gradient(circle at 50% 56%, rgba(68, 145, 247, 0.2), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #edf3fa 100%);
    }

    .hero-copy {
      flex: 0 0 auto;
    }

    .hero-kinetic {
      position: relative;
      z-index: 2;
      width: min(100%, 1120px);
      height: 430px;
      margin-top: 48px;
      overflow: clip;
      border-radius: 34px;
      background: rgba(255, 255, 255, 0.36);
      box-shadow:
        0 40px 100px rgba(45, 82, 128, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hero-geo-disc {
      top: -31%;
      right: -1%;
      width: 58%;
      aspect-ratio: 1;
      background: linear-gradient(145deg, #1470f2, rgba(87, 157, 249, 0.22));
      box-shadow: 0 50px 110px rgba(19, 100, 226, 0.24);
      opacity: 0.88;
    }

    .hero-geo-square {
      bottom: -33%;
      left: 2%;
      width: 38%;
      aspect-ratio: 1;
      border-radius: 24%;
      background: linear-gradient(145deg, rgba(107, 72, 227, 0.76), rgba(50, 118, 229, 0.16));
      transform: rotate(28deg);
      box-shadow: 35px 55px 115px rgba(61, 61, 176, 0.16);
    }

    .hero-geo-capsule {
      top: 19%;
      left: 31%;
      width: 33%;
      height: 22%;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(188, 215, 251, 0.3));
      transform: rotate(-14deg);
      opacity: 0.9;
    }

    .hero-geo-core {
      top: 16%;
      left: 13%;
      width: 46px;
      aspect-ratio: 1;
      background: #111827;
      box-shadow:
        0 0 0 22px rgba(17, 24, 39, 0.07),
        0 25px 60px rgba(17, 24, 39, 0.22);
    }

    .kinetic-center {
      position: absolute !important;
      z-index: 3 !important;
      top: 50%;
      left: 50%;
      min-width: 390px;
      padding: 31px 36px 34px;
      border-radius: 24px;
      color: #fff;
      background: rgba(10, 20, 35, 0.9);
      box-shadow: 0 36px 80px rgba(11, 28, 52, 0.24);
      text-align: center;
      transform: translate(-50%, -50%);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .kinetic-center span,
    .kinetic-center strong {
      display: block;
    }

    .kinetic-center span {
      color: #8eadd5;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.15em;
    }

    .kinetic-center strong {
      margin-top: 14px;
      font-size: 27px;
      font-weight: 660;
      line-height: 1.28;
      letter-spacing: -0.03em;
    }

    .kinetic-label {
      position: absolute !important;
      z-index: 4 !important;
      padding: 10px 13px;
      border-radius: 999px;
      color: #344a67;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 14px 35px rgba(50, 78, 112, 0.1);
      font-size: 10px;
      font-weight: 650;
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
    }

    .kinetic-label b {
      margin-right: 7px;
      color: #7e91a9;
      font-size: 8px;
    }

    .kinetic-label-a {
      top: 25%;
      left: 8%;
    }

    .kinetic-label-b {
      top: 14%;
      right: 9%;
    }

    .kinetic-label-c {
      right: 16%;
      bottom: 13%;
    }

    .hero-facts {
      min-height: 58px;
      margin-top: 28px;
      gap: 10px;
      border: 0;
    }

    .hero-facts span {
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.58);
    }

    .case-intro {
      background:
        radial-gradient(circle at 83% 24%, rgba(82, 151, 240, 0.11), transparent 22%),
        #fff;
    }

    .proof-rail {
      background: #fff;
    }

    .case-strip {
      min-height: 410px;
      overflow: hidden;
      border-radius: 26px;
      background: #edf3fa;
      box-shadow: 0 24px 60px rgba(46, 75, 112, 0.07);
      transform: scale(0.97);
      transition:
        transform 460ms cubic-bezier(.2,.72,.2,1),
        background 360ms ease,
        box-shadow 360ms ease;
    }

    .case-strip:nth-child(2) {
      background: #111b2a;
    }

    .case-strip:nth-child(3) {
      background: #e2ecfa;
    }

    .case-strip::after {
      top: 76px;
      right: -19%;
      width: 82%;
      height: 235px;
      border: 0;
      border-radius: 46px;
      background: linear-gradient(145deg, rgba(122, 174, 241, 0.52), rgba(255, 255, 255, 0.26));
      box-shadow: -28px 32px 65px rgba(57, 105, 171, 0.13);
      transform: rotate(-9deg) scale(0.82);
      transition:
        transform 580ms cubic-bezier(.16,.78,.18,1),
        border-radius 500ms ease,
        background 420ms ease;
    }

    .case-strip:nth-child(2)::after {
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(43, 124, 238, 0.84), rgba(92, 67, 206, 0.23));
      box-shadow: -30px 38px 80px rgba(11, 72, 164, 0.28);
      transform: rotate(0deg) scale(0.76);
    }

    .case-strip:nth-child(3)::after {
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(36, 116, 231, 0.63), rgba(109, 71, 222, 0.18));
      transform: rotate(19deg) scale(0.8);
    }

    .case-strip:hover,
    .case-strip:focus-visible {
      background: #e7f1ff;
      box-shadow: 0 40px 90px rgba(35, 77, 132, 0.15);
      transform: translateY(-10px) scale(1);
    }

    .case-strip:nth-child(2):hover,
    .case-strip:nth-child(2):focus-visible {
      background: #172741;
    }

    .case-strip:hover::after,
    .case-strip:focus-visible::after {
      border-radius: 26px;
      background: linear-gradient(145deg, #1772ef, rgba(97, 159, 242, 0.38));
      transform: rotate(4deg) scale(1.08);
    }

    .case-strip:nth-child(2):hover::after,
    .case-strip:nth-child(2):focus-visible::after {
      border-radius: 36%;
      background: linear-gradient(145deg, #2b7df2, #6848da);
      transform: rotate(28deg) scale(1.08);
    }

    .case-strip:nth-child(3):hover::after,
    .case-strip:nth-child(3):focus-visible::after {
      border-radius: 44px;
      background: linear-gradient(90deg, #146ae7, #7858e2);
      transform: rotate(-7deg) scale(1.1);
    }

    .case-copy,
    .case-arrow {
      position: relative;
      z-index: 3;
    }

    .more-proof {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.55), transparent 55%),
        #eef3f8;
    }

    .proof-geo-disc {
      top: -22%;
      right: -11%;
      width: 48%;
      aspect-ratio: 1;
      background: linear-gradient(145deg, rgba(53, 131, 236, 0.45), rgba(150, 195, 249, 0.06));
      opacity: 0.72;
    }

    .proof-geo-square {
      bottom: -24%;
      left: -12%;
      width: 34%;
      aspect-ratio: 1;
      background: linear-gradient(145deg, rgba(102, 72, 219, 0.2), rgba(80, 144, 231, 0.04));
      transform: rotate(26deg);
    }

    .proof-geo-core {
      top: 14%;
      left: 29%;
      width: 38px;
      aspect-ratio: 1;
      background: #176ce8;
      box-shadow: 0 0 0 18px rgba(23, 108, 232, 0.08);
    }

    .case-ledger {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .ledger-row {
      position: relative;
      min-height: 190px;
      overflow: hidden;
      padding: 27px;
      display: block;
      border: 0;
      border-radius: 21px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 20px 50px rgba(53, 83, 119, 0.06);
      transition: transform 360ms cubic-bezier(.2,.72,.2,1), background 260ms ease, box-shadow 260ms ease;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .ledger-row::after {
      content: "";
      position: absolute;
      right: -41px;
      bottom: -52px;
      width: 145px;
      height: 145px;
      border-radius: 38px;
      background: linear-gradient(145deg, rgba(45, 121, 228, 0.28), rgba(118, 77, 219, 0.08));
      transform: rotate(-18deg) scale(0.84);
      transition: transform 460ms cubic-bezier(.2,.72,.2,1), border-radius 360ms ease, background 300ms ease;
    }

    .ledger-row:nth-child(2)::after {
      border-radius: 50%;
    }

    .ledger-row:nth-child(3)::after {
      width: 180px;
      border-radius: 999px;
      transform: rotate(22deg) scale(0.82);
    }

    .ledger-row:nth-child(4)::after {
      border-radius: 28%;
      background: linear-gradient(145deg, rgba(93, 65, 214, 0.22), rgba(40, 117, 226, 0.12));
    }

    .ledger-row:hover,
    .ledger-row:focus-visible {
      padding: 27px;
      color: inherit;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 34px 76px rgba(53, 83, 119, 0.12);
      transform: translateY(-7px);
    }

    .ledger-row:hover::after,
    .ledger-row:focus-visible::after {
      border-radius: 48%;
      background: linear-gradient(145deg, #267ce9, rgba(104, 68, 219, 0.62));
      transform: rotate(13deg) scale(1.16);
    }

    .ledger-row > span,
    .ledger-row strong,
    .ledger-row em,
    .ledger-row b {
      position: relative;
      z-index: 2;
      display: block;
    }

    .ledger-row strong {
      max-width: 70%;
      margin-top: 26px;
      font-size: 21px;
    }

    .ledger-row em {
      max-width: 72%;
      margin-top: 9px;
    }

    .ledger-row b {
      position: absolute;
      z-index: 3;
      right: 24px;
      bottom: 21px;
    }

    .compact-heading {
      border: 0;
    }

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

    .process-steps li {
      position: relative;
      min-height: 270px;
      overflow: hidden;
      padding: 33px;
      display: block;
      border: 0;
      border-radius: 23px;
      background: #f3f6f9;
      transition: transform 360ms cubic-bezier(.2,.72,.2,1), background 260ms ease, box-shadow 260ms ease;
    }

    .process-steps li::after {
      content: "";
      position: absolute;
      right: -38px;
      bottom: -55px;
      width: 170px;
      height: 170px;
      border-radius: 45px;
      background: linear-gradient(145deg, rgba(44, 123, 234, 0.25), rgba(123, 85, 220, 0.06));
      transform: rotate(-16deg) scale(0.78);
      transition: transform 460ms cubic-bezier(.2,.72,.2,1), background 320ms ease, border-radius 320ms ease;
    }

    .process-steps li:nth-child(2)::after {
      border-radius: 50%;
    }

    .process-steps li:nth-child(3)::after {
      width: 205px;
      border-radius: 999px;
      transform: rotate(16deg) scale(0.76);
    }

    .process-steps li:nth-child(4)::after {
      border-radius: 28%;
      background: linear-gradient(145deg, rgba(102, 69, 218, 0.22), rgba(44, 123, 234, 0.1));
    }

    .process-steps li:hover {
      background: #eef4fb;
      box-shadow: 0 30px 70px rgba(53, 83, 119, 0.11);
      transform: translateY(-7px);
    }

    .process-steps li:hover::after {
      border-radius: 42%;
      background: linear-gradient(145deg, #287be8, rgba(112, 70, 217, 0.58));
      transform: rotate(13deg) scale(1.12);
    }

    .process-steps li > * {
      position: relative;
      z-index: 2;
    }

    .process-steps h3 {
      margin-top: 38px;
      font-size: 24px;
    }

    .process-steps p {
      max-width: 70%;
      margin-top: 13px;
    }

    .process-steps em {
      margin-top: 28px;
      display: inline-flex;
      border: 0;
      background: rgba(255, 255, 255, 0.78);
    }

    .process-summary {
      gap: 12px;
      border: 0;
      background: transparent;
    }

    .process-summary > div,
    .process-summary > div:nth-child(2) {
      border: 0;
      border-radius: 15px;
      background: #f3f6f9;
    }

    .fit-card {
      position: relative;
      overflow: hidden;
      transition: transform 360ms cubic-bezier(.2,.72,.2,1), background 260ms ease;
    }

    .fit-card::after {
      content: "";
      position: absolute;
      right: -72px;
      bottom: -92px;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(44, 126, 240, 0.42), rgba(104, 71, 216, 0.08));
      transform: scale(0.72);
      transition: transform 520ms cubic-bezier(.2,.72,.2,1), border-radius 380ms ease;
    }

    .fit-negative::after {
      border-radius: 29%;
      transform: rotate(24deg) scale(0.7);
    }

    .fit-card:hover {
      background: #1a2432;
      transform: translateY(-7px);
    }

    .fit-card:hover::after {
      border-radius: 35%;
      transform: rotate(20deg) scale(1.02);
    }

    .fit-card > * {
      position: relative;
      z-index: 2;
    }

    .fit-card li {
      border: 0;
    }

    .faq-list {
      border: 0;
    }

    .faq-list details {
      margin-bottom: 11px;
      padding: 0 22px;
      overflow: hidden;
      border: 0;
      border-radius: 17px;
      background: #f3f6f9;
      transition: background 260ms ease, transform 260ms ease;
    }

    .faq-list details:hover {
      background: #edf3fa;
      transform: translateX(5px);
    }

    .faq-list details[open] {
      background: #e8f2ff;
    }

    .faq-list summary {
      min-height: 82px;
    }

    .contact-section {
      background: linear-gradient(135deg, #0b5fd7 0%, #174ba9 56%, #102b62 100%);
    }

    .contact-geo-disc {
      top: -36%;
      right: -11%;
      width: 58%;
      aspect-ratio: 1;
      background: linear-gradient(145deg, rgba(112, 184, 255, 0.65), rgba(62, 94, 214, 0.08));
      opacity: 0.74;
    }

    .contact-geo-square {
      bottom: -43%;
      left: -12%;
      width: 41%;
      aspect-ratio: 1;
      background: linear-gradient(145deg, rgba(101, 66, 215, 0.55), rgba(69, 133, 236, 0.1));
      transform: rotate(29deg);
    }

    .contact-geo-capsule {
      top: 26%;
      left: 41%;
      width: 28%;
      height: 14%;
      background: rgba(151, 203, 255, 0.22);
      transform: rotate(-17deg);
    }

    .diagnosis-form {
      background: rgba(255, 255, 255, 0.91);
      backdrop-filter: blur(26px);
      -webkit-backdrop-filter: blur(26px);
    }

    .footer-bottom {
      border: 0;
    }

    .motion-ready .case-strip,
    .motion-ready .ledger-row,
    .motion-ready .process-steps li,
    .motion-ready .fit-card,
    .motion-ready .faq-list details {
      opacity: 0;
      transform: translateY(38px) scale(0.98);
    }

    .motion-ready .case-strip.is-visible,
    .motion-ready .ledger-row.is-visible,
    .motion-ready .process-steps li.is-visible,
    .motion-ready .fit-card.is-visible,
    .motion-ready .faq-list details.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      transition:
        opacity 650ms cubic-bezier(.2,.72,.2,1),
        transform 760ms cubic-bezier(.2,.72,.2,1),
        background 280ms ease,
        box-shadow 280ms ease;
    }

    .motion-ready .case-strip.is-visible:hover,
    .motion-ready .case-strip.is-visible:focus-visible {
      transform: translateY(-10px) scale(1);
    }

    .motion-ready .ledger-row.is-visible:hover,
    .motion-ready .ledger-row.is-visible:focus-visible,
    .motion-ready .process-steps li.is-visible:hover,
    .motion-ready .fit-card.is-visible:hover {
      transform: translateY(-7px) scale(1);
    }

    .motion-ready .faq-list details.is-visible:hover {
      transform: translateX(5px);
    }

    @media (max-width: 880px) {
      .hero {
        min-height: 870px;
      }

      .hero-kinetic {
        height: 390px;
      }

      .process-steps {
        grid-template-columns: 1fr;
      }

      .process-steps li {
        min-height: 245px;
      }
    }

    @media (max-width: 620px) {
      .hero {
        min-height: 780px;
      }

      .hero-kinetic {
        height: 350px;
        margin-top: 36px;
        border-radius: 24px;
      }

      .hero-geo-disc {
        top: -6%;
        right: -38%;
        width: 95%;
      }

      .hero-geo-square {
        bottom: -12%;
        left: -37%;
        width: 78%;
      }

      .hero-geo-capsule {
        top: 27%;
        left: 18%;
        width: 64%;
        height: 18%;
      }

      .hero-geo-core {
        top: 12%;
        left: 10%;
        width: 32px;
      }

      .kinetic-center {
        min-width: 0;
        width: 78%;
        padding: 24px 18px 26px;
        border-radius: 19px;
      }

      .kinetic-center strong {
        font-size: 21px;
      }

      .kinetic-label {
        padding: 8px 10px;
        font-size: 8px;
      }

      .kinetic-label-a {
        top: 19%;
        left: 4%;
      }

      .kinetic-label-b {
        top: 12%;
        right: 3%;
      }

      .kinetic-label-c {
        right: 6%;
        bottom: 9%;
      }

      .hero-facts {
        margin-top: 20px;
      }

      .case-strip {
        min-height: 340px;
        transform: none;
      }

      .case-strip::after {
        top: 65px;
        height: 180px;
      }

      .case-strip:hover,
      .case-strip:focus-visible {
        transform: none;
      }

      .case-ledger {
        grid-template-columns: 1fr;
      }

      .process-steps li {
        min-height: 230px;
        padding: 27px;
      }

      .process-steps p {
        max-width: 78%;
      }

      .faq-list details:hover {
        transform: none;
      }

      .contact-geo-capsule {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .case-strip,
      .case-strip::after,
      .ledger-row,
      .ledger-row::after,
      .process-steps li,
      .process-steps li::after,
      .fit-card,
      .fit-card::after,
      .faq-list details {
        transform: none !important;
        transition: none !important;
      }
    }

/* Extracted verbatim from the final option-a.html; homepage-only cascade. */

/* option-a style layer 6 */
/* 2026-07-24 / approved homepage structure */
    .hero {
      position: relative;
      isolation: isolate;
      min-height: 100svh;
      padding: clamp(120px, 15vh, 170px) var(--pad) 112px;
      display: grid;
      align-items: center;
      overflow: hidden;
      color: #10243d;
      background:
        radial-gradient(circle at 78% 22%, rgba(48, 118, 224, 0.14), transparent 30%),
        linear-gradient(138deg, #f8fbff 0%, #edf4fc 52%, #f9fbfd 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent 0 49.94%, rgba(38, 79, 132, 0.055) 50%, transparent 50.06%),
        linear-gradient(0deg, transparent 0 49.94%, rgba(38, 79, 132, 0.045) 50%, transparent 50.06%);
      background-size: min(14vw, 180px) min(14vw, 180px);
      mask-image: linear-gradient(to right, transparent, #000 35%, #000);
    }

    .hero-copy {
      position: relative;
      z-index: 6;
      width: min(820px, 67vw);
      padding: 0;
      display: block;
      text-align: left;
    }

    .hero-slides {
      position: relative;
      min-height: clamp(330px, 43vh, 470px);
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(28px);
      transition:
        opacity 0.62s cubic-bezier(.2, .72, .2, 1),
        transform 0.76s cubic-bezier(.2, .72, .2, 1),
        visibility 0s linear 0.76s;
    }

    .hero-slide.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition-delay: 0.08s, 0.08s, 0s;
    }

    .hero-slide h1,
    .hero-slide h2 {
      max-width: 840px;
      margin: 24px 0 0;
      color: #10243d;
      font-family: var(--sans);
      font-size: clamp(58px, 6.25vw, 102px);
      font-weight: 690;
      line-height: 0.98;
      letter-spacing: -0.068em;
    }

    .hero-slide .hit {
      color: #0b63d8;
    }

    .hero-slide .promise {
      max-width: 680px;
      margin-top: 30px;
      color: #66778c;
      font-size: clamp(14px, 1.1vw, 17px);
      line-height: 1.8;
    }

    .hero .actions {
      position: relative;
      z-index: 4;
      margin-top: 2px;
      justify-content: flex-start;
    }

    .hero-controls {
      position: absolute;
      top: calc(100% + 34px);
      left: 0;
      z-index: 7;
      display: flex;
      gap: 9px;
    }

    .hero-control {
      width: 72px;
      height: 34px;
      padding: 0;
      border: 0;
      border-bottom: 2px solid rgba(25, 59, 99, 0.18);
      color: #8796a9;
      background: transparent;
      cursor: pointer;
      text-align: left;
      font: 650 11px/1 var(--mono);
      transition: width .35s ease, color .35s ease, border-color .35s ease;
    }

    .hero-control.is-active {
      width: 108px;
      color: #0b63d8;
      border-color: #0b63d8;
    }

    .hero-control:focus-visible,
    .service-option:focus-visible,
    .case-select:focus-visible {
      outline: 3px solid rgba(11, 99, 216, 0.28);
      outline-offset: 4px;
    }

    .hero-kinetic {
      position: absolute;
      inset: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      pointer-events: none;
    }

    .hero-kinetic .motion-geometry {
      position: absolute;
      inset: 0;
    }

    .hero-kinetic .geo {
      opacity: 1;
      filter: none;
      transition:
        top .95s cubic-bezier(.2, .72, .2, 1),
        right .95s cubic-bezier(.2, .72, .2, 1),
        bottom .95s cubic-bezier(.2, .72, .2, 1),
        left .95s cubic-bezier(.2, .72, .2, 1),
        width .95s cubic-bezier(.2, .72, .2, 1),
        border-radius .95s cubic-bezier(.2, .72, .2, 1),
        background-color .65s ease;
    }

    .hero-geo-disc {
      top: 4%;
      right: -8%;
      left: auto;
      width: min(52vw, 780px);
      aspect-ratio: 1;
      border: 0;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(29, 104, 219, 0.88), rgba(76, 150, 243, 0.32));
      box-shadow: 0 38px 120px rgba(24, 91, 186, 0.22);
    }

    .hero-geo-square {
      top: 30%;
      right: 17%;
      left: auto;
      width: min(20vw, 300px);
      aspect-ratio: 1;
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 28%;
      background: rgba(247, 251, 255, 0.38);
      backdrop-filter: blur(14px);
    }

    .hero-geo-capsule {
      top: auto;
      right: 2%;
      bottom: 4%;
      left: auto;
      width: min(35vw, 520px);
      height: min(12vw, 178px);
      border-radius: 999px;
      background: rgba(21, 75, 155, 0.13);
    }

    .hero-geo-core {
      top: 48%;
      right: 25%;
      left: auto;
      width: min(8vw, 112px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: #f8fbff;
      box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.18);
    }

    .hero[data-carousel-index="1"] .hero-geo-disc {
      top: 30%;
      right: -2%;
      width: min(43vw, 650px);
      border-radius: 21%;
      background: linear-gradient(145deg, rgba(24, 79, 166, 0.9), rgba(45, 137, 231, 0.38));
    }

    .hero[data-carousel-index="1"] .hero-geo-square {
      top: 10%;
      right: 23%;
      width: min(26vw, 390px);
      border-radius: 50%;
    }

    .hero[data-carousel-index="1"] .hero-geo-capsule {
      right: 18%;
      bottom: 1%;
      width: min(22vw, 340px);
      background: rgba(10, 92, 206, 0.22);
    }

    .hero[data-carousel-index="2"] .hero-geo-disc {
      top: -16%;
      right: 9%;
      width: min(39vw, 590px);
      border-radius: 50% 50% 18% 50%;
      background: linear-gradient(145deg, rgba(61, 139, 235, 0.8), rgba(16, 78, 173, 0.34));
    }

    .hero[data-carousel-index="2"] .hero-geo-square {
      top: 43%;
      right: 5%;
      width: min(31vw, 470px);
      border-radius: 18%;
    }

    .hero[data-carousel-index="2"] .hero-geo-capsule {
      right: 28%;
      bottom: 2%;
      width: min(28vw, 430px);
    }

    .hero-orbit {
      position: absolute;
      z-index: 2;
      border: 1px solid rgba(27, 86, 160, 0.16);
      border-radius: 50%;
      transition: transform 1.1s cubic-bezier(.2, .72, .2, 1);
    }

    .hero-orbit-a {
      top: 13%;
      right: 3%;
      width: min(43vw, 650px);
      aspect-ratio: 1;
    }

    .hero-orbit-b {
      right: 22%;
      bottom: -23%;
      width: min(29vw, 440px);
      aspect-ratio: 1;
    }

    .hero-axis {
      position: absolute;
      top: 10%;
      right: 29%;
      width: 1px;
      height: 80%;
      background: linear-gradient(transparent, rgba(27, 86, 160, 0.18), transparent);
      transform-origin: center;
      transition: transform 1.1s cubic-bezier(.2, .72, .2, 1);
    }

    .hero[data-carousel-index="1"] .hero-orbit-a { transform: scale(.78) translate(-12%, 13%); }
    .hero[data-carousel-index="1"] .hero-orbit-b { transform: scale(1.25) translate(14%, -8%); }
    .hero[data-carousel-index="1"] .hero-axis { transform: rotate(28deg); }
    .hero[data-carousel-index="2"] .hero-orbit-a { transform: scale(1.18) translate(-8%, -9%); }
    .hero[data-carousel-index="2"] .hero-orbit-b { transform: scale(.76) translate(-36%, -24%); }
    .hero[data-carousel-index="2"] .hero-axis { transform: rotate(-34deg); }

    .product-stage {
      display: none !important;
    }

    .hero-facts {
      position: absolute;
      right: var(--pad);
      bottom: 36px;
      left: var(--pad);
      z-index: 7;
      margin: 0;
      padding: 16px 0 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
      border-top: 1px solid rgba(27, 65, 110, 0.14);
      color: #6e7e92;
      background: transparent;
    }

    .hero-facts span {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
    }

    .hero-facts b {
      color: #0b63d8;
      font: 650 10px/1 var(--mono);
    }

    .services-section {
      padding-top: 124px;
      padding-bottom: 124px;
      background:
        radial-gradient(circle at 80% 42%, rgba(83, 147, 232, 0.13), transparent 30%),
        #f6f9fd;
    }

    .services-section .section-heading {
      min-height: 0;
      grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr);
      align-items: start;
    }

    .service-explorer {
      position: relative;
      z-index: 4;
      margin-top: 72px;
      display: grid;
      grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
      gap: clamp(32px, 5vw, 74px);
      align-items: stretch;
    }

    .service-options {
      display: flex;
      flex-direction: column;
      border-top: 1px solid #cfd9e7;
    }

    .service-option {
      min-height: 104px;
      padding: 20px 14px 20px 4px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 0;
      border-bottom: 1px solid #d6e0eb;
      color: #5f7084;
      background: transparent;
      cursor: pointer;
      text-align: left;
      transition: padding .35s ease, color .35s ease, background-color .35s ease;
    }

    .service-option span {
      color: #98a7b8;
      font: 600 10px/1 var(--mono);
    }

    .service-option strong {
      color: inherit;
      font-size: clamp(18px, 1.35vw, 22px);
      font-weight: 660;
    }

    .service-option em {
      color: #9aa8b8;
      font-size: 12px;
      font-style: normal;
    }

    .service-option.is-active {
      padding-left: 18px;
      color: #0b5fcf;
      background: rgba(255, 255, 255, 0.68);
    }

    .service-option.is-active span {
      color: #0b63d8;
    }

    .service-stage {
      position: relative;
      min-height: 500px;
      overflow: hidden;
      border: 1px solid rgba(126, 155, 190, 0.22);
      border-radius: 30px;
      background:
        radial-gradient(circle at 74% 24%, rgba(72, 140, 232, 0.18), transparent 28%),
        rgba(255, 255, 255, 0.72);
      box-shadow: 0 30px 90px rgba(33, 77, 129, 0.1);
    }

    .service-stage-geometry {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .service-shape {
      position: absolute;
      display: block;
      transition:
        inset .8s cubic-bezier(.2, .72, .2, 1),
        width .8s cubic-bezier(.2, .72, .2, 1),
        height .8s cubic-bezier(.2, .72, .2, 1),
        border-radius .8s cubic-bezier(.2, .72, .2, 1),
        transform .8s cubic-bezier(.2, .72, .2, 1),
        background-color .55s ease;
    }

    .service-shape-disc {
      top: -28%;
      right: -5%;
      width: 55%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(55, 130, 226, 0.16);
    }

    .service-shape-square {
      right: 9%;
      bottom: -20%;
      width: 35%;
      aspect-ratio: 1;
      border: 1px solid rgba(41, 109, 198, 0.25);
      border-radius: 24%;
      transform: rotate(18deg);
    }

    .service-shape-core {
      top: 24%;
      right: 22%;
      width: 78px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: #2f7cde;
      box-shadow: 0 0 0 20px rgba(47, 124, 222, 0.1);
    }

    .service-shape-track {
      top: 18%;
      right: 8%;
      width: 43%;
      height: 43%;
      border: 1px solid rgba(41, 109, 198, 0.17);
      border-radius: 50%;
    }

    .service-explorer[data-service-index="1"] .service-shape-disc {
      top: 39%;
      right: -12%;
      width: 46%;
      border-radius: 26%;
    }

    .service-explorer[data-service-index="1"] .service-shape-square {
      right: 24%;
      bottom: 8%;
      width: 26%;
      border-radius: 50%;
      transform: rotate(58deg);
    }

    .service-explorer[data-service-index="1"] .service-shape-core {
      top: 12%;
      right: 13%;
      border-radius: 22%;
      background: #4b91e8;
    }

    .service-explorer[data-service-index="2"] .service-shape-disc {
      top: -14%;
      right: 18%;
      width: 38%;
      border-radius: 18%;
    }

    .service-explorer[data-service-index="2"] .service-shape-square {
      right: -5%;
      bottom: -8%;
      width: 49%;
      transform: rotate(-14deg);
    }

    .service-explorer[data-service-index="2"] .service-shape-core {
      top: 54%;
      right: 34%;
      background: #195fbf;
    }

    .service-explorer[data-service-index="3"] .service-shape-disc {
      top: 8%;
      right: -17%;
      width: 63%;
      border-radius: 50% 18% 50% 50%;
    }

    .service-explorer[data-service-index="3"] .service-shape-square {
      right: 30%;
      bottom: -16%;
      width: 32%;
      transform: rotate(38deg);
    }

    .service-explorer[data-service-index="3"] .service-shape-core {
      top: 20%;
      right: 28%;
      border-radius: 50%;
      background: #0a4eae;
    }

    .service-panels {
      position: relative;
      z-index: 3;
      width: min(64%, 560px);
      min-height: 500px;
      padding: clamp(42px, 5vw, 70px);
      display: flex;
      align-items: center;
    }

    .service-panel {
      animation: service-panel-in .52s cubic-bezier(.2, .72, .2, 1) both;
    }

    @keyframes service-panel-in {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .service-panel[hidden] {
      display: none;
    }

    .service-panel-label {
      color: #0b63d8;
      font: 650 10px/1.2 var(--mono);
      letter-spacing: .16em;
    }

    .service-panel h3 {
      margin: 25px 0 0;
      color: #172f4d;
      font-size: clamp(32px, 3vw, 48px);
      font-weight: 680;
      line-height: 1.1;
      letter-spacing: -.045em;
    }

    .service-panel p {
      margin: 26px 0 0;
      color: #65758a;
      font-size: 14px;
      line-height: 1.85;
    }

    .service-panel ul {
      margin: 27px 0 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
    }

    .service-panel li {
      padding: 9px 12px;
      border-radius: 999px;
      color: #315475;
      background: rgba(229, 238, 249, 0.9);
      font-size: 12px;
    }

    .scope-note {
      margin-top: 32px;
      border-radius: 18px;
    }

    .solutions-stage {
      padding-top: 128px;
      padding-bottom: 136px;
      background:
        radial-gradient(circle at 76% 18%, rgba(46, 112, 211, 0.2), transparent 27%),
        #09101b;
    }

    .solutions-stage-head {
      min-height: 0;
      grid-template-columns: minmax(0, 1.05fr) minmax(300px, .62fr);
      justify-items: stretch;
      text-align: left;
      align-items: end;
    }

    .solutions-stage-head > p {
      margin: 0 0 6px;
    }

    .solution-list {
      position: relative;
      z-index: 4;
      margin-top: 70px;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 18px;
      border: 0;
    }

    .solution-row,
    .solution-row.solution-featured {
      position: relative;
      min-height: 330px;
      padding: 34px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
      border: 1px solid rgba(207, 226, 249, 0.12);
      border-radius: 24px;
      color: #fff;
      background: rgba(255, 255, 255, 0.055);
      text-decoration: none;
      backdrop-filter: blur(14px);
      transform: none;
      transition: border-color .45s ease, background-color .45s ease, transform .45s cubic-bezier(.2, .72, .2, 1);
    }

    .solution-row:nth-child(1) { grid-column: span 7; background: linear-gradient(145deg, rgba(28, 102, 205, .38), rgba(255, 255, 255, .05)); }
    .solution-row:nth-child(2) { grid-column: span 5; }
    .solution-row:nth-child(3) { grid-column: span 5; }
    .solution-row:nth-child(4) { grid-column: span 7; background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(36, 96, 181, .22)); }

    .solution-row::before {
      content: "";
      position: absolute;
      top: -20%;
      right: -4%;
      width: 46%;
      aspect-ratio: 1;
      border: 1px solid rgba(131, 184, 248, .24);
      border-radius: 50%;
      transform: scale(.86);
      transition: transform .58s cubic-bezier(.2, .72, .2, 1), border-radius .58s ease, background-color .58s ease;
    }

    .solution-row::after {
      content: "";
      position: absolute;
      right: 12%;
      bottom: -18%;
      width: 28%;
      aspect-ratio: 1;
      border-radius: 23%;
      background: rgba(54, 130, 229, .15);
      transform: rotate(18deg);
      transition: transform .58s cubic-bezier(.2, .72, .2, 1), border-radius .58s ease;
    }

    .solution-row:hover,
    .solution-row:focus-visible {
      border-color: rgba(125, 184, 255, .42);
      background-color: rgba(255, 255, 255, .095);
      transform: translateY(-4px);
    }

    .solution-row:hover::before,
    .solution-row:focus-visible::before {
      border-radius: 22%;
      transform: scale(1.24) translate(-7%, 9%);
      background: rgba(50, 127, 225, .1);
    }

    .solution-row:hover::after,
    .solution-row:focus-visible::after {
      border-radius: 50%;
      transform: rotate(76deg) scale(1.2);
    }

    .solution-row > span {
      position: relative;
      z-index: 2;
    }

    .solution-tag {
      color: #89b9f6;
      font: 650 10px/1.2 var(--mono);
      letter-spacing: .12em;
    }

    .solution-main {
      margin-top: auto;
      display: flex;
      flex-direction: column;
    }

    .solution-main strong {
      font-size: clamp(28px, 3vw, 44px);
      line-height: 1.08;
      letter-spacing: -.045em;
    }

    .solution-main em {
      margin-top: 9px;
      color: #98abc2;
      font-size: 13px;
    }

    .solution-desc {
      max-width: 72%;
      margin-top: 22px;
      color: #a9b7c8;
      font-size: 13px;
      line-height: 1.7;
    }

    .solution-link {
      position: absolute !important;
      right: 30px;
      bottom: 31px;
      color: #d6e7fb;
      font-size: 12px;
    }

    .case-intro {
      padding-top: 122px;
      padding-bottom: 64px;
      background: #fff;
    }

    .case-showcase {
      position: relative;
      padding: 0 var(--pad) 110px;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr);
      gap: 20px;
      background: #fff;
    }

    .case-feature {
      position: relative;
      min-height: 610px;
      overflow: hidden;
      border-radius: 28px;
      color: #fff;
      background:
        radial-gradient(circle at 78% 22%, rgba(99, 165, 255, .31), transparent 31%),
        linear-gradient(145deg, #0d5dce, #123d7a);
    }

    .case-feature-copy {
      position: relative;
      z-index: 4;
      width: min(56%, 610px);
      height: 100%;
      padding: clamp(42px, 5vw, 72px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .case-feature-kicker {
      color: #b9d8ff;
      font: 650 10px/1.2 var(--mono);
      letter-spacing: .14em;
    }

    .case-feature h3 {
      margin: 23px 0 0;
      font-size: clamp(45px, 5vw, 76px);
      font-weight: 680;
      line-height: 1;
      letter-spacing: -.058em;
    }

    .case-feature-copy > p {
      max-width: 570px;
      margin: 28px 0 0;
      color: #d4e4f8;
      font-size: 14px;
      line-height: 1.8;
    }

    .case-feature-meta {
      margin-top: 24px;
      color: #a9c7ea;
      font-size: 12px;
    }

    .case-feature-copy > a {
      width: fit-content;
      margin-top: 34px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255, 255, 255, .45);
      color: #fff;
      font-size: 12px;
      text-decoration: none;
    }

    .case-visual {
      position: absolute;
      inset: 0 0 0 42%;
      overflow: hidden;
      transition: filter .45s ease;
    }

    .case-visual > span {
      position: absolute;
      display: block;
      transition:
        inset .82s cubic-bezier(.2, .72, .2, 1),
        width .82s cubic-bezier(.2, .72, .2, 1),
        border-radius .82s cubic-bezier(.2, .72, .2, 1),
        transform .82s cubic-bezier(.2, .72, .2, 1),
        background-color .55s ease;
    }

    .case-visual-disc {
      top: 7%;
      right: -8%;
      width: 75%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(139, 192, 255, .22);
    }

    .case-visual-frame {
      top: 23%;
      right: 10%;
      width: 53%;
      aspect-ratio: 1;
      border: 1px solid rgba(255, 255, 255, .48);
      border-radius: 27%;
      transform: rotate(14deg);
    }

    .case-visual-core {
      top: 39%;
      right: 27%;
      width: 90px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 22px rgba(255, 255, 255, .12);
    }

    .case-visual-track {
      right: 5%;
      bottom: 5%;
      width: 48%;
      height: 18%;
      border-radius: 999px;
      background: rgba(0, 32, 82, .24);
    }

    .case-visual b {
      position: absolute;
      right: 7%;
      bottom: 2%;
      color: rgba(255, 255, 255, .16);
      font: 700 clamp(120px, 15vw, 220px)/1 var(--sans);
      letter-spacing: -.09em;
    }

    .case-showcase[data-case-index="1"] .case-feature { background: linear-gradient(145deg, #0c70c6, #10305f); }
    .case-showcase[data-case-index="2"] .case-feature { background: linear-gradient(145deg, #235d9f, #172b4b); }
    .case-showcase[data-case-index="3"] .case-feature { background: linear-gradient(145deg, #144f99, #243a63); }
    .case-showcase[data-case-index="4"] .case-feature { background: linear-gradient(145deg, #1975b2, #184477); }
    .case-showcase[data-case-index="5"] .case-feature { background: linear-gradient(145deg, #0b66c8, #242f61); }
    .case-showcase[data-case-index="1"] .case-visual-disc { top: 30%; right: -8%; width: 66%; border-radius: 24%; }
    .case-showcase[data-case-index="1"] .case-visual-frame { top: 9%; right: 22%; width: 42%; border-radius: 50%; transform: rotate(52deg); }
    .case-showcase[data-case-index="2"] .case-visual-disc { top: -15%; right: 12%; width: 56%; border-radius: 18%; }
    .case-showcase[data-case-index="2"] .case-visual-frame { top: 39%; right: 2%; width: 63%; transform: rotate(-18deg); }
    .case-showcase[data-case-index="3"] .case-visual-disc { top: 5%; right: -18%; width: 83%; border-radius: 50% 20% 50% 50%; }
    .case-showcase[data-case-index="3"] .case-visual-frame { top: 31%; right: 26%; width: 35%; transform: rotate(86deg); }
    .case-showcase[data-case-index="4"] .case-visual-disc { top: 42%; right: -4%; width: 59%; border-radius: 22%; }
    .case-showcase[data-case-index="4"] .case-visual-frame { top: 8%; right: 5%; width: 57%; border-radius: 50%; }
    .case-showcase[data-case-index="5"] .case-visual-disc { top: -5%; right: -12%; width: 72%; border-radius: 28% 50% 28% 50%; }
    .case-showcase[data-case-index="5"] .case-visual-frame { top: 41%; right: 14%; width: 46%; transform: rotate(38deg); }

    .case-selector {
      display: flex;
      flex-direction: column;
      border-top: 1px solid #d5deea;
    }

    .case-select {
      min-height: 100px;
      padding: 17px 5px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border: 0;
      border-bottom: 1px solid #dbe3ed;
      color: #5d6d80;
      background: transparent;
      cursor: pointer;
      text-align: left;
      transition: padding .35s ease, color .35s ease, background-color .35s ease;
    }

    .case-select span {
      color: #9ba8b7;
      font: 600 10px/1 var(--mono);
    }

    .case-select strong {
      font-size: 15px;
      font-weight: 650;
    }

    .case-select em {
      color: #9aa6b5;
      font-size: 11px;
      font-style: normal;
    }

    .case-select.is-active {
      padding-left: 16px;
      color: #0b5fcf;
      background: #f2f6fb;
    }

    .case-select.is-active span {
      color: #0b63d8;
    }

    .support-projects {
      padding: 90px var(--pad) 100px;
      display: grid;
      grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
      gap: clamp(50px, 8vw, 130px);
      align-items: start;
      background: #f3f6fa;
    }

    .support-projects h3 {
      margin: 22px 0 0;
      color: #172d48;
      font-size: clamp(34px, 3.4vw, 52px);
      font-weight: 680;
      line-height: 1.08;
      letter-spacing: -.045em;
    }

    .support-project-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .support-project-list span {
      padding: 13px 17px;
      border: 1px solid #d5deea;
      border-radius: 999px;
      color: #52667e;
      background: rgba(255, 255, 255, .72);
      font-size: 13px;
      transition: color .3s ease, border-color .3s ease, transform .3s ease;
    }

    .support-project-list span:hover {
      color: #0b5fcf;
      border-color: #93b7e4;
      transform: translateY(-2px);
    }

    .process-section {
      padding-top: 124px;
      padding-bottom: 128px;
    }

    .process-steps {
      position: relative;
      margin-top: 74px;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 0;
      list-style: none;
    }

    .process-steps::before {
      content: "";
      position: absolute;
      top: 20px;
      right: 0;
      left: 0;
      height: 1px;
      background: linear-gradient(90deg, #0b63d8, #7db2ef 72%, #d7e2ef);
    }

    .process-steps li {
      position: relative;
      min-height: 280px;
      padding: 62px clamp(24px, 3vw, 48px) 0 0;
      display: block;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .process-steps li::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 0;
      width: 17px;
      height: 17px;
      border: 5px solid #fff;
      border-radius: 50%;
      background: #0b63d8;
      box-shadow: 0 0 0 1px #0b63d8;
    }

    .process-steps li::after {
      display: none;
    }

    .process-no {
      color: #0b63d8;
      font: 650 10px/1 var(--mono);
    }

    .process-steps h3 {
      margin-top: 23px;
      font-size: 23px;
    }

    .process-steps p {
      max-width: 300px;
      margin-top: 17px;
    }

    .process-steps em {
      position: static;
      display: inline-block;
      margin-top: 24px;
      padding: 7px 10px;
      border-radius: 999px;
      background: #edf4fd;
    }

    .process-summary {
      margin-top: 58px;
    }

    .faq-section {
      position: relative;
      padding-top: 126px;
      padding-bottom: 130px;
      grid-template-columns: minmax(320px, .7fr) minmax(0, 1.3fr);
      gap: clamp(60px, 9vw, 150px);
      align-items: start;
    }

    .faq-heading {
      position: sticky;
      top: 112px;
      align-self: start;
      min-height: calc(100vh - 170px);
      display: flex;
      flex-direction: column;
    }

    .faq-sticky-state {
      margin-top: auto;
      padding-top: 32px;
      border-top: 1px solid #d8e1ec;
    }

    .faq-sticky-state > span {
      color: #7a8b9f;
      font: 600 11px/1 var(--mono);
    }

    .faq-sticky-state > span b {
      color: #0b63d8;
      font-size: 18px;
    }

    .faq-progress {
      height: 2px;
      margin-top: 16px;
      overflow: hidden;
      background: #e0e7ef;
    }

    .faq-progress i {
      display: block;
      width: 16.666%;
      height: 100%;
      background: #0b63d8;
      transform-origin: left;
      transition: width .45s cubic-bezier(.2, .72, .2, 1);
    }

    .faq-sticky-state > strong {
      display: block;
      margin-top: 20px;
      color: #27415f;
      font-size: 14px;
      line-height: 1.55;
    }

    .faq-list {
      border-top: 1px solid #d9e2ed;
    }

    .faq-list details {
      min-height: 148px;
      padding: 36px 8px;
      border: 0;
      border-bottom: 1px solid #d9e2ed;
      border-radius: 0;
      background: transparent;
      transform: none;
      transition: min-height .6s cubic-bezier(.2, .72, .2, 1), background-color .4s ease, padding .4s ease;
    }

    .faq-list details[open] {
      min-height: min(52vh, 520px);
      padding: 44px 30px;
      background: #f3f7fc;
    }

    .faq-list details:hover {
      transform: none;
    }

    .faq-list summary {
      font-size: clamp(18px, 1.65vw, 25px);
      line-height: 1.35;
    }

    .faq-list details[open] summary {
      color: #0b5fcf;
    }

    .faq-list details p {
      max-width: 680px;
      margin: 28px 0 0 44px;
      color: #64758a;
      font-size: 14px;
      line-height: 1.9;
    }

    .journey-lead {
      transition: opacity .65s ease, transform .72s cubic-bezier(.2, .72, .2, 1);
    }

    .experience-ready .journey-section.is-before .journey-lead {
      opacity: .35;
      transform: translateY(34px);
    }

    .experience-ready .journey-section.is-current .journey-lead {
      opacity: 1;
      transform: translateY(0);
    }

    .experience-ready .journey-section.is-past .journey-lead {
      opacity: .7;
      transform: translateY(-12px);
    }

    @media (max-width: 1100px) {
      .hero-copy {
        width: min(800px, 76vw);
      }

      .service-explorer {
        grid-template-columns: minmax(260px, .58fr) minmax(0, 1.42fr);
      }

      .service-panels {
        width: 72%;
      }

      .case-showcase {
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
      }

      .case-feature-copy {
        width: 66%;
      }

      .case-visual {
        left: 50%;
      }
    }

    @media (max-width: 880px) {
      .hero {
        min-height: 780px;
        padding-top: 130px;
      }

      .hero-copy {
        width: 100%;
      }

      .hero-slide h1,
      .hero-slide h2 {
        font-size: clamp(50px, 8vw, 72px);
      }

      .hero-geo-disc {
        right: -26%;
        width: 72vw;
        opacity: .78;
      }

      .hero-facts {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .services-section .section-heading,
      .solutions-stage-head,
      .support-projects {
        grid-template-columns: 1fr;
      }

      .service-explorer {
        grid-template-columns: 1fr;
      }

      .service-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .service-option {
        min-height: 92px;
        border-right: 1px solid #d6e0eb;
      }

      .service-stage {
        min-height: 470px;
      }

      .solution-row:nth-child(n) {
        grid-column: span 6;
      }

      .case-showcase {
        grid-template-columns: 1fr;
      }

      .case-feature {
        min-height: 560px;
      }

      .case-selector {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .case-select {
        border-right: 1px solid #dbe3ed;
      }

      .support-projects {
        gap: 40px;
      }

      .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: 42px 0;
      }

      .process-steps::before {
        display: none;
      }

      .process-steps li {
        min-height: 240px;
        padding-top: 45px;
        border-top: 1px solid #d7e2ef;
      }

      .process-steps li::before {
        top: -9px;
      }

      .faq-section {
        grid-template-columns: 1fr;
      }

      .faq-heading {
        position: relative;
        top: auto;
        min-height: 0;
      }

      .faq-sticky-state {
        display: none;
      }

      .faq-list details[open] {
        min-height: 0;
      }
    }

    @media (max-width: 620px) {
      .hero {
        min-height: 720px;
        padding: 110px 22px 118px;
      }

      .hero::before,
      .hero-axis,
      .hero-orbit-b {
        display: none;
      }

      .hero-slides {
        min-height: 350px;
      }

      .hero-slide h1,
      .hero-slide h2 {
        margin-top: 18px;
        font-size: clamp(42px, 12.2vw, 58px);
        line-height: 1.03;
      }

      .hero-slide .promise {
        margin-top: 22px;
        font-size: 13px;
      }

      .hero .actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .hero .button {
        padding-inline: 12px;
      }

      .hero-controls {
        top: calc(100% + 25px);
      }

      .hero-control {
        width: 52px;
      }

      .hero-control.is-active {
        width: 76px;
      }

      .hero-facts {
        right: 22px;
        bottom: 23px;
        left: 22px;
      }

      .hero-facts span:nth-child(n+3) {
        display: none;
      }

      .hero-geo-square {
        right: 4%;
        width: 42vw;
      }

      .services-section,
      .solutions-stage,
      .case-intro,
      .process-section,
      .fit-section,
      .faq-section {
        padding-top: 78px;
        padding-bottom: 82px;
      }

      .service-explorer {
        margin-top: 46px;
        gap: 25px;
      }

      .service-options {
        grid-template-columns: 1fr;
      }

      .service-option {
        min-height: 78px;
      }

      .service-stage {
        min-height: 520px;
        border-radius: 22px;
      }

      .service-panels {
        width: 100%;
        min-height: 520px;
        padding: 34px 28px 210px;
        align-items: flex-start;
      }

      .service-panel h3 {
        font-size: 34px;
      }

      .service-shape-disc {
        top: auto !important;
        right: -12% !important;
        bottom: -15% !important;
        width: 68% !important;
      }

      .service-shape-square {
        right: 28% !important;
        bottom: -10% !important;
      }

      .service-shape-core {
        top: auto !important;
        right: 20% !important;
        bottom: 15% !important;
      }

      .scope-note {
        display: grid;
        gap: 12px;
      }

      .solution-list {
        grid-template-columns: 1fr;
      }

      .solution-row:nth-child(n) {
        grid-column: 1;
        min-height: 300px;
      }

      .solution-desc {
        max-width: 88%;
      }

      .case-intro {
        padding-bottom: 45px;
      }

      .case-showcase {
        padding: 0 22px 78px;
      }

      .case-feature {
        min-height: 590px;
        border-radius: 22px;
      }

      .case-feature-copy {
        width: 100%;
        padding: 34px 28px;
      }

      .case-feature h3 {
        font-size: 47px;
      }

      .case-feature-copy > p {
        max-width: 92%;
      }

      .case-visual {
        inset: 0 0 42% 20%;
        opacity: .7;
      }

      .case-selector {
        grid-template-columns: 1fr;
      }

      .case-select {
        min-height: 84px;
      }

      .support-projects {
        padding: 72px 22px 78px;
      }

      .support-project-list {
        gap: 8px;
      }

      .support-project-list span {
        padding: 11px 13px;
        font-size: 12px;
      }

      .process-steps {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .process-steps li {
        min-height: 0;
        padding: 42px 0 54px 18px;
      }

      .process-summary {
        margin-top: 20px;
      }

      .faq-list details,
      .faq-list details[open] {
        min-height: 0;
        padding: 28px 0;
        background: transparent;
      }

      .faq-list details p {
        margin-left: 0;
      }
    }

    @media (max-width: 760px) {
      .hero-slide,
      .hero-kinetic .geo,
      .hero-orbit,
      .hero-axis,
      .service-shape,
      .case-visual > span,
      .journey-lead {
        transition: none !important;
        animation: none !important;
      }

      .experience-ready .journey-section.is-before .journey-lead,
      .experience-ready .journey-section.is-current .journey-lead,
      .experience-ready .journey-section.is-past .journey-lead {
        opacity: 1;
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-slide,
      .hero-kinetic .geo,
      .hero-orbit,
      .hero-axis,
      .service-shape,
      .solution-row,
      .solution-row::before,
      .solution-row::after,
      .case-visual > span,
      .case-feature,
      .support-project-list span,
      .journey-lead {
        transition: none !important;
        animation: none !important;
      }
    }

/* option-a style layer 7 */
/* 2026-07-24 / surface-geometry refinement */
    .hero {
      padding-top: clamp(118px, 14vh, 158px);
      padding-bottom: 118px;
      align-items: start;
      background:
        radial-gradient(circle at 50% 82%, rgba(71, 139, 230, .16), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #f1f6fc 63%, #eaf2fb 100%);
    }

    .hero::before {
      display: none;
    }

    .hero-copy {
      width: min(1050px, 100%);
      margin: 0 auto;
      text-align: center;
    }

    .hero-slides {
      min-height: clamp(315px, 39vh, 400px);
    }

    .hero-slide {
      justify-content: flex-start;
      align-items: center;
    }

    .hero-slide h1,
    .hero-slide h2 {
      max-width: 1020px;
      margin-top: 20px;
      font-size: clamp(56px, 5.8vw, 94px);
    }

    .hero-slide .promise {
      margin-right: auto;
      margin-left: auto;
    }

    .hero .kicker {
      justify-content: center;
    }

    .hero .actions {
      justify-content: center;
    }

    .hero-controls {
      top: calc(100% + 24px);
      left: 50%;
      gap: 8px;
      transform: translateX(-50%);
    }

    .hero-control,
    .hero-control.is-active {
      width: auto;
      min-width: 46px;
      height: 34px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      color: #65768b;
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 8px 24px rgba(35, 76, 126, .08);
      text-align: center;
    }

    .hero-control.is-active {
      min-width: 72px;
      color: #fff;
      background: #0b63d8;
    }

    .hero-orbit,
    .hero-axis {
      display: none;
    }

    .hero-kinetic .geo {
      border: 0;
      box-shadow: none;
    }

    .hero-geo-disc {
      top: auto;
      right: -3%;
      bottom: -31%;
      width: min(58vw, 880px);
      border-radius: 48% 48% 20% 48%;
      background: linear-gradient(145deg, rgba(34, 113, 221, .82), rgba(80, 155, 242, .5));
    }

    .hero-geo-square {
      top: auto;
      right: auto;
      bottom: -35%;
      left: -5%;
      width: min(45vw, 680px);
      border-radius: 34% 18% 42% 28%;
      background: linear-gradient(145deg, rgba(38, 83, 171, .58), rgba(91, 151, 231, .28));
      backdrop-filter: none;
    }

    .hero-geo-capsule {
      top: auto;
      right: 27%;
      bottom: -4%;
      left: auto;
      width: min(43vw, 650px);
      height: min(14vw, 205px);
      border-radius: 999px;
      background: rgba(255, 255, 255, .5);
      box-shadow: 0 26px 80px rgba(23, 77, 143, .12);
    }

    .hero-geo-core {
      top: auto;
      right: 20%;
      bottom: 11%;
      left: auto;
      width: min(8vw, 106px);
      background: #0b4fae;
      box-shadow: 0 0 0 24px rgba(255, 255, 255, .18);
    }

    .hero[data-carousel-index="1"] .hero-geo-disc {
      top: auto;
      right: 8%;
      bottom: -38%;
      width: min(50vw, 760px);
      border-radius: 22% 48% 31% 48%;
      background: linear-gradient(145deg, rgba(20, 76, 170, .84), rgba(67, 148, 238, .48));
    }

    .hero[data-carousel-index="1"] .hero-geo-square {
      top: auto;
      right: auto;
      bottom: -22%;
      left: -11%;
      width: min(41vw, 620px);
      border-radius: 50% 24% 32% 50%;
      background: rgba(60, 122, 210, .38);
    }

    .hero[data-carousel-index="1"] .hero-geo-capsule {
      top: auto;
      right: 19%;
      bottom: 0;
      width: min(38vw, 570px);
      background: rgba(232, 242, 255, .74);
    }

    .hero[data-carousel-index="1"] .hero-geo-core {
      top: auto;
      right: 32%;
      bottom: 8%;
      border-radius: 28%;
      background: #256fcf;
    }

    .hero[data-carousel-index="2"] .hero-geo-disc {
      top: auto;
      right: -11%;
      bottom: -20%;
      width: min(51vw, 780px);
      border-radius: 50% 24% 50% 35%;
      background: linear-gradient(145deg, rgba(44, 123, 224, .78), rgba(16, 67, 152, .4));
    }

    .hero[data-carousel-index="2"] .hero-geo-square {
      top: auto;
      right: auto;
      bottom: -43%;
      left: 5%;
      width: min(49vw, 740px);
      border-radius: 26% 50% 22% 42%;
      background: rgba(37, 88, 173, .42);
    }

    .hero[data-carousel-index="2"] .hero-geo-capsule {
      top: auto;
      right: 30%;
      bottom: 3%;
      width: min(33vw, 500px);
      background: rgba(255, 255, 255, .58);
    }

    .hero[data-carousel-index="2"] .hero-geo-core {
      top: auto;
      right: 23%;
      bottom: 9%;
      border-radius: 50%;
      background: #0a4a9f;
    }

    .hero-facts {
      padding: 12px 18px;
      border: 0;
      border-radius: 18px;
      background: rgba(248, 251, 255, .62);
      backdrop-filter: blur(16px);
    }

    .services-section > .motion-geometry .geo-square,
    .services-section > .motion-geometry .geo-capsule,
    .solutions-stage > .motion-geometry .geo-square,
    .solutions-stage > .motion-geometry .geo-capsule,
    .contact-section > .motion-geometry .geo-square,
    .contact-section > .motion-geometry .geo-capsule {
      border: 0 !important;
    }

    .services-section > .motion-geometry .geo-square {
      background: rgba(77, 141, 225, .12);
    }

    .services-section > .motion-geometry .geo-capsule {
      background: rgba(255, 255, 255, .54);
    }

    .solutions-stage > .motion-geometry .geo-square {
      background: rgba(31, 92, 181, .2);
    }

    .solutions-stage > .motion-geometry .geo-capsule {
      background: rgba(71, 133, 222, .12);
    }

    .contact-section > .motion-geometry .geo-square,
    .contact-section > .motion-geometry .geo-capsule {
      background: rgba(255, 255, 255, .12);
    }

    .service-explorer {
      padding: 12px;
      gap: 12px;
      border-radius: 32px;
      background: #e8eff7;
    }

    .service-options {
      padding: 8px;
      gap: 7px;
      border: 0;
      border-radius: 24px;
      background: rgba(255, 255, 255, .42);
    }

    .service-option {
      position: relative;
      min-height: 92px;
      padding: 18px 16px;
      border: 0;
      border-radius: 17px;
    }

    .service-option.is-active {
      padding-left: 18px;
      color: #fff;
      background: #0b63d8;
      box-shadow: 0 15px 34px rgba(10, 86, 187, .2);
    }

    .service-option.is-active span,
    .service-option.is-active em {
      color: rgba(255, 255, 255, .72);
    }

    .service-option.is-active::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 16px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #fff;
      transform: translateY(-50%);
      box-shadow: 0 0 0 7px rgba(255, 255, 255, .13);
    }

    .service-stage {
      border: 0;
      border-radius: 24px;
      background:
        radial-gradient(circle at 78% 26%, rgba(78, 147, 236, .2), transparent 29%),
        #fff;
      box-shadow: 0 20px 55px rgba(34, 73, 119, .08);
    }

    .service-shape-square {
      border: 0;
      background: rgba(23, 92, 186, .16);
    }

    .service-shape-track {
      border: 0;
      border-radius: 34%;
      background: rgba(76, 142, 228, .11);
    }

    .service-shape-disc {
      background: rgba(42, 118, 216, .2);
    }

    .service-explorer[data-service-index="1"] .service-shape-track {
      border-radius: 50%;
      background: rgba(29, 108, 214, .13);
    }

    .service-explorer[data-service-index="2"] .service-shape-track {
      border-radius: 20%;
      background: rgba(15, 76, 161, .14);
    }

    .service-explorer[data-service-index="3"] .service-shape-track {
      border-radius: 50% 22% 50% 34%;
      background: rgba(42, 108, 199, .15);
    }

    .solution-row,
    .solution-row.solution-featured {
      border: 0;
      background-color: rgba(255, 255, 255, .075);
      box-shadow: inset 0 0 0 1px rgba(213, 229, 250, .08);
    }

    .solution-row::before {
      top: -24%;
      right: -4%;
      width: 52%;
      border: 0;
      border-radius: 46% 24% 46% 38%;
      background: rgba(30, 88, 169, .44);
      transform: rotate(-12deg);
    }

    .solution-row::after {
      right: 9%;
      bottom: -24%;
      width: 34%;
      border-radius: 48% 28% 40% 24%;
      background: rgba(76, 145, 233, .24);
    }

    .solution-row:nth-child(1)::before {
      background: rgba(4, 47, 111, .52);
    }

    .solution-row:nth-child(2)::before {
      border-radius: 50%;
      background: rgba(20, 74, 151, .5);
    }

    .solution-row:nth-child(3)::before {
      border-radius: 24% 50% 30% 44%;
      background: rgba(7, 51, 116, .5);
    }

    .solution-row:nth-child(4)::before {
      border-radius: 50% 22% 42% 35%;
      background: rgba(16, 66, 139, .52);
    }

    .solution-row:hover,
    .solution-row:focus-visible {
      color: #fff;
      background: #155ebc;
      box-shadow: 0 25px 70px rgba(0, 20, 53, .3);
      transform: translateY(-6px);
    }

    .solution-row:hover::before,
    .solution-row:focus-visible::before {
      border-radius: 24% 48% 29% 45%;
      background: #062754;
      transform: scale(1.38) rotate(28deg) translate(-7%, 7%);
    }

    .solution-row:hover::after,
    .solution-row:focus-visible::after {
      border-radius: 50% 26% 44% 34%;
      background: #61a1ef;
      transform: rotate(65deg) scale(1.3);
    }

    .case-showcase {
      gap: 16px;
    }

    .case-feature {
      box-shadow: 0 26px 80px rgba(19, 60, 110, .15);
    }

    .case-visual-frame {
      border: 0;
      background: rgba(3, 45, 105, .26);
    }

    .case-visual-track {
      background: rgba(4, 37, 83, .32);
    }

    .case-selector {
      padding: 14px;
      gap: 5px;
      border: 0;
      border-radius: 24px;
      background: #eef3f8;
    }

    .case-selector::before {
      content: "AUTO PREVIEW  ·  悬停项目查看";
      padding: 8px 11px 10px;
      color: #71849a;
      font: 650 9px/1.2 var(--mono);
      letter-spacing: .12em;
    }

    .case-select {
      min-height: 79px;
      padding: 14px 12px;
      border: 0;
      border-radius: 15px;
    }

    .case-select.is-active {
      padding-left: 15px;
      color: #fff;
      background: #0b63d8;
      box-shadow: 0 13px 30px rgba(10, 87, 187, .17);
    }

    .case-select.is-active span,
    .case-select.is-active em {
      color: rgba(255, 255, 255, .72);
    }

    .process-steps {
      padding: 12px;
      gap: 12px;
      border-radius: 30px;
      background: #e9eff6;
    }

    .process-steps::before,
    .process-steps li::before,
    .process-steps li::after {
      display: none;
    }

    .process-steps li {
      min-height: 320px;
      padding: 42px 34px 36px;
      border: 0;
      border-radius: 21px;
      background: rgba(255, 255, 255, .82);
      box-shadow: none;
    }

    .process-steps li:nth-child(2) {
      background: rgba(243, 248, 253, .9);
    }

    .process-steps li:nth-child(3) {
      background: rgba(235, 243, 252, .94);
    }

    .process-steps li:nth-child(4) {
      color: #fff;
      background: #175fb9;
    }

    .process-no {
      width: fit-content;
      padding: 9px 12px;
      display: inline-flex;
      border-radius: 10px;
      color: #0b5fcf;
      background: #dceafb;
    }

    .process-steps li:nth-child(4) .process-no {
      color: #fff;
      background: rgba(255, 255, 255, .16);
    }

    .process-steps li:nth-child(4) h3 {
      color: #fff;
    }

    .process-steps li:nth-child(4) p {
      color: #cfe1f7;
    }

    .process-steps li:nth-child(4) em {
      color: #fff;
      background: rgba(255, 255, 255, .13);
    }

    .process-steps h3 {
      margin-top: 42px;
    }

    .process-steps p {
      max-width: none;
    }

    .faq-heading {
      position: sticky;
      top: 112px;
      min-height: 0;
      display: block;
    }

    .faq-sticky-state {
      display: none !important;
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border: 0;
    }

    .faq-list details,
    .faq-list details[open] {
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 16px;
      background: #f5f7fa;
      transform: none;
      transition: background-color .35s ease, box-shadow .35s ease;
    }

    .faq-list details[open] {
      background: #edf4fc;
      box-shadow: 0 16px 42px rgba(33, 74, 124, .08);
    }

    .faq-list summary {
      padding: 25px 22px;
      font-size: clamp(17px, 1.45vw, 22px);
      line-height: 1.4;
    }

    .faq-list details[open] summary {
      color: #0b5fcf;
    }

    .faq-list details p {
      max-width: 680px;
      margin: 0;
      padding: 0 24px 25px 66px;
      color: #61748a;
      line-height: 1.8;
    }

    .diagnosis-form .form-row {
      align-items: start;
    }

    .diagnosis-form .form-row > label + label {
      margin-top: 0;
    }

    @media (max-width: 880px) {
      .hero {
        min-height: 760px;
      }

      .hero-copy {
        width: 100%;
      }

      .service-explorer {
        grid-template-columns: 1fr;
      }

      .service-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .case-showcase {
        grid-template-columns: 1fr;
      }

      .case-selector {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .case-selector::before {
        grid-column: 1 / -1;
      }

      .process-steps {
        grid-template-columns: 1fr 1fr;
      }

      .process-steps li {
        min-height: 290px;
      }

      .faq-heading {
        position: relative;
        top: auto;
      }
    }

    @media (max-width: 620px) {
      .hero {
        min-height: 710px;
        padding-top: 106px;
      }

      .hero-slides {
        min-height: 345px;
      }

      .hero-slide h1,
      .hero-slide h2 {
        font-size: clamp(40px, 11.8vw, 56px);
      }

      .hero-geo-disc {
        right: -36%;
        bottom: -17%;
        width: 96vw;
      }

      .hero-geo-square {
        bottom: -15%;
        left: -41%;
        width: 88vw;
      }

      .hero-geo-capsule {
        right: 10%;
        bottom: 3%;
        width: 72vw;
        height: 24vw;
      }

      .hero-geo-core {
        right: 16%;
        bottom: 9%;
        width: 62px;
      }

      .hero-facts {
        background: rgba(248, 251, 255, .74);
      }

      .service-explorer {
        padding: 8px;
        border-radius: 24px;
      }

      .service-options,
      .case-selector {
        grid-template-columns: 1fr;
      }

      .service-stage {
        border-radius: 18px;
      }

      .case-selector::before {
        grid-column: 1;
      }

      .process-steps {
        grid-template-columns: 1fr;
        padding: 8px;
        border-radius: 24px;
      }

      .process-steps li {
        min-height: 0;
        padding: 34px 27px 38px;
      }

      .process-steps h3 {
        margin-top: 30px;
      }

      .faq-list summary {
        padding: 22px 18px;
      }

      .faq-list details p {
        padding: 0 18px 22px;
      }

      .diagnosis-form .form-row > label + label {
        margin-top: 17px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .service-option,
      .case-select,
      .solution-row,
      .solution-row::before,
      .solution-row::after {
        transition: none !important;
      }
    }

/* Extracted verbatim from the final option-a.html; homepage-only cascade. */

/* option-a style layer 8 */
/* 2026-07-24 / scroll-story rebuild */
    .hero {
      min-height: 100svh;
      padding: 0 var(--pad);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-copy {
      padding: clamp(112px, 13vh, 148px) 0 150px;
    }

    .hero-slides {
      min-height: clamp(345px, 42vh, 430px);
    }

    .hero-slide {
      justify-content: center;
    }

    .hero .actions {
      margin-top: 0;
    }

    .hero-controls {
      position: static;
      width: fit-content;
      margin: 18px auto 0;
      transform: none;
    }

    .hero-kinetic::before,
    .hero-kinetic::after {
      content: "";
      position: absolute;
      display: block;
      pointer-events: none;
      transition:
        inset .95s cubic-bezier(.2, .72, .2, 1),
        width .95s cubic-bezier(.2, .72, .2, 1),
        border-radius .95s cubic-bezier(.2, .72, .2, 1),
        transform .95s cubic-bezier(.2, .72, .2, 1),
        background-color .7s ease;
    }

    .hero-kinetic::before {
      right: 8%;
      bottom: -34%;
      width: min(70vw, 1060px);
      aspect-ratio: 1.7;
      border-radius: 48% 28% 50% 36%;
      background: rgba(37, 112, 213, .16);
      transform: rotate(-7deg);
    }

    .hero-kinetic::after {
      bottom: 4%;
      left: 8%;
      width: min(21vw, 310px);
      aspect-ratio: 1;
      border-radius: 28% 48% 34% 50%;
      background: rgba(255, 255, 255, .48);
      box-shadow: 0 24px 70px rgba(23, 72, 132, .1);
      transform: rotate(18deg);
    }

    .hero[data-carousel-index="1"] .hero-kinetic::before {
      right: -4%;
      bottom: -23%;
      width: min(76vw, 1150px);
      border-radius: 28% 50% 31% 46%;
      transform: rotate(6deg);
    }

    .hero[data-carousel-index="1"] .hero-kinetic::after {
      bottom: 9%;
      left: 15%;
      border-radius: 50% 30% 45% 26%;
      background: rgba(218, 235, 255, .65);
      transform: rotate(-16deg);
    }

    .hero[data-carousel-index="2"] .hero-kinetic::before {
      right: 5%;
      bottom: -41%;
      width: min(82vw, 1240px);
      border-radius: 50% 24% 42% 34%;
      transform: rotate(-12deg);
    }

    .hero[data-carousel-index="2"] .hero-kinetic::after {
      bottom: 2%;
      left: 22%;
      width: min(24vw, 360px);
      border-radius: 24% 50% 32% 44%;
      background: rgba(255, 255, 255, .56);
      transform: rotate(28deg);
    }

    .hero-geo-disc {
      right: -8%;
      bottom: -34%;
      width: min(66vw, 1000px);
    }

    .hero-geo-square {
      bottom: -47%;
      left: -12%;
      width: min(57vw, 860px);
    }

    .hero-geo-capsule {
      right: 23%;
      bottom: -1%;
      width: min(52vw, 790px);
      height: min(15vw, 220px);
    }

    .hero-geo-core {
      right: 18%;
      bottom: 10%;
    }

    .services-section {
      min-height: 320svh;
      padding: 0;
      overflow: visible;
      background: #f5f8fc;
    }

    .services-section > .motion-geometry {
      display: none;
    }

    .services-story-pin {
      position: sticky;
      top: 0;
      z-index: 2;
      height: 100svh;
      padding: clamp(84px, 10vh, 108px) var(--pad) 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 84% 54%, rgba(71, 139, 229, .12), transparent 30%),
        #f5f8fc;
    }

    .services-story-pin .section-heading {
      min-height: 0;
    }

    .services-story-pin .section-heading h2 {
      font-size: clamp(40px, 3.8vw, 61px);
    }

    .services-story-pin .service-explorer {
      min-height: 0;
      margin-top: clamp(24px, 4vh, 42px);
    }

    .services-story-pin .service-stage,
    .services-story-pin .service-panels {
      min-height: clamp(350px, 48vh, 440px);
      height: clamp(350px, 48vh, 440px);
    }

    .services-story-pin .service-panels {
      position: relative;
      width: min(65%, 590px);
      padding: 0;
    }

    .services-story-pin .service-panel {
      position: absolute;
      inset: 0;
      padding: clamp(34px, 4vw, 58px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .services-story-pin .service-panel[hidden] {
      display: none;
    }

    .services-story-pin .service-option {
      min-height: clamp(69px, 9.3vh, 88px);
    }

    .services-story-pin .scope-note {
      min-height: 0;
      margin-top: 14px;
      padding: 14px 18px;
    }

    .solution-row,
    .solution-row.solution-featured,
    .solution-row:nth-child(n) {
      min-height: 310px;
      background: rgba(255, 255, 255, .065);
      box-shadow: inset 0 0 0 1px rgba(213, 229, 250, .08);
    }

    .solution-row::before {
      display: none;
    }

    .solution-row::after {
      right: -72px;
      bottom: -92px;
      width: 240px;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(44, 126, 240, .4), rgba(104, 71, 216, .08));
      transform: scale(.72);
      transition: transform 520ms cubic-bezier(.2, .72, .2, 1), border-radius 380ms ease, background-color 380ms ease;
    }

    .solution-row:hover,
    .solution-row:focus-visible {
      background: #111a27;
      box-shadow: inset 0 0 0 1px rgba(213, 229, 250, .12);
      transform: translateY(-7px);
    }

    .solution-row:hover::after,
    .solution-row:focus-visible::after {
      border-radius: 35%;
      background: linear-gradient(145deg, rgba(44, 126, 240, .48), rgba(104, 71, 216, .12));
      transform: rotate(20deg) scale(1.02);
    }

    .case-story {
      min-height: 430svh;
      background: #fff;
    }

    .case-story-pin {
      position: sticky;
      top: 0;
      height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      background: #fff;
    }

    .case-story .case-intro {
      padding: clamp(80px, 9vh, 102px) var(--pad) clamp(22px, 3vh, 34px);
    }

    .case-story .case-intro h2 {
      font-size: clamp(39px, 3.5vw, 56px);
    }

    .case-story .case-showcase {
      padding: 0 var(--pad) clamp(22px, 3vh, 34px);
    }

    .case-story .case-feature {
      min-height: clamp(400px, 52vh, 490px);
    }

    .case-story .case-feature h3 {
      font-size: clamp(41px, 4.4vw, 67px);
    }

    .case-story .case-selector {
      align-self: stretch;
    }

    .case-story .case-selector::before {
      content: "SCROLL TO EXPLORE  ·  滚动查看项目";
      padding-top: 5px;
      padding-bottom: 6px;
    }

    .case-story .case-select {
      min-height: clamp(54px, 7.2vh, 66px);
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .support-projects {
      padding-top: 100px;
      padding-bottom: 105px;
      background: #f1f5f9;
    }

    .support-project-list {
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      border-radius: 24px;
      background: #e3eaf2;
    }

    .support-project-list span {
      min-height: 108px;
      padding: 18px;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      grid-template-rows: 1fr auto;
      gap: 4px 8px;
      align-content: center;
      border: 0;
      border-radius: 15px;
      color: #334d69;
      background: rgba(255, 255, 255, .82);
      font-size: 13px;
      transition: color .3s ease, background-color .3s ease, transform .3s ease;
    }

    .support-project-list span:hover {
      color: #0b5fcf;
      border-color: transparent;
      background: #fff;
      transform: translateY(-3px);
    }

    .support-project-list b {
      grid-row: 1 / 3;
      align-self: start;
      color: #8da0b5;
      font: 600 9px/1.5 var(--mono);
    }

    .support-project-list strong {
      align-self: end;
      font-size: 14px;
      font-weight: 650;
    }

    .support-project-list em {
      color: #8a9aac;
      font-size: 11px;
      font-style: normal;
    }

    .process-steps {
      padding: 0;
      gap: 14px;
      border-radius: 0;
      background: transparent;
    }

    .process-steps li,
    .process-steps li:nth-child(2),
    .process-steps li:nth-child(3),
    .process-steps li:nth-child(4) {
      position: relative;
      min-height: 300px;
      padding: 50px 36px 42px;
      overflow: hidden;
      border: 0;
      border-radius: 24px;
      color: inherit;
      background: transparent;
      box-shadow: none;
      transition: background-color .38s ease, transform .45s cubic-bezier(.2, .72, .2, 1), box-shadow .38s ease;
    }

    .process-steps li::before {
      display: none;
    }

    .process-steps li::after {
      content: "";
      position: absolute;
      right: -70px;
      bottom: -84px;
      width: 210px;
      aspect-ratio: 1;
      display: block;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(51, 129, 233, .3), rgba(75, 111, 188, .06));
      opacity: .42;
      transform: scale(.62);
      transition: transform .52s cubic-bezier(.2, .72, .2, 1), border-radius .42s ease, opacity .35s ease;
    }

    .process-steps li:hover,
    .process-steps li:focus-within {
      background: #f2f6fb;
      box-shadow: 0 22px 55px rgba(33, 75, 126, .08);
      transform: translateY(-6px);
    }

    .process-steps li:hover::after,
    .process-steps li:focus-within::after {
      border-radius: 34%;
      opacity: .78;
      transform: rotate(20deg) scale(.96);
    }

    .process-steps li:nth-child(4) h3,
    .process-steps li:nth-child(4) p {
      color: inherit;
    }

    .process-steps li:nth-child(4) em {
      color: #315475;
      background: #edf4fd;
    }

    .process-steps h3 {
      margin-top: 38px;
    }

    .process-summary {
      display: none;
    }

    .faq-section {
      min-height: 430svh;
      padding: 0;
      display: block;
      background: #fff;
    }

    .faq-story-pin {
      position: sticky;
      top: 0;
      height: 100svh;
      padding: clamp(92px, 11vh, 120px) var(--pad) clamp(42px, 6vh, 68px);
      display: grid;
      grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr);
      gap: clamp(60px, 8vw, 130px);
      align-items: center;
      overflow: hidden;
      background: #fff;
    }

    .faq-story-pin .faq-heading {
      position: relative;
      top: auto;
      align-self: center;
    }

    .faq-story-pin .faq-list {
      align-self: center;
    }

    .faq-story-pin .faq-list details,
    .faq-story-pin .faq-list details[open] {
      min-height: 0;
    }

    .faq-story-pin .faq-list summary {
      padding: clamp(17px, 2.3vh, 23px) 20px;
    }

    .faq-story-pin .faq-list details p {
      padding: 0 22px clamp(18px, 2.4vh, 24px) 64px;
    }

    /*
     * Sticky stories must not sit inside an overflow container.
     * The legacy full-page wrapper used overflow:hidden, which turned the tall
     * story sections into empty scroll space instead of keeping their stage pinned.
     */
    html,
    body {
      overflow-x: clip;
    }

    .page {
      overflow: visible;
    }

    .services-story-pin,
    .case-story-pin,
    .faq-story-pin {
      width: 100%;
      align-self: start;
    }

    /*
     * The kinetic field is a real background layer. A negative z-index placed
     * it behind the isolated hero background, making every shape disappear.
     */
    .hero-kinetic {
      z-index: 0 !important;
      opacity: 1;
      visibility: visible;
    }

    .hero-kinetic .motion-geometry,
    .hero-kinetic .geo {
      opacity: 1;
      visibility: visible;
    }

    .hero-copy {
      position: relative;
      z-index: 3;
    }

    /*
     * The former intersection-reveal system predates the sticky stories.
     * Keep the rebuilt sections visible and let their own state transitions
     * handle movement, otherwise rows can remain permanently transparent.
     */
    .motion-ready .solution-row {
      opacity: 1;
      transform: none;
    }

    .motion-ready .solution-row:hover,
    .motion-ready .solution-row:focus-visible {
      transform: translateY(-7px);
    }

    .solutions-stage,
    .solutions-stage-head,
    .solution-list {
      opacity: 1 !important;
      visibility: visible !important;
    }

    .solutions-stage-head,
    .solution-list {
      transform: none !important;
    }

    .motion-ready .faq-story-pin .faq-list details,
    .motion-ready .faq-story-pin .faq-list details.is-visible {
      opacity: 1;
      transform: none;
    }

    .experience-ready .services-section.journey-section .journey-lead,
    .experience-ready .solutions-stage.journey-section .journey-lead,
    .experience-ready .case-story .journey-lead,
    .experience-ready .faq-section.journey-section .journey-lead {
      opacity: 1;
      transform: none;
    }

    /*
     * Faster, continuously moving story stages. The previous 320–430svh
     * distances made each discrete content change feel like a blocked wheel.
     */
    .services-section {
      min-height: 215svh;
    }

    .case-story,
    .faq-section {
      min-height: 260svh;
    }

    .services-story-pin,
    .case-story-pin,
    .faq-story-pin {
      isolation: isolate;
    }

    .services-story-pin::before,
    .case-story-pin::before,
    .faq-story-pin::before {
      content: "";
      position: absolute;
      z-index: 0;
      display: block;
      pointer-events: none;
      will-change: transform;
    }

    .services-story-pin > *,
    .case-story-pin > *,
    .faq-story-pin > * {
      position: relative;
      z-index: 1;
    }

    .services-story-pin::before {
      right: -15vw;
      bottom: -30vh;
      width: min(67vw, 980px);
      aspect-ratio: 1.25;
      border-radius: 50% 27% 42% 34%;
      background: linear-gradient(145deg, rgba(43, 126, 231, .17), rgba(92, 149, 226, .035));
      transform:
        translate3d(
          calc(var(--story-progress, 0) * -13vw),
          calc(var(--story-progress, 0) * -16vh),
          0
        )
        rotate(calc(-8deg + var(--story-progress, 0) * 54deg));
    }

    .case-story-pin::before {
      left: -18vw;
      bottom: -38vh;
      width: min(59vw, 880px);
      aspect-ratio: 1;
      border-radius: 42% 50% 26% 48%;
      background: linear-gradient(145deg, rgba(43, 121, 221, .09), rgba(75, 117, 198, .025));
      transform:
        translate3d(
          calc(var(--story-progress, 0) * 22vw),
          calc(var(--story-progress, 0) * -19vh),
          0
        )
        rotate(calc(-18deg + var(--story-progress, 0) * 72deg));
    }

    .faq-story-pin::before {
      right: -19vw;
      top: -24vh;
      width: min(54vw, 820px);
      aspect-ratio: 1;
      border-radius: 50% 24% 46% 32%;
      background: linear-gradient(145deg, rgba(28, 109, 217, .095), rgba(89, 145, 224, .02));
      transform:
        translate3d(
          calc(var(--story-progress, 0) * -16vw),
          calc(var(--story-progress, 0) * 22vh),
          0
        )
        rotate(calc(8deg + var(--story-progress, 0) * 62deg));
    }

    .service-panel.is-active {
      animation: story-panel-enter .46s cubic-bezier(.2, .72, .2, 1) both;
    }

    .case-showcase.is-changing .case-feature {
      animation: story-panel-enter .48s cubic-bezier(.2, .72, .2, 1) both;
    }

    @keyframes story-panel-enter {
      from {
        opacity: .72;
        transform: translateY(9px) scale(.994);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /*
     * Make the banner geometry unmistakably visible while keeping it behind
     * the copy. Shapes continue to react to pointer and carousel state.
     */
    .hero-kinetic {
      z-index: 1 !important;
      background:
        radial-gradient(circle at 77% 22%, rgba(65, 139, 233, .16), transparent 32%),
        radial-gradient(circle at 16% 82%, rgba(118, 85, 211, .08), transparent 28%);
    }

    .hero-kinetic::before {
      right: -9%;
      bottom: -18%;
      width: min(76vw, 1160px);
      background: rgba(33, 113, 222, .28);
      box-shadow: 0 45px 120px rgba(28, 92, 180, .11);
    }

    .hero-kinetic::after {
      bottom: 8%;
      left: 5%;
      width: min(27vw, 410px);
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 28px 80px rgba(23, 72, 132, .13);
    }

    .hero-geo-disc {
      top: -23%;
      right: -7%;
      bottom: auto;
      width: min(61vw, 930px);
      opacity: .63;
    }

    .hero-geo-square {
      right: auto;
      bottom: -39%;
      left: -16%;
      width: min(54vw, 820px);
      opacity: .52;
    }

    .hero-geo-capsule {
      right: -8%;
      bottom: 7%;
      width: min(59vw, 900px);
      height: min(17vw, 250px);
      background: rgba(28, 98, 194, .2);
      opacity: 1;
    }

    .hero-geo-core {
      right: 17%;
      bottom: 13%;
      width: min(9vw, 132px);
      opacity: 1;
    }

    /*
     * Editorial project mosaic: unequal rows and surface geometry replace the
     * conventional equal 3×3 grid without reducing projects to small tags.
     */
    .support-project-list {
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      border-radius: 0;
      background: transparent;
    }

    .support-project-list span {
      position: relative;
      flex: 1 1 220px;
      min-height: 112px;
      overflow: hidden;
      border-radius: 23px;
      background: #fff;
      box-shadow: 0 16px 46px rgba(33, 75, 126, .055);
    }

    .support-project-list span:nth-child(1) { flex-basis: 21%; }
    .support-project-list span:nth-child(2) { flex-basis: 25%; }
    .support-project-list span:nth-child(3) { flex-basis: 19%; }
    .support-project-list span:nth-child(4) { flex-basis: 27%; }
    .support-project-list span:nth-child(5) { flex-basis: 28%; min-height: 138px; }
    .support-project-list span:nth-child(6) { flex-basis: 37%; min-height: 138px; }
    .support-project-list span:nth-child(7) { flex-basis: 29%; min-height: 138px; }
    .support-project-list span:nth-child(8) { flex-basis: 43%; }
    .support-project-list span:nth-child(9) { flex-basis: 51%; }

    .support-project-list span::after {
      content: "";
      position: absolute;
      right: -34px;
      bottom: -62px;
      width: 142px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(47, 129, 233, .24), rgba(102, 74, 205, .035));
      opacity: .55;
      transform: scale(.7);
      transition: transform .5s cubic-bezier(.2, .72, .2, 1), border-radius .4s ease, opacity .35s ease;
    }

    .support-project-list span:nth-child(3n + 2)::after {
      border-radius: 31%;
      background: linear-gradient(145deg, rgba(85, 111, 208, .19), rgba(48, 128, 233, .035));
    }

    .support-project-list span:nth-child(3n)::after {
      border-radius: 50% 24% 42% 32%;
    }

    .support-project-list span:hover::after {
      border-radius: 31%;
      opacity: .9;
      transform: rotate(24deg) scale(1.03);
    }

    .support-project-list b,
    .support-project-list strong,
    .support-project-list em {
      position: relative;
      z-index: 1;
    }

    /*
     * The four cooperation steps form one progression. Geometry grows and
     * changes from a small signal to a broader implementation surface.
     */
    .process-section .compact-heading {
      margin-bottom: 0;
    }

    .process-steps {
      margin-top: 42px;
    }

    .process-steps li::after {
      display: block;
    }

    .process-steps li:nth-child(1)::after {
      right: -36px;
      bottom: -44px;
      width: 126px;
      opacity: .3;
      transform: scale(.52);
    }

    .process-steps li:nth-child(2)::after {
      right: -48px;
      bottom: -57px;
      width: 166px;
      border-radius: 38%;
      opacity: .39;
      transform: rotate(10deg) scale(.61);
    }

    .process-steps li:nth-child(3)::after {
      right: -61px;
      bottom: -70px;
      width: 205px;
      border-radius: 50% 28% 44% 34%;
      opacity: .48;
      transform: rotate(17deg) scale(.7);
    }

    .process-steps li:nth-child(4)::after {
      right: -76px;
      bottom: -87px;
      width: 252px;
      border-radius: 28% 50% 34% 46%;
      opacity: .57;
      transform: rotate(24deg) scale(.79);
    }

    .process-steps li:nth-child(1):hover::after { transform: rotate(12deg) scale(.82); }
    .process-steps li:nth-child(2):hover::after { transform: rotate(24deg) scale(.88); }
    .process-steps li:nth-child(3):hover::after { transform: rotate(36deg) scale(.94); }
    .process-steps li:nth-child(4):hover::after { transform: rotate(48deg) scale(1); }

    /*
     * Desktop FAQ keeps every question row at a fixed height. The selected
     * answer crossfades in a separate stage, so fast scrolling never makes the
     * list itself expand, contract or bounce.
     */
    .faq-story-pin .faq-list details,
    .faq-story-pin .faq-list details[open] {
      height: 52px;
      padding: 0;
      overflow: hidden;
      transition: background-color .28s ease, color .28s ease;
    }

    .faq-story-pin .faq-list summary {
      min-height: 52px;
      padding: 13px 18px;
    }

    .faq-story-pin .faq-list details p {
      display: none;
    }

    .faq-answer-stage {
      position: relative;
      min-height: 142px;
      margin-top: 15px;
      padding: 25px 30px 27px;
      overflow: hidden;
      border-radius: 22px;
      color: #28415e;
      background: #edf4fc;
    }

    .faq-answer-stage::after {
      content: "";
      position: absolute;
      right: -50px;
      bottom: -76px;
      width: 180px;
      aspect-ratio: 1;
      border-radius: 50% 27% 45% 34%;
      background: linear-gradient(145deg, rgba(42, 124, 230, .22), rgba(91, 76, 210, .035));
      transform: rotate(calc(10deg + var(--story-progress, 0) * 58deg));
    }

    .faq-answer-stage > * {
      position: relative;
      z-index: 1;
    }

    .faq-answer-stage > span {
      display: block;
      color: #0b63d8;
      font: 650 9px/1 var(--mono);
      letter-spacing: .11em;
    }

    .faq-answer-stage > p {
      max-width: 670px;
      margin: 14px 0 0;
      color: #536b84;
      font-size: 13px;
      line-height: 1.78;
    }

    .faq-answer-stage.is-changing > span,
    .faq-answer-stage.is-changing > p {
      animation: faq-answer-enter .38s cubic-bezier(.2, .72, .2, 1) both;
    }

    @keyframes faq-answer-enter {
      from {
        opacity: .34;
        transform: translateY(7px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /*
     * Visual rhythm refinement: keep only two real scroll stories. Selected
     * cases return to a natural-height section with automatic/hover preview.
     */
    .services-section {
      min-height: 195svh;
    }

    .faq-section {
      min-height: 230svh;
    }

    .case-story {
      min-height: 0;
    }

    .case-story-pin {
      position: relative;
      top: auto;
      height: auto;
      overflow: visible;
    }

    .case-story-pin::before {
      display: none;
    }

    .case-story .case-intro {
      padding-top: 92px;
      padding-bottom: 34px;
      gap: 20px;
    }

    .case-story .case-intro > p {
      margin-top: 0;
    }

    .case-story .case-showcase {
      padding-bottom: 94px;
    }

    .case-story .case-selector::before {
      content: "AUTO PREVIEW  ·  悬停或点击切换";
    }

    /*
     * Hero surfaces stay deliberately quiet and concentrate away from the
     * reading area. A soft white veil guarantees copy contrast during morphs.
     */
    .hero-kinetic {
      background:
        radial-gradient(circle at 77% 22%, rgba(65, 139, 233, .075), transparent 34%),
        radial-gradient(circle at 16% 82%, rgba(118, 85, 211, .035), transparent 30%);
    }

    .hero-kinetic::before {
      background: rgba(58, 128, 218, .115);
      box-shadow: 0 38px 110px rgba(28, 92, 180, .055);
    }

    .hero-kinetic::after {
      background: rgba(255, 255, 255, .62);
      box-shadow: 0 24px 70px rgba(23, 72, 132, .07);
    }

    .hero-geo-disc {
      opacity: .3;
      filter: saturate(.7);
    }

    .hero-geo-square {
      opacity: .24;
    }

    .hero-geo-capsule {
      background: rgba(65, 116, 184, .095);
      opacity: .76;
    }

    .hero-geo-core {
      opacity: .68;
    }

    .hero::after {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse at 50% 38%,
        rgba(248, 251, 255, .9) 0 20%,
        rgba(248, 251, 255, .55) 38%,
        rgba(248, 251, 255, 0) 70%
      );
    }

    /*
     * The service card already owns the geometry interaction. Remove the
     * second background animation and rely on the blue active surface itself
     * rather than an overlapping selection dot.
     */
    .services-story-pin::before {
      display: none;
    }

    .service-option.is-active {
      padding-right: 18px;
    }

    .service-option.is-active::after {
      display: none;
    }

    /*
     * Tighten section pacing and give the project-fit headline enough width to
     * preserve its intended two-line reading rhythm on desktop.
     */
    .solutions-stage {
      padding-top: 108px;
      padding-bottom: 112px;
    }

    .support-projects {
      padding-top: 82px;
      padding-bottom: 86px;
    }

    .process-section {
      padding-top: 96px;
      padding-bottom: 100px;
    }

    .fit-section {
      padding-top: 102px;
      padding-bottom: 106px;
      grid-template-columns: minmax(390px, .82fr) minmax(0, 1.18fr);
      gap: clamp(46px, 6vw, 96px);
    }

    .fit-section h2 {
      font-size: clamp(40px, 3.4vw, 54px);
      line-height: 1.08;
    }

    .contact-section {
      padding-top: 96px;
      padding-bottom: 100px;
    }

    /*
     * Case preview uses one fixed stage height, so automatic content changes
     * never push the "more work" section below it up or down.
     */
    .case-story .case-showcase {
      align-items: stretch;
    }

    .case-story .case-feature,
    .case-story .case-selector {
      height: 500px;
      min-height: 500px;
    }

    .case-story .case-selector {
      display: grid;
      grid-template-rows: auto repeat(6, minmax(0, 1fr));
    }

    .case-story .case-select {
      position: relative;
      min-height: 0;
      overflow: hidden;
      transition:
        color .32s ease,
        background-color .32s ease,
        box-shadow .32s ease,
        transform .32s ease;
    }

    .case-story .case-select::after {
      content: "";
      position: absolute;
      right: 14px;
      bottom: 0;
      left: 14px;
      height: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .76);
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left;
    }

    .case-story .case-select.is-active {
      color: #fff;
      background: #084fae;
      box-shadow: 0 14px 34px rgba(5, 64, 142, .28);
    }

    .case-story .case-select.is-active::after {
      opacity: 1;
      animation: case-preview-progress 3.8s linear both;
    }

    @keyframes case-preview-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    .support-projects {
      grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
      gap: clamp(44px, 6vw, 96px);
    }

    .support-projects > div:first-child {
      align-self: center;
    }

    .support-projects h3 {
      font-size: clamp(32px, 2.9vw, 44px);
      line-height: 1.1;
    }

    .support-project-list span.is-active {
      color: #173a60;
      background: #f0f6fd;
      box-shadow: 0 16px 42px rgba(14, 73, 147, .1);
      transform: translateY(-3px);
    }

    .support-project-list span.is-active b {
      color: #2b67a7;
    }

    .support-project-list span.is-active strong {
      color: #173a60;
    }

    .support-project-list span.is-active em {
      color: #526f8e;
    }

    .support-project-list span.is-active::after {
      right: -48px;
      bottom: -70px;
      width: 132px;
      border-radius: 36%;
      background: #3c7fc6;
      opacity: .72;
      transform: rotate(22deg) scale(.86);
    }

    .process-steps {
      margin-top: 10px;
    }

    .process-steps li,
    .process-steps li:nth-child(2),
    .process-steps li:nth-child(3),
    .process-steps li:nth-child(4) {
      min-height: 220px;
      padding: 22px 26px 26px;
    }

    .process-no,
    .process-steps li:nth-child(4) .process-no {
      width: fit-content;
      min-width: 0;
      padding: 7px 11px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      color: #195fa9;
      background: #e8f1fc;
      font-size: 10px;
      letter-spacing: .04em;
    }

    .process-no::before {
      content: "STEP";
      color: #7893b2;
      font-size: 8px;
      letter-spacing: .1em;
    }

    .process-steps h3 {
      margin-top: 24px;
    }

    .process-steps p {
      margin-top: 13px;
    }

    .process-steps em {
      margin-top: 18px;
    }

    .process-steps li:nth-child(1)::after {
      right: -30px;
      bottom: -38px;
      width: 106px;
    }

    .process-steps li:nth-child(2)::after {
      right: -39px;
      bottom: -46px;
      width: 136px;
    }

    .process-steps li:nth-child(3)::after {
      right: -48px;
      bottom: -55px;
      width: 164px;
    }

    .process-steps li:nth-child(4)::after {
      right: -58px;
      bottom: -66px;
      width: 194px;
    }

    /*
     * FAQ is back in normal document flow. Hover/focus still selects and opens
     * one native details item, with the answer inside that item.
     */
    .faq-section {
      min-height: 0;
    }

    .faq-story-pin {
      position: relative;
      top: auto;
      height: auto;
      padding: 96px var(--pad) 100px;
      align-items: start;
      overflow: visible;
    }

    .faq-story-pin::before {
      display: none;
    }

    .faq-story-pin .faq-list details,
    .faq-story-pin .faq-list details[open] {
      height: auto;
      min-height: 0;
      padding: 0;
      overflow: visible;
      transition: background-color .3s ease, color .3s ease;
    }

    .faq-story-pin .faq-list details[open] {
      background: #edf4fc;
    }

    .faq-story-pin .faq-list summary {
      min-height: 0;
      padding: 20px 18px;
    }

    .faq-story-pin .faq-list details p {
      display: block;
      margin: 0;
      padding: 0 22px 22px 62px;
    }

    .hero-geo-core {
      background: rgba(80, 111, 148, .34);
      box-shadow: 0 0 0 16px rgba(255, 255, 255, .13);
      opacity: .48;
    }

    .nav {
      gap: clamp(14px, 1.7vw, 28px);
    }

    .site-footer {
      grid-template-columns: minmax(250px, .5fr) minmax(0, 1.5fr);
      column-gap: 72px;
      row-gap: 35px;
      padding-top: 54px;
    }

    .footer-brand > p {
      max-width: 440px;
      font-size: 14px;
      line-height: 1.8;
    }

    .footer-contact {
      max-width: 260px;
      margin-top: 0;
      display: grid;
      gap: 8px;
    }

    .footer-contact a,
    .footer-contact span {
      width: fit-content;
      color: #5d728a;
      font-size: 12px;
      line-height: 1.65;
    }

    .footer-contact a {
      color: #31506f;
    }

    .footer-contact a:hover,
    .footer-contact a:focus-visible {
      color: #0b63d8;
    }

    .footer-links {
      grid-template-columns:
        repeat(4, minmax(92px, .9fr))
        minmax(210px, 1.5fr);
      gap: clamp(18px, 2.3vw, 34px);
    }

    .footer-links span {
      margin-bottom: 9px;
      font-size: 11px;
    }

    .footer-links a {
      font-size: 13px;
      line-height: 1.55;
    }

    .footer-contact-column {
      min-width: 0;
      gap: 0 !important;
    }

    .footer-contact-column > span {
      margin-bottom: 15px;
    }

    .footer-contact span {
      margin: 0;
      color: #5d728a;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    .footer-friends {
      grid-column: 1 / -1;
      padding: 14px 0;
      display: flex;
      flex-wrap: wrap;
      gap: 12px 26px;
      align-items: center;
      border-top: 1px solid rgba(202, 221, 244, .15);
      border-bottom: 1px solid rgba(202, 221, 244, .15);
    }

    .footer-friends span {
      margin-right: 8px;
      color: #677b95;
      font-size: 11px;
      font-weight: 720;
      letter-spacing: .08em;
    }

    .footer-friends a {
      color: #9eafc4;
      font-size: 12px;
    }

    .footer-friends a:hover,
    .footer-friends a:focus-visible {
      color: #fff;
    }

    .footer-bottom {
      margin-top: 0;
      padding-top: 0;
      min-height: 0;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      border-top: 0;
      font-size: 11px;
      line-height: 1.65;
    }

    .footer-copyright {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      align-items: center;
    }

    .footer-inline-friends {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 8px 15px;
      align-items: center;
    }

    .footer-inline-friends > span {
      color: #677b95;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
    }

    .footer-inline-friends a {
      color: #9eafc4;
    }

    .footer-inline-friends a:hover,
    .footer-inline-friends a:focus-visible {
      color: #fff;
    }

    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px 22px;
    }

    @media (max-height: 760px) and (min-width: 881px) {
      .services-story-pin {
        padding-top: 76px;
        padding-bottom: 18px;
      }

      .services-story-pin .section-heading h2,
      .case-story .case-intro h2,
      .faq-story-pin .faq-heading h2 {
        font-size: 39px;
      }

      .services-story-pin .section-heading > div:last-child > p,
      .case-story .case-intro > p,
      .faq-story-pin .faq-heading > p {
        margin-top: 13px;
        line-height: 1.6;
      }

      .services-story-pin .service-stage,
      .services-story-pin .service-panels {
        min-height: 335px;
        height: 335px;
      }

      .services-story-pin .scope-note {
        display: none;
      }

      .case-story .case-intro {
        padding-top: 72px;
        padding-bottom: 18px;
      }

      .case-story .case-feature {
        min-height: 390px;
      }

      .case-story .case-select {
        min-height: 51px;
      }

      .faq-story-pin {
        padding-top: 80px;
        padding-bottom: 26px;
      }

      .faq-story-pin .faq-list summary {
        padding-top: 15px;
        padding-bottom: 15px;
      }

      .faq-story-pin .faq-list details p {
        padding-bottom: 15px;
        line-height: 1.65;
      }
    }

    @media (max-width: 1100px) {
      .nav {
        gap: 15px;
      }

      .nav a {
        font-size: 10px;
      }

      .site-footer {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 30px;
      }
    }

    @media (max-width: 880px) {
      .hero {
        min-height: 760px;
      }

      .hero-copy {
        padding-top: 120px;
        padding-bottom: 150px;
      }

      .services-section,
      .case-story,
      .faq-section {
        min-height: 0;
      }

      .services-story-pin,
      .case-story-pin,
      .faq-story-pin {
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
      }

      .services-story-pin {
        padding: 88px var(--pad);
      }

      .services-story-pin .service-stage,
      .services-story-pin .service-panels {
        min-height: 470px;
        height: 470px;
      }

      .case-story .case-intro {
        padding-top: 88px;
      }

      .case-story .case-showcase {
        padding-bottom: 88px;
      }

      .solutions-stage,
      .process-section,
      .fit-section,
      .contact-section {
        padding-top: 78px;
        padding-bottom: 82px;
      }

      .fit-section {
        grid-template-columns: 1fr;
        gap: 42px;
      }

      .fit-section h2 {
        font-size: clamp(40px, 7vw, 52px);
      }

      .case-story .case-feature {
        height: auto;
        min-height: 540px;
      }

      .case-story .case-selector {
        height: auto;
        min-height: 0;
        grid-template-rows: auto;
      }

      .support-projects {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .support-project-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .support-project-list span:nth-child(n) {
        flex: 1 1 calc(50% - 6px);
        min-height: 108px;
      }

      .faq-story-pin {
        padding: 88px var(--pad);
        grid-template-columns: 1fr;
        gap: 42px;
      }

      .faq-story-pin .faq-list details,
      .faq-story-pin .faq-list details[open] {
        height: auto;
        min-height: 62px;
      }

      .faq-story-pin .faq-list details p {
        display: block;
      }

      .faq-answer-stage {
        display: none;
      }

      .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 38px;
      }

      .footer-bottom {
        grid-template-columns: 1fr;
        gap: 9px;
      }

      .footer-copyright,
      .footer-inline-friends {
        align-items: flex-start;
      }

      .footer-legal {
        justify-content: flex-start;
      }
    }

    @media (max-width: 620px) {
      .hero {
        min-height: 780px;
      }

      .hero-copy {
        padding-top: 108px;
        padding-bottom: 150px;
      }

      .hero-slides {
        min-height: 382px;
      }

      .hero-controls {
        margin-top: 15px;
      }

      .hero-kinetic::before {
        right: -24%;
        bottom: -11%;
        width: 124vw;
      }

      .hero-kinetic::after {
        bottom: 5%;
        left: -4%;
        width: 42vw;
      }

      .services-story-pin {
        padding: 76px 22px;
      }

      .services-story-pin .service-stage,
      .services-story-pin .service-panels {
        min-height: 520px;
        height: 520px;
      }

      .services-story-pin .service-panel {
        padding: 34px 28px 205px;
        justify-content: flex-start;
      }

      .case-story .case-intro {
        padding: 76px 22px 38px;
      }

      .case-story .case-showcase {
        padding: 0 22px 76px;
      }

      .support-projects {
        padding: 76px 22px;
      }

      .solutions-stage,
      .process-section,
      .fit-section,
      .contact-section {
        padding-top: 68px;
        padding-bottom: 72px;
      }

      .fit-section h2 {
        font-size: 37px;
      }

      .footer-links {
        grid-template-columns: 1fr;
      }

      .support-project-list {
        grid-template-columns: 1fr;
      }

      .support-project-list span,
      .support-project-list span:nth-child(n) {
        flex-basis: 100%;
        min-height: 88px;
      }

      .process-steps li,
      .process-steps li:nth-child(2),
      .process-steps li:nth-child(3),
      .process-steps li:nth-child(4) {
        min-height: 0;
        padding: 38px 28px 44px;
      }

      .faq-story-pin {
        padding: 76px 22px;
      }

      .site-footer {
        padding-right: 22px;
        padding-left: 22px;
      }

      .footer-links {
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
      }

      .footer-friends {
        align-items: flex-start;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .services-section,
      .case-story,
      .faq-section {
        min-height: 0;
      }

      .services-story-pin,
      .case-story-pin,
      .faq-story-pin {
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
      }

      .hero-kinetic::before,
      .hero-kinetic::after,
      .process-steps li,
      .process-steps li::after {
        transition: none !important;
      }
    }

/*
 * Integration bridge
 * Keeps the approved option-a cascade intact while adapting the production
 * navigation, content-model markup, real lead form and expanded footer.
 */

.home-page .topbar {
  height: 76px;
  display: block;
  padding: 0;
}

.home-page .topbar__inner {
  width: 100%;
  height: 100%;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 1fr);
  align-items: center;
}

.home-page .topbar .brand {
  justify-self: start;
}

.home-page .topbar .nav {
  justify-self: center;
}

.home-page .topbar .header-cta {
  justify-self: end;
}

.home-page .topbar .header-cta > [aria-hidden] {
  display: none;
}

.home-page .topbar .nav-toggle {
  justify-self: end;
}

.home-page .hero-facts span {
  justify-content: center;
  text-align: center;
}

/*
 * Reset collisions from the shared secondary-page stylesheet. The approved
 * homepage geometry uses named shape classes; older nth-child rules otherwise
 * turn those shapes into oversized rings and squeeze the copy columns.
 */
.home-page .service-stage__geometry > .service-shape-disc {
  width: 42%;
  border: 0;
  background: rgba(42, 118, 216, .16);
}

.home-page .service-stage__geometry > .service-shape-square {
  width: 26%;
  border: 0;
  background: rgba(23, 92, 186, .14);
}

.home-page .service-stage__geometry > .service-shape-core {
  width: 62px;
  background: #2f7cde;
  box-shadow: 0 0 0 16px rgba(47, 124, 222, .08);
}

.home-page .service-stage__geometry > .service-shape-track {
  width: 34%;
  height: 34%;
  border: 0;
  background: rgba(76, 142, 228, .09);
}

.home-page .services-story-pin .service-panel {
  width: 100%;
  min-height: 100%;
}

.home-page .case-story {
  padding: 0;
}

.home-page .case-feature {
  display: block;
}

.home-page .case-visual > .case-visual-disc {
  width: 68%;
  border: 0;
  background: rgba(139, 192, 255, .16);
}

.home-page .case-visual > .case-visual-frame {
  width: 34%;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(3, 45, 105, .18);
  box-shadow: none;
}

.home-page .case-visual > .case-visual-core {
  width: 64px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 16px rgba(255, 255, 255, .09);
}

.home-page .case-visual > .case-visual-track {
  width: 44%;
  height: 16%;
  border: 0;
  background: rgba(4, 37, 83, .27);
  box-shadow: none;
}

.home-page .support-projects {
  margin-top: 0;
}

.home-page .faq-list summary h3 {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.home-page .fit-card li p {
  display: block;
  margin: 7px 0 0;
  color: #718096;
  font-size: 11px;
  line-height: 1.65;
}

.home-page .diagnosis-form .form-row--project {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-page .diagnosis-form .form-problem,
.home-page .diagnosis-form .consent {
  margin-top: 14px;
}

.home-page .diagnosis-form .honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.home-page .diagnosis-form .consent {
  display: flex;
  align-items: center;
  gap: 9px;
}

.home-page .diagnosis-form .consent input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  accent-color: #0b63d8;
}

.home-page .diagnosis-form .consent span,
.home-page .diagnosis-form .form-status {
  color: #61758c;
  font-size: 11px;
  line-height: 1.65;
}

.home-page .diagnosis-form .consent span {
  margin: 0;
}

.home-page .diagnosis-form .consent a {
  margin-left: 3px;
  color: #0b63d8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-page .diagnosis-form .form-submit {
  width: 100%;
  margin-top: 18px;
}

.home-page .diagnosis-form .form-status {
  margin: 12px 0 0;
}

.home-page .diagnosis-form .form-status.is-error {
  color: #a73737;
}

.home-page .diagnosis-form .form-status.is-success {
  color: #08785f;
}

.home-page .site-footer {
  display: block;
  padding: 54px var(--pad) 27px;
}

.home-page .site-footer__main {
  display: grid;
  grid-template-columns: minmax(250px, .5fr) minmax(0, 1.5fr);
  column-gap: 72px;
}

.home-page .footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, .9fr)) minmax(210px, 1.5fr);
  gap: clamp(18px, 2.3vw, 34px);
}

.home-page .footer-links > div {
  display: grid;
  align-content: start;
  gap: 8px;
}

.home-page .footer-links h2 {
  margin: 0 0 7px;
  color: #7a8ba0;
  font: 650 11px/1.4 var(--mono);
  letter-spacing: .04em;
}

.home-page .footer-links a,
.home-page .footer-contact span {
  color: #5d728a;
  font-size: 12px;
  line-height: 1.65;
}

.home-page .footer-links a:hover,
.home-page .footer-links a:focus-visible {
  color: #0b63d8;
}

.home-page .footer-contact {
  max-width: 260px;
  margin: 0;
}

.home-page .site-footer__bottom {
  margin-top: 38px;
  padding-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 18px 32px;
  border-top: 1px solid #dfe7f1;
  color: #7b8da1;
  font-size: 10px;
  line-height: 1.65;
}

.home-page .friend-links,
.home-page .legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.home-page .site-footer__bottom a {
  color: #5d728a;
}

@media (min-width: 881px) {
  .home-page .services-story-pin .service-panels {
    width: min(72%, 620px);
  }

  .home-page .services-story-pin .service-panel {
    width: 100%;
    min-height: 100%;
    padding: 42px clamp(38px, 4vw, 52px);
  }

  .home-page .services-story-pin .service-panel h3 {
    margin-top: 19px;
    font-size: clamp(31px, 2.75vw, 42px);
    line-height: 1.06;
  }

  .home-page .services-story-pin .service-panel p {
    margin-top: 19px;
    line-height: 1.72;
  }

  .home-page .services-story-pin .service-panel ul {
    margin-top: 20px;
  }

  .home-page .case-story .case-intro {
    padding-top: 72px;
    padding-bottom: 30px;
  }

  .home-page .case-story .case-showcase {
    padding-bottom: 66px;
  }

  .home-page .case-feature-copy {
    width: min(70%, 600px);
    height: 100%;
    padding: 48px clamp(38px, 4.2vw, 56px);
  }

  .home-page .case-feature h3 {
    margin-top: 18px;
    font-size: clamp(38px, 3.55vw, 52px);
    line-height: 1.04;
  }

  .home-page .case-feature-copy > p {
    margin-top: 19px;
    line-height: 1.72;
  }

  .home-page .case-feature-meta {
    margin-top: 18px;
  }

  .home-page .case-feature-copy > a {
    margin-top: 24px;
  }

  .home-page .case-visual {
    inset: 0 0 0 58%;
  }
}

@media (max-width: 1180px) {
  .home-page .topbar__inner {
    grid-template-columns: 1fr auto;
  }

  .home-page .topbar .nav {
    display: none;
  }

  .home-page .site-footer__main {
    grid-template-columns: 1fr;
    row-gap: 38px;
  }

  .home-page .footer-links {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }

  .home-page .footer-contact {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 880px) {
  .home-page .topbar__inner {
    grid-template-columns: 1fr auto auto;
    gap: 12px;
  }

  .home-page .services-story-pin .service-panels {
    width: 100%;
  }

  .home-page .topbar .nav-toggle {
    display: inline-flex;
  }

  .home-page .topbar .nav.is-open {
    inset: 68px 0 0;
    width: auto;
    height: calc(100dvh - 68px);
    max-width: none;
    padding: 28px var(--pad);
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    justify-self: stretch;
    overflow-y: auto;
  }

  .home-page .topbar .nav.is-open a {
    width: 100%;
  }

  .home-page .nav-toggle[aria-expanded="true"] span:not(.sr-only) {
    position: absolute;
  }

  .home-page .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-of-type(2) {
    transform: rotate(45deg);
  }

  .home-page .nav-toggle[aria-expanded="true"] span:not(.sr-only):nth-of-type(3) {
    transform: rotate(-45deg);
  }

  .home-page .diagnosis-form .form-row--project,
  .home-page .diagnosis-form .form-row {
    grid-template-columns: 1fr;
  }

  .home-page .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .footer-contact {
    grid-column: auto;
  }

  .home-page .site-footer__bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .home-page .topbar .header-cta {
    display: none;
  }

  .home-page .topbar__inner {
    grid-template-columns: 1fr auto;
  }

  .home-page .footer-links {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page [data-geo-depth] {
    transform: none !important;
  }
}

/*
 * Site-wide Chinese typography refinement for the approved homepage.
 * Keep display copy spacious and make the intended phrase break explicit.
 */
.home-page .hero-copy {
  width: min(1180px, 100%);
}

.home-page .hero-slide h1,
.home-page .hero-slide h2 {
  max-width: 1160px;
  line-height: 1.12;
  letter-spacing: -0.028em;
}

.home-page .hero-title-line {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  display: block;
  white-space: nowrap;
}

.home-page .hero-title-line:first-child {
  color: #10243d;
}

.home-page main :where(h2, h3) {
  line-height: 1.15;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.home-page main h3 {
  line-height: 1.22;
  letter-spacing: -0.018em;
}

.home-page main p {
  line-height: 1.76;
  text-wrap: pretty;
}

.home-page .services-story-pin .service-panel h3,
.home-page .case-feature h3 {
  line-height: 1.16;
  letter-spacing: -0.022em;
}

.home-page .semantic-title-line {
  display: block;
}

.home-page .faq-section h2 {
  font-size: clamp(35px, 2.8vw, 52px);
}

.home-page .contact-section h2 {
  font-size: clamp(40px, 3.3vw, 56px);
}

@media (min-width: 881px) {
  .home-page .semantic-title-line {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }

  .home-page .contact-section {
    grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr);
    gap: clamp(48px, 5vw, 90px);
  }
}

/*
 * The active state and progress line already explain how case preview works.
 * Give the case list enough room to scan titles instead of spending a row on
 * an instructional label or leaving the feature stage unnecessarily wide.
 */
.home-page .case-story .case-selector::before {
  display: none;
  content: none;
}

@media (min-width: 881px) {
  .home-page .case-story .case-selector {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1181px) {
  .home-page .case-story .case-showcase {
    grid-template-columns: minmax(0, 1.1fr) minmax(440px, .9fr);
    gap: clamp(18px, 1.35vw, 26px);
  }

  .home-page .case-feature-copy {
    width: min(72%, 650px);
  }

  .home-page .case-visual {
    left: 62%;
  }

  .home-page .case-story .case-select {
    grid-template-columns: 34px minmax(0, 1fr) minmax(68px, auto);
    padding-inline: 18px;
  }
}

@media (max-width: 880px) {
  .home-page .process-section .section-heading {
    grid-template-columns: 1fr;
  }

  .home-page .process-section .section-heading > div:last-child,
  .home-page .process-section .section-heading h2 {
    width: 100%;
    max-width: none;
  }

  .home-page .hero-slide h1,
  .home-page .hero-slide h2 {
    line-height: 1.13;
    letter-spacing: -0.022em;
  }
}

@media (max-width: 620px) {
  .home-page main :where(h2, h3) br {
    display: none;
  }

  .home-page .hero-slide h1,
  .home-page .hero-slide h2 {
    font-size: clamp(30px, 9.4vw, 46px);
    line-height: 1.16;
    letter-spacing: -0.018em;
  }
}