:root{
	--bg: #0b0c10;
	--bg-2: #0f1116;
	--fg: #f4f6fb;
	--muted: #aeb6c2;
	--brand: #66e2ff;
	--brand-2:#7c6cff;
	--accent:#00c2cf;
	--card:#11131a;
	--grid: 12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
.wrap{width:min(1200px, 92vw);margin:0 auto}
/* ===== Global Header (简化的 ACGH 思路：数据驱动的头部占位) ===== */
header.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(11,12,16,.8),rgba(11,12,16,.3) 60%,transparent);backdrop-filter:saturate(140%) blur(8px);}
.nav{display:flex;align-items:center;gap:20px;padding:14px 0}
.nav-logo{font-weight:700;letter-spacing:.2px;display: flex}
.nav-logo img{margin-right: .75rem}
.nav-spacer{flex:1}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--fg)}
.qr-modal {border: solid 1px;}
.qr-modal:hover{background-color: rgb(255 255 255 / 0.05);}

/* ===== Hero ===== */
.hero{position:relative;min-height:88vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% 0%, #1a2330 0%, rgba(26,35,48,0) 60%), linear-gradient(180deg, #0f1116, #0b0c10)}
.hero .title{font-size:clamp(28px,6vw,64px);line-height:1.1;font-weight:800;text-align:center;letter-spacing:.3px}
.hero .subtitle{opacity:.8;margin-top:12px;text-align:center}

/* ===== Scrollytelling Section（核心：固定舞台 + 分镜切换） ===== */
.section{padding:10vh 0;background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.section .wrap{display:grid;grid-template-columns: 1.2fr 1fr;gap:4vw;align-items:flex-start}
@media (max-width: 900px){
	.section .wrap{grid-template-columns:1fr}
}

/* 舞台容器（左列） */
.stage-viewport{position:sticky;top:12vh;height:76vh;border-radius:24px;background:linear-gradient(180deg,#0d1017,#0b0c10);box-shadow:0 10px 40px rgba(0,0,0,.35);display:grid;place-items:center;overflow:visible}
.device{position:relative;width:min(820px,95%);aspect-ratio:16/10;border-radius:18px;background:linear-gradient(160deg,#0b0c10,#121827);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.5);overflow:visible} 
.device-bezel{position:absolute;inset:10px 10px 24px 10px;border-radius:12px;background:linear-gradient(180deg,#0a0e16,#04060a)}
.screen-stack{position:absolute;inset:16px 16px 28px 16px;border-radius:10px;overflow:hidden} 
.screen{position:absolute;inset:0;opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;display:grid;place-items:center}
.screen.is-active{opacity:1;transform:translateY(0)}
.screen__art{width:80%;height:70%;border-radius:16px;background:conic-gradient(from 120deg,var(--brand),var(--brand-2),#78ffd6,#9bafd9);filter:blur(0px);opacity:.9;mix-blend:screen;}
.screen--2 .screen__art{background:linear-gradient(135deg,#ffcc70,#c850c0,#4158d0)}
.screen--3 .screen__art{background:radial-gradient(120% 90% at 20% 10%,#00f5a0 0%,transparent 40%), radial-gradient(120% 90% at 80% 90%,#00d9f5 0%,transparent 40%), linear-gradient(180deg,#10141c,#0f1116)}
.screen--4 .screen__art{background:linear-gradient(180deg,#0f1116,#0b0c10);border:1px solid rgba(255,255,255,.08);}
.status{display:none} 

/* 右侧文案（固定） */
.copy-viewport{position:sticky;top:16vh;align-self:start}
.copy-stack{position:relative;min-height:48vh}
.copy{position:absolute;inset:0;opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.copy.is-active{opacity:1;transform:translateY(0)}
.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
h3.headline{margin:.3em 0 .4em;font-size:clamp(24px,3.6vw,40px);line-height:1.2}
p.body{color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 14px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#081018;font-weight:700}

/* ===== Timeline 容器（分镜滚动区域） ===== */
.timeline{position:relative}
.stage{height:100vh;display:grid;align-items:center}
.stage .sentry{position:absolute;inset:auto 0 0;block-size:1px;}

/* 进度条（可选） */
.progress{position:fixed;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));z-index:60;box-shadow:0 0 12px rgba(102,226,255,.65)}

/* 降级：用户偏好减少动画时，直接显示第一屏 */
@media (prefers-reduced-motion: reduce){
	.screen{transition:none}
	.copy{transition:none}
}
.monitor-stand{position:absolute;left:50%;transform:translateX(-50%);bottom:-48px;width:28px;height:88px;border-radius:14px;background:linear-gradient(180deg,#1b2230,#0c1018);box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06)}
.monitor-base{position:absolute;left:50%;transform:translateX(-50%);bottom:-64px;width:200px;height:16px;border-radius:999px;background:linear-gradient(180deg,#1b2230,#0c1018);box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06)}

@keyframes lightFade{0%{opacity:0}100%{opacity:1}}
/* 减少动画偏好时不播放：Tailwind 会处理 motion-reduce，但这里也给个兜底 */
@media (prefers-reduced-motion: reduce){.motion-safe\:animate-\[lightFade_8s_ease-out_forwards\]{animation:none;opacity:1}}
@keyframes lightFade{0%{opacity:0}100%{opacity:1}}

/* 容器与背景 */
.logo-ticker{overflow:hidden;padding:18px 0;}
/* 渐隐遮罩：两侧边缘柔和消失 */
.logo-ticker .ticker{position:relative;}
.logo-ticker .ticker::before,.logo-ticker .ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;pointer-events:none;z-index:2;}
.logo-ticker .ticker::before{left:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 100%);}
.logo-ticker .ticker::after{right:0;background:linear-gradient(270deg,#000 0%,rgba(0,0,0,0) 100%);}
/* 额外的 mask（支持的浏览器会更丝滑） */
@supports (mask-image: linear-gradient(#000,#000)) {
	.logo-ticker .ticker{mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);}
}

/* 轨道与动效 */
.ticker-track{display:flex;align-items:center;gap:28px;width:max-content;will-change:transform;animation:ticker var(--ticker-duration,40s) linear infinite;}
/* 悬停/聚焦暂停 */
.logo-ticker:hover .ticker-track,.logo-ticker:focus-within .ticker-track{animation-play-state:paused;}
/* 兼容减少动画偏好 */
@media (prefers-reduced-motion: reduce){
	.ticker-track{animation:none;}
}

/* 卡片式 Logo：白底圆角，适配你的“白底源图” */
.ticker-track li{flex:0 0 auto;background:linear-gradient(180deg,#fff 0%,#f7f8fb 100%);border:1px solid rgba(15,17,22,.08);padding:10px 16px;border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.25);}
.ticker-track img{display:block;height:40px;width:auto;image-rendering:auto;filter:contrast(108%) saturate(104%);}
@media (min-width:768px){.ticker-track img{height:48px;}}
@media (min-width:1024px){.ticker-track img{height:56px;}}
@media (min-width:1536px){.ticker-track img{height:64px;}}

/* 同步加大卡片留白与圆角，避免显得拥挤 */
.ticker-track{gap:32px;}
@media (min-width:1024px){.ticker-track{gap:40px;}}
.ticker-track li{padding:12px 18px;border-radius:16px;}
@media (min-width:1024px){.ticker-track li{padding:14px 22px;border-radius:18px;}}

/* 关键帧：位移距离由 JS 设置自定义属性 --ticker-translate */
@keyframes ticker{
	from{transform:translate3d(0,0,0);}
	to{transform:translate3d(var(--ticker-translate,-50%),0,0);}
}

/* 文章正文的行高与段落间距更友好 */
.case-body p{margin:.6rem 0;color:var(--muted)}
.case-body ul{margin:.4rem 0 .8rem 1.2rem;color:var(--muted)}
.case-body li{list-style:disc;margin:.25rem 0}
/* KPI 卡片 */
.kpi-card{border-radius:16px;padding:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#0f1116,#0b0c10)}
.kpi-num{font-size:1.5rem;font-weight:800;letter-spacing:.5px;background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* 章节内标题间距 */
.section-h{font-size:clamp(20px,2.8vw,28px);font-weight:700;margin:1.1rem 0 .6rem}
/* 图文网格 */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}
.gallery .g1{grid-column:span 12}
.gallery .g2{grid-column:span 12}
.gallery .g3{grid-column:span 12}
@media(min-width:768px){.gallery .g2{grid-column:span 6}.gallery .g3{grid-column:span 4}}
.gallery img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
/* 本页侧边目录 TOC */
.toc a{color:var(--muted);display:block;padding:.35rem .6rem;border-radius:10px}
.toc a:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.toc a[aria-current="true"]{color:#081018;background:linear-gradient(90deg,var(--brand),var(--brand-2));font-weight:700}
/* 上下卡片列表（更多案例） */
.more-case-card:hover img{transform:scale(1.02)}
.more-case-card img{transition:transform .35s ease}
.swiper {width: 100%;height: 100%;border-radius: 1rem;}
.swiper-slide {display: flex!important;justify-content: center;align-items: center;;text-align: center;font-size: 18px;overflow: hidden;height: auto!important;max-height: 30rem;}
.swiper-slide img {width: auto;height: 100%;object-fit: cover;display: block;user-select: none;-webkit-user-drag: none;border-radius: 1rem;}
.swiper-pagination-bullet { background: rgba(255,255,255,.6); }
.swiper-pagination-bullet-active { background: #fff; }
.lb{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9)}
.lb.hidden{display:none}
.lb img{max-width:90vw;max-height:90vh;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb-btn{position:absolute;border:none;cursor:pointer;color:#fff;background:rgba(255,255,255,.15);backdrop-filter:blur(2px);padding:10px 14px;border-radius:9999px;font-size:22px;line-height:1}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}