feat: 沙香科技官网 v2.2 基线（深色科技风/双语/局域网+公网双部署）

assets/css/style.css

@@ -0,0 +1,646 @@
+/* ============================================================
+   沙香科技官网 v2 — 深色科技风
+   设计语言（2026 范式）：极光渐变 + 噪点 + Bento 网格 + 发光描边
+   品牌色取自 logo：深蓝底 + 红；辅助青蓝呼应产品摄影冷色调
+   ============================================================ */
+
+:root {
+  --bg-0: #04070f;
+  --bg-1: #070b16;
+  --bg-2: rgba(148, 178, 255, 0.04);
+  --line: rgba(148, 178, 255, 0.14);
+  --text: #e9eef8;
+  --muted: #93a0b8;
+  --brand: #ff3d5a;
+  --cyan: #4cc3ff;
+  --grad: linear-gradient(96deg, var(--cyan), var(--brand));
+  --radius: 16px;
+  --container: 1180px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  background: var(--bg-0);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+
+/* 噪点颗粒：消除渐变色带、增加质感（subtle grain） */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  pointer-events: none;
+  opacity: 0.04;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+
+img { display: block; max-width: 100%; }
+a { color: inherit; text-decoration: none; }
+ul { list-style: none; }
+
+.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
+
+.grad-text {
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* ============================================================
+   导航
+   ============================================================ */
+.site-header {
+  position: fixed;
+  inset: 0 0 auto 0;
+  z-index: 100;
+  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
+  border-bottom: 1px solid transparent;
+}
+.site-header.scrolled {
+  background: rgba(4, 7, 15, 0.78);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-color: var(--line);
+}
+.nav-wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
+.brand { flex-shrink: 0; }
+/* 反白版 logo（tools/make_logo_light.py）：黑字提亮为白、彩色保留色相，深底页面直接融合 */
+.brand-logo { height: 38px; width: auto; }
+.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 14.5px; }
+.nav a { color: var(--muted); transition: color 0.2s; }
+.nav a:hover { color: var(--text); }
+.nav-cta {
+  padding: 7px 18px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--text) !important;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.nav-cta:hover { border-color: var(--brand); box-shadow: 0 0 18px rgba(255, 61, 90, 0.25); }
+
+.lang-toggle {
+  background: none;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  border-radius: 999px;
+  width: 44px;
+  height: 32px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+  flex-shrink: 0;
+}
+.lang-toggle:hover { color: var(--text); border-color: var(--cyan); }
+
+.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
+.menu-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
+.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.menu-toggle.open span:nth-child(2) { opacity: 0; }
+.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
+/* ============================================================
+   Hero — 极光 + 网格（无照片，对比度完全可控）
+   ============================================================ */
+.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
+
+/* 三团极光：青 / 品红 / 深蓝，各自缓慢漂移呼吸 */
+.aurora { position: absolute; inset: -20%; filter: blur(90px); }
+.aurora i { position: absolute; border-radius: 50%; opacity: 0.5; }
+.aurora i:nth-child(1) {
+  width: 44vw; height: 44vw; left: -6%; top: -12%;
+  background: radial-gradient(circle, rgba(76, 195, 255, 0.55), transparent 65%);
+  animation: drift1 14s ease-in-out infinite alternate;
+}
+.aurora i:nth-child(2) {
+  width: 40vw; height: 40vw; right: -8%; top: 8%;
+  background: radial-gradient(circle, rgba(255, 61, 90, 0.38), transparent 65%);
+  animation: drift2 18s ease-in-out infinite alternate;
+}
+.aurora i:nth-child(3) {
+  width: 46vw; height: 46vw; left: 28%; bottom: -26%;
+  background: radial-gradient(circle, rgba(64, 72, 220, 0.4), transparent 65%);
+  animation: drift3 22s ease-in-out infinite alternate;
+}
+@keyframes drift1 { to { transform: translate(9vw, 7vh) scale(1.15); } }
+@keyframes drift2 { to { transform: translate(-8vw, 10vh) scale(0.9); } }
+@keyframes drift3 { to { transform: translate(6vw, -8vh) scale(1.1); } }
+
+/* 科技网格：向下的渐隐遮罩 */
+.hero-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(76, 195, 255, 0.06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(76, 195, 255, 0.06) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 92%);
+  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 92%);
+}
+
+.hero-inner { position: relative; z-index: 1; padding-top: 68px; }
+.hero-eyebrow {
+  font-size: 14px;
+  letter-spacing: 0.2em;
+  color: var(--cyan);
+  font-weight: 600;
+  margin-bottom: 22px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+/* eyebrow 前的脉冲光点：生命感 */
+.hero-eyebrow::before {
+  content: "";
+  width: 9px; height: 9px;
+  border-radius: 50%;
+  background: var(--cyan);
+  box-shadow: 0 0 12px 2px rgba(76, 195, 255, 0.8);
+  animation: pulse 2.2s ease-in-out infinite;
+}
+@keyframes pulse { 50% { opacity: 0.35; } }
+
+.hero-title {
+  font-size: clamp(42px, 7vw, 84px);
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: 0.01em;
+  margin-bottom: 26px;
+  text-wrap: balance;
+}
+.hero-sub { max-width: 640px; color: var(--muted); font-size: 17px; margin-bottom: 40px; }
+.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
+
+.btn {
+  display: inline-block;
+  padding: 13px 34px;
+  border-radius: 999px;
+  font-size: 15.5px;
+  font-weight: 600;
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+.btn-primary {
+  background: var(--grad);
+  color: #fff;
+  box-shadow: 0 8px 30px rgba(76, 195, 255, 0.28);
+}
+.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 44px rgba(255, 61, 90, 0.4); }
+.btn-ghost { border: 1px solid var(--line); color: var(--text); }
+.btn-ghost:hover { border-color: var(--cyan); transform: translateY(-2px); }
+
+/* ============================================================
+   技术词条跑马灯
+   ============================================================ */
+.marquee {
+  border-block: 1px solid var(--line);
+  background: rgba(148, 178, 255, 0.03);
+  overflow: hidden;
+  position: relative;
+}
+/* 两侧渐隐，词条像从光雾里滚出 */
+.marquee::before, .marquee::after {
+  content: "";
+  position: absolute;
+  top: 0; bottom: 0;
+  width: 120px;
+  z-index: 1;
+  pointer-events: none;
+}
+.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-0), transparent); }
+.marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg-0), transparent); }
+.marquee-track {
+  display: flex;
+  gap: 48px;
+  width: max-content;
+  padding: 16px 0;
+  animation: scroll 36s linear infinite;
+}
+.marquee-track span {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 48px;
+}
+.marquee-track span::after { content: "✦"; color: var(--brand); font-size: 11px; }
+@keyframes scroll { to { transform: translateX(-50%); } }
+
+/* ============================================================
+   区块通用
+   ============================================================ */
+.section { padding: 104px 0; }
+.section-alt {
+  background: var(--bg-1);
+  /* 顶部一条极细渐变分隔线，代替粗边框 */
+  border-block: 1px solid transparent;
+  border-image: linear-gradient(90deg, transparent, rgba(76, 195, 255, 0.35), transparent) 1;
+}
+
+.section-head { margin-bottom: 52px; max-width: 780px; }
+.eyebrow {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.28em;
+  color: var(--brand);
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brand); }
+.section-head h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.25; }
+.section-desc { color: var(--muted); margin-top: 16px; font-size: 16.5px; }
+
+/* ============================================================
+   关于 — Bento 网格
+   ============================================================ */
+.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 18px; }
+.bento-text { grid-column: 1 / 3; padding: 30px 32px; }
+.bento-photo { grid-column: 3 / 5; min-height: 300px; }
+.bento-stat { padding: 22px; }
+.bento-text, .bento-photo, .bento-stat {
+  border-radius: var(--radius);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+  position: relative;
+  overflow: hidden;
+}
+/* Bento 卡顶部一线品牌光 */
+.bento-text::before, .bento-photo::before, .bento-stat::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(76, 195, 255, 0.5), transparent);
+}
+.bento-text p { color: var(--muted); margin-bottom: 16px; font-size: 15px; }
+.bento-text p:first-child { color: var(--text); }
+/* 完整显示不裁剪：PPT 原图左右各约 40% 会被 cover 裁掉（CCTV 标志即因此丢失） */
+.bento-photo { display: flex; }
+.bento-photo img {
+  width: 100%;
+  height: auto;
+  max-height: 100%;
+  object-fit: contain;
+  margin: auto;
+  border-radius: 8px;
+}
+.bento-stat strong { display: block; font-size: 19px; margin-bottom: 5px; }
+.bento-stat span { font-size: 13px; color: var(--muted); }
+.bento-stat:hover { border-color: rgba(76, 195, 255, 0.45); transition: border-color 0.25s; }
+
+/* ============================================================
+   痛点
+   ============================================================ */
+.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 52px; }
+.pain-grid-3 { grid-template-columns: repeat(3, 1fr); }
+.pain {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 16px 18px;
+  background: var(--bg-2);
+}
+/* 左上角缺角高亮条：批次感 */
+.pain::before {
+  content: "";
+  display: block;
+  width: 26px; height: 3px;
+  border-radius: 2px;
+  background: var(--grad);
+  margin-bottom: 10px;
+}
+.pain h4 { font-size: 15px; margin-bottom: 4px; }
+.pain p { font-size: 13px; color: var(--muted); }
+
+/* ============================================================
+   产品卡 — 发光描边 + 镂空图
+   ============================================================ */
+.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
+.product-grid-3 { grid-template-columns: repeat(3, 1fr); }
+
+.card {
+  position: relative;
+  border-radius: var(--radius);
+  overflow: hidden;
+  background:
+    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
+    linear-gradient(140deg, rgba(76, 195, 255, 0.4), rgba(148, 178, 255, 0.08) 40%, rgba(255, 61, 90, 0.35)) border-box;
+  border: 1px solid transparent;
+  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
+}
+.card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(76, 195, 255, 0.12);
+  background:
+    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
+    linear-gradient(140deg, rgba(76, 195, 255, 0.75), rgba(148, 178, 255, 0.15) 40%, rgba(255, 61, 90, 0.65)) border-box;
+}
+
+/* 镂空产品图的舞台：底部品牌辉光托底 */
+.product-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 34px 28px;
+  min-height: 250px;
+  background:
+    radial-gradient(90% 70% at 50% 105%, rgba(76, 195, 255, 0.16), transparent 60%),
+    radial-gradient(50% 40% at 50% 100%, rgba(255, 61, 90, 0.10), transparent 70%),
+    var(--bg-0);
+}
+.product-media img {
+  max-height: 230px;
+  width: auto;
+  max-width: 100%;
+  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
+  transition: transform 0.3s;
+}
+.card:hover .product-media img { transform: scale(1.06); }
+/* 背景复杂的实拍图：不镂空，统一描边容器 */
+.product-media img.framed {
+  border-radius: 12px;
+  border: 1px solid rgba(233, 238, 248, 0.22);
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
+  filter: none;
+}
+
+.product-body { padding: 20px 22px 24px; }
+.product-body h3 { font-size: 17px; margin-bottom: 12px; }
+.product-note { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
+
+/* 功能标签：等宽网格对齐，杜绝换行参差 */
+.tags {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 7px;
+}
+.tags span {
+  font-size: 12px;
+  color: var(--cyan);
+  background: rgba(76, 195, 255, 0.08);
+  border: 1px solid rgba(76, 195, 255, 0.22);
+  padding: 5px 4px;
+  border-radius: 8px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* 英文模式：标签词更长，放宽格子并缩小字号防截断 */
+html[lang="en"] .tags { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
+html[lang="en"] .tags span { font-size: 11px; }
+
+.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
+.product-hero { display: flex; flex-direction: column; }
+.product-hero .product-media { flex: 1; min-height: 340px; }
+.product-hero .product-media img { max-height: 300px; }
+.scene-side { border-radius: var(--radius); border: 1px solid var(--line); object-fit: cover; width: 100%; }
+
+/* ============================================================
+   场景图
+   ============================================================ */
+.scene-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-top: 22px; }
+.scene-grid img {
+  border-radius: var(--radius);
+  border: 1px solid var(--line);
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s;
+}
+.scene-grid img:hover { transform: scale(1.015); }
+
+/* ============================================================
+   平台/定制卡
+   ============================================================ */
+.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
+.platform-media {
+  position: relative;
+  background: var(--bg-0);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 22px;
+  min-height: 230px;
+  overflow: hidden;
+}
+.platform-media::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(120% 90% at 50% 0%, rgba(76, 195, 255, 0.10), transparent 60%);
+}
+
+/* 多图卡：局部滑动展示。截图统一高度、宽度按原始比例自适应，
+   超宽截图自然超出卡片形成"滑动看局部"，宽度永远匹配内容 */
+.slider {
+  display: block;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+.slider::-webkit-scrollbar { display: none; }
+.slides { display: flex; gap: 16px; align-items: flex-end; }
+.slides figure {
+  flex: 0 0 auto;
+  scroll-snap-align: center;
+  margin: 0 4px;
+  display: flex;
+  justify-content: center;
+}
+.slides img {
+  height: 176px;
+  width: auto;
+  max-width: none;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+}
+/* 手机竖屏截图稍高，底对齐时视觉平衡 */
+.slides img.shot-phone { height: 196px; }
+/* 指示点 */
+.dots {
+  position: absolute;
+  left: 0; right: 0; bottom: 8px;
+  display: flex;
+  justify-content: center;
+  gap: 7px;
+  z-index: 2;
+}
+.dots button {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background: rgba(148, 178, 255, 0.25);
+  transition: background 0.2s, transform 0.2s;
+}
+.dots button.active {
+  background: var(--cyan);
+  transform: scale(1.35);
+  box-shadow: 0 0 8px rgba(76, 195, 255, 0.7);
+}
+.shot-main {
+  width: 100%;
+  max-width: 420px;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+}
+.shot-wide { max-width: 480px; }
+.shot-phone {
+  width: 96px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+}
+.feature-list li {
+  position: relative;
+  padding-left: 22px;
+  font-size: 14px;
+  color: var(--muted);
+  margin-bottom: 9px;
+}
+.feature-list li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 9px;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--grad);
+}
+
+/* ============================================================
+   联系
+   ============================================================ */
+.contact {
+  background:
+    radial-gradient(70% 100% at 50% 100%, rgba(255, 61, 90, 0.10), transparent 70%),
+    var(--bg-1);
+  text-align: center;
+}
+.contact-inner { max-width: 720px; }
+.contact-title {
+  font-size: clamp(34px, 5vw, 56px);
+  font-weight: 800;
+  display: flex;
+  gap: 22px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.contact-sub { color: var(--muted); margin: 18px 0 44px; }
+.contact-card {
+  display: inline-flex;
+  align-items: center;
+  gap: 36px;
+  padding: 32px 44px;
+  border-radius: 20px;
+  background:
+    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
+    linear-gradient(140deg, rgba(76, 195, 255, 0.4), rgba(255, 61, 90, 0.4)) border-box;
+  border: 1px solid transparent;
+  text-align: left;
+}
+.qrcode { width: 148px; height: 148px; border-radius: 12px; }
+.contact-mail {
+  font-size: 21px;
+  font-weight: 700;
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+.contact-mail:hover { filter: brightness(1.2); }
+.contact-info p { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
+
+/* ============================================================
+   Footer
+   ============================================================ */
+.site-footer { border-top: 1px solid var(--line); padding: 30px 0; }
+.footer-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
+.footer-brand { display: flex; align-items: center; gap: 14px; }
+.footer-brand .brand-logo { height: 30px; }
+.footer-brand span { font-size: 14px; color: var(--muted); }
+.footer-copy { font-size: 13px; color: var(--muted); }
+
+/* ============================================================
+   滚动淡入
+   ============================================================ */
+.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
+.reveal.visible { opacity: 1; transform: none; }
+
+/* ============================================================
+   响应式
+   ============================================================ */
+@media (max-width: 1024px) {
+  .product-grid, .pain-grid, .platform-grid { grid-template-columns: repeat(2, 1fr); }
+  .pain-grid-3 { grid-template-columns: repeat(2, 1fr); }
+  .bento { grid-template-columns: repeat(2, 1fr); }
+  .bento-text, .bento-photo { grid-column: 1 / 3; }
+  .bento-photo { min-height: 240px; }
+}
+
+@media (max-width: 768px) {
+  .section { padding: 72px 0; }
+
+  .menu-toggle { display: flex; margin-left: auto; }
+  .lang-toggle { margin-left: auto; }
+  .menu-toggle { margin-left: 0; }
+  .nav {
+    position: fixed;
+    top: 68px;
+    left: 0; right: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px 24px 28px;
+    gap: 18px;
+    background: rgba(4, 7, 15, 0.96);
+    backdrop-filter: blur(16px);
+    border-bottom: 1px solid var(--line);
+    display: none;
+  }
+  .nav.open { display: flex; }
+
+  .hero { min-height: 88vh; }
+  .hero-sub { font-size: 15.5px; }
+  .aurora { filter: blur(60px); }
+
+  .feature-row, .scene-grid { grid-template-columns: 1fr; }
+  .stats { gap: 14px; }
+  .contact-card { flex-direction: column; text-align: center; gap: 20px; padding: 28px; }
+}
+
+@media (max-width: 520px) {
+  .product-grid, .pain-grid, .pain-grid-3, .platform-grid, .bento { grid-template-columns: 1fr; }
+  .bento-text, .bento-photo { grid-column: auto; }
+  .hero-actions .btn { width: 100%; text-align: center; }
+  .product-media { min-height: 210px; }
+}
+
+/* 尊重系统减弱动效偏好 */
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  .aurora i, .marquee-track, .hero-eyebrow::before { animation: none; }
+  .reveal { opacity: 1; transform: none; transition: none; }
+  .card, .btn, .bento-stat { transition: none; }
+}

assets/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#4cc3ff"/>
+      <stop offset="1" stop-color="#ff3d5a"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="#070b16"/>
+  <path d="M45 20H27a8 8 0 0 0 0 16h10a8 8 0 0 1 0 16H19" fill="none" stroke="url(#g)" stroke-width="7" stroke-linecap="round"/>
+</svg>

assets/js/main.js

@@ -0,0 +1,227 @@
+/* ============================================================
+   沙香科技官网交互：中英切换 / 滚动淡入 / 导航
+   中文为 HTML 默认内容（SEO 友好），英文通过本字典替换
+   ============================================================ */
+(function () {
+  'use strict';
+
+  /* ---------- 英文字典（key 对应 data-i18n） ---------- */
+  var EN = {
+    // 导航
+    'nav.about': 'About', 'nav.grazing': 'Digital Grazing', 'nav.planting': 'Smart Planting',
+    'nav.asset': 'Asset Management', 'nav.platform': 'Software Platform',
+    'nav.custom': 'Custom Development', 'nav.contact': 'Contact Us',
+    // Hero
+    'hero.eyebrow': 'Suzhou Shashann Technology · AIoT',
+    'hero.title1': 'Powering Digital', 'hero.title2': 'Transformation with AIoT',
+    'hero.sub': 'Artificial intelligence, edge computing, cloud computing and low-power IoT — smart hardware products and digital software platforms that measurably boost efficiency and productivity across industries.',
+    'hero.cta1': 'Explore Solutions', 'hero.cta2': 'Contact Us',
+    // 关于
+    'about.title': 'About Shashann',
+    'about.p1': 'Suzhou Shashann Technology is an AIoT company dedicated to digital upgrading across industries — combining AI, edge computing, cloud computing and low-power IoT to deliver smart hardware products and digital software service platforms that significantly improve efficiency and productivity while cutting production and management costs.',
+    'about.p2': 'At the 10th anniversary of the Belt and Road Initiative, our self-developed smart livestock product was named a "China Signature Product" and was featured in episode 6 of the documentary "The Light of Technology". Our portfolio — smart collars, smart ear tags, smart hydroponic grow racks, smart terminals and smart asset tags — is already deployed across smart grazing, smart planting and smart asset management.',
+    'about.p3': 'Our core team brings deep AIoT expertise and partners with leading universities for continuous innovation, with R&D and production bases in Nanjing, Zhangjiagang and Changzhou, and products sold overseas. Guided by "Customer First, Innovation Driven", we aim to be a trusted, industry-leading AIoT company.',
+    'about.stat1v': 'China Signature Product', 'about.stat1k': 'Belt & Road 10th Anniversary',
+    'about.stat2v': 'The Light of Technology', 'about.stat2k': 'Featured in documentary Ep.6',
+    'about.stat3v': '3 Bases', 'about.stat3k': 'Nanjing · Zhangjiagang · Changzhou',
+    'about.stat4v': 'Sold Overseas', 'about.stat4k': 'Deployed at scale in many sectors',
+    // 数字畜牧
+    'grazing.title': 'Digital Grazing',
+    'grazing.desc': 'Livestock farming is geographically scattered with long grazing cycles, long dependent on manual inspection and experience. Our collars, ear tags and Bluetooth base stations turn grazing from "by experience" into "by data".',
+    'grazing.pain1t': 'Low Production Efficiency', 'grazing.pain1d': 'Each herder can only look after a limited number of livestock.',
+    'grazing.pain2t': 'No Early Warning', 'grazing.pain2d': 'Wide distribution and mobility make status monitoring and traceability difficult.',
+    'grazing.pain3t': 'Hard Insurance Claims', 'grazing.pain3d': 'Key events like epidemics, deaths and losses lack objective data.',
+    'grazing.pain4t': 'Ecology Unmeasured', 'grazing.pain4d': 'Grassland capacity and ecological change are hard to quantify and close the loop.',
+    'grazing.p1n': 'Smart Collar SG03 mini',
+    'grazing.p2n': 'Smart Collar SG03',
+    'grazing.p3n': 'Smart Bluetooth Ear Tag ST01',
+    'grazing.p4n': 'Smart Bluetooth Base Station BG01',
+    // 智慧种植
+    'planting.title': 'Smart Planting',
+    'planting.desc': 'Urban residents increasingly want to grow food at home, and school labor courses and AI education need better carriers. Smart hydroponics is convenient, intelligent and clean — we turn it from an expensive toy into a system that actually grows.',
+    'planting.pain1t': 'For Users', 'planting.pain1d': 'Beginners fail often; one bad experience kills repurchase.',
+    'planting.pain2t': 'For Products', 'planting.pain2d': 'Fake intelligence and immature consumables leave no returning revenue.',
+    'planting.pain3t': 'For the Industry', 'planting.pain3d': 'The category is still seen as an expensive toy with no leading brand.',
+    'planting.p1n': 'Smart Hydroponic Grow Rack HS01',
+    'planting.p1note': 'Standalone cabinet design, easy to expand; supports unattended AI mode and manual control.',
+    // 设备资产
+    'asset.title': 'Digital Equipment & Asset Management',
+    'asset.desc': 'Enterprises hold large, widely distributed asset pools that manual ledgers and periodic patrols cannot cover. IoT and AI make full lifecycle management possible — from "reactive repair" to "predictive maintenance".',
+    'asset.pain1t': 'Invisible Field', 'asset.pain1d': 'Ledgers never match reality; counting assets still means walking around.',
+    'asset.pain2t': 'No Traceability', 'asset.pain2d': 'Lack of recorded data makes quality issues hard to locate.',
+    'asset.pain3t': 'Fragmented Systems', 'asset.pain3d': 'Multiple systems, ununified data, weak decision support.',
+    'asset.pain4t': 'Reactive Maintenance', 'asset.pain4d': 'Repair-after-failure dominates; downtime costs far exceed maintenance.',
+    'asset.p1n': 'Smart Terminal BB03',
+    'asset.p1note': 'High-accuracy edge computing that reliably recognizes device/asset state.',
+    'asset.p2n': 'UWB Smart Tag SL01',
+    'asset.p2note': 'Works with safety helmets; easy to install.',
+    'asset.p3n': 'Bluetooth Smart Tag ST02',
+    // 软件平台
+    'platform.title': 'Software Platform',
+    'platform.desc': 'Every hardware line ships with a companion SaaS platform, APP and WeChat mini program — device data flows straight to the cloud, management is not tied to any terminal.',
+    'platform.s1n': 'Smart Grazing System',
+    'platform.s1a': 'SaaS platform, APP and WeChat mini program',
+    'platform.s1b': 'Multi-account ranch management, precision tracking and geofence alarms',
+    'platform.s1c': 'Livestock vitals monitoring, voice calling and music playback',
+    'platform.s1d': 'Device management with full lifecycle data and traceability',
+    'platform.s2n': 'Smart Hydroponics System',
+    'platform.s2a': 'SaaS platform and APP',
+    'platform.s2b': 'Multi-account planting management with live status',
+    'platform.s2c': 'Automatic planting adjustment system',
+    'platform.s2d': 'AI planting assistant',
+    'platform.s3n': 'Smart Asset Management System',
+    'platform.s3a': 'SaaS platform and WeChat mini program',
+    'platform.s3b': 'Multi-account asset and maintenance management',
+    'platform.s3c': 'Real-time computation of asset state and location',
+    'platform.s3d': 'Accurate prediction and maintenance from historical data',
+    // 定制开发
+    'custom.title': 'Custom Software Development',
+    'custom.desc': 'Building on our engineering and simulation expertise, we deliver custom systems for industry clients — from digital twins to multi-agent workflows.',
+    'custom.s1n': 'Smart Beam Yard System',
+    'custom.s1a': 'SaaS platform and WeChat mini program',
+    'custom.s1b': 'Resettlement progress, bridge and production management',
+    'custom.s1c': 'Material management, multi-sensor data access',
+    'custom.s1d': 'Digital twin system',
+    'custom.s2n': 'Intelligent Simulation Platform',
+    'custom.s2a': 'Browser/server computing platform',
+    'custom.s2b': 'Structural mechanics simulation',
+    'custom.s2c': 'Thermal and fluid simulation',
+    'custom.s2d': 'AI-accelerated simulation',
+    'custom.s3n': 'Custom AI Agent Systems',
+    'custom.s3a': 'Multi-agent workflows',
+    'custom.s3b': 'AI agent optimization',
+    'custom.s3c': 'Features tailored to customer needs',
+    // 联系
+    'contact.motto1': 'Customer First,', 'contact.motto2': 'Innovation Driven',
+    'contact.sub': 'Scan the QR code, or email us about your digital upgrade needs.',
+    'contact.company': 'Suzhou Shashann Technology Co., Ltd.',
+    'contact.loc': 'R&D & Production Bases: Nanjing · Zhangjiagang · Changzhou',
+    // Footer
+    'footer.slogan': 'Powering digital transformation with AIoT',
+    'footer.name': 'Suzhou Shashann Technology Co., Ltd.',
+    'footer.motto': 'Customer First, Innovation Driven',
+    // 功能标签（跨产品复用）
+    'tag.geofence': 'Geofence Alarm', 'tag.find': 'Smart Find', 'tag.vitals': 'Vitals Monitoring',
+    'tag.wireless': 'Long Battery / Wireless Charging', 'tag.solar': 'Solar Powered', 'tag.voice': 'Voice Calling',
+    'tag.satellite': 'Satellite Comms', 'tag.herd': 'Smart Herding', 'tag.mesh': 'Mesh Networking',
+    'tag.lost': 'Loss Alarm', 'tag.led': 'LED Find', 'tag.connect1000': '1000+ Connections',
+    'tag.hiloc': 'Precision Tracking', 'tag.music': 'Music Playback', 'tag.bind': 'Tag Binding',
+    'tag.cluster': 'Cluster Alarm',
+    'tag.sensorx': 'Multi-sensor', 'tag.light': 'Smart Lighting', 'tag.water': 'Auto Water Circulation',
+    'tag.fert': 'Auto Fertilizing', 'tag.aimode': 'Unattended AI Mode', 'tag.lowpower': 'Ultra-low Power',
+    'tag.stick': 'Stick & Play', 'tag.rugged': 'Rugged', 'tag.cm': 'Centimeter Positioning',
+    'tag.fall': 'Fall Detection', 'tag.easy': 'Easy Install', 'tag.buzz': 'Buzzer Alarm'
+  };
+
+  var lang = localStorage.getItem('lang') || 'zh';
+
+  /* ---------- 语言切换 ---------- */
+  var nodes = Array.prototype.slice.call(document.querySelectorAll('[data-i18n]'));
+  // 首次加载时记录中文原文，供切回使用
+  nodes.forEach(function (el) { el.setAttribute('data-zh', el.textContent); });
+
+  function applyLang(l) {
+    lang = l;
+    localStorage.setItem('lang', l);
+    document.documentElement.lang = l === 'zh' ? 'zh-CN' : 'en';
+    nodes.forEach(function (el) {
+      var key = el.getAttribute('data-i18n');
+      var text = l === 'en' ? EN[key] : el.getAttribute('data-zh');
+      if (text != null) el.textContent = text;
+    });
+    document.getElementById('langToggle').textContent = l === 'zh' ? 'EN' : '中文';
+    document.title = l === 'zh'
+      ? '苏州沙香科技有限公司 — AIoT 智能硬件与数字化平台'
+      : 'Suzhou Shashann Technology — AIoT Smart Hardware & Digital Platforms';
+  }
+
+  document.getElementById('langToggle').addEventListener('click', function () {
+    applyLang(lang === 'zh' ? 'en' : 'zh');
+  });
+
+  applyLang(lang);
+
+  /* ---------- 版权当前年份自动跨年（起始年 2023 写死在 HTML） ---------- */
+  document.getElementById('copyrightYear').textContent = String(new Date().getFullYear());
+
+  /* ---------- 导航滚动态 ---------- */
+  var header = document.getElementById('siteHeader');
+  function onScroll() { header.classList.toggle('scrolled', window.scrollY > 10); }
+  window.addEventListener('scroll', onScroll, { passive: true });
+  onScroll();
+
+  /* ---------- 移动端菜单 ---------- */
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.getElementById('siteNav');
+  menuToggle.addEventListener('click', function () {
+    var open = nav.classList.toggle('open');
+    menuToggle.classList.toggle('open', open);
+  });
+  // 点击菜单项后自动收起
+  nav.addEventListener('click', function (e) {
+    if (e.target.tagName === 'A') {
+      nav.classList.remove('open');
+      menuToggle.classList.remove('open');
+    }
+  });
+
+  /* ---------- 多图卡滑动指示点 ---------- */
+  document.querySelectorAll('.slider').forEach(function (slider) {
+    var slides = slider.querySelector('.slides');
+    var figures = Array.prototype.slice.call(slides.querySelectorAll('figure'));
+    if (figures.length < 2) return; // 单图卡不需要指示点
+
+    var dots = document.createElement('div');
+    dots.className = 'dots';
+    var buttons = figures.map(function (_, i) {
+      var b = document.createElement('button');
+      b.type = 'button';
+      b.setAttribute('aria-label', 'Slide ' + (i + 1));
+      b.addEventListener('click', function () {
+        // 滚到第 i 张居中（配合 scroll-snap-type: x mandatory）
+        var f = figures[i];
+        slides.scrollTo({
+          left: f.offsetLeft - (slides.offsetWidth - f.offsetWidth) / 2,
+          behavior: 'smooth'
+        });
+      });
+      dots.appendChild(b);
+      return b;
+    });
+    slider.appendChild(dots);
+
+    // 初始把第一张居中（无动画；scroll-snap 保证落点合法）
+    slides.scrollLeft =
+      figures[0].offsetLeft - (slides.offsetWidth - figures[0].offsetWidth) / 2;
+
+    // 滚动时高亮离视口中心最近的图
+    function update() {
+      var center = slides.scrollLeft + slides.offsetWidth / 2;
+      var best = 0, bestDist = Infinity;
+      figures.forEach(function (f, i) {
+        var d = Math.abs(f.offsetLeft + f.offsetWidth / 2 - center);
+        if (d < bestDist) { bestDist = d; best = i; }
+      });
+      buttons.forEach(function (b, i) { b.classList.toggle('active', i === best); });
+    }
+    slides.addEventListener('scroll', function () {
+      window.requestAnimationFrame(update);
+    }, { passive: true });
+    update();
+  });
+
+  /* ---------- 滚动淡入 ---------- */
+  if ('IntersectionObserver' in window) {
+    var io = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+          io.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.12 });
+    document.querySelectorAll('.reveal').forEach(function (el) { io.observe(el); });
+  } else {
+    document.querySelectorAll('.reveal').forEach(function (el) { el.classList.add('visible'); });
+  }
+})();