/* =========================================================
   CCH海轶堂 —— 门户首页样式
   独立于工作台的 app.css：首页是纯静态页，只引这一份样式。
   零外部依赖：所有图形都是 CSS 渐变或内联 SVG，断外网照常显示。
   ⚠ 改了这份文件记得同步改 index.html 里的 ?v= 版本号（静态资源有 12h 缓存）。
   ========================================================= */
/* 与 app.css 同名的这套变量给调色盘用，默认值两边保持一致，改一处记得同步另一处。
   --deep/--mid/--darkest 是首屏那道深色渐变的三段，--cyan 是光斑的亮色。 */
:root{
  --main:#0f766e; --accent:#0ea5a4; --cyan:#2dd4bf; --deep:#0b3f3b;
  --mid:#0d6a62; --darkest:#072e2b; --on-accent:#06322e;
  --main-rgb:15,118,110; --accent-rgb:14,165,164;
  --cyan-rgb:45,212,191; --deep-rgb:11,63,59;
  --soft:#e6f3f1; --soft-2:#f0f7f6; --soft-line:#a7f3d0; --card-tint:#f7faf9;
  --bg:#f0f5f4; --card:#fff; --line:#e5e7eb;
  --text:#111827; --muted:#6b7280; --faint:#9aa3ab;
  --radius:16px;
  --shadow-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 26px 52px -14px rgba(var(--deep-rgb),.30);
  --ease:cubic-bezier(.2,.8,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%; display:flex; flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
svg{display:block}
ul{list-style:none}

/* =========================================================
   首屏
   ========================================================= */
.hero{
  position:relative; overflow:hidden; flex:none; color:#fff; isolation:isolate;
  background:linear-gradient(152deg,var(--darkest) 0%,var(--deep) 36%,var(--mid) 76%,var(--main) 100%);
  padding:clamp(18px,2.6vw,26px) clamp(20px,5vw,72px) clamp(66px,9vw,120px);
}

/* 光斑：三个柔边径向渐变缓慢漂移，做出"极光"的流动感。
   刻意不用 filter:blur —— 渐变自身就有柔和边缘，省掉模糊滤镜在手机上更省电。 */
.orb{position:absolute; z-index:0; border-radius:50%; pointer-events:none}
.orb.a{
  width:54vw; min-width:430px; aspect-ratio:1; left:-10vw; top:-20vw;
  background:radial-gradient(circle at 50% 50%,rgba(var(--cyan-rgb),.30),rgba(var(--cyan-rgb),0) 62%);
  animation:drift1 26s var(--ease) infinite alternate;
}
.orb.b{
  width:46vw; min-width:370px; aspect-ratio:1; right:-8vw; top:-12vw;
  background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.32),rgba(var(--accent-rgb),0) 62%);
  animation:drift2 32s var(--ease) infinite alternate;
}
.orb.c{
  width:40vw; min-width:310px; aspect-ratio:1; left:30vw; bottom:-24vw;
  background:radial-gradient(circle at 50% 50%,rgba(var(--deep-rgb),.55),rgba(var(--deep-rgb),0) 66%);
  animation:drift3 38s var(--ease) infinite alternate;
}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vw,0) scale(1.14)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-5vw,5vw,0) scale(1)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,-3vw,0) scale(1.1)}}

/* 细网格：给大色块一点结构感；用遮罩向左上淡出，避免出现生硬的边界 */
.grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 96% at 16% 0%,#000 18%,transparent 76%);
  mask-image:radial-gradient(120% 96% at 16% 0%,#000 18%,transparent 76%);
  animation:gridPan 44s linear infinite;
}
@keyframes gridPan{from{background-position:0 0,0 0}to{background-position:64px 64px,64px 64px}}

/* 一道缓慢扫过的光带（用 transform 动画，走合成层不触发重排） */
.beam{
  position:absolute; top:-30%; left:-42%; width:32%; height:170%; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.10),rgba(255,255,255,0));
  transform:rotate(13deg);
  animation:beamSweep 10s ease-in-out infinite;
}
@keyframes beamSweep{0%{transform:translateX(0) rotate(13deg)}60%,100%{transform:translateX(420%) rotate(13deg)}}

.hero-inner{position:relative; z-index:2; max-width:1120px; margin:0 auto}

.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.22em; color:rgba(255,255,255,.64);
  padding-bottom:clamp(42px,6.4vw,74px);
}
.topbar .mark{display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:700; letter-spacing:.2em}
.topbar .logo{
  width:26px; height:26px; flex:none; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--cyan));
  box-shadow:0 6px 16px rgba(var(--accent-rgb),.35);
}
.topbar .logo svg{width:15px; height:15px; color:var(--on-accent)}

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.3em; color:rgba(255,255,255,.74); margin-bottom:20px;
}
.eyebrow::before{content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent)}

h1{font-size:clamp(30px,5.4vw,58px); font-weight:700; line-height:1.14; letter-spacing:.1em}
h1 .pre{display:block; font-size:.42em; font-weight:600; letter-spacing:.26em; opacity:.78; margin-bottom:12px}

.lede{
  margin-top:22px; max-width:52ch;
  font-size:clamp(14px,1.5vw,16.5px); line-height:1.95; letter-spacing:.04em;
  color:rgba(255,255,255,.78);
}

.cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:34px}
.btn-main{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-size:14.5px; font-weight:700; letter-spacing:.08em;
  color:var(--on-accent); background:linear-gradient(120deg,var(--accent),var(--cyan));
  box-shadow:0 15px 32px -10px rgba(var(--accent-rgb),.6);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.btn-main:hover{transform:translateY(-2px); box-shadow:0 22px 42px -12px rgba(var(--accent-rgb),.75)}
.btn-main svg{width:17px; height:17px; transition:transform .28s var(--ease)}
.btn-main:hover svg{transform:translateX(3px)}
/* 掠过按钮的一道高光 */
.btn-main::after{
  content:""; position:absolute; inset:0; transform:translateX(-130%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transition:transform .75s var(--ease);
}
.btn-main:hover::after{transform:translateX(130%)}

.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px;
  font-size:14px; letter-spacing:.08em; color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.06);
  transition:background .25s,border-color .25s,transform .28s var(--ease);
}
.btn-ghost:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); transform:translateY(-2px)}

.hero-meta{
  display:flex; flex-wrap:wrap; gap:14px 40px;
  margin-top:46px; padding-top:26px; border-top:1px solid rgba(255,255,255,.13);
}
.hero-meta li{display:flex; align-items:baseline; gap:9px}
.hero-meta b{font-size:clamp(20px,2.2vw,27px); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em}
.hero-meta span{font-size:12.5px; letter-spacing:.12em; color:rgba(255,255,255,.64)}

.scroll-hint{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:10.5px; letter-spacing:.24em; color:rgba(255,255,255,.46);
}
.scroll-hint svg{width:16px; height:16px; animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0); opacity:.5}50%{transform:translateY(6px); opacity:1}}

/* 首屏入场：标题与按钮依次升起 */
@keyframes riseIn{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.hero-inner > *{animation:riseIn .82s var(--ease) both}
.hero-inner > .topbar{animation-delay:.05s}
.hero-inner > .eyebrow{animation-delay:.14s}
.hero-inner > h1{animation-delay:.22s}
.hero-inner > .lede{animation-delay:.30s}
.hero-inner > .cta{animation-delay:.38s}
.hero-inner > .hero-meta{animation-delay:.46s}

/* =========================================================
   主体
   ========================================================= */
.body{
  flex:1; width:100%; max-width:1120px; margin:0 auto;
  padding:clamp(46px,6vw,78px) clamp(20px,5vw,72px) clamp(40px,5vw,66px);
}
.sec{margin-bottom:clamp(48px,6vw,80px)}
.sec:last-child{margin-bottom:0}

.sec-head{
  display:flex; align-items:center; gap:14px;
  font-size:12.5px; letter-spacing:.3em; color:var(--muted);
  margin-bottom:26px;
}
.sec-head::before{content:""; width:18px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--main),var(--accent))}
.sec-head::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent)}

/* ---------- 模块卡片 ---------- */
.entries{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

.entry{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 24px; box-shadow:var(--shadow-sm);
}
/* 顶边一道渐显的彩条 */
.entry::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--main),var(--accent));
  transition:width .42s var(--ease);
}
a.entry{transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s}
a.entry:hover{transform:translateY(-6px); border-color:rgba(var(--main-rgb),.38); box-shadow:var(--shadow-lg)}
a.entry:hover::before{width:100%}
/* 悬停时斜向掠过的柔光（超出部分被卡片裁掉） */
.entry::after{
  content:""; position:absolute; inset:-45% -65%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg,transparent 42%,rgba(var(--accent-rgb),.13) 50%,transparent 58%);
  transition:opacity .3s;
}
a.entry:hover::after{opacity:1; animation:sheen 1.1s var(--ease)}
@keyframes sheen{from{transform:translateX(-42%)}to{transform:translateX(42%)}}

.entry .ico{
  width:48px; height:48px; border-radius:13px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--main-rgb),.09); color:var(--main);
  transition:transform .34s var(--ease),background .34s;
}
.entry .ico svg{width:23px; height:23px}
a.entry:hover .ico{transform:translateY(-2px) scale(1.06); background:rgba(var(--main-rgb),.14)}

.entry h2{font-size:19px; font-weight:700; letter-spacing:.1em}
.entry .desc{margin:10px 0 22px; font-size:13px; color:var(--muted); line-height:1.9}
.entry .foot{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.5px; letter-spacing:.14em;
}
.entry .go{color:var(--main); font-weight:600}
.entry .arw{width:16px; height:16px; color:var(--main); transition:transform .28s var(--ease)}
a.entry:hover .arw{transform:translateX(4px)}

/* 尚未开放的模块：整体压暗，不用虚线边框等廉价手法 */
.entry.is-pending{background:#fbfcfc}
.entry.is-pending .ico{background:#f1f3f4; color:var(--faint)}
.entry.is-pending h2{color:#4b5563}
.entry .wait{color:var(--muted); letter-spacing:.2em}

/* ---------- 能力卡片 ---------- */
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px}
.cap{
  display:flex; gap:14px; align-items:flex-start; padding:18px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.cap:hover{transform:translateY(-4px); border-color:rgba(var(--main-rgb),.32); box-shadow:0 18px 34px -16px rgba(var(--deep-rgb),.32)}
.cap .ci{
  width:38px; height:38px; flex:none; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--main-rgb),.08); color:var(--main);
  transition:background .3s,color .3s;
}
.cap .ci svg{width:19px; height:19px}
.cap:hover .ci{background:var(--main); color:#fff}
.cap h3{font-size:14.5px; font-weight:700; letter-spacing:.04em}
.cap p{margin-top:5px; font-size:12.5px; color:var(--muted); line-height:1.8}

/* =========================================================
   页脚（含 ICP 与公安备案）
   ========================================================= */
.foot-bar{
  flex:none; border-top:1px solid var(--line); background:#fff;
  padding:26px clamp(20px,5vw,72px); text-align:center;
  font-size:12px; color:var(--muted);
  display:flex; flex-direction:column; gap:9px; align-items:center; letter-spacing:.18em;
}
.foot-bar .brand{color:#4b5563; letter-spacing:.22em}
.fb-links{display:flex; align-items:center; justify-content:center; gap:4px 20px; flex-wrap:wrap; letter-spacing:.08em}
.fb-links a{display:inline-flex; align-items:center; gap:6px; min-height:22px; transition:color .2s}
.fb-links a:hover{color:var(--main)}
/* 公安备案图标：备案平台下发的官方图标（20×20 PNG），已 base64 内联，
   浏览器不会再发任何图片请求，断外网照常显示。
   原图 19KB，这里去掉了 PNG 里的 XMP/ICC 元数据（400 个像素逐一比对完全一致）后只 1.3KB。
   源文件：public/static/img/beian.png；要改成外链引用，把 background 换成
   url("/static/img/beian.png") center/contain no-repeat 即可。 */
.fb-links .gb::before{
  content:""; width:15px; height:15px; flex:none;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFDUlEQVQ4y0XU228c9RnG8e8cdnZ29jRrr3e99aYBxwpOIME0SVuo66RpBWllDPJFIAhVRYRjRVGrctPSC0Qv6A2oqKWt0lw0KBetQEKNo5QkBBVIRKAoKUmUg3Ecx2vHsffg3dmdw87O/HoR1f4HPnpe6XleSQgBdguAEBlZhDhaiVikF2j22lfPjH145POnPKej7bj/7n1dmze/B/0lzxNEHQdkCZABIJVEEkLg23WQBHIgULQM8NGOySNHnzv5rytjwpnUZz0DJWOyNqvjlI3O8Pf7JzY8OL5fBLdNCK+JkCRAoKT7btENyaIplhFGBjRXP/Gn/R/++Onju5vujL4+obBXv8mz+iz33Zun6968uvfpYw8fffO1Q1JM0WxNwuU/+OoXsJJVkZGVFKpcKXpnXn3/9wfr7Nnbz0+KDdJ/uUDlckBlKqA++mceCs7x4oFH2feuj7j813cThqvLegI9Hl0FE55FPFofvD7x8tTI6LkRcyDPT7PnmD7YQF5jElht8EKkHpNTL5xkt3GG/Hfu4Qejh0eXPtk/bc+cXX/xg3+uglHPQXXfTxy6nNQ+m9/KD7daNM82kK/Xkcwo0WqAe/Imkdu70ZsO5b+dZvyBNie+2sjbHwe9CallIA+tgvWlcjH89IM3QikGqk3KmqexAJHAh6qLtM5A22Ii32ihEVKedujr8kCSqDVloj3qG4PD47etgDOXjo235+aGMwkNOlFEoUB2uJcmAuu+boI9RRKvDGG8uBm5xyC3JUvLboMQFHIGlM7uqM6eenIFNBKZOxuWT3+PC3o3R08bqDtTVB5cSzBnIX3Zwj58E396Ge2lYbp+fjfvHKgBcYY2qbSmFnFLU8UVMKzOjzZqKncVLYrf1Hjr7Tj/fq3E0LYCaSOJfaFGuOjhnquRnFvm/KtXePNAlPyQyaa+OuU5D796aXgFlNWWaTVkUktX2P1AQMdP4E8s0P33L5D7IrR7FMKcSnZngcKJq5T3nafVVhgfi5CsTGI1VNSkrAGoADHj68flO66NBfk+nviWxet9Pbw1twF/9gLdlUnkdAznQg1rIMdcpsA/5BikTJ749iKdZBHzTgkjs2ZiBQQ5JxqC+SmLuzZM89tfbuHll0aYsDZBw2fMrtBlyrxzOEkTA8jwi+d1tg1MMj8JuDZhxxpaAVWzvbWTzOMv+JQWL/Kz4Sjjx+OcOGJzSd7Mro1fUYiV6Rzqo11zWDNo8Ktd17h56hq2r6NnNVRTGwRuPQev+dljldO/O+gstPHKPpRmWPfwENG8DkGFoKLSXHRI394Fa7uhVGb6vcs4ySyJ/gSxXoP0wJ7tWuZHH0lCCAA6rf8+Xj3/+h8D10mVP15AjQt6t28gqDr4dgvZ0NG74khahMqpKTqBSnrrOnyXavqOkUfiZuq4pN1/62TfmcFZckruQszW82Eqv3OAoN4isBpgaCiaiRaD9nKTVqmGvrYbvZjHW7Zx56wwtqaJkkoR+39tRPsqCp/8OveNZG8kU8Crh4SBShgouEsWiJB2pU5zcglJiYAk4d4oE4nJ5L9byGqG9UzosLplTUkR7d72kGWn/2CXSramLJPKdYhINprko3jLCMchOZglNZBC1pqoaQ0p03u9o97zG9VY/4iiLbFaG+EjRVS7UYm/4FzMv+LUl3Z5/uz3vraxZ2NoSQndlLvUWBLrBtdjPaat5kbOVqcWjzkztaN923OhpCiIwAXgfy17NxK98SWXAAAAAElFTkSuQmCC") center/contain no-repeat;
}

/* =========================================================
   响应式
   ========================================================= */
@media(max-width:900px){
  .entries{grid-template-columns:1fr 1fr}
  /* 窄屏关掉光斑漂移：省电，也避免低端机因为大面积重绘掉帧 */
  .orb{animation:none}
}
@media(max-width:640px){
  .entries{grid-template-columns:1fr}
  .topbar{padding-bottom:34px; letter-spacing:.16em}
  .hero p.lede{margin-top:18px}
  .cta{gap:10px; margin-top:28px}
  .btn-main,.btn-ghost{padding:13px 20px; font-size:14px}
  .hero-meta{gap:12px 26px; margin-top:32px; padding-top:20px}
  .scroll-hint{display:none}
  .sec-head{letter-spacing:.24em; margin-bottom:20px}
  .entry{padding:24px 22px}
}

/* 尊重系统的"减少动态效果"设置 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .orb,.grid,.beam,.scroll-hint svg{animation:none!important}
  .hero-inner > *{opacity:1!important; transform:none!important}
}