/* 艾朗科技 · 开场「业务星球」+ AI 接待 —— 样式
   复用站点设计令牌：--blue #559bff / --cyan #52c4cd / --line #3b566f / --text #eef5fc */

html.ww-lock,html.ww-lock body{overflow:hidden}

/* 统一盒模型：开场层里多处用了 width:100% + padding，
   content-box 下会横向溢出（窄屏最明显），必须 border-box */
#ww-intro,#ww-intro *,#ww-intro *::before,#ww-intro *::after{box-sizing:border-box}

#ww-intro{position:fixed;inset:0;z-index:9999;
  /* 深空底：必须接近纯黑。canvas 的宇宙层是不透明覆盖，这层只在
     首帧/降级时露出来，若偏浅会把星云的加色发光冲成一团灰雾 */
  background:radial-gradient(ellipse 125% 90% at 50% 32%,#071324 0%,#030a14 52%,#01040a 100%);
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;opacity:1;transition:opacity .45s}
#ww-intro.ww-out{opacity:0;pointer-events:none}

#ww-intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}

#ww-intro .ww-scan{position:absolute;left:0;right:0;height:120px;top:-120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,#52c4cd14,transparent);animation:ww-scan 7s linear infinite}
@keyframes ww-scan{0%{top:-120px}100%{top:100%}}

/* ---------- 左上：公司身份 ---------- */
#ww-intro .ww-brand{position:absolute;top:26px;left:34px;z-index:3;
  display:flex;align-items:center;gap:11px;pointer-events:none}
#ww-intro .ww-brand-mark{width:32px;height:32px;flex:none;filter:drop-shadow(0 0 10px #52c4cd55)}
#ww-intro .ww-brand-tx{display:flex;flex-direction:column;line-height:1.24}
#ww-intro .ww-brand-tx b{font-size:16px;font-weight:600;letter-spacing:2.4px;color:var(--text,#eef5fc)}
#ww-intro .ww-brand-tx em{font:9px monospace;letter-spacing:1.6px;color:#7d93ab;font-style:normal}

/* ---------- 右上：联系方式 + 小程序入口 ---------- */
#ww-intro .ww-contact{position:absolute;top:24px;right:34px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
#ww-intro .ww-c-tel{font:600 19px/1.1 "Segoe UI","PingFang SC",sans-serif;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--text,#eef5fc);
  text-decoration:none;pointer-events:auto;text-shadow:0 0 18px #52c4cd44;transition:.2s}
#ww-intro .ww-c-tel:hover{color:var(--cyan,#52c4cd)}
#ww-intro .ww-c-sub{display:flex;align-items:center;gap:9px;pointer-events:none;
  font-size:11px;color:#7d93ab;letter-spacing:.4px}
#ww-intro .ww-c-sep{width:1px;height:9px;background:#3b566f}
#ww-intro .ww-c-mp{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;
  border:1px solid #52c4cd55;background:#52c4cd12;color:var(--cyan,#52c4cd);
  font-size:11.5px;text-decoration:none;pointer-events:auto;transition:.2s;white-space:nowrap}
#ww-intro .ww-c-mp b{font-weight:400;font-size:12px}
#ww-intro .ww-c-mp i{font-style:normal;color:#6e8aa3;font-size:10.5px}
#ww-intro .ww-c-mp:hover{background:#52c4cd26;border-color:#52c4cd;color:#bff0f4}

#ww-intro .ww-stage{position:absolute;left:0;right:0;bottom:7vh;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  width:100%;padding:0 24px;text-align:center;pointer-events:none}

#ww-intro .ww-slot{position:relative;width:100%;max-width:680px;min-width:0;min-height:132px;
  display:flex;align-items:center;justify-content:center}

#ww-intro .ww-line{margin:0;max-width:640px;min-width:0;font-size:19px;line-height:1.8;letter-spacing:.6px;
  color:var(--text,#eef5fc);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  text-shadow:0 0 24px #52c4cd33;transition:opacity .3s}

#ww-intro .ww-caret{display:inline-block;width:9px;height:18px;margin-left:4px;vertical-align:-3px;
  background:var(--cyan,#52c4cd);animation:ww-blink 1s steps(1) infinite}
@keyframes ww-blink{50%{opacity:0}}

#ww-intro .ww-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(560px,94%);
  padding:16px 20px 15px;border-radius:12px;text-align:left;
  background:linear-gradient(180deg,#101f2ecc,#0b1723e6);border:1px solid #2d4a63;
  box-shadow:0 18px 48px -18px #000a,0 0 0 1px #52c4cd12 inset;
  opacity:0;pointer-events:none;transition:opacity .32s,transform .32s}
#ww-intro .ww-stage.picked .ww-card{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
#ww-intro .ww-stage.picked .ww-line{opacity:0}

#ww-intro .ww-card-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
#ww-intro .ww-card-dot{width:8px;height:8px;border-radius:50%;background:#52c4cd;flex:0 0 8px;
  box-shadow:0 0 12px currentColor}
#ww-intro .ww-card-t{font-size:16px;font-weight:600;letter-spacing:.5px;color:#eef5fc}
#ww-intro .ww-card-p{margin:0 0 13px;font-size:14px;line-height:1.72;color:#a9c2d8}
#ww-intro .ww-card-b{padding:8px 18px;border:1px solid #52c4cd66;border-radius:6px;cursor:pointer;
  background:#52c4cd14;color:var(--cyan,#52c4cd);font:13px inherit;font-family:inherit;transition:.2s}
#ww-intro .ww-card-b:hover{background:#52c4cd26;border-color:#52c4cd;color:#bff0f4}

#ww-intro .ww-row{display:flex;gap:10px;width:min(540px,94%);opacity:0;pointer-events:none;
  transform:translateY(8px);transition:opacity .5s,transform .5s}
#ww-intro .ww-row.on{opacity:1;pointer-events:auto;transform:none}

#ww-intro .ww-input{flex:1;min-width:0;padding:14px 16px;border:1px solid var(--line,#3b566f);border-radius:6px;
  background:#0d1b28;color:var(--text,#eef5fc);font:15px inherit;font-family:inherit;outline:none;transition:.2s}
#ww-intro .ww-input::placeholder{color:#63798e}
#ww-intro .ww-input:focus{border-color:var(--cyan,#52c4cd);box-shadow:0 0 0 3px #52c4cd22}

#ww-intro .ww-btn{padding:14px 24px;border:0;border-radius:6px;cursor:pointer;font:600 15px inherit;font-family:inherit;
  color:#07161f;background:linear-gradient(135deg,var(--blue,#559bff),var(--cyan,#52c4cd));transition:.2s;white-space:nowrap}
#ww-intro .ww-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
#ww-intro .ww-btn:disabled{opacity:.5;cursor:default;transform:none}

#ww-intro .ww-skip{position:absolute;right:20px;bottom:18px;z-index:3;padding:8px 18px;border-radius:20px;
  border:1px solid #3b566f99;background:transparent;color:#7d93ab;font:12px inherit;font-family:inherit;
  letter-spacing:3px;cursor:pointer;transition:.2s}
#ww-intro .ww-skip:hover{color:#cfe3f7;border-color:#7d93ab}

#ww-intro .ww-hint{position:absolute;left:0;right:0;bottom:22px;z-index:3;text-align:center;
  color:#4f657c;font:11px monospace;letter-spacing:1.5px;pointer-events:none}

#ww-intro .ww-flash{position:absolute;inset:0;z-index:4;background:#d6f2ff;opacity:0;pointer-events:none;transition:opacity .5s}

@media (max-width:900px){
  #ww-intro .ww-stage{bottom:5vh;gap:14px}
  #ww-intro .ww-slot{min-height:150px}
  #ww-intro .ww-brand{top:20px;left:22px}
  #ww-intro .ww-contact{top:18px;right:22px;gap:6px}
  #ww-intro .ww-c-tel{font-size:17px}
  #ww-intro .ww-c-mp i{display:none}
}

@media (max-width:640px){
  #ww-intro .ww-line{font-size:16px;line-height:1.7}
  #ww-intro .ww-stage{gap:13px;padding:0 16px}
  #ww-intro .ww-slot{min-height:158px}
  #ww-intro .ww-card{padding:14px 16px 13px}
  #ww-intro .ww-card-t{font-size:15px}
  #ww-intro .ww-card-p{font-size:13px;line-height:1.65;margin-bottom:11px}
  #ww-intro .ww-row{flex-direction:column;width:100%}
  #ww-intro .ww-btn{padding:13px 20px}
  #ww-intro .ww-hint{display:none}
  #ww-intro .ww-brand{top:12px;left:14px;gap:8px}
  #ww-intro .ww-brand-mark{width:24px;height:24px}
  #ww-intro .ww-brand-tx b{font-size:14px;letter-spacing:1.6px}
  #ww-intro .ww-brand-tx em{display:none}
  #ww-intro .ww-contact{top:46px;left:14px;right:auto;align-items:flex-start;text-align:left;gap:6px}
  #ww-intro .ww-c-tel{font-size:16px}
  #ww-intro .ww-c-sub{display:none}
  #ww-intro .ww-c-mp{padding:5px 10px;font-size:11px}
  #ww-intro .ww-c-mp i{display:none}
  #ww-intro .ww-skip{top:12px;bottom:auto;right:14px}
}

@media (prefers-reduced-motion:reduce){
  #ww-intro .ww-scan{display:none}
  #ww-intro .ww-caret{animation:none}
  #ww-intro{transition:none}
  #ww-intro .ww-card,#ww-intro .ww-row{transition:none}
}