/* ============ XZCLOUD · 欢迎页（玻璃 + 动效） ============ */

/* ---------- 顶部导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 34px;border-radius:0;border-left:0;border-right:0;border-top:0;
  animation:slideDown .5s var(--ease) both;
}
.brand{font-weight:600;font-size:17px;display:flex;align-items:center;gap:10px}
.logo{
  width:32px;height:32px;border-radius:9px;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;background:linear-gradient(135deg,#12b7f5,#7c8ff5);
  box-shadow:0 5px 14px rgba(18,183,245,.4);
}
.links{display:flex;align-items:center;gap:12px}
.links a{font-size:13px;color:#4b5563;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;transition:.25s}
.links a:hover{background:rgba(255,255,255,.7);color:var(--primary)}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid rgba(203,213,225,.9);background:rgba(255,255,255,.8);border-radius:10px;
  padding:8px 17px;font-size:13px;cursor:pointer;color:#374151;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,38,135,.1)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(135deg,#12b7f5,#0ea5dd);border-color:transparent;color:#fff;
  box-shadow:0 6px 18px rgba(18,183,245,.34);
}
.btn.primary:hover{box-shadow:0 12px 28px rgba(18,183,245,.44);filter:brightness(1.05)}
.btn.ghost:hover{border-color:var(--primary);color:var(--primary);background:#fff}
.btn.big{padding:12px 28px;font-size:14.5px}

/* ---------- 主视觉 ---------- */
.hero{position:relative;z-index:2;text-align:center;padding:126px 20px 70px;max-width:1120px;margin:0 auto}
.badge{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#0369a1;
  background:rgba(224,242,254,.85);border:1px solid rgba(125,211,252,.7);
  padding:7px 16px;border-radius:999px;margin-bottom:22px;
}
.hero h1{font-size:46px;line-height:1.25;margin:0 0 20px;letter-spacing:.5px;font-weight:600}
.hero>p{color:#5b6472;font-size:15.5px;margin:0 auto 34px;max-width:680px;line-height:1.95}
.cta{display:flex;gap:14px;justify-content:center;margin-bottom:64px;flex-wrap:wrap}

/* ---------- 主推卡片：网页 QQ 桌面 ---------- */
.feat-main{
  display:grid;grid-template-columns:1fr 1.06fr;gap:34px;align-items:center;text-align:left;
  max-width:1080px;margin:0 auto;padding:34px 36px;border-radius:22px;
}
.fm-left{min-width:0}
.fm-ic{
  width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;background:linear-gradient(135deg,#12b7f5,#7c8ff5);
  box-shadow:0 8px 22px rgba(18,183,245,.36);margin-bottom:16px;
  animation:floatY 5s ease-in-out infinite;
}
.feat-main h3{font-size:23px;margin:0 0 8px;font-weight:600;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
/* 多端标注：模仿 QQ 官网 (QQ(安卓) / 电脑版) 式样 */
.fm-tag{
  font-size:11.5px;font-weight:400;color:#8b95a5;letter-spacing:.2px;
  background:rgba(241,245,249,.9);border:1px solid rgba(226,232,240,.95);
  border-radius:7px;padding:3px 10px;line-height:1.5;white-space:nowrap;
}
.fm-desc{color:#6b7280;font-size:14px;line-height:1.8;margin:0 0 22px}

/* 特性列表：图标 + 大标题 + 小说明，做出大小字层次 */
.fm-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:15px}
.fm-list li{display:flex;gap:13px;align-items:flex-start}
.fm-list li i{
  width:30px;height:30px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--primary);background:var(--primary-l);margin-top:1px;
  transition:transform .3s var(--ease),background .3s;
}
.fm-list li:hover i{transform:scale(1.1);background:#d6eefc}
.fm-list h4{margin:0 0 3px;font-size:14px;font-weight:600;color:#1f2937;line-height:1.4}
.fm-list p{margin:0;font-size:12.5px;color:#7b8494;line-height:1.65}

/* 底部小字（markdown 式的补充说明） */
.fm-note{
  display:flex;align-items:center;gap:8px;margin:0 0 22px;
  font-size:12px;color:#94a3b8;line-height:1.6;
}
.fm-note i{color:#22c55e;font-size:13px}
.fm-foot{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 浏览器窗口模拟 ---------- */
.fm-right{perspective:1600px}
.mock{
  border-radius:18px;overflow:hidden;
  transform:rotateY(-6deg) rotateX(3deg);
  transition:transform .6s var(--ease);
}
.mock:hover{transform:rotateY(0) rotateX(0) translateY(-6px)}
.mock-bar{
  display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:rgba(246,248,251,.92);border-bottom:1px solid rgba(226,232,240,.85);
}
.mock-bar .dot{width:10px;height:10px;border-radius:50%}
.mock-url{
  flex:1;margin-left:12px;font-size:11.5px;color:#8b95a5;background:rgba(255,255,255,.95);
  border-radius:7px;padding:5px 12px;display:flex;align-items:center;gap:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mock-body{display:flex;height:352px;background:rgba(255,255,255,.5)}

/* 左侧会话列表 */
.mock-side{
  width:172px;flex-shrink:0;border-right:1px solid rgba(226,232,240,.8);
  padding:12px 9px;display:flex;flex-direction:column;gap:7px;background:rgba(255,255,255,.55);
}
.mock-me{
  display:flex;align-items:center;gap:9px;padding:4px 6px 13px;
  border-bottom:1px solid rgba(226,232,240,.85);margin-bottom:5px;
}
.mock-txt{min-width:0;flex:1}
.mock-txt b{font-size:12px;display:block;color:#1f2937;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.mock-txt em{font-size:10.5px;color:#9ca3af;font-style:normal;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;margin-top:1px}
.mock-me .mock-txt em{color:#22c55e}
.mock-av{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#12b7f5,#7c8ff5);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;
}
.mock-conv{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:10px;transition:.25s}
.mock-conv.on{background:rgba(230,245,254,.95)}
.mock-cav{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;font-weight:500;
  background:#e6f5fe;color:#0ea5dd;display:flex;align-items:center;justify-content:center;font-size:10px;
}
.mock-cav.c-tg{background:#e8f0fe;color:#4285f4}
.mock-cav.c-dc{background:#ede9fe;color:#7c3aed}
.mock-cav.sm{width:24px;height:24px;font-size:9px}
.mock-badge{
  margin-left:auto;flex-shrink:0;background:#ff4d4f;color:#fff;font-size:9.5px;font-style:normal;
  border-radius:9px;padding:1.5px 6px;line-height:1.4;
}

/* 右侧聊天区 */
.mock-chat{flex:1;display:flex;flex-direction:column;min-width:0}
.mock-head{
  display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid rgba(226,232,240,.8);background:rgba(255,255,255,.65);
}
.mock-head b{font-size:12.5px;color:#1f2937;font-weight:500}
.mock-msgs{flex:1;padding:15px;display:flex;flex-direction:column;gap:13px;overflow:hidden}
.mock-msg{display:flex;gap:8px;align-items:flex-start}
.mock-msg.me{justify-content:flex-end}
.mock-msg.me>div{text-align:right}
.mock-bav{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;font-size:9.5px;
  background:#e8f0fe;color:#4285f4;display:flex;align-items:center;justify-content:center;
}
.mock-bav.c-pink{background:#fde8ef;color:#d4537e}
.mock-name{font-size:9.5px;color:#a5adba;margin-bottom:3px;line-height:1.3}
.mock-name.r{text-align:right}
.mk-b{
  background:#fff;border:1px solid rgba(226,232,240,.9);border-radius:5px 12px 12px 12px;
  padding:7px 12px;font-size:12px;line-height:1.5;color:#374151;display:inline-block;
  max-width:200px;box-shadow:0 1px 3px rgba(31,38,135,.05);
}
.mk-b.me{
  background:linear-gradient(135deg,#12b7f5,#0ea5dd);color:#fff;border-color:transparent;
  border-radius:12px 5px 12px 12px;box-shadow:0 3px 10px rgba(18,183,245,.24);
}
.mk-b.sticker{background:none;border:0;box-shadow:none;font-size:26px;padding:0;line-height:1}
.mock-typing{display:flex;gap:4px;padding-left:30px}
.mock-typing i{width:5px;height:5px;border-radius:50%;background:#c7cdd6;animation:typing 1.2s infinite}
.mock-typing i:nth-child(2){animation-delay:.18s}
.mock-typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.mock-input{
  display:flex;align-items:center;gap:11px;padding:11px 15px;
  border-top:1px solid rgba(226,232,240,.85);background:rgba(255,255,255,.72);
}
.mock-tool{color:#9ca3af;font-size:13.5px;flex-shrink:0}
.mock-input em{flex:1;font-size:11.5px;color:#b5bac2;font-style:normal;white-space:nowrap;overflow:hidden}
.mock-send{
  flex-shrink:0;background:linear-gradient(135deg,#12b7f5,#0ea5dd);color:#fff;
  font-size:11px;border-radius:8px;padding:5px 14px;box-shadow:0 2px 8px rgba(18,183,245,.3);
}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.34);display:none;align-items:center;justify-content:center;z-index:40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal.show{display:flex;animation:fadeIn .2s ease both}
.panel{border-radius:20px;padding:34px 32px;width:404px;max-width:92vw}
.panel h2{margin:0 0 4px;font-size:19px;font-weight:600}
.sub{color:#8a8f99;font-size:12.5px;margin:0 0 20px}
.panel input{
  width:100%;border:1px solid rgba(203,213,225,.9);border-radius:10px;padding:11px 13px;font-size:13.5px;
  margin-bottom:12px;background:rgba(255,255,255,.85);font-family:inherit;transition:.25s;
}
.panel input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(18,183,245,.14);background:#fff}
.row{display:flex;gap:10px}.row input{flex:1}
.btn.code{white-space:nowrap;margin-bottom:12px;padding:0 14px;font-size:12.5px;border-color:var(--primary);color:var(--primary);background:rgba(255,255,255,.7)}
.btn.code:hover{background:var(--primary-l)}
.btn.code:disabled{opacity:.5;cursor:not-allowed;transform:none}
.err{display:none;background:rgba(254,242,242,.95);border:1px solid #fecaca;color:#b91c1c;padding:9px 13px;border-radius:9px;font-size:12.5px;margin-bottom:12px}
.err.show{display:block;animation:slideDown .22s var(--ease)}
.panel .btn.primary{width:100%;padding:11px;justify-content:center}
.switch-line{margin-top:16px;font-size:12.5px;color:#8a8f99;text-align:center}
.switch-line a{color:var(--primary)}

/* ---------- 响应式 ---------- */
@media(max-width:960px){
  .feat-main{grid-template-columns:1fr;padding:26px 22px;gap:26px}
  .hero h1{font-size:33px}
  .hero{padding:112px 18px 50px}
  .nav{padding:11px 18px}
  .links a span{display:none}
}

/* ---------- 手机端（<= 640px） ---------- */
@media(max-width:640px){
  /* 顶部导航：压缩留白，按钮收成图标 + 短文字 */
  .nav{padding:9px 13px}
  .brand{font-size:15px}
  .logo{width:28px;height:28px;font-size:11px;border-radius:8px}
  .links{gap:6px}
  .links a{font-size:12px;padding:6px 8px;gap:5px}
  .links .btn{padding:7px 12px;font-size:12.5px;gap:5px}

  /* 主视觉 */
  .hero{padding:92px 15px 42px}
  .hero h1{font-size:26px;line-height:1.35;margin-bottom:14px}
  .hero>p{font-size:13.5px;line-height:1.85;margin-bottom:24px}
  .badge{font-size:11.5px;padding:6px 13px;margin-bottom:16px}
  .cta{gap:10px;margin-bottom:38px}
  .btn.big{padding:11px 20px;font-size:13.5px;width:100%;justify-content:center}
  .cta .btn{flex:1 1 auto}

  /* 主推卡片 */
  .feat-main{padding:20px 16px;gap:20px;border-radius:18px}
  .fm-ic{width:44px;height:44px;font-size:19px;border-radius:13px;margin-bottom:12px}
  .feat-main h3{font-size:18.5px;gap:8px;margin-bottom:7px}
  .fm-tag{font-size:10.5px;padding:2px 8px}
  .fm-desc{font-size:13px;margin-bottom:16px}
  .fm-list{gap:13px;margin-bottom:16px}
  .fm-list li{gap:11px}
  .fm-list li i{width:27px;height:27px;font-size:11.5px;border-radius:8px}
  .fm-list h4{font-size:13.5px}
  .fm-list p{font-size:12px}
  .fm-note{font-size:11.5px;margin-bottom:16px}
  .fm-foot{gap:9px}
  .fm-foot .btn{flex:1 1 auto;justify-content:center}

  /* 模拟图：手机端改为「聊天区优先」，隐藏左栏避免挤成一团 */
  .fm-right{perspective:none}
  .mock{transform:none;border-radius:15px}
  .mock-body{height:270px}
  .mock-side{width:118px;padding:9px 7px;gap:6px}
  .mock-me{padding:3px 4px 9px;gap:7px;margin-bottom:4px}
  .mock-txt b{font-size:11px}
  .mock-txt em{font-size:9.5px}
  .mock-av{width:26px;height:26px;font-size:10px}
  .mock-conv{padding:7px 6px;gap:7px}
  .mock-cav{width:25px;height:25px;font-size:9.5px}
  .mock-cav.sm{width:22px;height:22px;font-size:8.5px}
  .mock-badge{font-size:9px;padding:1px 5px}
  .mock-head{padding:9px 11px;gap:7px}
  .mock-head b{font-size:11.5px}
  .mock-msgs{padding:11px;gap:10px}
  .mock-bav{width:20px;height:20px;font-size:9px}
  .mock-name{font-size:9px}
  .mk-b{font-size:11px;padding:6px 10px;max-width:150px}
  .mk-b.sticker{font-size:22px}
  .mock-input{padding:9px 11px;gap:8px}
  .mock-tool{font-size:12px}
  .mock-input em{font-size:10.5px}
  .mock-send{font-size:10.5px;padding:4px 12px}
  .mock-url{font-size:10.5px;padding:4px 9px;margin-left:8px}

  /* 弹窗：底部弹出的抽屉式，更好按 */
  .modal{align-items:flex-end;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .panel{
    width:100%;max-width:100%;border-radius:18px 18px 0 0;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
    animation:sheetUp .32s var(--ease) both;
  }
  .panel h2{font-size:17.5px}
  .sub{font-size:12px;margin-bottom:16px}
  .panel input{padding:11px 13px;font-size:14px}   /* >=14px 防止 iOS 聚焦自动放大 */
  .row{gap:8px}
  .btn.code{padding:0 11px;font-size:12px}
  .switch-line{font-size:12px;margin-top:14px}
}
@keyframes sheetUp{from{transform:translateY(100%);opacity:.6}to{transform:none;opacity:1}}

/* ---------- 超窄屏（<= 380px） ---------- */
@media(max-width:380px){
  .hero h1{font-size:23px}
  .hero>p{font-size:13px}
  .feat-main{padding:17px 13px}
  .mock-body{height:244px}
  .mock-side{width:104px}
  .links a span{display:none}
}