/* ==========================================================================
}
.kefu-copy.is-saved{ background:linear-gradient(160deg, #7C88BA 0%, #7381B4 55%, #6B79B0 100%); box-shadow:0 0 0 1px rgba(131,144,193,.55), 0 8px 26px rgba(123,137,188,.42); }
/* ==========================================================================
   layout.css — 舞台、导航、左下文字块、右下信息块、场景二、底部四卡
   ========================================================================== */

/* ======================= 舞台 ======================= */
.stage{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(130% 78% at 50% -8%, #F2F2F2 0%, rgba(242,242,242,0) 58%),
    linear-gradient(180deg, #EEEEEE 0%, var(--bg) 32%, var(--bg-deep) 100%);
  isolation:isolate;
}

/* 粒子画布：铺满，居中视觉重心略低于几何中心（参考立方体中心 50%/45%） */
.stage__canvas{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:var(--z-canvas);
  display:block;
}

/* 文字区浅色光晕：墨字压在地球点阵上仍保持清晰 */
.scene1__left::before,
.scene1__right::before{
  content:"";
  position:absolute;
  inset:-16% -10%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(closest-side, rgba(242,242,242,.88), rgba(242,242,242,0) 80%);
  filter:blur(12px);
}

/* 暗角 + 顶部/底部压暗，让文字区更稳 */
.stage__vignette{
  position:absolute;
  inset:0;
  z-index:var(--z-canvas);
  pointer-events:none;
  background:
    radial-gradient(72% 60% at 50% 42%, transparent 55%, rgba(11,11,12,.05) 100%),
    linear-gradient(to bottom, rgba(11,11,12,.045) 0%, transparent 16%, transparent 80%, rgba(11,11,12,.05) 100%);
}

/* 树干根部辉光球 */
.stage__core{
  position:absolute;
  left:50%; top:66%;
  width:34vw; height:24vh;
  transform:translate(-50%,-50%);
  z-index:var(--z-canvas);
  pointer-events:none;
  background:radial-gradient(closest-side, rgba(46,91,255,.14), rgba(46,91,255,.06) 44%, transparent 74%);
  filter:blur(22px);
}

/* ======================= 顶栏 ======================= */
.nav{
  position:absolute;
  left:0; right:0; top:0;
  height:var(--nav-h);
  z-index:var(--z-nav);
  display:flex;
  align-items:center;
  padding-left:var(--nav-pad-l);
  padding-right:var(--nav-pad-r);
}

/* --- logo：锚形图标 + 点阵字 --- */
.logo{
  display:flex;
  align-items:center;
  gap:0.96vw;                      /* 图标右沿 135 -> 文字左沿 158 = 23px */
  color:var(--ink);
  flex:0 0 auto;
}
.logo__mark{
  width:2.88vw;                    /* 锚形图标 69x68 */
  height:3.79vh;
  flex:0 0 auto;
  overflow:visible;
}
.logo__text{
  font-family:var(--font-display);
  font-variation-settings:var(--display-variation);
  font-weight:var(--display-weight);
  font-size:var(--logo-size);
  line-height:1;
  letter-spacing:var(--logo-ls);
  white-space:nowrap;
  padding-top:.06em;               /* 点阵字视觉居中微调 */
}

/* --- 中间玻璃胶囊 --- */
.capsule{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  height:var(--capsule-h);
  display:flex;
  align-items:center;
  gap:2.79vw;                      /* 链接间隙 67px */
  padding:0 1.98vw;                /* 左右内边距 47.5px */
  border-radius:999px;
  background:var(--capsule-fill);
  border:1px solid var(--glass-line-2);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.2);
  backdrop-filter:blur(var(--blur)) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  white-space:nowrap;
}
.capsule a{
  font-size:var(--fs-nav);
  font-weight:500;
  letter-spacing:-.005em;
  color:#3A3A3D;
  line-height:1;
  transition:color .2s ease;
}
.capsule a:hover{ color:#0B0B0C; }
.capsule a.is-active{ color:#0B0B0C; font-weight:600; }
.capsule a.is-nav-hidden{ display:none !important; }

/* --- 右侧按钮 --- */
.nav__actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.83vw;
  flex:0 0 auto;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55vw;
  border:0;
  white-space:nowrap;
  font-family:var(--font-ui);
  line-height:1;
  transition:background-color .2s ease, color .2s ease,
             transform .2s var(--e-soft), box-shadow .2s ease;
}
.btn--blue{
  height:var(--btn-h);
  padding:0 1.65vw;                /* 文字左沿 2070 - 按钮左沿 2031 = 39px */
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:var(--fs-navbtn);
  font-weight:500;
  box-shadow:0 0 0 1px rgba(46,91,255,.28), 0 6px 26px rgba(46,91,255,.30);
}
.btn--blue:hover{
  background:var(--blue-hi);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(46,91,255,.45), 0 10px 32px rgba(46,91,255,.38);
}
.btn--blue:active{ transform:translateY(0); }

/* 汉堡（窄屏才出现） */
.burger{
  display:none;
  width:44px; height:36px;
  border-radius:999px;
  background:var(--capsule-fill);
  border:1px solid var(--glass-line-2);
  align-items:center; justify-content:center;
}
.burger i{
  display:block; width:16px; height:1.5px; background:#ededed; border-radius:2px; position:relative;
}
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:#ededed; border-radius:2px;
}
.burger i::before{ top:-5px; }
.burger i::after{ top:5px; }

/* ======================= 右上：QR 下载模块 ======================= */
.qr{
  position:absolute;
  right:3.92vw;
  top:15.35vh;
  display:flex;
  align-items:flex-start;
  gap:1.08vw;
  z-index:var(--z-ui);
}
.qr__img{
  width:6.04vw;                    /* 145px 见方 */
  height:6.04vw;
  flex:0 0 auto;
  color:var(--ink);
  opacity:.92;
}
.qr__side{
  display:flex;
  flex-direction:column;
  gap:1.05vh;
  padding-top:.2vh;
}
.qr__text{
  margin:0;
  font-size:var(--fs-qr);
  font-weight:500;
  line-height:1.3;
  color:#26262A;
  white-space:nowrap;
}
.qr__stores{
  display:flex;
  align-items:center;
  gap:.72vw;
  color:#3A3A3D;
}
.qr__stores svg{ height:1.90vh; width:auto; }

/* ======================= 窄屏抽屉菜单 ======================= */
.menu{
  position:absolute;
  top:calc(var(--nav-h) - 6px);
  right:var(--gutter-r);
  width:min(300px, calc(100vw - 40px));
  padding:10px 8px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border:1px solid var(--glass-line);
  box-shadow:0 24px 60px rgba(11,11,12,.16);
  z-index:var(--z-ui);
  display:none;
  flex-direction:column;
}
.menu.is-open{ display:flex; animation:menuIn .18s ease both; }
@keyframes menuIn{
  from{ opacity:0; transform:translateY(-6px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.menu a{
  padding:12px 14px;
  border-radius:12px;
  font-size:15px;
  color:#3A3A3D;
  transition:background-color .18s ease, color .18s ease;
}
.menu a:hover{ background:rgba(11,11,12,.05); color:#0B0B0C; }
.menu a.is-nav-hidden{ display:none !important; }
.menu__divider{ height:1px; margin:8px 14px; background:rgba(11,11,12,.08); }
.menu__cta{
  display:flex; align-items:center; justify-content:center;
  margin:6px 8px 0;
  padding:13px 16px;
  border-radius:14px;
  background:var(--blue);
  color:#fff !important;
  font-weight:600;
}
@media (min-width:1101px){ .menu{ display:none !important; } }

/* ======================= 场景容器 ======================= */
.scene{
  position:absolute;
  inset:0;
  z-index:var(--z-scene);
  pointer-events:none;
}
.scene > *{ pointer-events:auto; }

/* --- 场景一：左下文字块 --- */
.scene1__left{
  position:absolute;
  left:var(--gutter);
  bottom:6.10vh;
  max-width:64vw;
  z-index:var(--z-ui);  /* 保证光晕层压在粒子画布之上 */
}
.scene1__right{
  position:absolute;
  z-index:var(--z-ui);
  right:var(--gutter-r);
  bottom:4.85vh;
  width:27.00vw;                   /* 段落墨宽 648px */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* --- 徽章药丸 --- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.73vw;
  height:var(--badge-h);
  padding:0 1.35vw;
  border-radius:999px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(46,91,255,.55);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 0 22px rgba(42,107,194,.35), inset 0 0 18px rgba(42,107,194,.14);
  margin-bottom:2.80vh;            /* 药丸底 1145 -> 标题首行顶 1212 = 67px */
}
.badge__dot{
  width:.94vw; height:.94vw;       /* 蓝色实心点直径 22.5px */
  border-radius:50%;
  background:var(--blue-hi);
  box-shadow:0 0 10px rgba(46,91,255,.40);
  flex:0 0 auto;
}
.badge__text{
  font-size:var(--fs-badge);
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#0B0B0C;
  line-height:1;
  white-space:nowrap;
}

/* --- 点阵巨字标题 --- */
.headline{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:var(--display-variation);
  font-weight:var(--display-weight);
  font-size:var(--display-size);
  line-height:var(--display-lh);
  letter-spacing:var(--display-ls);
  color:var(--ink);
  white-space:nowrap;
}
.headline span{ display:block; }
/* 遮罩揭幕：每行一个 overflow 容器 */
.headline .ln{
  display:block;
  overflow:hidden;
  padding-top:.10em;
  margin-top:-.10em;
}
.headline .ln > i{
  display:block;
  font-style:normal;
  will-change:transform;
}

/* --- 右下说明段 --- */
.lede{
  margin:0 0 2.85vh;               /* 段底 1541 -> 按钮顶 1592 = 51px */
  font-size:var(--fs-lede);
  font-weight:400;
  line-height:1.43;                /* 行距 40px / 字号 28px */
  letter-spacing:-.004em;
  color:var(--ink-muted);
}

/* --- 右下按钮排 --- */
.cta-row{
  display:flex;
  align-items:center;
  gap:.83vw;
}
.btn--lg{
  height:var(--cta-h);
  border-radius:var(--cta-radius);
  font-size:var(--fs-cta);
  font-weight:500;
  padding:0 1.85vw;
}
.btn--light{
  background:#0B0B0C;
  color:#F5F5F5;
  box-shadow:0 14px 30px -14px rgba(11,11,12,.55);
}
.btn--light:hover{ background:#000; transform:translateY(-1px); }
.btn--ghost{
  background:rgba(255,255,255,.55);
  color:#0B0B0C;
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.85); transform:translateY(-1px); }

/* ======================= 场景二 ======================= */
.scene2{
  position:absolute;
  inset:0;
  z-index:var(--z-scene);
  /* 可见度由滚动进度 --p2 驱动（--p2 挂在 .stage 上，向下继承） */
  opacity:clamp(0, calc(var(--p2, 0) * 1.35), 1);
  pointer-events:none;
}
/* 首屏整体 */
.scene1{
  position:absolute;
  inset:0;
  z-index:var(--z-scene);
  pointer-events:none;
}
.scene2__title{
  position:absolute;
  left:var(--gutter);
  top:13.60vh;                     /* 首行墨顶 y=198 / 1430 */
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:var(--display-variation);
  font-weight:var(--display-weight);
  font-size:var(--display-size);
  line-height:var(--display-lh);
  letter-spacing:var(--display-ls);
  color:var(--ink);
  white-space:nowrap;
}
.scene2__lede{
  position:absolute;
  right:var(--gutter-r);
  top:15.60vh;                     /* 段顶 y=223 / 1430 */
  width:22.40vw;
  margin:0;
  font-size:var(--fs-lede);
  line-height:1.43;
  color:var(--ink-muted);
}

/* --- 底部四卡：刻意打破网格，各自错位 --- */
.cards{
  position:absolute;
  left:3.23vw;
  right:3.23vw;
  top:0;
  height:100%;
  display:flex;
  align-items:flex-start;
  gap:var(--card-gap);
  pointer-events:none;
}
.card{
  position:relative;
  flex:1 1 0;
  min-width:0;
  margin-top:var(--card-top);
  height:var(--card-h);
  padding:var(--card-pad-y) var(--card-pad-x);
  border-radius:var(--card-radius);
  background:linear-gradient(160deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.42) 42%, rgba(255,255,255,.30) 100%);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 0 40px rgba(46,91,255,.03),
    0 18px 44px rgba(11,11,12,.12);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:auto;
  overflow:hidden;
  will-change:transform,opacity;
}
/* 每张卡的高度 / 垂直错位（f005 实测）：
   卡1 top67.10 h28.70 | 卡2 top64.90 h29.10 | 卡3 top66.40 h29.70 | 卡4 top68.10 h26.90 */
.card:nth-child(1){ --card-top:67.10vh; --card-h:28.70vh; }
.card:nth-child(2){ --card-top:64.90vh; --card-h:29.10vh; }
.card:nth-child(3){ --card-top:66.40vh; --card-h:29.70vh; }
.card:nth-child(4){ --card-top:68.10vh; --card-h:26.90vh; }

.card__no{
  align-self:flex-end;
  font-size:var(--fs-card-no);
  font-weight:400;
  color:var(--ink-dim);
  letter-spacing:.01em;
  line-height:1;
}
.card__body{ display:flex; flex-direction:column; gap:1.10vh; }
.card__title{
  margin:0;
  font-size:var(--fs-card-tt);
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.011em;
  color:#0B0B0C;
}
.card__text{
  margin:0;
  font-size:var(--fs-card-bd);
  font-weight:400;
  line-height:1.6;                 /* 行距 32px @1920 */
  letter-spacing:-.004em;
  color:var(--ink-body);
}

/* ======================= 入场遮罩（首屏未启动前） ======================= */
.boot-veil{
  position:fixed;
  inset:0;
  z-index:60;
  background:var(--bg-deep);
  opacity:1;
  transition:opacity .7s linear;
  pointer-events:none;
}
.boot-veil.is-gone{ opacity:0; }

/* ======================= 登录页 ======================= */
body.page-login .scene1__left{ bottom:8.20vh; }
.login-card{
  width:27.00vw;
  padding:2.10vh 2.10vw 2.40vh;
  border-radius:1.05vw;
  /* 登录控制台保持深色观感：底色钉死，不随页面换肤。
     Give-ai 定制（2026-09-18）：底色由近黑 #161320 调淡为石墨灰 #30353e（两档：先 #262a31，再浅一档），
     去紫调转中性灰，顶部高光减弱、描边略提亮 —— 观感更"高级"且不刺眼。 */
  background:linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.028) 44%, rgba(255,255,255,.012) 100%), #30353e;
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 0 60px rgba(140,170,255,.045),
    0 26px 60px rgba(0,0,0,.42);
}
.login-card__title{
  margin:0 0 1.90vh;
  font-size:1.30vw;
  font-weight:600;
  letter-spacing:-.012em;
  color:#fff;
}
.field{ display:block; margin-bottom:1.55vh; }
.field__label{
  display:block;
  margin-bottom:.85vh;
  font-size:.92vw;
  font-weight:500;
  letter-spacing:.01em;
  color:#adb3be;
}
.field__wrap{ position:relative; display:flex; align-items:center; }
.field__input{
  width:100%;
  height:5.35vh;
  padding:0 1.05vw;
  border-radius:.62vw;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.075);
  color:#fff;
  font-size:1.02vw;
  font-weight:400;
  outline:none;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.field__input::placeholder{ color:#949aa5; }
.field__input:hover{ border-color:rgba(255,255,255,.18); }
.field__input:focus{
  border-color:#4d8ef0;
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(42,107,194,.22);
}
.field__input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}
.field__eye{
  position:absolute;
  right:.85vw;
  width:1.4vw; height:1.4vw;
  display:flex; align-items:center; justify-content:center;
  color:#a5abb7;
  border-radius:50%;
  transition:color .2s ease;
}
.field__eye:hover{ color:#fff; }

.login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:.4vh 0 2.15vh;
  font-size:.92vw;
}
.check{
  display:inline-flex;
  align-items:center;
  gap:.5vw;
  color:#adb3be;
  user-select:none;
}
.check input{
  appearance:none;
  width:1.02vw; height:1.02vw;
  border-radius:.22vw;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.08);
  display:grid; place-content:center;
  transition:background-color .18s ease, border-color .18s ease;
}
.check input:checked{
  background:#2a6bc2;
  border-color:#2a6bc2;
}
.check input:checked::after{
  content:"";
  width:.52vw; height:.30vw;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.link-quiet{ color:#afb9ca; transition:color .18s ease; }
.link-quiet:hover{ color:#7fc4ff; }

.login-submit{
  width:100%;
  height:var(--cta-h);
  border-radius:999px;
  /* Give-ai 定制 2026-09-19：与「进入控制台」同款灰蓝渐变（与粒子球同色），替换原高饱和蓝 #2a6bc2 */
  background:linear-gradient(160deg, #8B96C6 0%, #8390C1 55%, #7B89BC 100%);
  color:#fff;
  font-size:1.15vw;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 0 0 1px rgba(131,144,193,.35), 0 10px 30px rgba(123,137,188,.38);
  transition:background-color .2s ease, transform .2s var(--e-soft), box-shadow .2s ease;
}
.login-submit:hover{
  background:linear-gradient(160deg, #7C88BA 0%, #7381B4 55%, #6B79B0 100%);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(131,144,193,.55), 0 10px 32px rgba(123,137,188,.45);
}
.login-submit:active{ transform:translateY(0); }
.login-submit[disabled]{ opacity:.6; pointer-events:none; }

.login-foot{
  margin:1.85vh 0 0;
  text-align:center;
  font-size:.92vw;
  color:#a5abb7;
}
.login-msg{
  margin:1.35vh 0 0;
  min-height:1.1em;
  font-size:.92vw;
  text-align:center;
  color:#7fc4ff;
  opacity:0;
  transition:opacity .25s ease;
}
.login-msg[data-state]{ opacity:1; }
.login-msg[data-state="err"]{ color:#ff8a8a; }

/* ======================= 响应式 ======================= */
@media (max-width: 1100px){
  .capsule{ display:none; }
  .nav__actions .btn--blue{ display:none; }
  .burger{ display:inline-flex; }

  .scene1__left{
    left:var(--gutter); right:var(--gutter);
    bottom:auto; top:50%;
    transform:translateY(-50%);
    max-width:none;
  }
  .scene1__right{
    left:var(--gutter); right:var(--gutter);
    width:auto;
    bottom:5vh;
    align-items:flex-start;
  }
  /* 窄屏：左右两块不再上下重叠，改为单一竖排 */
  .scene1__left{ top:22vh; transform:none; }
  .headline{ white-space:normal; }
  .headline span{ white-space:nowrap; }

  .lede{ margin-bottom:2vh; }
  .cta-row{ flex-wrap:wrap; }
  .btn--lg{ padding:0 22px; }

  .scene2__title{ top:9vh; }
  .scene2__lede{ position:static; width:auto; margin:0 var(--gutter) 3vh; }

  .cards{
    position:absolute;
    left:var(--gutter); right:var(--gutter);
    top:auto; bottom:4vh; height:auto;
    flex-wrap:wrap;
    gap:12px;
  }
  .card{
    flex:1 1 calc(50% - 6px);
    margin-top:0 !important;
    height:auto !important;
    min-height:150px;
    gap:14px;
  }
  .card__no{ align-self:flex-start; }
  .card:nth-child(1),.card:nth-child(2),.card:nth-child(3),.card:nth-child(4){
    --card-top:0; --card-h:auto;
  }
  .login-card{ width:auto; border-radius:20px; padding:24px 20px 26px; }
  .login-card__title{ font-size:17px; }
  .field{ margin-bottom:14px; }
  .field__label{ font-size:12px; margin-bottom:7px; }
  .field__input{ height:46px; border-radius:12px; padding:0 14px; font-size:15px; }
  .field__eye{ width:20px; height:20px; right:12px; }
  .login-row{ font-size:12px; margin:4px 0 18px; }
  .check input{ width:15px; height:15px; border-radius:4px; }
  .check input:checked::after{ width:7px; height:4px; }
  .login-submit{ font-size:15px; height:48px; }
  .login-foot{ font-size:12px; margin-top:16px; }
  .login-msg{ font-size:12px; }
  .link-quiet{ font-size:12px; }
}

@media (max-width: 560px){
  .cards{ flex-direction:column; }
  .card{ flex:1 1 auto; min-height:0; }
  .scene1__left{ top:16vh; }
}

/* ==========================================================================
   登录弹窗（2026-09-17 首页合并登录：点按钮弹出，不跳转页面）
   ========================================================================== */
.login-modal{
  position:fixed; inset:0; z-index:90;
  display:none;
  align-items:center; justify-content:center;
  padding:4vh 4vw;
}
.login-modal.is-open{ display:flex; }

.login-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(11,11,12,.45);
  backdrop-filter:blur(16px) saturate(.9);
  -webkit-backdrop-filter:blur(16px) saturate(.9);
  animation:bdfIn .28s ease both;
}
@keyframes bdfIn{ from{ opacity:0; } to{ opacity:1; } }

.login-modal__panel{
  position:relative;
  width:min(92vw, 470px);
  max-height:92vh;
  overflow:auto;
  animation:panelIn .34s cubic-bezier(.2,.9,.25,1.12) both;
}
@keyframes panelIn{
  from{ opacity:0; transform:translateY(20px) scale(.95); }
  to{ opacity:1; transform:none; }
}

/* 弹窗内登录卡：宽度脱离场景容器，按弹窗定宽 */
.login-modal .login-card{ width:100%; }

.login-modal__close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:44px; height:44px;               /* 触摸目标 ≥44px */
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.72);
  border-radius:50%;
  transition:color .18s ease, background .18s ease;
}
.login-modal__close:hover{ color:#fff; background:rgba(255,255,255,.08); }
.login-modal__close i,
.login-modal__close i::before{
  content:""; display:block; position:relative;
  width:16px; height:1.6px; background:currentColor; border-radius:2px;
  transform:rotate(45deg);
}
.login-modal__close i::before{
  position:absolute; left:0; top:0;
  transform:rotate(90deg);
}

/* 弹窗打开时锁住页面滚动（也切断虚拟滚动的滚轮劫持） */
body.modal-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .login-modal__backdrop{ animation:none; }
  .login-modal__panel{ animation:none; }
}

/* 弹窗里的登录卡不受首页入场动画门控（html.anim 阶段也要立即可见） */
html.anim .login-modal .login-card,
html.go .login-modal .login-card{ opacity:1 !important; animation:none; }

/* ==========================================================================
   模型矩阵横条（2026-09-17 移植自 give-ai-landing dock，位：导航正下方）
   ========================================================================== */
.ticker{
  position:absolute;
  left:var(--gutter); right:var(--gutter-r);
  top:12.4vh;                        /* 导航 10.8vh 正下方 */
  z-index:var(--z-ui);
}
.ticker__bar{
  position:relative; overflow:hidden;
  padding:.90vh 0;
  border-radius:999px;
  background:var(--glass-fill-2);
  border:1px solid var(--glass-line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker__track{ display:flex; width:max-content; animation:tickerSlide 40s linear infinite; }
.ticker__bar:hover .ticker__track{ animation-play-state:paused; }
.ticker__g{
  display:flex; align-items:center;
  gap:clamp(26px,3.2vw,54px);
  padding-right:clamp(26px,3.2vw,54px);
}
.ticker__g span{
  font-size:.86vw; font-weight:500;
  color:var(--ink-3, rgba(11,11,12,.62));
  letter-spacing:-.01em; white-space:nowrap; opacity:.9;
}
@keyframes tickerSlide{ to{ transform:translateX(-50%); } }
.ticker__lbl{
  margin-top:.9vh; text-align:center;
  font-size:.72vw; letter-spacing:.05em;
  color:var(--ink-4, rgba(11,11,12,.42));
}
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation:none; }
}

/* ==========================================================================
   2026-09-17 三处迭代
   ========================================================================== */
/* 1) 进入控制台按钮：背景与粒子球同色（实测采样 #8891B8 / 球心 #808BB7） */
.btn--blue{
  background:linear-gradient(160deg, #8B96C6 0%, #8390C1 55%, #7B89BC 100%);
}
.btn--blue:hover{
  background:linear-gradient(160deg, #7C88BA 0%, #7381B4 55%, #6B79B0 100%);
  box-shadow:0 0 0 1px rgba(131,144,193,.55), 0 10px 32px rgba(123,137,188,.45);
}

/* 2) 场景二标题：Hanken 800 字宽远超原像素字体，字号缩至 5.25vw
      （6.55vw 时 "One Gateway" 右沿 74.8vw，压住 74.4vw 起的右侧段落） */
.scene2__title{ font-size:5.25vw; }

/* 3) 底部四卡悬停互动：上浮 + 蓝调描边 + 阴影加深 + 编号点亮 */
.card{
  transition:transform .34s cubic-bezier(.2,.9,.25,1.1),
             box-shadow .34s ease,
             border-color .30s ease,
             background .30s ease;
}
.card:hover{
  transform:translateY(-1.30vh);
  border-color:rgba(131,144,193,.55);
  background:linear-gradient(160deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.60) 42%, rgba(255,255,255,.46) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 60px rgba(131,144,193,.08),
    0 30px 60px rgba(11,11,12,.18),
    0 12px 32px rgba(131,144,193,.22);
}
.card:hover .card__no{ color:#7B89BC; }
@media (prefers-reduced-motion: reduce){
  .card, .card:hover{ transform:none; transition:none; }
}

/* 徽章圆点：与粒子球同色（覆盖原品牌蓝），脉冲光晕同步换色 */
.badge__dot{
  background:#8390C1;
  box-shadow:0 0 10px rgba(131,144,193,.50);
}
@keyframes dotPulse{
  0%,100%{ opacity:1;   box-shadow:0 0 10px rgba(131,144,193,.80); }
  50%    { opacity:.72; box-shadow:0 0 16px rgba(131,144,193,.55); }
}

/* ==========================================================================
   卡片 3D 鼠标跟随（2026-09-17：与首页粒子地球同一套鼠标交互语言）
   JS 只写 --tilt-x/--tilt-y/--glare-x/--glare-y 四个变量
   ========================================================================== */
.cards{ perspective:1200px; }
/* 注意：.card 的 transform（视差 + 倾斜）统一在 motion.css 定义，
   否则会被滚动视差规则覆盖——此处不再重复声明 */
/* 光标高光斑：粒子蓝，跟随光标位置 */
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(40% 40% at var(--glare-x,50%) var(--glare-y,50%),
             rgba(139,150,198,.38), rgba(139,150,198,0) 72%);
  opacity:0; transition:opacity .30s ease;
}
.card:hover::after{ opacity:1; }
.card__no, .card__body{ position:relative; z-index:2; }

/* ============ Give-ai 定制：联系客服按钮（同款缩小）与弹窗 ============ */
.btn--sm{
  height:calc(var(--btn-h) * .82);
  padding:0 1.15vw;
  font-size:var(--fs-nav);
}
.kefu-modal{
  position:fixed; inset:0; z-index:95;
  display:none;
  align-items:center; justify-content:center;
}
.kefu-modal.is-open{ display:flex; }
.kefu-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(8,10,14,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.kefu-modal__panel{
  position:relative;
  width:min(92vw,360px);
  background:linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.028) 44%, rgba(255,255,255,.012) 100%), #30353e;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:24px 24px 24px;
  text-align:center;
  color:#EDEEF2;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}
.kefu-modal__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:transparent; color:#a9afbb;
  cursor:pointer;
}
.kefu-modal__close:hover{ color:#fff; background:rgba(255,255,255,.08); }
.kefu-modal__close i{ display:block; position:relative; width:16px; height:16px; }
.kefu-modal__close i::before,
.kefu-modal__close i::after{
  content:""; position:absolute; left:0; top:7.2px;
  width:16px; height:1.6px; background:currentColor; border-radius:2px;
}
.kefu-modal__close i::before{ transform:rotate(45deg); }
.kefu-modal__close i::after{ transform:rotate(-45deg); }
.kefu-modal__body h3{ margin:0 0 6px; font-size:22px; color:#fff; }
.kefu-modal__tip{ margin:0 0 12px; font-size:13px; color:#a9afbb; }
.kefu-modal__qr{
  display:block; width:min(78vw,240px); height:auto;
  margin:0 auto 14px;
  border-radius:12px; background:#fff;
}

.kefu-copy{
  width:100%; padding:11px 12px;
  border:0; border-radius:999px;
  /* Give-ai 定制 2026-09-19：与「进入控制台」同款灰蓝渐变（与粒子球同色），去掉突兀的高饱和蓝 */
  background:linear-gradient(160deg, #8B96C6 0%, #8390C1 55%, #7B89BC 100%);
  color:#fff;
  font-family:var(--font-ui); font-size:14px;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(131,144,193,.35), 0 6px 22px rgba(123,137,188,.30);
}
.kefu-copy:hover{
  background:linear-gradient(160deg, #7C88BA 0%, #7381B4 55%, #6B79B0 100%);
  box-shadow:0 0 0 1px rgba(131,144,193,.55), 0 8px 26px rgba(123,137,188,.42);
}
.kefu-copy b{ font-weight:600; }
.kefu-copy.is-saved{ background:linear-gradient(160deg, #7C88BA 0%, #7381B4 55%, #6B79B0 100%); box-shadow:0 0 0 1px rgba(131,144,193,.55), 0 8px 26px rgba(123,137,188,.42); }

/* ===== Give-ai fork 补丁：移动端可用性修正 =====
   由 sync-landing-to-fork.py 自动追加；要改请改脚本里的 CSS_APPEND，不要直接改这里。 */

/* ① 抽屉层级：.scene1__left / .scene1__right / .ticker 与 .menu 同为 z-index:var(--z-ui)=5，
      而 .menu 在 DOM 中位于 <main> 之前 —— 同级时后来者居上，跑马灯、大标题、粒子球会穿透到
      菜单之上，叠字难读。抬到 6 即可（桌面端 .menu 被 media query 关掉，不受影响）。 */
.menu{ z-index:6; }

/* ② 触摸热区：窄屏下 .logo 实测 101×32、.burger 实测 44×36，高度均不足 iOS HIG 的 44px，
      手指稍粗就容易点不准。用 ::after 把垂直热区补到 44px —— 视觉尺寸与位置完全不变，
      只扩大可点范围；只补高度不补左右，避免侵占相邻元素（.capsule / .nav__actions）的热区。 */
.logo, .burger{ position:relative; }
.logo::after, .burger::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  height:44px;
}

/* ③ 模型横条字号：.ticker__g span / .ticker__lbl 原写死 .86vw / .72vw（视口宽度百分比），
      桌面 1920px 下是 16.5px / 13.8px 尚可，到手机 393px 只剩 3.4px / 2.8px —— 几乎不可读，
      观感像一条糊掉的虚线。tokens.css 的小屏覆盖（max-width:1100px）漏掉了这两个选择器
      （它们没走 --fs-* 变量），这里补上固定字号。 */
@media (max-width: 1100px){
  .ticker__g span{ font-size:12px; }
  .ticker__lbl{ font-size:11px; }
}

/* ④ 说明段可读性：窄屏下 .lede（16px 灰字）正压在最密的粒子带上，字与粒子明度接近、
      读起来吃力。加一层白晕把文字从粒子背景里托出来 —— 不改布局、不动字号，桌面端不受影响。 */
@media (max-width: 1100px){
  .lede{ text-shadow:0 1px 10px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.8); }
}

/* ⑤ 横条与徽章的间距：③ 把横条字号从 3.4px 提到 12px 后，横条块从约 27px 长高到 62px，
      于是向下压住了 .scene1__left 里的「UNIFIED AI GATEWAY」徽章（实测重叠 32~39px）。
      窄屏（≤560px，即手机）把横条上移贴住导航下沿、徽章与大标题整体下移一档 ——
      实测间距 10~27px，且标题与说明段之间仍余 190px+。 */
@media (max-width: 560px){
  .ticker{ top:10.5vh; }
  .scene1__left{ top:21.5vh; }
}

/* ⑥ 隐藏场景吞点击（手机端菜单点不动 —— 2026-10-15 实机排查）：
      app.js 的虚拟滚动 tick 会按进度给 .scene2 设行内 pointer-events（p2>0.9 才 auto），
      但基础样式里 `.scene > *{pointer-events:auto}`（L274）与 `.card{pointer-events:auto}`（L463）
      又把 scene2 的子元素强行设回 auto —— pointer-events 本可继承，**但后代显式 auto 能覆盖祖先的
      none**，于是「看不见的第二屏卡片」照样接管点击。
      而 .scene2 在 DOM 中位于 .scene1 之后、二者同为 z-index:var(--z-scene)=2（同级后到者居上），
      .scene2 整体压在 .scene1 之上；窄屏抽屉菜单 .menu 恰是 .scene1 的子节点（其自身 z-index:6
      只在 scene1 的层叠上下文内有效，跨不出去）⇒ 实机实测菜单 6 项只有最上面 1 项「模型广场」可点，
      文档/关于/排行榜/联系开发者/进入控制台全部被卡片吞掉，而窄屏下 .capsule 与
      .nav__actions .btn--blue 又都被隐藏 —— 手机端因此彻底进不了控制台/登录。
      修法：把 scene2 子树改成「继承父级」。.scene2=none 时整棵子树不接管点击；
      滚到第二屏后 app.js 置 scene2=auto，卡片交互（含桌面端 3D 跟随）照常。
      .scene2 .card 用双类名把特异性抬到 (0,2,0)，稳胜基础 .card(0,1,0)；
      而 .scene2 > * 与基础 .scene > * 同为 (0,1,0)，靠补丁追加在文件末尾、同特异性后写者胜。 */
.scene2 > *{ pointer-events:inherit; }
.scene2 .cards{ pointer-events:inherit; }
.scene2 .card{ pointer-events:inherit; }

/* ⑦ 汉堡按钮可见性（手机端右上角「看不出是菜单」—— 2026-10-15 实机排查）：
      .burger 里的三根杠（<i> + ::before + ::after）原色 #ededed(237,237,237)，是**深色主题遗留**的
      浅线配色；而本落地页是浅色主题（.burger 底 = --capsule-fill = rgba(255,255,255,.55)）——
      实测杠色 vs 白底对比度仅 1.17:1（WCAG 对非文本 UI 组件要求 ≥3:1），白底白线 ⇒ 整块糊成一个白疙瘩。
      同时 .burger 边框 --glass-line-2 = rgba(11,11,12,.07) 也等于看不见，按钮轮廓不明确。
      修法：杠改墨色（约 19.7:1），边框提到 rgba(11,11,12,.24) 让轮廓可辨；
      不动尺寸/位置/热区（热区已由 ② 补至 44px）。桌面端 .burger 被 media query 关掉，不受影响。 */
.burger{ border-color:rgba(11,11,12,.24); }
.burger i, .burger i::before, .burger i::after{ background:var(--ink,#0B0B0C); }

/* ⑧ 窄屏第二屏「翻页」配套（2026-10-16）：原窄屏第二屏是「绝对定位 + vh 尺寸」——
      .cards 贴底(bottom:4vh) + 单列竖排，卡片区固定约 556px 高、**不随视口缩**；
      真机浏览器地址栏会吃掉 60~90px 视口高度，视口一矮卡片就整体上移压住上方文字
      （实测 375x577 重叠 8~69px、360x550 重叠 33~92px）。在「跟手渐进」下用户还能接着滑所以不明显，
      但改成「翻页」后第二屏固定不动，这个重叠会**固定暴露**。
      改法：窄屏第二屏改「普通流式 + 两列网格」——标题/说明/卡片按文档流自然堆叠
      （不再用 absolute + vh），从根上消除重叠；4 张卡由竖排(4x130+gap≈556px) 改为两列
      (2 行 ≈ 330px)，实测内容总高 417~437px，最小视口 550px 下仍留 113px 余量。
      仅 ≤560px 生效；桌面端与 561~1100px 区间完全不受影响。 */
@media (max-width: 560px){
  .scene2{ display:flex; flex-direction:column; justify-content:center; padding:5vh var(--gutter) 4vh; }
  .scene2__title{ position:static; white-space:normal; margin:0 0 1.4vh; }
  .scene2__lede{ position:static; width:auto; margin:0 0 3vh; font-size:14px; }
  .cards{ position:static; height:auto; display:flex; flex-direction:row; flex-wrap:wrap; gap:9px; }
  .card{ flex:1 1 calc(50% - 5px); min-height:0; padding:12px 13px; margin-top:0 !important; }
  .card__body{ gap:5px; }
}