@charset "UTF-8";
.methodology-section {
  --method-ink: #182d49;
  padding: 100px 0 88px;
  background: #fff;
  color: #1d1d1f;
  border-bottom: 1px solid #e7e7eb;
}
.method-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: end; margin-bottom: 48px; }
.method-label { margin: 0 0 22px; color: #61616a; font-size: 14px; font-weight: 500; }
.methodology-section #methodology-title { margin: 0; font-size: clamp(48px,5.5vw,76px); font-weight: 600; line-height: 1.03; letter-spacing: -.055em; }
html[lang="zh-CN"] .methodology-section #methodology-title { line-height: 1.03; letter-spacing: -.055em; }
.method-promise { margin: 0 0 16px; white-space: pre-line; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -.025em; }
.method-introduction { margin: 0; font-size: 16px; line-height: 1.8; color: #67676f; text-wrap: pretty; }
.method-explorer { display: grid; grid-template-columns: minmax(310px, 390px) minmax(0,1fr); gap: 26px; align-items: center; min-height: 555px; }
.method-options { list-style: none; padding: 0; margin: 0; min-width: 0; }
.method-option { margin: 0 0 12px; border-radius: 28px; background: transparent; transition: background .4s ease; }
.method-option:last-child { margin-bottom: 0; }
.method-option.is-active { background: #f0f0f3; }
.method-option h3 { margin: 0; font-weight: 500; font-size: 17px; line-height: 1.5; }
.method-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; border-radius: 40px; padding: 18px 22px; max-width: 100%;
  background: #f0f0f3; color: #1d1d1f; text-align: left;
  font: inherit; transition: background .25s ease, color .25s ease;
}
.method-trigger:hover { background: #e6e6eb; }
.method-trigger:focus-visible { outline: 3px solid #0071e3; outline-offset: 4px; }
.method-option.is-active .method-trigger { background: transparent; color: var(--method-ink); }
.method-number { font-size: 12px; color: #686873; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.method-toggle { width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; position: relative; flex: 0 0 auto; }
.method-toggle::before,.method-toggle::after { content: ""; width: 10px; height: 1px; background: currentColor; position: absolute; left: 5px; top: 10px; }
.method-toggle::after { transform: rotate(90deg); transition: transform .45s ease; }
.method-trigger[aria-expanded="true"] .method-toggle::after { transform: rotate(0); }
.method-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1), opacity .25s ease, visibility 0s .5s; }
.method-panel-inner { overflow: hidden; min-height: 0; }
.method-panel p { margin: 0; padding: 0 24px 28px; font-size: 16px; line-height: 1.85; color: #52525b; text-wrap: pretty; }
.method-option.is-active .method-panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .5s cubic-bezier(.22,1,.36,1), opacity .4s ease, visibility 0s; }
.method-stage { min-width: 0; position: relative; }
.method-diagram { position: relative; width: 100%; aspect-ratio: 760/560; isolation: isolate; }
.method-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.method-box { transform-origin: 50% 50%; }
.method-box path { stroke-width: 1.2; }
.method-links path { stroke: #7b9bbb; stroke-width: 1.3; stroke-linecap: round; }
.method-route { stroke: #47779f; stroke-width: 2.5; stroke-linecap: round; }
.method-point { position: absolute; transform: translate(-50%,-50%); aspect-ratio: 1; z-index: 2; }
.method-orb {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: #a5bdd6;
}
.method-point-0 .method-orb { background: #244769; }
.method-point-0 .method-orb::after { content: ''; position: absolute; inset: -10px; border: 1px solid var(--accent,#47779f); border-radius: 50%; opacity: 0; transform: scale(.9); transition: opacity .6s, transform .8s cubic-bezier(.22,1,.36,1); }
[data-step="1"] .method-point-0 .method-orb::after { opacity: .4; transform: scale(1); }
.method-point-label {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 90px; width: max-content; max-width: 150px; text-align: center;
  font-size: 16px; line-height: 1.45; font-weight: 500; color: #3f536c;
  transition: opacity .25s;
}
.method-point-0 .method-point-label { color: var(--method-ink); }
html[lang="zh-CN"] .method-introduction { line-height: 1.85; }
html[lang="zh-CN"] .method-panel p { line-height: 1.95; }
@media(min-width:1400px) { .method-explorer { grid-template-columns: 400px minmax(0,1fr); gap: 36px; } }
@media(min-width:761px) and (max-width:1050px) {
  .method-heading { gap: 40px; }
  .method-explorer { grid-template-columns: minmax(285px,.85fr) minmax(0,1.15fr); gap: 12px; min-height: 520px; }
  .method-trigger { padding: 16px 18px; gap: 8px; }
  .method-option h3 { font-size: 16px; }
  .method-panel p { padding-inline: 20px; }
  .method-point-label { font-size: 14px; min-width: 65px; max-width: 90px; top: calc(100% + 10px); }
}
@media(max-width:760px) {
  .methodology-section { padding: 72px 0 66px; }
  .method-heading { display: block; margin-bottom: 20px; }
  .method-label { margin-bottom: 22px; }
  .methodology-section #methodology-title { font-size: clamp(46px,11.5vw,68px); }
  .method-heading-copy { margin-top: 28px; }
  .method-promise { font-size: 23px; margin-bottom: 16px; }
  .method-introduction { font-size: 16px; line-height: 1.85; }
  .method-explorer { display: flex; flex-direction: column-reverse; gap: 18px; min-height: 0; }
  .method-stage { width: 100%; position: sticky; top: 66px; z-index: 3; background: #fff; }
  .method-diagram { max-width: 520px; margin: 0 auto; }
  .method-options { width: 100%; }
  .method-trigger { padding: 17px 20px; gap: 9px; }
  .method-option h3 { font-size: 16px; }
  .method-panel p { padding: 0 22px 25px; font-size: 16px; }
  .method-point-label { font-size: 14px; min-width: 54px; max-width: 88px; top: calc(100% + 9px); }
  [data-step="2"] .method-point-label { width: 58px; min-width: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .method-panel,.method-option,.method-trigger,.method-toggle::after,.method-point-0 .method-orb::after { transition: none; }
}
@media print {
  .methodology-section { padding: 30px 0; }
  .method-heading { display: block; }
  .methodology-section #methodology-title { font-size: 40px; }
  .method-heading-copy { margin-top: 24px; }
  .method-explorer { display: block; }
  .method-stage { display: none; }
  .method-panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
  .method-option { background: #f0f0f3; break-inside: avoid; }
}