feat: bootstrap spectra lab front-end concept

.gitignore

@@ -0,0 +1,2 @@
+spectra-lab-local.png
+.DS_Store

DESIGN.md

@@ -0,0 +1,36 @@
+# Spectra Lab 设计语言
+
+## 关键词
+- future luxe
+- spectral glow
+- glassmorphism
+- editorial typography
+- cinematic depth
+- interactive gallery
+
+## 视觉原则
+1. 黑底 + 彩色光谱高光
+2. 大标题排版要有海报感
+3. 卡片不做普通 SaaS 面板，要像展馆展签
+4. 动效要柔和、缓动、分层，不要廉价弹跳
+5. 让页面每一屏都有明确主角
+
+## 首版结构
+- 顶部导航：极简悬浮
+- Hero：巨大标题、动态背景、主 CTA、次级信息
+- Live Metrics：用设计化仪表呈现虚构实时数据
+- Scene Gallery：三到四个主场景卡片
+- Manifesto：更情绪化的品牌段落
+- Footer：简短收束
+
+## 动效策略
+- 鼠标跟随高光
+- 轻量视差
+- 背景网格缓慢漂移
+- 卡片 hover 的透视和边缘发光
+- KPI 数字缓动增长
+
+## 响应式原则
+- 桌面端强调沉浸和横向层次
+- 移动端保留光效，但结构收成单列
+- 保证标题、按钮、卡片在窄屏仍有冲击力

README.md

@@ -0,0 +1,34 @@
+# Spectra Lab
+
+一个以视觉表现力为核心的实验性 Web App。
+
+## 项目目标
+- 优先级一：前端显示效果惊艳、与众不同、有设计感
+- 优先级二：保持可交互、可演示、可继续扩展
+- 优先级三：10 小时内完成可交付版本
+
+## 当前技术策略
+- 采用原生 HTML / CSS / JavaScript
+- 不依赖重型框架，优先保证视觉落地速度与部署简单度
+- 重点投入在：动效、排版、层次、质感、氛围、交互反馈
+
+## 首版概念
+Spectra Lab：未来感数字展馆 / 灵感实验室。
+用户可以在一个沉浸式页面里浏览多个“光谱场景”：
+- Hero 主舞台
+- 动态数据仪表
+- 场景卡片矩阵
+- 时间线/展陈区
+- 可切换主题氛围
+
+## 开发规程（本轮）
+1. 先完成视觉概念统一与页面骨架
+2. 再补高价值动效与交互
+3. 然后做响应式适配
+4. 最后做可运行验证与演示收口
+
+## 当前文件
+- `index.html`：页面结构
+- `styles.css`：视觉系统与动效
+- `app.js`：交互、状态、动画驱动
+- `DESIGN.md`：设计语言与构图原则

app.js

@@ -0,0 +1,168 @@
+const pointerGlow = document.getElementById('pointerGlow');
+const themeToggle = document.getElementById('themeToggle');
+const themeLabel = document.getElementById('themeLabel');
+const sceneCards = document.querySelectorAll('.scene-card');
+const counters = document.querySelectorAll('[data-counter]');
+const sceneDetailTitle = document.getElementById('sceneDetailTitle');
+const sceneDetailCopy = document.getElementById('sceneDetailCopy');
+const particleCanvas = document.getElementById('particleCanvas');
+
+const themes = [
+  { className: '', label: 'Aurora' },
+  { className: 'theme-ember', label: 'Ember' },
+  { className: 'theme-tide', label: 'Tide' },
+];
+
+let themeIndex = 0;
+
+function setTheme(index) {
+  document.body.classList.remove('theme-ember', 'theme-tide');
+  const theme = themes[index];
+  if (theme.className) {
+    document.body.classList.add(theme.className);
+  }
+  themeLabel.textContent = theme.label;
+}
+
+function animateCounter(element) {
+  const target = Number(element.dataset.counter || 0);
+  const duration = 1400;
+  const start = performance.now();
+
+  function step(now) {
+    const progress = Math.min((now - start) / duration, 1);
+    const eased = 1 - Math.pow(1 - progress, 3);
+    element.textContent = Math.round(target * eased);
+    if (progress < 1) requestAnimationFrame(step);
+  }
+
+  requestAnimationFrame(step);
+}
+
+function mountParticleField() {
+  if (!particleCanvas) return;
+  const ctx = particleCanvas.getContext('2d');
+  if (!ctx) return;
+
+  const particles = [];
+  const particleCount = 48;
+  let width = 0;
+  let height = 0;
+
+  function resize() {
+    width = window.innerWidth;
+    height = window.innerHeight;
+    particleCanvas.width = width * window.devicePixelRatio;
+    particleCanvas.height = height * window.devicePixelRatio;
+    particleCanvas.style.width = `${width}px`;
+    particleCanvas.style.height = `${height}px`;
+    ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
+  }
+
+  function seed() {
+    particles.length = 0;
+    for (let i = 0; i < particleCount; i += 1) {
+      particles.push({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        r: Math.random() * 1.8 + 0.8,
+        vx: (Math.random() - 0.5) * 0.28,
+        vy: (Math.random() - 0.5) * 0.28,
+      });
+    }
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, width, height);
+
+    particles.forEach((particle, index) => {
+      particle.x += particle.vx;
+      particle.y += particle.vy;
+
+      if (particle.x < -20) particle.x = width + 20;
+      if (particle.x > width + 20) particle.x = -20;
+      if (particle.y < -20) particle.y = height + 20;
+      if (particle.y > height + 20) particle.y = -20;
+
+      ctx.beginPath();
+      ctx.fillStyle = 'rgba(255,255,255,0.38)';
+      ctx.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
+      ctx.fill();
+
+      for (let j = index + 1; j < particles.length; j += 1) {
+        const other = particles[j];
+        const dx = particle.x - other.x;
+        const dy = particle.y - other.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < 130) {
+          ctx.beginPath();
+          ctx.strokeStyle = `rgba(130, 180, 255, ${0.12 * (1 - distance / 130)})`;
+          ctx.moveTo(particle.x, particle.y);
+          ctx.lineTo(other.x, other.y);
+          ctx.stroke();
+        }
+      }
+    });
+
+    requestAnimationFrame(draw);
+  }
+
+  resize();
+  seed();
+  draw();
+  window.addEventListener('resize', () => {
+    resize();
+    seed();
+  });
+}
+
+window.addEventListener('pointermove', (event) => {
+  pointerGlow.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+});
+
+sceneCards.forEach((card) => {
+  card.addEventListener('pointermove', (event) => {
+    const rect = card.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const rotateX = ((y / rect.height) - 0.5) * -8;
+    const rotateY = ((x / rect.width) - 0.5) * 10;
+
+    card.style.setProperty('--mx', `${(x / rect.width) * 100}%`);
+    card.style.setProperty('--my', `${(y / rect.height) * 100}%`);
+    card.style.transform = `translateY(-6px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+  });
+
+  card.addEventListener('pointerleave', () => {
+    card.style.transform = '';
+  });
+
+  card.addEventListener('click', () => {
+    sceneCards.forEach((item) => item.classList.remove('is-active'));
+    card.classList.add('is-active');
+    sceneDetailTitle.textContent = card.dataset.sceneTitle || '';
+    sceneDetailCopy.textContent = card.dataset.sceneCopy || '';
+  });
+});
+
+themeToggle.addEventListener('click', () => {
+  themeIndex = (themeIndex + 1) % themes.length;
+  setTheme(themeIndex);
+});
+
+const observer = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        animateCounter(entry.target);
+        observer.unobserve(entry.target);
+      }
+    });
+  },
+  { threshold: 0.4 },
+);
+
+counters.forEach((counter) => observer.observe(counter));
+sceneCards[0]?.classList.add('is-active');
+setTheme(themeIndex);
+mountParticleField();

index.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Spectra Lab</title>
+    <meta
+      name="description"
+      content="Spectra Lab — 一个以光谱、玻璃与动效为核心的沉浸式前端概念 Web App。"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <canvas class="particle-canvas" id="particleCanvas"></canvas>
+    <div class="noise"></div>
+    <div class="gradient-orb orb-a"></div>
+    <div class="gradient-orb orb-b"></div>
+    <div class="gradient-orb orb-c"></div>
+    <div class="pointer-glow" id="pointerGlow"></div>
+
+    <header class="topbar glass-panel">
+      <div class="brand">
+        <span class="brand-mark"></span>
+        <div>
+          <p class="brand-eyebrow">Spectra Lab</p>
+          <p class="brand-sub">Digital Atmosphere Prototype</p>
+        </div>
+      </div>
+      <nav class="nav-links">
+        <a href="#metrics">Metrics</a>
+        <a href="#gallery">Gallery</a>
+        <a href="#manifesto">Manifesto</a>
+      </nav>
+      <button id="themeToggle" class="ghost-button" type="button">切换光谱</button>
+    </header>
+
+    <main>
+      <section class="hero section">
+        <div class="hero-copy">
+          <p class="eyebrow">A cinematic front-end experience</p>
+          <h1>
+            不只是一个页面，<br />
+            而是一座会呼吸的<br />
+            光谱展馆。
+          </h1>
+          <p class="hero-text">
+            Spectra Lab 把动态网格、玻璃拟态、彩色流体光效与编辑感排版叠在一起，做成一个可以真实浏览、真实交互、真实惊艳的 Web App 原型。
+          </p>
+          <div class="hero-actions">
+            <a class="primary-button" href="#gallery">进入展馆</a>
+            <a class="secondary-button" href="#manifesto">查看设计宣言</a>
+          </div>
+        </div>
+
+        <div class="hero-stage glass-panel">
+          <div class="stage-ring"></div>
+          <div class="stage-grid"></div>
+          <div class="stage-core">
+            <p>Signal Cluster</p>
+            <h2>07</h2>
+            <span>active scenes</span>
+          </div>
+          <div class="floating-card card-alpha">
+            <p>Ambient Index</p>
+            <strong data-counter="94">0</strong>
+            <span>cinematic density</span>
+          </div>
+          <div class="floating-card card-beta">
+            <p>Pulse Drift</p>
+            <strong data-counter="128">0</strong>
+            <span>motion vectors</span>
+          </div>
+          <div class="floating-card card-gamma">
+            <p>Interface Bloom</p>
+            <strong data-counter="63">0</strong>
+            <span>responsive nodes</span>
+          </div>
+        </div>
+      </section>
+
+      <section id="metrics" class="section metrics">
+        <div class="section-heading">
+          <p class="eyebrow">Live aesthetic telemetry</p>
+          <h2>把“设计感”拆成可感知的前端语言</h2>
+        </div>
+        <div class="metric-grid">
+          <article class="metric-card glass-panel">
+            <span>Layer Depth</span>
+            <strong>9.4</strong>
+            <p>通过前景、中景、背景与微粒噪声叠出空间感。</p>
+          </article>
+          <article class="metric-card glass-panel">
+            <span>Motion Quality</span>
+            <strong>92%</strong>
+            <p>减少廉价跳变，用缓动、漂移与轻量视差维持高级感。</p>
+          </article>
+          <article class="metric-card glass-panel">
+            <span>Visual Contrast</span>
+            <strong>4 Layers</strong>
+            <p>用霓光、暗底、玻璃边缘和字体重量做视觉层次。</p>
+          </article>
+          <article class="metric-card glass-panel accent-card">
+            <span>Current Mode</span>
+            <strong id="themeLabel">Aurora</strong>
+            <p>支持切换不同光谱主题，让同一界面拥有不同情绪。</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="gallery" class="section gallery">
+        <div class="section-heading split">
+          <div>
+            <p class="eyebrow">Curated scenes</p>
+            <h2>每一张卡片，都像展馆里的一个独立空间</h2>
+          </div>
+          <p class="section-note">Hover 卡片，看看透视、边缘发光和背景响应；点击则切换下方讲解。</p>
+        </div>
+
+        <div class="gallery-grid">
+          <article class="scene-card scene-large glass-panel" data-scene-title="Prism Core" data-scene-copy="主舞台由动态网格、发光环和浮动数据组成，强调空间感与叙事中心，是整个页面的视觉引力源。">
+            <div class="scene-tag">01 / Prism Core</div>
+            <h3>会漂移的主场景</h3>
+            <p>主舞台不是静态图，而是由网格、发光环、渐变和数据浮层组成的动态构图。</p>
+          </article>
+          <article class="scene-card glass-panel" data-scene-title="Quiet Signal" data-scene-copy="把亮点压缩到必要区域，保留大面积暗部和留白，让霓光真正成为视线焦点，而不是噪音。">
+            <div class="scene-tag">02 / Quiet Signal</div>
+            <h3>深色中的克制亮点</h3>
+            <p>控制高亮面积，让视觉中心更明确，而不是整屏乱闪。</p>
+          </article>
+          <article class="scene-card glass-panel" data-scene-title="Editorial Flow" data-scene-copy="通过标题、说明、标签与节奏化留白，让单页也具备杂志封面和展览海报的张力。">
+            <div class="scene-tag">03 / Editorial Flow</div>
+            <h3>海报式排版</h3>
+            <p>标题、留白、短段文案与组件比例共同决定气质。</p>
+          </article>
+          <article class="scene-card glass-panel" data-scene-title="Tactile Hover" data-scene-copy="hover 不只是位移，而是材质、光线和透视的共同反馈，让界面更像可触摸物体。">
+            <div class="scene-tag">04 / Tactile Hover</div>
+            <h3>像摸到玻璃一样</h3>
+            <p>卡片 hover 有轻透视、边缘反光、阴影偏移和背景亮度反馈。</p>
+          </article>
+        </div>
+
+        <div class="scene-detail glass-panel" id="sceneDetail">
+          <p class="eyebrow">Scene focus</p>
+          <h3 id="sceneDetailTitle">Prism Core</h3>
+          <p id="sceneDetailCopy">
+            主舞台由动态网格、发光环和浮动数据组成，强调空间感与叙事中心，是整个页面的视觉引力源。
+          </p>
+        </div>
+      </section>
+
+      <section id="manifesto" class="section manifesto glass-panel">
+        <p class="eyebrow">Manifesto</p>
+        <h2>真正惊艳的前端，不是堆特效，而是让特效服务于气质。</h2>
+        <p>
+          这个原型故意把功能压到第二位，把所有预算投给视觉叙事：版式像海报，交互像展陈，背景像呼吸，按钮像可触摸的材质。主人要的不是“能用就行”的站，而是第一眼就记得住的作品。
+        </p>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <span>Spectra Lab / Front-end concept build</span>
+      <span>Designed for visual impact</span>
+    </footer>
+
+    <script src="app.js"></script>
+  </body>
+</html>

styles.css

@@ -0,0 +1,624 @@
+:root {
+  --bg: #070816;
+  --bg-soft: rgba(255, 255, 255, 0.08);
+  --panel: rgba(13, 17, 38, 0.5);
+  --panel-strong: rgba(17, 21, 46, 0.72);
+  --text: #f3f5ff;
+  --muted: rgba(230, 236, 255, 0.72);
+  --border: rgba(255, 255, 255, 0.14);
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
+  --accent-a: #7c5cff;
+  --accent-b: #2be4ff;
+  --accent-c: #ff6bd6;
+  --accent-d: #ffd166;
+}
+
+body.theme-ember {
+  --accent-a: #ff7a18;
+  --accent-b: #ff3cac;
+  --accent-c: #7b61ff;
+  --accent-d: #ffe66d;
+}
+
+body.theme-tide {
+  --accent-a: #4facfe;
+  --accent-b: #00f2fe;
+  --accent-c: #00ffa3;
+  --accent-d: #b2f7ef;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: 'Inter', 'Noto Sans SC', sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at top left, rgba(124, 92, 255, 0.16), transparent 30%),
+    radial-gradient(circle at top right, rgba(43, 228, 255, 0.12), transparent 28%),
+    linear-gradient(180deg, #050611 0%, #090b18 45%, #06070d 100%);
+  overflow-x: hidden;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 72px 72px;
+  mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
+  opacity: 0.28;
+  pointer-events: none;
+}
+
+.noise {
+  position: fixed;
+  inset: 0;
+  opacity: 0.08;
+  pointer-events: none;
+  background-image:
+    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.22) 0 1px, transparent 1px),
+    radial-gradient(circle at 70% 35%, rgba(255,255,255,0.16) 0 1px, transparent 1px),
+    radial-gradient(circle at 30% 80%, rgba(255,255,255,0.12) 0 1px, transparent 1px);
+  background-size: 180px 180px;
+  mix-blend-mode: screen;
+}
+
+.gradient-orb {
+  position: fixed;
+  width: 38rem;
+  height: 38rem;
+  border-radius: 50%;
+  filter: blur(40px);
+  opacity: 0.28;
+  pointer-events: none;
+  animation: drift 14s ease-in-out infinite alternate;
+}
+
+.orb-a {
+  top: -8rem;
+  left: -10rem;
+  background: radial-gradient(circle, var(--accent-a), transparent 62%);
+}
+
+.orb-b {
+  top: 24rem;
+  right: -12rem;
+  background: radial-gradient(circle, var(--accent-b), transparent 60%);
+  animation-duration: 18s;
+}
+
+.orb-c {
+  bottom: -10rem;
+  left: 22%;
+  background: radial-gradient(circle, var(--accent-c), transparent 58%);
+  animation-duration: 22s;
+}
+
+.pointer-glow {
+  position: fixed;
+  width: 18rem;
+  height: 18rem;
+  margin-left: -9rem;
+  margin-top: -9rem;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(circle, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 45%, transparent 72%);
+  mix-blend-mode: screen;
+  opacity: 0.75;
+  z-index: 1;
+}
+
+.particle-canvas {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0.55;
+  z-index: 0;
+}
+
+.topbar,
+.section,
+.footer {
+  position: relative;
+  z-index: 2;
+}
+
+.topbar {
+  width: min(1180px, calc(100% - 32px));
+  margin: 20px auto 0;
+  padding: 16px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.brand-mark {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent-b), var(--accent-c));
+  box-shadow: 0 0 18px var(--accent-b), 0 0 40px var(--accent-c);
+}
+
+.brand-eyebrow,
+.brand-sub,
+.eyebrow,
+.scene-tag,
+.metric-card span,
+.footer,
+.section-note {
+  letter-spacing: 0.08em;
+}
+
+.brand-eyebrow,
+.eyebrow {
+  margin: 0;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.74);
+  font-size: 0.74rem;
+}
+
+.brand-sub {
+  margin: 2px 0 0;
+  font-size: 0.75rem;
+  color: rgba(255,255,255,0.52);
+}
+
+.nav-links {
+  display: flex;
+  gap: 24px;
+}
+
+.nav-links a,
+.footer {
+  color: rgba(255,255,255,0.65);
+  text-decoration: none;
+  font-size: 0.92rem;
+}
+
+.ghost-button,
+.primary-button,
+.secondary-button {
+  border-radius: 999px;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+.ghost-button {
+  border: 1px solid rgba(255,255,255,0.14);
+  background: rgba(255,255,255,0.05);
+  color: var(--text);
+  padding: 12px 16px;
+  cursor: pointer;
+}
+
+.primary-button,
+.secondary-button {
+  text-decoration: none;
+  padding: 14px 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.primary-button {
+  background: linear-gradient(135deg, var(--accent-a), var(--accent-c));
+  color: white;
+  box-shadow: 0 18px 40px rgba(124, 92, 255, 0.28);
+}
+
+.secondary-button {
+  color: var(--text);
+  border: 1px solid rgba(255,255,255,0.16);
+  background: rgba(255,255,255,0.05);
+}
+
+.glass-panel {
+  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(24px) saturate(160%);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+}
+
+.section {
+  width: min(1180px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 84px 0;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: 1.08fr 0.92fr;
+  align-items: center;
+  gap: 42px;
+  min-height: calc(100vh - 110px);
+}
+
+.hero-copy h1 {
+  margin: 16px 0 18px;
+  font-size: clamp(3rem, 7vw, 6.25rem);
+  line-height: 0.95;
+  letter-spacing: -0.045em;
+}
+
+.hero-text {
+  max-width: 40rem;
+  font-size: 1.05rem;
+  line-height: 1.8;
+  color: var(--muted);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 28px;
+}
+
+.hero-stage {
+  position: relative;
+  min-height: 620px;
+  border-radius: 34px;
+  overflow: hidden;
+  padding: 30px;
+}
+
+.stage-grid,
+.stage-ring {
+  position: absolute;
+  inset: 0;
+}
+
+.stage-grid {
+  background-image:
+    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
+  background-size: 36px 36px;
+  mask-image: radial-gradient(circle at center, black 45%, transparent 88%);
+  animation: pulseGrid 12s linear infinite;
+}
+
+.stage-ring {
+  inset: 12%;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.12);
+  box-shadow:
+    0 0 40px rgba(124,92,255,0.22),
+    inset 0 0 40px rgba(43,228,255,0.12);
+}
+
+.stage-core {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 16rem;
+  height: 16rem;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  background: radial-gradient(circle, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
+  border: 1px solid rgba(255,255,255,0.14);
+  box-shadow: 0 0 60px rgba(124,92,255,0.22);
+}
+
+.stage-core p,
+.stage-core span {
+  margin: 0;
+  color: rgba(255,255,255,0.66);
+  text-transform: uppercase;
+  font-size: 0.78rem;
+  letter-spacing: 0.1em;
+}
+
+.stage-core h2 {
+  margin: 6px 0;
+  font-size: 5rem;
+  line-height: 1;
+}
+
+.floating-card {
+  position: absolute;
+  min-width: 180px;
+  padding: 18px 18px 16px;
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
+  border: 1px solid rgba(255,255,255,0.16);
+  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
+  backdrop-filter: blur(18px);
+}
+
+.floating-card p,
+.floating-card span {
+  margin: 0;
+  color: rgba(255,255,255,0.66);
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.floating-card strong {
+  display: block;
+  margin: 8px 0 6px;
+  font-size: 2.5rem;
+}
+
+.card-alpha { top: 8%; left: 4%; animation: floatCard 8s ease-in-out infinite; }
+.card-beta { right: 4%; top: 18%; animation: floatCard 11s ease-in-out infinite reverse; }
+.card-gamma { left: 12%; bottom: 8%; animation: floatCard 9s ease-in-out infinite 0.8s; }
+
+.section-heading {
+  max-width: 52rem;
+  margin-bottom: 28px;
+}
+
+.section-heading h2,
+.manifesto h2 {
+  margin: 12px 0 0;
+  font-size: clamp(2rem, 4vw, 3.6rem);
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+}
+
+.split {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: end;
+}
+
+.section-note,
+.manifesto p,
+.metric-card p,
+.scene-card p {
+  color: var(--muted);
+  line-height: 1.75;
+}
+
+.metric-grid,
+.gallery-grid {
+  display: grid;
+  gap: 18px;
+}
+
+.metric-grid {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.metric-card,
+.scene-card,
+.manifesto {
+  border-radius: 28px;
+}
+
+.metric-card {
+  padding: 24px;
+  min-height: 220px;
+}
+
+.metric-card strong {
+  display: block;
+  margin: 20px 0 14px;
+  font-size: clamp(2rem, 4vw, 3.5rem);
+  letter-spacing: -0.05em;
+}
+
+.accent-card {
+  background: linear-gradient(135deg, rgba(124,92,255,0.2), rgba(43,228,255,0.1), rgba(255,255,255,0.06));
+}
+
+.gallery-grid {
+  grid-template-columns: 1.2fr 1fr 1fr;
+  grid-auto-rows: 250px;
+}
+
+.scene-card {
+  position: relative;
+  overflow: hidden;
+  padding: 24px;
+  transform-style: preserve-3d;
+  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
+}
+
+.scene-card::before {
+  content: '';
+  position: absolute;
+  inset: -20%;
+  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.16), transparent 35%);
+  opacity: 0;
+  transition: opacity 220ms ease;
+}
+
+.scene-card:hover {
+  transform: translateY(-6px) rotateX(4deg) rotateY(-4deg);
+  border-color: rgba(255,255,255,0.24);
+  box-shadow: 0 24px 70px rgba(0,0,0,0.34), 0 0 30px rgba(124,92,255,0.14);
+}
+
+.scene-card:hover::before {
+  opacity: 1;
+}
+
+.scene-card.is-active {
+  border-color: rgba(255,255,255,0.3);
+  box-shadow: 0 24px 70px rgba(0,0,0,0.34), 0 0 34px rgba(124,92,255,0.18);
+}
+
+.scene-large {
+  grid-row: span 2;
+  min-height: 518px;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
+    radial-gradient(circle at top right, rgba(43,228,255,0.24), transparent 35%),
+    radial-gradient(circle at bottom left, rgba(124,92,255,0.24), transparent 34%);
+}
+
+.scene-tag {
+  color: rgba(255,255,255,0.72);
+  font-size: 0.74rem;
+  text-transform: uppercase;
+}
+
+.scene-card h3 {
+  margin: 18px 0 10px;
+  font-size: 1.8rem;
+}
+
+.scene-detail {
+  margin-top: 20px;
+  padding: 24px 26px;
+}
+
+.scene-detail h3 {
+  margin: 10px 0 6px;
+  font-size: clamp(1.6rem, 3vw, 2.4rem);
+}
+
+.manifesto {
+  padding: 34px;
+  margin-top: 14px;
+}
+
+.footer {
+  width: min(1180px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 26px 0 44px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.ghost-button:hover,
+.primary-button:hover,
+.secondary-button:hover {
+  transform: translateY(-2px);
+}
+
+@keyframes drift {
+  0% { transform: translate3d(0, 0, 0) scale(1); }
+  100% { transform: translate3d(24px, -32px, 0) scale(1.08); }
+}
+
+@keyframes floatCard {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-12px); }
+}
+
+@keyframes pulseGrid {
+  0% { transform: scale(1) rotate(0deg); opacity: 0.72; }
+  50% { transform: scale(1.04) rotate(0.8deg); opacity: 0.9; }
+  100% { transform: scale(1) rotate(0deg); opacity: 0.72; }
+}
+
+@media (max-width: 1100px) {
+  .hero,
+  .metric-grid,
+  .gallery-grid,
+  .split,
+  .footer,
+  .topbar {
+    grid-template-columns: 1fr !important;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .hero {
+    min-height: auto;
+    padding-top: 40px;
+  }
+
+  .metric-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  .gallery-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr !important;
+  }
+
+  .scene-large {
+    grid-column: 1 / -1;
+    grid-row: auto;
+    min-height: 320px;
+  }
+
+  .hero-stage {
+    min-height: 500px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 720px) {
+  .section {
+    padding: 64px 0;
+  }
+
+  .topbar {
+    margin-top: 14px;
+  }
+
+  .nav-links {
+    display: none;
+  }
+
+  .metric-grid,
+  .gallery-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .hero-copy h1 {
+    font-size: clamp(2.7rem, 14vw, 4.2rem);
+  }
+
+  .hero-stage {
+    min-height: 460px;
+    padding: 18px;
+  }
+
+  .stage-core {
+    width: 12rem;
+    height: 12rem;
+  }
+
+  .stage-core h2 {
+    font-size: 3.7rem;
+  }
+
+  .floating-card {
+    min-width: 140px;
+    padding: 14px;
+  }
+
+  .floating-card strong {
+    font-size: 2rem;
+  }
+
+  .manifesto {
+    padding: 24px;
+  }
+
+  .footer {
+    padding-bottom: 30px;
+  }
+}