diff --git a/public/frontend/assets/competition-hero-mark.png b/public/frontend/assets/competition-hero-mark.png
new file mode 100644
index 0000000..c835353
Binary files /dev/null and b/public/frontend/assets/competition-hero-mark.png differ
diff --git a/public/frontend/assets/generated/hero-reference-beams-v1.png b/public/frontend/assets/generated/hero-reference-beams-v1.png
new file mode 100644
index 0000000..cecd520
Binary files /dev/null and b/public/frontend/assets/generated/hero-reference-beams-v1.png differ
diff --git a/public/frontend/assets/generated/hero-three-landmarks-clean-field-v16.png b/public/frontend/assets/generated/hero-three-landmarks-clean-field-v16.png
new file mode 100644
index 0000000..44a90db
Binary files /dev/null and b/public/frontend/assets/generated/hero-three-landmarks-clean-field-v16.png differ
diff --git a/public/frontend/event-site-en.html b/public/frontend/event-site-en.html
index 7606b0c..0b4eb67 100644
--- a/public/frontend/event-site-en.html
+++ b/public/frontend/event-site-en.html
@@ -92,7 +92,7 @@
       pointer-events: none;
     }
     .hero-banner--landmarks {
-      background-image: url("assets/generated/hero-three-landmarks-compact-v14-4k.jpg?v=20260826");
+      background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826");
     }
     .hero-banner--photonic {
       background-image: url("assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.jpg?v=20260826");
@@ -542,8 +542,8 @@
       .site-header .wrap, .hero .wrap { width: min(760px, calc(100% - 40px)); }
       .brand { width: min(16.8vw, 152px); }
       .hero { background-position: 55% center; }
-      .hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: right center; }
-      .hero-banner--landmarks img { object-position: right center; }
+      .hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826"); background-size: cover; background-position: 10% center; }
+      .hero-banner--landmarks img { object-position: 10% center; }
       .hero-banner--photonic { background-size: cover; background-position: right center; }
       .hero-banner--photonic img { object-position: right center; }
       .hero-grid { padding-top: 166px; }
@@ -585,8 +585,8 @@
       .header-inner { min-height: 62px; }
       .brand { width: min(34.4%, 124px); }
       .nav { display: none; }
-      .hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: right center; }
-      .hero-banner--landmarks img { object-position: right center; }
+      .hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826"); background-size: cover; background-position: 10% center; }
+      .hero-banner--landmarks img { object-position: 10% center; }
       .hero-banner--photonic { background-size: cover; background-position: right center; }
       .hero-banner--photonic img { object-position: right center; }
       .hero { height: 60dvh; min-height: 60dvh; max-height: 60dvh; overflow: hidden; }
@@ -5406,8 +5406,16 @@
         object-fit: cover !important;
         background-size: cover !important;
       }
+      .hero-orbit-beams,
+      .hero-orbit-mark img {
+        object-fit: contain !important;
+        object-position: center !important;
+      }
       .hero-banner--landmarks,
-      .hero-banner--landmarks img,
+      .hero-banner--landmarks img {
+        background-position: 10% center !important;
+        object-position: 10% center !important;
+      }
       .hero-banner--photonic,
       .hero-banner--photonic img {
         background-position: right center !important;
@@ -5673,6 +5681,75 @@
       .hero-slogan .hero-brand-mark { width: 88px; min-width: 88px; }
       .hero-slogan .slogan-first { width: min(calc(100% - 100px), 340px) !important; }
     }
+
+    /* First banner: full photo + light beams + tilted logo lockup. */
+    .hero {
+      --hero-orbit-size: clamp(220px,23.5vw,340px);
+      --hero-orbit-top: 72%;
+      --hero-orbit-right: 5vw;
+      --hero-orbit-shift-x: 32px;
+    }
+    .hero-orbit-composition,
+    .hero-orbit-beams {
+      opacity: 0;
+      transition: opacity 1.2s ease;
+      pointer-events: none;
+    }
+    .hero.is-orbit-visible .hero-orbit-composition { opacity: 1; }
+    .hero.is-orbit-visible .hero-orbit-beams { opacity: .9; }
+    .hero-orbit-composition {
+      position: absolute;
+      z-index: 5;
+      top: var(--hero-orbit-top);
+      right: calc(var(--hero-orbit-right) - var(--hero-orbit-shift-x));
+      width: var(--hero-orbit-size);
+      aspect-ratio: 1339 / 1251;
+      isolation: isolate;
+      transform: translateY(-50%) perspective(1100px) rotateZ(-18deg) rotateX(54deg);
+      transform-origin: 50% 56%;
+    }
+    .hero-orbit-mark {
+      position: absolute;
+      z-index: 3;
+      inset: 0;
+      display: block;
+    }
+    .hero-orbit-mark > img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .hero-orbit-beams {
+      position: absolute;
+      z-index: 8;
+      top: calc(var(--hero-orbit-top) + 12px);
+      right: calc(var(--hero-orbit-right) + var(--hero-orbit-size)/2 - var(--hero-orbit-shift-x));
+      display: block;
+      width: min(32vw,416px);
+      height: min(21.3vw,278px);
+      object-fit: contain;
+      filter: brightness(1.08) saturate(1.02) drop-shadow(0 0 12px rgba(74,207,255,.32));
+      mix-blend-mode: screen;
+      -webkit-mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 8%,#000 24%,#000 100%);
+      mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 8%,#000 24%,#000 100%);
+      transform: translate(15.4%,-82%);
+      transform-origin: 84.6% 82%;
+    }
+    @media (max-width: 980px) {
+      .hero { --hero-orbit-size: clamp(160px,26vw,220px); --hero-orbit-top: 74%; --hero-orbit-right: 2vw; }
+    }
+    @media (max-width: 680px) {
+      .hero {
+        --hero-orbit-size: min(46vw,188px);
+        --hero-orbit-top: 86%;
+        --hero-orbit-right: -12vw;
+        --hero-orbit-shift-x: 16px;
+      }
+      .hero.is-orbit-visible .hero-orbit-composition { opacity: .72; }
+      .hero.is-orbit-visible .hero-orbit-beams { opacity: .5; }
+      .hero-orbit-beams { width: 52vw; height: 35vw; }
+    }
   </style>
 </head>
 <body class="en-site">
@@ -5688,19 +5765,25 @@
     </div>
   </header>
   <main id="top">
-    <section class="hero">
+    <section class="hero is-orbit-visible">
       <div class="hero-banners" aria-hidden="true">
         <div class="hero-banner hero-banner--landmarks is-active">
-          <img src="assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1" alt="">
+          <img src="assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826" alt="">
         </div>
         <div class="hero-banner hero-banner--photonic">
           <img src="assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.jpg?v=20260826" alt="">
         </div>
       </div>
       <div class="hero-map-dots" aria-hidden="true"></div>
+      <img class="hero-orbit-beams" src="assets/generated/hero-reference-beams-v1.png?v=20260826" alt="" aria-hidden="true">
+      <div class="hero-orbit-composition" aria-hidden="true">
+        <div class="hero-orbit-mark">
+          <img src="assets/competition-radial-mark.png?v=20260826" alt="">
+        </div>
+      </div>
       <div class="wrap hero-grid">
         <div class="hero-content">
-          <h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业青年科创大赛"><span class="slogan-lockup"><span class="hero-brand-mark" aria-hidden="true"><img src="assets/competition-radial-mark.png?v=20260826" alt=""></span><span class="slogan-first" aria-hidden="true"><img class="slogan-banner" src="assets/slogan-2026-blue-violet-reference.png?v=20260824-reference-pastel-tone" alt=""></span></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业青年科创大赛</span></h1>
+          <h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业青年科创大赛"><span class="slogan-lockup"><span class="hero-brand-mark" aria-hidden="true"><img src="assets/competition-hero-mark.png?v=20260827" alt=""></span><span class="slogan-first" aria-hidden="true"><img class="slogan-banner" src="assets/slogan-2026-blue-violet-reference.png?v=20260824-reference-pastel-tone" alt=""></span></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业青年科创大赛</span></h1>
           <dl class="hero-organizers" aria-label="赛事组织单位">
             <div class="hero-org-row"><dt>指导单位：</dt><dd>江苏省人民政府驻上海办事处、苏州工业园区管理委员会</dd></div>
             <div class="hero-org-row"><dt>主办单位：</dt><dd>苏州市人民政府驻上海联络处、苏州恒泰控股集团有限公司</dd></div>
@@ -5875,6 +5958,7 @@
 
 
     (function () {
+      var hero = document.querySelector(".hero");
       var banners = Array.prototype.slice.call(document.querySelectorAll(".hero-banner"));
       if (banners.length < 2) return;
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
@@ -5885,17 +5969,26 @@
         banners[0].classList.add("is-active");
       }
       banners[index].style.zIndex = "1";
+      if (hero && banners[index].classList.contains("hero-banner--landmarks")) {
+        hero.classList.add("is-orbit-visible");
+      }
 
       var fading = false;
       var fadeMs = 1200;
       var intervalMs = 7000;
 
+      function setOrbitVisible(visible) {
+        if (!hero) return;
+        hero.classList.toggle("is-orbit-visible", visible);
+      }
+
       window.setInterval(function () {
         if (fading) return;
         fading = true;
         var next = (index + 1) % banners.length;
         banners[next].style.zIndex = "2";
         banners[next].classList.add("is-active");
+        setOrbitVisible(banners[next].classList.contains("hero-banner--landmarks"));
         window.setTimeout(function () {
           banners[index].classList.remove("is-active");
           banners[index].style.zIndex = "0";
diff --git a/public/frontend/event-site.html b/public/frontend/event-site.html
index f8b3b96..b205092 100644
--- a/public/frontend/event-site.html
+++ b/public/frontend/event-site.html
@@ -92,7 +92,7 @@
       pointer-events: none;
     }
     .hero-banner--landmarks {
-      background-image: url("assets/generated/hero-three-landmarks-compact-v14-4k.jpg?v=20260826");
+      background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826");
     }
     .hero-banner--photonic {
       background-image: url("assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.jpg?v=20260826");
@@ -541,8 +541,8 @@
       .site-header .wrap, .hero .wrap { width: min(760px, calc(100% - 40px)); }
       .brand { width: min(16.8vw, 152px); }
       .hero { background-position: 55% center; }
-      .hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: right center; }
-      .hero-banner--landmarks img { object-position: right center; }
+      .hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826"); background-size: cover; background-position: 10% center; }
+      .hero-banner--landmarks img { object-position: 10% center; }
       .hero-banner--photonic { background-size: cover; background-position: right center; }
       .hero-banner--photonic img { object-position: right center; }
       .hero-grid { padding-top: 166px; }
@@ -584,8 +584,8 @@
       .header-inner { min-height: 62px; }
       .brand { width: min(34.4%, 124px); }
       .nav { display: none; }
-      .hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1"); background-size: cover; background-position: right center; }
-      .hero-banner--landmarks img { object-position: right center; }
+      .hero-banner--landmarks { background-image: url("assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826"); background-size: cover; background-position: 10% center; }
+      .hero-banner--landmarks img { object-position: 10% center; }
       .hero-banner--photonic { background-size: cover; background-position: right center; }
       .hero-banner--photonic img { object-position: right center; }
       .hero { height: 60dvh; min-height: 60dvh; max-height: 60dvh; overflow: hidden; }
@@ -5232,8 +5232,16 @@
         object-fit: cover !important;
         background-size: cover !important;
       }
+      .hero-orbit-beams,
+      .hero-orbit-mark img {
+        object-fit: contain !important;
+        object-position: center !important;
+      }
       .hero-banner--landmarks,
-      .hero-banner--landmarks img,
+      .hero-banner--landmarks img {
+        background-position: 10% center !important;
+        object-position: 10% center !important;
+      }
       .hero-banner--photonic,
       .hero-banner--photonic img {
         background-position: right center !important;
@@ -5437,6 +5445,75 @@
       .hero-slogan .hero-brand-mark { width: 88px; min-width: 88px; }
       .hero-slogan .slogan-first { width: min(calc(100% - 100px), 340px) !important; }
     }
+
+    /* First banner: full photo + light beams + tilted logo lockup. */
+    .hero {
+      --hero-orbit-size: clamp(220px,23.5vw,340px);
+      --hero-orbit-top: 72%;
+      --hero-orbit-right: 5vw;
+      --hero-orbit-shift-x: 32px;
+    }
+    .hero-orbit-composition,
+    .hero-orbit-beams {
+      opacity: 0;
+      transition: opacity 1.2s ease;
+      pointer-events: none;
+    }
+    .hero.is-orbit-visible .hero-orbit-composition { opacity: 1; }
+    .hero.is-orbit-visible .hero-orbit-beams { opacity: .9; }
+    .hero-orbit-composition {
+      position: absolute;
+      z-index: 5;
+      top: var(--hero-orbit-top);
+      right: calc(var(--hero-orbit-right) - var(--hero-orbit-shift-x));
+      width: var(--hero-orbit-size);
+      aspect-ratio: 1339 / 1251;
+      isolation: isolate;
+      transform: translateY(-50%) perspective(1100px) rotateZ(-18deg) rotateX(54deg);
+      transform-origin: 50% 56%;
+    }
+    .hero-orbit-mark {
+      position: absolute;
+      z-index: 3;
+      inset: 0;
+      display: block;
+    }
+    .hero-orbit-mark > img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    .hero-orbit-beams {
+      position: absolute;
+      z-index: 8;
+      top: calc(var(--hero-orbit-top) + 12px);
+      right: calc(var(--hero-orbit-right) + var(--hero-orbit-size)/2 - var(--hero-orbit-shift-x));
+      display: block;
+      width: min(32vw,416px);
+      height: min(21.3vw,278px);
+      object-fit: contain;
+      filter: brightness(1.08) saturate(1.02) drop-shadow(0 0 12px rgba(74,207,255,.32));
+      mix-blend-mode: screen;
+      -webkit-mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 8%,#000 24%,#000 100%);
+      mask-image: linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 8%,#000 24%,#000 100%);
+      transform: translate(15.4%,-82%);
+      transform-origin: 84.6% 82%;
+    }
+    @media (max-width: 980px) {
+      .hero { --hero-orbit-size: clamp(160px,26vw,220px); --hero-orbit-top: 74%; --hero-orbit-right: 2vw; }
+    }
+    @media (max-width: 680px) {
+      .hero {
+        --hero-orbit-size: min(46vw,188px);
+        --hero-orbit-top: 86%;
+        --hero-orbit-right: -12vw;
+        --hero-orbit-shift-x: 16px;
+      }
+      .hero.is-orbit-visible .hero-orbit-composition { opacity: .72; }
+      .hero.is-orbit-visible .hero-orbit-beams { opacity: .5; }
+      .hero-orbit-beams { width: 52vw; height: 35vw; }
+    }
   </style>
 </head>
 <body>
@@ -5452,19 +5529,25 @@
     </div>
   </header>
   <main id="top">
-    <section class="hero">
+    <section class="hero is-orbit-visible">
       <div class="hero-banners" aria-hidden="true">
         <div class="hero-banner hero-banner--landmarks is-active">
-          <img src="assets/generated/hero-three-landmarks-compact-v14-hd.png?v=1" alt="">
+          <img src="assets/generated/hero-three-landmarks-clean-field-v16.png?v=20260826" alt="">
         </div>
         <div class="hero-banner hero-banner--photonic">
           <img src="assets/generated/hero-photonic-youth-blue-purple-balanced-v7-sharp-trails-4k.jpg?v=20260826" alt="">
         </div>
       </div>
       <div class="hero-map-dots" aria-hidden="true"></div>
+      <img class="hero-orbit-beams" src="assets/generated/hero-reference-beams-v1.png?v=20260826" alt="" aria-hidden="true">
+      <div class="hero-orbit-composition" aria-hidden="true">
+        <div class="hero-orbit-mark">
+          <img src="assets/competition-radial-mark.png?v=20260826" alt="">
+        </div>
+      </div>
       <div class="wrap hero-grid">
         <div class="hero-content">
-          <h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业青年科创大赛"><span class="slogan-lockup"><span class="hero-brand-mark" aria-hidden="true"><img src="assets/competition-radial-mark.png?v=20260826" alt=""></span><span class="slogan-first" aria-hidden="true"><img class="slogan-banner" src="assets/slogan-2026-blue-violet-reference.png?v=20260824-reference-pastel-tone" alt=""></span></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业青年科创大赛</span></h1>
+          <h1 class="hero-slogan" aria-label="2026 光联万物，创芯未来；首届沪苏协同新兴产业青年科创大赛"><span class="slogan-lockup"><span class="hero-brand-mark" aria-hidden="true"><img src="assets/competition-hero-mark.png?v=20260827" alt=""></span><span class="slogan-first" aria-hidden="true"><img class="slogan-banner" src="assets/slogan-2026-blue-violet-reference.png?v=20260824-reference-pastel-tone" alt=""></span></span><span class="slogan-second" aria-hidden="true">首届沪苏协同新兴产业青年科创大赛</span></h1>
           <dl class="hero-organizers" aria-label="赛事组织单位">
             <div class="hero-org-row"><dt>指导单位：</dt><dd>江苏省人民政府驻上海办事处、苏州工业园区管理委员会</dd></div>
             <div class="hero-org-row"><dt>主办单位：</dt><dd>苏州市人民政府驻上海联络处、苏州恒泰控股集团有限公司</dd></div>
@@ -5639,6 +5722,7 @@
 
 
     (function () {
+      var hero = document.querySelector(".hero");
       var banners = Array.prototype.slice.call(document.querySelectorAll(".hero-banner"));
       if (banners.length < 2) return;
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
@@ -5649,17 +5733,26 @@
         banners[0].classList.add("is-active");
       }
       banners[index].style.zIndex = "1";
+      if (hero && banners[index].classList.contains("hero-banner--landmarks")) {
+        hero.classList.add("is-orbit-visible");
+      }
 
       var fading = false;
       var fadeMs = 1200;
       var intervalMs = 7000;
 
+      function setOrbitVisible(visible) {
+        if (!hero) return;
+        hero.classList.toggle("is-orbit-visible", visible);
+      }
+
       window.setInterval(function () {
         if (fading) return;
         fading = true;
         var next = (index + 1) % banners.length;
         banners[next].style.zIndex = "2";
         banners[next].classList.add("is-active");
+        setOrbitVisible(banners[next].classList.contains("hero-banner--landmarks"));
         window.setTimeout(function () {
           banners[index].classList.remove("is-active");
           banners[index].style.zIndex = "0";