/* 全局样式 */
  :root {
    --primary-color: #2A0A73;
    --secondary-color: #6C4DDA;
    --accent-color: #00FF88;
    --opacity-color: rgba(69, 94, 193, 0.85);
    --primary-color: #6a5ff9;
    /* 主要颜色（紫色）*/
    /* --secondary-color: #ff6a95; */
    /* 辅助颜色（粉色）*/
    --background-light: #f4f7fd;
    /* 浅色背景 */
    --background-dark: #1f2d3d;
    /* 深色背景 */
    --accent-color: #00d1b2;
    /* 强调色（青绿色） */
    --text-color: #333;
    /* 文字颜色 */
    --text-light: #e0e0e0;
    /* 浅色文字 */
  }

  body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #0A0F24 0%, #1A1F34 100%);
    color: white;
  }

  /* Hero Section */
  .hero-section {
    min-height: 100vh;
    padding: 60px 0;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .hero-text {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(45deg, #fff, var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .title-text {
    font-weight: 700;
    line-height: 1.2;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .hero-text.visible,
  .title-text.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* .hero-section .lead {
    font-size: 1.25rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
  } */
  .lead,
  .lead-2 {
    font-size: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
  }

  /* .hero-section .lead.visible { */
  .lead.visible,
  .lead-2.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .cta-button {
    /* background: var(--accent-color);
    color: var(--primary-color); */
    background: var(--opacity-color);
    color: #eee;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-block;
    width: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out 0.6s, transform 0.8s ease-out 0.6s;
  }

  .cta-button-nav {
    background: var(--opacity-color);
    color: #eee;
    padding: 7px 13px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-block;
    width: auto;
    /* transform: translateY(20px); */
    transition: opacity 0.8s ease-out 0.6s, transform 0.8s ease-out 0.6s;
    margin-left: auto;
    margin-right: 10px;
  }

  .cta-button.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .flex-start-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .about-section,
  .community-section,
  .technology-section,
  .ecosystem-section {
    min-height: 100vh;
    padding: 30px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* background: linear-gradient(135deg, var(--background-light), var(--background-dark)); */
  }

  /* .about-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-light);
  } */

  .community-section {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    color: var(--text-light);
  }

  /* .technology-section {
    background: linear-gradient(135deg, var(--background-light), var(--primary-color));
    color: var(--text-color);
  } */

  .ecosystem-section {
    background: linear-gradient(135deg, var(--primary-color), var(--background-dark));
    color: var(--text-light);
  }

  .about-section img {
    width: 100%;
    height: auto;
    margin: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
    /* animation: scaleUpN 1.2s ease-out forwards; */
  }

  .ecosystem-section img {
    width: 100%;
    height: auto;
    margin: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
    /* animation: scaleUpN 1.2s ease-out forwards; */
  }
  .about-section img.visible,
  .ecosystem-section img.visible {
    opacity: 1;
    transform: translateY(0);
    animation: scaleUpN 1.2s ease-out forwards;
  }

  h2 {
    font-weight: bold;
    font-size: 46px;
  }

  /* 响应式调整 */
  @media (min-width: 768px) {
    .hero-text {
      font-size: 3.5rem;
      line-height: 1.1;
      margin-top: 0;
    }

    .hero-section .lead {
      font-size: 1.5rem;
    }

    .cta-button,
    .cta-button-nav {
      padding: 15px 40px;
      border-radius: 30px;
      font-size: 1.2rem;
    }
  }

  /* 其他部分样式保持不变 */
  .nav-item {
    cursor: pointer;
  }

  .nav-item:hover {
    color: white;
  }

  .navbar-brand .hero-logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  button[aria-expanded="true"]+.navbar-collapse .navbar-nav {
    margin-top: 10px;
    padding: 7px 13px;
    border-radius: 11px;
    background-color: var(--opacity-color);
  }

  /* footer */
  .footer {
    padding: 50px 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: start;
    gap: 15px;
    flex-wrap: wrap;
  }

  .footer .foot-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }

  .foot-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .foot-item p,
  .foot-item a {
    color: #616d7e;
    font-size: 14px;
  }

  @media (max-width: 768px) {
    .footer .foot-item {
      width: 100%;
    }

    .figure-a2 {
      width: 140% !important;
      margin-left: 55px;
    }
  }

  /* image animation */
  .container-an {
    -webkit-text-size-adjust: 100%;
    --background-a: black;
    --paragraphs: #616d7e;
    --heading: white;
    --accent-a1: #6a5ff9;
    --link: #d8dfe9cc;
    --background-b1: #1d2838;
    --accent-a2: #6a5ff9;
    --background-b2: #1d283880;
    --background-b3: #1d283840;
    --border: #182233;
    color: var(--paragraphs);
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 180%;
    box-sizing: border-box;
    perspective: 1300px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
    /* margin-top: 40px; */
    display: flex;
    overflow: hidden;
    animation: scaleUp 0.8s ease-out forwards;
  }

  @keyframes scaleUp {
    from {
      transform: scale(0.8);
      opacity: 0.5;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes scaleUpN {
    from {
      transform: scale(0.6);
      opacity: 0.3;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .figure-block-a-hero {
    -webkit-text-size-adjust: 100%;
    --background-a: black;
    --paragraphs: #616d7e;
    --heading: white;
    --accent-a1: #6a5ff9;
    --link: #d8dfe9cc;
    --background-b1: #1d2838;
    --accent-a2: #6a5ff9;
    --background-b2: #1d283880;
    --background-b3: #1d283840;
    --border: #182233;
    color: var(--paragraphs);
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 180%;
    box-sizing: border-box;
    perspective: 1300px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -200px;
    width: 70%;
    height: 100%;
    display: flex;
    will-change: transform;
    transform: translate3d(2.96282%, -93.1172px, 0px) scale3d(1, 1, 1) rotateX(52.3489deg) rotateY(12.2745deg) rotateZ(-19.47deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
  }

  .figure-a2 {
    -webkit-text-size-adjust: 100%;
    --background-a: black;
    --paragraphs: #616d7e;
    --heading: white;
    --accent-a1: #6a5ff9;
    --link: #d8dfe9cc;
    --background-b1: #1d2838;
    --accent-a2: #6a5ff9;
    --background-b2: #1d283880;
    --background-b3: #1d283840;
    --border: #182233;
    color: var(--paragraphs);
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 180%;
    box-sizing: border-box;
    background-image: url("../images/bg-1.jpg");
    background-position: 70%;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: scroll;
    position: absolute;
    width: 90%;
    will-change: transform;
    transform: translate3d(0px, 0px, -14.3861vh) scale3d(1, 1, 1) rotateX(1.67268deg) rotateY(0deg) rotateZ(-11.9942deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    height: 450px;
  }

  .figure-a3 {
    -webkit-text-size-adjust: 100%;
    --background-a: black;
    --paragraphs: #616d7e;
    --heading: white;
    --accent-a1: #6a5ff9;
    --link: #d8dfe9cc;
    --background-b1: #1d2838;
    --accent-a2: #6a5ff9;
    --background-b2: #1d283880;
    --background-b3: #1d283840;
    --border: #182233;
    color: var(--paragraphs);
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 180%;
    box-sizing: border-box;
    background-image: linear-gradient(220deg, #000c, transparent), linear-gradient(50deg, var(--accent-a1), transparent);
    opacity: .5;
    filter: blur(20px);
    position: absolute;
    width: 60%;
    will-change: transform;
    transform: translate3d(0px, 0px, -34.7722vh) scale3d(1, 1, 1) rotateX(2.72454deg) rotateY(0deg) rotateZ(-5.99712deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    height: 350px;
  }

  .card-body {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .card-body img {
    max-width: 170px;
    max-height: 50px;
  }