
:root{
  --ink:#f2f3fa; --ink-dim:#9ba0b8; --ink-faint:#5c6180;
  --violet:#6239f4; --purple:#a12cff; --cyan:#08cdeb; --blue:#2655d3;
  --line:rgba(120,126,178,.16); --panel:rgba(14,16,30,.55);
  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:#010107}
body{color:var(--ink);font-family:var(--font);overflow-x:hidden;background:transparent}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(98,57,244,.4)}

/* ---------- 「微尘」背景接线：仅定位，不涉及其内部逻辑 ---------- */
#sky{position:fixed;top:0;left:0;z-index:0;pointer-events:none}
/* [M] 100lvh：按“最大视口”铺满，手机地址栏收起时不会露出黑边；旧浏览器回退 100vh */
canvas#sky{display:block;width:100vw;height:100vh;height:100lvh}

/* ---------- 页面基底（透明，让背景透出） ---------- */
/* [M] 100dvh：跟随地址栏动态伸缩，避免首屏高度跳变；旧浏览器回退 100vh */
.page{position:relative;height:100vh;height:100dvh;min-height:640px;display:flex;flex-direction:column}

/* ---------- 导航 ---------- */
.nav{position:relative;z-index:5;display:flex;align-items:center;gap:2.6rem;
  padding:1.4rem clamp(1.4rem,4vw,4rem)}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:1rem}
.brand-mark{width:38px;height:38px;display:block;border-radius:10px;
  box-shadow:0 3px 12px rgba(0,0,0,.5),0 1px 6px rgba(98,57,244,.28)}
.brand-name{display:inline-flex;align-items:center}
.brand-name .bword{font-size:1.06rem;font-weight:500;letter-spacing:.3em;margin-right:-.3em;
  line-height:1.45;padding-bottom:.08em;
  background:linear-gradient(180deg,#ffffff 0%,#e2e6f4 48%,#9ba4c8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 7px rgba(140,150,255,.22))}
.nav-links{display:flex;gap:clamp(1.2rem,2.6vw,2.4rem);margin:0 auto;list-style:none}
.nav-links a{position:relative;font-size:.92rem;color:var(--ink-dim);padding:.4rem 0;transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.nav-cta{border:1px solid rgba(150,155,200,.30);background:transparent;color:var(--ink);
  padding:.55rem 1.3rem;border-radius:999px;font-size:.9rem;transition:border-color .25s,background .25s}
.nav-cta:hover{border-color:rgba(160,120,255,.7);background:rgba(98,57,244,.12)}
.nav-cta.active{border-color:rgba(160,120,255,.7);background:rgba(98,57,244,.12)}
.nav-menu{display:none;background:none;border:0;color:var(--ink)}

/* [M] 移动端导航抽屉：桌面隐藏，≤860px 由汉堡键唤起 */
.nav-drawer{display:none}

/* ---------- 首屏 ---------- */
.hero{position:relative;z-index:2;flex:1 0 auto;
  display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(340px,1fr) minmax(300px,.82fr);
  align-items:center;align-content:center;gap:clamp(1rem,3vw,3rem);
  padding:clamp(.6rem,2vh,1.6rem) clamp(1.4rem,4vw,4rem) clamp(.8rem,2.5vh,1.6rem)}
.hero-copy h1{font-size:clamp(1.9rem,3.6vw,3.35rem);line-height:1.32;font-weight:700;letter-spacing:.02em}
.hero-copy h1 .dot{color:var(--purple)}
.hero-sub{margin-top:1.4rem;color:var(--ink-dim);font-size:clamp(.95rem,1.2vw,1.12rem);letter-spacing:.06em}
.hero-sub i{font-style:normal;color:var(--ink-faint);padding:0 .5rem}
.hero-actions{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1.5rem;border-radius:12px;
  font-size:.95rem;color:var(--ink);border:1px solid rgba(150,155,200,.28);background:rgba(16,18,34,.35);
  transition:transform .25s,border-color .25s,background .25s}
.btn svg{transition:transform .25s}
.btn:hover{border-color:rgba(140,110,255,.65);background:rgba(98,57,244,.14);transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{border-color:transparent;
  background:linear-gradient(120deg,rgba(98,57,244,.85),rgba(38,85,211,.85));
  box-shadow:0 8px 30px -10px rgba(98,57,244,.55)}
.btn-primary:hover{background:linear-gradient(120deg,rgba(120,80,255,.95),rgba(50,100,230,.95))}

/* ---------- 中央立体装置 ---------- */
.stage{position:relative;display:flex;justify-content:center;align-items:center;
  min-height:clamp(300px,38vh,460px)}
/* 画布默认透明，渲染出第一帧后才淡入，杜绝“空白画布”这个中间态 */
.stage-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:135%;height:160%;z-index:4;pointer-events:none;
  opacity:0;transition:opacity .3s ease}
.stage-canvas.ready{opacity:1}

/* ---------- X Assistant ---------- */
.assistant{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:1.3rem 1.3rem 1.1rem;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);max-width:420px;justify-self:end;width:100%}
.assistant::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(155deg,rgba(139,56,255,.10),transparent 40%)}
.assistant-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.assistant-head h2{font-size:1rem;font-weight:600;letter-spacing:.03em}
.assistant-head .spark{color:#b9a6ff;animation:sparkle 3.5s ease-in-out infinite}
@keyframes sparkle{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.chat{display:flex;flex-direction:column;gap:.7rem;max-height:236px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(120,120,180,.3) transparent;padding-right:.2rem}
.msg{display:flex;gap:.6rem;align-items:flex-start;animation:msgIn .35s ease both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .avatar{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid var(--line);overflow:hidden}
.msg.bot .avatar{background:#07090f;border-color:rgba(130,120,220,.28)}
.msg .avatar svg{display:block}
.msg.bot .avatar svg{width:19px;height:19px}
.msg .bubble{background:rgba(255,255,255,.06);border:1px solid rgba(160,165,215,.12);
  padding:.6rem .85rem;border-radius:12px;font-size:.86rem;line-height:1.6;color:#dcdff0}
.msg.user .bubble{background:rgba(98,57,244,.16);border-color:rgba(120,90,250,.25)}
.typing .bubble{display:flex;gap:5px;padding:.75rem .9rem}
.typing .bubble i{width:5px;height:5px;border-radius:50%;background:#9aa0d0;animation:blink 1.2s infinite}
.typing .bubble i:nth-child(2){animation-delay:.2s}.typing .bubble i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chips{display:flex;gap:.55rem;margin:1rem 0 .8rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--ink-dim);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;
  padding:.5rem .8rem;transition:color .2s,border-color .2s,background .2s}
.chip:hover{color:var(--ink);border-color:rgba(140,110,255,.55);background:rgba(98,57,244,.12)}
.composer{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  border-radius:12px;padding:.35rem .4rem .35rem .9rem;background:rgba(8,10,20,.5);transition:border-color .25s}
.composer:focus-within{border-color:rgba(140,110,255,.6)}
.composer input{flex:1;background:transparent;border:0;outline:0;color:var(--ink);font-size:.88rem;font-family:inherit;min-width:0}
.composer input::placeholder{color:var(--ink-faint)}
.composer.demo-typing input::placeholder{color:#aab2d8}
.composer .caret{flex:none;width:1.5px;height:16px;margin-left:-6px;border-radius:1px;
  background:#aab2d8;opacity:0;pointer-events:none}
.composer.demo-typing .caret{opacity:1;animation:caretBlink 1s steps(1) infinite}
@keyframes caretBlink{0%,60%{opacity:1}61%,100%{opacity:0}}
.send{flex:none;width:34px;height:34px;border-radius:9px;border:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violet),var(--blue));color:#fff;transition:transform .2s,box-shadow .2s}
.send:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(98,57,244,.7)}

/* ---------- 底部服务 ----------
   触发选择器统一写成 .service:is(:hover,.auto)：
   悬停与自动巡演命中同一条规则，鼠标接管自动播放中的卡片时
   动画不重启、不跳变，这就是“丝滑转换”的关键 */
.services{position:relative;z-index:2;margin-top:auto;
  padding:0 clamp(1.4rem,4vw,4rem) clamp(.25rem,.7vh,.45rem)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,3rem)}
.service{position:relative;padding:.4rem .4rem 0;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:center;transition:transform .25s ease-out}
.service:hover{transform:scale(1.04)}
.service-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.service-link:focus-visible{outline:1px solid rgba(160,120,255,.9);outline-offset:4px}
.service-head{display:flex;align-items:center;justify-content:space-between}
.service-head h3{font-size:clamp(1rem,1.4vw,1.3rem);font-weight:600;letter-spacing:.04em}
.service-head .arrow{color:var(--ink-faint);transition:transform .3s,color .3s}
.service:is(:hover,.auto) .arrow{transform:translateX(6px);color:var(--ink)}
.service-icon{margin-top:.55rem;height:53px;display:flex;align-items:center}
.service-icon svg{width:150px;height:88px;overflow:visible;transform:scale(.6);transform-origin:left center}
.service-icon [stroke]{stroke:#565d86;transition:stroke .35s}
.service:is(:hover,.auto) .service-icon [stroke]{stroke:#8b93cf}

/* ---------- 页脚 ---------- */
.footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(120,126,178,.10);
  margin:0 clamp(1.4rem,4vw,4rem);
  /* [M] 底部吃进安全区，避免被 iPhone 横条遮住 */
  padding:.9rem 0 calc(1.1rem + env(safe-area-inset-bottom,0px));
  color:var(--ink-faint);font-size:.76rem;letter-spacing:.05em}
.footer a{color:var(--ink-faint);transition:color .2s}
.footer a:hover{color:var(--ink-dim)}
.footer-links{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}

/* ---------- 站内骨架页 ---------- */
.static-page{min-height:100vh;min-height:100dvh}
.static-main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column}
.static-section{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:clamp(3rem,10vh,8rem) clamp(1.4rem,8vw,10rem);scroll-margin-top:5rem}
.static-section + .static-section{border-top:1px solid var(--line)}
.static-panel{width:min(100%,760px)}
.static-panel h1,.static-panel h2{font-size:clamp(2rem,5vw,4rem);line-height:1.2;letter-spacing:.02em}
.static-panel h2{font-size:clamp(1.8rem,4vw,3.2rem)}
.static-panel p{margin-top:1rem;color:var(--ink-dim);font-size:1rem;line-height:1.8}
.static-page .footer{margin-top:auto}

/* ---------- 入场编排：页面内容错峰淡入，与 3D 装置的节奏咬合 ----------
   0.10s 导航 → 0.50s 标题 → 0.85s 助手 → 1.05s 服务 → 1.30s 页脚 */
.nav{animation:navIn .8s cubic-bezier(.22,.7,.25,1) .1s both}
.hero-copy{animation:riseIn .9s cubic-bezier(.22,.7,.25,1) .5s both}
.assistant{animation:riseIn .9s cubic-bezier(.22,.7,.25,1) .85s both}
.services{animation:riseIn .9s cubic-bezier(.22,.7,.25,1) 1.05s both}
.footer{animation:soften 1s ease 1.3s both}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes navIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes soften{from{opacity:0}to{opacity:1}}

/* 1) 品牌设计 */
.svc-brand .cir{stroke-dasharray:200;stroke-dashoffset:0}
.svc-brand .axis{transform-origin:center;transition:transform .5s ease}
.service:is(:hover,.auto) .svc-brand .cir{animation:draw 1.1s ease forwards}
.service:is(:hover,.auto) .svc-brand .cir.c2{animation-delay:.15s}
.service:is(:hover,.auto) .svc-brand .axis-h{transform:scaleX(1.12)}
.service:is(:hover,.auto) .svc-brand .axis-v{transform:scaleY(1.15)}
.svc-brand .anchor{fill:#565d86;transition:fill .35s}
.service:is(:hover,.auto) .svc-brand .anchor{fill:var(--purple)}
@keyframes draw{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}

/* 2) 企业智能化 */
.svc-net .core{transform-origin:75px 48px;transition:fill .3s}
.service:is(:hover,.auto) .svc-net .core{fill:var(--violet);animation:pulse 1.6s ease-in-out infinite}
.svc-net .link{stroke-dasharray:60;stroke-dashoffset:0;transition:stroke .4s}
.service:is(:hover,.auto) .svc-net .link{stroke:#7f6cf0;animation:draw60 .9s ease forwards}
.service:is(:hover,.auto) .svc-net .link:nth-of-type(2){animation-delay:.12s}
.service:is(:hover,.auto) .svc-net .link:nth-of-type(3){animation-delay:.24s}
.service:is(:hover,.auto) .svc-net .link:nth-of-type(4){animation-delay:.36s}
.service:is(:hover,.auto) .svc-net .link:nth-of-type(5){animation-delay:.48s}
.service:is(:hover,.auto) .svc-net .link:nth-of-type(6){animation-delay:.6s}
.svc-net .node{transition:fill .3s}
.service:is(:hover,.auto) .svc-net .node{fill:#9fb2ff}
@keyframes draw60{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* 3) AI 广告片 */
.svc-film .corner{transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.service:is(:hover,.auto) .svc-film .c-tl{transform:translate(5px,4px)}
.service:is(:hover,.auto) .svc-film .c-tr{transform:translate(-5px,4px)}
.service:is(:hover,.auto) .svc-film .c-bl{transform:translate(5px,-4px)}
.service:is(:hover,.auto) .svc-film .c-br{transform:translate(-5px,-4px)}
.svc-film .lens{transition:transform .55s ease}
.service:is(:hover,.auto) .svc-film .lens-l{transform:translateX(7px)}
.service:is(:hover,.auto) .svc-film .lens-r{transform:translateX(-7px)}
.svc-film .rec{opacity:0;transition:opacity .3s}
.service:is(:hover,.auto) .svc-film .rec{opacity:1;animation:blink 1.2s infinite}

/* 4) 网站开发 */
.svc-web .skel{transform-origin:left center}
.service:is(:hover,.auto) .svc-web .skel{animation:typeIn .6s ease both}
.service:is(:hover,.auto) .svc-web .skel:nth-of-type(2){animation-delay:.15s}
.service:is(:hover,.auto) .svc-web .skel:nth-of-type(3){animation-delay:.3s}
.svc-web .cursor{transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.service:is(:hover,.auto) .svc-web .cursor{transform:translate(-34px,-18px)}
.svc-web .ui-btn{transition:fill .3s .55s,stroke .3s .55s}
.service:is(:hover,.auto) .svc-web .ui-btn{fill:rgba(98,57,244,.5);stroke:#8b93cf}
@keyframes typeIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 响应式 ---------- */
@media (max-height:740px),(max-width:1220px){
  /* [M] 内容超出一屏时改为可滚动，min-height 用 dvh 防地址栏跳变 */
  .page{height:auto;min-height:100vh;min-height:100dvh}
}
@media (max-width:1220px){
  .hero{grid-template-columns:1fr 1fr;grid-template-areas:"copy device" "assistant assistant"}
  .hero-copy{grid-area:copy}.stage{grid-area:device}
  .assistant{grid-area:assistant;justify-self:center;max-width:560px;margin-top:1rem}
}
@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  /* [M] 汉堡键热区拉到 44px，靠右 */
  .nav{gap:1rem;padding:1rem clamp(1rem,4vw,1.4rem)}
  .brand{margin-right:0}
  .nav-menu{display:grid;place-items:center;margin-left:auto;min-width:44px;min-height:44px;border-radius:10px}
  .nav-menu:active{background:rgba(98,57,244,.14)}
  /* [M] 导航抽屉 */
  .nav-drawer{display:block;position:absolute;top:100%;left:.8rem;right:.8rem;z-index:30;
    background:rgba(10,12,24,.92);border:1px solid var(--line);border-radius:16px;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    padding:.6rem;box-shadow:0 20px 50px -20px rgba(0,0,0,.85);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s}
  .nav-drawer.open{opacity:1;transform:none;pointer-events:auto}
  .nav-drawer a{display:block;padding:.85rem 1rem;border-radius:10px;font-size:.95rem;color:var(--ink-dim)}
  .nav-drawer a.active,.nav-drawer a:active{background:rgba(98,57,244,.14);color:var(--ink)}
  .nav-drawer .drawer-cta{display:block;text-align:center;margin-top:.4rem;color:var(--ink);
    background:linear-gradient(120deg,rgba(98,57,244,.85),rgba(38,85,211,.85));border-radius:12px}

  .hero{grid-template-columns:1fr;grid-template-areas:"copy" "device" "assistant";gap:1.4rem;
    padding-top:.4rem}
  .stage{min-height:300px}
  /* [M] 装置画布收敛一点，避免视觉上压到上下文案 */
  .stage-canvas{width:120%;height:135%}
  .assistant{max-width:100%;justify-self:stretch;margin-top:.4rem}
  /* [M] 16px 起步，杜绝 iOS 聚焦输入框时自动放大页面 */
  .composer input{font-size:16px}
  .chip{padding:.65rem .95rem;font-size:.84rem}
  .send{width:40px;height:40px}
  .hero-actions .btn{min-height:46px}

  .services-grid{grid-template-columns:repeat(2,1fr);row-gap:2rem}
  .footer{justify-content:center;text-align:center}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr;row-gap:1.6rem}
  .stage{min-height:250px}
  .chat{max-height:190px}
  .hero-actions{gap:.7rem}
  .hero-actions .btn{flex:1 1 0;justify-content:center}
  .hero-sub{margin-top:1rem}
  .service-icon{height:53px}
}

/* [M] 触屏设备通用：热区与激活反馈（不依赖悬停） */
@media (hover:none){
  .chip{min-height:42px}
  .btn:active{background:rgba(98,57,244,.18)}
  .chip:active{color:var(--ink);border-color:rgba(140,110,255,.55);background:rgba(98,57,244,.12)}
}

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

.svg-definitions{position:absolute}

/* ===== 洞察页 · 预测星域 ===== */
.insights-main {
  --ins-title: rgba(255, 255, 255, 0.95);
  --ins-text: rgb(245, 248, 255);
  --ins-dim: rgb(223, 232, 250);
  --ins-far: rgb(209, 222, 246);
  --ins-subtitle: rgba(225, 232, 250, 0.78);
  --ins-placeholder: rgba(190, 205, 232, 0.62);
  --ins-accent: #7de3ff;
  --ins-accent-soft: rgba(125, 227, 255, 0.15);
  min-height: 100vh;
}

.insights-hero {
  text-align: center;
  padding: 4.5rem 1.5rem 1rem;
}

.insights-title {
  font-size: 2.2rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* 抵消最后一个字的字距，保证视觉居中 */
  color: var(--ins-title);
  font-weight: 300;
  margin: 0 0 0.8rem;
}

.insights-subtitle {
  color: var(--ins-subtitle);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  margin: 0;
}

/* 星域容器 */
.insight-field {
  position: relative;
  height: 68vh;
  min-height: 420px;
  overflow: hidden;
  margin: 1rem auto 0;
  max-width: 1200px;
}

/* 背景微星 */
.insight-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.2;
  animation: insightTwinkle 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes insightTwinkle {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.4; }
}

/* 漂浮的预测语句 */
.insight-item {
  position: absolute;
  max-width: 15em;
  opacity: 0;
  color: var(--ins-text);
  line-height: 1.7;
  letter-spacing: 0.06em;
  pointer-events: none;
  will-change: opacity, transform;
  text-shadow: 0 0 18px rgba(120, 180, 255, 0.25);
}

/* 三层景深 */
.insight-item--near { font-size: 1.15rem; }
.insight-item--mid  { font-size: 0.95rem; color: var(--ins-dim); }
.insight-item--far  { font-size: 0.8rem;  color: var(--ins-far); }

/* 访客自己的预测：更亮，带光边 */
.insight-item--mine {
  color: var(--ins-accent);
  border: 1px solid var(--ins-accent-soft);
  background: rgba(125, 227, 255, 0.05);
  padding: 0.5em 0.9em;
  border-radius: 2em;
  text-shadow: 0 0 20px rgba(125, 227, 255, 0.5);
}

/* 提交区 */
.insight-submit {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  text-align: center;
}

.insight-submit-row {
  display: flex;
  gap: 0.75rem;
}

#insight-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2em;
  padding: 0.75em 1.2em;
  color: var(--ins-text);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#insight-input::placeholder { color: var(--ins-placeholder); }

#insight-input:focus {
  border-color: var(--ins-accent);
  box-shadow: 0 0 16px rgba(125, 227, 255, 0.15);
}

#insight-submit-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--ins-accent);
  color: var(--ins-accent);
  border-radius: 2em;
  padding: 0.75em 1.6em;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

#insight-submit-btn:hover {
  background: var(--ins-accent-soft);
  box-shadow: 0 0 20px rgba(125, 227, 255, 0.25);
}

.insight-feedback {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ins-accent);
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.insight-feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 洞察页页脚：仅提升本页的辅助信息，避免影响其他页面 */
.insights-main ~ .footer,
.insights-main ~ .footer a {
  color: var(--ins-placeholder);
}

.insights-main ~ .footer a:hover { color: var(--ins-text); }

/* 移动端 */
@media (max-width: 640px) {
  .insights-title { font-size: 1.5rem; }
  .insight-field { height: 56vh; min-height: 340px; }
  .insight-item { max-width: 11em; }
  .insight-submit-row { flex-direction: column; }
  #insight-submit-btn { padding: 0.8em; }
}

/* 尊重系统的减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  .insight-star { animation: none; }
}

/* ===== 案例页 · 影像 / 品牌 / 平面 ===== */
.cases-page{height:auto;min-height:100vh;min-height:100dvh;background:#08090d;background-image:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(30,34,52,.55),transparent)}
.cases-main{position:relative;z-index:2;flex:none;color:#e9e9ee}
.cases-main :focus-visible,.case-video-modal :focus-visible,.case-deck-modal :focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}
.cases-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.cases-reveal.in{opacity:1;transform:none}
.cases-hero{min-height:78vh;min-height:78svh;display:flex;flex-direction:column;justify-content:flex-start;padding:100px 8vw 0}
.cases-kicker{font-size:12px;letter-spacing:6px;color:rgba(255,255,255,.4);margin-bottom:24px}
.cases-hero h1{font-size:clamp(32px,5.6vw,70px);font-weight:700;letter-spacing:2px;line-height:1.3}.cases-hero h1 em{font-style:normal;color:rgba(255,255,255,.35)}
.cases-hero p{margin-top:26px;font-size:14px;line-height:2;color:rgba(255,255,255,.55);max-width:580px}.cases-hero-index{display:flex;gap:clamp(28px,4vw,68px);margin-top:auto;padding-bottom:34px;font-size:11px;letter-spacing:5px}.cases-hero-index a{position:relative;color:rgba(255,255,255,.34);transition:color .3s}.cases-hero-index a::before{content:"";position:absolute;left:0;bottom:-11px;width:100%;height:1px;background:linear-gradient(90deg,rgba(180,192,255,.52),transparent);transform:scaleX(.24);transform-origin:left;transition:transform .35s ease}.cases-hero-index a:hover{color:rgba(255,255,255,.86)}.cases-hero-index a:hover::before{transform:scaleX(1)}
.cases-values{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:start;width:min(100% - 16vw,1440px);margin:70px auto 0;gap:clamp(34px,5vw,92px)}
.case-value{--value-shift:0px;position:relative;min-height:0;padding:0;transform:translateY(var(--value-shift));transition:transform .5s ease}.case-value:nth-child(2){--value-shift:14px}.case-value:nth-child(3){--value-shift:28px}
.case-value::before,.case-value::after,.case-value h3::before,.case-value h3::after{content:none}.case-value:hover{transform:translateY(calc(var(--value-shift) - 3px))}.case-value h3{display:block;margin:0;padding:0;font-size:18px;line-height:1.35;letter-spacing:3px;font-weight:600;text-shadow:0 0 24px rgba(207,216,255,.10)}.case-value p{margin-top:14px;max-width:33em;font-size:12px;line-height:1.95;color:rgba(211,219,241,.58)}
.cases-section{padding:100px 8vw 30px;scroll-margin-top:1rem}.cases-section-head{display:grid;grid-template-columns:34px max-content minmax(32px,1fr);align-items:center;gap:18px}.case-section-sigil{position:relative;width:28px;height:28px;display:block;filter:drop-shadow(0 0 10px rgba(110,130,255,.22))}.case-section-sigil::before,.case-section-sigil::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(156,172,255,.64),transparent)}.case-section-sigil::before{transform:translate(-50%,-50%) rotate(45deg)}.case-section-sigil::after{transform:translate(-50%,-50%) rotate(-45deg)}.case-section-sigil i{position:absolute;width:3px;height:3px;border-radius:50%;background:#c5ccff;box-shadow:0 0 8px rgba(140,158,255,.9)}.case-section-sigil i:nth-child(1){left:3px;top:4px}.case-section-sigil i:nth-child(2){right:3px;bottom:4px}.case-section-sigil i:nth-child(3){left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);background:#8176ff}
.cases-section-head h2{position:relative;font-size:24px;letter-spacing:5px;font-weight:600;text-shadow:0 0 22px rgba(177,190,255,.08)}.case-section-rule{height:1px;background:linear-gradient(90deg,rgba(160,174,255,.28),rgba(255,255,255,.08) 20%,rgba(255,255,255,.03));box-shadow:0 0 14px rgba(104,124,255,.08)}
.cases-section-desc{margin:16px 0 40px;padding-left:42px;font-size:12px;letter-spacing:1px;line-height:1.9;color:rgba(255,255,255,.4);max-width:720px}
.case-films{display:grid;grid-template-columns:1fr 1fr;gap:22px}.case-film{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#0d0f16;color:inherit;text-align:left}.case-film--wide{grid-column:1/-1}
.case-film-frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}.case-film--wide .case-film-frame{aspect-ratio:21/9}.case-film img{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.58) saturate(.62);transition:filter .45s ease}.case-film:hover img,.case-film:focus-visible img{filter:brightness(.78) saturate(.8)}
.case-film-hover-image{z-index:1!important;opacity:0;pointer-events:none;transition:opacity .08s linear!important}.case-film--documentary:hover .case-film-hover-image,.case-film--documentary:focus-visible .case-film-hover-image{opacity:1;transition-delay:.13s!important}.case-film--documentary:hover .case-film-frame>img:not(.case-film-hover-image),.case-film--documentary:focus-visible .case-film-frame>img:not(.case-film-hover-image){filter:brightness(.58) saturate(.62)}
.case-film-gate{position:absolute;z-index:3;inset:18px;opacity:0;transform:scale(.94);background:linear-gradient(to right,rgba(233,238,255,.9) 0 26px,transparent 26px) left top/100% 1px no-repeat,linear-gradient(to bottom,rgba(233,238,255,.9) 0 26px,transparent 26px) left top/1px 100% no-repeat,linear-gradient(to left,rgba(233,238,255,.9) 0 26px,transparent 26px) right top/100% 1px no-repeat,linear-gradient(to bottom,rgba(233,238,255,.9) 0 26px,transparent 26px) right top/1px 100% no-repeat,linear-gradient(to right,rgba(233,238,255,.9) 0 26px,transparent 26px) left bottom/100% 1px no-repeat,linear-gradient(to top,rgba(233,238,255,.9) 0 26px,transparent 26px) left bottom/1px 100% no-repeat,linear-gradient(to left,rgba(233,238,255,.9) 0 26px,transparent 26px) right bottom/100% 1px no-repeat,linear-gradient(to top,rgba(233,238,255,.9) 0 26px,transparent 26px) right bottom/1px 100% no-repeat;filter:drop-shadow(0 0 8px rgba(169,183,255,.34));transition:opacity .3s ease,transform .5s cubic-bezier(.18,.82,.2,1);pointer-events:none}.case-film:hover .case-film-gate,.case-film:focus-visible .case-film-gate{opacity:1;transform:scale(1)}.case-film-frame::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(to top,rgba(8,9,13,.82),rgba(8,9,13,.08) 55%,rgba(8,9,13,.12))}
.case-film-action{position:absolute;z-index:4;left:50%;top:50%;display:flex;align-items:center;gap:12px;opacity:0;transform:translate(-50%,-50%);transition:opacity .28s ease,transform .35s cubic-bezier(.22,.75,.2,1);pointer-events:none;white-space:nowrap}.case-film-action i{position:relative;display:block;width:24px;height:1px;background:rgba(244,246,255,.88);transform:scaleX(.45);transform-origin:left;transition:transform .4s ease}.case-film-action i::after{content:"";position:absolute;right:-1px;top:50%;border-left:6px solid rgba(244,246,255,.96);border-top:4px solid transparent;border-bottom:4px solid transparent;transform:translateY(-50%)}.case-film-action b{font-size:11px;font-weight:500;letter-spacing:4px;color:rgba(247,248,255,.92)}.case-film:hover .case-film-action,.case-film:focus-visible .case-film-action{opacity:1;transform:translate(-50%,-50%)}.case-film:hover .case-film-action i,.case-film:focus-visible .case-film-action i{transform:scaleX(1)}
.case-film-info{position:absolute;left:26px;bottom:22px;z-index:4;max-width:70%}.case-film-info h3{font-size:20px;letter-spacing:3px}.case-film-info span{display:block;margin-top:6px;font-size:12px;color:rgba(255,255,255,.55);letter-spacing:1px}.case-film-info .case-film-desc{color:rgba(255,255,255,.42);line-height:1.8;letter-spacing:.5px}
.case-film-credits{max-height:0;opacity:0;overflow:hidden;margin-top:0;font-size:11px!important;letter-spacing:2px!important;color:rgba(255,255,255,.5)!important;transition:max-height .4s ease,opacity .4s ease,margin-top .4s ease}.case-film:hover .case-film-credits,.case-film:focus-visible .case-film-credits{max-height:24px;opacity:1;margin-top:8px}
.case-film-play{position:absolute;right:26px;bottom:22px;z-index:4;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;background:rgba(8,9,13,.4);backdrop-filter:blur(4px);transition:background .3s,border-color .3s}.case-film:hover .case-film-play,.case-film:focus-visible .case-film-play{background:rgba(255,255,255,.12);border-color:#fff}.case-film-play::after{content:"";margin-left:3px;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.case-film-duration{position:absolute;top:18px;right:20px;z-index:4;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.75);padding:3px 10px;border:1px solid rgba(255,255,255,.25);border-radius:20px}
.case-logo-wall{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);border-left:1px solid rgba(255,255,255,.08)}.case-logo-cell{position:relative;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);transition:background .35s}.case-logo-cell:hover{background:rgba(255,255,255,.04)}
.case-logo-cell img{width:44px;height:44px;object-fit:contain;opacity:.5;filter:grayscale(1) brightness(2);transition:opacity .35s,transform .35s}.case-logo-cell:hover img{opacity:1;transform:scale(1.12) translateY(-4px)}.case-logo-wordmark{display:none;font-size:20px;font-weight:700;letter-spacing:4px;color:rgba(255,255,255,.5);transition:color .35s,transform .35s}.case-logo-cell:hover .case-logo-wordmark{color:#fff;transform:translateY(-4px)}.case-logo-cell.is-text-mode img{display:none}.case-logo-cell.is-text-mode .case-logo-wordmark{display:block}.case-logo-name{position:absolute;bottom:14px;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.35);opacity:0;transition:opacity .35s}.case-logo-cell:hover .case-logo-name{opacity:1}
.case-decks{display:grid;grid-template-columns:1fr 1fr;gap:22px}.case-deck{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;border:0;text-align:left;color:inherit;transition:transform .3s}.case-deck:hover,.case-deck:focus-visible{transform:translateY(-4px)}.case-deck--one{background:linear-gradient(135deg,#14161f 0%,#1d2130 55%,#2a2138 100%)}.case-deck--two{background:linear-gradient(135deg,#10141c 0%,#16222e 55%,#133039 100%)}.case-deck::before{content:"";position:absolute;top:24px;left:28px;width:34px;height:3px;background:rgba(255,255,255,.7)}.case-deck h3{font-size:21px;letter-spacing:3px;position:relative}.case-deck p{margin-top:8px;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:1px}.case-deck-open{position:absolute;right:24px;bottom:24px;font-size:11px;letter-spacing:3px;color:rgba(255,255,255,.75);padding:8px 18px;border:1px solid rgba(255,255,255,.3);border-radius:30px;transition:background .3s,color .3s}.case-deck:hover .case-deck-open,.case-deck:focus-visible .case-deck-open{background:#fff;color:#0a0b10;border-color:#fff}.case-deck-pages{position:absolute;top:22px;right:26px;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.4)}
.cases-cta{margin:110px 8vw 0;padding:70px 8vw;border:1px solid rgba(255,255,255,.1);border-radius:16px;text-align:center;background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(40,46,70,.35),transparent)}.cases-cta .cases-kicker{font-size:11px;letter-spacing:5px}.cases-cta h2{margin-top:18px;font-size:clamp(22px,3.4vw,38px);letter-spacing:3px;font-weight:700}.cases-cta p{margin-top:16px;font-size:13px;line-height:2;color:rgba(255,255,255,.5)}.cases-cta a{display:inline-block;margin-top:32px;font-size:12px;letter-spacing:4px;color:#0a0b10;background:#fff;padding:14px 44px;border-radius:40px;transition:transform .25s,box-shadow .25s}.cases-cta a:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(255,255,255,.25)}
.cases-footer{padding:80px 8vw calc(50px + env(safe-area-inset-bottom,0px));text-align:center;font-size:11px;letter-spacing:3px;color:rgba(255,255,255,.25)}
.case-video-modal,.case-deck-modal{position:fixed;inset:0;z-index:50;background:rgba(5,6,9,.92);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:24px}.case-video-modal.is-open,.case-deck-modal.is-open{opacity:1;pointer-events:auto}
.case-video-modal-top,.case-deck-modal-top{width:100%;max-width:960px;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;letter-spacing:3px;color:rgba(255,255,255,.7)}.case-modal-close{font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.6);background:none;border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:6px 16px;transition:color .25s,border-color .25s}.case-modal-close:hover{color:#fff;border-color:#fff}
.case-video-stage{width:100%;max-width:1120px;aspect-ratio:16/9;display:grid;place-items:center;background:#050609;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}.case-video-stage video{width:100%;height:100%;background:#000}.case-video-pending{padding:2rem;text-align:center;color:rgba(255,255,255,.7);letter-spacing:2px;font-size:14px}.case-video-pending strong{display:block;margin-top:.8rem;color:#fff;font-weight:500;letter-spacing:1px}
.case-deck-stage-wrap{position:relative;width:100%;max-width:960px}.case-deck-stage{width:100%;aspect-ratio:16/9;background:#f4f1ea;border-radius:6px;overflow:hidden;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}.case-slide{position:absolute;inset:0;padding:6% 7%;color:#1c1c22;display:flex;flex-direction:column;animation:caseSlideIn .45s ease-out}.case-slide--center{align-items:center;justify-content:center;text-align:center}@keyframes caseSlideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}.case-slide-kicker{font-size:clamp(9px,1.2vw,12px);letter-spacing:5px;color:#8a8578;margin-bottom:auto}.case-slide--center .case-slide-kicker{margin-bottom:18px}.case-slide-title{font-size:clamp(20px,3.6vw,44px);font-weight:700;letter-spacing:2px;line-height:1.3}.case-slide-sub{margin-top:14px;font-size:clamp(11px,1.4vw,15px);color:#6d6a60;line-height:1.9;max-width:80%}.case-slide--center .case-slide-sub{max-width:100%}.case-slide-foot{margin-top:auto;display:flex;justify-content:space-between;font-size:clamp(8px,1vw,11px);letter-spacing:3px;color:#a09a8a}.case-slide-foot--absolute{position:absolute;left:7%;right:7%;bottom:6%}.case-slide-rows{margin-top:auto}.case-slide-row{display:flex;gap:4%;align-items:baseline;padding:2.2% 0;border-top:1px solid #dcd6c8}.case-slide-row-no{font-size:clamp(12px,1.8vw,20px);color:#b3ac9a;font-weight:700}.case-slide-row-title{font-size:clamp(12px,1.7vw,19px);font-weight:600;flex-shrink:0}.case-slide-row-desc{font-size:clamp(10px,1.2vw,13px);color:#6d6a60}.case-slide-stats{margin-top:auto;display:flex}.case-slide-stat{flex:1;border-left:1px solid #dcd6c8;padding-left:4%}.case-slide-stat:first-child{border-left:none;padding-left:0}.case-slide-stat b{display:block;font-size:clamp(24px,4.5vw,56px);font-weight:700}.case-slide-stat span{font-size:clamp(9px,1.1vw,12px);letter-spacing:2px;color:#8a8578}
.case-deck-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:18px;transition:background .25s;display:flex;align-items:center;justify-content:center}.case-deck-arrow:hover{background:rgba(255,255,255,.18)}.case-deck-prev{left:-66px}.case-deck-next{right:-66px}.case-deck-modal-bottom{width:100%;max-width:960px;display:flex;align-items:center;gap:18px;margin-top:18px;font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.6)}.case-deck-modal-bottom>div{flex:1;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}.case-deck-modal-bottom i{display:block;height:100%;background:#fff;transition:width .35s ease}
@media (max-width:760px){.cases-hero{justify-content:center;padding:90px 6vw 0}.cases-values{width:auto;margin:50px 6vw 0;grid-template-columns:1fr}.cases-section{padding:70px 6vw 20px}.cases-section-desc{padding-left:0}.case-films,.case-decks{grid-template-columns:1fr}.case-film-frame,.case-film--wide .case-film-frame{aspect-ratio:16/9}.case-film-info{max-width:78%}.case-logo-wall{grid-template-columns:repeat(2,1fr)}.cases-cta{margin:80px 6vw 0;padding:50px 8vw}.case-deck-arrow{background:rgba(8,9,13,.5)}.case-deck-prev{left:8px}.case-deck-next{right:8px}.case-slide-sub{max-width:100%}}
@media (max-width:760px){.cases-hero-index{margin-top:40px;padding-bottom:0;gap:26px}.case-value{--value-shift:0px}}
@media (min-width:761px) and (max-width:1024px){.case-logo-wall{grid-template-columns:repeat(3,1fr)}.cases-values{grid-template-columns:repeat(3,1fr)}}

/* 品牌标识场：以悬浮标识替代常规 Logo 方格墙 */
.case-logo-wall{position:relative;display:block;min-height:760px;margin-top:46px;border:0;isolation:isolate;overflow:hidden}.case-logo-wall::before{content:"";position:absolute;inset:7% 3%;z-index:-2;background:radial-gradient(ellipse 48% 42% at 50% 48%,rgba(76,91,151,.11),transparent 72%),radial-gradient(ellipse 28% 32% at 12% 72%,rgba(122,78,142,.08),transparent 72%),radial-gradient(ellipse 24% 28% at 88% 22%,rgba(50,121,148,.07),transparent 72%);filter:blur(8px)}.case-logo-wall::after{content:"";position:absolute;z-index:-1;left:12%;top:14%;width:76%;height:61%;border:1px solid rgba(173,190,255,.09);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-17deg);pointer-events:none}.case-logo-cell{position:absolute;margin:0;display:grid;place-items:center;width:13%;height:154px;aspect-ratio:auto;gap:0;border:0!important;background:none!important;opacity:.68;filter:none;transition:opacity .45s ease,filter .45s ease;cursor:default}.case-logo-cell::before{content:"";position:absolute;inset:-26%;z-index:-1;background:radial-gradient(circle,rgba(149,164,255,.2),transparent 68%);opacity:0;filter:blur(14px);transition:opacity .45s ease}.case-logo-cell:hover,.case-logo-cell:focus-within{opacity:1;filter:brightness(1.14)}.case-logo-cell:hover::before,.case-logo-cell:focus-within::before{opacity:1}.case-logo-cell img{display:block;width:100%;height:100%;object-fit:contain;opacity:1;filter:none;transition:transform .5s cubic-bezier(.22,.78,.26,1),filter .45s ease;mix-blend-mode:screen}.case-logo-cell:hover img,.case-logo-cell:focus-within img{transform:translateY(-6px) scale(1.07)}.case-logo-cell figcaption{position:absolute;bottom:-18px;left:50%;width:max-content;max-width:180px;transform:translate(-50%,5px);font-size:9px;line-height:1.3;letter-spacing:2px;color:rgba(233,237,255,.55);text-align:center;opacity:0;transition:opacity .35s ease,transform .35s ease;pointer-events:none}.case-logo-cell:hover figcaption,.case-logo-cell:focus-within figcaption{opacity:1;transform:translate(-50%,0)}.case-logo-cell--light img{filter:invert(1) grayscale(1) contrast(1.3)}.case-logo-cell--warm img{filter:contrast(1.45) saturate(.84) brightness(1.08)}.case-logo-cell--cool img{filter:contrast(1.2) saturate(.76) brightness(1.08)}.case-logo-cell--metal img{filter:grayscale(1) contrast(1.18) brightness(1.16)}.case-logo-cell.is-unavailable{display:none}.case-logo-cell:nth-child(1){left:7%;top:3%;width:13%;height:138px}.case-logo-cell:nth-child(2){left:36%;top:8%;width:13%;height:130px}.case-logo-cell:nth-child(3){right:7%;top:3%;width:12%;height:130px}.case-logo-cell:nth-child(4){left:5%;top:29%;width:16%;height:160px}.case-logo-cell:nth-child(5){left:31%;top:30%;width:12%;height:132px}.case-logo-cell:nth-child(6){right:7%;top:26%;width:16%;height:166px}.case-logo-cell:nth-child(7){left:8%;bottom:8%;width:13%;height:136px}.case-logo-cell:nth-child(8){left:33%;bottom:10%;width:13%;height:136px}.case-logo-cell:nth-child(9){right:7%;bottom:7%;width:15%;height:150px}.case-logo-cell:nth-child(10){left:23%;top:51%;width:11%;height:120px}.case-logo-cell:nth-child(11){left:52%;top:48%;width:12%;height:144px}.case-logo-cell:nth-child(12){right:5%;top:52%;width:13%;height:144px}
@media (max-width:760px){.case-logo-wall{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 10vw;margin-top:34px;padding:12px 2vw 46px;overflow:visible}.case-logo-wall::before{inset:0}.case-logo-wall::after{width:92%;height:72%;left:4%;top:12%}.case-logo-cell,.case-logo-cell:nth-child(n){position:relative;inset:auto;width:auto;height:105px;opacity:.78}.case-logo-cell figcaption{opacity:.58;transform:translate(-50%,0)}}

/* 品牌标识必须保留原始色彩与细节：空间感只由排布和光场承担。 */
.case-logo-cell,.case-logo-cell:hover,.case-logo-cell:focus-within{opacity:1;filter:none}.case-logo-cell img,.case-logo-cell--light img,.case-logo-cell--warm img,.case-logo-cell--cool img,.case-logo-cell--metal img{filter:none;mix-blend-mode:normal}.case-logo-cell:hover img,.case-logo-cell:focus-within img{transform:translateY(-5px) scale(1.035)}

/* 标识潮汐：有秩序的三层编排，动态只发生在各自坐标附近。 */
@media (min-width:761px){.case-logo-wall{min-height:630px}.case-logo-wall::after{content:none}.case-logo-cell,.case-logo-cell:nth-child(n){right:auto;bottom:auto;width:11.5%;height:128px;animation:case-logo-tide var(--tide-duration,16s) ease-in-out var(--tide-delay,0s) infinite;will-change:transform}.case-logo-cell:nth-child(1){left:10%;top:7%;--tide-x:6px;--tide-y:-4px;--tide-duration:17s;--tide-delay:-7s}.case-logo-cell:nth-child(2){left:42%;top:11%;--tide-x:-5px;--tide-y:5px;--tide-duration:19s;--tide-delay:-2s}.case-logo-cell:nth-child(3){left:73%;top:6%;--tide-x:4px;--tide-y:-6px;--tide-duration:18s;--tide-delay:-10s}.case-logo-cell:nth-child(4){left:5%;top:35%;--tide-x:-5px;--tide-y:4px;--tide-duration:20s;--tide-delay:-5s}.case-logo-cell:nth-child(5){left:29%;top:40%;--tide-x:6px;--tide-y:-4px;--tide-duration:16s;--tide-delay:-9s}.case-logo-cell:nth-child(6){left:56%;top:34%;--tide-x:-4px;--tide-y:6px;--tide-duration:21s;--tide-delay:-3s}.case-logo-cell:nth-child(7){left:82%;top:40%;--tide-x:5px;--tide-y:-5px;--tide-duration:18s;--tide-delay:-12s}.case-logo-cell:nth-child(8){left:8%;top:68%;--tide-x:5px;--tide-y:4px;--tide-duration:20s;--tide-delay:-1s}.case-logo-cell:nth-child(9){left:30%;top:62%;--tide-x:-6px;--tide-y:-5px;--tide-duration:17s;--tide-delay:-6s}.case-logo-cell:nth-child(10){left:51%;top:68%;--tide-x:4px;--tide-y:5px;--tide-duration:19s;--tide-delay:-11s}.case-logo-cell:nth-child(11){left:72%;top:62%;--tide-x:-4px;--tide-y:-5px;--tide-duration:16s;--tide-delay:-4s}.case-logo-cell:nth-child(12){left:88%;top:68%;width:9%;--tide-x:4px;--tide-y:4px;--tide-duration:21s;--tide-delay:-8s}}
@keyframes case-logo-tide{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(var(--tide-x),var(--tide-y),0)}}
@media (max-width:760px),(prefers-reduced-motion:reduce){.case-logo-cell,.case-logo-cell:nth-child(n){animation:none}}

/* 品牌胶片：以连续运动组织标识，而非将它们切成静态方格。 */
.case-logo-wall{display:grid;min-height:0;gap:18px;margin-top:40px;padding:18px 0 28px;overflow:hidden}.case-logo-wall::after{content:none}.case-logo-reel{position:relative;min-height:142px;overflow:hidden}.case-logo-reel::before,.case-logo-reel::after{content:"";position:absolute;z-index:2;right:0;left:0;height:1px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(173,190,255,.24) 0 2px,transparent 2px 35px);opacity:.36}.case-logo-reel::before{top:7px}.case-logo-reel::after{bottom:7px}.case-logo-track{display:flex;align-items:center;width:max-content;gap:clamp(46px,6vw,92px);padding:16px clamp(22px,3vw,52px);will-change:transform;animation:case-logo-reel-left 52s linear infinite}.case-logo-reel--2 .case-logo-track{animation-name:case-logo-reel-right;animation-duration:58s}.case-logo-reel--3 .case-logo-track{animation-duration:55s}.case-logo-reel:hover .case-logo-track,.case-logo-reel:focus-within .case-logo-track{animation-play-state:paused}.case-logo-cell,.case-logo-cell:nth-child(n){position:relative;inset:auto;flex:0 0 clamp(132px,11vw,176px);width:clamp(132px,11vw,176px);height:106px;margin:0;animation:none;transform:none}.case-logo-cell:nth-child(12){width:clamp(132px,11vw,176px)}.case-logo-cell::before{display:none}.case-logo-cell figcaption{bottom:-8px}.case-logo-wall .case-logo-cell:hover img,.case-logo-wall .case-logo-cell:focus-within img{transform:translateY(-4px) scale(1.025)}@keyframes case-logo-reel-left{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}@keyframes case-logo-reel-right{from{transform:translateX(-33.333%)}to{transform:translateX(0)}}
@media (max-width:760px){.case-logo-wall{gap:10px;padding:8px 0 26px;overflow:visible}.case-logo-reel{min-height:118px;overflow:hidden}.case-logo-reel::before,.case-logo-reel::after{opacity:.24}.case-logo-track{gap:34px;padding:14px 20px;animation:none!important}.case-logo-cell,.case-logo-cell:nth-child(n){flex-basis:118px;width:118px;height:86px}.case-logo-cell figcaption{opacity:.58;bottom:-6px}}
@media (prefers-reduced-motion:reduce){.case-logo-track{animation:none!important}}

/* 统一以可视主体而非原始画布为尺度；每个标识保留自己的最佳比例。 */
.case-logo-wall .case-logo-cell img{transform:scale(var(--logo-scale,1));transform-origin:center;transition:transform .5s cubic-bezier(.22,.78,.26,1)}.case-logo-wall .case-logo-cell:hover img,.case-logo-wall .case-logo-cell:focus-within img{transform:translateY(-4px) scale(calc(var(--logo-scale,1) * 1.025))}
.case-logo-wall .case-logo-cell--app img{clip-path:inset(0 round 18%)}

/* 稳定胶片带：标识始终完整，动态来自投影光的缓慢显影。 */
.case-logo-wall{gap:26px;margin-top:38px;padding:12px 0 34px;overflow:visible}.case-logo-reel{min-height:148px;overflow:hidden}.case-logo-reel::before,.case-logo-reel::after{height:1px;opacity:.25;background:repeating-linear-gradient(90deg,rgba(178,193,255,.3) 0 2px,transparent 2px 42px)}.case-logo-reel::before{top:4px}.case-logo-reel::after{bottom:4px}.case-logo-reel--1{--reel-shift:0s}.case-logo-reel--2{--reel-shift:-2.6s}.case-logo-reel--3{--reel-shift:-5.2s}.case-logo-track{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;width:100%;height:148px;gap:clamp(18px,3vw,58px);padding:12px clamp(20px,3vw,48px);animation:none!important}.case-logo-track::before{content:"";position:absolute;z-index:0;top:18px;bottom:18px;width:22%;background:linear-gradient(90deg,transparent,rgba(139,153,255,.11),rgba(226,232,255,.16),rgba(139,153,255,.11),transparent);filter:blur(12px);transform:translateX(-150%);animation:case-logo-projection 12s cubic-bezier(.45,0,.55,1) var(--reel-shift) infinite}.case-logo-reel:hover .case-logo-track::before,.case-logo-reel:focus-within .case-logo-track::before{animation-play-state:paused}.case-logo-cell,.case-logo-cell:nth-child(n){position:relative;z-index:1;inset:auto;justify-self:center;flex:none;width:clamp(108px,10vw,154px);height:104px;margin:0;opacity:.52;animation:case-logo-exposure 12s ease-in-out calc(var(--reel-shift) + var(--film-delay)) infinite;will-change:opacity,transform}.case-logo-cell:nth-child(12){width:clamp(108px,10vw,154px)}.case-logo-reel:hover .case-logo-cell,.case-logo-reel:focus-within .case-logo-cell{animation-play-state:paused}.case-logo-cell figcaption{bottom:-9px}.case-logo-wall .case-logo-cell:hover img,.case-logo-wall .case-logo-cell:focus-within img{transform:translateY(-3px) scale(calc(var(--logo-scale,1) * 1.02))}@keyframes case-logo-projection{0%,14%{transform:translateX(-150%);opacity:0}22%,78%{opacity:1}86%,100%{transform:translateX(520%);opacity:0}}@keyframes case-logo-exposure{0%,7%,100%{opacity:.52;transform:translate3d(0,0,0)}11%,16%{opacity:1;transform:translate3d(0,-3px,0)}20%{opacity:.62;transform:translate3d(0,0,0)}}
@media (max-width:760px){.case-logo-wall{gap:18px}.case-logo-reel{min-height:184px;overflow:visible}.case-logo-track{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;min-height:184px;gap:22px 12px;padding:14px 6px}.case-logo-track::before{display:none}.case-logo-cell,.case-logo-cell:nth-child(n){width:104px;height:78px;animation:none;opacity:.82}.case-logo-reel::before,.case-logo-reel::after{display:none}}
@media (prefers-reduced-motion:reduce){.case-logo-track::before,.case-logo-cell{animation:none!important}.case-logo-cell{opacity:.82}}

/* 回归胶片经过：只让完整、透明处理后的标识经过画面。 */
.case-logo-wall{display:grid;gap:18px;min-height:0;margin-top:40px;padding:18px 0 28px;overflow:hidden}.case-logo-reel{position:relative;min-height:142px;overflow:hidden}.case-logo-reel::before,.case-logo-reel::after{display:block;content:"";position:absolute;z-index:2;right:0;left:0;height:1px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(173,190,255,.24) 0 2px,transparent 2px 35px);opacity:.3}.case-logo-reel::before{top:7px}.case-logo-reel::after{bottom:7px}.case-logo-track{position:static;isolation:auto;display:flex;align-items:center;width:max-content;height:auto;gap:clamp(50px,6vw,92px);padding:16px clamp(52px,5vw,92px);animation:case-logo-reel-left 52s linear infinite!important}.case-logo-track::before{display:none}.case-logo-reel--2 .case-logo-track{animation-name:case-logo-reel-right!important;animation-duration:58s!important}.case-logo-reel--3 .case-logo-track{animation-duration:55s!important}.case-logo-reel:hover .case-logo-track,.case-logo-reel:focus-within .case-logo-track{animation-play-state:paused!important}.case-logo-cell,.case-logo-cell:nth-child(n){position:relative;z-index:auto;inset:auto;justify-self:auto;flex:0 0 clamp(128px,10.5vw,164px);width:clamp(128px,10.5vw,164px);height:106px;margin:0;opacity:.86;animation:none!important;will-change:auto}.case-logo-cell:nth-child(12){width:clamp(128px,10.5vw,164px)}.case-logo-cell figcaption{bottom:-8px}.case-logo-reel:hover .case-logo-cell,.case-logo-reel:focus-within .case-logo-cell{opacity:1}.case-logo-wall .case-logo-cell:hover img,.case-logo-wall .case-logo-cell:focus-within img{transform:translateY(-4px) scale(calc(var(--logo-scale,1) * 1.025))}
@media (max-width:760px){.case-logo-wall{gap:10px;padding:8px 0 26px;overflow:visible}.case-logo-reel{min-height:118px;overflow:hidden}.case-logo-reel::before,.case-logo-reel::after{opacity:.22}.case-logo-track{gap:34px;padding:14px 22px;animation:none!important}.case-logo-cell,.case-logo-cell:nth-child(n){flex-basis:118px;width:118px;height:86px;opacity:.82}.case-logo-cell figcaption{opacity:.58;bottom:-6px}}

/* 最终方形 LOGO：容器与素材均为 1:1，轨道高度为完整画面留出余量。 */
.case-logo-reel{min-height:216px}.case-logo-track{padding-top:20px;padding-bottom:20px}.case-logo-cell,.case-logo-cell:nth-child(n){flex-basis:clamp(128px,10.5vw,164px);width:clamp(128px,10.5vw,164px);height:auto;aspect-ratio:1 / 1}.case-logo-cell:nth-child(12){width:clamp(128px,10.5vw,164px)}
@media (max-width:760px){.case-logo-reel{min-height:150px}.case-logo-track{padding-top:14px;padding-bottom:14px}.case-logo-cell,.case-logo-cell:nth-child(n){flex-basis:118px;width:118px;height:auto;aspect-ratio:1 / 1}}
