:root {
        --green: #c0d696;
        --blue: #b0d5df;
        --ink: #000;
        --text: #1e2a2d;
        --muted: rgba(30, 42, 45, 0.72);
        --soft-line: rgba(0, 0, 0, 0.28);
        --white: #fff;
        --max: 1180px;
        --radius-xl: 32px;
        --radius-lg: 22px;
        --radius-md: 16px;
        --display:
          "Josefin Slab", "LXGW WenKai", Georgia, "Times New Roman", "Songti SC",
          serif;
        --body:
          "LXGW WenKai", "Josefin Slab", ui-serif, Georgia, "Times New Roman",
          "Songti SC", "PingFang SC", "Microsoft YaHei", serif;
      }

      * {
        box-sizing: border-box;
      }

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

      body {
        margin: 0;
        color: var(--text);
        font-family: var(--body);
        font-size: 18px;
        line-height: 1.6667;
        text-rendering: optimizeLegibility;
      }

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

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

      h1,
      h2,
      h3,
      p {
        margin: 0;
      }

      h1,
      h2,
      h3 {
        font-family: var(--display);
        font-weight: 400;
        letter-spacing: -0.01em;
      }

      .page {
        min-height: 100vh;
        overflow: clip;
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.18);
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(24px);
      }

      .nav {
        display: flex;
        width: min(var(--max), calc(100% - 48px));
        min-height: 66px;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin: 0 auto;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--display);
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
      }

      .brand-mark {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid #000;
        border-radius: 999px;
        background: #f8fff2;
        font-size: 16px;
        font-weight: 800;
      }

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

      .locale-pill,
      .nav-contact,
      .pill-button,
      .outline-button {
        display: inline-flex;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
        border-radius: 999px;
        padding: 10px 18px;
        font-size: 16px;
        line-height: 1;
      }

      .locale-pill {
        gap: 8px;
        background: #fff;
      }

      .locale-pill strong {
        border-radius: 999px;
        background: var(--blue);
        padding: 4px 10px;
        font-size: 15px;
      }

      .locale-pill span {
        color: rgba(30, 42, 45, 0.58);
      }

      .nav-contact,
      .pill-button {
        background: #000;
        color: #fff;
      }

      .outline-button {
        background: transparent;
      }

      .section {
        width: 100%;
        padding: clamp(52px, 7vw, 96px) max(24px, calc((100vw - var(--max)) / 2));
      }

      .section > * {
        max-width: var(--max);
        margin-right: auto;
        margin-left: auto;
      }

      .hero {
        min-height: 720px;
        background: var(--green);
      }

      .hero-stage {
        display: grid;
        grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
        gap: clamp(36px, 5vw, 72px);
        align-items: center;
      }

      .eyebrow {
        margin-bottom: 14px;
        color: rgba(30, 42, 45, 0.72);
        font-size: 13px;
        letter-spacing: 0.05em;
      }

      .hero h1 {
        font-size: clamp(54px, 5vw, 68px);
        line-height: 1.1;
      }

      .hero-role {
        margin-top: 18px;
        color: #000;
        font-size: 24px;
        line-height: 1.5;
      }

      .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
        color: rgba(30, 42, 45, 0.74);
        font-size: 14px;
      }

      .hero-essay {
        display: grid;
        max-width: 48ch;
        gap: 12px;
        margin-top: 22px;
        color: var(--muted);
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
      }

      .portrait-wrap {
        position: relative;
        justify-self: end;
        width: min(100%, 400px);
      }

      .portrait {
        position: relative;
        overflow: hidden;
        aspect-ratio: 0.76;
        border: 1px solid #000;
        border-radius: 38px;
        background: #fff;
      }

      .portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 18%;
      }

      .orbit-badge {
        position: absolute;
        right: -14px;
        bottom: 20px;
        display: grid;
        width: 82px;
        height: 82px;
        place-items: center;
        border: 1px solid #000;
        border-radius: 50%;
        background: #fff;
        color: #9f2f24;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.18;
        text-align: center;
      }

      .spark {
        position: absolute;
        color: #000;
        font-size: 32px;
        line-height: 1;
      }

      .spark.one {
        top: 26%;
        left: -44px;
      }

      .spark.two {
        top: 18%;
        right: -38px;
      }

      .hero-signal-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(var(--max), calc(100vw - 48px));
        margin: 52px auto 0;
        overflow: hidden;
        border: 1px solid #000;
        border-radius: 18px;
        background: #fff;
      }

      .hero-signal-item {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 18px;
        align-items: center;
        padding: 22px 24px;
      }

      .hero-signal-item + .hero-signal-item {
        border-left: 1px solid #000;
      }

      .hero-signal-item strong {
        font-family: var(--display);
        font-size: clamp(42px, 4vw, 58px);
        font-weight: 400;
        line-height: 1;
        white-space: nowrap;
      }

      .hero-signal-item h2 {
        font-size: 24px;
        line-height: 1.25;
      }

      .hero-signal-item p {
        color: var(--muted);
        font-size: 16px;
      }

      .black {
        background: #000;
        color: #fff;
      }

      .section-heading {
        display: grid;
        gap: 12px;
      }

      .section-heading h2 {
        max-width: 980px;
        font-size: clamp(38px, 3.4vw, 44px);
        line-height: 1.14;
      }

      .section-heading p {
        max-width: 680px;
        color: rgba(255, 255, 255, 0.68);
      }

      .black .eyebrow {
        color: rgba(255, 255, 255, 0.82);
      }

      .stats-waterfall {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        margin-top: clamp(34px, 5vw, 64px);
      }

      .stat-card {
        min-height: 210px;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        padding: 8px 22px 22px;
      }

      .stat-card strong {
        display: block;
        color: var(--green);
        font-family: var(--display);
        font-size: clamp(48px, 5vw, 72px);
        font-weight: 400;
        line-height: 1;
      }

      .stat-card:nth-child(2n) strong {
        color: var(--blue);
      }

      .stat-card h3 {
        margin-top: 16px;
        font-size: 24px;
        line-height: 1.25;
      }

      .stat-card p {
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.68);
        font-size: 16px;
      }

      .white {
        background: #fff;
      }

      .white .eyebrow,
      .green .eyebrow {
        color: rgba(30, 42, 45, 0.7);
      }

      .case-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: 20px;
        margin-top: 30px;
      }

      .panel,
      .result-cell,
      .service-card,
      .resource-card {
        border: 1px solid rgba(0, 0, 0, 0.32);
        border-radius: 22px;
        background: #fff;
      }

      .panel {
        padding: 28px;
      }

      .panel h3,
      .service-card h3 {
        font-size: 24px;
        line-height: 1.25;
      }

      .panel p,
      .service-card p,
      .resource-card p {
        margin-top: 12px;
        color: var(--muted);
      }

      .proof-list {
        display: grid;
        gap: 12px;
        margin: 26px 0 0;
        padding: 0;
        list-style: none;
      }

      .proof-list li {
        display: grid;
        grid-template-columns: 16px 1fr;
        gap: 10px;
        color: var(--muted);
      }

      .proof-list li::before {
        content: "";
        width: 8px;
        height: 8px;
        margin-top: 11px;
        border-radius: 50%;
        background: #000;
      }

      .result-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.32);
        border-radius: 22px;
        background: #fff;
      }

      .result-cell {
        border: 0;
        border-right: 1px solid rgba(0, 0, 0, 0.22);
        border-bottom: 1px solid rgba(0, 0, 0, 0.22);
        border-radius: 0;
        padding: 26px;
      }

      .result-cell:nth-child(2n) {
        border-right: 0;
      }

      .result-cell:nth-last-child(-n + 2) {
        border-bottom: 0;
      }

      .result-cell strong {
        display: block;
        color: #9f2f24;
        font-family: var(--display);
        font-size: clamp(34px, 4vw, 52px);
        font-weight: 400;
        line-height: 1;
      }

      .result-cell span {
        display: block;
        margin-top: 10px;
        color: var(--muted);
        font-size: 16px;
      }

      .green {
        background: var(--green);
      }

      .service-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-top: 30px;
      }

      .service-card {
        min-height: 240px;
        padding: 28px;
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          background-color 0.2s ease;
      }

      .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px rgba(0, 0, 0, 0.1);
        background: #f8fff2;
      }

      .service-card span {
        display: inline-flex;
        margin-bottom: 24px;
        color: rgba(30, 42, 45, 0.58);
        font-size: 14px;
      }

      .resource-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-top: 30px;
      }

      .resource-card {
        min-height: 150px;
        padding: 24px;
      }

      .resource-card strong {
        display: block;
        font-size: 20px;
        line-height: 1.3;
      }

      .closing-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
        gap: 64px;
        align-items: center;
      }

      .closing-layout h2 {
        max-width: 640px;
        font-size: clamp(36px, 4.4vw, 56px);
        line-height: 1.08;
      }

      .closing-layout p {
        max-width: 620px;
        margin-top: 22px;
        color: var(--muted);
      }

      .wechat-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 156px;
        gap: 28px;
        align-items: center;
        border: 1px solid #000;
        border-radius: 22px;
        background: #fff;
        padding: 28px;
      }

      .wechat-card span {
        font-size: 14px;
      }

      .wechat-card strong {
        display: block;
        margin-top: 10px;
        font-size: 28px;
        line-height: 1.18;
      }

      .wechat-card p {
        margin-top: 12px;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.45;
      }

      .wechat-card img {
        width: 156px;
        aspect-ratio: 1;
        border: 1px solid rgba(0, 0, 0, 0.18);
        object-fit: contain;
        padding: 8px;
      }

      .site-footer {
        background: #000;
        color: #fff;
        padding: clamp(44px, 6vw, 76px) max(24px, calc((100vw - var(--max)) / 2)) 24px;
      }

      .footer-mission {
        max-width: var(--max);
        margin: 0 auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24);
        padding-bottom: clamp(26px, 4vw, 42px);
        color: rgba(255, 255, 255, 0.72);
        font-family: var(--display);
        font-size: clamp(24px, 3.8vw, 36px);
        font-style: italic;
        text-align: center;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(22px, 3vw, 42px);
        max-width: var(--max);
        margin: clamp(34px, 5vw, 58px) auto 0;
      }

      .footer-qr strong {
        display: block;
        min-height: 56px;
        color: #fff;
        font-size: 18px;
        line-height: 1.25;
      }

      .footer-qr img {
        width: min(100%, 150px);
        aspect-ratio: 1;
        margin-top: 14px;
        object-fit: contain;
        background: #fff;
        padding: 6px;
      }

      .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        max-width: var(--max);
        margin: clamp(38px, 5vw, 64px) auto 0;
        border-top: 1px solid rgba(255, 255, 255, 0.28);
        padding-top: 18px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 12px;
      }

      @media (max-width: 980px) {
        .hero-stage,
        .case-layout,
        .closing-layout {
          grid-template-columns: 1fr;
        }

        .portrait-wrap {
          justify-self: center;
          width: min(86%, 330px);
        }

        .hero-signal-strip,
        .service-grid,
        .resource-grid {
          grid-template-columns: 1fr;
        }

        .hero-signal-item + .hero-signal-item {
          border-top: 1px solid #000;
          border-left: 0;
        }

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

        .stat-card {
          border-top: 1px solid rgba(255, 255, 255, 0.28);
        }

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

      @media (max-width: 620px) {
        body {
          font-size: 17px;
        }

        .nav {
          width: min(100% - 28px, var(--max));
          min-height: 58px;
        }

        .brand {
          font-size: 18px;
        }

        .brand-mark {
          width: 30px;
          height: 30px;
        }

        .locale-pill {
          min-height: 38px;
          padding: 8px 12px;
          font-size: 14px;
        }

        .locale-pill strong {
          padding: 3px 8px;
          font-size: 13px;
        }

        .nav-contact {
          min-height: 38px;
          padding: 9px 13px;
          font-size: 14px;
        }

        .section {
          padding: 44px 18px;
        }

        .hero {
          min-height: auto;
          padding-top: 38px;
        }

        .hero h1 {
          font-size: clamp(48px, 14vw, 60px);
        }

        .hero-role {
          font-size: 20px;
          line-height: 1.45;
        }

        .hero-essay {
          font-size: 16px;
        }

        .hero-actions {
          gap: 10px;
        }

        .pill-button,
        .outline-button {
          min-height: 40px;
          padding: 9px 14px;
          font-size: 14px;
        }

        .hero-signal-strip {
          width: min(100% - 36px, var(--max));
          margin-top: 34px;
        }

        .hero-signal-item {
          grid-template-columns: auto 1fr;
          gap: 14px;
          padding: 18px 20px;
        }

        .hero-signal-item strong {
          font-size: 38px;
        }

        .hero-signal-item h2 {
          font-size: 20px;
        }

        .hero-signal-item p {
          font-size: 14px;
        }

        .stats-waterfall,
        .result-grid,
        .footer-grid {
          grid-template-columns: 1fr;
        }

        .stat-card {
          min-height: auto;
          padding: 24px 20px;
        }

        .section-heading h2,
        .closing-layout h2 {
          font-size: 34px;
          line-height: 1.16;
        }

        .panel,
        .result-cell,
        .service-card,
        .resource-card {
          padding: 20px;
        }

        .result-cell,
        .result-cell:nth-child(2n),
        .result-cell:nth-last-child(-n + 2) {
          border-right: 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.22);
        }

        .result-cell:last-child {
          border-bottom: 0;
        }

        .wechat-card {
          grid-template-columns: 1fr;
          gap: 18px;
          padding: 22px;
        }

        .footer-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 24px 18px;
        }

        .footer-qr strong {
          min-height: 48px;
          font-size: 15px;
        }

        .footer-qr img {
          width: min(100%, 132px);
        }
      }

      .service-hero-art {
        position: relative;
        justify-self: end;
        width: min(100%, 500px);
      }

      .service-hero-art img {
        width: 100%;
        border: 1px solid #000;
        border-radius: 30px;
        background: #fff;
        box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.12);
      }

      .service-hero-art figcaption {
        position: absolute;
        right: 18px;
        bottom: 18px;
        border: 1px solid #000;
        border-radius: 999px;
        background: #fff;
        padding: 8px 14px;
        color: #9f2f24;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.06em;
      }

      .service-intro {
        max-width: 720px;
        margin-top: 18px;
        color: var(--muted);
      }

      .service-detail-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin-top: 32px;
      }

      .service-detail-card,
      .consult-panel,
      .choice-card {
        border: 1px solid rgba(0, 0, 0, 0.32);
        border-radius: 22px;
        background: #fff;
        padding: 24px;
      }

      .service-detail-card {
        min-height: 242px;
      }

      .service-detail-card strong,
      .choice-card strong {
        display: block;
        color: #9f2f24;
        font-family: var(--display);
        font-size: 38px;
        font-weight: 400;
        line-height: 1;
      }

      .service-detail-card h3,
      .consult-panel h3,
      .choice-card h3 {
        margin-top: 18px;
        font-size: 22px;
        line-height: 1.25;
      }

      .service-detail-card p,
      .consult-panel p,
      .choice-card p {
        margin-top: 10px;
        color: var(--muted);
        font-size: 16px;
      }

      .service-detail-card ul,
      .consult-panel ul {
        display: grid;
        gap: 8px;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
        color: var(--muted);
        font-size: 15px;
      }

      .service-detail-card li,
      .consult-panel li {
        position: relative;
        padding-left: 16px;
      }

      .service-detail-card li::before,
      .consult-panel li::before {
        position: absolute;
        top: 0.68em;
        left: 0;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #000;
        content: "";
      }

      .consult-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 32px;
      }

      .consult-panel {
        min-height: 290px;
      }

      .consult-panel .price-line {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: baseline;
        margin-top: 16px;
      }

      .consult-panel .price-line strong {
        color: #9f2f24;
        font-family: var(--display);
        font-size: 44px;
        font-weight: 400;
        line-height: 1;
      }

      .consult-panel .price-line span {
        color: var(--muted);
        font-size: 15px;
      }

      .timeline-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin-top: 34px;
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
      }

      .timeline-card {
        min-height: 220px;
        padding: 24px 22px;
      }

      .timeline-card + .timeline-card {
        border-left: 1px solid rgba(0, 0, 0, 0.3);
      }

      .timeline-card span {
        color: rgba(30, 42, 45, 0.58);
        font-size: 14px;
      }

      .timeline-card h3 {
        margin-top: 18px;
        font-size: 25px;
      }

      .timeline-card p {
        margin-top: 12px;
        color: var(--muted);
        font-size: 16px;
      }

      .choice-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        margin-top: 32px;
      }

      .choice-card {
        min-height: 205px;
        padding: 20px;
      }

      .choice-card strong {
        font-size: 30px;
      }

      .choice-card h3 {
        margin-top: 14px;
        font-size: 19px;
      }

      .choice-card p {
        font-size: 15px;
      }

      .service-note {
        margin-top: 22px;
        border-left: 3px solid #9f2f24;
        padding-left: 16px;
        color: var(--muted);
      }

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

        .service-hero-art {
          justify-self: center;
          width: min(90%, 460px);
        }

        .consult-layout {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 620px) {
        .service-detail-grid,
        .choice-grid,
        .timeline-grid {
          grid-template-columns: 1fr;
        }

        .timeline-card + .timeline-card {
          border-top: 1px solid rgba(0, 0, 0, 0.3);
          border-left: 0;
        }

        .service-detail-card,
        .consult-panel,
        .choice-card {
          padding: 20px;
        }
      }