:root {
  --bg:#060816;
  --bg-2:#0b1230;
  --bg-3:#141a3f;
  --pink:#ff5cc8;
  --pink-2:#ff96de;
  --cyan:#64f6ff;
  --violet:#9b83ff;
  --text:#f4f7ff;
  --muted:#a7b4df;
  --line:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.08);
  --radius:18px;
  --glow-cyan:0 0 24px rgba(100,246,255,.45);
  --glow-pink:0 0 24px rgba(255,92,200,.42);
  --shadow:0 20px 45px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(255,92,200,.22), transparent 56%),
    radial-gradient(900px 600px at 100% 0%, rgba(100,246,255,.2), transparent 50%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 45%, var(--bg-3));
  overflow-x:hidden;
}

body.no-scrollbar{
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body.no-scrollbar::-webkit-scrollbar{ width:0; height:0; display:none; }

.cursor{
  position:fixed;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid rgba(232,244,255,.9);
  background:rgba(100,246,255,.08);
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:width .16s ease,height .16s ease,border-color .16s ease,background-color .16s ease;
}
.cursor::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(100,246,255,.9), rgba(100,246,255,.2) 68%, transparent 72%);
}
.cursor.grow{
  width:28px;
  height:28px;
  border-color:rgba(255,92,200,.9);
  background:rgba(255,92,200,.08);
}

.cursor-active,
.cursor-active a,
.cursor-active button,
.cursor-active .btn,
.cursor-active .tab-btn,
.cursor-active .panel,
.cursor-active [role="button"],
.cursor-active input,
.cursor-active textarea,
.cursor-active select,
.cursor-active label{
  cursor:none !important;
}
.noise::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:3;
  opacity:.12;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
}

#starfield{ position:fixed; inset:0; width:100%; height:100%; z-index:-2; opacity:.78; }

.topbar{
  position: fixed; inset:0 0 auto 0; height:68px;
  display:flex; justify-content:center; z-index:10;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(6,8,22,.86), rgba(6,8,22,.35));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{ width:min(1200px,94vw); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ font-size:24px; font-weight:900; letter-spacing:.5px; }
.brand .a{ color:var(--pink); text-shadow:var(--glow-pink); }
.brand .b{ color:var(--cyan); text-shadow:var(--glow-cyan); }

.nav{ display:flex; gap:16px; align-items:center; color:#d9e4ff; font-size:13px; margin-left:auto; }
.nav a{ color:inherit; text-decoration:none; opacity:.85; transition:.2s ease; border-bottom:1px solid transparent; padding:4px 6px; border-radius:8px; position:relative; }
.nav a:hover{ opacity:1; border-color:var(--cyan); }
.nav a.active{
  opacity:1;
  border-color:rgba(100,246,255,.72);
  background:
    linear-gradient(90deg, rgba(255,92,200,.15), rgba(255,92,200,.95), rgba(100,246,255,.95), rgba(100,246,255,.15)) 0 calc(100% + 3px) / 220% 2px no-repeat,
    linear-gradient(135deg, rgba(255,92,200,.18), rgba(100,246,255,.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 0 16px rgba(100,246,255,.18);
  overflow:visible;
  isolation:isolate;
  animation:navGlowBg 1.8s linear infinite;
}
.nav a.active::before,
.nav a.active::after{
  content:"";
  position:absolute;
  top:-10px;
  width:16px;
  height:12px;
  clip-path:polygon(50% 0, 6% 100%, 94% 100%);
  background:linear-gradient(160deg, rgba(255,92,200,.9), rgba(100,246,255,.9));
  -webkit-mask:linear-gradient(to bottom, #000 0 58%, transparent 58%);
  mask:linear-gradient(to bottom, #000 0 58%, transparent 58%);
  box-shadow:0 0 7px rgba(255,92,200,.24), 0 0 7px rgba(100,246,255,.2);
  pointer-events:none;
  z-index:-1;
  opacity:.92;
}
.nav a.active::before{ left:1px; transform:rotate(-10deg); }
.nav a.active::after{ right:1px; transform:rotate(10deg); }
@keyframes navGlowBg{ to{ background-position:200% calc(100% + 3px), 0 0; } }

.container{ width:min(1200px,92vw); margin:0 auto; }
.hero{
  min-height:100vh; display:grid; grid-template-columns:1.08fr .92fr; gap:22px; align-items:center;
  padding-top:88px; position:relative;
}
.glow-line{ position:absolute; left:0; right:0; top:18%; height:1px; background:linear-gradient(90deg,transparent,rgba(100,246,255,.5),rgba(255,92,200,.55),transparent); filter:blur(.4px); }

.eyebrow{ font-size:12px; letter-spacing:1.4px; color:var(--pink-2); margin-bottom:12px; font-weight:700; }
h1{ margin:0; font-size:clamp(40px,6.2vw,80px); line-height:.98; letter-spacing:.5px; text-wrap:balance; }
h1 .neon{ color:var(--cyan); text-shadow:var(--glow-cyan); }
.lead{ margin:18px 0 0; color:var(--muted); line-height:1.9; font-size:16px; max-width:63ch; }

.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.btn{
  border:1px solid rgba(255,255,255,.2);
  border-radius:13px;
  padding:12px 18px;
  min-height:48px;
  line-height:1.1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    linear-gradient(120deg, rgba(255,92,200,.14), rgba(100,246,255,.12));
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(0,0,0,.26);
  backdrop-filter:blur(8px);
}
.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(100deg, transparent 18%, rgba(255,255,255,.2) 50%, transparent 82%);
  transform:translateX(-130%);
  transition:transform .55s ease;
  pointer-events:none;
}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(100,246,255,.42);
  box-shadow:0 0 26px rgba(100,246,255,.2), 0 0 22px rgba(255,92,200,.16), 0 16px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.26);
  filter:saturate(1.06);
}
.btn:hover::before{ transform:translateX(130%); }
.btn.primary{
  padding:14px 28px;
  min-height:52px;
  border-radius:16px;
  font-size:18px;
  letter-spacing:.3px;
  font-weight:800;
  color:#f7fbff;
  border-color:rgba(255,255,255,.52);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03)),
    linear-gradient(120deg, rgba(255,92,200,.5), rgba(100,246,255,.4));
  box-shadow:0 0 36px rgba(255,92,200,.32), 0 0 30px rgba(100,246,255,.26), 0 14px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.26);
  animation:primaryBreath 2.6s ease-in-out infinite;
}
.btn.primary::before{
  background:linear-gradient(108deg, transparent 44%, rgba(255,255,255,.36) 49%, rgba(255,255,255,.08) 51%, transparent 56%);
  transform:translateX(-135%);
  opacity:.85;
  animation:primaryShine 2.4s linear infinite;
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.34);
  pointer-events:none;
}
.btn.primary:hover{
  border-color:rgba(100,246,255,.82);
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 0 44px rgba(255,92,200,.42), 0 0 36px rgba(100,246,255,.36), 0 18px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.46);
}
@keyframes primaryBreath{
  0%,100%{ filter:saturate(1) brightness(1); }
  50%{ filter:saturate(1.05) brightness(1.04); }
}
@keyframes primaryShine{
  0%{ transform:translateX(-135%); }
  100%{ transform:translateX(135%); }
}

.hero-stage{
  aspect-ratio:9/10; padding:16px; display:grid; grid-template-rows:auto 1fr auto;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--glass);
  backdrop-filter:blur(12px); box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.hero-stage::before{
  content:""; position:absolute; inset:-2px;
  background:conic-gradient(from 45deg, rgba(255,92,200,.35), rgba(100,246,255,.35), rgba(155,131,255,.35), rgba(255,92,200,.35));
  filter:blur(22px); z-index:-1; opacity:.45;
}
.stage-top{ display:flex; justify-content:space-between; font-size:12px; color:#dbe6ff; }
.stage-core{ display:grid; place-items:center; position:relative; }
.core-card{
  width:min(320px,84%); aspect-ratio:4/5; border-radius:22px; border:1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.26), transparent 36%),
    linear-gradient(155deg, rgba(255,92,200,.35), rgba(155,131,255,.3) 46%, rgba(100,246,255,.28));
  position:relative;
}
.core-card::before,.core-card::after{ content:""; position:absolute; border:1px dashed rgba(255,255,255,.25); border-radius:26px; inset:-9px; animation:spin 18s linear infinite; }
.core-card::after{ inset:-16px; border-style:solid; border-color:rgba(100,246,255,.2); animation-direction:reverse; animation-duration:26s; }
.stage-line{ position:absolute; width:60%; height:2px; background:linear-gradient(90deg, transparent, var(--cyan), transparent); filter:blur(.2px); }
.stage-line.l1{ top:35%; left:20%; }
.stage-line.l2{ top:60%; left:20%; background:linear-gradient(90deg, transparent, var(--pink), transparent); }
@keyframes spin{ to{ transform:rotate(360deg);} }

.stage-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.stat{ border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; background:rgba(0,0,0,.12); }
.stat b{ display:block; color:var(--cyan); text-shadow:var(--glow-cyan); font-size:13px; }
.stat span{ color:var(--muted); font-size:12px; }

.section{ padding:82px 0 20px; position:relative; }
.title{ margin:0; font-size:clamp(28px,3.6vw,44px); letter-spacing:.5px; }
.subtitle{ margin:10px 0 0; color:var(--muted); line-height:1.86; max-width:75ch; }
.grid-2,.grid-3,.grid-4{ display:grid; gap:14px; margin-top:16px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); backdrop-filter:blur(12px); box-shadow:var(--shadow); overflow:hidden; position:relative; transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.panel::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, transparent 18%, rgba(255,255,255,.08) 50%, transparent 82%); transform:translateX(-140%); transition:transform .6s ease; }
.panel:hover{ border-color:rgba(100,246,255,.34); box-shadow:0 0 30px rgba(100,246,255,.16), 0 0 22px rgba(255,92,200,.12), var(--shadow); transform:translateY(-2px); }
.panel:hover::after{ transform:translateX(140%); }
.card{ padding:18px; transform:translateY(24px); opacity:0; transition:.65s cubic-bezier(.2,.8,.2,1); }
.card.show{ transform:translateY(0); opacity:1; }
.card h3{ margin:4px 0 10px; font-size:18px; }
.card p, .card li{ margin:0; color:var(--muted); line-height:1.82; font-size:14px; }
.card ul{ margin:8px 0 0; padding-left:18px; }
.tag{ display:inline-block; margin-top:10px; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; color:#dce6ff; }

.metric-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.metric{ border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center; background:rgba(0,0,0,.12); }
.metric b{ display:block; color:#fff; }
.metric span{ font-size:12px; color:var(--muted); }

.meter{ height:8px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; margin-top:12px; }
.meter span{ display:block; height:100%; background:linear-gradient(90deg,var(--pink),var(--cyan)); }

.steps{ padding:18px; }
.step{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px dashed rgba(255,255,255,.14); }
.step:last-child{ border-bottom:none; }
.dot{ width:10px;height:10px;border-radius:50%; background:var(--cyan); box-shadow:var(--glow-cyan); }
.step small{ color:var(--muted); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.form-grid .full{ grid-column:1/-1; }
.input,.textarea{ width:100%; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.05); color:var(--text); padding:12px 14px; font-size:14px; }
.textarea{ min-height:130px; resize:vertical; }
.input:focus,.textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(100,246,255,.16); }

.footer{ text-align:center; color:#8093c2; font-size:13px; padding:26px 0 24px; }
.parallax{ will-change:transform; }

.beian-badge{
  position:fixed;
  left:12px;
  bottom:10px;
  z-index:40;
}
.beian-badge a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  font-size:12px;
  line-height:1;
  color:#9fb3e8;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(8,12,28,.46);
  backdrop-filter:blur(8px);
  box-shadow:0 6px 14px rgba(0,0,0,.24);
}
.beian-badge a:hover{
  color:#d8e6ff;
  border-color:rgba(100,246,255,.42);
  box-shadow:0 0 14px rgba(100,246,255,.18), 0 6px 14px rgba(0,0,0,.24);
}
.beian-badge img{
  width:14px;
  height:14px;
  object-fit:contain;
  flex:0 0 auto;
}

.click-fx{ position:fixed; width:12px; height:12px; border-radius:50%; border:1px solid rgba(100,246,255,.95); pointer-events:none; z-index:9998; transform:translate(-50%,-50%) scale(.52); box-shadow:0 0 12px rgba(100,246,255,.42),0 0 12px rgba(255,92,200,.3) inset; opacity:.95; animation:clickPulse .5s ease-out forwards; }
.click-fx::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:1px solid rgba(255,92,200,.78); opacity:.85; animation:clickPulseInner .5s ease-out forwards; }
@keyframes clickPulse{ 0%{opacity:.95; transform:translate(-50%,-50%) scale(.52)} 55%{opacity:.68} 100%{opacity:0; transform:translate(-50%,-50%) scale(3.8)} }
@keyframes clickPulseInner{ 0%{opacity:.85; transform:scale(.65)} 100%{opacity:0; transform:scale(2.9)} }

@media (max-width:1000px){
  .hero{ grid-template-columns:1fr; min-height:auto; padding-bottom:10px; }
  .grid-2,.grid-3,.grid-4,.metric-row,.form-grid{ grid-template-columns:1fr; }
  .stage-stats{ grid-template-columns:1fr; }
  .nav{ display:none; }
  .beian-badge{ left:8px; bottom:8px; }
  .beian-badge a{ font-size:11px; padding:4px 6px; }
  .beian-badge img{ width:12px; height:12px; }
}