:root {
      --bg: #fff;
      --text: #121317;
      --body: #2a2a2a;
      --muted: #9b9b9b;
      --line: #a5a5a5;
      --footer: #c0a285;
      --card-border: #dedede;
      --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: "鎬濇簮榛戜綋", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    .page {
      width: 100%;
      min-height: 100vh;
      background: #fff;
      overflow: hidden;
    }

    .topbar {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo-block {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      color: #0f1013;
    }

    .logo-main {
      font-size: 33px;
      line-height: 0.78;
      letter-spacing: 0.04em;
      font-weight: 600;
      font-style: italic;
    }

    .logo-sub {
      font-size: 8px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0.9;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .brand-chip {
      border: 1px solid #000;
      border-radius: 999px;
      min-width: 44px;
      height: 24px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      background: #000;
      color: #fff;
      font-weight: 500;
    }

    .hero {
      width: min(1180px, 100%);
      margin: clamp(26px, 3.6vw, 56px) auto 0;
      display: grid;
      grid-template-columns: minmax(0, 440px) 1px minmax(0, 500px);
      column-gap: clamp(18px, 2vw, 32px);
      align-items: stretch;
    }

    .hero-copy {
      padding-top: 4px;
      min-height: clamp(580px, 46vw, 720px);
      display: flex;
      flex-direction: column;
    }

    .hero-title {
      font-size: clamp(35px, 5vw, 64px);
      line-height: 1.08;
      letter-spacing: 0.085em;
      font-weight: 400;
      text-transform: none;
      max-width: 640px;
    }

    .hero-text {
      margin-top: auto;
      width: min(420px, 100%);
      font-family: "鎬濇簮榛戜綋", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-size: clamp(14px, 1.2vw, 17px);
      line-height: 1.8;
      letter-spacing: 0.02em;
      color: var(--body);
      text-align: justify;
      word-spacing: normal;
    }

    .hero-line {
      width: 1px;
      background: transparent;
      height: clamp(300px, 27vw, 360px);
      align-self: end;
      margin-top: 0;
      position: relative;
      overflow: hidden;
      transform: translateX(-10px);
    }

    .hero-line::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--line);
      transform: scaleY(0);
      transform-origin: top center;
    }

    .hero.is-in .hero-line::before {
      animation: heroLineRevealDown 0.95s ease-out forwards;
    }

    .hero-card {
      align-self: end;
      justify-self: start;
      width: min(100%, 500px);
      margin-left: clamp(14px, 1.2vw, 22px);
      border: 10px solid #cacaca;
      background: #f8f8f8;
      box-shadow: 0 0 0 1px #d9d9d9 inset;
    }

    .hero-card img {
      display: block;
      width: 100%;
      aspect-ratio: 0.73 / 1;
      object-fit: cover;
      filter: grayscale(0.02) contrast(1.02);
    }

    .cert-section {
      margin-top: clamp(24px, 6vw, 60px);
    }

    .section-title {
      font-size: clamp(30px, 4.35vw, 60px);
      letter-spacing: 0.12em;
      font-weight: 500;
      line-height: 1.08;
      text-transform: uppercase;
      text-align:center;
    }

    .cert-carousel {
      --carousel-side-width: clamp(175px, 13vw, 230px);
      --carousel-side-visual-width: clamp(157px, 11.7vw, 207px);
      --carousel-active-width: clamp(330px, 24vw, 390px);
      --carousel-side-scale: 0.9;
      --carousel-main-gap: 100px;
      --carousel-side-distance: calc(var(--carousel-main-gap) + (var(--carousel-active-width) / 2) + (var(--carousel-side-visual-width) / 2));
      margin-top: clamp(18px, 2.2vw, 28px);
      position: relative;
      height: clamp(470px, 44vw, 600px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .carousel-track {
      position: relative;
      width: min(1120px, 100%);
      height: 100%;
      margin: 0 auto;
      overflow: visible;
    }

    .carousel-card {
      --card-width: var(--carousel-side-width);
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--card-width);
      aspect-ratio: 0.72 / 1;
      transform: translate(-50%, -50%) scale(0.8);
      border: 2px solid var(--card-border);
      background: #fff;
      box-shadow: var(--card-shadow);
      opacity: 0;
      z-index: 1;
      transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.36s ease, width 0.36s ease, filter 0.36s ease;
      overflow: hidden;
      filter: grayscale(0.08);
      pointer-events: none;
    }

    .carousel-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .carousel-card.is-left {
      opacity: 1;
      z-index: 2;
      transform: translate(calc(-50% - var(--carousel-side-distance)), -50%) scale(var(--carousel-side-scale));
    }

    .carousel-card.is-right {
      opacity: 1;
      z-index: 2;
      transform: translate(calc(-50% + var(--carousel-side-distance)), -50%) scale(var(--carousel-side-scale));
    }

    .carousel-card.is-active {
      --card-width: var(--carousel-active-width);
      opacity: 1;
      z-index: 4;
      transform: translate(-50%, -50%) scale(1);
      filter: none;
    }

    .carousel-dots {
      --dot-step: clamp(28px, 1.8vw, 32px);
      --dot-visible-count: 7;
      margin-top: clamp(16px, 2vw, 26px);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .carousel-dots-viewport {
      width: min(calc(var(--dot-step) * var(--dot-visible-count)), 100%);
      overflow: hidden;
    }

    .carousel-dots-track {
      display: flex;
      align-items: center;
      will-change: transform;
      transition: transform 0.42s cubic-bezier(0.22, 0.74, 0.28, 1);
    }

    .carousel-dot-slot {
      flex: 0 0 var(--dot-step);
      width: var(--dot-step);
      display: grid;
      place-items: center;
    }

    .carousel-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid #171717;
      background: transparent;
      cursor: pointer;
      padding: 0;
      opacity: 0.88;
      transform: scale(0.82);
      transition: background 0.24s ease, transform 0.24s ease, width 0.24s ease, height 0.24s ease, opacity 0.24s ease;
    }

    .carousel-dot.is-mid {
      width: 11px;
      height: 11px;
      opacity: 0.76;
      transform: scale(0.74);
    }

    .carousel-dot.is-near {
      width: 13px;
      height: 13px;
      opacity: 0.94;
      transform: scale(0.92);
    }

    .carousel-dot.is-active {
      width: 16px;
      height: 16px;
      background: #141414;
      opacity: 1;
      transform: scale(1);
    }

    .site-footer {
      margin-top: clamp(70px, 9vw, 120px);
      background: var(--footer);
      width: 100%;
    }

    .site-footer-inner {
      width: min(1440px, calc(100vw - 48px));
      margin: 0 auto;
      height: 124px;
      display: grid;
      grid-template-columns: 1.2fr 1px 0.9fr;
      align-items: center;
      column-gap: 34px;
      color: #181512;
    }

    .footer-col {
      min-width: 0;
    }

    .footer-divider {
      width: 1px;
      height: 70px;
      background: rgba(106, 81, 57, 0.48);
      justify-self: center;
    }

    .footer-logo {
      display: inline-flex;
      flex-direction: column;
      margin-bottom: 9px;
      line-height: 1;
    }

    .footer-logo .logo-main {
      font-size: 29px;
    }

    .footer-logo .logo-sub {
      font-size: 7px;
      letter-spacing: 0.12em;
    }

    .footer-lines {
      font-family: "鎬濇簮榛戜綋", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-size: 12px;
      line-height: 1.38;
      letter-spacing: 0.01em;
      color: rgba(26, 22, 17, 0.92);
    }

    .footer-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 22px;
    }

    .footer-right p {
      width: 190px;
      text-align: center;
      font-family: "鎬濇簮榛戜綋", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-size: 12px;
      line-height: 1.35;
      color: rgba(26, 22, 17, 0.9);
    }

    .footer-qr {
      width: 74px;
      height: 74px;
      border: 1px solid rgba(86, 64, 44, 0.35);
      background: #fff;
      padding: 4px;
      object-fit: cover;
      flex: 0 0 auto;
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .reveal.is-in {
      opacity: 1;
      transform: translateY(0);
      padding: 14px 50px 16px;
    }

    @keyframes heroLineRevealDown {
      from { transform: scaleY(0); }
      to { transform: scaleY(1); }
    }

    @media (max-width: 1100px) {
      .page,
      .site-footer-inner {
        width: min(1440px, calc(100vw - 36px));
      }

      .hero {
        width: min(1060px, 100%);
        grid-template-columns: minmax(0, 390px) 1px minmax(0, 440px);
        column-gap: 18px;
      }

      .hero-title {
        letter-spacing: 0.07em;
      }

      .hero-copy {
        min-height: clamp(500px, 48vw, 620px);
      }

      .hero-line {
        height: clamp(250px, 26vw, 310px);
        transform: translateX(-8px);
      }

      .hero-card {
        width: min(100%, 430px);
        margin-left: 12px;
      }
    }

    @media (max-width: 840px) {
      .page,
      .site-footer-inner {
        width: calc(100vw - 24px);
      }

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

      .hero-line {
        display: none;
      }

      .hero-card {
        justify-self: start;
        width: min(100%, 460px);
        margin-left: 0;
      }

      .hero-text {
        margin-top: 34px;
      }

      .hero-line {
        transform: none;
      }

      .section-title {
        letter-spacing: 0.08em;
      }

      .cert-carousel {
        --carousel-active-width: clamp(250px, 46vw, 340px);
        --carousel-side-visual-width: clamp(150px, 11.2vw, 198px);
        --carousel-side-scale: 0.86;
        --carousel-main-gap: clamp(36px, 6vw, 72px);
        --carousel-side-distance: calc(var(--carousel-main-gap) + (var(--carousel-active-width) / 2) + (var(--carousel-side-visual-width) / 2));
        height: clamp(380px, 76vw, 520px);
      }

      .carousel-card.is-left {
        transform: translate(calc(-50% - var(--carousel-side-distance)), -50%) scale(var(--carousel-side-scale));
      }

      .carousel-card.is-right {
        transform: translate(calc(-50% + var(--carousel-side-distance)), -50%) scale(var(--carousel-side-scale));
      }

      .carousel-card.is-active {
        --card-width: var(--carousel-active-width);
      }

      .carousel-dots {
        --dot-step: clamp(24px, 5vw, 28px);
        --dot-visible-count: 5;
      }

      .site-footer-inner {
        height: auto;
        grid-template-columns: 1fr;
        row-gap: 16px;
        padding: 18px 0 20px;
      }

      .footer-divider {
        display: none;
      }

      .footer-right {
        justify-content: flex-start;
      }
    }