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

:root {
   --header: 76px;
}
@media (max-width: 980px) {
   :root {
      --header: 68px;
   }
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 140px;
  }
button {
   border: 0;
   color: inherit;
   font: inherit;
   background: none;
   cursor: pointer;
  }
.section-heading {
   margin-bottom: 43px;
  }
/* =========================================================
       3. 行业动态首屏
    ========================================================= */

  .news-hero {
   position: relative;

   min-height: calc(100vh - var(--header));
   overflow: hidden;

   background:
           radial-gradient(
                   circle at 12% 18%,
                   rgba(255, 220, 169, 0.46),
                   transparent 35%
           ),
           radial-gradient(
                   circle at 85% 25%,
                   rgba(202, 221, 255, 0.43),
                   transparent 38%
           ),
           linear-gradient(
                   120deg,
                   #fffdf8,
                   #f8faff 55%,
                   #fff8f2
           );
  }
.news-hero::before {
   content: "";

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

   width: 760px;
   height: 760px;

   border-radius: 50%;

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

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

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

   width: 700px;
   height: 700px;

   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: calc(100vh - var(--header));
   padding: 32px 0;

   display: grid;
   grid-template-columns:
        minmax(430px, 0.88fr)
        minmax(560px, 1.12fr);

   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.75);

   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: 680px;
   margin-top: 24px;

   color: var(--navy);

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

   color: var(--text-soft);

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

   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 9px;
  }
.hero-keywords strong {
   margin-right: 4px;

   color: var(--navy);

   font-size: 12px;
  }
.hero-keywords span {
   padding: 7px 11px;

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

   color: #69768d;
   background: rgba(255, 255, 255, 0.68);

   font-size: 10px;
   font-weight: 700;
  }
/* =========================================================
       4. 首屏行业动态流示意图
    ========================================================= */

  .news-stream {
   position: relative;

   width: 100%;
   max-width: 640px;
   min-height: 520px;

   justify-self: end;
  }
.stream-glow {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 0;

   width: 84%;
   height: 78%;

   border-radius: 50%;

   background:
           radial-gradient(
                   ellipse,
                   rgba(255, 191, 88, 0.2),
                   rgba(255, 216, 157, 0.07) 40%,
                   transparent 72%
           );

   filter: blur(14px);
   transform: translate(-50%, -50%);
  }
.stream-main {
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 10;

   width: 430px;
   min-height: 300px;
   padding: 25px;

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

   border-radius: 28px;

   background:
           linear-gradient(
                   145deg,
                   rgba(36, 54, 91, 0.95),
                   rgba(57, 79, 124, 0.88)
           ),
           url("../images/blog/blog_ai_one_person_img_1775068078843.png")
           center / cover;

   box-shadow:
           0 27px 62px rgba(31, 48, 79, 0.19);

   transform: translate(-50%, -50%);
  }
.stream-main::before {
   content: "";

   position: absolute;
   inset: 0;

   border-radius: inherit;

   background:
           linear-gradient(
                   180deg,
                   rgba(20, 34, 59, 0.06),
                   rgba(20, 34, 59, 0.88)
           );
  }
.stream-main-content {
   position: absolute;
   left: 25px;
   right: 25px;
   bottom: 25px;
   z-index: 2;

   color: #ffffff;
  }
.stream-tag {
   width: max-content;
   padding: 6px 10px;

   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 999px;

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

   font-size: 9px;
   font-weight: 800;
  }
.stream-main h3 {
   margin-top: 14px;

   font-size: 23px;
   font-weight: 900;
   line-height: 1.42;
  }
.stream-main p {
   margin-top: 11px;

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

   font-size: 11px;
   line-height: 1.7;
  }
.floating-news {
   position: absolute;
   z-index: 20;

   width: 190px;
   min-height: 118px;
   padding: 16px;

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

   border-radius: 19px;

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

   box-shadow:
           0 16px 38px rgba(31, 48, 79, 0.12);

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

   animation:
           newsFloating 5.6s ease-in-out infinite;
  }
.floating-news.cloud {
   right: 0;
   top: 7%;

   animation-delay: -1.4s;
  }
.floating-news.security {
   left: 0;
   bottom: 8%;

   animation-delay: -3.2s;
  }
@keyframes newsFloating {
   0%,
   100% {
    transform: translateY(0);
   }

   50% {
    transform: translateY(-8px);
   }
  }
.floating-news-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
  }
.floating-news-tag {
   padding: 5px 8px;

   border-radius: 999px;

   font-size: 8px;
   font-weight: 800;
  }
.floating-news.cloud .floating-news-tag {
   color: var(--green);
   background: #e8f8f2;
  }
.floating-news.security .floating-news-tag {
   color: var(--purple);
   background: #efecff;
  }
.floating-news time {
   color: #9aa4b4;

   font-size: 8px;
  }
.floating-news h3 {
   margin-top: 12px;

   color: var(--navy);

   font-size: 12px;
   font-weight: 900;
   line-height: 1.55;
  }
.floating-news p {
   margin-top: 7px;

   color: var(--text-soft);

   font-size: 9px;
   line-height: 1.55;
  }
.stream-stat {
   position: absolute;
   left: 50%;
   bottom: 1%;
   z-index: 22;

   width: 300px;
   padding: 13px 16px;

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

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

   border-radius: 16px;

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

   box-shadow:
           0 13px 33px rgba(31, 48, 79, 0.09);

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

   transform: translateX(-50%);
  }
.stream-stat div {
   text-align: center;
  }
.stream-stat div:not(:last-child) {
   border-right: 1px solid var(--line);
  }
.stream-stat strong {
   display: block;

   color: var(--navy);

   font-size: 14px;
   font-weight: 900;
  }
.stream-stat span {
   display: block;
   margin-top: 3px;

   color: var(--text-light);

   font-size: 8px;
  }
/* =========================================================
       5. 行业动态二级导航
    ========================================================= */






  /* =========================================================
       6. 今日精选
    ========================================================= */

  .featured-layout {
   display: grid;
   grid-template-columns:
        minmax(0, 1.22fr)
        minmax(330px, 0.78fr);

   gap: 25px;
  }
.news-data-state {
   grid-column: 1 / -1;
   width: 100%;
   min-height: 150px;
   padding: 42px 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: var(--text-soft);
   border: 1px solid var(--line);
   border-radius: 22px;
   background: rgba(255, 255, 255, .9);
   box-shadow: 0 12px 32px rgba(31, 46, 74, .06);
  }
.news-data-state strong {
   display: block;
   margin-bottom: 8px;
   color: var(--navy-dark);
   font-size: 18px;
  }
.news-data-state p {
   margin: 0;
   line-height: 1.7;
  }
.news-data-state.is-error strong {
   color: #b54747;
  }
.insight-layout > .news-data-state {
   color: rgba(255, 255, 255, .72);
   border-color: rgba(255, 255, 255, .14);
   background: rgba(255, 255, 255, .08);
   box-shadow: none;
  }
.insight-layout > .news-data-state strong {
   color: #ffffff;
  }
.insight-layout > .news-data-state.is-error strong {
   color: #ffd0c7;
  }
.featured-side .news-data-state {
   min-height: 100%;
   padding: 28px 20px;
  }
.featured-main {
   position: relative;

   min-height: 500px;
   overflow: hidden;

   border-radius: 26px;

   color: #ffffff;
   background: #23375f;

   box-shadow:
           0 18px 48px rgba(30, 45, 74, 0.17);
  }
.featured-main img {
   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition: transform 0.55s ease;
  }
.featured-main:hover img {
   transform: scale(1.05);
  }
.featured-main::after {
   content: "";

   position: absolute;
   inset: 0;

   background:
           linear-gradient(
                   180deg,
                   rgba(17, 31, 55, 0.05) 18%,
                   rgba(17, 31, 55, 0.91) 100%
           );
  }
.featured-main-content {
   position: absolute;
   left: 35px;
   right: 35px;
   bottom: 34px;
   z-index: 3;
  }
.article-meta {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 9px;

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

   font-size: 10px;
  }
.article-category {
   padding: 6px 10px;

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

   border-radius: 999px;

   color: #ffffff;
   background:
           rgba(255, 255, 255, 0.14);

   font-weight: 800;
  }
.featured-main h2 {
   max-width: 760px;
   margin-top: 18px;

   font-size: clamp(28px, 3.3vw, 44px);
   font-weight: 900;
   line-height: 1.3;
   letter-spacing: -0.03em;
  }
.featured-main p {
   max-width: 730px;
   margin-top: 14px;

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

   font-size: 13px;
   line-height: 1.8;
  }
.article-read {
   margin-top: 20px;

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

   color: #ffffff;

   font-size: 12px;
   font-weight: 800;
  }
.featured-side {
   display: flex;
   flex-direction: column;
   gap: 16px;
  }
.side-article {
   min-height: 156px;
   padding: 21px;

   display: flex;
   flex-direction: column;
   justify-content: space-between;

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

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

   transition:
           transform 0.28s ease,
           border-color 0.28s ease,
           box-shadow 0.28s ease;
  }
.side-article:hover {
   transform: translateX(6px);

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

   box-shadow:
           0 14px 32px rgba(31, 46, 74, 0.1);
  }
.side-article-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
  }
.side-category {
   padding: 5px 9px;

   border-radius: 999px;

   font-size: 9px;
   font-weight: 800;
  }
.side-category.cloud {
   color: var(--green);
   background: #e8f8f2;
  }
.side-category.data {
   color: var(--blue);
   background: #eaf2ff;
  }
.side-category.security {
   color: var(--purple);
   background: #efecff;
  }
.side-article time {
   color: var(--text-light);

   font-size: 9px;
  }
.side-article h3 {
   margin-top: 13px;

   color: var(--navy);

   font-size: 16px;
   font-weight: 900;
   line-height: 1.55;
  }
.side-article p {
   margin-top: 8px;

   color: var(--text-soft);

   font-size: 11px;
   line-height: 1.65;
  }
/* =========================================================
       7. 最新行业动态筛选区域
    ========================================================= */

  .filter-toolbar {
   margin-bottom: 30px;

   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
  }
.filter-list {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 9px;
  }
.filter-button {
   min-height: 38px;
   padding: 0 15px;

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

   color: #617087;
   background: #ffffff;

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

   transition:
           color 0.2s ease,
           border-color 0.2s ease,
           background 0.2s ease;
  }
.filter-button:hover,
  .filter-button.active {
   color: #ffffff;
   border-color: var(--primary);
   background: var(--primary);
  }
.article-count {
   color: var(--text-light);

   font-size: 12px;
  }
.news-grid {
   display: grid;
   grid-template-columns:
        repeat(3, minmax(0, 1fr));

   gap: 22px;
  }
.news-card {
   overflow: hidden;

   display: flex;
   flex-direction: column;

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

   background: #ffffff;

   box-shadow:
           0 8px 24px rgba(31, 46, 74, 0.06);

   transition:
           transform 0.3s ease,
           border-color 0.3s ease,
           box-shadow 0.3s ease;
  }
.news-card.hidden {
   display: none;
  }
.news-card:hover {
   transform: translateY(-8px);

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

   box-shadow:
           0 19px 44px rgba(31, 46, 74, 0.13);
  }
.news-card-image {
   position: relative;

   height: 210px;
   overflow: hidden;

   background: #edf2f8;
  }
.news-card-image img {
   width: 100%;
   height: 100%;

   object-fit: cover;

   transition: transform 0.5s ease;
  }
.news-card:hover .news-card-image img {
   transform: scale(1.06);
  }
.news-card-category {
   position: absolute;
   left: 15px;
   top: 15px;

   padding: 6px 10px;

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

   border-radius: 999px;

   color: #ffffff;
   background:
           rgba(22, 37, 65, 0.46);

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

   font-size: 9px;
   font-weight: 800;
  }
.news-card-content {
   padding: 22px;

   display: flex;
   flex: 1;
   flex-direction: column;
  }
.news-card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;

   color: var(--text-light);

   font-size: 9px;
  }
.news-card h3 {
   margin-top: 12px;

   color: var(--navy);

   font-size: 18px;
   font-weight: 900;
   line-height: 1.55;
  }
.news-card p {
   margin-top: 10px;

   color: var(--text-soft);

   font-size: 12px;
   line-height: 1.75;
  }
.news-card-bottom {
   margin-top: auto;
   padding-top: 20px;

   display: flex;
   align-items: center;
   justify-content: space-between;
  }
.news-card-author {
   display: flex;
   align-items: center;
   gap: 9px;
  }
.author-avatar {
   width: 29px;
   height: 29px;

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

   border-radius: 50%;

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

   font-size: 11px;
   font-weight: 900;
  }
.news-card-author span {
   color: #6e7a90;

   font-size: 10px;
  }
.read-more {
   color: var(--primary);

   font-size: 11px;
   font-weight: 800;
  }
.load-more-wrap {
   margin-top: 38px;

   display: flex;
   justify-content: center;
  }
/* =========================================================
       8. 深度洞察
    ========================================================= */

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

   color: #ffffff;

   background:
           linear-gradient(
                   135deg,
                   #182b4e,
                   #2d4573 56%,
                   #263c66
           );
  }
.insight-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%
           );
  }
.insight-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%
           );
  }
.insight-inner {
   position: relative;
   z-index: 2;
  }
.insight-section .section-label {
   color: #ffd4c7;
   background: rgba(255, 255, 255, 0.11);
  }
.insight-section .section-title {
   color: #ffffff;
  }
.insight-section .section-description {
   color: rgba(255, 255, 255, 0.68);
  }
.insight-layout {
   display: grid;
   grid-template-columns:
        minmax(0, 1.14fr)
        minmax(360px, 0.86fr);

   gap: 24px;
  }
.insight-feature {
   min-height: 430px;
   padding: 34px;

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

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

   border-radius: 24px;

   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);

   transition:
           transform 0.3s ease,
           background 0.3s ease;
  }
.insight-feature:hover {
   transform: translateY(-6px);

   background:
           rgba(255, 255, 255, 0.12);
  }
.insight-number {
   color:
           rgba(255, 255, 255, 0.17);

   font-family: Arial, sans-serif;
   font-size: 78px;
   font-weight: 900;
   line-height: 1;
  }
.insight-feature h3 {
   max-width: 720px;
   margin-top: 12px;

   color: #ffffff;

   font-size: clamp(27px, 3vw, 39px);
   font-weight: 900;
   line-height: 1.38;
  }
.insight-feature p {
   max-width: 700px;
   margin-top: 14px;

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

   font-size: 13px;
   line-height: 1.8;
  }
.insight-feature-link {
   margin-top: 22px;

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

   color: #ffd1c5;

   font-size: 12px;
   font-weight: 800;
  }
.insight-list {
   display: flex;
   flex-direction: column;
   gap: 15px;
  }
.insight-item {
   min-height: 128px;
   padding: 22px;

   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;
  }
.insight-item:hover {
   transform: translateX(6px);

   background:
           rgba(255, 255, 255, 0.11);
  }
.insight-item-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
  }
.insight-item-tag {
   padding: 5px 8px;

   border-radius: 999px;

   color: #ffd3c7;
   background:
           rgba(255, 255, 255, 0.09);

   font-size: 8px;
   font-weight: 800;
  }
.insight-item time {
   color:
           rgba(255, 255, 255, 0.42);

   font-size: 8px;
  }
.insight-item h3 {
   margin-top: 12px;

   color: #ffffff;

   font-size: 15px;
   font-weight: 900;
   line-height: 1.55;
  }
.insight-item p {
   margin-top: 7px;

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

   font-size: 10px;
   line-height: 1.65;
  }
/* =========================================================
       9. 活动动态
    ========================================================= */

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

   gap: 20px;
  }
.event-card {
   overflow: hidden;

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

   background: #ffffff;

   box-shadow:
           0 8px 24px rgba(31, 46, 74, 0.06);

   transition:
           transform 0.3s ease,
           border-color 0.3s ease,
           box-shadow 0.3s ease;
  }
.event-card:hover {
   transform: translateY(-8px);

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

   box-shadow:
           0 19px 44px rgba(31, 46, 74, 0.13);
  }
.event-image {
   position: relative;

   height: 195px;
   overflow: hidden;

   background: #edf2f8;
  }
.event-image img {
   width: 100%;
   height: 100%;

   object-fit: cover;

   transition: transform 0.5s ease;
  }
.event-card:hover .event-image img {
   transform: scale(1.06);
  }
.event-date {
   position: absolute;
   left: 15px;
   top: 15px;

   width: 50px;
   min-height: 54px;

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

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

   border-radius: 13px;

   color: #ffffff;
   background:
           rgba(26, 42, 72, 0.53);

   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
  }
.event-date strong {
   font-size: 17px;
   font-weight: 900;
   line-height: 1;
  }
.event-date span {
   margin-top: 4px;

   font-size: 8px;
  }
.event-content {
   padding: 21px;
  }
.event-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;

   color: var(--text-light);

   font-size: 9px;
  }
.event-content h3 {
   margin-top: 11px;

   color: var(--navy);

   font-size: 17px;
   font-weight: 900;
   line-height: 1.52;
  }
.event-content p {
   margin-top: 9px;

   color: var(--text-soft);

   font-size: 11px;
   line-height: 1.7;
  }
.event-link {
   margin-top: 16px;

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

   color: var(--primary);

   font-size: 11px;
   font-weight: 800;
  }
/* =========================================================
       10. 政策和行业观察
    ========================================================= */

  .policy-layout {
   display: grid;
   grid-template-columns:
        minmax(310px, 0.72fr)
        minmax(0, 1.28fr);

   gap: 38px;
   align-items: start;
  }
.policy-summary {
   position: sticky;
   top: calc(var(--header-height) + 100px);

   padding: 30px;

   border-radius: 24px;

   color: #ffffff;

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

   box-shadow:
           0 17px 43px rgba(24, 40, 70, 0.18);
  }
.policy-summary-icon {
   width: 55px;
   height: 55px;

   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: 25px;
  }
.policy-summary h3 {
   margin-top: 21px;

   font-size: 25px;
   font-weight: 900;
   line-height: 1.4;
  }
.policy-summary p {
   margin-top: 15px;

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

   font-size: 13px;
   line-height: 1.8;
  }
.policy-summary strong {
   display: block;
   margin-top: 27px;

   color: #ffca70;

   font-size: 35px;
   font-weight: 900;
  }
.policy-list {
   display: flex;
   flex-direction: column;
   gap: 15px;
  }
.policy-item {
   padding: 23px;

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

   background: #ffffff;

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

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

   box-shadow:
           0 13px 30px rgba(31, 46, 74, 0.09);
  }
.policy-item-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
  }
.policy-type {
   width: max-content;
   padding: 5px 8px;

   border-radius: 999px;

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

   font-size: 8px;
   font-weight: 800;
  }
.policy-date {
   flex: 0 0 auto;

   color: var(--text-light);

   font-size: 9px;
  }
.policy-item h3 {
   margin-top: 11px;

   color: var(--navy);

   font-size: 17px;
   font-weight: 900;
   line-height: 1.5;
  }
.policy-item p {
   margin-top: 9px;

   color: var(--text-soft);

   font-size: 12px;
   line-height: 1.75;
  }
.policy-bottom {
   margin-top: 15px;

   display: flex;
   align-items: center;
   justify-content: space-between;
  }
.policy-source {
   color: var(--text-light);

   font-size: 9px;
  }
.policy-link {
   color: var(--primary);

   font-size: 10px;
   font-weight: 800;
  }
/* =========================================================
       11. 订阅行业动态
    ========================================================= */

  .subscribe-section {
   padding: 90px 0;

   background:
           radial-gradient(
                   circle at 10% 10%,
                   rgba(255, 215, 159, 0.34),
                   transparent 34%
           ),
           radial-gradient(
                   circle at 90% 82%,
                   rgba(193, 217, 255, 0.35),
                   transparent 36%
           ),
           #fbfcff;
  }
.subscribe-card {
   position: relative;

   padding: 61px 55px;

   overflow: hidden;

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

   align-items: center;
   gap: 48px;

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

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

   box-shadow:
           0 24px 58px rgba(31, 46, 74, 0.1);

   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
  }
.subscribe-card::before {
   content: "";

   position: absolute;
   right: -120px;
   top: -150px;

   width: 350px;
   height: 350px;

   border-radius: 50%;

   background:
           radial-gradient(
                   circle,
                   rgba(235, 106, 67, 0.12),
                   transparent 68%
           );
  }
.subscribe-content,
  .subscribe-form {
   position: relative;
   z-index: 2;
  }
.subscribe-content h2 {
   color: var(--navy);

   font-size: clamp(30px, 3.5vw, 44px);
   font-weight: 900;
   line-height: 1.3;
   letter-spacing: -0.04em;
  }
.subscribe-content p {
   max-width: 680px;
   margin-top: 13px;

   color: var(--text-soft);

   font-size: 14px;
   line-height: 1.85;
  }
.subscribe-points {
   margin-top: 18px;

   display: flex;
   flex-wrap: wrap;
   gap: 9px;
  }
.subscribe-points span {
   padding: 6px 10px;

   border-radius: 999px;

   color: #657189;
   background: #eef3f9;

   font-size: 9px;
   font-weight: 700;
  }
.subscribe-form {
   padding: 22px;

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

   background: #ffffff;

   box-shadow:
           0 12px 30px rgba(31, 46, 74, 0.07);
  }
.subscribe-form h3 {
   color: var(--navy);

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

   color: var(--text-light);

   font-size: 10px;
   line-height: 1.6;
  }
.email-field {
   margin-top: 17px;

   display: flex;
   gap: 9px;
  }
.email-field input {
   min-width: 0;
   height: 46px;
   flex: 1;
   padding: 0 15px;

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

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

   font: inherit;
   font-size: 12px;

   transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease;
  }
.email-field input:focus {
   border-color:
           rgba(216, 74, 47, 0.45);

   box-shadow:
           0 0 0 4px rgba(216, 74, 47, 0.08);
  }
.email-field button {
   height: 46px;
   padding: 0 18px;

   border-radius: 12px;

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

   font-size: 12px;
   font-weight: 800;
  }
.subscribe-message {
   min-height: 18px;
   margin-top: 10px;

   color: var(--green);

   font-size: 10px;
  }
/* =========================================================
       13. 响应式
    ========================================================= */

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

    gap: 38px;
   }

   .news-stream {
    transform: scale(0.93);
   }

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

   .event-grid {
    grid-template-columns:
          repeat(2, minmax(0, 1fr));
   }
  }
@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;
   }

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

   .hero-inner {
    min-height: auto;
    padding: 36px 0 40px;

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

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

    text-align: center;
   }

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

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

   .news-stream {
    width: min(680px, 100%);
    margin: 0 auto;

    justify-self: center;
    transform: none;
   }

   .featured-layout,
   .insight-layout,
   .policy-layout,
   .subscribe-card {
    grid-template-columns: 1fr;
   }

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

   .policy-summary {
    position: static;
   }

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


   .filter-toolbar {
    align-items: flex-start;
    flex-direction: column;
   }

   .news-grid,
   .event-grid {
    grid-template-columns: 1fr;
   }

   .featured-side {
    grid-template-columns: 1fr;
   }

   .featured-main {
    min-height: 430px;
   }

   .subscribe-card {
    padding: 43px 28px;
   }
  }
@media (max-width: 680px) {
   .header-join {
    display: none;
   }

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

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

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

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

   .news-stream {
    min-height: 570px;
   }

   .stream-main {
    width: calc(100% - 50px);
    min-height: 300px;
   }

   .floating-news {
    width: 155px;
    min-height: 108px;
    padding: 13px;
   }

   .floating-news.cloud {
    right: 0;
    top: 2%;
   }

   .floating-news.security {
    left: 0;
    bottom: 5%;
   }

   .stream-stat {
    width: 280px;
   }

   .featured-main-content {
    left: 24px;
    right: 24px;
    bottom: 25px;
   }

   .featured-main h2 {
    font-size: 27px;
   }

   .email-field {
    flex-direction: column;
   }

   .email-field button {
    width: 100%;
   }

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

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

   .news-stream {
    min-height: 530px;
   }

   .stream-main {
    width: calc(100% - 24px);
    min-height: 280px;
   }

   .stream-main h3 {
    font-size: 19px;
   }

   .floating-news {
    width: 132px;
    min-height: 102px;
    padding: 11px;
   }

   .floating-news h3 {
    font-size: 10px;
   }

   .floating-news p {
    display: none;
   }

   .stream-stat {
    width: 250px;
   }

   .featured-main {
    min-height: 410px;
   }

   .featured-main p {
    display: none;
   }

   .policy-item-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
   }
  }
.hero-title,
  .section-title,
  .featured-main h2,
  .side-article h3,
  .news-card h3,
  .insight-feature h3,
  .insight-item h3,
  .event-content h3,
  .policy-summary h3,
  .policy-item h3,
  .subscribe-content h2,
  .footer-slogan {
   font-family:
           "HarmonyOS Sans SC",
           "MiSans",
           "PingFang SC",
           "Microsoft YaHei",
           sans-serif;
  }
.section-title {
   color: #172849;
   letter-spacing: -0.035em;
  }
.section-description {
   color: #66748f;
  }
/* 行业动态页首屏：深空星空背景 */

  .news-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%);
  }
.news-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%;
  }
.news-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-keywords strong {
   color: #dce5f7;
  }
.hero-keywords span {
   color: #b9c5da;
   border-color: rgba(142, 162, 216, 0.2);
   background: rgba(15, 31, 61, 0.58);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
/* 首屏行业动态流 */

  .stream-glow {
   background:
           radial-gradient(ellipse, rgba(90, 110, 214, 0.25), rgba(70, 90, 175, 0.08) 42%, transparent 72%);
  }
.stream-main {
   border-color: rgba(155, 175, 235, 0.25);
   background:
           linear-gradient(145deg, rgba(17, 31, 64, 0.76), rgba(43, 55, 102, 0.68)),
           url("../images/blog/blog_ai_one_person_img_1775068078843.png") center / cover;
   box-shadow:
           0 28px 64px rgba(0, 0, 0, 0.34),
           0 0 0 1px rgba(126, 148, 220, 0.08),
           0 0 70px rgba(79, 98, 190, 0.12);
  }
.stream-main::before {
   background: linear-gradient(180deg, rgba(8, 15, 32, 0.12), rgba(7, 14, 31, 0.92));
  }
.stream-tag,
  .article-category {
   color: #eef3ff;
   border-color: rgba(184, 199, 241, 0.28);
   background: rgba(55, 72, 133, 0.42);
  }
.floating-news {
   border-color: rgba(190, 204, 235, 0.72);
   background: rgba(247, 250, 255, 0.91);
   box-shadow:
           0 17px 42px rgba(7, 20, 50, 0.23),
           inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }
.floating-news.cloud .floating-news-tag,
  .side-category.cloud {
   color: #267f6b;
   background: #e5f5f0;
  }
.floating-news.security .floating-news-tag,
  .side-category.security {
   color: #6556c1;
   background: #ece9fb;
  }
.side-category.data {
   color: #3d68bd;
   background: #e8effc;
  }
.stream-stat {
   border-color: rgba(189, 203, 233, 0.8);
   background: rgba(247, 250, 255, 0.91);
   box-shadow: 0 15px 36px rgba(7, 20, 50, 0.2);
  }
.stream-stat div:not(:last-child) {
   border-right-color: #dce4ef;
  }
/* 二级导航 */




  /* 精选与行业动态卡片 */

  .featured-main {
   background: #16284b;
   box-shadow: 0 20px 50px rgba(20, 37, 72, 0.2);
  }
.featured-main::after {
   background: linear-gradient(180deg, rgba(11, 22, 46, 0.02) 16%, rgba(10, 21, 45, 0.94) 100%);
  }
.side-article,
  .news-card,
  .event-card,
  .policy-item,
  .subscribe-form {
   border-color: #dfe6f1;
   background: linear-gradient(180deg, #ffffff, #f9fbff);
   box-shadow: 0 9px 27px rgba(25, 46, 83, 0.065);
  }
.side-article:hover,
  .news-card:hover,
  .event-card:hover,
  .policy-item:hover {
   border-color: rgba(93, 113, 210, 0.32);
   box-shadow: 0 20px 46px rgba(28, 47, 91, 0.14);
  }
.side-article h3,
  .news-card h3,
  .event-content h3,
  .policy-item h3,
  .subscribe-form h3 {
   color: #172849;
  }
.side-article p,
  .news-card p,
  .event-content p,
  .policy-item p {
   color: #66748f;
  }
.news-card-category {
   color: #f3f6ff;
   border-color: rgba(195, 207, 241, 0.36);
   background: rgba(23, 40, 76, 0.62);
  }
.author-avatar {
   color: #465cc1;
   background: #e9edff;
  }
.read-more,
  .event-link,
  .policy-link {
   color: #4b61c4;
  }
.filter-button {
   color: #5f6d86;
   border-color: #dbe4f0;
   background: #fbfcff;
  }
.filter-button:hover,
  .filter-button.active {
   color: #ffffff;
   border-color: #5368d8;
   background: linear-gradient(135deg, #415ec9, #6d63d5);
   box-shadow: 0 8px 20px rgba(71, 91, 192, 0.2);
  }
/* 深度洞察区 */

  .insight-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);
  }
.insight-section::before {
   background: radial-gradient(circle, rgba(87, 118, 216, 0.25), transparent 68%);
  }
.insight-section::after {
   background: radial-gradient(circle, rgba(117, 95, 205, 0.2), transparent 68%);
  }
.insight-section .section-label {
   color: #dce6ff;
   background: rgba(112, 130, 212, 0.18);
   border: 1px solid rgba(165, 180, 235, 0.16);
  }
.insight-feature,
  .insight-item {
   border-color: rgba(169, 186, 231, 0.15);
   background: rgba(255, 255, 255, 0.065);
  }
.insight-feature:hover,
  .insight-item:hover {
   background: rgba(255, 255, 255, 0.105);
  }
.insight-feature-link,
  .insight-item-tag {
   color: #c8d4ff;
  }
.insight-item-tag {
   background: rgba(117, 129, 201, 0.17);
  }
/* 活动与政策 */

  .event-date {
   border-color: rgba(205, 216, 244, 0.45);
   background: rgba(17, 34, 68, 0.67);
  }
.policy-summary {
   background:
           radial-gradient(circle at 82% 10%, rgba(113, 136, 225, 0.2), transparent 33%),
           linear-gradient(145deg, #101f3d, #263f75);
   box-shadow: 0 19px 48px rgba(13, 29, 59, 0.22);
  }
.policy-summary-icon {
   border-color: rgba(188, 202, 239, 0.17);
   background: rgba(109, 130, 213, 0.13);
  }
.policy-summary strong {
   color: #e4bb68;
  }
.policy-type {
   color: #435bc0;
   background: #e9edff;
  }
/* 订阅区域 */

  .subscribe-section {
   background:
           radial-gradient(circle at 10% 10%, rgba(92, 115, 208, 0.1), transparent 34%),
           radial-gradient(circle at 90% 82%, rgba(112, 183, 228, 0.11), transparent 36%),
           #f3f6fb;
  }
.subscribe-card {
   border-color: #dce4f0;
   background: rgba(250, 252, 255, 0.92);
   box-shadow: 0 25px 60px rgba(26, 45, 82, 0.11);
  }
.subscribe-card::before {
   background: radial-gradient(circle, rgba(92, 111, 207, 0.13), transparent 68%);
  }
.subscribe-content h2 {
   color: #172849;
  }
.subscribe-points span {
   color: #586781;
   background: #e9eef7;
  }
.email-field input {
   color: #2d3d5b;
   border-color: #dbe3ef;
   background: #f8faff;
  }
.email-field input:focus {
   border-color: rgba(83, 104, 216, 0.52);
   box-shadow: 0 0 0 4px rgba(83, 104, 216, 0.09);
  }
.email-field button {
   color: #ffffff;
   background: linear-gradient(135deg, #3b5fc9, #6b63d4);
   box-shadow: 0 9px 20px rgba(65, 85, 187, 0.2);
  }
/* 页脚 */

  .site-footer {
   border-top-color: #dce5f1;
   background:
           radial-gradient(circle at 10% 0%, rgba(84, 105, 202, 0.055), transparent 26%),
           #eef3f9;
  }
.footer-slogan,
  .footer-column h3 {
   color: #172849;
  }
.footer-qr img {
   border-color: #d6e0ed;
   box-shadow: 0 9px 24px rgba(21, 41, 76, 0.09);
  }
.footer-bottom {
   border-top-color: #dce5f1;
   color: #8794a9;
  }