:root{
  --bg:#fffbf4;
  --bg2:#fef3e2;
  --primary:#5b8def;
  --primary-d:#3b6dcc;
  --accent:#ff6b9d;
  --yellow:#ffd166;
  --green:#4cc9a0;
  --text:#2d3142;
  --muted:#6b7088;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(91,141,239,.12);
  --shadow-h:0 16px 36px rgba(91,141,239,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
     background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;
     -webkit-font-smoothing:antialiased}

/* ── 赛博工业背景：蓝图网格 + 等宽代码片段 + 几何形状 ─────── */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* 蓝图网格底纹 */
.bg-deco::before{content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(91,141,239,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,141,239,.07) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 78%)}
/* 等宽代码片段 */
.bg-deco i.dt{position:absolute;display:block;font-style:normal;
  font-family:"SF Mono","JetBrains Mono","Consolas",monospace;
  font-size:12.5px;letter-spacing:.04em;white-space:nowrap;
  color:rgba(45,49,66,.22)}
/* 几何形状 */
.bg-deco i.dg{position:absolute;display:block;width:22px;height:22px;
  border:2px solid rgba(91,141,239,.28);font-style:normal;font-size:0}
.bg-deco i.dg.tri{width:0;height:0;border:none;border-left:14px solid transparent;
  border-right:14px solid transparent;border-bottom:24px solid rgba(91,141,239,.18)}
.bg-deco i.dg.cir{border-radius:50%;border-color:rgba(255,107,157,.28)}
.bg-deco i.dg.hex{width:24px;height:14px;background:rgba(255,209,102,.22);border:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
/* 位置 + 缓慢漂浮 */
.bg-deco i:nth-child(1){left:5%;top:14%;animation:f1 22s ease-in-out infinite}
.bg-deco i:nth-child(2){right:8%;top:20%;animation:f2 24s ease-in-out infinite}
.bg-deco i:nth-child(3){left:12%;top:55%;animation:f3 18s ease-in-out infinite}
.bg-deco i:nth-child(4){right:6%;top:68%;animation:f1 26s ease-in-out infinite reverse}
.bg-deco i:nth-child(5){left:50%;top:8%;animation:f2 19s ease-in-out infinite}
.bg-deco i:nth-child(6){right:28%;top:82%;animation:f3 21s ease-in-out infinite}
.bg-deco i:nth-child(7){left:7%;top:88%;animation:f1 17s ease-in-out infinite}
.bg-deco i:nth-child(8){right:18%;top:34%;animation:f2 28s ease-in-out infinite reverse}
.bg-deco i:nth-child(9){left:30%;top:76%;animation:f3 23s ease-in-out infinite}
.bg-deco i:nth-child(10){right:45%;top:50%;animation:f1 20s ease-in-out infinite reverse}
@keyframes f1{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-16px)}}
@keyframes f3{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}

/* ── Header ───────────────────────────── */
header{padding:22px 6% 0;display:flex;justify-content:space-between;align-items:center;max-width:1320px;margin:0 auto;position:relative;z-index:10}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--text);text-decoration:none}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;background:#1a2030;color:#7bb9ff;border-radius:7px;
  font-family:"SF Mono","JetBrains Mono","Consolas",monospace;
  font-size:16px;font-weight:700;letter-spacing:-1.5px}
.logo-text{font-weight:800;letter-spacing:-.4px;color:var(--text)}
.logo-text .tld{color:var(--muted);font-weight:600}
nav{display:flex;gap:6px;align-items:center}
nav a{padding:8px 16px;color:var(--text);text-decoration:none;font-weight:500;border-radius:20px;transition:.2s;font-size:15px}
nav a:hover{background:#fff;color:var(--primary);transform:translateY(-2px)}
.nav-cta{background:var(--text);color:#fff!important;padding:10px 20px!important;border-radius:24px}
.nav-cta:hover{background:var(--primary);color:#fff!important;transform:translateY(-2px) rotate(-2deg)}

/* ── Hero ───────────────────────────── */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;
      padding:70px 6% 100px;max-width:1320px;margin:0 auto}
.hero-text .badge{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--primary);
                  padding:6px 14px;border-radius:30px;font-size:13px;font-weight:600;box-shadow:var(--shadow);margin-bottom:24px}
.hero-text .badge span{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(76,201,160,.5)}50%{transform:scale(1.2);box-shadow:0 0 0 8px rgba(76,201,160,0)}}
.hero-text h1{font-size:60px;line-height:1.1;font-weight:900;margin-bottom:20px;letter-spacing:-1.5px}
.hero-text h1 em{font-style:normal;background:linear-gradient(135deg,var(--primary),var(--accent));
                 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
                 background-size:200% 200%;animation:grad 5s ease infinite;display:inline-block}
@keyframes grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-text p.tag{font-size:18px;color:var(--muted);margin-bottom:32px;max-width:540px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:50px;
     font-size:15px;font-weight:600;text-decoration:none;transition:.25s cubic-bezier(.34,1.56,.64,1);cursor:pointer;border:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),#7ba9ff);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--shadow-h)}
.btn-outline{background:#fff;color:var(--text);border:2px solid #eee}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-4px)}

/* ── Mascot 终端 ───────────────────────────── */
.mascot{position:relative;display:flex;justify-content:center;align-items:center}
.mascot-wrap{width:100%;max-width:520px;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── 实时终端（HTML 版）─────────────────────────── */
.term-live{filter:drop-shadow(0 18px 44px rgba(91,141,239,.22))}
.tl-window{background:linear-gradient(180deg,#161b22 0%,#0d1117 100%);
  border-radius:12px;overflow:hidden;border:1px solid #2a3140;
  box-shadow:0 24px 60px rgba(15,20,25,.32),0 4px 20px rgba(91,141,239,.1);
  font-family:"SF Mono","JetBrains Mono","Consolas","Courier New",monospace}
.tl-header{background:#161b22;padding:10px 14px;display:flex;align-items:center;gap:7px;
  border-bottom:1px solid #2a3140;position:relative}
.tl-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.tl-r{background:#ff5f56}.tl-y{background:#ffbd2e}.tl-g{background:#27c93f}
.tl-title{position:absolute;left:0;right:0;text-align:center;color:#5a6478;font-size:11.5px;pointer-events:none}
.tl-body{padding:18px 20px;height:340px;overflow:hidden;color:#a5e0a5;
  font-size:13.5px;line-height:1.75;position:relative}
.tl-line{white-space:pre-wrap;word-break:break-all;min-height:1.75em}
.tl-prompt{color:#7bb9ff;margin-right:6px}
.tl-cmd{color:#e6edf3}
.tl-ok{color:#a5e0a5}.tl-warn{color:#ffb86c}.tl-pink{color:#ff6b9d}.tl-green{color:#27c93f}.tl-info{color:#7bb9ff}
.tl-cursor{display:inline-block;width:7px;height:1.05em;background:#e6edf3;vertical-align:text-bottom;
  margin-left:2px;animation:tl-blink 1s steps(1,end) infinite}
@keyframes tl-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ── 星辰大海背景 ───────────────────────────── */
.starfield{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.star{position:absolute;border-radius:50%;opacity:0;
  animation:twinkle var(--dur,4s) ease-in-out var(--delay,0s) infinite}
@keyframes twinkle{
  0%,100%{opacity:.05;transform:scale(.7)}
  50%{opacity:var(--max,.7);transform:scale(1.2)}
}

/* ── 底层大火箭（背景板，不挡文字 + 到底可点击发射）─────── */
#bigRocket{position:fixed;left:max(16px,calc((100vw - 1700px)/2 + 8px));
  bottom:30px;width:170px;height:240px;
  z-index:-1;border:0;background:none;padding:0;pointer-events:none;cursor:default;
  --p:0;--lift:0;will-change:transform;
  transform:translateY(calc(var(--lift) * -1px));
  transition:transform .25s ease-out;
  filter:drop-shadow(0 18px 34px rgba(15,20,25,.16))}
#bigRocket .rk-svg{width:100%;height:100%;position:relative;z-index:2;
  animation:rk-bob 4s ease-in-out infinite;transform-origin:center bottom}
@keyframes rk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* 火焰：蓝白等离子，多层 */
#bigRocket .flame-outer{transform-origin:40px 110px;
  transform:scaleY(calc(.5 + var(--p) * 2.4));
  animation:rk-flicker .16s ease-in-out infinite alternate}
#bigRocket .flame-inner{transform-origin:40px 110px;
  transform:scaleY(calc(.4 + var(--p) * 2.0));
  animation:rk-flicker .13s ease-in-out infinite alternate}
#bigRocket .flame-core{transform-origin:40px 110px;
  transform:scaleY(calc(.4 + var(--p) * 1.6));
  animation:rk-flicker .1s ease-in-out infinite alternate}
@keyframes rk-flicker{from{filter:brightness(1) blur(0)}to{filter:brightness(1.18) blur(.5px)}}
/* 尾迹：细一些，不占太多视觉空间 */
#bigRocket .trail{position:absolute;left:50%;bottom:-8px;
  width:calc(14px + var(--p) * 22px);
  height:calc(50px + var(--p) * 240px);
  transform:translateX(-50%);
  background:linear-gradient(to top, transparent 0%, rgba(123,185,255,.55) 25%, rgba(255,255,255,.5) 55%, rgba(91,141,239,.3) 85%, transparent 100%);
  filter:blur(7px);opacity:calc(.2 + var(--p) * .8);
  z-index:1;pointer-events:none}

/* 滚到底部：火箭变可点击（z-index 升起 + 暖色光晕脉冲）*/
#bigRocket.ready{z-index:60;pointer-events:auto;cursor:pointer;
  animation:rk-ready 1.6s ease-in-out infinite}
@keyframes rk-ready{
  0%,100%{filter:drop-shadow(0 0 16px rgba(255,160,40,.4)) drop-shadow(0 16px 28px rgba(15,20,25,.18))}
  50%{filter:drop-shadow(0 0 40px rgba(255,160,40,.85)) drop-shadow(0 16px 28px rgba(15,20,25,.18))}
}

/* 点击发射：飞到屏幕顶端（与滚动条同步到顶）→ 停顿 → 落回发射架 */
#bigRocket.launching{
  animation:rk-launch 1.9s cubic-bezier(.45,.1,.3,1) forwards !important;
  z-index:60}
@keyframes rk-launch{
  0%   {transform:translateY(0)}          /* 起飞前 */
  45%  {transform:translateY(-82vh)}      /* ★ 与滚动条同步到达屏幕顶端 */
  72%  {transform:translateY(-82vh)}      /* 在屏幕顶端停留展示 */
  100% {transform:translateY(0)}          /* 缓缓回到左下角发射架 */
}
#bigRocket.launching .flame-outer,#bigRocket.launching .flame-inner,#bigRocket.launching .flame-core{
  transform:scaleY(4) !important;animation:rk-flicker .05s ease-in-out infinite alternate}
#bigRocket.launching .trail{height:600px !important;width:60px !important;opacity:1 !important}

@media(max-width:980px){
  #bigRocket{width:124px;height:178px;left:6px}
}
@media(max-width:680px){
  #bigRocket{width:92px;height:132px;left:-8px;bottom:18px;opacity:.78}
  #bigRocket .trail{width:calc(10px + var(--p) * 14px);height:calc(36px + var(--p) * 160px)}
}

/* ── Section common ───────────────────────────── */
section{padding:80px 6%;max-width:1320px;margin:0 auto;position:relative}
.section-title{text-align:center;font-size:40px;font-weight:900;margin-bottom:14px;letter-spacing:-.5px}
.section-title em{font-style:normal;color:var(--text);position:relative;display:inline-block;z-index:1}
.section-title em::after{content:'';position:absolute;bottom:4px;left:-6px;right:-6px;height:14px;
                          background:var(--yellow);opacity:.55;z-index:-1;border-radius:6px;transform:rotate(-1deg)}
.section-sub{text-align:center;color:var(--muted);margin-bottom:56px;font-size:16px}

/* ── Services（5 卡片）───────────────────────── */
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1180px){.service-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media (max-width:760px){.service-grid{grid-template-columns:1fr}}
.card{background:var(--card);padding:28px 22px;border-radius:22px;box-shadow:var(--shadow);
      transition:.3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;border:2px solid transparent}
.card::before{content:'';position:absolute;inset:0;border-radius:24px;background:linear-gradient(135deg,transparent,transparent);transition:.3s;pointer-events:none}
.card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:var(--shadow-h);border-color:#ffe9d6}
.card .icon{font-size:54px;margin-bottom:16px;display:inline-block;transition:.3s cubic-bezier(.34,1.56,.64,1)}
.card:hover .icon{transform:rotate(-12deg) scale(1.15)}
.card h3{font-size:21px;margin-bottom:10px;font-weight:800}
.card p{color:var(--muted);font-size:14.5px;margin-bottom:16px;line-height:1.7}
.card .more{color:var(--primary);font-weight:600;text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.card .more::after{content:'→';transition:.25s;display:inline-block}
.card:hover .more::after{transform:translateX(6px)}
.card.coming{position:relative}
.card.coming .tag{position:absolute;top:18px;right:18px;background:var(--yellow);color:var(--text);font-size:11px;padding:3px 10px;border-radius:10px;font-weight:700}

/* ── About / Stats ───────────────────────────── */
.about{text-align:center;max-width:980px}
.about-text{font-size:17px;line-height:1.95;color:var(--text);margin-bottom:14px}
.about-text + .about-text{color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.stat{padding:24px 16px;background:#fff;border-radius:20px;box-shadow:var(--shadow);transition:.3s}
.stat:hover{transform:translateY(-6px) rotate(1deg)}
.stat:nth-child(2):hover{transform:translateY(-6px) rotate(-1deg)}
.stat .num{font-size:42px;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--accent));
           -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .num-suffix{font-size:24px}
.stat .label{font-size:13px;color:var(--muted);margin-top:4px;font-weight:500}

/* ── 赛博朋克 neon 高亮 ───────────────────────── */
.neon{color:var(--primary);font-weight:700;text-shadow:0 0 14px rgba(91,141,239,.45),0 0 4px rgba(91,141,239,.6);position:relative}
.neon-pink{color:var(--accent);font-weight:700;text-shadow:0 0 14px rgba(255,107,157,.45),0 0 4px rgba(255,107,157,.6)}
/* ── 终端 / Shell 美学 ───────────────────────── */
.term-block{display:inline-block;margin:36px auto 0;text-align:left;
  font-family:"SF Mono","JetBrains Mono","Consolas","Courier New",monospace;
  font-size:13.5px;line-height:1.85;
  background:#0f1419;color:#a5e0a5;
  padding:18px 26px;border-radius:8px;
  border:1px solid #2a3140;
  box-shadow:0 14px 40px rgba(15,20,25,.25),inset 0 0 80px rgba(91,141,239,.04);
  position:relative;white-space:pre}
.term-block::before{content:"● ● ●";position:absolute;top:7px;left:14px;
  color:#444;font-size:9px;letter-spacing:3px}
.term-block .prompt{color:#7bb9ff}
.term-block .out{color:#a5e0a5}
.term-block .comment{color:#5a6478;font-style:italic}
.term-block .hl{color:#ffb86c}
.term-shell{padding-top:30px}
.term-sub{display:block;margin-top:8px;font-family:"SF Mono","Consolas",monospace;
  font-size:14px;color:var(--accent);letter-spacing:.05em}

/* ── Contact ───────────────────────────── */
.contact-wrap{background:linear-gradient(135deg,#e8f0ff 0%,#fff0f6 100%);
              border-radius:48px 48px 0 0;margin-top:60px;padding:80px 6%}
.contact-inner{max-width:900px;margin:0 auto;text-align:center}
.contact-inner h2{font-size:38px;font-weight:900;margin-bottom:14px;letter-spacing:-.5px}
.contact-inner p{color:var(--muted);margin-bottom:36px;font-size:16px}
.contact-list{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.contact-item{background:#fff;padding:18px 28px;border-radius:20px;box-shadow:var(--shadow);
              display:flex;align-items:center;gap:10px;transition:.25s cubic-bezier(.34,1.56,.64,1);
              text-decoration:none;color:var(--text);font-weight:600;font-size:15px}
.contact-item:hover{transform:translateY(-5px) scale(1.04);box-shadow:var(--shadow-h)}
.contact-item .ci{font-size:22px}

/* ── Footer ───────────────────────────── */
footer{text-align:center;padding:30px 6%;color:var(--muted);font-size:13px;background:#fff}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--primary)}

/* ── 滚动渐入 ───────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:.6s cubic-bezier(.34,1.56,.64,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ── Responsive ───────────────────────────── */
@media (max-width:860px){
  header{padding:16px 5% 0}
  .logo{font-size:18px}
  .logo svg{width:34px;height:34px}
  nav a:not(.nav-cta){display:none}
  nav .nav-cta{padding:7px 14px!important;font-size:13px}

  .hero{grid-template-columns:1fr;padding:24px 5% 48px;text-align:center;gap:28px}
  .hero-text h1{font-size:36px;line-height:1.18;letter-spacing:-1px}
  .hero-text .badge{font-size:12px;padding:5px 12px;margin-bottom:18px}
  .hero-text p.tag{margin:0 auto 14px;font-size:14.5px;max-width:560px}
  .hero-text p.tag:last-of-type{font-size:13.5px}
  .hero-text .cta{justify-content:center;gap:10px}
  .btn{padding:11px 22px;font-size:14px}
  .mascot-wrap{max-width:100%}
  .tl-body{height:280px;font-size:12px;padding:14px 14px;line-height:1.7}
  .tl-title{font-size:10.5px}

  section{padding:54px 5%}
  .section-title{font-size:28px}
  .section-sub{font-size:14px;margin-bottom:36px}

  .service-grid{grid-template-columns:1fr;gap:14px}
  .card{padding:24px 22px}
  .card h3{font-size:19px}
  .card p{font-size:14px}

  .about-text{font-size:15.5px}
  .about-quote{font-size:16.5px!important;line-height:1.85!important}
  .term-block{display:block!important;font-size:12px;padding:14px 16px;
              overflow-x:auto;text-align:left;white-space:pre-wrap;word-break:break-word}

  .stats{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:36px}
  .stat{padding:20px 14px}
  .stat .num{font-size:34px}
  .stat .label{font-size:12px}

  .contact-wrap{border-radius:36px 36px 0 0;padding:54px 5% 40px}
  .contact-inner h2{font-size:26px}
  .contact-list{flex-direction:column;align-items:stretch;gap:12px}
  .contact-item{justify-content:center;font-size:14px;padding:14px 20px}

  footer{padding:24px 5%}
}

@media (max-width:480px){
  .hero-text h1{font-size:30px}
  .hero-text p.tag{font-size:14px}
  .tl-body{height:260px;font-size:11px;padding:12px 12px}
  .tl-title{font-size:10px}
  .section-title{font-size:24px}
  .about-text{font-size:14.5px}
  .about-quote{font-size:15px!important}
  .term-block{font-size:11px;padding:12px 14px}
  .stat .num{font-size:30px}
  .creed{font-size:11px;letter-spacing:.18em;padding:11px 16px}
}