/* ============================================================
   site.css - module13 phase A shared stylesheet (auto-generated)
   Single source: rule atoms identical in about/Join/news, verified
   cascade-safe (pixel-identical) for each consuming page.
   Load order: site.css then page-*.css (about/Join/news only).
   Experience keeps its own full css, does NOT load this file.
   Generated 2026-09-08.
   ============================================================ */

/* ---- base rules ---- */
/* =========================================================
       1. 全局基础样式
    ========================================================= */

  * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
:root {
   --primary: #d84a2f;
   --primary-dark: #b83a24;
   --primary-light: #f16a4f;

   --navy: #25355f;
   --navy-dark: #172746;
   --navy-light: #42547f;

   --text: #263550;
   --text-soft: #617089;
   --text-light: #8b95a8;

   --white: #ffffff;
   --cream: #fdf9f1;
   --gray: #f7f9fc;
   --gray-blue: #f1f5fa;

   --line: #e4eaf3;
   --line-dark: #d5deea;

   --green: #35966f;
   --blue: #417bd5;
   --purple: #7960d3;
   --orange: #e38b3c;

   --header-height: 76px;
   --page-width: 1280px;
  }
body {
   min-width: 320px;
   overflow-x: hidden;

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

   font-family:
           "PingFang SC",
           "Microsoft YaHei",
           "Noto Sans SC",
           Arial,
           sans-serif;
  }
body.menu-open {
   overflow: hidden;
  }
img {
   display: block;
   max-width: 100%;
  }
a {
   color: inherit;
   text-decoration: none;
  }
ul {
   list-style: none;
  }
.container {
   width: min(
           var(--page-width),
           calc(100% - 48px)
   );

   margin: 0 auto;
  }
.section {
   padding: 96px 0;
  }
.section-white {
   background: var(--white);
  }
.section-gray {
   background: var(--gray);
  }
.section-cream {
   background: var(--cream);
  }
.section-heading.center {
   text-align: center;
  }
.section-heading.center .section-description {
   margin-right: auto;
   margin-left: auto;
  }
.section-label {
   min-height: 32px;
   padding: 6px 16px;

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

   border-radius: 999px;

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

   font-size: 13px;
   font-weight: 800;
   letter-spacing: 0.12em;
  }
.section-title {
   margin-top: 18px;

   color: var(--navy);

   font-size: clamp(31px, 3.2vw, 46px);
   font-weight: 900;
   line-height: 1.24;
   letter-spacing: -0.045em;
  }
.section-description {
   max-width: 720px;
   margin-top: 15px;

   color: var(--text-soft);

   font-size: 15px;
   line-height: 1.9;
  }
.button {
   min-height: 50px;
   padding: 0 26px;

   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;

   border-radius: 999px;

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

   transition:
           transform 0.25s ease,
           box-shadow 0.25s ease,
           border-color 0.25s ease,
           background 0.25s ease;
  }
.button:hover {
   transform: translateY(-3px);
  }
.button-primary {
   color: #ffffff;

   background:
           linear-gradient(
                   135deg,
                   #ed573a,
                   #d94028
           );

   box-shadow:
           0 12px 28px rgba(216, 74, 47, 0.28);
  }
.button-primary:hover {
   box-shadow:
           0 18px 36px rgba(216, 74, 47, 0.35);
  }
.button-secondary {
   color: var(--navy);

   border: 1px solid #cad4e2;
   background: rgba(255, 255, 255, 0.84);

   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
  }
.button-secondary:hover {
   border-color: var(--primary);
  }
.reveal {
   opacity: 0;
   transform: translateY(25px);

   transition:
           opacity 0.7s ease,
           transform 0.7s ease;
  }
.reveal.visible {
   opacity: 1;
   transform: translateY(0);
  }
/* =========================================================
       2. 顶部导航栏
    ========================================================= */

  .site-header {
   position: sticky;
   top: 0;
   z-index: 1000;

   height: var(--header-height);

   border-bottom: 1px solid var(--line);
   background: rgba(255, 255, 255, 0.94);

   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
  }
.header-inner {
   height: 100%;

   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
  }
.header-left {
   display: flex;
   align-items: center;
   gap: 46px;
  }
.site-logo {
   flex-shrink: 0;
  }
.site-logo img {
   width: auto;
   height: 38px;
  }
.desktop-nav {
   display: flex;
   align-items: center;
   gap: 10px;
  }
.desktop-nav a {
   padding: 11px 14px;

   border-radius: 999px;

   color: #34425e;

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

   transition:
           color 0.2s ease,
           background 0.2s ease;
  }
.desktop-nav a:hover,
  .desktop-nav a.active {
   color: var(--primary);
   background: #fff1ec;
  }
.header-actions {
   display: flex;
   align-items: center;
   gap: 12px;
  }
.header-join {
   min-height: 44px;
   padding: 0 23px;

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

   border-radius: 999px;

   color: #ffffff;

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

   background:
           linear-gradient(
                   135deg,
                   #eb573a,
                   #d63f27
           );

   box-shadow:
           0 9px 23px rgba(216, 74, 47, 0.27);

   transition:
           transform 0.25s ease,
           box-shadow 0.25s ease;
  }
.header-join:hover {
   transform: translateY(-2px);

   box-shadow:
           0 13px 28px rgba(216, 74, 47, 0.34);
  }
.menu-button {
   width: 42px;
   height: 42px;

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

   border-radius: 10px;

   color: var(--navy);
  }
.menu-button svg {
   width: 23px;
   height: 23px;
  }
.mobile-menu {
   position: fixed;
   top: var(--header-height);
   right: 0;
   left: 0;
   z-index: 999;

   display: none;

   padding: 18px 24px 28px;

   border-bottom: 1px solid var(--line);
   background: rgba(255, 255, 255, 0.98);

   box-shadow:
           0 18px 38px rgba(25, 40, 70, 0.1);
  }
.mobile-menu.open {
   display: block;
  }
.mobile-menu a {
   display: block;

   padding: 14px 10px;

   border-bottom: 1px solid #edf1f6;

   color: var(--navy);

   font-size: 15px;
   font-weight: 800;
  }
.mobile-menu a.active {
   color: var(--primary);
  }
.hero-label-dot {
   width: 8px;
   height: 8px;

   border-radius: 50%;

   background: var(--primary);

   box-shadow:
           0 0 0 5px rgba(216, 74, 47, 0.1);
  }
.hero-title span {
   color: var(--primary);
  }
.hero-actions {
   margin-top: 34px;

   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 14px;
  }
/* =========================================================
       13. 页脚
    ========================================================= */

  .site-footer {
   border-top: 1px solid var(--line);
   background: #f7f9fc;
  }
.footer-main {
   padding: 60px 0;

   display: grid;
   grid-template-columns:
        1.4fr
        0.8fr
        0.8fr
        0.8fr
        1fr;

   gap: 42px;
  }
.footer-brand img {
   width: auto;
   height: 38px;
  }
.footer-brand p {
   max-width: 310px;
   margin-top: 17px;

   color: var(--text-soft);

   font-size: 13px;
   line-height: 1.8;
  }
.footer-slogan {
   margin-top: 19px;

   color: var(--navy);

   font-size: 18px;
   font-weight: 900;
  }
.footer-slogan span {
   color: var(--primary);
  }
.footer-column h3 {
   color: var(--navy);

   font-size: 14px;
   font-weight: 900;
  }
.footer-column ul {
   margin-top: 17px;

   display: flex;
   flex-direction: column;
   gap: 12px;
  }
.footer-column a {
   color: var(--text-soft);

   font-size: 13px;

   transition: color 0.2s ease;
  }
.footer-column a:hover {
   color: var(--primary);
  }
.footer-qr img {
   width: 104px;
   height: 104px;
   margin-top: 15px;

   border: 1px solid var(--line);
   border-radius: 13px;
  }
.footer-qr p {
   margin-top: 8px;

   color: var(--text-light);

   font-size: 11px;
  }
.footer-bottom {
   padding: 20px 0;

   text-align: center;

   border-top: 1px solid var(--line);

   color: var(--text-light);

   font-size: 12px;
  }
/* =========================================================
     视觉主题优化：深空蓝紫科技配色
     仅调整颜色、字体、背景、阴影和按钮视觉，不改变页面内容结构
  ========================================================= */

  :root {
   --primary: #5368d8;
   --primary-dark: #35489d;
   --primary-light: #7d8bea;

   --navy: #172849;
   --navy-dark: #0b1730;
   --navy-light: #40557d;

   --text: #2d3d5b;
   --text-soft: #66748f;
   --text-light: #8d99ad;

   --white: #ffffff;
   --cream: #f5f7fc;
   --gray: #eef3f9;
   --gray-blue: #e9eff7;

   --line: #dfe6f1;
   --line-dark: #ccd7e6;

   --green: #31967d;
   --blue: #4a78d4;
   --purple: #7566d8;
   --orange: #d3a85f;

   --space: #050b18;
   --space-soft: #0d1b38;
   --indigo: #5368d8;
   --violet: #7869df;
   --cyan: #70b7e4;
   --gold: #e4bb68;
  }
body {
   color: var(--text);
   background: #f8faff;
   font-family:
           "HarmonyOS Sans SC",
           "MiSans",
           "PingFang SC",
           "Microsoft YaHei",
           "Noto Sans SC",
           Arial,
           sans-serif;
   font-synthesis: style;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
  }
.section-white {
   background: #f9fbff;
  }
.section-gray {
   background:
           radial-gradient(circle at 8% 10%, rgba(83, 104, 216, 0.055), transparent 30%),
           radial-gradient(circle at 92% 88%, rgba(112, 183, 228, 0.07), transparent 32%),
           #eef3f9;
  }
.section-cream {
   background:
           radial-gradient(circle at 88% 12%, rgba(118, 105, 223, 0.06), transparent 30%),
           #f5f7fc;
  }
.section-label {
   color: #f7f9ff;
   background: linear-gradient(135deg, #29447d, #5368d8);
   box-shadow: 0 9px 22px rgba(48, 72, 145, 0.18);
  }
.button {
   letter-spacing: 0.015em;
  }
.button-primary {
   color: #ffffff;
   background: linear-gradient(135deg, #355fd3 0%, #586ddd 56%, #7465d8 100%);
   box-shadow:
           0 12px 28px rgba(64, 88, 190, 0.25),
           inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
.button-primary:hover {
   background: linear-gradient(135deg, #2f57c5 0%, #5368d8 52%, #6c5fcf 100%);
   box-shadow:
           0 17px 36px rgba(62, 86, 184, 0.34),
           0 0 0 4px rgba(228, 187, 104, 0.11);
  }
.button-secondary {
   color: #23385f;
   border-color: #cbd6e7;
   background: rgba(250, 252, 255, 0.9);
   box-shadow: 0 8px 22px rgba(26, 48, 88, 0.06);
  }
.button-secondary:hover {
   color: #354fa9;
   border-color: #7185d8;
   background: #ffffff;
   box-shadow: 0 12px 28px rgba(57, 79, 151, 0.12);
  }
/* 顶部导航 */

  .site-header {
   border-bottom-color: rgba(204, 216, 233, 0.86);
   background: rgba(249, 251, 255, 0.92);
   box-shadow: 0 7px 28px rgba(15, 34, 67, 0.055);
  }
.desktop-nav a {
   color: #3a4966;
  }
.desktop-nav a:hover,
  .desktop-nav a.active {
   color: #3d57bd;
   background: #edf1ff;
  }
.header-join {
   color: #ffffff;
   background: linear-gradient(135deg, #355fd3, #6a61d5);
   box-shadow: 0 10px 24px rgba(62, 87, 188, 0.25);
  }
.header-join:hover {
   box-shadow:
           0 14px 30px rgba(62, 87, 188, 0.32),
           0 0 0 4px rgba(228, 187, 104, 0.1);
  }
.mobile-menu {
   border-bottom-color: #dce5f1;
   background: rgba(249, 251, 255, 0.985);
   box-shadow: 0 20px 42px rgba(14, 32, 64, 0.13);
  }
.mobile-menu a {
   color: #223758;
   border-bottom-color: #e6ecf5;
  }
.mobile-menu a:hover,
  .mobile-menu a.active {
   color: #425cc1;
  }
.hero-label-dot {
   background: #e4bb68;
   box-shadow:
           0 0 0 5px rgba(228, 187, 104, 0.12),
           0 0 18px rgba(228, 187, 104, 0.55);
  }
.hero-title span {
   color: #aab9ff;
   background: linear-gradient(110deg, #a9bcff, #c2b7ff 55%, #e4bb68);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
  }
.hero-actions .button-secondary {
   color: #dce6fa;
   border-color: rgba(156, 177, 231, 0.35);
   background: rgba(15, 31, 61, 0.68);
  }
.hero-actions .button-secondary:hover {
   color: #ffffff;
   border-color: rgba(183, 199, 245, 0.62);
   background: rgba(30, 50, 91, 0.84);
  }
.footer-brand p,
  .footer-column a {
   color: #66748f;
  }
.footer-slogan span {
   color: #5368d8;
  }
.footer-column a:hover {
   color: #435bc0;
  }

@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;
   }
   .hero-content {
    max-width: 750px;
    margin: 0 auto;

    text-align: center;
   }
   .hero-description {
    margin-right: auto;
    margin-left: auto;
   }
   .footer-main {
    grid-template-columns:
          repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 760px) {
   .section {
    padding: 74px 0;
   }
}

@media (max-width: 680px) {
   .header-join {
    display: none;
   }
   .hero-description {
    font-size: 15px;
   }
   .hero-actions {
    flex-direction: column;
   }
   .hero-actions .button {
    width: min(300px, 100%);
   }
   .footer-main {
    grid-template-columns: 1fr;
   }
}

@media (max-width: 480px) {
   .container {
    width: calc(100% - 24px);
   }
   .site-logo img {
    height: 32px;
   }
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
   }
}