/* ===== 共享设计系统 · 液态玻璃 v2（低饱和 + 强玻璃 + 丝滑过渡）===== */
:root{
  --bg:#e9edf4; --bg2:#ffffff;
  --cyan:#2f7d8c; --violet:#6a6e9e; --teal:#3f8597; --indigo:#5f6a9c;
  --txt:#243244; --muted:#5b6678; --faint:#96a0b1;
  --glass:rgba(255,255,255,.40);
  --glass2:rgba(255,255,255,.58);
  --brd:rgba(40,55,75,.09);
  --r:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{font:16px/1.65 system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;color:var(--txt);background:var(--bg);min-height:100vh;overflow-x:hidden;letter-spacing:.1px}
a{color:inherit;text-decoration:none}
::selection{background:rgba(47,125,140,.16)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(40,55,75,.16);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(40,55,75,.26)}

/* 跨页面视图过渡（Chrome 支持）——让切换丝滑淡入淡出 */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:vtOut .26s cubic-bezier(.4,0,.2,1) both }
::view-transition-new(root){ animation:vtIn .34s cubic-bezier(.2,.7,.2,1) both }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-6px) scale(.995) } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(10px) scale(.995) } }
/* 首屏轻淡入 */
body{animation:pageIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* 背景：静态径向渐变(便宜) + 两团缓动光斑(合成器友好)，比原来 4 个大模糊省很多 */
.aurora{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(46vw 46vw at 12% 6%, rgba(150,176,214,.42), transparent 62%),
    radial-gradient(42vw 42vw at 90% 14%, rgba(180,174,208,.38), transparent 62%),
    radial-gradient(48vw 48vw at 50% 104%, rgba(160,206,198,.36), transparent 60%),
    linear-gradient(180deg,#eef2f9 0%,#e6ebf3 100%)}
.aurora b{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.5;will-change:transform;mix-blend-mode:screen}
.aurora b:nth-child(1){width:34vw;height:34vw;left:6vw;top:2vw;background:#9db8dd;animation:drift1 26s ease-in-out infinite}
.aurora b:nth-child(2){width:30vw;height:30vw;right:8vw;bottom:6vh;background:#c3bfe0;animation:drift2 32s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,6vh) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-5vh) scale(1.1)}}
.noise{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;top:0;left:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(90,110,150,.07),transparent 62%);transition:opacity .3s;opacity:0;will-change:transform}

/* 导航 — 液态玻璃条 */
.nav{position:sticky;top:0;z-index:60;display:flex;gap:6px;align-items:center;justify-content:center;padding:11px;
  background:rgba(255,255,255,.5);backdrop-filter:blur(24px) saturate(180%) brightness(1.05);-webkit-backdrop-filter:blur(24px) saturate(180%) brightness(1.05);
  border-bottom:1px solid rgba(255,255,255,.55);box-shadow:0 6px 26px -14px rgba(36,48,66,.3),inset 0 1px 0 rgba(255,255,255,.8)}
.nav a{position:relative;color:var(--muted);font-size:14px;font-weight:500;padding:8px 17px;border-radius:12px;transition:color .2s,background .2s}
.nav a:hover{color:#1a2433;background:rgba(255,255,255,.5)}
.nav a.active{color:#1a2433}
.nav a.active::after{content:'';position:absolute;left:16px;right:16px;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--indigo))}

/* 液态玻璃卡片 —— 折射边缘 + 内反光 + 底部柔影 */
.glass{position:relative;background:var(--glass);border:1px solid rgba(255,255,255,.55);border-radius:var(--r);
  backdrop-filter:blur(26px) saturate(185%) brightness(1.07);-webkit-backdrop-filter:blur(26px) saturate(185%) brightness(1.07);
  box-shadow:0 14px 44px -14px rgba(31,45,70,.30), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -16px 34px -22px rgba(120,140,180,.45);
  overflow:hidden}
/* 折射高光描边：左上强、右下弱一道回光 */
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(140deg,rgba(255,255,255,1),rgba(255,255,255,.3) 28%,transparent 52%,rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
/* 悬停：跟随鼠标的液态反光 + 上浮 + 光泽扫过 */
.glow-hover{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.glow-hover::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .45s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
.glow-hover:hover{border-color:rgba(255,255,255,.85);box-shadow:0 26px 60px -16px rgba(31,45,70,.34),inset 0 1px 0 rgba(255,255,255,1),inset 0 -16px 34px -20px rgba(120,140,180,.55)}
.glow-hover:hover::after{opacity:1}

/* 渐变文字 / 标签 */
.grad{background:linear-gradient(110deg,#3f8597,#5f6a9c 52%,#7a6f96);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tag{font-size:12.5px;background:rgba(47,125,140,.08);color:#2b6f7d;border:1px solid rgba(47,125,140,.2);padding:5px 12px;border-radius:999px}

/* 按钮 */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;border-radius:13px;padding:11px 22px;font:600 15px system-ui;color:#fff;
  background:linear-gradient(120deg,#3a8a9c,#5d6aa0);transition:.25s;box-shadow:0 12px 26px -12px rgba(58,107,140,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(58,107,140,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.ghost{background:rgba(255,255,255,.5);color:var(--txt);box-shadow:none;border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(10px)}
.btn.ghost:hover{background:rgba(255,255,255,.7)}

/* 滚动揭示 */
.js .reveal{opacity:0;transform:translateY(24px) scale(.99);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
[data-tilt]{transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.js .reveal{opacity:1!important;transform:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}