/* ============================================================
   page-join.css - module13 phase A page-specific styles (Join)
   Load AFTER site.css : yes
   ============================================================ */

html {
   scroll-behavior: smooth;
   scroll-padding-top: 145px;
  }
button,
  input,
  textarea,
  select {
   font: inherit;
  }
button {
   border: 0;
   color: inherit;
   background: none;
   cursor: pointer;
  }
.section-heading {
   margin-bottom: 44px;
  }
.section-title span {
      color: #aab9ff;
      background: linear-gradient(110deg, #a9bcff, #c2b7ff 55%, #e4bb68);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
  }
/* =========================================================
       3. 了解我们首屏
    ========================================================= */

  .about-hero {
   position: relative;

   min-height: 720px;
   overflow: hidden;

   background:
           radial-gradient(
                   circle at 13% 20%,
                   rgba(255, 221, 174, 0.46),
                   transparent 35%
           ),
           radial-gradient(
                   circle at 85% 25%,
                   rgba(203, 221, 255, 0.42),
                   transparent 38%
           ),
           linear-gradient(
                   120deg,
                   #fffdf8,
                   #f8faff 55%,
                   #fff7f1
           );
  }
.about-hero::before {
   content: "";

   position: absolute;
   right: -230px;
   bottom: -330px;

   width: 770px;
   height: 770px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(255, 184, 82, 0.14),
                   transparent 69%
           );

   pointer-events: none;
  }
.about-hero::after {
   content: "";

   position: absolute;
   left: -230px;
   top: -310px;

   width: 710px;
   height: 710px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(114, 151, 217, 0.13),
                   transparent 69%
           );

   pointer-events: none;
  }
.hero-inner {
   position: relative;
   z-index: 2;

   min-height: 720px;
   padding: 75px 0;

   display: grid;
   grid-template-columns:
        minmax(440px, 0.92fr)
        minmax(550px, 1.08fr);

   align-items: center;
   gap: 64px;
  }
.hero-label {
   min-height: 34px;
   padding: 7px 16px;

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

   border: 1px solid rgba(216, 74, 47, 0.15);
   border-radius: 999px;

   color: var(--primary);
   background: rgba(255, 255, 255, 0.76);

   font-size: 13px;
   font-weight: 800;

   box-shadow:
           0 7px 20px rgba(31, 48, 79, 0.05);

   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
  }
.hero-title {
   max-width: 690px;
   margin-top: 24px;

   color: var(--navy);

   font-size: clamp(60px, 4.9vw, 60px);
   font-weight: 900;
   line-height: 1.13;
   letter-spacing: -0.06em;
  }
.hero-description {
   max-width: 640px;
   margin-top: 27px;

   color: var(--text-soft);

   font-size: 17px;
   line-height: 1.9;
  }
.hero-principles {
   margin-top: 40px;

   display: grid;
   grid-template-columns:
        repeat(3, minmax(0, 1fr));

   gap: 17px;
  }
.hero-principle {
   padding-left: 15px;

   border-left: 2px solid rgba(216, 74, 47, 0.18);
  }
.hero-principle strong {
   display: block;

   color: var(--navy);

   font-size: 15px;
   font-weight: 900;
  }
.hero-principle span {
   display: block;
   margin-top: 6px;

   color: var(--text-light);

   font-size: 11px;
   line-height: 1.55;
  }
/* =========================================================
       5. 二级导航
    ========================================================= */






  /* =========================================================
       6. 公司介绍
    ========================================================= */

  .overview-layout {
   display: grid;
   grid-template-columns:
        minmax(420px, 0.88fr)
        minmax(560px, 1.12fr);

   align-items: center;
   gap: 65px;
  }
.overview-visual {
   position: relative;

   min-height: 520px;
  }
.overview-main-image {
   position: absolute;
   left: 0;
   top: 0;

   width: 78%;
   height: 410px;

   overflow: hidden;

   border-radius: 28px;

   background: #dce5f0;

   box-shadow:
           0 22px 55px rgba(31, 46, 74, 0.14);
  }
.overview-main-image img {
   width: 100%;
   height: 100%;

   object-fit: cover;
  }
.overview-main-image::after {
   content: "";

   position: absolute;
   inset: 0;

   background:
           linear-gradient(
                   180deg,
                   transparent 45%,
                   rgba(20, 35, 61, 0.32)
           );
  }
.overview-small-image {
   position: absolute;
   right: 0;
   bottom: 0;
   z-index: 4;

   width: 47%;
   height: 250px;

   overflow: hidden;

   border: 10px solid #ffffff;
   border-radius: 25px;

   background: #edf2f8;

   box-shadow:
           0 20px 45px rgba(31, 46, 74, 0.14);
  }
.overview-small-image img {
   width: 100%;
   height: 100%;

   object-fit: cover;
  }
.overview-badge {
   position: absolute;
   left: 7%;
   bottom: 38px;
   z-index: 6;

   width: 190px;
   padding: 17px;

   border:
           1px solid
           rgba(255, 255, 255, 0.9);

   border-radius: 18px;

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

   box-shadow:
           0 15px 35px rgba(31, 46, 74, 0.12);

   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
  }
.overview-badge strong {
   color: var(--navy);

   font-size: 16px;
   font-weight: 900;
  }
.overview-badge p {
   margin-top: 7px;

   color: var(--text-soft);

   font-size: 10px;
   line-height: 1.6;
  }
.overview-content h2 {
   margin-top: 18px;

   color: var(--navy);

   font-size: clamp(32px, 3.5vw, 48px);
   font-weight: 900;
   line-height: 1.28;
   letter-spacing: -0.045em;
  }
.overview-content > p {
   margin-top: 19px;

   color: var(--text-soft);

   font-size: 15px;
   line-height: 1.95;
  }
.overview-points {
   margin-top: 29px;

   display: grid;
   grid-template-columns:
        repeat(3, minmax(0, 1fr));

   gap: 14px;
  }
.overview-point {
   min-height: 145px;
   padding: 18px;

   border: 1px solid var(--line);
   border-radius: 17px;

   background:
           linear-gradient(
                   180deg,
                   #ffffff,
                   #fafbfd
           );

   transition:
           transform 0.25s ease,
           box-shadow 0.25s ease;
  }
.overview-point:hover {
   transform: translateY(-5px);

   box-shadow:
           0 14px 31px rgba(31, 46, 74, 0.09);
  }
.overview-point-icon {
   width: 39px;
   height: 39px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 12px;

   background: #fff0eb;

   font-size: 18px;
  }
.overview-point h3 {
   margin-top: 13px;

   color: var(--navy);

   font-size: 14px;
   font-weight: 900;
  }
.overview-point p {
   margin-top: 7px;

   color: var(--text-light);

   font-size: 10px;
   line-height: 1.6;
  }
/* =========================================================
       7. 使命与愿景
    ========================================================= */

  .mission-section {
   position: relative;
   overflow: hidden;

   color: #ffffff;

   background:
           linear-gradient(
                   135deg,
                   #182b4e,
                   #2d4573 56%,
                   #263c66
           );
  }
.mission-section::before {
   content: "";

   position: absolute;
   left: -200px;
   top: -260px;

   width: 630px;
   height: 630px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(90, 136, 216, 0.24),
                   transparent 68%
           );
  }
.mission-section::after {
   content: "";

   position: absolute;
   right: -220px;
   bottom: -290px;

   width: 660px;
   height: 660px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(236, 134, 72, 0.19),
                   transparent 68%
           );
  }
.mission-inner {
   position: relative;
   z-index: 2;
  }
.mission-section .section-label {
   color: #ffd4c7;
   background: rgba(255, 255, 255, 0.11);
  }
.mission-section .section-title {
   color: #ffffff;
  }
.mission-section .section-description {
   color: rgba(255, 255, 255, 0.68);
  }
.mission-layout {
   display: grid;
   grid-template-columns:
        minmax(0, 1.05fr)
        minmax(410px, 0.95fr);

   gap: 25px;
  }
.mission-main {
   min-height: 430px;
   padding: 38px;

   display: flex;
   flex-direction: column;
   justify-content: flex-end;

   border:
           1px solid
           rgba(255, 255, 255, 0.14);

   border-radius: 25px;

   background:
           linear-gradient(
                   180deg,
                   rgba(255, 255, 255, 0.05),
                   rgba(255, 255, 255, 0.1)
           );

   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
  }
.mission-quote {
   color:
           rgba(255, 255, 255, 0.17);

   font-family: Georgia, serif;
   font-size: 90px;
   line-height: 0.7;
  }
.mission-main h3 {
   max-width: 760px;
   margin-top: 18px;

   color: #ffffff;

   font-size: clamp(29px, 3.2vw, 43px);
   font-weight: 900;
   line-height: 1.38;
  }
.mission-main h3 span {
   color: #ffc783;
  }
.mission-main p {
   max-width: 720px;
   margin-top: 17px;

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

   font-size: 13px;
   line-height: 1.85;
  }
.mission-side {
   display: flex;
   flex-direction: column;
   gap: 16px;
  }
.mission-card {
   min-height: 128px;
   padding: 23px;

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

   gap: 15px;

   border:
           1px solid
           rgba(255, 255, 255, 0.13);

   border-radius: 20px;

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

   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);

   transition:
           transform 0.28s ease,
           background 0.28s ease;
  }
.mission-card:hover {
   transform: translateX(6px);

   background:
           rgba(255, 255, 255, 0.11);
  }
.mission-card-icon {
   width: 51px;
   height: 51px;

   display: flex;
   align-items: center;
   justify-content: center;

   border:
           1px solid
           rgba(255, 255, 255, 0.14);

   border-radius: 15px;

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

   font-size: 22px;
  }
.mission-card h3 {
   color: #ffffff;

   font-size: 16px;
   font-weight: 900;
  }
.mission-card p {
   margin-top: 8px;

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

   font-size: 11px;
   line-height: 1.7;
  }
/* =========================================================
       8. 核心价值观
    ========================================================= */

  .value-grid {
   display: grid;
   grid-template-columns:
        repeat(5, minmax(0, 1fr));

   gap: 17px;
  }
.value-card {
   position: relative;

   min-height: 285px;
   padding: 25px 20px;

   overflow: hidden;

   text-align: center;

   border: 1px solid var(--line);
   border-radius: 22px;

   background:
           linear-gradient(
                   180deg,
                   #ffffff,
                   #fafbfd
           );

   transition:
           transform 0.3s ease,
           border-color 0.3s ease,
           box-shadow 0.3s ease;
  }
.value-card::before {
   content: "";

   position: absolute;
   right: -70px;
   top: -70px;

   width: 175px;
   height: 175px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(234, 100, 61, 0.12),
                   transparent 70%
           );

   transition: transform 0.35s ease;
  }
.value-card:hover {
   transform: translateY(-8px);

   border-color:
           rgba(216, 74, 47, 0.22);

   box-shadow:
           0 19px 43px rgba(31, 46, 74, 0.12);
  }
.value-card:hover::before {
   transform: scale(1.15);
  }
.value-image {
   position: relative;
   z-index: 2;

   width: 96px;
   height: 96px;
   margin: 0 auto;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: #fff0e8;
  }
.value-card:nth-child(2) .value-image {
   background: #eaf2ff;
  }
.value-card:nth-child(3) .value-image {
   background: #e8f8f2;
  }
.value-card:nth-child(4) .value-image {
   background: #efecff;
  }
.value-card:nth-child(5) .value-image {
   background: #fff5e7;
  }
.value-image img {
   width: 90px;
   height: 90px;

   object-fit: contain;
  }
.value-card h3 {
   position: relative;
   z-index: 2;

   margin-top: 19px;

   color: var(--navy);

   font-size: 16px;
   font-weight: 900;
  }
.value-card p {
   position: relative;
   z-index: 2;

   margin-top: 9px;

   color: var(--text-soft);

   font-size: 11px;
   line-height: 1.7;
  }
/* =========================================================
       9. 服务方式
    ========================================================= */

  .way-layout {
   display: grid;
   grid-template-columns:
        minmax(400px, 0.78fr)
        minmax(600px, 1.22fr);

   align-items: start;
   gap: 58px;
  }
.way-intro {
   position: sticky;
   top: calc(var(--header-height) + 105px);

   padding: 31px;

   border-radius: 25px;

   color: #ffffff;

   background:
           linear-gradient(
                   145deg,
                   #1e3157,
                   #314a79
           );

   box-shadow:
           0 18px 44px rgba(24, 40, 70, 0.18);
  }
.way-intro-icon {
   width: 58px;
   height: 58px;

   display: flex;
   align-items: center;
   justify-content: center;

   border:
           1px solid
           rgba(255, 255, 255, 0.15);

   border-radius: 17px;

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

   font-size: 26px;
  }
.way-intro h3 {
   margin-top: 22px;

   font-size: 27px;
   font-weight: 900;
   line-height: 1.4;
  }
.way-intro p {
   margin-top: 16px;

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

   font-size: 13px;
   line-height: 1.85;
  }
.way-intro-slogan {
   margin-top: 26px;
   padding-top: 23px;

   border-top:
           1px solid
           rgba(255, 255, 255, 0.13);

   color: #ffd08f;

   font-size: 15px;
   font-weight: 900;
   line-height: 1.65;
  }
.way-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
  }
.way-item {
   padding: 24px;

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

   gap: 19px;

   border: 1px solid var(--line);
   border-radius: 21px;

   background: #ffffff;

   transition:
           transform 0.25s ease,
           border-color 0.25s ease,
           box-shadow 0.25s ease;
  }
.way-item:hover {
   transform: translateX(6px);

   border-color:
           rgba(216, 74, 47, 0.2);

   box-shadow:
           0 14px 33px rgba(31, 46, 74, 0.09);
  }
.way-number {
   width: 65px;
   height: 65px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 18px;

   color: var(--primary);
   background: #fff0eb;

   font-family: Arial, sans-serif;
   font-size: 17px;
   font-weight: 900;
  }
.way-item h3 {
   color: var(--navy);

   font-size: 17px;
   font-weight: 900;
  }
.way-item p {
   margin-top: 8px;

   color: var(--text-soft);

   font-size: 12px;
   line-height: 1.75;
  }
.way-tags {
   margin-top: 13px;

   display: flex;
   flex-wrap: wrap;
   gap: 7px;
  }
.way-tags span {
   padding: 5px 8px;

   border-radius: 999px;

   color: #657188;
   background: #eef3f9;

   font-size: 9px;
   font-weight: 700;
  }
/* =========================================================
       10. 团队与文化
    ========================================================= */

  .culture-layout {
   display: grid;
   grid-template-columns:
        minmax(0, 1.05fr)
        minmax(400px, 0.95fr);

   align-items: center;
   gap: 58px;
  }
.culture-scene {
   position: relative;

   min-height: 500px;
   overflow: hidden;

   border-radius: 28px;

   background: #dfe7f1;

   box-shadow:
           0 23px 56px rgba(31, 46, 74, 0.14);
  }
.culture-scene > img {
   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;

   object-fit: cover;
  }
.culture-scene::after {
   content: "";

   position: absolute;
   inset: 0;

   background:
           linear-gradient(
                   180deg,
                   rgba(18, 32, 56, 0.02) 28%,
                   rgba(18, 32, 56, 0.76) 100%
           );
  }
.culture-scene-content {
   position: absolute;
   left: 30px;
   right: 30px;
   bottom: 28px;
   z-index: 3;

   color: #ffffff;
  }
.culture-scene-content span {
   padding: 6px 10px;

   display: inline-flex;

   border:
           1px solid
           rgba(255, 255, 255, 0.28);

   border-radius: 999px;

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

   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);

   font-size: 9px;
   font-weight: 800;
  }
.culture-scene-content h3 {
   margin-top: 14px;

   font-size: 27px;
   font-weight: 900;
   line-height: 1.4;
  }
.culture-scene-content p {
   max-width: 620px;
   margin-top: 11px;

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

   font-size: 12px;
   line-height: 1.75;
  }
.culture-content h2 {
   margin-top: 18px;

   color: var(--navy);

   font-size: clamp(32px, 3.5vw, 48px);
   font-weight: 900;
   line-height: 1.28;
   letter-spacing: -0.045em;
  }
.culture-content > p {
   margin-top: 18px;

   color: var(--text-soft);

   font-size: 15px;
   line-height: 1.9;
  }
.culture-list {
   margin-top: 27px;

   display: grid;
   grid-template-columns:
        repeat(2, minmax(0, 1fr));

   gap: 13px;
  }
.culture-item {
   min-height: 105px;
   padding: 16px;

   display: flex;
   align-items: flex-start;
   gap: 12px;

   border: 1px solid var(--line);
   border-radius: 16px;

   background: #ffffff;
  }
.culture-item-icon {
   width: 36px;
   height: 36px;

   flex: 0 0 auto;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 11px;

   color: var(--primary);
   background: #fff0eb;

   font-size: 16px;
  }
.culture-item h3 {
   color: var(--navy);

   font-size: 13px;
   font-weight: 900;
  }
.culture-item p {
   margin-top: 6px;

   color: var(--text-light);

   font-size: 10px;
   line-height: 1.6;
  }
/* =========================================================
       11. 加入玖讯
    ========================================================= */

  .join-section {
   position: relative;
   overflow: hidden;

   background:
           radial-gradient(
                   circle at 12% 15%,
                   rgba(255, 220, 169, 0.35),
                   transparent 35%
           ),
           radial-gradient(
                   circle at 89% 80%,
                   rgba(196, 217, 255, 0.38),
                   transparent 37%
           ),
           #fbfcff;
  }
.join-grid {
   display: grid;
   grid-template-columns:
        repeat(4, minmax(0, 1fr));

   gap: 19px;
  }
.join-card {
   position: relative;

   min-height: 330px;
   padding: 26px;

   overflow: hidden;

   border: 1px solid var(--line);
   border-radius: 23px;

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

   box-shadow:
           0 9px 26px rgba(31, 46, 74, 0.06);

   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);

   transition:
           transform 0.3s ease,
           border-color 0.3s ease,
           box-shadow 0.3s ease;
  }
.join-card::before {
   content: "";

   position: absolute;
   right: -80px;
   top: -80px;

   width: 190px;
   height: 190px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(236, 112, 72, 0.14),
                   transparent 70%
           );
  }
.join-card:hover {
   transform: translateY(-8px);

   border-color:
           rgba(216, 74, 47, 0.22);

   box-shadow:
           0 19px 44px rgba(31, 46, 74, 0.13);
  }
.join-icon {
   position: relative;
   z-index: 2;

   width: 58px;
   height: 58px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 18px;

   background: #fff0eb;

   font-size: 26px;
  }
.join-card:nth-child(2) .join-icon {
   background: #eaf2ff;
  }
.join-card:nth-child(3) .join-icon {
   background: #e8f8f2;
  }
.join-card:nth-child(4) .join-icon {
   background: #efecff;
  }
.join-card h3 {
   position: relative;
   z-index: 2;

   margin-top: 22px;

   color: var(--navy);

   font-size: 19px;
   font-weight: 900;
  }
.join-card p {
   position: relative;
   z-index: 2;

   margin-top: 10px;

   color: var(--text-soft);

   font-size: 12px;
   line-height: 1.75;
  }
.join-card ul {
   position: relative;
   z-index: 2;

   margin-top: 18px;

   display: flex;
   flex-direction: column;
   gap: 9px;
  }
.join-card li {
   display: flex;
   align-items: center;
   gap: 8px;

   color: #66728a;

   font-size: 10px;
  }
.join-card li::before {
   content: "";

   width: 6px;
   height: 6px;

   flex: 0 0 auto;

   border-radius: 50%;

   background: var(--primary);
  }
.join-link {
   position: absolute;
   left: 26px;
   bottom: 25px;
   z-index: 3;

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

   color: var(--primary);

   font-size: 12px;
   font-weight: 800;
  }
/* =========================================================
       12. 联系我们
    ========================================================= */

  .contact-layout {
   display: grid;
   grid-template-columns:
        minmax(430px, 0.88fr)
        minmax(570px, 1.12fr);

   align-items: stretch;
   gap: 28px;
  }
.contact-info {
   position: relative;

   min-height: 610px;
   padding: 38px;

   overflow: hidden;

   border-radius: 28px;

   color: #ffffff;

   background:
           linear-gradient(
                   145deg,
                   #1e3157,
                   #314a79
           );

   box-shadow:
           0 20px 50px rgba(24, 40, 70, 0.18);
  }
.contact-info::before {
   content: "";

   position: absolute;
   right: -160px;
   top: -180px;

   width: 390px;
   height: 390px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(255, 191, 98, 0.2),
                   transparent 68%
           );
  }
.contact-info::after {
   content: "";

   position: absolute;
   left: -180px;
   bottom: -230px;

   width: 430px;
   height: 430px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(101, 146, 225, 0.24),
                   transparent 68%
           );
  }
.contact-info-content {
   position: relative;
   z-index: 2;
  }
.contact-info h2 {
   color: #ffffff;

   font-size: clamp(32px, 3.5vw, 46px);
   font-weight: 900;
   line-height: 1.3;
  }
.contact-info > .contact-info-content > p {
   margin-top: 16px;

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

   font-size: 13px;
   line-height: 1.85;
  }
.contact-methods {
   margin-top: 31px;

   display: flex;
   flex-direction: column;
   gap: 13px;
  }
.contact-method {
   padding: 16px;

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

   gap: 13px;

   border:
           1px solid
           rgba(255, 255, 255, 0.13);

   border-radius: 16px;

   background:
           rgba(255, 255, 255, 0.075);
  }
.contact-method-icon {
   width: 44px;
   height: 44px;

   display: flex;
   align-items: center;
   justify-content: center;

   border:
           1px solid
           rgba(255, 255, 255, 0.13);

   border-radius: 13px;

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

   font-size: 19px;
  }
.contact-method h3 {
   color: #ffffff;

   font-size: 12px;
   font-weight: 900;
  }
.contact-method p,
  .contact-method a {
   display: block;
   margin-top: 5px;

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

   font-size: 11px;
   line-height: 1.6;
  }
.contact-qr {
   margin-top: 25px;

   display: flex;
   align-items: center;
   gap: 16px;
  }
.contact-qr img {
   width: 104px;
   height: 104px;

   border:
           7px solid
           rgba(255, 255, 255, 0.92);

   border-radius: 15px;
  }
.contact-qr h3 {
   color: #ffffff;

   font-size: 14px;
   font-weight: 900;
  }
.contact-qr p {
   margin-top: 7px;

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

   font-size: 10px;
   line-height: 1.65;
  }
.contact-form-wrap {
   padding: 36px;

   border: 1px solid var(--line);
   border-radius: 28px;

   background: #ffffff;

   box-shadow:
           0 18px 45px rgba(31, 46, 74, 0.1);
  }
.contact-form-head h2 {
   color: var(--navy);

   font-size: 30px;
   font-weight: 900;
  }
.contact-form-head p {
   margin-top: 10px;

   color: var(--text-soft);

   font-size: 12px;
   line-height: 1.75;
  }
.contact-form {
   margin-top: 27px;
  }
.form-grid {
   display: grid;
   grid-template-columns:
        repeat(2, minmax(0, 1fr));

   gap: 16px;
  }
.form-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
  }
.form-group.full {
   grid-column: 1 / -1;
  }
.form-group label {
   color: var(--navy);

   font-size: 11px;
   font-weight: 800;
  }
.form-group input,
  .form-group select,
  .form-group textarea {
   width: 100%;

   border: 1px solid var(--line);
   border-radius: 12px;
   outline: 0;

   color: var(--text);
   background: #fbfcfe;

   font-size: 12px;

   transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease,
           background 0.2s ease;
  }
.form-group input,
  .form-group select {
   height: 47px;
   padding: 0 14px;
  }
.form-group textarea {
   min-height: 135px;
   padding: 13px 14px;

   resize: vertical;
  }
.form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
   border-color:
           rgba(216, 74, 47, 0.48);

   background: #ffffff;

   box-shadow:
           0 0 0 4px rgba(216, 74, 47, 0.08);
  }
.form-group input.error,
  .form-group textarea.error {
   border-color: #d84a2f;
  }
.form-agreement {
   margin-top: 18px;

   display: flex;
   align-items: flex-start;
   gap: 9px;

   color: var(--text-light);

   font-size: 10px;
   line-height: 1.55;
  }
.form-agreement input {
   margin-top: 2px;

   accent-color: var(--primary);
  }
.form-submit {
   margin-top: 21px;

   display: flex;
   align-items: center;
   gap: 14px;
  }
.form-message {
   min-height: 20px;

   color: var(--green);

   font-size: 11px;
   line-height: 1.5;
  }
/* =========================================================
       14. 响应式布局
    ========================================================= */

  @media (max-width: 1180px) {
   .hero-inner {
    grid-template-columns:
          minmax(390px, 0.92fr)
          minmax(490px, 1.08fr);

    gap: 38px;
   }


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

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

   .overview-layout,
   .way-layout,
   .culture-layout,
   .contact-layout {
    gap: 38px;
   }
  }
@media (max-width: 980px) {
   :root {
    --header-height: 68px;
   }

   .container {
    width: min(
            var(--page-width),
            calc(100% - 32px)
    );
   }

   .desktop-nav {
    display: none;
   }

   .menu-button {
    display: flex;
   }

   .about-hero {
    min-height: auto;
   }

   .hero-inner {
    min-height: auto;
    padding: 76px 0 93px;

    grid-template-columns: 1fr;
    gap: 55px;
   }

   .hero-content {
    max-width: 750px;
    margin: 0 auto;

    text-align: center;
   }

   .hero-description {
    margin-right: auto;
    margin-left: auto;
   }

   .hero-actions {
    justify-content: center;
   }

   .hero-principles {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;

    text-align: left;
   }


   .overview-layout,
   .mission-layout,
   .way-layout,
   .culture-layout,
   .contact-layout {
    grid-template-columns: 1fr;
   }

   .overview-visual {
    width: min(720px, 100%);
    margin: 0 auto;
   }

   .way-intro {
    position: static;
   }

   .culture-scene {
    min-height: 450px;
   }

   .contact-info {
    min-height: auto;
   }

   .footer-main {
    grid-template-columns:
          repeat(2, minmax(0, 1fr));
   }
  }
@media (max-width: 760px) {
   .section {
    padding: 74px 0;
   }


   .value-grid,
   .join-grid {
    grid-template-columns: 1fr;
   }

   .overview-points,
   .culture-list {
    grid-template-columns: 1fr;
   }

   .overview-visual {
    min-height: 470px;
   }

   .overview-main-image {
    width: 86%;
    height: 360px;
   }

   .overview-small-image {
    width: 50%;
    height: 220px;
   }

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

   .form-group.full {
    grid-column: auto;
   }

   .contact-form-wrap {
    padding: 28px;
   }
  }
@media (max-width: 680px) {
   .header-join {
    display: none;
   }

   .hero-title {
    font-size: clamp(42px, 12.8vw, 59px);
   }

   .hero-description {
    font-size: 15px;
   }

   .hero-actions {
    flex-direction: column;
   }

   .hero-actions .button {
    width: min(300px, 100%);
   }

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

   .hero-principle {
    padding-left: 0;

    text-align: center;

    border-left: 0;
   }











   .overview-visual {
    min-height: 430px;
   }

   .overview-main-image {
    width: 91%;
    height: 330px;
   }

   .overview-small-image {
    width: 54%;
    height: 195px;
    border-width: 7px;
   }

   .overview-badge {
    left: 2%;
    bottom: 20px;

    width: 165px;
   }

   .mission-main {
    min-height: 380px;
    padding: 28px;
   }

   .mission-card {
    grid-template-columns:
          45px
          minmax(0, 1fr);

    padding: 19px;
   }

   .mission-card-icon {
    width: 45px;
    height: 45px;
   }

   .way-item {
    grid-template-columns:
          54px
          minmax(0, 1fr);

    padding: 19px;
   }

   .way-number {
    width: 54px;
    height: 54px;
   }

   .culture-scene {
    min-height: 400px;
   }

   .contact-info,
   .contact-form-wrap {
    padding: 27px;
   }

   .form-submit {
    align-items: flex-start;
    flex-direction: column;
   }

   .footer-main {
    grid-template-columns: 1fr;
   }
  }
@media (max-width: 480px) {
   .container {
    width: calc(100% - 24px);
   }

   .site-logo img {
    height: 32px;
   }











   .overview-visual {
    min-height: 395px;
   }

   .overview-main-image {
    height: 300px;
   }

   .overview-small-image {
    height: 170px;
   }

   .overview-badge {
    width: 145px;
    padding: 13px;
   }

   .culture-scene {
    min-height: 360px;
   }

   .culture-scene-content {
    left: 22px;
    right: 22px;
    bottom: 21px;
   }

   .culture-scene-content h3 {
    font-size: 22px;
   }

   .contact-qr {
    align-items: flex-start;
    flex-direction: column;
   }

   .contact-form-wrap {
    padding: 22px;
   }
  }
.hero-title,
  .section-title,
  .overview-content h2,
  .mission-main h3,
  .mission-card h3,
  .value-card h3,
  .way-intro h3,
  .way-item h3,
  .culture-scene-content h3,
  .culture-content h2,
  .join-card h3,
  .contact-info h2,
  .contact-form-head h2,
  .footer-slogan {
   font-family:
           "HarmonyOS Sans SC",
           "MiSans",
           "PingFang SC",
           "Microsoft YaHei",
           sans-serif;
  }
.section-title,
  .overview-content h2,
  .culture-content h2 {
   color: #172849;
   letter-spacing: -0.035em;
  }
.section-description,
  .overview-content > p,
  .culture-content > p {
   color: #66748f;
  }
/* 了解我们首屏：深空星空背景 */

  .about-hero {
   background:
           radial-gradient(circle at 74% 46%, rgba(70, 104, 196, 0.22), transparent 24%),
           radial-gradient(circle at 88% 18%, rgba(112, 81, 190, 0.2), transparent 28%),
           radial-gradient(circle at 22% 24%, rgba(39, 79, 151, 0.22), transparent 31%),
           radial-gradient(circle at 15% 86%, rgba(20, 90, 134, 0.14), transparent 30%),
           linear-gradient(135deg, #040913 0%, #081329 48%, #0b1731 72%, #050b18 100%);
  }
.about-hero::before {
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   border-radius: 0;
   opacity: 0.9;
   background-image:
   radial-gradient(
           circle at 4% 14%,
           rgba(255, 255, 255, 0.95) 0,
           rgba(255, 255, 255, 0.95) 1px,
           transparent 1.6px
   ),
   radial-gradient(
           circle at 10% 71%,
           rgba(164, 205, 255, 0.75) 0,
           rgba(164, 205, 255, 0.75) 1px,
           transparent 1.7px
   ),
   radial-gradient(
           circle at 16% 35%,
           rgba(255, 255, 255, 0.72) 0,
           rgba(255, 255, 255, 0.72) 1.2px,
           transparent 1.9px
   ),
   radial-gradient(
           circle at 22% 88%,
           rgba(232, 194, 121, 0.8) 0,
           rgba(232, 194, 121, 0.8) 1px,
           transparent 1.7px
   ),
   radial-gradient(
           circle at 29% 11%,
           rgba(171, 205, 255, 0.78) 0,
           rgba(171, 205, 255, 0.78) 1px,
           transparent 1.8px
   ),
   radial-gradient(
           circle at 34% 58%,
           rgba(255, 255, 255, 0.88) 0,
           rgba(255, 255, 255, 0.88) 1px,
           transparent 1.7px
   ),
   radial-gradient(
           circle at 40% 81%,
           rgba(255, 255, 255, 0.65) 0,
           rgba(255, 255, 255, 0.65) 1.1px,
           transparent 1.8px
   ),
   radial-gradient(
           circle at 46% 29%,
           rgba(193, 211, 255, 0.85) 0,
           rgba(193, 211, 255, 0.85) 1px,
           transparent 1.7px
   ),
   radial-gradient(
           circle at 52% 67%,
           rgba(255, 255, 255, 0.92) 0,
           rgba(255, 255, 255, 0.92) 1.1px,
           transparent 1.8px
   ),
   radial-gradient(
           circle at 59% 9%,
           rgba(231, 191, 116, 0.78) 0,
           rgba(231, 191, 116, 0.78) 1px,
           transparent 1.7px
   ),
   radial-gradient(
           circle at 64% 83%,
           rgba(184, 213, 255, 0.75) 0,
           rgba(184, 213, 255, 0.75) 1px,
           transparent 1.8px
   ),
   radial-gradient(
           circle at 70% 34%,
           rgba(255, 255, 255, 0.86) 0,
           rgba(255, 255, 255, 0.86) 1.2px,
           transparent 1.9px
   ),
   radial-gradient(
           circle at 77% 72%,
           rgba(255, 255, 255, 0.68) 0,
           rgba(255, 255, 255, 0.68) 1px,
           transparent 1.7px
   ),
   radial-gradient(
           circle at 83% 13%,
           rgba(170, 205, 255, 0.8) 0,
           rgba(170, 205, 255, 0.8) 1.1px,
           transparent 1.8px
   ),
   radial-gradient(
           circle at 89% 48%,
           rgba(255, 255, 255, 0.9) 0,
           rgba(255, 255, 255, 0.9) 1px,
           transparent 1.7px
   ),
   radial-gradient(
           circle at 95% 86%,
           rgba(230, 190, 115, 0.75) 0,
           rgba(230, 190, 115, 0.75) 1px,
           transparent 1.7px
   );
   background-size: 100% 100%;
  }
.about-hero::after {
   left: auto;
   top: auto;
   right: 4%;
   bottom: 5%;
   width: 510px;
   height: 510px;
   border-radius: 50%;
   opacity: 0.7;
   background:
           radial-gradient(circle, rgba(93, 119, 215, 0.15), rgba(58, 73, 155, 0.05) 48%, transparent 71%);
   filter: blur(8px);
  }
.hero-label {
   color: #dbe5ff;
   border-color: rgba(142, 162, 232, 0.3);
   background: rgba(18, 34, 67, 0.58);
   box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, 0.08),
           0 10px 28px rgba(0, 0, 0, 0.2);
  }
.hero-title {
   color: #f4f7ff;
   text-shadow: 0 5px 32px rgba(0, 0, 0, 0.28);
  }
.hero-description {
   color: #aebbd2;
  }
.hero-principle {
   border-left-color: rgba(156, 177, 231, 0.3);
  }
.hero-principle strong {
   color: #e4eaff;
  }
.hero-principle span {
   color: #99a9c3;
  }
/* 二级导航 */




  /* 公司介绍 */

  .overview-main-image,
  .overview-small-image {
   background: #e7edf6;
   box-shadow: 0 23px 57px rgba(22, 43, 82, 0.15);
  }
.overview-small-image {
   border-color: #f9fbff;
  }
.overview-main-image::after {
   background: linear-gradient(180deg, transparent 42%, rgba(10, 23, 49, 0.42));
  }
.overview-badge {
   border-color: rgba(204, 216, 235, 0.84);
   background: rgba(249, 251, 255, 0.92);
   box-shadow: 0 16px 38px rgba(24, 45, 83, 0.15);
  }
.overview-badge strong,
  .overview-point h3 {
   color: #172849;
  }
.overview-badge p,
  .overview-point p {
   color: #758199;
  }
.overview-point {
   border-color: #dfe6f1;
   background: linear-gradient(180deg, #ffffff, #f8faff);
  }
.overview-point:hover {
   border-color: rgba(83, 104, 216, 0.28);
   box-shadow: 0 16px 34px rgba(28, 48, 91, 0.11);
  }
.overview-point-icon {
   color: #4b61c4;
   background: #e9edff;
  }
/* 使命愿景 */

  .mission-section {
   background:
           radial-gradient(circle at 13% 15%, rgba(86, 112, 210, 0.22), transparent 32%),
           radial-gradient(circle at 88% 88%, rgba(121, 95, 204, 0.18), transparent 34%),
           linear-gradient(135deg, #071225, #13254a 55%, #1b2f5b);
  }
.mission-section::before {
   background: radial-gradient(circle, rgba(87, 118, 216, 0.25), transparent 68%);
  }
.mission-section::after {
   background: radial-gradient(circle, rgba(117, 95, 205, 0.2), transparent 68%);
  }
.mission-section .section-label {
   color: #dce6ff;
   background: rgba(112, 130, 212, 0.18);
   border: 1px solid rgba(165, 180, 235, 0.16);
  }
.mission-main,
  .mission-card {
   border-color: rgba(169, 186, 231, 0.15);
   background: rgba(255, 255, 255, 0.065);
  }
.mission-card:hover {
   background: rgba(255, 255, 255, 0.105);
  }
.mission-main h3 span {
   color: #bdc9ff;
  }
.mission-quote {
   color: rgba(177, 193, 247, 0.22);
  }
.mission-card-icon {
   color: #cbd6ff;
   border-color: rgba(169, 186, 231, 0.17);
   background: rgba(112, 130, 212, 0.13);
  }
/* 核心价值卡片 */

  .value-card {
   border-color: #dfe6f1;
   background: linear-gradient(180deg, #ffffff, #f8faff);
   box-shadow: 0 9px 26px rgba(25, 46, 83, 0.055);
  }
.value-card::before {
   background: radial-gradient(circle, rgba(83, 104, 216, 0.12), transparent 70%);
  }
.value-card:hover {
   border-color: rgba(83, 104, 216, 0.3);
   box-shadow: 0 20px 45px rgba(28, 47, 91, 0.13);
  }
.value-image {
   background: #e9edff;
  }
.value-card:nth-child(2) .value-image {
   background: #e7effc;
  }
.value-card:nth-child(3) .value-image {
   background: #e5f5f0;
  }
.value-card:nth-child(4) .value-image {
   background: #ece9fb;
  }
.value-card:nth-child(5) .value-image {
   background: #f4f0e7;
  }
.value-card h3 {
   color: #172849;
  }
.value-card p {
   color: #66748f;
  }
/* 服务方式 */

  .way-intro {
   background:
           radial-gradient(circle at 80% 8%, rgba(109, 124, 218, 0.2), transparent 34%),
           linear-gradient(145deg, #0d1b38, #203966);
   box-shadow: 0 19px 46px rgba(15, 34, 67, 0.22);
  }
.way-intro-icon {
   color: #dbe4ff;
   border-color: rgba(170, 187, 235, 0.17);
   background: rgba(109, 124, 218, 0.13);
  }
.way-intro-slogan {
   color: #bdc9ff;
   border-top-color: rgba(169, 186, 231, 0.15);
  }
.way-item {
   border-color: #dfe6f1;
   background: linear-gradient(180deg, #ffffff, #f9fbff);
  }
.way-item:hover {
   border-color: rgba(83, 104, 216, 0.28);
   box-shadow: 0 16px 35px rgba(28, 48, 91, 0.11);
  }
.way-number {
   color: #445bc1;
   background: #e9edff;
  }
.way-item h3 {
   color: #172849;
  }
.way-item p {
   color: #66748f;
  }
.way-tags span {
   color: #5f6d86;
   background: #edf2f8;
  }
/* 团队文化 */

  .culture-scene {
   background: #e3eaf4;
   box-shadow: 0 24px 58px rgba(22, 43, 82, 0.15);
  }
.culture-scene::after {
   background: linear-gradient(180deg, rgba(8, 18, 39, 0.02) 26%, rgba(8, 20, 44, 0.84) 100%);
  }
.culture-scene-content span {
   color: #edf3ff;
   border-color: rgba(190, 204, 239, 0.28);
   background: rgba(28, 44, 82, 0.42);
  }
.culture-item {
   border-color: #dfe6f1;
   background: linear-gradient(180deg, #ffffff, #f9fbff);
  }
.culture-item-icon {
   color: #4b61c4;
   background: #e9edff;
  }
.culture-item h3 {
   color: #172849;
  }
.culture-item p {
   color: #78849b;
  }
/* 加入玖讯 */

  .join-section {
   background:
           radial-gradient(circle at 11% 13%, rgba(83, 104, 216, 0.08), transparent 32%),
           radial-gradient(circle at 89% 84%, rgba(112, 183, 228, 0.09), transparent 34%),
           #f3f6fb;
  }
.join-card {
   border-color: #dfe6f1;
   background: rgba(251, 252, 255, 0.94);
   box-shadow: 0 10px 28px rgba(25, 46, 83, 0.065);
  }
.join-card::before {
   background: radial-gradient(circle, rgba(83, 104, 216, 0.13), transparent 70%);
  }
.join-card:hover {
   border-color: rgba(83, 104, 216, 0.3);
   box-shadow: 0 20px 45px rgba(28, 47, 91, 0.13);
  }
.join-icon {
   background: #e9edff;
  }
.join-card:nth-child(2) .join-icon {
   background: #e7effc;
  }
.join-card:nth-child(3) .join-icon {
   background: #e5f5f0;
  }
.join-card:nth-child(4) .join-icon {
   background: #ece9fb;
  }
.join-card h3 {
   color: #172849;
  }
.join-card p,
  .join-card li {
   color: #66748f;
  }
.join-card li::before {
   background: #5368d8;
  }
.join-link {
   color: #4b61c4;
  }
/* 联系我们 */

  .contact-info {
   background:
           radial-gradient(circle at 84% 9%, rgba(103, 124, 218, 0.23), transparent 34%),
           linear-gradient(145deg, #0c1934, #203966);
   box-shadow: 0 21px 52px rgba(15, 34, 67, 0.23);
  }
.contact-info::before {
   background: radial-gradient(circle, rgba(99, 119, 215, 0.22), transparent 68%);
  }
.contact-info::after {
   background: radial-gradient(circle, rgba(75, 132, 211, 0.2), transparent 68%);
  }
.contact-method {
   border-color: rgba(169, 186, 231, 0.15);
   background: rgba(255, 255, 255, 0.065);
  }
.contact-method-icon {
   color: #d7e1ff;
   border-color: rgba(169, 186, 231, 0.16);
   background: rgba(112, 130, 212, 0.12);
  }
.contact-qr img {
   border-color: rgba(247, 250, 255, 0.92);
  }
.contact-form-wrap {
   border-color: #dfe6f1;
   background: linear-gradient(180deg, #ffffff, #f9fbff);
   box-shadow: 0 19px 47px rgba(25, 46, 83, 0.11);
  }
.contact-form-head h2,
  .form-group label {
   color: #172849;
  }
.contact-form-head p {
   color: #66748f;
  }
.form-group input,
  .form-group select,
  .form-group textarea {
   color: #2d3d5b;
   border-color: #dce5f1;
   background: #f7f9fd;
  }
.form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
   border-color: rgba(83, 104, 216, 0.55);
   background: #ffffff;
   box-shadow: 0 0 0 4px rgba(83, 104, 216, 0.09);
  }
.form-group input.error,
  .form-group textarea.error {
   border-color: #687ad2;
  }
.form-agreement input {
   accent-color: #5368d8;
  }
/* 页脚 */

  .site-footer {
   border-top-color: #dce5f1;
   background:
           radial-gradient(circle at 10% 0%, rgba(83, 104, 216, 0.045), transparent 28%),
           #eef3f9;
  }
.footer-column h3,
  .footer-slogan {
   color: #172849;
  }
.footer-qr img {
   border-color: #d6e0ed;
   background: #ffffff;
   box-shadow: 0 9px 25px rgba(25, 46, 83, 0.08);
  }
.footer-bottom {
   border-top-color: #dce5f1;
   color: #8793a8;
  }