@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --blue:#1A5FFF;--blue2:#2563EB;--cyan:#06B6D4;
  --navy:#1A1F3A;--navy2:#0D1428;
  --text-dk:#111827;--text-md:#374151;--text-gr:#6B7280;
  --border:#E5E7EB;--gray-bg:#F6F8FA;
  --green:#22C55E;--purple:#8B5CF6;--orange:#F59E0B;
}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',-apple-system,sans-serif;background:#fff;color:var(--text-dk);overflow-x:hidden;line-height:1.6}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}

/* ══ NAV — transparent on hero, white on scroll ══ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:64px;
  background:transparent;
  transition:background .3s,backdrop-filter .3s,border-bottom .3s;
  display:flex;align-items:center;padding:0 48px;
}
nav.scrolled{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-in{width:100%;max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-name{font-size:16px;font-weight:700;color:#fff;transition:color .3s}
nav.scrolled .nav-name{color:var(--text-dk)}
.nav-ul{display:flex;align-items:center;gap:48px;list-style:none}
.nav-ul a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s}
nav.scrolled .nav-ul a{color:var(--text-md)}
.nav-ul a:hover{color:#fff}
nav.scrolled .nav-ul a:hover{color:var(--blue)}

/* ══ HERO ══ */
#hero{
  min-height:100vh;
  padding-top:64px;
  position:relative;
  overflow:hidden;
  /* 渐变叠加 + 你的背景图（质感保留） */
  background:
          radial-gradient(ellipse 85% 65% at 55% 38%,rgba(26,95,255,.28) 0%,transparent 68%),
          radial-gradient(ellipse 55% 50% at 12% 82%,rgba(6,40,90,.45) 0%,transparent 62%),
          linear-gradient(165deg,rgba(10,14,28,0.85) 0%,rgba(15,24,56,0.85) 38%,rgba(19,31,72,0.85) 72%,rgba(12,21,48,0.85) 100%),
          url("../img/bj.jpg") no-repeat center center;

  background-size: cover;
  display:flex;
  align-items:center;
}
#hero::after{
  content:'';
  position:absolute;
  right:-150px;
  bottom:-200px;
  width:780px;
  height:780px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(26,95,255,.2) 0%,rgba(12,40,130,.1) 42%,transparent 72%);
  pointer-events:none;
}
.hgrid{
  position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:linear-gradient(rgba(150,190,255,1) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,255,1) 1px,transparent 1px);
  background-size:68px 68px;
}
.hstars{
  position:absolute;inset:0;pointer-events:none;
  background-image:
          radial-gradient(1.5px 1.5px at  7% 11%,rgba(255,255,255,.8) 0%,transparent 100%),
          radial-gradient(1px   1px   at 20%  6%,rgba(255,255,255,.55)0%,transparent 100%),
          radial-gradient(1px   1px   at 37% 17%,rgba(255,255,255,.45)0%,transparent 100%),
          radial-gradient(1.5px 1.5px at 53%  8%,rgba(255,255,255,.7) 0%,transparent 100%),
          radial-gradient(1px   1px   at 70% 21%,rgba(255,255,255,.42)0%,transparent 100%),
          radial-gradient(1px   1px   at 86% 10%,rgba(255,255,255,.55)0%,transparent 100%),
          radial-gradient(1px   1px   at  3% 43%,rgba(255,255,255,.32)0%,transparent 100%),
          radial-gradient(1px   1px   at 46% 49%,rgba(255,255,255,.3) 0%,transparent 100%),
          radial-gradient(1px   1px   at 90% 53%,rgba(255,255,255,.35)0%,transparent 100%),
          radial-gradient(1px   1px   at 16% 75%,rgba(255,255,255,.3) 0%,transparent 100%),
          radial-gradient(1px   1px   at 63% 80%,rgba(255,255,255,.25)0%,transparent 100%),
          radial-gradient(1px   1px   at 31% 61%,rgba(255,255,255,.22)0%,transparent 100%),
          radial-gradient(1px   1px   at 78% 66%,rgba(255,255,255,.2) 0%,transparent 100%);
}
.hero-in{
  position:relative;z-index:1;max-width:1280px;margin:0 auto;width:100%;
  padding:80px 48px 80px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;
}
.hbadge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:6px 16px 6px 11px;
  font-size:13px;color:rgba(255,255,255,.88);font-weight:500;
  margin-bottom:24px;backdrop-filter:blur(8px);
}
.hbadge-ic{width:19px;height:19px;opacity:.82}
.h1-en{font-size:62px;font-weight:900;color:#fff;line-height:1.05;letter-spacing:-.02em;margin-bottom:0}
.h1-cn{font-size:62px;font-weight:900;color:#5EA8FF;line-height:1.05;letter-spacing:-.02em;margin-bottom:24px}
.h-tag{font-size:21px;font-weight:400;color:rgba(255,255,255,.92);margin-bottom:16px}
.h-desc{font-size:14.5px;color:rgba(255,255,255,.48);line-height:1.92;max-width:420px;margin-bottom:38px}
.hbtn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--blue);color:#fff;
  padding:14px 32px;border-radius:11px;font-size:17px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  transition:all .2s;box-shadow:0 4px 24px rgba(26,95,255,.5);
}
.hbtn:hover{background:var(--blue2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(26,95,255,.62)}
.hbtn svg{transition:transform .2s}
.hbtn:hover svg{transform:translateX(4px)}
.htags{display:flex;align-items:center;gap:26px;margin-top:32px}
.htag{display:flex;align-items:center;gap:7px;font-size:13.5px;color:rgba(255,255,255,.48)}
.tdot{width:7px;height:7px;border-radius:50%;background:#3B82F6;animation:tdp 2.6s infinite}
.tdot.t2{animation-delay:.55s}.tdot.t3{animation-delay:1.1s}
@keyframes tdp{0%,100%{opacity:1}50%{opacity:.32}}

/* RIGHT VISUAL */
.hero-r{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:20px}
.done-badge{
  position:absolute;top:-4px;right:0;z-index:10;
  background:#fff;border-radius:13px;padding:11px 15px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 10px 42px rgba(0,0,0,.32);min-width:142px;
}
.done-ring{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:rgba(34,197,94,.11);border:1.5px solid rgba(34,197,94,.42);
  display:flex;align-items:center;justify-content:center;
}
.done-txt .dt{font-size:14px;font-weight:700;color:#111;line-height:1.2}
.done-txt .ds{font-size:11.5px;color:#9CA3AF;line-height:1.2}
.editor{
  width:100%;max-width:520px;
  background:#1B2340;
  border:1px solid rgba(255,255,255,.09);border-radius:15px;overflow:hidden;
  box-shadow:0 32px 88px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.05);
  animation:efloat 5.5s ease-in-out infinite;
}
/* GIF 适配样式 */
.editor-video {
  width: 100%;
  height: auto;       /* 自动高度，不裁剪 */
  object-fit: contain;/* 完整显示 GIF 全部内容 */
  display: block;
  border: none;
}

@keyframes efloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.ebar{
  background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.07);
  padding:12px 17px;display:flex;align-items:center;gap:8px;
}
.dot{width:12px;height:12px;border-radius:50%}
.dr{background:#FF5F57}.dy{background:#FEBC2E}.dg{background:#28C840}
.ebar-title{margin-left:9px;font-size:13px;color:rgba(255,255,255,.36)}
.econtent{padding:20px;display:grid;grid-template-columns:1fr 162px;gap:16px}
.ep-left{
  background:rgba(255,255,255,.052);border:1px solid rgba(255,255,255,.075);
  border-radius:11px;padding:26px 18px;
  display:flex;flex-direction:column;align-items:center;gap:11px;min-height:218px;
}
.cube3d{
  width:64px;height:64px;border-radius:14px;
  background:linear-gradient(135deg,#3B82F6 0%,#06B6D4 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:900;color:#fff;
  box-shadow:0 12px 32px rgba(59,130,246,.48);
}
.ep-lbl{font-size:12.5px;color:rgba(255,255,255,.35)}
.ep-bars{width:100%;display:flex;flex-direction:column;gap:8px}
.epbar{height:5.5px;background:rgba(255,255,255,.075);border-radius:3px;overflow:hidden}
.epbar-f{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue),#3B82F6);animation:epba 3.2s ease-in-out infinite}
.epbar-f.f2{background:linear-gradient(90deg,var(--cyan),#34D399);animation-delay:.7s;width:58%}
@keyframes epba{0%{width:12%}58%{width:90%}100%{width:12%}}
.ep-right{display:flex;flex-direction:column;gap:9px}
.ai-gen-btn{
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue2) 100%);
  border:none;border-radius:9px;color:#fff;
  font-size:13.5px;font-weight:600;padding:12px 11px;cursor:pointer;text-align:center;
  box-shadow:0 5px 16px rgba(26,95,255,.42);
}
.sr{background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.065);border-radius:8px;height:34px}
.sr.s2{opacity:.48}.sr.s3{opacity:.26}
.pub-btn{
  margin-top:auto;
  background:linear-gradient(135deg,#1A5FFF 0%,#06B6D4 100%);
  border:none;border-radius:9px;color:#fff;
  font-size:14px;font-weight:700;padding:13px 11px;cursor:pointer;text-align:center;
  box-shadow:0 5px 18px rgba(26,95,255,.45);transition:opacity .2s;
}
.pub-btn:hover{opacity:.88}

/* ══ SECTION COMMON ══ */
.swrap{max-width:1280px;margin:0 auto;padding:88px 48px}
.shead{text-align:center;margin-bottom:58px}
.stitle{font-size:38px;font-weight:900;letter-spacing:-.01em;line-height:1.2;color:var(--text-dk);margin-bottom:14px}
.ssub{font-size:15.5px;color:var(--text-gr);line-height:1.7}

/* ══ FEATURES ══ */
#features{background:var(--gray-bg)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fc{
  background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:18px;
  padding:32px 28px 30px;position:relative;overflow:hidden;
  transition:box-shadow .22s,transform .22s;cursor:default;
}
.fc:hover{box-shadow:0 10px 40px rgba(0,0,0,.1);transform:translateY(-3px)}
.fic{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:24px}
.ib{background:#EFF4FF}.ic2{background:#ECFEFF}.ip{background:#F5F3FF}
.ig{background:#F0FDF4}.iy{background:#FFFBEB}.ipk{background:#FDF2F8}
.ftit{font-size:17px;font-weight:700;color:var(--text-dk);margin-bottom:8px}
.fdesc{font-size:14px;color:var(--text-gr);line-height:1.75}
.ctag{
  position:absolute;top:0;right:0;
  background:var(--blue);color:#fff;
  font-size:10.5px;font-weight:800;padding:4px 10px 4px 11px;
  letter-spacing:.05em;
  border-radius:0 18px 0 10px;
}

/* ══ HOW ══ */
#how{background:#0D1428;position:relative;overflow:hidden}
#how::before{
  content:'';position:absolute;top:-90px;left:50%;transform:translateX(-50%);
  width:740px;height:320px;
  background:radial-gradient(ellipse,rgba(26,95,255,.11) 0%,transparent 72%);
  pointer-events:none;
}
#how .stitle{color:#fff}
#how .ssub{color:rgba(255,255,255,.46)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
/*.steps-grid::before,.steps-grid::after{*/
/*  content:'';position:absolute;top:46px;z-index:2;*/
/*  width:calc(33.33% - 68px);*/
/*  border-top:1.5px dashed rgba(255,255,255,.15);*/
/*}*/
.steps-grid::before{left:calc(33.33% + 34px)}
.steps-grid::after{left:calc(66.66% + 34px)}
.sc{
  background:rgba(255,255,255,.038);border:1px solid rgba(255,255,255,.075);
  border-radius:18px;padding:30px 26px 34px;margin:0 10px;
  transition:border-color .2s,transform .2s;
}
.sc:hover{border-color:rgba(26,95,255,.38);transform:translateY(-4px)}
.sc-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.scn{font-size:40px;font-weight:900;color:rgba(255,255,255,.1);line-height:1}
.sic{
  width:56px;height:56px;border-radius:15px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.si1{background:linear-gradient(135deg,#1A5FFF,#2563EB)}
.si2{background:linear-gradient(135deg,#06B6D4,#0891B2)}
.si3{background:linear-gradient(135deg,#8B5CF6,#7C3AED)}
.sc-t{font-size:23px;font-weight:800;color:#fff;margin-bottom:7px}
.sc-h{font-size:13.5px;color:#60A5FA;font-weight:500;margin-bottom:16px}
.sc-b{font-size:14px;color:rgba(255,255,255,.46);line-height:1.85}
/* ══ HOW 步骤卡片交互 ══ */
#how .sc{
  background:rgba(255,255,255,.038);border:1px solid rgba(255,255,255,.075);
  border-radius:18px;padding:30px 26px 34px;margin:0 10px;
  transition:all .3s ease; /* 统一过渡动画 */
  position:relative;
  overflow:hidden;
}
/* 鼠标移入效果 */
#how .sc:hover{
  border-color:rgba(26,95,255,.5); /* 边框高亮 */
  transform:translateY(-6px); /* 上移 */
  box-shadow:0 16px 40px rgba(26,95,255,.15); /* 阴影增强 */
  background:linear-gradient(135deg, rgba(26,95,255,.08) 0%, rgba(6,182,212,.05) 100%); /* 渐变背景 */
}
/* 可选：移入时文字提亮 */
#how .sc:hover .sc-b{
  color:rgba(255,255,255,.65);
}
/* 可选：添加装饰光效（非必需） */
#how .sc::after{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:linear-gradient(
          to right,
          transparent,
          rgba(255,255,255,.05),
          transparent
  );
  transform:rotate(45deg);
  transition:all .6s ease;
  pointer-events:none;
  opacity:0;
}
#how .sc:hover::after{
  opacity:1;
  animation:shine 1.5s ease;
}
@keyframes shine {
  0% {transform:rotate(45deg) translateX(-100%);}
  100% {transform:rotate(45deg) translateX(100%);}
}

/* ══ USE CASES (适用场景) 统一默认 & 悬浮样式 ══ */
#usecases{background:var(--gray-bg)}
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uc{
  background:#fff;border:1px solid rgba(0,0,0,0.05);border-radius:18px;
  padding:28px 26px 30px;position:relative;overflow:hidden;
  transition:all .3s ease;cursor:default;
}
.uc .uic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.ut{font-size:18px;font-weight:700;color:var(--text-dk);margin-bottom:9px}
.ud{font-size:13.5px;color:var(--text-gr);line-height:1.8}
.uc:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px -12px rgba(0,0,0,0.2);
  border-color:rgba(26,95,255,0.25);
}

/* ══ DOWNLOAD ══ */
#download{background:#0B1120;position:relative;overflow:hidden}
#download::before{
  content:'';position:absolute;bottom:-110px;left:50%;transform:translateX(-50%);
  width:840px;height:420px;
  background:radial-gradient(ellipse at bottom,rgba(26,95,255,.13) 0%,transparent 72%);
  pointer-events:none;
}
#download .stitle{color:#fff}
#download .ssub{color:rgba(255,255,255,.46)}
.dl-chips{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.dlchip{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.11);
  border-radius:9px;padding:10px 20px;
  font-size:14px;color:rgba(255,255,255,.7);font-weight:500;
}
.chkring{
  width:19px;height:19px;border-radius:50%;flex-shrink:0;
  background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.38);
  display:flex;align-items:center;justify-content:center;
}
.dl-btn{
  display:inline-flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,#1A5FFF 0%,#2563EB 100%);
  color:#fff;text-decoration:none;border:none;cursor:pointer;
  padding:17px 44px;border-radius:13px;
  font-size:17px;font-weight:700;
  box-shadow:0 7px 32px rgba(26,95,255,.52);transition:all .22s;
}
.dl-btn:hover{background:linear-gradient(135deg,#2563EB,#1A5FFF);transform:translateY(-2px);box-shadow:0 12px 40px rgba(26,95,255,.62)}

/* ══ FOOTER - 移除右侧秒悟，只保留版权居中 ══ */
footer{
  background:#060B15;border-top:1px solid rgba(255,255,255,.055);
  padding:26px 48px;display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.fcopy{font-size:13.5px;color:rgba(255,255,255,.35);letter-spacing:0.3px;}

/* ══ REVEAL ══ */
.rev{opacity:0;transform:translateY(24px);transition:opacity .52s ease,transform .52s ease}
.rev.in{opacity:1;transform:translateY(0)}
.rev:nth-child(2){transition-delay:.09s}.rev:nth-child(3){transition-delay:.18s}
.rev:nth-child(4){transition-delay:.27s}.rev:nth-child(5){transition-delay:.36s}
.rev:nth-child(6){transition-delay:.45s}