/* ==========================================================================
   01 全局 Design System · Tokens
   紫色只允许出现在宇宙背景层，UI 层只有蓝
   ========================================================================== */

:root{
  /* ---- Color ---- */
  --bg:      #05070D;           /* 全站唯一底色（极深黑紫） */
  --nebula:  #17102D;           /* 星云层，仅背景画布使用 */
  --blue:    #1677FF;           /* 主色：CTA / 客服 / 当前章节 / 流星 */
  --hi:      #3D9CFF;           /* 高亮蓝：渐变 / 辉光 / 星点亮态 / hover 描边 */
  --text:    #F2F6FF;
  --muted:   #8C9BBF;
  --line:    rgba(61,156,255,.16);
  --line-2:  rgba(61,156,255,.28);
  --panel:   rgba(10,14,26,.55);
  --panel-2: rgba(10,14,26,.78);
  --grad:    linear-gradient(135deg, var(--blue) 0%, var(--hi) 100%);

  /* ---- 卡片色板：版图一览定下的六种面，全站复用 ---- */
  --card-wb:    linear-gradient(155deg,#FFFFFF 0%,#EEF6FF 22%,#C2DBF9 56%,#7FB2EC 100%); /* 白 → 蓝 */
  --card-blue:  linear-gradient(150deg,#2B8BFF 0%,#1677FF 42%,#0B55C7 100%);             /* 实蓝 */
  --card-kb:    linear-gradient(155deg,#04060C 0%,#07142C 32%,#103371 68%,#2166C6 100%); /* 黑 → 蓝 */
  --card-white: #FFFFFF;
  --card-lilac: #DCDEEF;
  --card-ink:   #06080F;
  /* 配套字色：浅底四档 / 深底三档 */
  --on-light-1: #0A0E17;   /* 标题 */
  --on-light-2: #46556F;   /* 正文 */
  --on-light-3: #1B4E96;   /* 小标签 */
  --on-light-4: #0B4FB8;   /* 数字 / 强调 */
  --on-dark-1:  #E8EFFB;
  --on-dark-2:  #C9D6EE;
  --on-dark-3:  #8FC5FF;
  --edge-light: rgba(22,119,255,.30);
  --edge-ink:   rgba(10,14,23,.14);
  --edge-deep:  rgba(61,156,255,.28);

  /* ---- Layout ---- */
  --maxw: 1460px;
  --pad:  5vw;
  --pad-l: 5vw;        /* 左侧留给竖向悬浮导航的水槽 */
  --gap:  24px;
  /* 版块上下留白。板块之间是贴着的，所以两屏之间的实际间距 = 2 × 这个值。
     140 时留白 280px，滚一屏还看不到下一段标题；72 → 间距 144px，
     上一屏内容刚滑出，下一段标题就露出来了。 */
  --sec-y: 72px;
  --mq-h: 34px;        /* 顶部跑马灯条高，Logo/CTA/进度条都按它让位 */

  /* ---- Motion ---- */
  --e-out:  cubic-bezier(.16,.84,.44,1);
  --e-io:   cubic-bezier(.65,0,.35,1);
  --e-soft: cubic-bezier(.22,1,.36,1);

  /* ---- z-index ---- */
  --z-bg: 0;
  --z-content: 2;
  --z-rail: 40;
  --z-marquee: 45;
  --z-brand: 50;
  --z-fab: 60;
  --z-menu: 80;
  --z-cursor: 9998;
  --z-intro: 9999;

  /* spotlight 坐标（cards.js 写入） */
  --x: 50%; --y: 50%;
}

/* 大屏：内容区随窗口适度展开，避免最大化后两侧出现过宽空带。 */
@media (min-width:1700px){
  :root{
    --maxw:min(1920px,94vw);
    --pad:3.5vw;
    --pad-l:5vw;
    --gap:clamp(24px,1.6vw,34px);
  }
}

/* ---- Typography ---- */
:root{
  --f-cn: "HarmonyOS Sans SC","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --f-en: "Space Grotesk","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --h1:   clamp(48px, 8vw, 112px);
  --bigw: clamp(40px, 6vw, 88px);
  --h2:   clamp(32px, 4.5vw, 56px);
  --h3:   clamp(20px, 1.5vw, 24px);
  --deco: clamp(80px, 15vw, 240px);
  --kick: clamp(11px, .9vw, 13px);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-cn);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img,svg,canvas{ display:block; max-width:100%; }
::selection{ background:var(--blue); color:#fff; }

/* 滚动条 */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#05070D; }
::-webkit-scrollbar-thumb{ background:rgba(61,156,255,.24); border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(61,156,255,.45); }

/* ---- 通用排印 ---- */
.kicker{
  font-family:var(--f-en);
  font-size:var(--kick);
  letter-spacing:.12em;
  text-transform:uppercase;
  /* 压暗写进颜色，不占 opacity —— opacity 要留给 [data-reveal] 的淡入，
     两边都用 opacity 的话，覆盖规则会把入场动画的起始透明度顶掉。 */
  color:rgba(61,156,255,.85);
}
.h2{
  font-size:var(--h2);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:.28em 0 0;
}
.grad{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad) 0 var(--pad-l);
  position:relative;
  /* 客服转盘的侧翼卡片、流程卡的斜向入场都会甩出内容列，
     裁在 padding box（正好是视口边）上：画面照旧能飞出去，但页面拖不出横向空白。
     用 clip 不用 hidden —— 不生成滚动容器，站内 sticky 不受影响；
     只裁横向，纵向仍是 visible。 */
  overflow-x:clip;
}

/* 左水槽：竖向导航与 Logo 共用，内容整体右移，互不遮挡 */
@media (min-width:1200px){
  :root{ --pad-l: clamp(148px, 12vw, 210px); }
}
@media (min-width:768px) and (max-width:1199px){
  :root{ --pad-l: 78px; }
}

/* ---- reduced motion：全站纯淡入 ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.2s !important;
  }
}