/* ============================================================
   双利来® · 章鱼触手着陆页 · 深空星云主题 v2 (共享 style.css)
   ============================================================ */
:root{
  --ink:#eef2ff; --dim:#a9b4dd;
  --cyan:#4fe0ff; --blue:#5b8dff; --violet:#9d8bff; --magenta:#ff6fae; --teal:#2fd4c8;
  --line:rgba(150,170,255,.16); --glass:rgba(255,255,255,.055); --brd:rgba(150,175,255,.30);
  --grad:linear-gradient(115deg,#4fe0ff,#6f9dff 30%,#9d8bff 55%,#d97bf0 78%,#ff6fae);
  --neon:0 0 26px rgba(120,140,255,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); line-height:1.85; overflow-x:hidden; -webkit-font-smoothing:antialiased; letter-spacing:.01em;
  background:
    radial-gradient(ellipse 62% 50% at 14% 8%, rgba(45,90,220,.30), transparent 62%),
    radial-gradient(ellipse 56% 46% at 86% 12%, rgba(125,55,215,.28), transparent 60%),
    radial-gradient(ellipse 72% 52% at 50% 108%, rgba(0,150,190,.20), transparent 62%),
    linear-gradient(160deg,#05060f 0%,#0a0e24 34%,#130b2b 68%,#090614 100%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(120,140,255,.45)}
/* ---------- 背景：星点 + 缓移网格 + 5 光球 ---------- */
.bg{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%,rgba(255,255,255,.75),transparent 42%),
    radial-gradient(1.1px 1.1px at 31% 66%,rgba(205,222,255,.6),transparent 42%),
    radial-gradient(2px 2px at 49% 14%,rgba(255,255,255,.55),transparent 42%),
    radial-gradient(1px 1px at 63% 40%,rgba(185,205,255,.55),transparent 42%),
    radial-gradient(1.6px 1.6px at 79% 72%,rgba(255,255,255,.5),transparent 42%),
    radial-gradient(1px 1px at 89% 28%,rgba(214,196,255,.55),transparent 42%),
    radial-gradient(1.5px 1.5px at 22% 84%,rgba(255,255,255,.45),transparent 42%),
    radial-gradient(1px 1px at 56% 90%,rgba(196,214,255,.5),transparent 42%);
  animation:twinkle 5.5s ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:.45}100%{opacity:.95}}
.grid{position:fixed;inset:-2px;z-index:-2;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(120,150,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,255,.07) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask:radial-gradient(circle at 50% 28%,#000 0%,transparent 78%);mask:radial-gradient(circle at 50% 28%,#000 0%,transparent 78%);
  animation:gridMove 42s linear infinite}
@keyframes gridMove{from{background-position:0 0,0 0}to{background-position:54px 54px,54px 54px}}
.orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(82px);pointer-events:none;animation:float 24s ease-in-out infinite}
.orb.o1{width:470px;height:470px;top:-130px;left:-110px;background:radial-gradient(circle,rgba(45,110,255,.55),transparent 68%);opacity:.5}
.orb.o2{width:430px;height:430px;bottom:-150px;right:-90px;background:radial-gradient(circle,rgba(130,60,220,.5),transparent 68%);opacity:.46;animation-delay:-6s}
.orb.o3{width:340px;height:340px;top:42%;right:12%;background:radial-gradient(circle,rgba(255,70,150,.42),transparent 68%);opacity:.34;animation-delay:-12s}
.orb.o4{width:320px;height:320px;top:20%;left:12%;background:radial-gradient(circle,rgba(0,190,210,.4),transparent 68%);opacity:.3;animation-delay:-3s}
.orb.o5{width:380px;height:380px;bottom:10%;left:36%;background:radial-gradient(circle,rgba(90,115,255,.36),transparent 68%);opacity:.3;animation-delay:-9s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,40px) scale(1.08)}66%{transform:translate(-22px,26px) scale(.98)}}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
/* ---------- 顶栏 ---------- */
.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);background:rgba(8,10,26,.5);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand-top{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.04em}
.brand-top .dot{width:11px;height:11px;border-radius:50%;background:var(--grad);box-shadow:0 0 16px 2px rgba(130,120,255,.8);animation:breathe 3s ease-in-out infinite}
.brand-top small{color:var(--dim);font-weight:600;letter-spacing:.08em}
.top .to-main{font-size:13.5px;color:var(--dim);border:1px solid var(--brd);padding:8px 15px;border-radius:11px;background:var(--glass);transition:.3s}
.top .to-main:hover{color:#fff;border-color:var(--cyan);box-shadow:var(--neon)}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.28)}}
/* ---------- Hero ---------- */
.hero{position:relative;padding:90px 0 50px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.24em;color:#bfe6ff;
  border:1px solid var(--brd);padding:8px 18px;border-radius:100px;background:var(--glass);backdrop-filter:blur(10px);margin-bottom:30px;box-shadow:var(--neon)}
.eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,224,255,.5)}100%{box-shadow:0 0 0 12px rgba(79,224,255,0)}}
.hero h1{font-size:clamp(48px,8.6vw,100px);font-weight:800;letter-spacing:.01em;line-height:1.08;
  background:linear-gradient(115deg,#4fe0ff 0%,#6f9dff 22%,#9d8bff 46%,#d97bf0 70%,#ff6fae 86%,#4fe0ff 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 22px rgba(90,140,255,.45)) drop-shadow(0 0 48px rgba(150,110,255,.3))}
@keyframes sheen{to{background-position:280% 0}}
.sub{margin:22px auto 0;font-size:clamp(15px,2vw,18px);color:var(--dim);max-width:760px}
.sub b{color:#dfe6ff;font-weight:700}
/* ---------- 数据芯片（毛玻璃） ---------- */
.stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:44px 0 8px}
.chip{position:relative;min-width:210px;padding:22px 26px;border-radius:18px;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(150,175,255,.28);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.chip::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s,background-position .6s;
  background:linear-gradient(120deg,transparent 34%,rgba(255,255,255,.24) 50%,transparent 66%);background-size:250% 100%;background-position:120% 0}
.chip:hover{transform:translateY(-7px);border-color:rgba(160,195,255,.62);
  box-shadow:0 24px 50px -16px rgba(80,120,255,.55),0 0 0 1px rgba(160,195,255,.26),inset 0 0 36px rgba(90,140,255,.10)}
.chip:hover::before{opacity:1;background-position:-40% 0}
.chip .n{display:block;font-size:34px;font-weight:800;line-height:1.15;
  background:linear-gradient(120deg,#6fd8ff,#a98bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.chip .l{display:block;margin-top:7px;font-size:13px;color:var(--dim);letter-spacing:.04em}
/* ---------- 核心能力卡 ---------- */
section.block{padding:52px 0}
.sec-t{text-align:center;font-size:15px;letter-spacing:.16em;color:var(--dim);margin-bottom:26px}
.sec-t::before{content:'';display:inline-block;width:26px;height:2px;background:var(--grad);vertical-align:middle;margin-right:12px;border-radius:2px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;padding:26px 24px;border-radius:18px;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(150,175,255,.24);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.card .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(79,224,255,.25),rgba(157,139,255,.22));border:1px solid var(--brd)}
.card h3{font-size:18px;margin-bottom:8px;font-weight:700}
.card p{font-size:14px;color:var(--dim);line-height:1.7}
.card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.card:hover{transform:translateY(-8px);border-color:rgba(160,195,255,.55);box-shadow:0 26px 54px -18px rgba(90,120,255,.5),inset 0 0 40px rgba(90,140,255,.07)}
.card:hover::after{transform:scaleX(1)}
/* ---------- CTA ---------- */
.cta{position:relative;text-align:center;padding:48px 34px;margin:36px 0 60px;border-radius:24px;overflow:hidden;
  background:linear-gradient(135deg,rgba(45,90,220,.22),rgba(125,55,215,.20),rgba(0,150,190,.16));
  border:1px solid rgba(160,190,255,.32);
  box-shadow:inset 0 0 60px rgba(90,130,255,.12),0 24px 60px -24px rgba(60,90,255,.5)}
.cta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);background-size:220% 100%;animation:sheen 6s linear infinite}
.cta h2{position:relative;font-size:clamp(24px,4vw,38px);font-weight:800;
  background:linear-gradient(115deg,#eaf0ff,#b9c6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cta p{position:relative;margin-top:12px;color:var(--dim);font-size:15px}
.cta .btns{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
/* ---------- 按钮（全息呼吸） ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:100px;
  font-weight:700;font-size:15.5px;letter-spacing:.02em;cursor:pointer;white-space:nowrap;user-select:none}
.btn-primary{color:#fff;background:linear-gradient(120deg,#33b4ff,#6f7dff 34%,#c05ef0 66%,#ff6fae 100%);background-size:240% 100%;
  border:1px solid rgba(255,255,255,.30);text-shadow:0 1px 2px rgba(0,0,0,.28);
  animation:btnBreath 3.2s ease-in-out infinite;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background-position .5s,box-shadow .3s}
.btn-primary:hover{background-position:100% 0;transform:translateY(-3px)}
.btn-primary::after{content:'';position:absolute;inset:-3px;border-radius:inherit;border:1.6px solid rgba(150,195,255,.7);
  opacity:0;transform:scale(1);transition:opacity .35s,transform .55s ease-out;pointer-events:none}
.btn-primary:hover::after{opacity:.9;transform:scale(1.22)}
@keyframes btnBreath{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 10px 26px -8px rgba(80,120,255,.5),0 0 20px rgba(120,120,255,.28)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 14px 36px -8px rgba(95,135,255,.74),0 0 44px rgba(155,135,255,.5)}}
.btn-ghost{color:#eaf0ff;background:rgba(255,255,255,.05);border:1px solid rgba(150,175,255,.4);backdrop-filter:blur(8px);transition:.3s}
.btn-ghost:hover{background:rgba(120,150,255,.15);border-color:rgba(160,195,255,.75);box-shadow:var(--neon);transform:translateY(-2px)}
/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);padding:34px 0 60px;text-align:center;color:var(--dim);font-size:13.5px}
footer a{color:var(--cyan)}
footer .beian{margin-top:8px;opacity:.75}
/* ---------- AI 章鱼（保留） ---------- */
.ai-fab{position:fixed;right:24px;bottom:26px;z-index:60;width:62px;height:62px;border-radius:50%;
  border:1px solid rgba(150,195,255,.5);background:radial-gradient(circle at 30% 25%,#2f47a6,#0d1230);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 44px -8px rgba(110,130,255,.9),0 0 30px rgba(90,140,255,.4);
  animation:breathe 3.4s ease-in-out infinite;transition:.3s}
.ai-fab:hover{transform:scale(1.08)}
.ai-fab svg{width:32px;height:32px}
.ai-fab .ring{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(79,224,255,.45);animation:ping2 2.6s ease-out infinite}
@keyframes ping2{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.55);opacity:0}}
.ai-panel{position:fixed;right:24px;bottom:100px;z-index:60;width:min(380px,92vw);height:520px;max-height:70vh;
  border:1px solid rgba(150,195,255,.4);border-radius:20px;background:rgba(10,13,30,.94);backdrop-filter:blur(20px);
  box-shadow:0 34px 90px -22px rgba(0,0,0,.75),0 0 40px rgba(90,120,255,.18);display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(16px) scale(.98);opacity:0;pointer-events:none;transition:.28s cubic-bezier(.2,.8,.2,1)}
.ai-panel.open{transform:none;opacity:1;pointer-events:auto}
.ai-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(79,224,255,.14),rgba(255,111,174,.12))}
.ai-head .av{width:38px;height:38px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;color:#06121a}
.ai-head .t{font-weight:700;font-size:15px}
.ai-head .s{font-size:12px;color:var(--cyan);display:flex;align-items:center;gap:6px}
.ai-head .s .on{width:7px;height:7px;border-radius:50%;background:#39e08a;box-shadow:0 0 8px #39e08a}
.ai-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.6}
.msg.ai{align-self:flex-start;background:var(--glass);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:linear-gradient(120deg,rgba(79,224,255,.26),rgba(157,139,255,.26));border:1px solid var(--brd);border-bottom-right-radius:4px}
.msg .who{font-size:11px;color:var(--dim);margin-bottom:4px}
.ai-quick{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 8px}
.ai-quick button{font-size:12.5px;color:#bfe6ff;background:var(--glass);border:1px solid var(--brd);padding:6px 12px;border-radius:100px;cursor:pointer;transition:.25s}
.ai-quick button:hover{border-color:var(--cyan);background:rgba(79,224,255,.14)}
.ai-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.ai-input input{flex:1;background:var(--glass);border:1px solid var(--brd);color:var(--ink);border-radius:12px;padding:11px 14px;font-size:14px;outline:none}
.ai-input input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(79,224,255,.12)}
.ai-input .send{border:none;background:var(--grad);color:#06121a;font-weight:700;border-radius:12px;padding:0 18px;cursor:pointer}
/* ---------- 弹性入场（backwards：入场照播，结束后让位给 hover） ---------- */
@keyframes popIn{0%{opacity:0;transform:translateY(30px) scale(.98)}60%{transform:translateY(-4px) scale(1.004)}100%{opacity:1;transform:none}}
.eyebrow{animation:popIn .7s .05s backwards cubic-bezier(.2,.8,.2,1)}
.hero h1{animation:sheen 7s linear infinite,popIn .85s .12s backwards cubic-bezier(.2,.8,.2,1)}
.sub{animation:popIn .7s .24s backwards}
.stats .chip{animation:popIn .7s backwards cubic-bezier(.2,.8,.2,1)}
.stats .chip:nth-child(1){animation-delay:.32s}.stats .chip:nth-child(2){animation-delay:.42s}.stats .chip:nth-child(3){animation-delay:.52s}
.card{animation:popIn .72s backwards cubic-bezier(.2,.8,.2,1)}
.card:nth-child(1){animation-delay:.34s}.card:nth-child(2){animation-delay:.44s}.card:nth-child(3){animation-delay:.54s}
.card:nth-child(4){animation-delay:.64s}.card:nth-child(5){animation-delay:.74s}.card:nth-child(6){animation-delay:.84s}
.cta{animation:popIn .8s .9s backwards}
/* ---------- 响应式 ---------- */
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .hero{padding:58px 0 32px}
  .stats{gap:10px}.chip{min-width:132px;padding:16px 16px}.chip .n{font-size:23px}
  .cards{grid-template-columns:1fr}
  section.block{padding:40px 0}
  .btn{width:100%;justify-content:center}
  .ai-panel{right:12px;bottom:96px}
  .ai-fab{right:16px;bottom:18px;width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}