/* Home screen 04 — migrated from 模板素材/04.html */
.home04-inline {
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: #0f172a;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}

.home04-inline *,
.home04-inline *::before,
.home04-inline *::after {
  box-sizing: border-box;
}

.home04-inline button {
  margin: 0;
  font: inherit;
}

@scope (.home04-inline) {
/* =========================================================
       01. DESIGN TOKENS
       1920px × 85% = 1632px
    ========================================================= */
    :scope {
      --design-width: 1920px;
      --content-max: 1632px;

      --brand: #165daa;
      --brand-dark: #124c89;
      --brand-light: #2874c8;

      --text: #0f172a;
      --muted: #5d6775;

      --white: #ffffff;
      --border: #e2e8f0;
      --soft: #f8fafc;
      --soft-blue: #f3f7fc;

      --blue-950: #06274e;
      --blue-900: #07366f;

      --body: 1rem;
      --lead: 0.9rem;
      --small: 0.82rem;
      --tiny: 0.75rem;

      --section-title:
        clamp(1.7rem, 2.45vw, 2.5rem);

      --radius-lg: 10px;
      --radius-md: 10px;
      --radius-sm: 10px;

      --shadow:
        0 14px 36px rgba(15, 23, 42, 0.055),
        0 2px 8px rgba(15, 23, 42, 0.035);

      --transition: 180ms ease;
    }

    /* =========================================================
       03. PAGE
    ========================================================= */
  .page {
      width: 85%;
      max-width: var(--content-max);
      margin: 0 auto;

      padding:
        clamp(28px, 2.3vw, 46px)
        0
        clamp(38px, 4vw, 72px);

      background: var(--white);
    }

    /* =========================================================
       04. HERO / PAGE INTRO
    ========================================================= */
    .hero {
      display: grid;
      grid-template-columns:
        minmax(0, 1.05fr)
        minmax(520px, 0.95fr);

      gap: clamp(46px, 5vw, 88px);

      align-items: end;

      margin-bottom: 22px;
    }

    .hero__eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;

      margin-bottom: 18px;

      color: var(--brand);

      font-size: var(--tiny);
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0.018em;
    }

    .hero__number {
      font-size: clamp(2rem, 2.55vw, 2.65rem);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    .hero__slash {
      font-size: 1.18rem;
    }

    .hero__label {
      color: var(--text);
      font-size: 0.77rem;
      letter-spacing: 0.015em;
    }

    .hero__title {
      max-width: none;

      margin: 0;

      color: #111315;

      font-size: clamp(2.35rem, 3.15vw, 3.35rem);
      line-height: 1.08;
      letter-spacing: -0.045em;

      font-weight: 900;
    }

    .hero__title strong {
      color: var(--brand);
      font-weight: inherit;
    }

    .hero__description {
      max-width: none;

      margin: 16px 0 0;

      color: var(--muted);

      font-size: var(--lead);
      line-height: 1.75;
    }

    /* =========================================================
       05. HERO FEATURES
    ========================================================= */
    .hero-features {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));

      align-items: stretch;
    }

    .hero-feature {
      position: relative;

      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);

      gap: 11px;
      align-items: center;

      min-height: 68px;

      padding: 4px 19px;
    }

    .hero-feature:first-child {
      padding-left: 0;
    }

    .hero-feature:last-child {
      padding-right: 0;
    }

    .hero-feature:not(:last-child)::after {
      content: "";

      position: absolute;
      top: 8px;
      right: 0;

      width: 1px;
      height: 50px;

      background: var(--border);
    }

    .hero-feature__icon {
      display: grid;
      place-items: center;

      width: 40px;
      height: 40px;

      color: var(--brand);
    }

    .hero-feature__icon svg {
      width: 100%;
      height: 100%;
    }

    .hero-feature__title {
      margin-bottom: 3px;

      color: var(--text);

      font-size: 0.82rem;
      line-height: 1.2;
      font-weight: 800;

      white-space: nowrap;
    }

    .hero-feature__desc {
      color: var(--muted);

      font-size: 0.68rem;
      line-height: 1.3;

      white-space: nowrap;
    }

    /* =========================================================
       06. MAIN SYSTEM AREA
    ========================================================= */
    .system-layout {
      display: grid;
      grid-template-columns:
        minmax(0, 2.12fr)
        minmax(410px, 1fr);

      gap: 14px;

      align-items: stretch;
    }

    /* =========================================================
       07. ENGINEERING IMAGE
    ========================================================= */
    .engineering-visual {
      position: relative;

      width: 100%;
      min-height: 0;
      align-self: start;
      aspect-ratio: 1808 / 870;

      overflow: hidden;

      border-radius: var(--radius-lg);
      background: #6e97b6;

      box-shadow: var(--shadow);
    }

    .engineering-visual__media {
      position: absolute;
      inset: 0;

      width: 100%;
      height: 100%;
    }

    .engineering-visual__media img {
      width: 100%;
      height: 100%;

      object-fit: contain;
      object-position: center;

      user-select: none;
      pointer-events: none;
    }

    .engineering-visual::after {
      content: "";

      position: absolute;
      inset: 0;
      z-index: 1;

      pointer-events: none;

      background:
        linear-gradient(
          180deg,
          rgba(6, 49, 91, 0.03),
          rgba(6, 34, 65, 0.16)
        );
    }

    /* =========================================================
       08. IMAGE CALLOUTS
    ========================================================= */
    .callout {
      position: absolute;
      z-index: 3;

      display: flex;
      align-items: flex-start;

      gap: 10px;

      color: var(--white);

      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.28);
    }

    .callout__number {
      display: grid;
      place-items: center;

      flex: 0 0 auto;

      width: 28px;
      height: 28px;

      color: var(--white);
      background: rgba(16, 84, 163, 0.94);

      border: 2px solid rgba(255, 255, 255, 0.94);
      border-radius: 50%;

      font-size: 0.72rem;
      line-height: 1;
      font-weight: 800;
    }

    .callout__copy {
      min-width: 140px;

      padding-top: 1px;
    }

    .callout__title {
      font-size: 0.82rem;
      line-height: 1.25;
      font-weight: 800;

      white-space: nowrap;
    }

    .callout__desc {
      margin-top: 4px;

      color: rgba(255, 255, 255, 0.83);

      font-size: 0.7rem;
      line-height: 1.35;

      white-space: nowrap;
    }

    .callout__line {
      position: absolute;

      height: 1px;

      background: rgba(255, 255, 255, 0.82);

      transform-origin: left center;
    }

    .callout__line::before,
    .callout__line::after {
      content: "";

      position: absolute;
      top: 50%;

      width: 6px;
      height: 6px;

      border-radius: 50%;
      background: var(--white);

      transform: translateY(-50%);
    }

    .callout__line::before {
      left: -2px;
    }

    .callout__line::after {
      right: -2px;
    }

    .callout--1 {
      top: 17%;
      left: 62%;
    }

    .callout--1 .callout__line {
      right: calc(100% + 10px);
      top: 22px;

      width: 148px;

      transform: rotate(0deg);
    }

    .callout--2 {
      top: 33%;
      left: 6%;
    }

    .callout--2 .callout__line {
      left: calc(100% + 10px);
      top: 18px;

      width: 155px;
    }

    .callout--3 {
      top: 47%;
      left: 60%;
    }

    .callout--3 .callout__line {
      right: calc(100% + 9px);
      top: 17px;

      width: 120px;

      transform: rotate(-5deg);
    }

    .callout--4 {
      top: 73%;
      left: 10%;
    }

    .callout--4 .callout__line {
      left: calc(100% + 10px);
      top: 18px;

      width: 174px;

      transform: rotate(3deg);
    }

    .callout--5 {
      top: 78%;
      left: 59%;
    }

    .callout--5 .callout__line {
      right: calc(100% + 10px);
      top: 18px;

      width: 148px;

      transform: rotate(-10deg);
    }

    /* =========================================================
       09. RIGHT SYSTEM PANEL
    ========================================================= */
    .system-panel {
      display: grid;
      grid-template-rows: auto auto 1fr;
      gap: 8px;
    }

    .system-card {
      padding: 23px 27px 18px;

      background:
        linear-gradient(
          135deg,
          #fbfdff 0%,
          #f2f6fb 100%
        );

      border: 1px solid var(--border);
      border-radius: var(--radius-lg);

      box-shadow: var(--shadow);
    }

    .system-card__eyebrow {
      margin-bottom: 8px;

      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: var(--tiny);
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0.015em;
    }

    .system-card__title {
      margin: 0;

      color: #111315;

      font-size: clamp(1.55rem, 1.75vw, 1.8rem);
      line-height: 1.15;
      letter-spacing: -0.03em;

      font-weight: 900;
    }

    .system-card__description {
      margin: 9px 0 0;

      color: #384454;

      font-size: var(--small);
      line-height: 1.55;
    }

    .system-card__columns {
      display: grid;
      grid-template-columns: 1fr 1fr;

      gap: 23px;

      margin-top: 19px;
    }

    .system-list + .system-list {
      padding-left: 23px;
      border-left: 1px solid var(--border);
    }

    .system-list__title {
      margin-bottom: 10px;

      color: var(--brand);

      font-size: 0.82rem;
      line-height: 1;
      font-weight: 800;
    }

    .system-list__items {
      display: grid;
      gap: 9px;
    }

    .system-list__item {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);

      gap: 8px;
      align-items: center;

      color: #3b4654;

      font-size: var(--tiny);
      line-height: 1.3;
    }

    .system-list__icon {
      display: grid;
      place-items: center;

      width: 21px;
      height: 21px;

      color: var(--brand-dark);
    }

    .system-list__icon svg {
      width: 100%;
      height: 100%;
    }

    /* =========================================================
       10. SYSTEM SELECTOR
    ========================================================= */
    .system-tabs {
      display: grid;
      gap: 5px;
    }

    .system-tab {
      display: grid;
      grid-template-columns:
        48px
        minmax(112px, 0.72fr)
        minmax(0, 1fr)
        auto;

      gap: 11px;
      align-items: center;

      min-height: 58px;

      padding: 9px 20px;

      color: var(--text);
      background:
        linear-gradient(
          135deg,
          #fbfdff,
          #f2f5f9
        );

      border: 1px solid var(--border);
      border-radius: var(--radius-md);

      cursor: pointer;

      text-align: left;

      transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
    }

    .system-tab:hover {
      border-color: #b5c8df;
      transform: translateY(-1px);
    }

    .system-tab.is-active {
      color: var(--white);

      background:
        linear-gradient(
          100deg,
          #165daa 0%,
          #1265bb 62%,
          #0f55a4 100%
        );

      border-color: var(--brand);
    }

    .system-tab__number {
      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: 1.65rem;
      line-height: 1;
      font-weight: 800;
    }

    .system-tab.is-active .system-tab__number {
      color: var(--white);
    }

    .system-tab__copy {
      display: grid;
      align-content: center;
      gap: 3px;

      min-width: 0;
    }

    .system-tab__en {
      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: 0.62rem;
      line-height: 1;
      text-transform: uppercase;
    }

    .system-tab.is-active .system-tab__en {
      color: rgba(255, 255, 255, 0.82);
    }

    .system-tab__name {
      font-size: 0.82rem;
      line-height: 1.2;
      font-weight: 800;
    }

    .system-tab__summary {
      grid-column: 3;

      color: var(--muted);

      font-size: 0.68rem;
      line-height: 1.3;

      white-space: nowrap;
    }

    .system-tab.is-active .system-tab__summary {
      color: rgba(255, 255, 255, 0.82);
    }

    .system-tab__status {
      grid-column: 4;

      display: inline-flex;
      align-items: center;
      gap: 7px;

      color: inherit;

      font-size: 0.68rem;
      line-height: 1;

      white-space: nowrap;
    }

    .system-tab__check {
      display: grid;
      place-items: center;

      width: 21px;
      height: 21px;

      border: 1px solid currentColor;
      border-radius: 50%;

      font-size: 0.66rem;
    }

    .system-tab__arrow {
      grid-column: 4;
      justify-self: end;

      color: var(--brand);

      font-size: 1.3rem;
      line-height: 1;
    }

    .system-tab.is-active .system-tab__arrow {
      color: var(--white);
    }

    .system-note {
      align-self: end;

      padding: 2px 2px 0;

      color: #7b8490;

      font-size: 0.68rem;
      line-height: 1.35;
    }

    /* =========================================================
       11. PROJECT CONDITIONS
    ========================================================= */
    .conditions {
      display: grid;
      grid-template-columns:
        245px
        minmax(0, 1fr)
        134px;

      gap: 14px;
      align-items: stretch;

      margin-top: 14px;
      padding: 21px 18px 21px 25px;

      background:
        linear-gradient(
          100deg,
          #fbfdff 0%,
          #ffffff 52%,
          #f6f9fd 100%
        );

      border: 1px solid var(--border);
      border-radius: var(--radius-lg);

      box-shadow: var(--shadow);
    }

    .conditions__intro {
      align-self: center;
    }

    .conditions__eyebrow {
      margin-bottom: 8px;

      color: var(--brand);

      font-family: Arial, sans-serif;
      font-size: var(--tiny);
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0.015em;
    }

    .conditions__title {
      margin: 0;

      color: var(--brand);

      font-size: 1.35rem;
      line-height: 1.2;
      letter-spacing: -0.03em;

      font-weight: 900;
    }

    .condition-flow {
      display: flex;

      gap: 0;

      align-items: stretch;
    }

    .condition-step {
      position: relative;

      display: grid;
      grid-template-columns: 49px minmax(0, 1fr);

      gap: 9px;
      align-items: center;

      min-width: 0;
      flex: 0 0 calc(100% / 6);
      box-sizing: border-box;

      padding: 0 16px;
    }

    .condition-step:first-child {
      padding-left: 4px;
    }

    .condition-step:not(:last-child)::after {
      content: "›";

      position: absolute;
      top: 50%;
      right: -4px;

      color: #577395;

      font-size: 1.5rem;
      line-height: 1;

      transform: translateY(-50%);
    }

    .condition-step__icon {
      display: grid;
      place-items: center;

      width: 48px;
      height: 48px;

      color: var(--brand);

      background: #f7fafe;

      border-radius: 5px;
    }

    .condition-step.is-highlight .condition-step__icon {
      color: var(--white);
      background: var(--brand);
    }

    .condition-step__icon svg {
      width: 76%;
      height: 76%;
    }

    .condition-step__name {
      color: var(--text);

      font-size: var(--tiny);
      line-height: 1.2;
      font-weight: 800;
    }

    .condition-step.is-highlight .condition-step__name {
      color: var(--brand);
    }

    .condition-step__desc {
      margin-top: 5px;

      color: var(--muted);

      font-size: 0.64rem;
      line-height: 1.3;

      white-space: nowrap;
    }

    .condition-cta {
      display: flex;
      align-items: center;
      justify-content: center;

      min-height: 80px;

      padding: 12px 15px;

      color: var(--white);
      background: var(--brand);

      border-radius: 7px;

      font-size: 0.8rem;
      line-height: 1.45;
      font-weight: 800;

      cursor: pointer;
      text-decoration: none;
      box-sizing: border-box;

      transition:
        background var(--transition),
        transform var(--transition);
    }

    .condition-cta:hover {
      background: var(--brand-dark);
      transform: translateY(-1px);
    }

    .condition-cta span {
      display: block;
    }

    .condition-cta__arrow {
      margin-left: 7px;
      font-size: 1rem;
    }

    /* =========================================================
       12. TOAST
    ========================================================= */
    .toast {
      position: fixed;
      left: 50%;
      bottom: 28px;
      z-index: 100;

      max-width: calc(100% - 30px);

      padding: 10px 16px;

      color: var(--white);
      background: rgba(15, 23, 42, 0.94);

      border-radius: 8px;

      font-size: var(--small);
      line-height: 1.4;

      box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.2);

      opacity: 0;
      visibility: hidden;

      transform: translate(-50%, 10px);

      transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
    }

    .toast.is-visible {
      opacity: 1;
      visibility: visible;

      transform: translate(-50%, 0);
    }

    /* =========================================================
       13. TABLET
    ========================================================= */
    @media (max-width: 1280px) {
  .page {
        width: 90%;
      }

      .hero {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .hero-features {
        max-width: 900px;
      }

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

      .conditions {
        grid-template-columns: 215px 1fr;
      }

      .condition-cta {
        grid-column: 1 / -1;

        min-height: 54px;
      }
    }

    @media (max-width: 1050px) {
      .system-layout {
        grid-template-columns: 1fr;
      }

      .engineering-visual {
        align-self: auto;
        aspect-ratio: 1808 / 870;
      }

      .system-panel {
        grid-template-columns: 1fr 0.86fr;
        align-items: start;
      }

      .system-tabs {
        align-self: stretch;
      }

      .system-tab {
        min-height: 64px;
      }

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

      .conditions__intro {
        display: flex;
        align-items: baseline;
        gap: 16px;
      }

      .conditions__eyebrow {
        margin-bottom: 0;
      }

      .condition-flow {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        row-gap: 18px;
      }

      .condition-step:nth-child(3)::after {
        display: none;
      }
    }

    /* =========================================================
       14. SMALL TABLET
    ========================================================= */
    @media (max-width: 820px) {
      .hero__title {
        font-size: clamp(2.15rem, 7vw, 3rem);
      }

      .hero-features {
        grid-template-columns: repeat(2, 1fr);

        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }

      .hero-feature {
        padding: 15px 18px;
      }

      .hero-feature:first-child {
        padding-left: 18px;
      }

      .hero-feature:last-child {
        padding-right: 18px;
      }

      .hero-feature:nth-child(1),
      .hero-feature:nth-child(2) {
        border-bottom: 1px solid var(--border);
      }

      .hero-feature:nth-child(2)::after {
        display: none;
      }

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

      .engineering-visual {
        aspect-ratio: 1.35 / 1;
      }

      .callout__desc {
        display: none;
      }

      .callout__copy {
        min-width: 110px;
      }

      .callout--1 {
        left: 57%;
      }

      .callout--3 {
        left: 56%;
      }

      .callout--5 {
        left: 55%;
      }
    }

    /* =========================================================
       15. MOBILE
    ========================================================= */
    @media (max-width: 620px) {
  .page {
        width: calc(100% - 28px);

        padding-top: 26px;
        padding-bottom: 42px;
      }

      .hero {
        margin-bottom: 17px;
      }

      .hero__eyebrow {
        gap: 9px;
        margin-bottom: 13px;
      }

      .hero__number {
        font-size: 2rem;
      }

      .hero__title {
        font-size: clamp(2rem, 9.5vw, 2.6rem);
      }

      .hero__description {
        font-size: 0.9rem;
        line-height: 1.7;
      }

      .hero-features {
        grid-template-columns: 1fr;
      }

      .hero-feature {
        min-height: 68px;
      }

      .hero-feature:not(:last-child)::after {
        display: none;
      }

      .hero-feature:nth-child(1),
      .hero-feature:nth-child(2),
      .hero-feature:nth-child(3) {
        border-bottom: 1px solid var(--border);
      }

      .engineering-visual {
        aspect-ratio: 1808 / 870;
      }

      .engineering-visual__media img {
        object-position: 54% center;
      }

      .callout {
        gap: 6px;
      }

      .callout__number {
        width: 24px;
        height: 24px;

        font-size: 0.65rem;
      }

      .callout__title {
        font-size: 0.69rem;
      }

      .callout__copy {
        min-width: 90px;
      }

      .callout--1 {
        top: 12%;
        left: 55%;
      }

      .callout--2 {
        top: 30%;
        left: 5%;
      }

      .callout--3 {
        top: 46%;
        left: 54%;
      }

      .callout--4 {
        top: 68%;
        left: 7%;
      }

      .callout--5 {
        top: 80%;
        left: 51%;
      }

      .callout--1 .callout__line,
      .callout--2 .callout__line,
      .callout--3 .callout__line,
      .callout--4 .callout__line,
      .callout--5 .callout__line {
        width: 58px;
      }

      .system-card {
        padding: 21px 20px 18px;
      }

      .system-card__columns {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .system-list + .system-list {
        padding: 16px 0 0;

        border-top: 1px solid var(--border);
        border-left: 0;
      }

      .system-tab {
        grid-template-columns: 42px minmax(0, 1fr) auto;

        padding: 10px 14px;
      }

      .system-tab__status,
      .system-tab__arrow {
        grid-column: 3;
      }

      .system-tab__summary {
        display: none;
      }

      .conditions {
        padding: 20px 16px;
      }

      .conditions__intro {
        display: block;
      }

      .conditions__eyebrow {
        margin-bottom: 8px;
      }

      .condition-flow {
        display: grid;
        grid-template-columns: 1fr;
      }

      .condition-step {
        min-height: 62px;

        padding: 0 3px;
      }

      .condition-step:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -15px;
        left: 23px;

        transform: rotate(90deg);
      }

      .condition-step:nth-child(3)::after {
        display: block;
      }

      .condition-step__desc {
        white-space: normal;
      }
    }

    /* =========================================================
       16. REDUCED MOTION
    ========================================================= */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
      }
    }
}