/* ============================================
   云来AI · YunlaiAI — 赛博朋克落地页
   配色取自品牌 logo：深空蓝 #04070f / 电光青 #22d3ee / 品红 #d946ef / 紫 #8b5cf6
   ============================================ */
:root{
  --bg:#04070f;
  --bg-2:#070c18;
  --panel:rgba(13,20,38,.72);
  --panel-2:rgba(10,16,32,.55);
  --line:rgba(94,140,255,.14);
  --line-strong:rgba(94,200,255,.35);
  --txt:#eaf2ff;
  --txt-2:#93a4c8;
  --txt-3:#5d6f96;
  --cyan:#22d3ee;
  --blue:#3b82f6;
  --magenta:#d946ef;
  --violet:#8b5cf6;
  --grad:linear-gradient(92deg,#22d3ee 0%,#60a5fa 45%,#d946ef 100%);
  --grad-soft:linear-gradient(92deg,rgba(34,211,238,.18),rgba(217,70,239,.18));
  --radius:18px;
  --header-h:68px;
  --font:"Inter","SF Pro Display","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:16px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(34,211,238,.35);color:#fff}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
.container{width:min(1200px,calc(100% - 40px));margin-inline:auto}

/* ---------- 背景层 ---------- */
.bg-grid{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:
    linear-gradient(rgba(80,140,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,140,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 75%);
}
.bg-glow{position:fixed;z-index:-2;pointer-events:none;filter:blur(110px);opacity:.5}
.bg-glow-1{width:52vw;height:42vw;top:-14vw;left:-10vw;background:radial-gradient(closest-side,rgba(37,99,235,.4),transparent)}
.bg-glow-2{width:46vw;height:40vw;top:6vh;right:-14vw;background:radial-gradient(closest-side,rgba(168,46,219,.32),transparent)}
.bg-scanline{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(6,10,22,.35) 3px 4px);
  mix-blend-mode:overlay;
}

/* ---------- 通用 ---------- */
.grad-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-kicker{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:14px;font-weight:600;
}
.section-title{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;line-height:1.22;letter-spacing:-.01em}
.section-sub{color:var(--txt-2);margin-top:14px;max-width:640px;font-size:.98rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 22px;border-radius:999px;font-size:.92rem;font-weight:600;
  transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative;
}
.btn-primary{
  background:var(--grad);color:#04070f;
  box-shadow:0 0 24px rgba(34,211,238,.35),0 4px 18px rgba(139,92,246,.25);
  animation:cta-breathe 3.2s ease-in-out infinite;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(34,211,238,.55),0 8px 26px rgba(139,92,246,.35);animation-play-state:paused}
@keyframes cta-breathe{
  0%,100%{box-shadow:0 0 22px rgba(34,211,238,.32),0 4px 18px rgba(139,92,246,.22)}
  50%{box-shadow:0 0 40px rgba(34,211,238,.55),0 4px 26px rgba(217,70,239,.4)}
}
/* 品牌字体：MiSans Heavy 子集（仅"云来AI"4字，840B，本地自托管） */
@font-face{
  font-family:'MiSansHeavy';
  src:url('/assets/fonts/brand-misans-heavy.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}
/* 品牌区 = 图标 + "云来AI" 霓虹渐变文字（矢量级锐利，任意尺寸不糊）
   入场动画：整体从银灰金属色绽放为霓虹色（保留 Owen 要的渐变效果） */
.brand-mark,.footer-mark{
  display:inline-flex;align-items:center;gap:10px;
  filter:grayscale(1) brightness(1.55) contrast(.85);
  animation:logo-bloom 1.85s cubic-bezier(.25,.6,.3,1) .3s forwards;
}
@keyframes logo-bloom{
  0%,22%{filter:grayscale(1) brightness(1.62) contrast(.8);opacity:.55}
  62%{filter:grayscale(.28) brightness(1.22) contrast(.92) drop-shadow(0 0 5px rgba(34,211,238,.22));opacity:.9}
  100%{filter:grayscale(0) brightness(1.05) drop-shadow(0 0 13px rgba(34,211,238,.5));opacity:1}
}
.brand-icon{height:38px;width:auto;flex-shrink:0}
.brand-text{
  font-family:'MiSansHeavy','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:1.45rem;font-weight:900;letter-spacing:.045em;line-height:1;
  /* 六段渐变：青→天蓝→蓝→紫→粉紫→粉，过渡丝滑无色阶，呼应图标的蓝紫粉光谱 */
  background:linear-gradient(96deg,#2ee6ff 0%,#38bdf8 20%,#60a5fa 40%,#a78bfa 62%,#e879f9 82%,#f472b6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.brand-text-lg{font-size:1.75rem}
.brand:hover .brand-mark{filter:grayscale(0) brightness(1.1) drop-shadow(0 0 18px rgba(34,211,238,.65))}
.brand-mark{transition:filter .3s}
.footer-mark{margin-bottom:16px}
@media (prefers-reduced-motion:reduce){
  .brand-mark,.footer-mark{animation:none;filter:drop-shadow(0 0 10px rgba(34,211,238,.35));opacity:1}
}
.btn-ghost{border:1px solid var(--line-strong);color:var(--txt);background:rgba(13,20,38,.4);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(34,211,238,.25)}
.btn-lg{padding:15px 40px;font-size:1.02rem}
.btn-block{width:100%}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- 顶栏 ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(4,7,15,.82);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:20px}
.main-nav{display:flex;gap:28px}
.main-nav a{font-size:.92rem;color:var(--txt-2);font-weight:500;transition:color .2s;position:relative}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--grad);transition:width .25s;border-radius:2px}
.main-nav a:hover{color:var(--txt)}
.main-nav a:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:12px}
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--txt-2);font-size:.82rem;font-weight:600;
  transition:all .2s;background:rgba(13,20,38,.4);
}
.lang-switch:hover{color:var(--cyan);border-color:var(--line-strong)}
.header-actions .btn{padding:8px 20px;font-size:.88rem}
.menu-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.menu-toggle span{width:22px;height:2px;background:var(--txt);border-radius:2px;transition:.3s}
.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)}
.mobile-menu{
  display:none;flex-direction:column;gap:2px;padding:14px 20px 22px;
  background:rgba(4,7,15,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 4px;color:var(--txt-2);font-size:.98rem;border-bottom:1px solid rgba(94,140,255,.07)}
.mobile-menu-btns{display:flex;gap:10px;margin-top:14px}
.mobile-menu-btns .btn{flex:1}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--header-h) + 46px) 0 60px;overflow:hidden}
.hero-video-wrap{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-video-wrap video{width:100%;height:100%;object-fit:cover;opacity:.4;animation:hero-drift 24s ease-in-out infinite alternate}
@keyframes hero-drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,1%)}}
/* 漂浮粒子 */
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

/* 祥云飘过（中式云纹多层视差，含蓄大气） */
.clouds-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cloud{
  position:absolute;opacity:0;
  background:url('/assets/img/xiangyun.svg') no-repeat center/contain;
  filter:drop-shadow(0 0 8px rgba(34,211,238,.35));
  animation:cloud-drift linear infinite;
  will-change:transform,opacity;
}
@keyframes cloud-drift{
  0%{transform:translateX(-30vw) translateY(0);opacity:0}
  6%{opacity:var(--cloud-op,.14)}
  50%{transform:translateX(50vw) translateY(calc(var(--cloud-dy,-14px)))}
  94%{opacity:var(--cloud-op,.14)}
  100%{transform:translateX(130vw) translateY(0);opacity:0}
}
@media (max-width:760px){
  /* 手机端祥云降载：只留 3 朵且更淡 */
  .cloud:nth-child(n+4){display:none}
  .cloud{filter:drop-shadow(0 0 6px rgba(34,211,238,.25))}
}
.particles i{
  position:absolute;width:2px;height:2px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 6px rgba(34,211,238,.9);opacity:0;animation:float-up linear infinite;
}
.particles i:nth-child(2n){background:var(--magenta);box-shadow:0 0 6px rgba(217,70,239,.9)}
.particles i:nth-child(3n){width:3px;height:3px}
@keyframes float-up{
  0%{transform:translateY(105vh) scale(.6);opacity:0}
  8%{opacity:.85}
  92%{opacity:.5}
  100%{transform:translateY(-6vh) scale(1.1);opacity:0}
}
.hero-video-mask{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%,transparent 0%,rgba(4,7,15,.55) 60%,var(--bg) 100%),
    linear-gradient(180deg,rgba(4,7,15,.5) 0%,transparent 30%,transparent 60%,var(--bg) 100%);
}
.hero-content{text-align:center;position:relative}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;
  border:1px solid var(--line-strong);background:rgba(10,16,32,.6);backdrop-filter:blur(10px);
  font-size:.82rem;color:var(--txt-2);margin-bottom:26px;
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.hero-title{
  font-size:clamp(2.3rem,6.2vw,4.4rem);font-weight:900;line-height:1.12;letter-spacing:-.02em;
  text-shadow:0 0 60px rgba(59,130,246,.35);
}
.hero-sub{color:var(--txt-2);max-width:620px;margin:20px auto 0;font-size:clamp(.92rem,1.6vw,1.06rem)}

/* 控制台 */
.console{
  margin:34px auto 0;max-width:760px;text-align:left;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:16px;backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 24px 70px rgba(2,6,18,.65),0 0 0 1px rgba(34,211,238,.06),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;
}
.console::before{
  content:"";position:absolute;inset:-1px;border-radius:calc(var(--radius) + 1px);padding:1px;
  background:linear-gradient(135deg,rgba(34,211,238,.5),transparent 40%,transparent 60%,rgba(217,70,239,.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.console-row{display:flex;gap:10px;align-items:center}
.console-upload{
  display:flex;align-items:center;gap:8px;padding:13px 16px;border-radius:12px;flex-shrink:0;
  border:1px dashed var(--line-strong);color:var(--txt-2);font-size:.86rem;transition:all .2s;
}
.console-upload:hover{color:var(--cyan);border-color:var(--cyan);background:rgba(34,211,238,.05)}
.console-input{
  flex:1;background:transparent;border:none;outline:none;color:var(--txt);
  font-size:.95rem;padding:13px 6px;min-width:0;
}
.console-input::placeholder{color:var(--txt-3)}
.console-controls{margin-top:12px;flex-wrap:wrap}
.chip{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(7,12,26,.6);color:var(--txt-2);font-size:.8rem;font-weight:500;transition:all .2s;
  display:inline-flex;align-items:center;gap:7px;
}
.chip:hover{border-color:var(--line-strong);color:var(--txt)}
.chip-switch{cursor:pointer}
.switch-track{width:30px;height:17px;border-radius:999px;background:var(--grad);position:relative;display:inline-block;flex-shrink:0}
.switch-thumb{position:absolute;top:2px;left:15px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .2s}
.console-cta{margin-left:auto;padding:11px 30px}

/* 跑马灯 */
.marquee-section{margin-top:46px}
.marquee-hint{font-size:.8rem;color:var(--txt-3);letter-spacing:.06em;margin-bottom:18px;text-transform:uppercase}
.marquee{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-card{
  width:118px;height:209px;border-radius:14px;overflow:hidden;position:relative;flex-shrink:0;
  border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s;cursor:pointer;
}
.mq-card:hover{transform:translateY(-6px) scale(1.03);border-color:var(--line-strong);box-shadow:0 14px 40px rgba(34,211,238,.2)}
.mq-card video{width:100%;height:100%;object-fit:cover}
.mq-card .mq-label{
  position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;font-size:.72rem;font-weight:600;
  background:linear-gradient(transparent,rgba(2,5,14,.9));color:#fff;text-align:center;
}

/* ---------- 平台条 ---------- */
.platforms-strip{border-block:1px solid var(--line);background:rgba(7,12,26,.5);padding:26px 0}
.strip-label{text-align:center;font-size:.78rem;color:var(--txt-3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.strip-logos{display:flex;justify-content:center;align-items:center;gap:clamp(18px,4vw,46px);flex-wrap:wrap}
.pf{display:flex;align-items:center;gap:8px;color:var(--txt-2);font-size:.88rem;font-weight:600;opacity:.75;transition:opacity .2s,color .2s}
.pf:hover{opacity:1;color:var(--txt)}
.pf svg{width:20px;height:20px}

/* ---------- 模板区 ---------- */
.templates{padding:96px 0}
.templates .section-title,.templates .section-sub,.templates .section-kicker{text-align:center}
.templates .section-sub{margin-inline:auto}
.tpl-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:38px 0 30px;flex-wrap:wrap}
.tpl-search{
  display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--txt-3);min-width:230px;
  transition:border-color .2s;
}
.tpl-search:focus-within{border-color:var(--line-strong)}
.tpl-search input{background:none;border:none;outline:none;color:var(--txt);font-size:.88rem;width:100%}
.tpl-filters{display:flex;gap:8px;flex-wrap:wrap}
.tpl-filter{
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:.82rem;
  color:var(--txt-2);transition:all .2s;background:var(--panel-2);
}
.tpl-filter:hover{color:var(--txt);border-color:var(--line-strong)}
.tpl-filter.active{background:var(--grad);color:#04070f;border-color:transparent;font-weight:700;box-shadow:0 0 18px rgba(34,211,238,.3)}
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tpl-card{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--panel-2);aspect-ratio:9/13.2;cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.6,.2,1),border-color .3s,box-shadow .35s;
}
.tpl-card:hover{transform:translateY(-7px);border-color:var(--line-strong);box-shadow:0 20px 56px rgba(2,6,18,.7),0 0 30px rgba(34,211,238,.14)}
.tpl-card video{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tpl-card:hover video{transform:scale(1.05)}
.tpl-card.hidden{display:none}
.tpl-info{
  position:absolute;inset:auto 0 0 0;padding:54px 18px 16px;text-align:left;
  background:linear-gradient(transparent,rgba(2,5,14,.92) 55%);
}
.tpl-cat{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:700}
.tpl-name{font-size:1.06rem;font-weight:800;margin-top:3px;letter-spacing:.01em}
.tpl-name-en{font-size:.74rem;color:var(--txt-3);margin-top:1px}
.tpl-use{
  position:absolute;top:14px;right:14px;padding:8px 16px;border-radius:999px;font-size:.78rem;font-weight:700;
  background:var(--grad);color:#04070f;opacity:0;transform:translateY(-6px);transition:all .3s;
  box-shadow:0 4px 18px rgba(34,211,238,.4);
}
.tpl-card:hover .tpl-use{opacity:1;transform:none}
.tpl-badge{
  position:absolute;top:14px;left:14px;padding:5px 11px;border-radius:999px;font-size:.68rem;font-weight:700;
  background:rgba(4,7,15,.7);backdrop-filter:blur(8px);border:1px solid var(--line-strong);color:var(--cyan);
}

.tpl-card.flash{animation:tpl-flash 1.5s ease}
@keyframes tpl-flash{0%,100%{box-shadow:0 0 0 rgba(34,211,238,0)}30%{box-shadow:0 0 0 3px var(--cyan),0 0 44px rgba(34,211,238,.5)}}

/* 家具主打大卡（醒目位） */
.spot-card{
  display:block;position:relative;border-radius:22px;overflow:hidden;margin-bottom:22px;
  aspect-ratio:16/6.4;border:1px solid var(--line-strong);
  transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s,border-color .3s;
  background:var(--panel-2);
}
.spot-card:hover{transform:translateY(-5px);box-shadow:0 24px 70px rgba(2,6,18,.75),0 0 44px rgba(34,211,238,.18)}
.spot-card video{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.spot-card:hover video{transform:scale(1.04)}
.spot-mask{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,6,14,.92) 0%,rgba(3,6,14,.72) 34%,rgba(3,6,14,.12) 68%,transparent 100%);
}
.spot-content{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(20px,4vw,52px);max-width:56%}
.spot-flag{
  width:fit-content;padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.08em;
  background:var(--grad);color:#04070f;box-shadow:0 0 20px rgba(34,211,238,.45);
}
.spot-name{font-size:clamp(1.4rem,3.2vw,2.3rem);font-weight:900;letter-spacing:-.01em;line-height:1.15}
.spot-desc{color:var(--txt-2);font-size:clamp(.82rem,1.4vw,.98rem);line-height:1.6;max-width:430px}
.spot-cta{width:fit-content;padding:11px 26px;margin-top:6px}
.spot-corner{position:absolute;width:34px;height:34px;pointer-events:none}
.spot-corner-tl{top:12px;left:12px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);border-radius:6px 0 0 0;opacity:.75}
.spot-corner-br{bottom:12px;right:12px;border-bottom:2px solid var(--magenta);border-right:2px solid var(--magenta);border-radius:0 0 6px 0;opacity:.75}
@media (max-width:760px){
  .spot-card{aspect-ratio:4/4.6}
  .spot-mask{background:linear-gradient(180deg,rgba(3,6,14,.1) 0%,rgba(3,6,14,.5) 45%,rgba(3,6,14,.94) 100%)}
  .spot-content{max-width:100%;top:auto;bottom:0;justify-content:flex-end;gap:8px;padding:20px}
  .spot-desc{display:none}
}

/* ---------- 三步 ---------- */
.howto{padding:96px 0;border-top:1px solid var(--line);background:rgba(7,12,26,.35)}
.howto .section-kicker,.howto .section-title{text-align:center}
.howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.howto-card{
  padding:34px 28px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(12px);position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.howto-card:hover{border-color:var(--line-strong);transform:translateY(-5px)}
.howto-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.7;
}
.howto-num{
  font-size:2.6rem;font-weight:900;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.85;margin-bottom:18px;letter-spacing:-.02em;
}
.howto-card h3{font-size:1.15rem;font-weight:800;margin-bottom:10px}
.howto-card p{color:var(--txt-2);font-size:.9rem}

/* ---------- 数据带 ---------- */
.stats-band{padding:56px 0;border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(34,211,238,.04),rgba(217,70,239,.04))}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat-num{font-size:clamp(2rem,4vw,2.9rem);font-weight:900;letter-spacing:-.02em}
.stat-label{color:var(--txt-2);font-size:.86rem;margin-top:6px}

/* ---------- 定价 ---------- */
.pricing{padding:96px 0}
.pricing .section-kicker,.pricing .section-title{text-align:center}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;align-items:stretch}
.price-card{
  padding:34px 28px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(12px);display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s;position:relative;
}
.price-card:hover{border-color:var(--line-strong);transform:translateY(-5px)}
.price-featured{border-color:transparent;background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;box-shadow:0 0 44px rgba(34,211,238,.16)}
.price-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:5px 16px;border-radius:999px;
  background:var(--grad);color:#04070f;font-size:.72rem;font-weight:800;letter-spacing:.05em;white-space:nowrap;
}
.price-card h3{font-size:1.05rem;font-weight:700;color:var(--txt-2)}
.price-line{display:flex;align-items:baseline;gap:3px;margin:16px 0 22px}
.price-cur{font-size:1.1rem;font-weight:700;color:var(--txt-2)}
.price-num{font-size:2.9rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.price-per{color:var(--txt-3);font-size:.88rem}
.price-list{list-style:none;margin-bottom:28px;flex:1;display:flex;flex-direction:column;gap:11px}
.price-list li{position:relative;padding-left:26px;color:var(--txt-2);font-size:.9rem}
.price-list li::before{
  content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
  background:var(--grad-soft);border:1px solid rgba(34,211,238,.5);
}
.price-list li::after{content:"✓";position:absolute;left:3.5px;top:2.5px;font-size:.6rem;color:var(--cyan);font-weight:900}

/* ---------- FAQ ---------- */
.faq{padding:96px 0;border-top:1px solid var(--line);background:rgba(7,12,26,.35)}
.faq .section-kicker,.faq .section-title{text-align:center}
.faq-list{max-width:780px;margin:48px auto 0;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--panel-2);overflow:hidden;transition:border-color .25s}
.faq-item.open{border-color:var(--line-strong)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:19px 22px;font-size:.98rem;font-weight:600;text-align:left;color:var(--txt);
}
.faq-q .faq-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:.9rem;transition:transform .3s}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 22px 20px;color:var(--txt-2);font-size:.9rem}

/* ---------- CTA ---------- */
.final-cta{padding:110px 0;text-align:center;position:relative;overflow:hidden}
.final-cta::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(900px,90vw);height:420px;border-radius:50%;filter:blur(120px);opacity:.35;
  background:radial-gradient(closest-side,rgba(34,211,238,.5),rgba(139,92,246,.3),transparent);
  z-index:-1;
}
.cta-title{font-size:clamp(1.7rem,4vw,2.7rem);font-weight:900;line-height:1.25;letter-spacing:-.01em}
.cta-sub{color:var(--txt-2);margin:18px 0 32px}

/* ---------- 页脚 ---------- */
.site-footer{border-top:1px solid var(--line);background:rgba(3,5,12,.8);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
.footer-brand p{color:var(--txt-2);font-size:.88rem;max-width:300px;margin-bottom:22px}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col-title{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);font-weight:700;margin-bottom:6px}
.footer-col a{color:var(--txt-2);font-size:.9rem;transition:color .2s;width:fit-content}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid var(--line);color:var(--txt-3);font-size:.82rem;
}

/* ---------- 响应式 ---------- */
@media (max-width:1020px){
  .tpl-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .main-nav{display:none}
  .header-actions .btn{display:none}
  .menu-toggle{display:flex}
  .howto-grid,.price-grid{grid-template-columns:1fr}
  .price-featured{order:-1}
  .console-row{flex-wrap:wrap}
  .console-upload{width:100%}
  .console-cta{margin-left:0;width:100%}
  .console-controls{gap:8px}
  .chip{font-size:.74rem;padding:7px 11px}
}
@media (max-width:560px){
  .tpl-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .tpl-info{padding:36px 12px 12px}
  .tpl-name{font-size:.88rem}
  .tpl-use{display:none}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding-top:calc(var(--header-h) + 30px)}
  .mq-card{width:96px;height:170px}
  .templates,.howto,.pricing,.faq{padding:64px 0}
}

/* 降低动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ========== 移动端/微信降载（iOS Safari + Chrome Mobile + WeChat X5 卡顿治理）
   手法：1) 砍掉全屏 blur/mix-blend 合成层 2) 粒子/祥云减量 3) hover 特效归零
   4) 视频防 X5 劫持属性由 HTML 注入 5) backdrop-filter 大面积替换为半透明纯色 */
.is-mobile .bg-scanline{display:none}                    /* 全屏 overlay 混合层：iOS 每帧重合成，砍 */
.is-mobile .particles i{animation:none;opacity:.4}      /* 26 个动画粒子：静止化 */
.is-mobile .clouds-layer{opacity:.55}                    /* 祥云减半：只留大朵视觉在 */
.is-mobile .cloud:nth-child(n+4){display:none}
.is-mobile .hero-video-wrap video{animation:none;transform:scale(1.05)}  /* hero Ken-Burns 停，只留视频本身 */
.is-mobile .site-header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
.is-mobile .console{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,13,28,.94)}
.is-mobile .hero-badge{backdrop-filter:none;-webkit-backdrop-filter:none}
.is-mobile .btn-ghost{backdrop-filter:none;-webkit-backdrop-filter:none}
.is-mobile .howto-card,.is-mobile .price-card,.is-mobile .auth-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,16,32,.92)}
.is-mobile .bg-glow{filter:blur(70px);opacity:.4}         /* 110px 巨型blur减半 */
.is-mobile .spot-card video,.is-mobile .tpl-card video{transition:none}
.is-mobile .marquee-track{animation-duration:70s}         /* 跑马灯减速省重绘 */
.is-mobile .tpl-card:hover video{transform:none}
.is-mobile .reveal{will-change:auto}

/* 微信/QX5：视频解码弱 → 全页零视频流，保留画面（poster 帧）不黑卡 */
.is-weixin .marquee .mq-card video{animation:none}
.is-weixin .particles{display:none}
.is-weixin .clouds-layer{display:none}
.is-weixin .hero-video-wrap video{display:none}   /* hero 退化为 poster 图 */
.is-weixin .hero-video-wrap{background:url('/assets/videos/hero_poster.jpg') center/cover no-repeat}
.is-mobile .tpl-badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,7,15,.88)}

/* 手机端菜单内按钮文字修复：.mobile-menu a 灰字压过了主按钮近黑字，高优先级还原 */
.mobile-menu-btns .btn-primary{color:#04070f}